[jQuery] jCarousel Lite - getting carousel to stop on a specific image (without hovering)
I am trying to get the slideshow to stop sliding on the fourth image (the last image in the slideshow) but having no luck. I've changed, afterEnd: null to afterEnd: stop in the $.fn.jCarouselLite function (line 17 in my version) but it is stopping on the second image, not the fourth. I know how helpful it would be if I posted the URL but I simply cannot due to the client's request. I can however, email it to you. Thank you in advance for any support you can provide on this.
[jQuery] Setting iframe src with $(#iframeid).attr(src,url) adds unwanted item to browser history
This problem happens in both FF 3.0.x, and Safari, on both Windows and
Mac, but not on IE7.
When I set the src of an iframe, it adds another copy of the parent
document's URL to the browser history. This gives the impression of a
broken back button (as the user has to click back twice to go to the
previous page.)
Here's a minimal test case showing that the problem isn't with jQuery,
per se. It happens when I get the element using getElementbyId and
change the src directly.
Is there any way to avoid this back button breaking behavior?
Code sample:
html
head
script type=text/javascript src=http://ajax.googleapis.com/ajax/
libs/jquery/1.3.2/jquery.js/script
script type=text/javascript
$(document).ready(function() {
// bypass jQuery
$(#trigger).click(function() {
elt = document.getElementById(targetelt);
if(elt) {
elt.src = http://google.com;;
}
});
// using jQuery
$(#triggerJQ).click(function(e) {
$(#targetelt).attr(src,http://bing.com;)
});
});
/script
/head
body
!-- use span (styled sort of like a link for fun) to rule out
clicking an href as source of problem --
span id=trigger style=color: blue; text-decoration:
underline;hello world/spanp/
span id=triggerJQ style=color:blue; text-decoration:
underline;hello jQuery world/spanp/
iframe id=targetelt width=400 height=300/iframe
/body
/html
[jQuery] selector performance
I am using jquery 1.3.2. I was wondering which is faster and why:
$('#my-id .main table tr.my-class') or
$('#my-id .main table tr.my-class') or
$('#my-id tr.my-class')
[jQuery] cycle plugin - remove positioning css?
I'm using the cycle plugin and was wondering if anyone has found a way to remove the position: relative from the main div and position: absolute from the imgs. This is added when the plugin is used. It's not very friendly in IE among other issues. Thanks! Adam
[jQuery] Resending an XMLHttpRequest
I'm wondering if there is a good way to resend an ajax request if it
has produced an error. The example below isn't something I would be
doing obviously but should be enough to convey what I'm talking about.
$().ajaxError(function(event, request, settings, error) {
request.resend();
});
The 'request' parameter above is an XMLHttpRequest object so this
isn't really jQuery related unless there is a jQuery hook of which I'm
not aware. If I try calling send() on the request nothing happens as I
think the object needs to be re-opened...
Google is not responding kindly to 'resend ajax request' or 'resend
xmlhttprequest' so this may not even be possible.
[jQuery] Upload Progress Problems
I am working on developing a simple upload form that allows the user
to see the status of their upload. Basically, the upload is assigned a
unique identifier that once the upload begins, the client polls the
status page with that ID to get the status of it. This works in
Firefox, but does not work in Opera and others. It appears that in
Opera once the form is submitted, the upload_progress() function is
never called. I am new to jQuery and have searched everywhere without
any answers that work for me. Any help would be appreciated!
function gen_uuid()
{
var uuid = ;
for (var i=0; i 32; i++) {
uuid += Math.floor(Math.random() * 16).toString(16);
}
return uuid;
}
var uuid = gen_uuid(); // some long string that is unique for this
upload
$(document).ready(function() {
$('#upload_form').attr('action', './?upload_progress_id=' + uuid);
$('#upload_form').submit(function() {
setTimeout(upload_progress, 1000);
return true;
});
});
function upload_progress()
{
$.getJSON('/upload/progress/' + uuid + '/', function(data) {
$('#uploaded').text('Uploaded: ' + data.uploaded);
setTimeout(upload_progress, 1000);
});
}
[jQuery] cross-domain ajax question
I'm working in a large corporate intranet and used jQuery to build a simple javascript include that developers can throw into their source (HTML, ASP classic, ASP.NET, etc). Everything worked fine until I started to deploy out to the servers. My logging app is on one server in the company and the other apps are spread amongst many. For example, a web-app is running on a server like http://server1/AppName/; and my javascript include is running on http://server2/etc/; and calling a web service on its own server. What I didn't realize is that this seems to cause a security issue. IE gives me the The page is accessing information that is not under its control. This poses a security risk. Do you want to continue? Totally bummed out because what I had was such a simple and lightweight solution. Any ideas on how to get around this? Are there any other approaches to calling a web-service on a different server without causing this error? Thanks everyone.
[jQuery] Re: cross-domain ajax question
Ignore this. I've done research and apparently this is ajax 101 :) On Aug 13, 8:27 am, adam amo...@gmail.com wrote: I'm working in a large corporate intranet and used jQuery to build a simple javascript include that developers can throw into their source (HTML, ASP classic, ASP.NET, etc). Everything worked fine until I started to deploy out to the servers. My logging app is on one server in the company and the other apps are spread amongst many. For example, a web-app is running on a server like http://server1/AppName/; and my javascript include is running on http://server2/etc/; and calling a web service on its own server. What I didn't realize is that this seems to cause a security issue. IE gives me the The page is accessing information that is not under its control. This poses a security risk. Do you want to continue? Totally bummed out because what I had was such a simple and lightweight solution. Any ideas on how to get around this? Are there any other approaches to calling a web-service on a different server without causing this error? Thanks everyone.
[jQuery] RE: Firefox 3.5 Preloading Issue
I'm not sure if this is the best place to post this question, but I'm using jquery for this process and so I figured it was a start. I have a form that submits via AJAX and jquery. When the user clicks the submit button, the button is replaced with an animated GIF while it loads. I preload the GIF using CSS and display:none. This has worked fine in IE and Firefox 3.0. However, since I upgraded to Firefox 3.5 it appears that the preloading does not work as it did. When the button is clicked, you briefly see an image icon indicating that the image is loading. I've even tried displaying the image somewhere else on the page (not hiding it) and still the same thing. Why isn't Firefox using the cached image? Thanks.
[jQuery] Validation plugin - submit form without validation
I'm using the Validation plugin for JQuery and was wondering if there was a function to submit the form without causing it to validate the form. I have a table with a list of radio-buttons and above that is a drop down list of states. The drop down list of states is used to filter the table rows and when the selected item changes it posts-back to the server (via $(#frm).submit()). I don't want this to cause any validation to occur. Is there another function I can call besides submit(), or some other method? Thanks
[jQuery] Superfish nav bar drops down BEHIND Javascript slideshow in Internet Explorer
I need some help. I'm using Superfish navigation with Ultimate Fade-In Slideshow. The two scripts work in harmony in every modern browser and lots of ancient ones... Except for Internet Explorer. In IE, the drop-down nav bar gets hidden underneath the fading images. See what I mean at http://www.cabatproperties.com/newsite/tallahassee/index.html. I thought (and I still think) that the z-index settings might be the culprit. Using inspect element in Firefox, I can see that the Javascript image fader I'm using moves the z-index up by 1 each time the image fades. That's fine with me -- In my Superfish CSS, I set the z-index on the navbar astronomically high (9) so that the navbar won't end up behind the image fader unless you stay on the page for 2 or 3 days straight. The CSS for the navbar is at http://www.cabatproperties.com/newsite/css/superfishnav.css, if anyone would like to inspect that. Ideally, I'd like to keep Superfish. I like it a lot because it degrades very nicely in older browsers and even seems to work without Javascript turned on. As for the image fader, I could care less which one I use, as long as it gives me the same basic function. If anyone can help me remedy this unfortunate situation, it would be very appreciated. I know that it can be done. I found a similar setup on another page: http://www.dynamicinteractions.com, and it works like a charm using a different navbar and image fader script. I tried Superfish with the image fader script on THAT website and didn't have any luck. If worst comes to worst, I may just have to steal both scripts from that site so that I know they work in harmony, but that navbar script isn't as nice, in my opinion. I have a feeling it's something pretty simple that could be edited in the Superfish Javascript or CSS, but I know next to nothing about Javascript. Anyone?
[jQuery] Re: ready() to bind post-ajax events
On Jul 4, 12:55 pm, Josh Nathanson joshnathan...@gmail.com wrote:
Would there be a racing issue with html() though? I believe that is not an
asynchronous method, so it would have to complete before the next chained
method.
-- Josh
- Original Message -
From: hedgomatic hedgoma...@gmail.com
To: jQuery (English) jquery-en@googlegroups.com
Sent: Saturday, July 04, 2009 9:34 AM
Subject: [jQuery] ready() to bind post-ajax events
I haven't seen much mention of this on the web, and only recently
discovered it works not sure if this is somehow bad practice or
just a lesser known trick, but lately I've been chaining .ready() at
the end of .html() when I want to bind events to new ajax data... I
presume it's much more efficient than live(), and avoids racing
issues. EG:
$.ajax({
type: 'POST',
url: 'myPage.html',
success: function(c){
$(.response).html(c).ready(function() {
bindNewEvent(.response a);
});
});
function bindNewEvent(o) {
$(o).click(funciton() { ...etc... });
};
There's infinite docs about using .ready() to process the document,
but not returning HTML. Passing the above along should anyone find it
useful or have insight onto why it's seemingly not mentioned elsewhere.
For whatever reason, I've had problems here and there.Calling it a
race condition probably isn't accurate, but it seems to behave as such
nonetheless.
Obviously producing a reliable example is tricky. I'm certain I have a
few at work. Will provide something come Monday unless anyone else has
similar experiences they can share prior-to.
[jQuery] just trying to get more efficient with jQuery coding
This is a FAQ page I built with custom jquery function that toggles
the answers open/closed on click of a question, and Im just wondering
if anyone has a suggestion to make the code leaner and meaner:
http://dfrecruiting.com/faqs
The code:
$(.entry h4).click(function() {
if ( $(this).hasClass(active) ) {
$(this).removeClass(active).next().animate({ opacity: 0 },
200).slideToggle(500).removeClass(active);
} else {
$(this).addClass(active).next().addClass
(active).slideToggle(500).animate({ opacity: 1 }, 1000).dequeue
().siblings('h4.active').not(this).removeClass('active').next().animate
({ opacity: 0 }, 200).slideToggle(500).dequeue().removeClass
(active);
}
return false;
});
Thanks!!
[jQuery] galleria + nyroModal in safari 4- issue
Ive been trying to troubleshoot this issue for a while to no avail. Hoping one of the JQ ninja-angels can uncover the culprit. What steps will reproduce the problem? 1. Use Safari (v4) - look at the file that is loaded into the iframe via nyroModal, and it functions correctly: http://www.viewwestaspen.com.asp1-10.websitetestlink.com/property_detail.aspx?id=108530 2. Now take a look at the whole search page, and click a thumbnail at the bottom to bring up the nyroModal window. Note that upon loading and fading in, the main image is immediately removed. Firebug confirms that this isnt a css effect, but the element is actually being removed. I have been at this for a while, does anyone see why this is happening (safari only, FF is fine)? http://www.viewwestaspen.com.asp1-10.websitetestlink.com/ What version of the product are you using? On what operating system? using v1.0 of the galleria js on mac osx (latest)
[jQuery] Equivalent of Event.observe
I'm trying to make the cursor focus on a certain input element when someone hits a certain key combo (such as Shift+S). Does anyone know how you attach a listener like that and bind it to a key combo? Thanks in advance, Adam
[jQuery] browser detection, conditional CSS
What's everyone's opinion on current best-practice for offering conditional CSS for specific browsers. I just noticed that Jquery used to have a detection function rolled in, which was deprecated. I have been using IE conditional comments to do this for a long while but recently used a WP theme (Justin Tadlock's hybrid) that used http user agent to add classes to the body tag depending on which browser and I sorta liked this approach. Mostly because it actually works in my PC testing enviro. Thoughts? Thanks everyone! -Adam
[jQuery] [nyroModal] problems getting ajax-loaded content to trigger nyroModal window
I posted this on the nyroModal group as well, but thought I'd throw it
out to the JQ group. Im decent with JQ on static content, but am an
ajax newbie.
http://70.32.84.175/events/
At the preceding link, on initial page load, the events loaded beneath
the slider interface, 'view details' links trigger nyroModal fine, but
upon slider interaction (new results loaded via ajax) 'view details'
links are still class=nyroModal
but do not open in the nyroModal window.
I have inserted the $('a.nyroModal').nyroModal(); initiation on the
search page, ajax page, and in the post call to the ajax page to no
avail. Any thoughts?
Thanks!
-Adam
[jQuery] jQuery.extend(deep) not working?
I'm trying out this need extension:
http://binarykitten.jkrswebsolutions.co.uk/2009/01/21/jquery-plugin-ajax-head-request/comment-page-1
which allows jQuery to do a HEAD request on an arbitrary URL in order
to grab header values for a given page. Unfortunately, if that page
is the page the script is currently running from, it goes into an
infinite loop which results in:
[Exception... Component returned failure code: 0x80004001
(NS_ERROR_NOT_IMPLEMENTED) [nsIDOMLocation.host] nsresult:
0x80004001 (NS_ERROR_NOT_IMPLEMENTED) location: JS frame ::
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js ::
anonymous :: line 12 data: no]
[Break on this error] (function(){var l=this,g,y=l.jQuery,p=l.each
(function(){o.dequeue(this,E)})}});
If I add deep to jQuery.extend(), I get deep is not defined.
Does anybody have any help for this? Should the code be refactored to
not extend but to be a more simplistic?
[jQuery] Performance of parent child selector vs .children() method
Essentially, I'd like to know if there is any difference between $(div.grandparent div.parent div.child) and $(div.grandparent).children(div.parent).children(div.child) Does anyone know which of these is more performant or preferred when selecting child nodes? Thanks.
[jQuery] Re: creating an animated PNG loader pinwheel (sprite)
Thanks everyone, but none of these use jquery- the mootools version is exactly what I am looking to do. Anyone interested in helping me port that to JQ? I have posted on devthought as well. Thanks! On Apr 23, 4:03 pm, Ricardo ricardob...@gmail.com wrote: Seems it has already been done, and more than once:http://devthought.com/projects/mootools/apng/http://www.squaregoldfish.co.uk/software/animatedpng/http://www.otanistudio.com/swt/sprite_explosions/ -- ricardo On Apr 23, 5:14 pm, Adam adambu...@gmail.com wrote: So I was trying to think of a way to create what was effectively aPNG animation similar to ananimatedGIF. What I decided was that it would be fairly simple to make aPNGsprite of each 'frame' of the animation, then set that image as the background of a container div, then move it in a stepping fashion to reveal each frame, then reset it when it gets to the end of the strip. If someone could help with the JQ to do the background-position stepping and the reset, I will post a link to the completed piece with my image as well. I will do a white and black version as well- this will make it possible to have one, smooth-looking loader animation to use on all background colors/image. Thanks!
[jQuery] Re: creating an animated PNG loader pinwheel (sprite)
Excellent! Thanks mkmanning! On Apr 24, 11:49 am, mkmanning michaell...@gmail.com wrote: Here's quick plugin for you: http://actingthemaggot.com/test/jquery_example/animbg.html On Apr 24, 7:47 am, Adam adambu...@gmail.com wrote: Thanks everyone, but none of these use jquery- the mootools version is exactly what I am looking to do. Anyone interested in helping me port that to JQ? I have posted on devthought as well. Thanks! On Apr 23, 4:03 pm, Ricardo ricardob...@gmail.com wrote: Seems it has already been done, and more than once:http://devthought.com/projects/mootools/apng/http://www.squaregoldfis... -- ricardo On Apr 23, 5:14 pm, Adam adambu...@gmail.com wrote: So I was trying to think of a way to create what was effectively aPNG animation similar to ananimatedGIF. What I decided was that it would be fairly simple to make aPNGsprite of each 'frame' of the animation, then set that image as the background of a container div, then move it in a stepping fashion to reveal each frame, then reset it when it gets to the end of the strip. If someone could help with the JQ to do the background-position stepping and the reset, I will post a link to the completed piece with my image as well. I will do a white and black version as well- this will make it possible to have one, smooth-looking loader animation to use on all background colors/image. Thanks!
[jQuery] Galleria thumbs not vertically aligned correctly in Safari
Im using Galleria on this page and in Safari, strangely the thumbnails bump down inside their container by 12px. Can anyone see why this is happening to me in Safari only? http://www.viewwestaspen.com.asp1-10.websitetestlink.com/property_detail.aspx?id=106490#images/2009020701242469178300-5.jpg Thanks!
[jQuery] creating an animated PNG loader pinwheel (sprite)
So I was trying to think of a way to create what was effectively a PNG animation similar to an animated GIF. What I decided was that it would be fairly simple to make a PNG sprite of each 'frame' of the animation, then set that image as the background of a container div, then move it in a stepping fashion to reveal each frame, then reset it when it gets to the end of the strip. If someone could help with the JQ to do the background-position stepping and the reset, I will post a link to the completed piece with my image as well. I will do a white and black version as well- this will make it possible to have one, smooth-looking loader animation to use on all background colors/image. Thanks!
[jQuery] Re: Lightbox with thumbnails
Check out Galleria- super slick image gallery plugin: http://devkick.com/lab/galleria/ Im actually doing a JQ-rich real estate site right now using Galleria- Ill post a link soon. On Apr 23, 2:15 pm, Jack Killpatrick j...@ihwy.com wrote: Agreed on the behavior, that's how I'd want it to act, too. Is the site you're putting the gallery on public? I'm just curious, because in the past I did a lot of real estate related web work (with a company called InteliTouch: CRM for real estate agents) and am always curious about interesting uses. Thx. Jack Rick Faircloth wrote: That could be a problem for some. For my purposes (showing real estate photos), all the photos will be resized to the same size, so that shouldn't be an issue. Actually, even if I had both landscape and portrait photos, I'd prefer that the container remain the same size for speed and for consistency in the space for comments. It's less attractive than having the full window taken up by the image, but the constant shifting of the window size is distracting to me. Rick On Thu, Apr 23, 2009 at 12:36 PM, Jack Killpatrick j...@ihwy.com mailto:j...@ihwy.com wrote: Cool. The one thing I wonder about is mixed images in landscape and portrait modes. Most gallery demos don't show that, I'm guessing cuz it's less pretty, but from my experience it's often matters. I haven't looked carefully at that one to see how it will handle those. - Jack
[jQuery] Re: Loading before dom = ready - Best Practices.
I actually do this for people with JS enabled on one particular site
in question. Since the ads are in separate iframes, I simply don't
specify a source, and use jQuery's DOM ready to query a php file that
generates a random key, whereby I can then set the source for my ad
frames. It's also nice since I can dynamically refresh the ads upon
certain user actions.
#4 is basically what I do coupled with #2, and then do something like
noscript
.jscript { display:block; }
/noscript
for no-js people.
Which works great, but the problem is I really don't want to wait for
dom to load for critical nav elements.
#5 is of course always best practice, but sometimes that comes back to
bite. For instance, with any lightbox content, I nearly always do the
hide/show trick as above, since otherwise users might try and enlarge
some content on the page before GIANT_ADBANNER.SWF has finished
loading, and instead get the image in a blank page.
my only real concern is in regards to elements that I think impact
user experience by not being available ASAP.
On Apr 23, 2:44 pm, Jonathan jdd...@gmail.com wrote:
In a perfect world the things out of your control (ads, feeds, etc)
would themselves be loaded after domReady into their placeholder
markup. A slow loading Ad shouldn't be able to cripple the site while
it loads, but anyway to expand on your topic.
4) Set a class on the Dom elements called 'jscript' or something that
either hides or otherwise marks the content as not ready(disabled,
grayed,etc) and once the Dom is ready use Javascript to remove the
class
5) Redesign your pre javascript markup so it's somewhat usable and
only use javascript to expand upon the behavior (this is really the
best approach but not always practical if you use heavy script)
I would recommend not trying to get tricky with snippets of script
outside the domReady though. Too easy to have race conditions or
otherwise hard to track down problems.
On Apr 23, 12:13 pm, hedgomatic hedgoma...@gmail.com wrote:
While virtually every site in existence trumpets using the jQuery DOM-
ready shortcut as an absolute must, I've come across situations which
I feel frustrate the user, particularly when using jQuery to create a
navigational element.
I often work on sites which are going to have a lot of external
content (ads, feeds, analytics), and if even one of them is sluggish
to load, none of my interactive elements are responsive for that time.
There seem to be three options:
1] liveQuery (disadvantage: overhead)
2] popping a loading message over the whole page (disadvantage:
ridiculous)
3] nesting an image inside the portion of the DOM we need, and using
an onLoad event (disadvantage: poor semantics).
Anyone else come across any novel ways around this seemingly under-
discussed issue?
[jQuery] Re: Loading before dom = ready - Best Practices.
On Apr 23, 2:57 pm, Brandon Aaron brandon.aa...@gmail.com wrote: You could use $.getScript to load in the slow loading scripts. Any scripts loaded this way will be non-blocking (asynchronous). -- Brandon Aaron That could certainly cut down some of the time, but I suspect there's same-origin policy limitations here?
[jQuery] Re: Loading before dom = ready - Best Practices.
That sounds like a potential accessibility issue. I certainly think so, hence the question :] Such script tags should be moved to just before / body. They are, but this still produces the problem since that's still part of the DOM we're waiting on. There are probably more and better options. Possibly by using a combination of a few things, the performance and user experience (and possibly SEO) could be improved. Effectively we are using a combination of most of the techniques described here and above, my reasoning for wanting to explore other options is indeed largely an SEO / text-to-speech concern with some of these practices. We're doing a pretty good job of it, considering, but it would be lovely if there were a single reliable solution. I'll certainly have to check out $.getScript. Thanks Brandon!
[jQuery] Re: Loading before dom = ready - Best Practices.
That sounds like a potential accessibility issue. I certainly think so, hence the question :] Such script tags should be moved to just before / body. They are, but this still produces the problem since that's still part of the DOM we're waiting on. There are probably more and better options. Possibly by using a combination of a few things, the performance and user experience (and possibly SEO) could be improved. Effectively we are using a combination of most of the techniques described here and above, my reasoning for wanting to explore other options is indeed largely an SEO / text-to-speech concern with some of these practices. We're doing a pretty good job of it, considering, but it would be lovely if there were a single reliable solution. I'll certainly have to check out $.getScript. Thanks Brandon!
[jQuery] Trying to use UI accordion to create menu with event: click but still enable links on child link items
I did also post this in the UI group...
I have a simple two-level menu utilizing the accordion and want to
change from event:mouseover to click as the trigger to open the
drawers. The problem Im having is that this change converts ALL links
in the menu, even children, to return:false and all links are
disabled. I understand that the main level links cannot do 2 things,
but can re-enable the children links? I investigated the navigation
option and navigationFilter but cant make sense of it- is this how I
would configure a filter to re-activate the secondary list links?
script looks like this currently:
$('ul#productsNav').accordion({
fillSpace: false,
animated: 'easeslide',
header: 'a.head',
autoheight: true,
event: 'click'
}).activate(0);
and markup looks like this:
ul id=productsNav
li class=page_itema href=radiance-solar-
screen-shades
title=Radiance Solar Screen ShadesRadiance Solar Screen Shades/a
ul
li class=page_itema href=hardware
title=HardwareHardware/
a/li
li class=page_itema href=operator-options
title=Operator
OptionsOperator Options/a/li
li class=page_itema href=fabric-options title=Fabric
OptionsFabric Options/a/li
li class=page_itema href=shades-of-green-eco-friendly-
solutions title=Shades of Green Eco-friendly SolutionsShades of
Green Eco-friendly Solutions/a/li
li class=page_itema href=photo-galleries title=Photo
GalleriesPhoto Galleries/a/li
li class=page_itema href=pdf-brochure title=PDF
BrochurePDF
Brochure/a/li
/ul
/li
li class=page_itema href=radiance-av-blackout-dual-shades
title=Radiance AV Blackout amp; Dual ShadesRadiance AV Blackout
#038; Dual Shades/a
ul
li class=page_itema href=hardware
title=HardwareHardware/
a/li
li class=page_itema href=operator-options
title=Operator
OptionsOperator Options/a/li
li class=page_itema href=fabric-options title=Fabric
OptionsFabric Options/a/li
li class=page_itema href=shades-of-green-eco-friendly-
solutions title=Shades of Green Eco-friendly SolutionsShades of
Green Eco-friendly Solutions/a/li
li class=page_itema href=photo-galleries title=Photo
GalleriesPhoto Galleries/a/li
li class=page_itema href=pdf-brochure title=PDF
BrochurePDF
Brochure/a/li
/ul
/li
/ul
Could someone take a look and let me know how to tell the accordion
to
allow the 2nd level links to follow the link on click?
Thanks in advance!
-Adam
[jQuery] Wiring up lots of text boxes
I want to set the onChange event for a lot of text boxes on a page and
the code I currently have looks like this:
$(document).ready(
function() {
//wire up all changes
$(#requirementsgrid :text).change
(find_and_total_week);
}
);
The number of text boxes can be very large based on the results. Is
this the most efficient way to set an onChange event for a lot of
items on a page or is there a way for me to catch an on change for
something like the form and then determine what actually made the
change?
It can take 5-10 seconds for this set to happen on page load.
[jQuery] Wiring using jQuery vs. a static string in onClick
I am setting an onClick for many rows doing this:
a href=javascript:copy_value_popup({'position': 'RN', 'location' :
'Location A', 'shift' : '1st Shift (7a-3p)'},
'loc_41_sht_59_stt_69');copy/a
I could set this information as attributes in other parts of the table
structure to get what I needed to make a way to wire these up via
jQuery. I could have hundreds of these links to wire up. I know that
my current way will produce more html that the page will have to
download and process, but is there likely to be any noticeable
performance difference between doing a static link like this vs.
jQuery setup in $(document).ready when it comes to page loading or
general JS page performance?
[jQuery] inserting commas into a price value
I am trying to manipulate a simple value (text node) which is a home price from 123456789 to be 123,456,789. Anyone have a resource? Thanks! -Adam
[jQuery] Re: inserting commas into a price value
Thanks Michael! Works well. -Adam On Apr 2, 12:04 pm, mkmanning michaell...@gmail.com wrote: http://plugins.jquery.com/project/currencyFormat On Apr 2, 9:58 am, Adam adambu...@gmail.com wrote: I am trying to manipulate a simple value (text node) which is a home price from 123456789 to be 123,456,789. Anyone have a resource? Thanks! -Adam
[jQuery] Re: using apple-style slider
Ive since sorted this one and thought I would post for the group. The
search is dynamic and the # of elements (LIs) changes per inputs in
other form elements on the page. So, the first step was to count the
LIs in the UL, then multiply the result by the width of each element,
and apply that value as the css width to the containing UL. Note: I
found that applying multiple properties via the css() method was
problematic- all of the attributes had to be applied at once. Here is
the solution in a nutshell:
var resultsQuantity = $(#results ul li).length;
$('#resultsSlider').slider({
min: 0,
max: 6238,
animate: true,
slide: function (event, ui) {
var resultsQuantity = $(ul#resultsUL li).length; // count
results
$(this).slider('option', 'max', resultsQuantity * 226); // set
the
max value of the slider accordingly
$(ul#resultsUL).css('width', resultsQuantity * 226 + 'px').css
('left', ui.value * -1); // set the width of the UL accordingly and
set up the slide of the results on change of slider value
},
stop: function (event, ui) {
var resultsQuantity = $(ul#resultsUL li).length; // count
results
$(this).slider('option', 'max', resultsQuantity * 226); // set
the
max value of the slider accordingly
$(ul#resultsUL).css('width', resultsQuantity * 226 +
'px').animate
({'left' : ui.value * -1}, 500); // set the width of the UL
accordingly and set up the slide of the results on change of slider
value
},
});
On Mar 26, 2:59 pm, Adam adambu...@gmail.com wrote:
Im using an apple product page-style slider as described on Remy's
awesome jqueryfordesigners.com, but with content in addition to the
images. Im having some css/display issues.
http://www.viewwestaspen.com.asp1-10.websitetestlink.com/home.html
His demo makes use of the items in the list being set to
display:inline, but this causes funky results with the H4s and P tags
that I have under the images also inside each LI. Ive seen some
similar executions that let the LIs be block and float left, but use
some additional JQ to calculate how wide the UL slider should be (on
the fly). Would that be the way to make this display correctly?
Thanks!
-Adam
[jQuery] Re: How to load redirected content in dialog?
Anyone?
On Mar 27, 4:39 pm, Adam apcau...@gmail.com wrote:
I have some content that loads in a dialog popup via ajax. For some
reason when the URL redirects (i.e. 301, 302, etc.), the content never
loads in the dialog. Is this normal behavior for ajax, or should the
redirected content load?
Thanks.
a href=url_that_redirects class=myDialogdo something/a
$(.myDialog).click(function() {
$(this).openDialog();
});
$.fn.openDialog = function () {
var url = $(this).attr(href);
popup = $(this).dialog();
$.ajax(
{
url: url,
success: function(message) {
popup.html(message);
},
error: function() {
popup.html(div
class='portlet-msg-error'The content could not
be loaded./div);
},
timeout: 2
}
);
return this;
};
[jQuery] Using Ajax with Redirects
I have some content that loads in a dialog popup via ajax. For some
reason when the URL redirects (i.e. 301, 302, etc.), the content never
loads in the dialog. Is this normal behavior for ajax, or should the
redirected content load?
Thanks.
a href=url_that_redirects class=myDialogdo something/a
$(.myDialog).click(function() {
$(this).openDialog();
});
$.fn.openDialog = function () {
var url = $(this).attr(href);
popup = $(this).dialog();
$.ajax(
{
url: url,
success: function(message) {
popup.html(message);
},
error: function() {
popup.html(div
class='portlet-msg-error'The content could not
be loaded./div);
},
timeout: 2
}
);
return this;
};
[jQuery] Re: using apple-style slider
Anyone have any thoughts on this? Thanks in advance. -Adam On Mar 26, 2:59 pm, Adam adambu...@gmail.com wrote: Im using an apple product page-style slider as described on Remy's awesome jqueryfordesigners.com, but with content in addition to the images. Im having some css/display issues. http://www.viewwestaspen.com.asp1-10.websitetestlink.com/home.html His demo makes use of the items in the list being set to display:inline, but this causes funky results with the H4s and P tags that I have under the images also inside each LI. Ive seen some similar executions that let the LIs be block and float left, but use some additional JQ to calculate how wide the UL slider should be (on the fly). Would that be the way to make this display correctly? Thanks! -Adam
[jQuery] How to load redirected content in dialog?
I have some content that loads in a dialog popup via ajax. For some
reason when the URL redirects (i.e. 301, 302, etc.), the content never
loads in the dialog. Is this normal behavior for ajax, or should the
redirected content load?
Thanks.
a href=url_that_redirects class=myDialogdo something/a
$(.myDialog).click(function() {
$(this).openDialog();
});
$.fn.openDialog = function () {
var url = $(this).attr(href);
popup = $(this).dialog();
$.ajax(
{
url: url,
success: function(message) {
popup.html(message);
},
error: function() {
popup.html(div
class='portlet-msg-error'The content could not
be loaded./div);
},
timeout: 2
}
);
return this;
};
[jQuery] Temporarily disable inline onclick
Hello, I was wondering if there was a way to temporarily disable an inline onclick event, which i can reattach later. Here's the scenario: My page has an edit mode which makes the text of certain elements editable. Edit mode is enabled - text that is editable gets a click event bound to it by jquery Clicking the element allows you to inplace edit and save the info Disabling edit mode removes the click event to activate an editable element Everything works great unless there is an onclick attribute specifed inline on the element (ie- rails generates an onclick confirm message). So the inline confirm is raised first, then my subsequent bound click events. Is there a means i can temporarily disable (or remove/reattach) these inline javascript events? I'm using jQuery 1.3.1 Thanks in advance, Adam Walters
[jQuery] Re: Play video in modal messages
Check out http://nyromodal.nyrodev.com/
:::
Adam
On Mar 26, 2:43 pm, ebru...@gmail.com ebru...@gmail.com wrote:
Hello,
I want to show a youtube video in a modal messages but the video is
different on every link. So someone presses on the link
span id='afleveringVideo'a href=http://www.youtube.com/watch?
v=gNNVF8rJjrw id=video title=Bekijk de spoiler van
{$foo.aflevering} class=basicBekijk de spoiler/a/span
It starts the following:
$(document).ready(function () {
$('#afleveringVideo input.basic, #afleveringVideo a.basic,
#video').click(function (e) {
e.preventDefault();
var url = $(this).attr(href);
alert(url);
$('input[name=berichtid]').val(url);
$('#afleveringVideoModal').modal({persist: true});
});
});
And then it have to replace url_form_ahref into the url of the link:
div id=afleveringVideoModal style='display:none;'
object width=480 height=385param name=movie
value=url_form_ahref/paramparam name=allowFullScreen
value=true/paramparam name=allowscriptaccess value=always/
paramembed src=url_form_ahref type=application/x-shockwave-flash
allowscriptaccess=always allowfullscreen=true width=480
height=385/embed/object
/div
Is this possible?
Erwin
[jQuery] using apple-style slider
Im using an apple product page-style slider as described on Remy's awesome jqueryfordesigners.com, but with content in addition to the images. Im having some css/display issues. http://www.viewwestaspen.com.asp1-10.websitetestlink.com/home.html His demo makes use of the items in the list being set to display:inline, but this causes funky results with the H4s and P tags that I have under the images also inside each LI. Ive seen some similar executions that let the LIs be block and float left, but use some additional JQ to calculate how wide the UL slider should be (on the fly). Would that be the way to make this display correctly? Thanks! -Adam
[jQuery] cluetip plugin issues
I am trying to use the cluetip plugin to no avail. Instead of the
cluetip coming up, I am taken to the website URL like a normal link.
I am using this within the Liferay portal and am using the livequery
plugin. I've tried this with ajaxCache set to false and true.
The cluetip code is getting executed when the page loads - verified
with firebug. Here is the cluetip related html that is written when
the cluetip code executes:
div id=cluetip-waitimage style=position: absolute; z-index: 95;
display: none;/
div id=cluetip style=z-index: 96; display: none; position:
absolute;div style=z-index: 90; opacity: 0.1; top: 6px; left: 6px;
position: absolute; background-color: rgb(0, 0, 0);/div style=z-
index: 91; opacity: 0.1; top: 5px; left: 5px; position: absolute;
background-color: rgb(0, 0, 0);/div style=z-index: 92; opacity:
0.1; top: 4px; left: 4px; position: absolute; background-color: rgb(0,
0, 0);/div style=z-index: 93; opacity: 0.1; top: 3px; left: 3px;
position: absolute; background-color: rgb(0, 0, 0);/div style=z-
index: 94; opacity: 0.1; top: 2px; left: 2px; position: absolute;
background-color: rgb(0, 0, 0);/div style=z-index: 95; opacity:
0.1; top: 1px; left: 1px; position: absolute; background-color: rgb(0,
0, 0);/div id=cluetip-outer style=position: relative; z-index:
97;h3 id=cluetip-title/div id=cluetip-inner//divdiv
id=cluetip-extra/div class=cluetip-arrows id=cluetip-arrows
style=z-index: 97;//div
Here is my relevant code:
jQuery(a.hTip).livequery(function() {
jQuery(this).cluetip();
});
a href=someurl class=hTip title=the titleTest Me/a
[jQuery] Help tracking down error in IE8 / jquery 1.3.2
Message: Invalid argument. Line: 12 Char: 12949 Code: 0 URI: http://domain/shared/jquery/jquery-1.3.2.min.js I keep getting the above error In IE but Not FF.. Everything works great in FF, and almost in IE.. But I am having a hard time tracking down the cause this issue in IE... any help appreciated.
[jQuery] Re: Help tracking down error in IE8 / jquery 1.3.2
FYI, all is well in Safari as well as Firefox... The main thing in IE that breaks down is my main Tabs setup... and the only javascript error indicated is that it Could not get display title. Invalid Argument, but that's all I can see about this. On Mar 20, 10:07 am, Adam epne...@gmail.com wrote: Message: Invalid argument. Line: 12 Char: 12949 Code: 0 URI:http://domain/shared/jquery/jquery-1.3.2.min.js I keep getting the above error In IE but Not FF.. Everything works great in FF, and almost in IE.. But I am having a hard time tracking down the cause this issue in IE... any help appreciated.
[jQuery] Re: Help tracking down error in IE8 / jquery 1.3.2
Using the dev version, I can break it down to this function.. line
1061 ch 4
I guess i should go track down anything that's playing with an
elements opacity???
// from jquery.1.3.2.js
// IE uses filters for opacity
if ( !jQuery.support.opacity name == opacity ) {
if ( set ) {
// IE has trouble with opacity if it does not
have layout
// Force it by setting the zoom level
elem.zoom = 1;
// Set the alpha filter to set the opacity
elem.filter = (elem.filter || ).replace(
/alpha\([^)]*\)/, )
+
(parseInt( value ) + '' == NaN ? :
alpha(opacity= + value
* 100 + ));
}
return elem.filter elem.filter.indexOf(opacity=)
= 0 ?
(parseFloat(
elem.filter.match(/opacity=([^)]*)/)[1] ) / 100) +
'':
;
}
name = name.replace(/-([a-z])/ig, function(all, letter){
return letter.toUpperCase();
});
if ( set )
elem[ name ] =
value; //
BREAKS HERE -
return elem[ name ];
},
[jQuery] Re: Help tracking down error in IE8 / jquery 1.3.2
Thanks For your input Martijn, Unfortunately, I'm not sure where my culprit code is yet.. so I'm not sure what options are being passed. I'm looking now for typos, extra properties or invalid attr references..\ -Adam
[jQuery] Re: Help tracking down error in IE8 / jquery 1.3.2
did a break point in the ie8 dev console on it and watched the
following values break at that line a few times during the page
load...
name = outline
value = 0 none !important
Those values breaks it every time it comes around..
I'm going to see what is setting these values..
On Mar 20, 10:40 am, Martijn Houtman martijn.hout...@gmail.com
wrote:
On Mar 20, 2009, at 3:22 PM, Adam Drew wrote:
Using the dev version, I can break it down to this function.. line
1061 ch 4
I guess i should go track down anything that's playing with an
elements opacity???
// from jquery.1.3.2.js
// IE uses filters for opacity
if ( !jQuery.support.opacity name == opacity ) {
if ( set ) {
// IE has trouble with opacity if it does not
have layout
// Force it by setting the zoom level
elem.zoom = 1;
// Set the alpha filter to set the opacity
elem.filter = (elem.filter || ).replace(
/alpha\([^)]*\)/, )
+
(parseInt( value ) + '' == NaN ? :
alpha(opacity= + value
* 100 + ));
}
return elem.filter elem.filter.indexOf(opacity=) =
0 ?
(parseFloat(
elem.filter.match(/opacity=([^)]*)/)[1] ) / 100) +
'':
;
}
name = name.replace(/-([a-z])/ig, function(all, letter){
return letter.toUpperCase();
});
if ( set )
elem[ name ] =
value; //
BREAKS HERE -
return elem[ name ];
},
Ah, this seems like an invalid or non-existent CSS property. What CSS
options are you passing?
Regards,
--
Martijn.
[jQuery] Re: Help tracking down error in IE8 / jquery 1.3.2
Looks like it's due to the themeswitcher widget I setup
yesterday.
// jquery.themeswitcher.js
//pane css
switcherpane.css({
position: 'absolute',
float: 'left',
fontFamily: 'Trebuchet MS, Verdana, sans-serif',
fontSize: '12px',
background: '#000',
color: '#fff',
padding: '8px 3px 3px',
border: '1px solid #ccc',
'-moz-border-radius-bottomleft': '6px',
'-webkit-border-bottom-left-radius': '6px',
'-moz-border-radius-bottomright': '6px',
'-webkit-border-bottom-right-radius': '6px',
borderTop: 0,
zIndex: 99,
width: options.width-6//minus must match left and right padding
})
.find('ul').css({
listStyle: 'none',
margin: '0',
padding: '0',
overflow: 'auto',
height: options.height
}).end()
.find('li').hover(
function(){
$(this).css({
'borderColor':'#555',
'background':
'url(/themeroller/themeswitchertool/images/
menuhoverbg.png) 50% 50% repeat-x',
cursor: 'pointer'
});
},
function(){
$(this).css({
'borderColor':'#111',
'background': '#000',
cursor: 'auto'
});
}
).css({
width: options.width-30,
height: '',
padding: '2px',
margin: '1px',
border: '1px solid #111',
'-moz-border-radius': '4px',
clear: 'left',
float: 'left'
}).end()
.find('a').css({
color: '#aaa',
textDecoration: 'none',
float: 'left',
width: '100%',
outline: '0 none !important'// THIS LINE BREAKS
IN
IE8
}).end()
.find('img').css({
float: 'left',
border: '1px solid #333',
margin: '0 2px'
}).end()
.find('.themeName').css({
float: 'left',
margin: '3px 0'
}).end();
On Mar 20, 11:35 am, Adam Drew epne...@gmail.com wrote:
did a break point in the ie8 dev console on it and watched the
following values break at that line a few times during the page
load...
name = outline
value = 0 none !important
Those values breaks it every time it comes around..
I'm going to see what is setting these values..
On Mar 20, 10:40 am, Martijn Houtman martijn.hout...@gmail.com
wrote:
On Mar 20, 2009, at 3:22 PM, Adam Drew wrote:
Using the dev version, I can break it down to this function.. line
1061 ch 4
I guess i should go track down anything that's playing with an
elements opacity???
// from jquery.1.3.2.js
// IE uses filters for opacity
if ( !jQuery.support.opacity name == opacity ) {
if ( set ) {
// IE has trouble with opacity if it does not
have layout
// Force it by setting the zoom level
elem.zoom = 1;
// Set the alpha filter to set the opacity
elem.filter = (elem.filter || ).replace(
/alpha\([^)]*\)/, )
+
(parseInt( value ) + '' == NaN ?
: alpha(opacity= + value
* 100 + ));
}
return elem.filter elem.filter.indexOf(opacity=)
= 0 ?
(parseFloat(
elem.filter.match(/opacity=([^)]*)/)[1] ) / 100) +
'':
;
}
name = name.replace(/-([a-z])/ig, function(all, letter){
return letter.toUpperCase();
});
if ( set )
elem[ name ] =
value; //
BREAKS HERE -
return elem[ name ];
},
Ah, this seems like an invalid or non-existent CSS property. What CSS
options are you passing?
Regards,
--
Martijn.
[jQuery] IE Selection Hiding
Just curious if the problem of hiding an IE selection option has been fixed or if anyone has a workaround other then keeping a hidden list of options that aren't selected. Thanks, Adam Paeth $(#option1).hide(); //works in FF, not in IE
[jQuery] Re: help with menu and show/hide divs
Do something like:
div id=links
a href=#firstDiv id=firstfirsta
a href=#secondDiv id=secondseconda
a href=#thirdDiv id=thirdthirda
/div
div id=container
div class=content
div id=firstDiv/div
div id=secondDiv/div
div id=thirdDiv/div
/div
/div
JS:
$(function(ev) {
$('#links a').click(function(ev){
$('#content div').hide();
id = $(this).attr('id');
$('#' + id + 'Div').show();
);
});
Untested but you get the idea :)
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of Paul Hutson
Sent: 14 March 2009 11:44
To: jQuery (English)
Subject: [jQuery] Re: help with menu and show/hide divs
Kevin,
You could always go back to basics... i.e. the following (you'll have
to use your existing hide show code..) - and I know this isn't
elegant...
if (ClickedItem == firstdiv)
{
ShowFirstDiv;
HideSecondDiv;
HideThirdDiv;
} elseif (ClickedItem == firstdiv) {
HideFirstDiv;
ShowSecondDiv;
HideThirdDiv;
} else {
HideFirstDiv;
HideSecondDiv;
ShowThirdDiv;
};
Regards,
Paul
On Mar 14, 4:02 am, kevinm sonicd...@gmail.com wrote:
I know I am doing something stupid , but can't figure it out.
I have a menu of three items
a href=#firstDivfirsta
a href=#secondDivseconda
a href=#thirdDivthirda
I then have 3 divs
div id=container
div class=content
div id=firstDiv/div
div id=secondDiv/div
div id=thirdDiv/div
/div
/div
the first div is shown by default, what I need to do is when menu
items are clicked that the div shown (first,second,or third) is hidden
and the selected div is shown. I am using the href to determine what
div to show.
I know this is an oft asked thing, but for the life of me I always end
up with two divs showing instead of one.
Thanks for any insight.
Kevin
[jQuery] Regular Expression that works everywhere but in jQuery
Hey there,
I'm trying to use JS to clean up the cruft from a Word doc when it's
being pasted into a WYSYWIG editor.
Word puts conditional comments like this in the HTML:
!--[if !mso] style v\:* {behavior:url(#default#VML);} o\:*
{behavior:url(#default#VML);} w\:* {behavior:url
(#default#VML);} .shape {behavior:url(#default#VML);} /style !
[endif]--
And I'm using this RegEx (I'm no RegEx-pert, but I've successfully
tested it here (http://www.regular-expressions.info/
javascriptexample.html), with the Firefox RegEx add-on, etc.):
//strip out word cruft
var scrubbed = code.html().replace(/(!--).*(--)/gi,);
But it's not working at all. See something I'm missing/stupid I did?
Thanks!
Adam
[jQuery] Animate using relative %
*
Hi,
I am working on a site where are wanting to create a full screen site using
percentages for positioning and displaying of content. As part of the project
we also want to have some animation to bring objects onto the page.
We have the objects in their correct positions using relative positioning and
negative top values for example:
#myDiv{ top: -26%;}
This is where we wish the animation to end with the block in position so
therefore its starting value in the CSS could be: “top: 0%”.
Now I made the assumption that my js to achieve this would be:
$(‘#myDiv’).animate({top : “-26%”});
After testing this, it became clear that the animate function was ignoring the
‘%’ sign and was just applying ‘-26px’ instead.
After positing this directly to John Resig via twitter I got a response asking
me to try:
$(‘#myDiv’).animate({top : “-=26%”});
However the object always animates to: “top: 0px” regardless of its starting
position, percentage value and the +=, -= notation.
Is this a bug or am I missing something here? – Using JQuery 1.3.2
Adam Jessop.
[jQuery] Re: Animate using relative %
Sure,
The site in question is at: http://be.0wned.co.uk
I have currently got active on there two examples of the situations I'm running
into but let me run down the scene.
What we are trying to achieve is that the field, city, rocks and sign (divs
have ID's reflecting those names) are different layers and will animate into
the page from the bottom at queued intervals.
The rock and sign are in position as pointers.
With the field I am giving you the example where I use:
$(#field).animate({
top:-=2%
}, 1500);
The above results in an animation setting the result to: top:0px.
With the city... the position where it fits correctly is top:-69% however as
explained previously, the animate function ignores percentage values and does
them as px. So for the sake of an example I use:
$(#city).animate({
top:'-565%'
},1600);
This moves the position into the correct position, but proves the case that it
uses px instead of % which is no good to me as on browser resize it loses its
relative position.
I hope this helps, please let me know if I can assist any more.
Adam Jessop.
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf
Of John Resig
Sent: 05 March 2009 12:34
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Animate using relative %
Not sure - do you have a sample that we can look at?
--John
On Thu, Mar 5, 2009 at 6:16 AM, Adam Jessop a...@infused-gaming.net wrote:
Hi,
I am working on a site where are wanting to create a full screen site
using percentages for positioning and displaying of content. As part
of the project we also want to have some animation to bring objects onto the
page.
We have the objects in their correct positions using relative
positioning and negative top values for example:
#myDiv{ top: -26%;}
This is where we wish the animation to end with the block in position
so therefore its starting value in the CSS could be: “top: 0%”.
Now I made the assumption that my js to achieve this would be:
$(‘#myDiv’).animate({top : “-26%”});
After testing this, it became clear that the animate function was
ignoring the ‘%’ sign and was just applying ‘-26px’ instead.
After positing this directly to John Resig via twitter I got a
response asking me to try:
$(‘#myDiv’).animate({top : “-=26%”});
However the object always animates to: “top: 0px” regardless of its
starting position, percentage value and the +=, -= notation.
Is this a bug or am I missing something here? – Using JQuery 1.3.2
Adam Jessop.
[jQuery] Re: Animate using relative %
Sure,
The site in question is at: http://be.0wned.co.uk
I have currently got active on there two examples of the situations I'm running
into but let me run down the scene.
What we are trying to achieve is that the field, city, rocks and sign (divs
have ID's reflecting those names) are different layers and will animate into
the page from the bottom at queued intervals.
The rock and sign are in position as pointers.
With the field I am giving you the example where I use:
$(#field).animate({
top:-=2%
}, 1500);
The above results in an animation setting the result to: top:0px.
With the city... the position where it fits correctly is top:-69% however as
explained previously, the animate function ignores percentage values and does
them as px. So for the sake of an example I use:
$(#city).animate({
top:'-565%'
},1600);
This moves the position into the correct position, but proves the case that it
uses px instead of % which is no good to me as on browser resize it loses its
relative position.
I hope this helps, please let me know if I can assist any more.
Adam Jessop.
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf
Of John Resig
Sent: 05 March 2009 12:34
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Animate using relative %
Not sure - do you have a sample that we can look at?
--John
On Thu, Mar 5, 2009 at 6:16 AM, Adam Jessop a...@infused-gaming.net wrote:
Hi,
I am working on a site where are wanting to create a full screen site using
percentages for positioning and displaying of content. As part of the
project we also want to have some animation to bring objects onto the page.
We have the objects in their correct positions using relative positioning
and negative top values for example:
#myDiv{ top: -26%;}
This is where we wish the animation to end with the block in position so
therefore its starting value in the CSS could be: top: 0%.
Now I made the assumption that my js to achieve this would be:
$('#myDiv').animate({top : -26%});
After testing this, it became clear that the animate function was ignoring
the '%' sign and was just applying '-26px' instead.
After positing this directly to John Resig via twitter I got a response
asking me to try:
$('#myDiv').animate({top : -=26%});
However the object always animates to: top: 0px regardless of its starting
position, percentage value and the +=, -= notation.
Is this a bug or am I missing something here? - Using JQuery 1.3.2
Adam Jessop.
***
IMPORTANT INFORMATION CONFIDENTIALITY NOTICE
The information in this e-mail is confidential and may be legally privileged.
It is intended solely for the named recipient. Access to this Email by anyone
else is unauthorised.
If you are not the intended recipient or the employee or agent responsible for
delivering the message to the recipient named,
please note that any use, disclosure, copying, distribution of this e-mail or
any action taken or omitted to be taken in reliance on it is
prohibited. If you are not the intended recipient, please inform us by
returning a copy of the e-mail with the subject
line marked wrong address and then deleting the e-mail, and any attachments
and any copies of it. Any questions should be directed
to postmas...@sivltd.com.
Sheffield International Venues Limited uses regularly updated anti-virus
software in an attempt to reduce the possibility
of infection. However we do not guarantee that any attachments to this e-mail
are virus free.
***
[jQuery] Re: Current item child index ?
Give the li's an ID and just use that for the step number
e.g:
li id=step-1Step one/li
li id=step-2Step two/li
Then:
script
$(#stepsList li).click(function() {
// load stepContent === not a problem
id = $(this).attr('id');
$(#stepFooter).html(Viewing + id.replace(-, ) + of
+$(#stepsList li).length);
})
/script
Un tested but you get the idea...
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of Liam Byrne
Sent: 05 March 2009 12:25
To: jquery-en@googlegroups.com
Subject: [jQuery] Current item child index ?
Hi folks
Just wondering if there's a quick/shorthand way of doing this:
I'm doing a navigation system where I want clickable items but I want to
put the current item number in a footer, e.g.
Any ideas of a quick way (without using each) to get CURRENTSTEPNUMBER
? Basically the reverse of nth-child ?
CODE OUTLINE (IF IT HELPS) :
script
$(#stepsList li).click(function() {
// load stepContent === not a problem
$(#stepFooter).html(Viewing step +CURRENTSTEPNUMBER+ of
+$(#stepsList li).length);
})
/script
h1STEPS TO BE COMPLETED/h1
ul id=stepsList
listep one/li
listep two/li
/listep threeli
/ul
div id=stepContent
div id=stepFooter
/div
/div
***
IMPORTANT INFORMATION CONFIDENTIALITY NOTICE
The information in this e-mail is confidential and may be legally privileged.
It is intended solely for the named recipient. Access to this Email by anyone
else is unauthorised.
If you are not the intended recipient or the employee or agent responsible for
delivering the message to the recipient named,
please note that any use, disclosure, copying, distribution of this e-mail or
any action taken or omitted to be taken in reliance on it is
prohibited. If you are not the intended recipient, please inform us by
returning a copy of the e-mail with the subject
line marked wrong address and then deleting the e-mail, and any attachments
and any copies of it. Any questions should be directed
to postmas...@sivltd.com.
Sheffield International Venues Limited uses regularly updated anti-virus
software in an attempt to reduce the possibility
of infection. However we do not guarantee that any attachments to this e-mail
are virus free.
***
[jQuery] Re: Animate using relative %
* * * Well contrary to the domain name, it is a real site with no threat, disable your JS first if you like! I have the CSS values for how I want the end result to be already, but I don’t want them visible when the page loads, defies the whole point of the effect. After that I'm afraid I don’t really see how that achieves what I want. -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of brian Sent: 05 March 2009 17:23 To: jquery-en@googlegroups.com Subject: [jQuery] Re: Animate using relative % On Thu, Mar 5, 2009 at 8:22 AM, Adam Jessop a...@infused-gaming.net wrote: Sure, The site in question is at: http://be.0wned.co.uk Do you really expect anyone to click that link with JS enabled? ;-) I think the way I'd approach this would be to first get the CSS set up so that, with the images already in place when the page loads, they assume their proper positions regardless of window size. Then, I'd replace each of the images with a single pixel img. When the page loaded, I'd get the positions of each of the 1 pixel imgs on the screen and set the animation params for the respective images which a re off-screen.
[jQuery] Re: Animate using relative %
I appreciate the help :) Again though, seems a long winded approach to something that should work using the right syntax etc right? Surely this must be a bug in jQuery of some kind? Adam. -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of brian Sent: 05 March 2009 18:47 To: jquery-en@googlegroups.com Subject: [jQuery] Re: Animate using relative % On Thu, Mar 5, 2009 at 1:12 PM, Adam Jessop a...@infused-gaming.net wrote: Well contrary to the domain name, it is a real site with no threat, disable your JS first if you like! I was joking. I have the CSS values for how I want the end result to be already, but I don’t want them visible when the page loads, defies the whole point of the effect. I meant that you should leave them visible only for as long as it takes to set up your CSS to have them positioned where you want them. I'm guessing this is a fluid design, so that the image locations would adjust according to screen size changes.. If the CSS isn't correctly done the next step would be pointless. Once the images are how you want them to ultimately be, regardless of screen size changes, replace them with single-pixel images (ie, invisible) at the top-left corner position of your actual images. After that I'm afraid I don’t really see how that achieves what I want. When the page loads, have your script find the positions--using pixels--of each of the placeholder images. Feed those coordinates to your animate function. You could probably achieve the same thing without the placeholders by doing a bit of math based on the screen size and the CSS percentages but this other way seems to me to be simplest.
[jQuery] Re: Animate using relative %
* * * I appreciate the help :) Again though, seems a long winded approach to something that should work using the right syntax etc right? Surely this must be a bug in jQuery of some kind? Adam. -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of brian Sent: 05 March 2009 18:47 To: jquery-en@googlegroups.com Subject: [jQuery] Re: Animate using relative % On Thu, Mar 5, 2009 at 1:12 PM, Adam Jessop a...@infused-gaming.net wrote: Well contrary to the domain name, it is a real site with no threat, disable your JS first if you like! I was joking. I have the CSS values for how I want the end result to be already, but I don’t want them visible when the page loads, defies the whole point of the effect. I meant that you should leave them visible only for as long as it takes to set up your CSS to have them positioned where you want them. I'm guessing this is a fluid design, so that the image locations would adjust according to screen size changes.. If the CSS isn't correctly done the next step would be pointless. Once the images are how you want them to ultimately be, regardless of screen size changes, replace them with single-pixel images (ie, invisible) at the top-left corner position of your actual images. After that I'm afraid I don’t really see how that achieves what I want. When the page loads, have your script find the positions--using pixels--of each of the placeholder images. Feed those coordinates to your animate function. You could probably achieve the same thing without the placeholders by doing a bit of math based on the screen size and the CSS percentages but this other way seems to me to be simplest.
[jQuery] ajax() alternative to load() function?
Hi, Is there a way to use the ajax() function and insert html into the DOM similar to the load() function? I need to be able to catch errors and use a timeout, but replicate what load() does. Thanks.
[jQuery] forcing ajax request to stop
Hey, I'm looking for a way to force some known running ajax requests to stop before initiating another call.. I'm using the jQuery.ajax global events to monitor the active requests.. but in the jQuery docs, i was unable to find a method of forcing a processing request to actually stop... For example, in this case, if someone starts a search request.. but then changes there mind and wants to submit different request, I want the currently processing search request to be forced to stop before allowing the second search to be sent to my back end The only way i can see this happening, is to build into my backend request a method of recieving a stop message, and then abborting the back end call, thus forcing the request to stop.. Does anyone know of a way of doing this with just jQuery or perhaps the XHR object?
[jQuery] triggering a link event that has an image tag?
I've been trying to setup a lightbox (or similar) plugin to work with
my images, but am having problems due to the a tag trigger not
firing. It appears that this is because jquery is triggering the
img event instead of the a event. For example:
The first one is called when I click the thumbnail, but not the second
(which is the one that I want to be called).
jQuery(.flickr-photo a img)
.livequery(click, function() {
alert('img click');
});
jQuery(.flickr-photo a)
.livequery(click, function() {
alert('a click');
});
div class=flickr-photo
a href=blah_thumbnail.jpgimg src=blah_big.jpg //a
/div
Any ideas what I'm doing wrong here? It doesn't seem to be an issue
with livequery as far as I can tell.
[jQuery] How to wait for load() to finish executing
How can I wait for the load() function to finish before executing the
next line of code? The code that I need to execute after load() is
finished cannot be called within the callback function. I basically
need to return true after the load has finished but not beforehand.
Here's the relevant code:
jQuery(this).cluetip({
cluetipClass: 'jtip',
arrows: true,
dropShadow: false,
hoverIntent: false,
sticky: true,
mouseOutClose: false,
closePosition: 'title',
closeText: 'close',
activation: 'click',
local: true,
hideLocal: true,
onActivate: function() {
var url =
jQuery(this).attr(href);
jQuery(this).load(url);
//dont' return true
until load() is finished
return true;
}
});
[jQuery] UI Dialog Position Based on Link Position
I'd like to open a dialog when a link is clicked, and have the dialog open beside the link, similar to a tooltip. Are there any examples on how to calculate the position where the dialog should show up? What's the best way to position it so that it shows within the confines of the page (i.e. if the link is right- aligned, the dialog should popup to the left of the link, etc.).
[jQuery] cluetip plugin crashing Firefox with external style sheet
When using the cluetip plugin, I am loading an external url. The tip loads fine if my external page is plain text/html, however if I reference an external style sheet (using the rel tag), the plugin crashes Firefox. It's happened more than once. Is there a workaround for this other than inline style? I need to use a .css file since I have multiple pages to show with the cluetip. Thanks!
[jQuery] Re: cluetip plugin crashing Firefox with external style sheet
I figured out a workaround by using a hidden div, and loading the
external website content in the hidden div. However, now that it's
working, I've noticed that the cluetip seems to shift its location
after I load the content into the div. Maybe it's the way I'm doing
it? I'd like to be able to load the content before the cluetip is
show, and make sure it is loaded.
Here's what I'm doing right now:
a href=whatever.com rel=#helper class=hTiptest/a
div id=helper style=display: none/div
jQuery(a.hTip)
.livequery(function() {
var url = jQuery(this).attr(href);
jQuery(this).cluetip({
cluetipClass: 'jtip',
arrows: true,
dropShadow: false,
hoverIntent: false,
sticky: true,
mouseOutClose: false,
closePosition: 'title',
closeText: 'close',
activation: 'click',
local: true,
onShow: function(ct, c) {
jQuery(c).load(url, function() {
alert('finished
loading');
});
return true;
}
});
return false;
});
Instead of onShow, I also tried onActivate, but the external site
doesn't finish loading until after the cluetip shows, which causes the
external content to not even show up.
On Jan 27, 9:58 am, Adam apcau...@gmail.com wrote:
When using the cluetip plugin, I am loading an external url. The tip
loads fine if my external page is plain text/html, however if I
reference an external style sheet (using the rel tag), the plugin
crashes Firefox. It's happened more than once. Is there a workaround
for this other than inline style? I need to use a .css file since I
have multiple pages to show with the cluetip.
Thanks!
[jQuery] Re: Slide down and up element and remain vertical size
I have had the same issue on 2 different accordions, where sometimes
the hover event doesnt trigger the drawer to open, and you have to
mouse out and back over again to trigger it. Anyone have a thought as
to how to smooth that out? Mech7, your jumping is pretty subtle, but
Remy over at jqueryfordesigners.com has a tute about jumps in
accordions- check it out.
:::
Adam
On Jan 22, 3:03 am, Mech7 chris.de@gmail.com wrote:
That is what i used first but it's very specific about the html
elements like it expects a p tag as content, that's why i decided
to make my own... :)
On Jan 22, 4:28 pm, Richard D. Worth rdwo...@gmail.com wrote:
You may want to look at the jQuery UI Accordion (if you haven't already):
http://ui.jquery.com/demos/accordion#mouseover
- Richard
On Thu, Jan 22, 2009 at 4:08 AM, Mech7 chris.de@gmail.com wrote:
I have an example here:
http://www.mech7.net/tmp/slide_down/
When i hover the elements it jumps a little in vertical space, does
anybody know a solution how to remain the space my code is :
$(document).ready(function(){
$('#portfolio div.item:first div').addClass('open');
$('#portfolio div.item:first h3').addClass('active');
function slideDownEffect(){
var speed = 100;
$('#portfolio div.item').mouseenter(function () {
if($(this).children('h3').hasClass('active') ==
false)
{
$('#portfolio div.item div').slideUp(speed);
$(this).children('div').slideDown(speed,
slideDownEffect);
$(#portfolio div.item).unbind('mouseenter');
$('#portfolio div.item h3').removeClass('active');
$(this).children('h3').addClass('active');
}
});
}
slideDownEffect();
});
[jQuery] mysterious $(window).error behavior
I can't seem to get $(window).error to work the way it seems like it
should. Have a look at the following page:
http://www.littleshoot.org/errorTest2.html
It includes the following, and neither error is caught by the $
(window).error function -- the alert never happens. Anyone know
what's up?
script type=text/javascript
$(document).ready( function() {
$(window).error(function(msg, url, line) {
alert(Got error);
});
throw new Error(Inside doc ready error);
});
throw new Error(Outside doc ready error);
/script
Thanks.
-Adam Fisk
[jQuery] Re: mysterious $(window).error behavior
It's certainly documented to work. See:
http://docs.jquery.com/Events/error#fn -- particularly the examples.
Straight window.onerror has all sorts of cross-browser issues which I
was hoping to bypass with the jquery call.
-Adam
On Jan 23, 5:04 pm, Mike Alsup mal...@gmail.com wrote:
I can't seem to get $(window).error to work the way it seems like it
should. Have a look at the following page:
http://www.littleshoot.org/errorTest2.html
It includes the following, and neither error is caught by the $
(window).error function -- the alert never happens. Anyone know
what's up?
script type=text/javascript
$(document).ready( function() {
$(window).error(function(msg, url, line) {
alert(Got error);
});
throw new Error(Inside doc ready error);
});
throw new Error(Outside doc ready error);
/script
Thanks.
-Adam Fisk
Hmm, I'm not sure that binding the window error event has ever been
supported by jQuery. I'd stick with using onerror.
window.onerror = function(msg, uri, line) {
}
[jQuery] Re: cluetip not loading external web page
Another problem I am having (or bug?): Is it possible to have the
cluetip open from a mouse click, and close using a close image (or
text)? When I try to setup my cluetip using the apparent settings to
achieve this, the cluetip closes if the mouse pointer enters and then
leaves the area of the cluetip. However, it opens correctly (on a
user's mouse click). Here are my settings:
cluetipClass: 'jtip',
arrows: true,
dropShadow: false,
hoverIntent: false,
sticky: true,
mouseOutClose: true,
closePosition: 'title',
closeText: 'Close',
activation: 'click'
Thanks,
Adam
On Jan 16, 5:09 pm, Karl Swedberg k...@englishrules.com wrote:
I can't diagnose the problem without a test page to view, but I would
suggest that you use Firebug and see what the POST is returning. It
could be a 404 or a 405 or some other error.
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Jan 16, 2009, at 2:55 PM, Adam wrote:
I have setup the cluetip plugin on my website. I was able to get it
working when using local content, similar to the example code of $
('a.title').cluetip({splitTitle: '|'});
However, I can't get it to load an external website. The tool tip
comes up, but it says sorry the contents cannot be loaded. The
external site is a servlet rendered page that loads fine if I type the
URL into a browser window. The only differences between my code and
the example is that I'm using an image for the link and am using
livequery.
a title=Help rel=/portlets/help.do href=/portlets/help.do
class=help style=
img class=icon src=/theme/images/portlet/help.png alt=Help/
/a
jQuery(a.help).livequery(function() {
jQuery(this).cluetip();
});
[jQuery] Re: cluetip not loading external web page
Karl,
Is there anyway to use cluetip with GET requests? My serlvet requires
a query string parameter, so POST won't really work in my scenario.
thanks,
Adam
On Jan 21, 11:07 am, Karl Swedberg k...@englishrules.com wrote:
Hi Adam,
When I try to setup my cluetip using the apparent settings to
achieve this, the cluetip closes if the mouse pointer enters and then
leaves the area of the cluetip
Remove the mouseOutClose: true option. It is set to false by default,
and that is what you'll need.
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Jan 21, 2009, at 10:19 AM, Adam wrote:
Another problem I am having (or bug?): Is it possible to have the
cluetip open from a mouse click, and close using a close image (or
text)? When I try to setup my cluetip using the apparent settings to
achieve this, the cluetip closes if the mouse pointer enters and then
leaves the area of the cluetip. However, it opens correctly (on a
user's mouse click). Here are my settings:
cluetipClass: 'jtip',
arrows: true,
dropShadow: false,
hoverIntent: false,
sticky: true,
mouseOutClose: true,
closePosition: 'title',
closeText: 'Close',
activation: 'click'
Thanks,
Adam
On Jan 16, 5:09 pm, Karl Swedberg k...@englishrules.com wrote:
I can't diagnose the problem without a test page to view, but I would
suggest that you use Firebug and see what the POST is returning. It
could be a 404 or a 405 or some other error.
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Jan 16, 2009, at 2:55 PM, Adam wrote:
I have setup the cluetip plugin on my website. I was able to get it
working when using local content, similar to the example code of $
('a.title').cluetip({splitTitle: '|'});
However, I can't get it to load an external website. The tool tip
comes up, but it says sorry the contents cannot be loaded. The
external site is a servlet rendered page that loads fine if I type
the
URL into a browser window. The only differences between my code and
the example is that I'm using an image for the link and am using
livequery.
a title=Help rel=/portlets/help.do href=/portlets/help.do
class=help style=
img class=icon src=/theme/images/portlet/help.png alt=Help/
/a
jQuery(a.help).livequery(function() {
jQuery(this).cluetip();
});
[jQuery] cluetip not loading external web page
I have setup the cluetip plugin on my website. I was able to get it
working when using local content, similar to the example code of $
('a.title').cluetip({splitTitle: '|'});
However, I can't get it to load an external website. The tool tip
comes up, but it says sorry the contents cannot be loaded. The
external site is a servlet rendered page that loads fine if I type the
URL into a browser window. The only differences between my code and
the example is that I'm using an image for the link and am using
livequery.
a title=Help rel=/portlets/help.do href=/portlets/help.do
class=help style=
img class=icon src=/theme/images/portlet/help.png alt=Help/
/a
jQuery(a.help).livequery(function() {
jQuery(this).cluetip();
});
[jQuery] Trying to mesh UI slider with jCarouselLite
So I have an interface mockup here that will eventually be a real estate property search by price range. http://viewwestaspen.com/new/quicksearch_jcl.html I have the UI slider working, and was using the default array of items from the UI site real-world demo. On update of the slider range, the property elements nicely fade in and out if they are in/out of the range. However, what I would like to do is use jCarouselLite to scroll left and right on the matching elements instead of the default execution. I have implemented the JCL, and it is working fine, and the elements are fading in/out on update of the slider min/max, but the JCL still wants to scroll to the inactive items. How can I make the JCL refresh whenever the slider is updated?? Ideally, I'd love to have it disappear, show a loader gif while updating, then re-appear allowing proper # of 'next' clicks given the new # of properties in the range. I'd also be open to another option for the carousel if something else might play nicer with the slider. Thanks in advance for any help!! -Adam
[jQuery] Fastest way to clear child elements from a div
I'm using jTemplates to create a client grid, but I'm having trouble
with load times. When I'm paging through the grid jTemplates is
taking 4+ seconds to clear the grid and 2+ seconds to load it. I've
got some work to do to make the loading time go down, but I'm worried
about the clearing time. I've tried a few different methods, but
nothing seems to be really fast. I'd like to be able to clear the div
in less than a second. Here's what I've tried:
$(selector).empty() and $(selector).html('') both took between 3-4
seconds
Does anyone know of a faster way to empty the child elements of a div?
[jQuery] Re: Fastest way to clear child elements from a div
It ran in 5ms, but its my understanding if I use the method your
suggesting I'll be leaking memory. If I just set the innerhtml = ,
I think the dom element's children aren't disposed. They just sit
around chewing up memory, so I don't think I can use the method your
suggesting.
On Dec 30, 2:42 pm, MorningZ morni...@gmail.com wrote:
just for laughs...see of
document.getElementById(ID of Div Tag).innerHTML = ;
is anything of an improvement
On Dec 30, 3:02 pm, Adam Guichard amguich...@gmail.com wrote:
I'm using jTemplates to create a client grid, but I'm having trouble
with load times. When I'm paging through the grid jTemplates is
taking 4+ seconds to clear the grid and 2+ seconds to load it. I've
got some work to do to make the loading time go down, but I'm worried
about the clearing time. I've tried a few different methods, but
nothing seems to be really fast. I'd like to be able to clear the div
in less than a second. Here's what I've tried:
$(selector).empty() and $(selector).html('') both took between 3-4
seconds
Does anyone know of a faster way to empty the child elements of a div?
[jQuery] jQuery help
I'm trying to change the border color of an image using it's id with
jquery
( photo['id'] is passed in from a previous function )
the id's of the photos are of the form 'photo239839'
$('#photo'+photo['id']+'').click(function(){
$('#photo'+photo['id']+'').css('border-color','#777');
});
When i try to use this same code using it's class it works,
but i can't use this method since there are multiple images on the
same
page with the same class
$('img.flickr_photo').click(function(){
$(this.flickr_photo).css('border-color','#777');
});
Please help, i'm a bit of a jQuery newb.
Thanks!
[jQuery] validation plugin negative number rule?
How can I create a rule in the validation plugin to disallow negative numbers. I have a text field that should accept any number 0 thanks, A.
[jQuery] Re: Submit a form automatically
These suggestions helped, but I now I can't figure out how to submit a
form with a URL of an external site... i.e. my site is http://www.abc.com/
, but I want to submit a form to http://www.123.com/
Is this possible in ajax?
Thanks,
A.
On Dec 13, 8:22 am, Mike Alsup mal...@gmail.com wrote:
I have a dynamically created form that I'd like to submit
automatically after it loads. It doesn't look like forms have an
onload event. I would use the window onload, but the form isn't
necessarily around when the window loads - it is created later in a
jquery popup.
Any suggestions? I am using the jquery form plugin if it matters.
After you create the form and insert it into the DOM, select it and
invoke the submit method. For example:
$('#someDiv').append('form id=myForm.../form');
$('#myForm').submit();
[jQuery] Re: Submit a form automatically
I was planning to submit the form in a jquery dialog, read the response, and then put the response text in a new browser window. I'm probably better off just scrapping my plan and sticking to opening the form in a new window and submitting in the same window without using ajax. thanks. On Dec 19, 2:30 pm, Mike Alsup mal...@gmail.com wrote: These suggestions helped, but I now I can't figure out how to submit a form with a URL of an external site... i.e. my site ishttp://www.abc.com/ , but I want to submit a form tohttp://www.123.com/ Is this possible in ajax? No, not with ajax, but the code I posted didn't use ajax. It just submitted the form - and the destination is controlled by the form's action attribute.
[jQuery] Submit a form automatically
I have a dynamically created form that I'd like to submit automatically after it loads. It doesn't look like forms have an onload event. I would use the window onload, but the form isn't necessarily around when the window loads - it is created later in a jquery popup. Any suggestions? I am using the jquery form plugin if it matters.
[jQuery] WordPress IMM-Glossary - request for tooltip port to JQuery
I am attempting to use this great plugin for WP glossary creation, which has a tooltip definition option that uses prototype. http://www.internetmarketingmonitor.org/word-press-plugins/imm-glossary-wordpress-plugin/ I have a lot of other JQ running on this site, and the prototype tooltips are not working due to what I assume are conflicts between prototype and JQ. Would anyone be interested in project work to port this to JQ?? Thanks! -Adam
[jQuery] detect element width change
How can I detect when an element's width (or height) has changed? For instance, on a div element.
[jQuery] Re: clueTip fade out
Thanks for the reply, Karl. I'll keep watch for your inevitable update, whenever that may be. Adam On Nov 18, 12:17 pm, Karl Swedberg [EMAIL PROTECTED] wrote: Hi Adam, I tried to allow for animating out but wasn't able to pull it off, probably for reasons similar to those that Joel Birch ran across with his Superfish plugin. One of these days when I rewrite the plugin, I'm going to set it up to create a separate tooltip for each item so that they can work independently of one another. That way I can avoid race conditions that have thwarted my attempts so far. --Karl Karl Swedbergwww.englishrules.comwww.learningjquery.com On Nov 18, 2008, at 10:18 AM, Adam wrote: Hey Karl (and others) Awesome plugin, thanks. Just wondering if there's a way to make the cluetips animate out as well as in. I've tried to make it happen with hoverIntent but it ignores the over/out parameters. Anything I can do on the clueTip end for this? Thanks in advance.
[jQuery] clueTip fade out
Hey Karl (and others) Awesome plugin, thanks. Just wondering if there's a way to make the cluetips animate out as well as in. I've tried to make it happen with hoverIntent but it ignores the over/out parameters. Anything I can do on the clueTip end for this? Thanks in advance.
[jQuery] selector to .wrap multiple elements in HTML
I am trying to figure out how to select 3 elements that occur together and wrap all 3 together (not individually) in a DIV tag. This is what I have: h1.../h1 p.../p p.../p h1.../h1 p.../p p.../p and I want to turn that into: div class='fade' h1.../h1 p.../p p.../p h1.../h1 p.../p p.../p /div I have tried using the (h1 + p + p) with .wrap, but this seems to detect the trio, but only wrap the last p. How can I make it wrap the trio together? Thanks! -Adam
[jQuery] Re: selector to .wrap multiple elements in HTML
Karl,
Thanks very much. My bad, but what I actually need is the div wrapped
around each of the sets of h1,p,p. So, the resulting code must be:
div class='fade'
h1.../h1
p.../p
p.../p
/div
div class='fade'
h1.../h1
p.../p
p.../p
/div
I have tried a number of different things, and this function works to
wrap the first set of 3 in the div:
$(#content h1:nth-child(1),#content p:nth-child(2),#content p:nth-
child(3)).wrapAll(div class='fade'/div);
so then I try to add another function to wrap the second set:
$(#content h1:nth-child(4),#content p:nth-child(5),#content p:nth-
child(6)).wrapAll(div class='fade'/div);
but I think the 'nth's get fouled up once the first function runs and
the results of adding the second function are very odd.
Any thoughts? Thanks (again) Karl!!
-Adam
On Nov 12, 2:14 pm, Karl Swedberg [EMAIL PROTECTED] wrote:
Hi Adam,
Take a look at the .wrapAll() method. that should get you closer.
You'll need to select all of the elements first, though. $('h1 + p +
p') only selects that final p. If you want to wrap the div around all
h1 and p elements, you could try $('h1,p').wrapAll('div
class=fade/div');
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Nov 12, 2008, at 2:11 PM, Adam wrote:
I am trying to figure out how to select 3 elements that occur together
and wrap all 3 together (not individually) in a DIV tag. This is what
I have:
h1.../h1
p.../p
p.../p
h1.../h1
p.../p
p.../p
and I want to turn that into:
div class='fade'
h1.../h1
p.../p
p.../p
h1.../h1
p.../p
p.../p
/div
I have tried using the (h1 + p + p) with .wrap, but this seems to
detect the trio, but only wrap the last p. How can I make it wrap the
trio together?
Thanks!
-Adam
[jQuery] Re: selector to .wrap multiple elements in HTML
Ricardo,
Thanks for your response. Are you sure about this syntax? Ive tried
this and there's no result. The code is not modified at all...
-Adam
On Nov 12, 4:09 pm, ricardobeat [EMAIL PROTECTED] wrote:
This should work for this specific case (separated in lines for
readability):
$('h1').each(function(){
var $this = this;
$this
.add( $this.next() )
.add( $this.next().next() )
.wrapAll('div class=fade/div');
});
- ricardo
On Nov 12, 7:48 pm, Adam [EMAIL PROTECTED] wrote:
Karl,
Thanks very much. My bad, but what I actually need is the div wrapped
around each of the sets of h1,p,p. So, the resulting code must be:
div class='fade'
h1.../h1
p.../p
p.../p
/div
div class='fade'
h1.../h1
p.../p
p.../p
/div
I have tried a number of different things, and this function works to
wrapthe first set of 3 in the div:
$(#content h1:nth-child(1),#content p:nth-child(2),#content p:nth-
child(3)).wrapAll(div class='fade'/div);
so then I try to add another function towrapthe second set:
$(#content h1:nth-child(4),#content p:nth-child(5),#content p:nth-
child(6)).wrapAll(div class='fade'/div);
but I think the 'nth's get fouled up once the first function runs and
the results of adding the second function are very odd.
Any thoughts? Thanks (again) Karl!!
-Adam
On Nov 12, 2:14 pm, Karl Swedberg [EMAIL PROTECTED] wrote:
Hi Adam,
Take a look at the .wrapAll() method. that should get you closer.
You'll need to select all of the elements first, though. $('h1 + p +
p') only selects that final p. If you want towrapthe div around all
h1 and p elements, you could try $('h1,p').wrapAll('div
class=fade/div');
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Nov 12, 2008, at 2:11 PM, Adam wrote:
I am trying to figure out how to select 3 elements that occur together
andwrapall 3 together (not individually) in a DIV tag. This is what
I have:
h1.../h1
p.../p
p.../p
h1.../h1
p.../p
p.../p
and I want to turn that into:
div class='fade'
h1.../h1
p.../p
p.../p
h1.../h1
p.../p
p.../p
/div
I have tried using the (h1 + p + p) with .wrap, but this seems to
detect the trio, but onlywrapthe last p. How can I make itwrapthe
trio together?
Thanks!
-Adam
[jQuery] Re: selector to .wrap multiple elements in HTML
Beautiful! That edit worked with Ricardo's script. Thank you both very
much!
-Adam
On Nov 12, 9:21 pm, Karl Swedberg [EMAIL PROTECTED] wrote:
Actually, Ricardo's should work if ...
1. you change var $this = this; to var $this = $(this);
2. you know for sure you'll only have two paragraphs after each h1
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Nov 12, 2008, at 9:04 PM, Adam wrote:
Ricardo,
Thanks for your response. Are you sure about this syntax? Ive tried
this and there's no result. The code is not modified at all...
-Adam
On Nov 12, 4:09 pm, ricardobeat [EMAIL PROTECTED] wrote:
This should work for this specific case (separated in lines for
readability):
$('h1').each(function(){
var $this = this;
$this
.add( $this.next() )
.add( $this.next().next() )
.wrapAll('div class=fade/div');
});
- ricardo
On Nov 12, 7:48 pm, Adam [EMAIL PROTECTED] wrote:
Karl,
Thanks very much. My bad, but what I actually need is the div
wrapped
around each of the sets of h1,p,p. So, the resulting code must be:
div class='fade'
h1.../h1
p.../p
p.../p
/div
div class='fade'
h1.../h1
p.../p
p.../p
/div
I have tried a number of different things, and this function works
to
wrapthe first set of 3 in the div:
$(#content h1:nth-child(1),#content p:nth-child(2),#content p:nth-
child(3)).wrapAll(div class='fade'/div);
so then I try to add another function towrapthe second set:
$(#content h1:nth-child(4),#content p:nth-child(5),#content p:nth-
child(6)).wrapAll(div class='fade'/div);
but I think the 'nth's get fouled up once the first function runs
and
the results of adding the second function are very odd.
Any thoughts? Thanks (again) Karl!!
-Adam
On Nov 12, 2:14 pm, Karl Swedberg [EMAIL PROTECTED] wrote:
Hi Adam,
Take a look at the .wrapAll() method. that should get you closer.
You'll need to select all of the elements first, though. $('h1 +
p +
p') only selects that final p. If you want towrapthe div around all
h1 and p elements, you could try $('h1,p').wrapAll('div
class=fade/div');
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Nov 12, 2008, at 2:11 PM, Adam wrote:
I am trying to figure out how to select 3 elements that occur
together
andwrapall 3 together (not individually) in a DIV tag. This is
what
I have:
h1.../h1
p.../p
p.../p
h1.../h1
p.../p
p.../p
and I want to turn that into:
div class='fade'
h1.../h1
p.../p
p.../p
h1.../h1
p.../p
p.../p
/div
I have tried using the (h1 + p + p) with .wrap, but this seems
to
detect the trio, but onlywrapthe last p. How can I make itwrapthe
trio together?
Thanks!
-Adam
[jQuery] datepicker z-index
I'm having trouble overriding the default z-index for the datepicker.
Here's the code I have (minus some stuff that doesn't apply to this issue):
$(#datefield).datepicker({
beforeShow: function()
{
$(this).css(position, absolute);
$(this).css(z-index, 30);
return {};
}
});
I've also tried using zIndex instead of z-index since that's how javascript
calls it. Any ideas?
--
Adam
Do one thing, and do it well.
-- The UNIX Philosophy
[jQuery] Using ajaxStart/Stop for multiple ajax calls
It's possible that I could have 2+ ajax actions running on my website at the same time, and I'd like to show a 'loading' image for each of them. When I use ajaxStart/Stop, if one ajax call starts, it shows the 'loading' image, but if that call doesn't stop before another ajax call starts, the second call does not show the 'loading' image. Is there anyway around this? Thanks!
[jQuery] Tooltip plugin
Is there any way to make the tooltip appear in a fixed position always, e.g. below and aligned left to a div above it, no matter what part of the div the mouse passes over? I'm sure it must be an option somewhere but I can't see where in the documentation (http://docs.jquery.com/Plugins/Tooltip/tooltip#options). The map area example with 'positionLeft: true' is as close as I can find so far. Any help appreciated. Adam
[jQuery] Re: Accessing an element's child
That's perfect. Thanks!
I read the docs from that URL but I could only find the snippet that was
formed like $(parent child). I must have accidentally skipped over the
forms.
Thanks Richardo
On Wed, Oct 22, 2008 at 4:08 PM, ricardobeat [EMAIL PROTECTED] wrote:
Three different ways:
1. children() lookup
$(this).children('div')
2. context lookup
$(' div',this)
3. find()
$(this).find(' div') // is basically the same as nº2
Are you reading the docs at docs.jquery.com? They're very clear and
have examples for every selector.
cheers,
- ricardo
On Oct 22, 1:45 pm, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
I'm new to jQuery and I dabbled in it a little last night. I know you
can access a child element via $(parent child) but what if you're
currently accessing the parent using the $(this) operator? Would I
just use $(this child) without the quotes? That doesn't stike me as
something that would work...
Thanks,
Adam
--
Adam
Do one thing, and do it well.
-- The UNIX Philosophy
[jQuery] Resizing Images in jQuery
I am trying to display images on the page via ajax, but they are slow loading. What I'd like to do is show a 'loading' image while the image is loading, and then load the image. The problem is, all of the images are different sizes, and so I can't set the 'loading' image to the exact size of whatever image is loading. Once I load an image, the image stretches overtop of the content below it or to the side. Is there a way with jQuery to dynamically resize everything around it so that the image will fit into its space?
[jQuery] Re: sortable links
I suspect it might be an issue with the version I was using. I
changed versions, and it works okay now without any hiccups.
thanks,
Adam
On Oct 13, 11:58 am, MorningZ [EMAIL PROTECTED] wrote:
Hmmm... here's some example code i worked up really quick
http://paste.pocoo.org/show/87852/
even *without* the bind and unbind it worked as it should
(dragging an li or a sorted it, just clicking it made it go to
the href)
On Oct 13, 11:52 am, Alexandre Plennevaux [EMAIL PROTECTED]
wrote:
how about preventing event bubbling ?
$(.mydraggable).click(function(e){ e.stopPropagation();});
On Mon, Oct 13, 2008 at 5:38 PM, MorningZ [EMAIL PROTECTED] wrote:
Well, as mentioned above use theSortable'sevent handlers (sort
start, end, etc) to wire/unwire on an return false to the
anchors...
On Oct 13, 11:09 am, Adam [EMAIL PROTECTED] wrote:
Actually, I am applying thesortableto an LI tag which contains the
link, but if I sort and the mouse pointer is on top of the link, the
link click event is still executed.
On Oct 13, 10:09 am, Andy Matthews [EMAIL PROTECTED] wrote:
He's not talking about clicking on the link to activate it, but
clcking on
it to drag and sort it.
I will say that you might be better off applying thesortableto an LI
tag
which contains the link, rather than directly to the link itself.
Remember that a link isn't technically a list, but a group of li tags
are.
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED]
On
Behalf Of MorningZ
Sent: Monday, October 13, 2008 9:04 AM
To: jQuery (English)
Subject: [jQuery] Re:sortablelinks
if you don't want the user to go anywhere when clicking on a link,
then
why
use a link?
On Oct 13, 9:50 am, Adam [EMAIL PROTECTED] wrote:
Using the jquery UI plugin, I have setup a list of links (anchors)
to
besortable, but after I sort an item, the link is executed, and I am
taken to the web page for that link. Is there a way to setup the
Sortableplugin to prevent this from happening?
[jQuery] Re: sortable links
I suspect it might be an issue with the version I was using. I
changed versions, and it works okay now without any hiccups.
thanks,
Adam
On Oct 13, 11:58 am, MorningZ [EMAIL PROTECTED] wrote:
Hmmm... here's some example code i worked up really quick
http://paste.pocoo.org/show/87852/
even *without* the bind and unbind it worked as it should
(dragging an li or a sorted it, just clicking it made it go to
the href)
On Oct 13, 11:52 am, Alexandre Plennevaux [EMAIL PROTECTED]
wrote:
how about preventing event bubbling ?
$(.mydraggable).click(function(e){ e.stopPropagation();});
On Mon, Oct 13, 2008 at 5:38 PM, MorningZ [EMAIL PROTECTED] wrote:
Well, as mentioned above use theSortable'sevent handlers (sort
start, end, etc) to wire/unwire on an return false to the
anchors...
On Oct 13, 11:09 am, Adam [EMAIL PROTECTED] wrote:
Actually, I am applying thesortableto an LI tag which contains the
link, but if I sort and the mouse pointer is on top of the link, the
link click event is still executed.
On Oct 13, 10:09 am, Andy Matthews [EMAIL PROTECTED] wrote:
He's not talking about clicking on the link to activate it, but
clcking on
it to drag and sort it.
I will say that you might be better off applying thesortableto an LI
tag
which contains the link, rather than directly to the link itself.
Remember that a link isn't technically a list, but a group of li tags
are.
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED]
On
Behalf Of MorningZ
Sent: Monday, October 13, 2008 9:04 AM
To: jQuery (English)
Subject: [jQuery] Re:sortablelinks
if you don't want the user to go anywhere when clicking on a link,
then
why
use a link?
On Oct 13, 9:50 am, Adam [EMAIL PROTECTED] wrote:
Using the jquery UI plugin, I have setup a list of links (anchors)
to
besortable, but after I sort an item, the link is executed, and I am
taken to the web page for that link. Is there a way to setup the
Sortableplugin to prevent this from happening?
[jQuery] Re: sortable links
I suspect it might be an issue with the version I was using. I
changed versions, and it works okay now without any hiccups.
thanks,
Adam
On Oct 13, 11:58 am, MorningZ [EMAIL PROTECTED] wrote:
Hmmm... here's some example code i worked up really quick
http://paste.pocoo.org/show/87852/
even *without* the bind and unbind it worked as it should
(dragging an li or a sorted it, just clicking it made it go to
the href)
On Oct 13, 11:52 am, Alexandre Plennevaux [EMAIL PROTECTED]
wrote:
how about preventing event bubbling ?
$(.mydraggable).click(function(e){ e.stopPropagation();});
On Mon, Oct 13, 2008 at 5:38 PM, MorningZ [EMAIL PROTECTED] wrote:
Well, as mentioned above use theSortable'sevent handlers (sort
start, end, etc) to wire/unwire on an return false to the
anchors...
On Oct 13, 11:09 am, Adam [EMAIL PROTECTED] wrote:
Actually, I am applying thesortableto an LI tag which contains the
link, but if I sort and the mouse pointer is on top of the link, the
link click event is still executed.
On Oct 13, 10:09 am, Andy Matthews [EMAIL PROTECTED] wrote:
He's not talking about clicking on the link to activate it, but
clcking on
it to drag and sort it.
I will say that you might be better off applying thesortableto an LI
tag
which contains the link, rather than directly to the link itself.
Remember that a link isn't technically a list, but a group of li tags
are.
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED]
On
Behalf Of MorningZ
Sent: Monday, October 13, 2008 9:04 AM
To: jQuery (English)
Subject: [jQuery] Re:sortablelinks
if you don't want the user to go anywhere when clicking on a link,
then
why
use a link?
On Oct 13, 9:50 am, Adam [EMAIL PROTECTED] wrote:
Using the jquery UI plugin, I have setup a list of links (anchors)
to
besortable, but after I sort an item, the link is executed, and I am
taken to the web page for that link. Is there a way to setup the
Sortableplugin to prevent this from happening?
[jQuery] sortable links
Using the jquery UI plugin, I have setup a list of links (anchors) to be sortable, but after I sort an item, the link is executed, and I am taken to the web page for that link. Is there a way to setup the Sortable plugin to prevent this from happening?
[jQuery] Re: sortable links
Actually, I am applying the sortable to an LI tag which contains the link, but if I sort and the mouse pointer is on top of the link, the link click event is still executed. On Oct 13, 10:09 am, Andy Matthews [EMAIL PROTECTED] wrote: He's not talking about clicking on the link to activate it, but clcking on it to drag and sort it. I will say that you might be better off applying the sortable to an LI tag which contains the link, rather than directly to the link itself. Remember that a link isn't technically a list, but a group of li tags are. -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of MorningZ Sent: Monday, October 13, 2008 9:04 AM To: jQuery (English) Subject: [jQuery] Re: sortable links if you don't want the user to go anywhere when clicking on a link, then why use a link? On Oct 13, 9:50 am, Adam [EMAIL PROTECTED] wrote: Using the jquery UI plugin, I have setup a list of links (anchors) to be sortable, but after I sort an item, the link is executed, and I am taken to the web page for that link. Is there a way to setup the Sortable plugin to prevent this from happening?
[jQuery] Re: sortable links
Actually, I am applying the sortable to an LI tag which contains the link, but if I sort and the mouse pointer is on top of the link, the link click event is still executed. On Oct 13, 10:09 am, Andy Matthews [EMAIL PROTECTED] wrote: He's not talking about clicking on the link to activate it, but clcking on it to drag and sort it. I will say that you might be better off applying the sortable to an LI tag which contains the link, rather than directly to the link itself. Remember that a link isn't technically a list, but a group of li tags are. -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of MorningZ Sent: Monday, October 13, 2008 9:04 AM To: jQuery (English) Subject: [jQuery] Re: sortable links if you don't want the user to go anywhere when clicking on a link, then why use a link? On Oct 13, 9:50 am, Adam [EMAIL PROTECTED] wrote: Using the jquery UI plugin, I have setup a list of links (anchors) to be sortable, but after I sort an item, the link is executed, and I am taken to the web page for that link. Is there a way to setup the Sortable plugin to prevent this from happening?
[jQuery] Form Plugin - JSON upload problem
Hi Mike and all
I've read the documentation on uploading a file via the form plugin
and JSON, but I simply can't get it to work. The form plugin dies as
soon as I submit it... no error is thrown, but it posts the whole page
like a normal form and no response is given.
Here's my form code:
form action=http://localhost/media/add; method=post class=form-
std id=form-add-media enctype=multipart/form-data
input name=sid value=1 type=hidden
input name=stype value=1 type=hidden
input name=m value=i-image type=hidden
div id=add-m-e/div
div id=add-m-i
div style=display: block; class=m-type id=i-image
p
label for=m-imageChoose an image to upload/label
input name=m_image type=file
/p
/div
/div
div id=add-m-r/div
p class=form-buttonsinput name=m_submit value=Add
type=submit/p
/form
Here's my JS:
$('#form-add-media').ajaxForm({
beforeSubmit: function(a,f,o) {
o.dataType = 'json';
var queryString = $.param(a);
console.log(queryString);
//return false;
},
success: function(d) {
if(d.error) {
$('#add-m-e').html(d.msg);
}
else {
$('#add-m-e').empty();
}
}
});
Thanks for any help you can provide!
[jQuery] Re: Form Plugin - JSON upload problem
It should be noted that the div id=add-m-i portion of the form is
cloned and inserted when a user clicks a link. I think that part of
the problem is that the plugin isn't detecting the value of the file
input even though it is present in the data (seen via the console).
On Sep 27, 11:06 am, Adam [EMAIL PROTECTED] wrote:
Hi Mike and all
I've read the documentation on uploading a file via the form plugin
and JSON, but I simply can't get it to work. The form plugin dies as
soon as I submit it... no error is thrown, but it posts the whole page
like a normal form and no response is given.
Here's my form code:
form action=http://localhost/media/add; method=post class=form-
std id=form-add-media enctype=multipart/form-data
input name=sid value=1 type=hidden
input name=stype value=1 type=hidden
input name=m value=i-image type=hidden
div id=add-m-e/div
div id=add-m-i
div style=display: block; class=m-type id=i-image
p
label for=m-imageChoose an image to upload/label
input name=m_image type=file
/p
/div
/div
div id=add-m-r/div
p class=form-buttonsinput name=m_submit value=Add
type=submit/p
/form
Here's my JS:
$('#form-add-media').ajaxForm({
beforeSubmit: function(a,f,o) {
o.dataType = 'json';
var queryString = $.param(a);
console.log(queryString);
//return false;
},
success: function(d) {
if(d.error) {
$('#add-m-e').html(d.msg);
}
else {
$('#add-m-e').empty();
}
}
});
Thanks for any help you can provide!
