[jQuery] Re: Add a second trigger in this function
I think you just forgot the last brackets on your hover method: $(div.tvbutton).hover(function () { $(div.tv).trigger('hover'); }) --- Forgotten This could be optimized a little better by using id's, or at last saving a a reference to the div.tv, so that you don't have to make search for the div every time (unless you're using ajax ofcourse), but this should work now at last :-) / Johan On Jan 6, 9:42 pm, Jordan jscottphil...@gmail.com wrote: Thanks for the insight Johan! When I implemented that though, it just added the hover cross fade to the other div as well. I am looking for a way to make the 2nd div JUST trigger the first. I was looking at the page you linked to and I am messing around with something like the following... although I can't get it to work. Any thoughts? $(document).ready(function () { $('div.tv, div.desk, div.phone').hover(function () { //hover in var div = $(' div', this); if (div.is(':animated')) { div.stop().fadeTo(500, 1); } else { div.fadeIn(250); } }, function () { // hover out var div = $(' div', this); if (div.is(':animated')) { div.stop().fadeTo(1000, 0); } else { div.fadeOut(1000); } }); $(div.tvbutton).hover(function () { $(div.tv).trigger('hover'); }); On Jan 5, 4:33 pm, Johan Borestad johan.bores...@gmail.com wrote: Hi! There are a number of nice implementations you could use for this. Example the jQuery trigger.http://docs.jquery.com/Events/trigger But for now, the simpliest solution is just to add another selector like this $('div.example, div.tv').hover( . / Johan On Jan 5, 8:33 pm, Jordan jscottphil...@gmail.com wrote: I recently implemented the Image Cross Fade Transition (http:// jqueryfordesigners.com/image-cross-fade-transition/) It works great, and I'm hoping to add to the code to enhance the functionality. Currently, if I hover over the image, it runs the cross fade transition, which I would like to keep. I have another div on the page that I would like to trigger the first instance when hovered over as well. Is there a good way to add this? Here's what I'm using for the first instance: $(document).ready(function () { $('div.tv').hover(function () { //hover in var div = $(' div', this); if (div.is(':animated')) { div.stop().fadeTo(500, 1); } else { div.fadeIn(250); } }, function () { // hover out var div = $(' div', this); if (div.is(':animated')) { div.stop().fadeTo(1000, 0); } else { div.fadeOut(1000); } });
[jQuery] Re: removeClass() fires before anything else in a series of functions when I need it to fire last.
Hi! This is due to that the fadeOut function is asynchronous (and that's a good thing, otherwise the entire browser would freeze while animating). To solve your problem you could use a callback. That's a second parameter to the fadeOut method as a anonymous function http://docs.jquery.com/Effects/fadeOut $(#notice).fadeOut(800, function(){ $(#notice-tab).removeClass('active-notice'); }); The method will now remove the active-notice class afterwards. / Johan On Jan 5, 11:25 pm, Kinsbane kinsb...@gmail.com wrote: er, jeez I'm sorry - i don't know how to format code on Google Groups : ( On Jan 5, 2:21 pm, Kinsbane kinsb...@gmail.com wrote: So, there's a main column of content and to the left of the main column is an A element that is absolutely positioned. I have an announcement system that when there's an active announcement, a box is rendered above the main column, pushing the main column down. However, the A element that is absolutely positioned stays where it is. I added code to check for an active announcement and add a class to the A element so it'll keep it positioned alongside the left-border of the main column. When a user closes the announcement box, it fades out, and the main column moves back up to fill the space - but the positioned A element does not follow. I then added code to the function I had to fade out the box and save a cookie to show the user had closed the active announcement box which removed the active-announcement class I had PHP add to the A element. The problem is, even though the removeClass() function is last in the series of functions, it fires first - the positioned A element moves up to where it should be BEFORE the active announcement box fades out. How can I change this so that the positioned A element has its class removed after the other two things have taken place? Here's the jQuery code I have: [code] $(#close-notice).click(function(){ $(#notice).fadeOut(800); createCookie('t3d_notice', 't3dnotice_?= $announcement['id']; ? ', 365); $(#notice-tab).removeClass('active-notice'); } ); [/code]
[jQuery] Re: Add a second trigger in this function
Hi! There are a number of nice implementations you could use for this. Example the jQuery trigger. http://docs.jquery.com/Events/trigger But for now, the simpliest solution is just to add another selector like this $('div.example, div.tv').hover( . / Johan On Jan 5, 8:33 pm, Jordan jscottphil...@gmail.com wrote: I recently implemented the Image Cross Fade Transition (http:// jqueryfordesigners.com/image-cross-fade-transition/) It works great, and I'm hoping to add to the code to enhance the functionality. Currently, if I hover over the image, it runs the cross fade transition, which I would like to keep. I have another div on the page that I would like to trigger the first instance when hovered over as well. Is there a good way to add this? Here's what I'm using for the first instance: $(document).ready(function () { $('div.tv').hover(function () { //hover in var div = $(' div', this); if (div.is(':animated')) { div.stop().fadeTo(500, 1); } else { div.fadeIn(250); } }, function () { // hover out var div = $(' div', this); if (div.is(':animated')) { div.stop().fadeTo(1000, 0); } else { div.fadeOut(1000); } });
[jQuery] Re: Change opacity of item with class of selected
Hi Paul! This is a case where you really don't even should use Javascript, unless you're trying to do some fancy animations. Rely entirely on CSS with a simple css-rule #thumbs li.selected { filter:alpha(opacity=50); opacity:0.50; } This will also be much much faster than any other solutions. / Johan On Jan 5, 7:50 pm, Paul Collins pauldcoll...@gmail.com wrote: Sorry, the test page:http://paulcollinslondon.com/test/test.html 2010/1/5 Paul Collins pauldcoll...@gmail.com Thanks very much for your help Brian. That works, but I think the problem may go deeper than I thought! I've put up a test page. I'm using the JQuery Opacity Rollover Script as a part of the Gallerific plugin http://www.twospy.com/galleriffic/#1 To try and keep this simple, when you hover over a thumbnail, it originally went from dark to light. I've reversed the order of this in mouseOutOpacity mouseOverOpacity on the scripts.js jquery.opacityrollover.js, so now they are full opacity by default and half when you hover over. There is a selected class applied when you click on a thumbnail and I want to make the opacity stay at half when you click on it. There seems to be a default on all list items of the thumbs ul of opacity: 1; I want to change it to 0.5 when an item has a class of selected, but can't get it to work. I've tried removing the inline style first using $(#portfolio #thumbs li.selected).removeAttr(style); But this doesn't work. Sorry for the long windedness of this post, but if anyone could even give me a hint of where to start looking, I would be really grateful. Thanks 2010/1/5 brian zijn.digi...@gmail.com Just put the class in the selector instead of testing for it first: $(#portfolio #thumbs li.selected).css('opacity','0.5'); If the class doesn't exist, jQuery will do nothing (instead of throwing an undefined error or similar). On Tue, Jan 5, 2010 at 12:45 PM, Paul Collins pauldcoll...@gmail.com wrote: Hi all I've been stuck on this for four hours, and I still can't solve it! I am trying to check if a list item has a class of selected, then is so change the opacity to 0.5. Here is my code: if ($(#portfolio #thumbs ul li).hasClass(.selected)) { $(this).css('opacity','0.5'); } It seems that the this part isn't working, is it to do with putting it in an event? Would appreciate any help
[jQuery] Re: Jquery color animation problem
Hi! This is a known Internet Explorer bug (and a very annoying one aswell). Just adding a background color or image to the container element will fix this. / Johan On Jan 5, 9:43 am, Md. Ali Ahsan Rana ranacser...@gmail.com wrote: I am trying to do it: $(this).animate({opacity:1},700); it looks fine in firefox, but the texts getting very odd look in ie 6 and ie 7. Is there any way to fix it? Also, i trie to change color like $(this).animate({color:#FF},700); and its not working. Please help... --http://ranacseruet.blogspot.com/
[jQuery] Re: jQuery Equivalent of Prototype Function.bind
I'm not that good at Prototype at all, but wouldn't this be equivalent? setTimeout(function(){ myFunction.apply(this) } , 1000) / Johan On Jan 5, 3:43 pm, Bruce brucejin...@gmail.com wrote: Is there a jQuery way of doing this Prototype bind? var func = myFunction; setTimeout(func.bind(this), 1000); Thanks.
[jQuery] Re: css editor with jquery
How do you internally represent your edited data? I didn't read the entire fonte.js script, but this should probably be solved by a representing each editable areas as separate objects with different id's. Then serialize everything to a JSON-object and post it to your backend where you could save it into a database. I don't think that saving this into a cookie will be a good idea, since there's a 4kb limit on cookies. You will of course need to create an method that should be called on init that reads your saved data (inline object or by making an ajax requests) and recreates the page. This could be solved in a number of ways, but start with reading some posts about json and you'll be on your way. / Johan On Jan 2, 6:28 pm, Rick Faircloth r...@whitestonemedia.com wrote: Very interesting work, Alfredo! Rick -Original Message- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of orazio.nelson Sent: Saturday, January 02, 2010 9:26 AM To: jQuery (English) Subject: [jQuery] css editor with jquery Hello, i made a proof of concept about a css editor made with jquery. You can see and download it from:http://tt4fn.netsons.org/fonte Is possible to edit almost all the page, for each section there are 34 css customizable options. But now I've a trouble: how can I push the generated css and save it? Tnx Alfredo
[jQuery] Re: live event with instant execution
Hi! I'm not really sure of what you're trying to do, but the main problem is that you're not passing all selectors to your flexinInitialiseElement method. Maybe somethingl like this will help you. It's iterationg through all dom nodes and passing them to flexinInitialiseElement. $(*).each(function(){ var $this = $(this); flexinInitialiseElement( $this, false) }) The entire code is really bad if performance is an issue, so maybe a small vanilla js would do fine here, like this: var nodes = $(*); for (i=0; i nodes.length; i++) { flexinInitialiseElement( nodes[i] , false) } Hope this will help you somewhere :) / Johan On 25 Dec, 12:57, speedpac...@gmail.com speedpac...@gmail.com wrote: Basically execute additional javascript code based on a classname adding functionality to these elements... I tried the following, but it doesn't seem to be working... jQuery('*').load(function () { // run code console.log(DEBUG: Initialising element + jQuery(this)); flexinInitialiseElement(jQuery(this), false); }); This piece of code is added to the top of the page, so I would have expected each DOM element to be passed to the flexinInitialiseElement method, but it doesn't... Thanks for the much appreciated feedback on this great Christmas day :) David. On 24 dec, 14:14, Šime Vidas sime.vi...@gmail.com wrote: What does initiating elements mean?
[jQuery] Re: Attaching an event to a non-existing element?
I would really recommend the listen plugin for jQuery by Aaron Flesler. It's an excellent plugin that also fixes the focus/blur bug in IE6. Have been using it for over two years now (before live() was implemented), and it also have good support for the dblclick event: http://plugins.jquery.com/project/Listen / Johan On 25 Dec, 02:28, Šime Vidas sime.vi...@gmail.com wrote: 3. I have set this response as the content of an empty div. That select element appears well, but maybe it doesn't appear as a DOM member, so that's why I can't attach an event handler to it. If you place HTML code inside an element that is in the DOM tree (like the empty DIV in your example), than the code gets parsed and all HTML elements inside the code are added to the DOM tree... Basically, if you can see it on the page, than it's in the DOM tree I noticed in your code above, you used the wrong name for the method... it's called change, not onchange $('#term2').change(function(){ window.location = http://www.google.com/;; }
[jQuery] Re: ie6 and ie7 don't load image well when using Cycle plugin
I can only guess that you've set the loop-delay too soon, and don't control if the image have been loaded. That would explain why it looks better the next time you arrive, since the image will be in the browsercache. There's a couple of ways to go around this: 1) Load the cycle plugin onload instead onDomReady 2) Set a generic initial delay of the script (like 10 seconds) 3) Check if the image have been downloaded before you initialize the plugin On 30 Mar, 12:48, mangajin sushisupers...@gmail.com wrote: I found that using cycle plugin byhttp://jquery.malsup.com/cycle/is very nice while seeing the page with FF and the rest. However, ie6 and ie7 sometime can't load the slide show well. To explain in details, ie6 and 7 at the firsttime loading page can't load the image for my website. However the second time i visit the same page with cycle pluging embedded, it would work fine. I don't know if someone experience the same problem. I am not sure if it's about the size of image. Should i reduce it? or i should i move the javascript code from the header to the body? Thanks
[jQuery] Re: Images shrinking?!?!
1) Your site doesn't validate correct 2) You're using very large images, around 450kb on frontpage = causing slowdowns, especially in IE 3) Set an correct hardcoded height/width on the images, either in the tag directly or width CSS. 4) You seems to be using some kind of filter on the footer images. I found http://www.bonsaibranding.com/riverstone/blank.gif; as a background. Is this some kind of copyprotection you're using. That could also potentially be a problem. Johan Jen skrev: Hi there, I have a couple of image slideshows on my site and in IE occasionally the images appear shrunk down like thumbnails instead of full size. Any ideas why that might happen and what i could do to stop it? http://www.bonsaibranding.com/riverstone/home.html Thanks Jen
[jQuery] Re: Counting Divs (IE6)
Does your entire page validate? No mysterious unclosed divs somewhere? Johan On 29 Mar, 18:16, lardlad chris.mloa...@gmail.com wrote: I am having a problem counting the number of divs inside a container, var cellCount = $(#cellCont).children().length; cellCount is coming up undefined in IE6. Any idea why? here's the html: div class=block id=cellCont div class=cell id=cellFirst?php include('design/print/ brochures.php'); ?/div div class=cell?php include('design/print/catalog.php'); ?/ div div class=cell?php include('design/print/annual_reports.php'); ?/div div class=cell?php include('design/print/magazines.php'); ?/ div div class=cell?php include('design/print/direct_mail.php'); ?/ div div class=cell?php include('design/print/newsletters.php'); ?/ div div class=cell?php include('design/print/ product_services.php'); ?/div /div
[jQuery] Re: ie6 and ie7 don't load image well when using Cycle plugin
Yes! jQuery support this aswell. It adds every onload/domready event in a queue. $(window).load(function(){ // do stuff onload }) $(window).load(function(){ // do other stuff onload }) But you should really look into some pattern instead. A relly simple and good pattern is the Module Pattern http://yuiblog.com/blog/2007/06/12/module-pattern/ You could then create you own namespaced object with init-methods and have options for when and where your methods should be executed Something like this var MyObject = function(){ return { init: function() { if ($('body').is('#home')) this.applySliderEvents() }, onloadInit: function(){ this.applySliderEvents() }, applySliderEvents: function(){ }, applyOtherStufEvents: function(){ } } }() $(document).ready(function(){ MyObject.init() }) $(window).load(function(){ MyObject.onloadInit() }) Just a relly basic example (and not the best optimized), but it might give you a better idea what can be done with simple init-methods and body-id's :)
[jQuery] Fix for broken nextUntil
Hi everyone! I wanted to use nextUntil, but noticed that it was broken in jQuery 1.3.2 (I know that the plugin isn't official yet and that is wanted in the core - looking at the roadmap). Well, this line wasn't working: // If we find a match then we need to stop if ( jQuery.filter( expr, [i] ).r.length ) break; I'm curious, what was the r-property doing there before? :) Well, I created a small patch, that also gives the oppurtunity to also include the last selector default is as usual: $(h3).nextUntil(); = [ div, p, p, h3, div, p ] $(h3).nextUntil(h3); = [ div, p, p ] But if a last value true is given, it also includes that that last selector: $(h3).nextUntil(h3, true); = [ div, p, p, h3 ] Hope that someone can make use of this. All credit goes to John Resig for his excellent work with jQuery ( jQuery.fn.nextUntil = function(expr, include) { var match = []; include = include ? true : false // We need to figure out which elements to push onto the array this.each(function(){ // Traverse through the sibling nodes for( var i = this.nextSibling; i; i = i.nextSibling ) { // Make sure that we're only dealing with elements if ( i.nodeType != 1 ) continue; // Add it on to the stack if include is set if ( include ) { match.push( i ); } // If we find a match then we need to stop if ( jQuery.filter( expr, [i] ).length ) break; // Add it on to the stack if include is not set if (! include ) { match.push( i ); } } }); return this.pushStack( match, arguments ); } Best regards Johan Borestad
[jQuery] Re: window unload event too slow - delay when navigate away from the page
Hi! If you have a lot of selectors, you should probably use Event Delegation and wait for the event to bubble instead. A good example is if you have a huge table and events on every row. Instead of using $('table a').bind('click', function(){ alert('do stuff!!') }) , you just bind ONE event on the table and listens for all other events to happen (like click/mouseover/focus etc). You may want to look at the new jQuery feature jQuery.live() http://docs.jquery.com/Events/live A very good plugin (I use it myself in some really huge projects) that also solves a bug where IE6 doesn't bubble focus/blur events on some elements is jquery.listen http://plugins.jquery.com/project/Listen Read more about Event delegation from here :) http://www.google.se/search?hl=svq=event+delegation+javascriptbtnG=Google-s%C3%B6kningmeta=aq=0oq= / Johan On 25 Mar, 05:42, Khoa nvkho...@gmail.com wrote: One of the pages I'm working on at the moment is quite big, it has a huge amount of HTML elements and many of them have events bound to them. So whenever I navigate out of that page, there is a huge delay. The browser seems to be freezing during that time. And then it loads the next page (the page that I go to). I notice that, this is because of the window unload event, which is specified in the source code at: jQuery( window ).bind( 'unload', function(){ for ( var id in jQuery.cache ) // Skip the window if ( id != 1 jQuery.cache[ id ].handle ) jQuery.event.remove( jQuery.cache[ id ].handle.elem ); }); Is there anyway that we can speed up this event? Maybe in the next release of jQuery? This snippet seems to take too much time to run on large page. If there is not, can I just remove it? Why do we need this function? Sorry, I'm still new to JS, so I'm don't know why we need this, please advise. Thanks.
[jQuery] Re: window unload event too slow - delay when navigate away from the page
Typo error above, a lot of selectors should be a lot of events
[jQuery] Re: HowTo Select first two characters of an li and hide them
Something like this maybe $('div.multiple_options li').each(function(){ var text = $(this).html() $(this).html( text.replace(/\d+\s+/,'') ) }) But please remove that ugly br inside your li tags and make them block elements instead to achieve the same effect. / Johan On 25 Mar, 14:03, 262Rui i...@noiteglobal.com wrote: This is My markup div class=multiple_options_caption Features/div div class=multiple_options ulli class=features11 Classic Designbr/li li class=features14 Countryside Viewbr/li li class=features17 Space for Swimming Poolbr/li li class=features21 Garagebr/li li class=features22 Spacious Garden br/li li class=features24 Landscaped Gardenbr/li li class=features27 BBQbr/li li class=features29 Guest parking /li /ul /div and i would like to hide/remove the first 2 numbers fom my li.features How can this be achieved? kind Regards Rui
[jQuery] Re: Request for a simple basic Ajax call with loading gif
var loader = $('div.ajaxloader').fadeIn(500) $('#ajax-placeholder').load('/content_to_load.php', function(){ // This is a callback function loader.fadeOut(500) }) Something like that. The div.ajaxloader is for you to style correctly with css to make it appear in the middle of the page, or wherever you wan't it. Just a basic example / Johan On 18 Feb, 09:18, gh0st [EMAIL PROTECTED] wrote: One of the things that is frustrating me in learning jQuery is that there isn't enough examples, case-studies or tutorials on how to use the .ajax call; most web pages I've seen seem to be for the .load or .get. That being said, can someone post a very basic Ajax call complete with a loading gif? Also, does anyone have any links/resources to case-studies/examples of Jquery and the .ajax call? With thanks.