jQuery - Hover on a Parent div to FadeIn/Out Child div select problem


Webdesigners,

I really have no idea why this isn't working, I've tried everything, by using .next(), .sibling(), .parent(), .children(). Non of them seemed to worked.

.child { display:none; } Parent 1 - Child 1 Parent 2 - Child 2 Parent 3 - Child 3 $( function() { // NON OF THESE WORK $('.parent').hover( function() { $(this).next('child').fadeIn('slow'); }, function() { $(this).next('child').fadeOut('slow'); } ); $('.parent').hover( function() { $(this).parent().next('child').fadeIn('slow'); }, function() { $(this).parent().next('child').fadeOut('slow'); } ); $('.parent').hover( function() { $(this).sibling('child').fadeIn('slow'); }, function() { $(this).sibling('child').fadeOut('slow'); } ); $('.parent').hover( function() { $(this).parent().sibling('child').fadeIn('slow'); }, function() { $(this).parent().sibling('child').fadeOut('slow'); } ); $('.parent').hover( function() { $(this).children('child').fadeIn('slow'); }, function() { $(this).children('child').fadeOut('slow'); } ); $('.parent').hover( function() { $(this).parent().children('child').fadeIn('slow'); }, function() { $(this).parent().children('child').fadeOut('slow'); } ); } );

I know fadeIn automatically displays a display:none class, so probably that is not the problem.
Can anyone help me find what is missing here
Thank you for your help

EDIT:
What does work is by just using the .css() or pure CSS parent:hover, but there is no animation which defeats the purpose of using jQuery
This post has been edited by ernestlwl: 21 April 2012 - 11:10 PM
Posted On: Wednesday 21st of November 2012 02:42:18 AM Total Views:  198
View Complete with Replies

RELATED TOPICS OF JavaScript PROGRAMMING LANGUAGE




jquery

hello i got a problem that i applied clearabletextfield plugin on my textfield but its css is not been right.i set it on multi-fields but its css is not been set me...
VIEWS ON THIS POST

173

Posted on:

Monday 19th November 2012
View Replies!

jquery popup

everybody i have download loaded the popup of jquery and its working but i have added html button in it and i want to close the popup when user click on it .... kindly reply me i shall be very
VIEWS ON THIS POST

132

Posted on:

Monday 19th November 2012
View Replies!

jquery click event

In the following code, the click event is added explicitly to the body, so that even if click outside the button say on the body the div with ID tip1 should close with a fade effect. The problem here is that the the div closes even if we click on the div itself. Any idea on this would help .. $(document).ready(function(){ $('.button').getit({speed: 150, delay: 300}); }); $.fn.getit = function(options){ var defaults = { speed: 200, delay: 300 }; var options = $.extend(defaults, options); $(this).each(function(){ var $this = $(this); var tip = $('.tip'); this.title = ""; var offset = $(this).offset(); var tLeft = offset.left; var tTop = offset.top; var tWidth = $this.width(); var tHeight = $this.height(); $this.click( function() { if($('.tip').hasClass('.active101')) { $('.tip').fadeOut("slow"); $('.tip').removeClass('.active101').addClass('.inactive101'); } else { setTip(tTop, tLeft); $('body').bind('click',function(e) { var parentElement = "button1"; var parentElement2 = "tip1" if( e.target.id != parentElement) { $('.tip').fadeOut("slow"); $('.tip').removeClass('.active101').addClass('.inactive101'); } }); $('.tip').removeClass('.inactive101').addClass('.active101'); setTimer(); } }, function() { if($('.tip').hasClass('.inactive101')) { stopTimer(); tip.hide(); } } ); setTimer = function() { $this.showTipTimer = setInterval("showTip()", defaults.delay); } stopTimer = function() { clearInterval($this.showTipTimer); } setTip = function(top, left){ var topOffset = tip.height(); var xTip = (left-440)+"px"; var yTip = (top-topOffset+100)+"px"; tip.css({'top' : yTip, 'left' : xTip}); } showTip = function(){ stopTimer(); tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed); } }); }; Click Me! again
VIEWS ON THIS POST

140

Posted on:

Monday 19th November 2012
View Replies!

Need help condensing show/hide jquery code

, I have these div tags, they're very similar but I just need to change the IDs. Is there anyway to condense this code $(document).ready(function(){ //Full Name var changeName = $('#changeName'); var cancelName = $('#cancelName'); var fullnameDisplay = $('#fullnameDisplay'); var fullnameChange = $('#fullnameChange'); var helperName = $('#helperName') changeName.click(function(){ $(this).hide(); cancelName.show();//link fullnameChange.show();//inputs and all that fullnameDisplay.hide();//display item helperName.show();//instructions cancelName.click(function(){ $(this).hide(); changeName.show();//link fullnameChange.hide(); fullnameDisplay.show(); helperName.hide(); }); }); //Email var changeEmail = $('#changeEmail'); var cancelEmail = $('#cancelEmail'); var emailDisplay = $('#emailDisplay'); var emailChange = $('#emailChange'); var helperEmail = $('#helperEmail') changeEmail.click(function(){ $(this).hide(); cancelEmail.show();//link emailChange.show();//inputs and all that emailDisplay.hide();//display item helperEmail.show();//instructions cancelEmail.click(function(){ $(this).hide(); changeEmail.show();//link emailChange.hide(); emailDisplay.show(); helperEmail.hide(); }); }); //Password var changePass = $('#changePass'); var cancelPass = $('#cancelPass'); var passDisplay = $('#passDisplay'); var passChange = $('#passChange'); var helperPass = $('#helperPass') changePass.click(function(){ $(this).hide(); cancelPass.show();//link passChange.show();//inputs and all that passDisplay.hide();//display item helperPass.show();//instructions cancelPass.click(function(){ $(this).hide(); changePass.show();//link passChange.hide(); passDisplay.show(); helperPass.hide(); }); }); });
VIEWS ON THIS POST

148

Posted on:

Monday 19th November 2012
View Replies!

ie and jquery slideup

Hi , Just wondering if anyone can help me with some IE/JQuery issues. I have created a drop menu using the below code. It works in opera, safari, chrome and firefox. I have tested it in ie7 but the menu appears to the right(probably a css issue) and when it slides down it no longer slides backup. HTML Home News Latest News Current Notices Archived News Teams Club Info Facts Club Officers Grounds Representatives Achievements Presidents / Captains Members History 1920's 1930's 1940's 1950's 1960's 1970's 1980's Photos Shop Lotto Contact CSS(I think this is all the relevant bits) #menu li{ position:relative; display:block; float:left; } /*sub navigation*/ .children{ display:none; z-index:1; position:absolute; float:none; background-color:#0b0b0f; width:200px; zoom:1; *margin-top:26px; } .children li{ clear:both; float:none; top:0px; padding-right:20px; } JS $(document).ready(function () { $('#menu li').hover( function () { //show its submenu $('ul', this).slideDown(300); }, function () { //hide its submenu $('ul', this).slideUp(300); } ); }); The problems can be seen at www.newcastlewestrfc.ie . The news, club info and history have dropmenus.
VIEWS ON THIS POST

143

Posted on:

Monday 19th November 2012
View Replies!

I need help with my jquery image array... Please!

Ok, so I am building a website, and am trying to use jquery to get video thumbnails from YouTube and pass them into the corresponding images. I am still fairly new at jQuery and could use some help with the code. Here it is: $(function() { $(document).ready(function() { var length = 3; //This is the number of images I have to add a src to for (i=0; i
VIEWS ON THIS POST

160

Posted on:

Monday 19th November 2012
View Replies!

too much recursion in jquery? help!

Aeterna, This is tricky. I'm not sure why the code works at all because setTimeout(getUsers(column, id), 5000); appears to be invalid. I would choose to use setTimeout(function()(getUsers(column, id);), 5000); . This might in itself fix the bug. Thoughts .... Strictly speaking there's no recursion, as setTimeout starts a fresh call-stack at each iteration. However, the presence of column, id as arguments means that these variables are held in a fresh, nested closure at each iteration. At some threshold, the number of nested closures (rather than recusionsper se) exceeds the number allowed by the javascript engine. In this regard, the difference between recursions and nested closures is somewhat academic. If I'm right (and my first suggestion doesn't work), then the workaround is not to pass column, id to getUsers . Instead, set column and id as outer variables (global if you must) at the point where getUsers is first called. This will avoid the need for closures and should allow garbage collection to do its thing.Airshow
VIEWS ON THIS POST

170

Posted on:

Monday 19th November 2012
View Replies!

How to add xml file to jquery slider?

Hi to all. Please help me add xml file to jquery slider. I want to show image from xml file. For example I have Nivo slider because they have a good transition effect. I'm a noob in Javascript and because I here. And xml file should look like this: Image One ./images/image0.png Image Two ./images/image1.png Image Three ./images/image2.png
VIEWS ON THIS POST

243

Posted on:

Monday 19th November 2012
View Replies!

jquery datepicker range validation

, i'm using a jquery datepicker like this: $(function() { $('#inlineDatepicker').datepick({ rangeSelect: true, monthsToShow: 3, minDate: '+7d', rangeSeparator: '|', altField: '#resdate', altFormat: 'dd-mm-yyyy', pickerClass: 'locgrid', onDate: nationalDays } ); }); var natDays = [[12, 18, 2010], [12, 19, 2010]]; function nationalDays(date, inMonth) { if (inMonth) { for (i = 0; i < natDays.length; i++) { if (date.getMonth() + 1 == natDays[i][0] && date.getDate() == natDays[i][1] && date.getFullYear() == natDays[i][2] ) { return {dateClass: natDays[i][3] + '_day', selectable: false}; } } } return {}; } now what i'm trying to accomplish is, when a user clicks a start- and enddate and there is a natDays variable in between to throw an error message. any ideas
VIEWS ON THIS POST

176

Posted on:

Monday 19th November 2012
View Replies!

How to add a class to a parent li with jquery

Hi There, - I've got a list similar to the following: item1 item2 item2-5 item3
VIEWS ON THIS POST

128

Posted on:

Monday 19th November 2012
View Replies!

jquery maybe? viewing video feed inside webpage

I have this php based website, that displays a photo and draws data from a db to display on the page. Currently has a link to a live camera(viewed by internet browser) that opens in a separate page. I have heard/read that using jquery you can create a iframe within your php page that you can link to another url(the camera for example) and display on the same page. So in essence I could have my php page called displayPage load up and then inside that page I could section a 800x800 jquery frame that displays the live video feed with in. Is this possible, I am restricted to using php as its the web server we run and it only needs to run in IE as we also use windows scripting on the page which relies on IE. Looking at someone thing like this as eventually some of the data in the db will be taken from one location and stored by another team and the displayPage will not have access to the db just the web page that views it so would like to see if it will work with that also. Is this possible
VIEWS ON THIS POST

219

Posted on:

Monday 19th November 2012
View Replies!

jquery change image src on drag and drop

i would like to ask if there is a way to change on a drag and drop jquery i use the image src from the li div that i drag it on the ul div that i drop it... with a jquery i found something like this $('#dropContainer').droppable({ drop: function(e,ui) { $(ui.draggable).attr('src','/path/to/different/image'); } }); but is not working for my application
VIEWS ON THIS POST

140

Posted on:

Monday 19th November 2012
View Replies!

jquery tablesorter checkedbox problem

I am using Jquery and the tablesorter plugin to sort a table of information. Within the table i have a column of checkboxes. A user can check the boxes and press the submit button which will $_POST the checked boxes onto the next page. Everything works if i dont sort the table, but if i sort the table and then check a few boxes the $_POST array is empty. can anyone point me into the right direction as i'm new to jquery
VIEWS ON THIS POST

380

Posted on:

Monday 19th November 2012
View Replies!

page refreshing problem in jquery ajax

Hi all, I have a dropdown and when the value of that drop down changes corresponding pages are displayed using jquery ajax. My problem is that when i refresh the page standing in the page generated by the ajax , the home page containing the dropdown is displaying instead of the same page. I have tried the history plugin of the jquery but it is based on the hash(#) url in the address bar. But here in the above case there is no url appended in the address bar because the page is generated on the change of the dropdown using jquery ajax. I want to see the same page that is generated by the jquery ajax, after refresh button on the browser is clicked. Please help me.
VIEWS ON THIS POST

202

Posted on:

Monday 19th November 2012
View Replies!

jquery conflict???

I'm not much more than a jquery cut and paste - change a simple user definition, guy. I can't write javascript... So, I was trying to marry two jquery "animation effects" in one page and apparently have a conflict. The two things work separately but it seems that there is unhappiness having jquery-1.3.2.js and jquery-1.2.6.min.js called in the same HTML page. the scripts are: jquery-1.3.2.js jquery.easing.1.3.js jquery.delay.js header.js jquery-1.2.6.min.js hoverIntent.js sf.js I'm not 100% certain where the conflict lies, but I think that's it. Can there be a jquery conflict How can I go about resolving it
VIEWS ON THIS POST

154

Posted on:

Monday 19th November 2012
View Replies!

jquery asmselect plugin

i added asmselect pluging form a form which is being submitted by ajax POST method. how do i get the selected values from asmselect plugin. var PRO_CAT = document.getElementById('CATEGORY').value; this wold only give the first selected value. how to get the array of selected values
VIEWS ON THIS POST

173

Posted on:

Monday 19th November 2012
View Replies!

I need to save image to a folder using jquery

I have tried to save an image to a folder using jquery. But I could not. Please help me to save a image into a folder without using dialog. I am working in asp.net with jquery. Many
VIEWS ON THIS POST

156

Posted on:

Monday 19th November 2012
View Replies!

.show now showing the div in jquery

I just changed up a form on my webs site to make it hide once a user click on the button. I used to have a pop up window that told them it was added but wanted to change it to a div using .show. Right now the data get into the mysql table just fine and the form hides, the div does not come up tho and I'm not sure why. Here is what I have The main form $(function() { $('#add-rating').submit(function(event) { event.preventDefault() $(this).hide('fast'); var movie_rating_s = $('#add-rating [name="MOVIE_RATING"]:checked').val(); var movie_id_s = $('#add-rating [name="MOVIE_ID"]').val(); var movie_title_s = $('#add-rating [name="MOVIE_TITLE"]').val(); var user_id_s = $('#add-rating [name="USER_ID"]').val(); $.ajax({type: 'POST', url: 'movie_watched.php', cache: false, timeout: 10000, data: {rating: movie_rating_s, movie: movie_id_s, title: movie_title_s, user: user_id_s}, success: function() { $('#div_show').text('You have rated the movie').show('fast'); }, error: function() { $('#div_show').text('There is a problem').show('fast'); } }); }); }); 1 2 3 4 5
VIEWS ON THIS POST

550

Posted on:

Monday 19th November 2012
View Replies!

lazy load with jquery tooltip

well I am using Lazy Load for images so that could make images load only when they are required, by default it loads images based on user scrolls. That is fine with me if the images are displayed, but here I have a different scenario as the images are in jquery tooltip. If the mouse of over the link or not THE IMAGES LOADS but I don't want this to happen rather images should load only when the link is mouse over and then the image should load in the tooltip. I used mouse over that only works if the placeholder image is mouseover (for lazy loading in src we put the placeholder image and the actual image goes into data-original). So I was wondering if there is a way that when the link is mouse over then the image should load only in the tooltip not when the page is loading or when user is scrolling. You can see a live example here in this test page http://bloghutsbeta....-slidernav.html *the tooltips are only applied to the 'A' category names, in the current condition of live demo, lazyloading has not yet been applied, so you could better understand what I am talking about*
VIEWS ON THIS POST

149

Posted on:

Monday 19th November 2012
View Replies!

jquery structure help

Please delete This post has been edited by polska03: 12 July 2011 - 08:23 PM
VIEWS ON THIS POST

185

Posted on:

Wednesday 21st November 2012
View Replies!