[jQuery] Superfish - How do I make superfish respond to onclick instead of hover?
I am using superfish and I am wondering how I can go about changing the hover event to click so that when people hover over the links it doesn't do anything until they click them. Thanks, Spencer
[jQuery] Re: Loading a Page in an Iframe with BlockUI
Thanks JohnZ/Eric. That works perfectly!
Chris
On Wed, Jul 29, 2009 at 1:23 PM, Eric Martinemarti...@gmail.com wrote:
Chris,
Regarding SimpleModal, wouldn't this accomplish what you are looking
for?
$.modal('iframe src=http://www.ericmmartin.com; id=iframeTest
name=iframeTest height=450 width=830 style=border:0 /', {
closeHTML:,
overlayClose:true,
containerCss: {height:450, width:830}
});
That's with SimpleModal v1.3.
-Eric
On Jul 29, 7:24 am, Chris chriss...@gmail.com wrote:
How would you load a separate page in an iframe with BlockUI?
I tried:
forceIframe:true,
iframeSrc:'/iframepage.html'
but BlockUI still creates the default Please wait... overlay, but
also creates a seemingly separate iframe overlay, but without applying
any of the CSS properties to it.
If BlockUI doesn't have this functionality, so any of the other
overlay plugins support it? I've tried jqModal and SimpleModal, but
none of them seem to explicitly support this.
Regards,
Chris
[jQuery] [autocomplete] move select list next to input in DOM
I've got an application where I need the select list (the dropdown menu) to be created inside the parent of the input object, rather than at the end of the body. Briefly: we're doing an autocomplete box inside a spring-loaded fly- out element. The element is shown by a hover event. When the cursor is moved out of the element, it is hidden. When the autocomplete list is at the end of the body, moving the cursor over it causes the the fly-out element to be hidden. (Not my design, I just have to implement it!) I came up with the following simple mods to jquery.autocomplete.js that seem to accomplish what I want. Are there some hidden gotchas that will bite me later? Is this something that could be added as an option? In $.Autocomplete.Select().init(), change the argument to appendTo, below: element = $(div/) .hide() .addClass(options.resultsClass) .css(position, absolute) .appendTo($(input).parent()); in $.Autocomplete.Select().show(), change the initialization of the var offset to use position() rather than offset(): var offset = $(input).position();
[jQuery] Return Dynamic Image using Ajax and PHP
Hi,
I have a PHP script that is generating an image based on values passed
to the script using jQuery Ajax functionality. Here is the important
part of the PHP script;
header('Content-Type: image/jpeg');
imagejpeg($image, 'images/tmp/admin.preview.jpg');
imagedestroy($image);
I can get the image to display just fine without using Ajax. I would
prefer not to store the image locally on the server, but instead have
the preview image display temporarily in memory. I have the following
jQuery code implemented that sends the form data to the PHP script,
which generates the dynamic image for preview using jpeg image
stream.
$(document).ready(function()
{
var options = {
target: '#preview-wrapper',
type: 'post',
cache: false,
url:'admin.preview.php', // return raw jpeg stream (see
above php code)
success:function(html) {
// attempted creating an image tag, then pointing to
the php script
directly. Neither works properly.
}
};
// pass options to ajaxForm
$('#formAdmin').ajaxForm(options);
});
Hopefully someone can help answer the following questions;
1) What is the best way to accomplish this task? (i.e. return image
stream, return HTML image tag pointing to the locally stored jpeg,
etc...)
2) Could someone help me with the jQuery code?
Thanks in advance for any help or direction.
[jQuery] Drop down select list with images plugin?
Does anyone know of a jQuery plugin that allows you to create drop down select lists with images like the ones used at onlineshoes.com? See link below, the select lists I'm referring to are the size and color selectors. http://www.onlineshoes.com/productpage.asp?gen=mpcid=129007 Thanks in advance.
[jQuery] Re: Html navigation menus
Thanks Joel. I'll have to give Superfish another try.
[jQuery] Html navigation menus
I was wondering if anyone has done the following with jQuery or if anyone knows of a plugin that does the same. If you refer to the target.com home page and mouseover one of the main nav buttons, like women. You'll see that a large html menu comes down. What I need to do is similar, but with a twist. I need a main nav that has several buttons. When the services button is moused over the typical drop-down menu will appear with 3 menu items, like Service1, Service2 and Service3. When the user mouses over any one of these three sub-services a large html menu should appear to the right, each of these may be a different width and height. I haven't been able to get superfish or my custom code to work properly. I'm having trouble with the mouse over and mouse out states with my custom code. Does anyone have any experience in this type of navigation or know of an existing plugin that should help? Thanks in advance.
[jQuery] Re: Sites Using jQuery
I was just on CapitalOne.com and they are using jQuery as well. On Jun 1, 11:35 am, Rey Bango [EMAIL PROTECTED] wrote: From Twitter: Jisko (alpha.jisko.net») Vine (http://vine.feedprocess.com/) use jQuery. Be sure to follow @jquery for news, sites and tips. Rey...
[jQuery] Dynamic forms and jQuery
I'm trying to create an order form where the user starts out with a single row of form inputs for entering quantity and part number. The user should be able to click the add row which creates the next row of form inputs. When all rows have been filled in, the the user will submit the form and the back-end PHP script will process the name / value pairs. Does anyone know of an example like this that I could learn from? Are there any jQuery plug-ins that might make working with dynamically adding form elements more streamlined? Thanks.
[jQuery] 3D Carousel Control Hot Spots
I have implemented the Interface 3D Carousel, but I need to have external controls that can be moused over to cause the rotation to occur just like when mousing over the lower corners of the carousel. These right and left rotation controls must be outside the carousel div. Does anyone know if this is possible? Thanks.
[jQuery] Cycle Plugin and IE7 alignment offset
First off... great work on the Cycle plugin. I have a set of rotating
logos using Cycle and it works and looks great on FireFox, but IE7 has
one problem. The logo images are indented to the right about 100px.
If I remove all the images but one, then the image goes back to the
left just like on FireFox. The example is currently on a secure site
so I can't provide a URL, but the following code might help? Any
suggestions on how this problem can be corrected?
Thanks.
HTML Code:
div class=preferred-partner-box
div class=preferred-partner-hdrpreferred partners/div
div id=preferred-partner-rotatea href=links/
partners_insite.phpimg src=links/images-partners/
logos_partners_isd.png border=0 width=140 height=80 alt= //
aa href=links/partners_lock.phpimg src=links/images-partners/
logos_partners_lock.png border=0 width=140 height=80 alt= //
a/div
div class=callout-boxes-more-linksa href=links/
partners.phpmore partners /a/div
/div
CSS Code:
.preferred-partner-box {
width: 204px;
height: 110px;
border: 1px solid #CED2D8;
margin-top: 8px;
margin-bottom: 30px;
z-index: 9000;
}
.preferred-partner-hdr {
width: 134px;
color: #00;
font: bold 12px Trebuchet MS;
height: 24px;
line-height: 24px;
letter-spacing: 0.025em;
text-transform: uppercase;
text-align: left;
text-decoration: none;
margin: -12px 20px 0px 4px;
padding: 0px 0px 0px 4px;
background-color: #FF;
z-index: 9010;
}
div#preferred-partner-rotate {
width: 204px;
height: 90px;
margin: auto;
z-index: 9000;
}
div#preferred-partner-rotate a img {
z-index: 9000;
}
[jQuery] Re: cluetip plugin prevents click event
Karl,
Thank you for making the modification. I'm trying to do the same thing
as driven. Your modification works great in my situation.
Spencer
On Dec 6, 9:30 am, Karl Swedberg [EMAIL PROTECTED] wrote:
Hi guys,
The default is to return false on a link click if the href and the
tipAttribute (which is rel by default) are equal.
Your request seems like a reasonable one, though, so I've added (yet
another) option called clickThrough. If you set it to true, clicking
on the link should open the linked page (provided you don't have
activation set to click).
I haven't bundled it up yet, because I'm still ironing out the details
on another new feature (mouse tracking), but it's in svn, if you want
to give it a whirl:
http://jqueryjs.googlecode.com/svn/trunk/plugins/cluetip/jquery.cluet...
--Karl
_
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Dec 6, 2007, at 10:15 AM, DaveG wrote:
driven wrote:
I am using cluetip to put tooltips on the links in a search results
page. I have the 'activation' setting as 'hover' but unfortunately
cluetip cancels the normal click event and I can't actually follow
the
links. I don't see any examples or settings that will let me actually
click on the links. Is this possible?
I'm not 100% sure, but I seem to recal that this might be what
you're looking for:
onActivate: function(e) {return true;}
That should be the default though, so not sure if you've overridden
it.
~ ~ David- Hide quoted text -
- Show quoted text -
[jQuery] Cluetip bug in IE7 - browsers title displays
I'm trying to use the Cluetip plugin to display data on mouseover of
the tr tag. The data displayed is stored in the title attribute. It
works great in FireFox, but in IE7 the browsers default title displays
along with the Cluetip. Am I missing an option that would allow
Cluetip to override the browsers default title display?
$('tr.toolTipTitle').cluetip({
cluetipClass: 'jtip',
clickThrough: true, /* Set to true for allowing click to go through
*/
width: 360,
arrows: true,
dropShadow: true,
hoverIntent: true,
sticky: false,
mouseOutClose: true,
splitTitle: '|',
waitImage: true,
tracking: false,
fx: {
open: 'fadeIn',
openSpeed: ''
},
hoverIntent: {
sensitivity: 3,
interval: 100,
timeout: 30
}
});
tr class=toolTipTitle title=This is the title|Content that goes
below the title
Thanks.
[jQuery] Image Rotator Plugin?
I'm looking for a jQuery based image rotator plugin, does anyone know of one that is light weight? It really only needs to be able to rotate a group of images as a set interval with basic fadein and fadeout transitions. If it could rotate text along with the image that would be great, but right now not a requirement. Thanks in advance.
[jQuery] Re: Image Rotator Plugin?
Flipping through images is exactly what I need. The Cycle plugin appears to be what I'm looking for. Thanks. On Nov 26, 9:43 am, Andy Matthews [EMAIL PROTECTED] wrote: By rotate, do you mean flipping through a group of images, displaying one at a time? Or do you mean actually rotating the image in degrees so that you could flip it upside down? If you're just looking to flip through a group of images, then I'd look no further than the Cycle plugin from Mike Alsup. It's superb: http://www.malsup.com/jquery/cycle -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Spencer Sent: Monday, November 26, 2007 11:39 AM To: jQuery (English) Subject: [jQuery] Image Rotator Plugin? I'm looking for a jQuery based image rotator plugin, does anyone know of one that is light weight? It really only needs to be able to rotate a group of images as a set interval with basic fadein and fadeout transitions. If it could rotate text along with the image that would be great, but right now not a requirement. Thanks in advance.- Hide quoted text - - Show quoted text -
[jQuery] Re: Image Rotator Plugin?
Excellent plugin Mike. It works great and has lots of features. Thanks. On Nov 26, 12:07 pm, Andy Matthews [EMAIL PROTECTED] wrote: My pleasure...but make sure to thank Mike too, he's on this list. -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Spencer Sent: Monday, November 26, 2007 1:57 PM To: jQuery (English) Subject: [jQuery] Re: Image Rotator Plugin? Flipping through images is exactly what I need. The Cycle plugin appears to be what I'm looking for. Thanks. On Nov 26, 9:43 am, Andy Matthews [EMAIL PROTECTED] wrote: By rotate, do you mean flipping through a group of images, displaying one at a time? Or do you mean actually rotating the image in degrees so that you could flip it upside down? If you're just looking to flip through a group of images, then I'd look no further than the Cycle plugin from Mike Alsup. It's superb: http://www.malsup.com/jquery/cycle -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Spencer Sent: Monday, November 26, 2007 11:39 AM To: jQuery (English) Subject: [jQuery] Image Rotator Plugin? I'm looking for a jQuery based image rotator plugin, does anyone know of one that is light weight? It really only needs to be able to rotate a group of images as a set interval with basic fadein and fadeout transitions. If it could rotate text along with the image that would be great, but right now not a requirement. Thanks in advance.- Hide quoted text - - Show quoted text-- Hide quoted text - - Show quoted text -
[jQuery] Re: document.ready in an ajax response
Arrix,
Thanks for the reply. So, in an ajax response snippet, does it make
the most sense just to make javascript calls directly. Could there be
an issue with the DOM in the response snippet not being fully loaded
before the script functions are called. I tried doing something like
this in the response snippet but it doesn't work:
div id='some_div'
input type='button' id='preview' value='Preview'/
/div
script type=text/javascript
//![CDATA[
$('#preview').load(function() {
$j('#preview').click(function() {
$j('#confirmation').show()
});
});
alert('Hi')
//]]
/script
Now just doing this and it works but I am worried that #preview may
not be guaranteed to be loaded before the javascript calls:
script type=text/javascript
//![CDATA[
$j('#preview').click(function() {
$j('#confirmation').show()
});
alert('Hi')
//]]
/script
On Sep 30, 1:48 am, Arrix [EMAIL PROTECTED] wrote:
document.ready won't trigger anymore after the page has been loaded.
Seehttp://dev.jquery.com/ticket/904
So avoid $(document).ready() in ajax response snippet.
new function() {
alert('Hi')
}
You are actually creating a new instance using an anonymous constructor. The
constructor is invoked while evaluating the argument for ready().
On 9/29/07, Curtis Spencer [EMAIL PROTECTED] wrote:
Hi,
I have a page that makes an Ajax request that gets a a snippet of html
that includes the following tag:
script type=text/javascript
//![CDATA[
$j(document).ready(function() {
alert('Hi')
});
//]]
/script
Nothing happens in this case. However, if i change the tag to this:
script type=text/javascript
//![CDATA[
$j(document).ready(new function() {
alert('Hi')
});
//]]
/script
The alert happens. Can someone please illustrate the difference, and
why the first one doesn't work? All the examples I see of $
(document).ready never has the new in front of function. Also, is
this the right way to call jquery from an ajax response. The parent
doesn't necessarily know what is going on in this child, so I can't
put it in the success handler of the ajax get call.
Thanks,
Curtis
--
Arrix
[jQuery] document.ready in an ajax response
Hi,
I have a page that makes an Ajax request that gets a a snippet of html
that includes the following tag:
script type=text/javascript
//![CDATA[
$j(document).ready(function() {
alert('Hi')
});
//]]
/script
Nothing happens in this case. However, if i change the tag to this:
script type=text/javascript
//![CDATA[
$j(document).ready(new function() {
alert('Hi')
});
//]]
/script
The alert happens. Can someone please illustrate the difference, and
why the first one doesn't work? All the examples I see of $
(document).ready never has the new in front of function. Also, is
this the right way to call jquery from an ajax response. The parent
doesn't necessarily know what is going on in this child, so I can't
put it in the success handler of the ajax get call.
Thanks,
Curtis
[jQuery] Proper use of the hoverIntent plug-in?
I'm trying to use the hoverIntent plugin with jQuery, but I don't
fully understand how it works and was hoping someone could help me out
with a few issues I'm having.
The page I'm working on is at http://schollsferryauto.com , the two
buttons in the upper right corner of the page which are Hours and
Locations are where I'm having problems. The original intent was to
allow someone to mouseover these buttons where an information window
would expand down and disappear on mouseout. This works to some
degree, but I'm having a problem when you then move the mouse down
over the new windowed area. It tends to close and then reopen when
moving the mouse over different areas instead of staying open. I'm
using nested DIV tags to create each of the boxes that drop down. I
need multiple DIV tags for the rounded corners effect that should be
applied around each box using the curvy corners jQuery plugin.
Right now it seems to work the best with the following code for the
hours button and drop down window.
$(#btn_hours,#menu-hours-down).hoverIntent({
sensitivity: 2,
interval: 750,
over: menuHoursOpen,
timeout: 1250,
out: menuHoursClose
});
What is the proper code? Should I include all nested DIV ids or just
the parent?
Also, can a hoverIntent event along with a click event be applied to
the same element? This would be in cases where the user might want
to click instead of waiting for the hoverIntent to trigger - or for
the users who don't slow the mouse down long enough for it to trigger.
On another issue... I have another problem with the customer quotes drop
down when moused over it should open downward using hoverIntent and
stay open as long as the mouse is over any part of this dropdown.
There is a link on here that may need to be clicked by the visitor.
This seems to work most of the time, but from time to time I move the
mouse over the drop down and it will collapse or collapse and reopen
rapidly. This quirk seems to only happen after you've closed it once
and then try to open it again.
There is a second problem with the customer quotes in IE7, when it's
in the open state. You'll notice the customers quotes box displays
behind the Welcome and callout box with the picture and text. I've
upped the z-index on the customer quotes elements and still can't get
it to work properly. What am I missing? (I'm sure it's probably right
in front of my face)
I would really appreciate any help someone can provide, I've almost
given up trying to get this issues resolved.
Thank you in advance.
[jQuery] Re: Problem with manipulating imagemaps?
Howie,
I have a similar problem and posted a question a few weeks ago without
receiving any responses. In my situation we have one image that is
basically a front and back image. However, the image map needs to
have different hot spots depending on if the viewer is looking at the
front or the back. I have tried to use html() to re-write the image
map html code and then remove() to take out the old. I'm able to see
the image map code swap out, unfortunately the hot spots stay are
still the same as the removed image map. It's almost like the browser
needs to reload the DOM after the HTML change, but that doesn't make
any sense to me.
I'm fairly new to jQuery and not very advanced with JavaScript so this
has been a major challenge. Right now that project has been put on
hold so I'm not sure when I'll get back around to it, when I do and if
I find a solution I will post the solution here. Either way I would
like to make jQuery work.. I really don't want to use Flash.
Spencer
On Aug 7, 6:48 am, Howard Jones [EMAIL PROTECTED] wrote:
[sorry if this is a duplicate - it looks like I sent the first one to
the old list address]
My application uses client side imagemaps to allow the user to interact
with a server-drawn dynamic image. So to do that, each time the image is
changed, it needs to download a new imagemap with new areas (things have
moved within the image).
Here's my code to do that:
$.get('editor-backend.php',{ map: mapfile, cmd: imagemap },
function(cont) {
$('map#weathermap_imap').empty()
$('map#weathermap_imap').append(cont);
console.log('I did try');
console.log(cont);
});
The console log shows that a valid chunk of area tags was fetched, but
using firebug's HTML inspector, all that *actually* appears between the
map tags is ', ' - a comma, and a space. If I try and append a small
piece of text it's OK (but useless). If I try and append a single area
'by hand', that fails too, as does using the alternative
.append($('area')).
Here's a small piece of the imagemap:
area alt=NODE:node00364 id=NODE:node00364 shape=rect
coords=126.5,217.5,319.5,234.5 /,
area alt=LINK:node00364-node20108:2 id=LINK:node00364-node20108:2
shape=poly
coords=224,222,254,231,275,237,298,244,334,255,335,251,348,263,330,266,332,262,296,252,272,245,252,238,221,229
/
area alt=LINK:node00364-node20108:0 id=LINK:node00364-node20108:0
shape=poly
coords=475,297,462,293,444,288,424,281,400,274,375,267,364,264,366,260,348,263,361,275,362,271,373,275,398,282,421,289,442,295,459,300,472,304
/
Is there some limitation on dealing with imagemaps? Am I doing something
dumb, or is this a bug?
The same imagemap delivered to the browser as part of a 'traditional'
page works just fine... has anyone else done this kind of thing
successfully? Thanks in advance for any pointers to save my sanity :-)
Howie
[jQuery] Swapping out an image map using jQuery
I have an image with an image map assigned -- which works properly. However, I have a second image map that needs to be swapped in so it overwrites the first image map. I'm using jQuery and .html() to insert the second image map, but when I mouse over the second image map it appears to be the first image map. I monitor the swap out using firebug and do see the first image map code get removed and the second image map code is added. However, the new image map hot spots never work. Do I need to do something to activate the new image map in the DOM? I would appreciate any help. Thanks.
[jQuery] ptTimeSelect plugin with focus() on form input
I would appreciate any help trying to understand how I'm supposed to
solve this problem with jQuery and the ptTimeSelect jQuery plugin.
The ptTimeSelect plugin works as it is designed by clicking the icon
which appears to the right of the input field. However, I would like
this to work similar to the Calendar plugin where on focus in the
input field it will also popup the time select element. I have tried
chaining and putting the ptTimeSelect code within a function inside
the focus() function, but neither work properly. Any direction would
be greatly appreciated.
Thanks.
Spencer
## Code
html
head
$(document).ready(function () {
$('.widgetTime').ptTimeSelect({
labels: {
x: 'Close',
popup_link: 'img src=../images/clock.png border=0 width=16
height=16',
set_time: 'Apply'
},
bgcolor: '#fff',
border_color: '#ff'
});
$(#followup_time).focus();
});
/head
body
form
input type=text id=followup_time name=followup_time value=
class=widgetTime input_text
/form
/body
/html
[jQuery] Implement opacity on imagemap polygon
I'm new to jQuery and would really like to be able to use it for
applying an opacity to an area on an imagemap. Is this possible? I
really don't want to swap images unless it becomes necessary. The
following code allows me to bind a click event (for testing) to the
individual area tags, but I can't seem to get the opacity to apply,
even though the setOverlay class is applied. I would really
appreciate any help or suggestions.
Thanks,
Spencer
CSS #
.setOverlay {
background-color: #C2C2C2;
filter: alpha(opacity=65);
-moz-opacity: 0.65;
opacity: 0.65;
}
.removeOverlay {
filter: alpha(opacity=65);
-moz-opacity: 0.65;
opacity: 0.65;
}
JAVASCRIPT
$(document).ready(function() {
$(#body_head).click(function() {
$(this).removeClass(removeOverlay);
$(this).addClass(setOverlay);
});
$(#body_neck).click(function() {
alert(Neck);
});
});
#
HTML ###
map id=body_map name=body_map
area id=body_head name=body_head class=removeOverlay href=#
shape=polygon alt=
coords=113,12,88,23,87,49,93,80,101,90,116,94,128,92,136,77,144,68,144,41,142,25,133,15,123,11
target=_self /
area id=body_neck name=body_neck class=removeOverlay href=#
shape=polygon alt=
coords=92,125,91,89,108,97,119,95,132,89,137,85,136,124,125,134,110,134,93,128
target=_self /
/map
img src=mri_body.jpg alt=Site map usemap=#body_map width=218
height=750 border=0
#
