[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.
