JQuery :: Correctly Applying Same Function To Multiple DIVs

Oct 5, 2010

I'm trying to get something to work that sounds simple and it worked great until I had a second item to apply it to. This works fine, with one div. When you hover over the link with the class 1slide, it loads the div with the class panel1. The problem is I can't get it to work if I use a second function for .2slide to load the div .panel2.
<script type="text/javascript">
jQuery().ready(function(){
jQuery(".1slide").hover(function(){
jQuery(".panel1").slideToggle("slow");
});});
</script>

I've tried multiple variations, including 2 <script> tags with the classes swapped, and combining as shown below
<script type="text/javascript">
jQuery().ready(function(){
jQuery(".1slide").hover(function(){
jQuery(".panel1").slideToggle("slow");
});
jQuery(".2slide").hover(function(){
jQuery(".panel2").slideToggle("slow");
});
});
</script>

I think I'm combining these wrong but I've tried multiple different ways. They're classes now but were ID's, and that didn't work either. Figures, I was hesitant about posting hours ago because I knew it might be something simple.. I almost solved everything with this:
<script type="text/javascript">
jQuery().ready(function(){
jQuery(".1slide").hover(function(){
jQuery(".panel1").slideToggle("slow");
jQuery(".2slide").hover(function(){
jQuery(".panel2").slideToggle("slow");
jQuery(".3slide").hover(function(){
jQuery(".panel3").slideToggle("slow");
})})})})
</script>

All 4 div's .panel1, .panel2, .panel3 are set to display:none. The only issue now is panel3 is twitchy. I have a feeling it's yet again just a closing bracket issue. Am I writing this correctly? semi-colons anywhere, mess the entire thing up. I am using FireFox 3.5 for reference.

View 2 Replies


ADVERTISEMENT

JQuery :: Using .load() Function For Multiple Divs?

Aug 29, 2010

I'm trying to use the function once which is .load() and fetch my content from there,then after that I'd like to seperate the class's or div's I'll be using such as <div d="test1">This content will show in the external website</div>But I'm having trouble doing that, I've used multiple lines just to load the same page and take small bits of content out and it doesn't work well together as some load's results will be different compared to the others.Heres my code:

$('#". $Server['ServiceName'] ."').fadeOut('slow', function(){ $('#". $Server['ServiceName'] ."').load('./includes/serversinfo.php #servers #". $Server['ServiceName'] ."', function(){ $('#". $Server['ServiceName'] ."').fadeIn('slow'); }); });

[code]....

View 2 Replies View Related

Applying A Filter To Assigned Divs?

Feb 23, 2009

I'm a bit of a newbie with javascript and have been somewhat thrown in at the deep end at work. I have been asked to add a filtered list to an index that current exists on a page. I found a suitable code (quoted below) but it seems to conflict with the existing code. As far as I can work out, it is because of the line "arr_nodes = document.getElementsByTagName('div')" which, using my very basic knowledge, appears to affect all existing <div>s in the page, not just the ones I've quoted below.

Basically, Is there any way to make that line ignore all the divs that were originally in the code & just refer to the divs called "text1", "text2", "text3", "text4", "text5", "text6" and "text7"?

[Code]...

View 2 Replies View Related

Applying Same Effects On Separate 'same Named' Divs?

Oct 26, 2010

Basically I'm going to be loop[ing through data in my script, which will loop through a div such as:

Code:
<div class="showOne" style="position:relative;">
<div class="showOneText">

[code].....

View 5 Replies View Related

One Function To Toggle Multiple Divs?

Mar 30, 2011

I will have a page with about a 100 or so different links and I would like each one to toggle the visibility of its corresponding hidden div.For instance, if I have a county 'Johnson' when it's clicked I would like the hidden div associated with that county to become visible. I would like to do this without having to write a different function for each one. Is there a way to do this easily?

Below is a solution I was given elsewhere but I couldn't get it to work.Most ideal of all I would like it to work with an image map, with each county having it's own set of stats to be toggled in.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>[code].....

View 9 Replies View Related

JQuery :: Applying Hints To Multiple Fields?

Aug 17, 2011

I want to be able to add "hints" to fields (text which disappears when you click in a field and then reappears if the field is left empty).I have code which is fine for specific fields one at a time, but I'd like to use a JSON structure to apply to arbitrary fields: Something like [["eventType", "eg Walking"], ["eventName", "eg London Marathon"], ["message", "(Max 100 words)"]] would put "eg Walking" into the field with id="eventType" etc.The following code puts the hints in the correct fields, but only the last one handles the focus/blur properly. It seems that the value of hintText for the comparison to this.value is only the last one.

for (var i=0; i<allHints.length; i++) {
fieldID = allHints[i][0];
hintText = allHints[i][1];

[code]....

View 2 Replies View Related

JQuery :: Hover And Multiple Divs - All Hidden Divs Are Shown, Not Just The One That Supposed To?

Oct 14, 2010

I have been trying to do some tooltips for a website and desperately wanted to learn something new and do that with jQuery.However, every time a mouse hovers over a tooltip, all hidden divs are shown, not just the one that supposed to. Here's my html:

Code HTML4Strict:
<div class="tip">
<a href="#"></a>[code].....

View 2 Replies View Related

JQuery :: Applying Table Row Sorter To Multiple Tables?

Apr 29, 2009

<div><div>I'm using jQuery's tablesorter.js to create tables with sortable rows, as applied to tables with the ID "myTable."</div><div></div><div>I just wondered if there's a way to make it work with multiple tables on a single page. I created two tables and gave each of them the ID myTable, but only the first table worked. I can't remember if the specific ID is required for my Zebra widget (alternate row colors), too, or not, but I would guess it is.

</div>
<div></div><div>I posted my JS links below, to show you my setup. Thanks for any tips.</div><div></div><div>* * * * *</div><div></div><div><script src="<a

[code].....

View 10 Replies View Related

Jquery :: Multiple Scripts Are Not Working Correctly?

Feb 15, 2011

I added a jquery megamenu to my site, but now my thichbox script is not working correctly.trying to get it to work. I added a noconflict statement and changed $ to jQuery in my jquery.js file, but it is still not working correctly.

http:[url]....
--------------------------
<script type="text/javascript" src="http://homecomforts.com/js/jquery.js"></script>
<script type="text/javascript" src="http://homecomforts.com/js/thickbox.js"></script>
<script> [code]......

View 1 Replies View Related

JQuery :: Can't Get The Animation To Work Correctly With Multiple Items

Mar 13, 2010

If you look at this page [url] you will see that if you hover over the photo the text block goes up, and if you hover over the text it slides down and covers the photo. It's all pretty basic and it works fine. But ones I try to get them animated during the sliding up and down the trouble starts.

It works fine if you take the time and wait for them to go back to their starting position, but if you move over the items quickly it becomes a mess. You can see what I mean on this page [url]

I hoped that by adding a stop() before the animation if would fix the problem, but it doesn't really improve at all. It still quickly becomes a mess if you hover from one item to the next one.

How I could get the animations to work properly without it becoming a mess? I now there are double id's in the html, but unfortunately I can't really change the html.

View 1 Replies View Related

Applying Random Function To A Div?

Jun 20, 2009

I have found the following code posted by fellow user called Thalantyr in 2006, which randomly changes the colour of buttons and images. It basic but works fine as is.I would like to apply the random function to change the background image of a <div>. The div already has an id with css properties attached. Is there away to apply the function using a class? I have tried changing the 'var eles=document.getElementsByTagName('*')||document.all;' section but it stops working. Code below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>[code]............

View 1 Replies View Related

JQuery :: Passing Variable To String Function Correctly

Aug 10, 2010

Two objects on an html page. An event on object 1 effects object 2
$(".video_rg").mouseover(function(event){
var myTriggerId = event.target.id;
var myTargetId = 'video_' + myTriggerId;
document.getElementById(myTargetId).src = 'images/test_object_2.gif'; // this works
// $('#myTargetId').src = 'images/test_object_2.gif'; // this does not
});
My assumption (we know about those) is that I am not passing the data to the $() function correctly, that it is reading '#myTargetId' as a string, and not a variable. I just really want the JQuery code that would do what the document.getElementById code is doing.

View 2 Replies View Related

JQuery :: Multiple Divs With Same Effect?

Jan 26, 2011

On my site I have a news page, where users can read part of the news (trimmed with php) and then they click "Read more" to see the full news item. That item then comes up in a popup (using jQuery of course) and should be displayed. To get this to work I'm usingthisby including it like so:

<script type="text/javascript" src="includes/jquery.colorbox.js"></script>

The jQuery code looks like so:

$('.open').colorbox({width:"50%", inline:true, href:"#news"});

This all works great with that one div. The problem is, my news will be coming from a MySQL-query via PHP in a while-loop and I need this effect applied to every single news item. What I tried is to do this:

while($row = mysql_fetch_assoc($rs)) {
echo '<a class="open" href="#">Read more</a>';
echo '<div id="wrapper" style="display:none">';

[code]....

how do I make this work? How do I make jQuery open only the news item I'm clicking on? I know it could possibly be done with (this) and maybe children() or something like that? But I'm totaly lost at the momeny, I've tried loads of stuff with the pieces mentioned above but can't get it to work and most times I just "break" the jQuery and the popup won't even come up at all.

View 4 Replies View Related

JQuery :: Multiple Divs Using Same Class?

Apr 28, 2011

I have a div with a height of 100 pixels.If the content is too much to fit in div, I want to show a 'Read More' link at the bottom.If you then click 'Read More', the div expands to full height so all the content can be seen and the link text changes to 'Read Less'.If you then click 'Read Less', the div contracts back to 100 pixels.I've found solutions that can handle the above situation, but I want to have multiple divs with the same class that all work independantly of each other.So I'd have the following HTML

[code]
<div class="openclose">
...some content...

[code]....

View 3 Replies View Related

JQuery :: Multiple SlideToggle Divs?

Aug 20, 2010

I'm trying to piece together a little div which slides out and shows various links to sites like Digg, Reddit to share the story with. I've got it kind of working but when there are multiple divs on the page, named the same like in each article of a post on a Wordpress blog. Only the top ones work and the rest don't do anything...I'm trying to get it do something like the image => HereThis is an example I'm trying to get to work but the second "slickbox" div never shows

View 1 Replies View Related

JQuery :: NextUntil Over Multiple DIVS?

Jan 31, 2011

I'm trying to use nextUntil to select all the .cell divs between the .start-date and .end-date, the code works for the .cell's within it's .cal-container but if wont work over multiple .cal-containers.The code I have is$('.start-date').nextUntil('.end-date').addClass('fill-date');

<div class="cal-container">
<div class="cell" id="1" title="01-01-2011">1</div>
<div class="cell" id="2" title="02-01-2011">2</div>

[code]....

View 2 Replies View Related

JQuery :: Animate Multiple Divs On Click?

Mar 7, 2011

I want to animate divs on click . But the problem is there are multiple divs and I unable to get the height of each div

my code isfunction show (div) {
var hei = $('.a').height();
$('.show').click(function(){
$('.text').animate({'height' : hei + 'px'})

[Code]...

View 7 Replies View Related

JQuery :: Displaying/Hiding Multiple DIVs?

Jan 29, 2011

Getting myself back into jQuery and have an issue which I didn't previously fix, and was wondering if anyone would be able to assist me. I have multiple DIVs (up to 50 on one page) that I wish to individually be able to hide and close an extra DIV once pressing the 'Details' to show, and 'Hide' to hide the extra hidden DIV.

[Code]...

View 2 Replies View Related

JQuery :: Get Height Of A Div Inside Multiple Divs?

Nov 14, 2011

I am trying to get the height of a div that is inside 7 other divs. I noticed the height() method works with the first and second div, but it does not work after that.

Example :
<div id="first">
<--------------------------- $("first").height(); works ![code]....

how to get the height of a div that is inside multiple other divs ?

View 1 Replies View Related

JQuery :: Hiding/showing Multiple DIVs?

Jun 20, 2010

I'm new to jQuery, and I'm having issues with showing my DIVs correctly. The problem with the script at the moment, is that it currently opens up every single .display div, whereas I only want it to open up the one which corresponds to the.input a.edit which I've clicked.

The script hides them individually, displays the hide button and makes the show button display correctly like I wish, but it's displaying all the the .display div's at the same time which isn't what I want. For reference here is my jQuery script:

[Code]...

View 7 Replies View Related

JQuery :: Fade In Multiple Divs On A Page?

Sep 23, 2011

I need to be able to fade in 3 divs but not all at the same time, I need one to fade when thats finished, fade in then the next, then the next. Can anyone help me with this? I assume its got something to do with queue's but im not 100%

View 1 Replies View Related

JQuery :: Display DIVs As Multiple Columns?

Aug 23, 2009

How can I display a bunch of DIVs in multiple columns? Like Flex's TileList component.

A
B
C
C

[code]....

View 2 Replies View Related

JQuery :: How To SlideUp / SlideDown Multiple DIVs

Jul 15, 2009

$("#addURLSArea").hide();
$('.jqTransformCheckbox').click(function(){
if ($('#multCheck:checked').val() == 'on') {
$("#addURLSArea").slideDown();
} else {
$("#addURLSArea").slideUp();
}});
I want to use this 4 times on a form. How do I change this so I can have it target 4 different divs?

View 2 Replies View Related

JQuery :: Multiple Animations With A Delay On A Set Of Divs?

May 16, 2010

I have a group of 4 divs and I'm looking to use jQuery to animate them once, then have a delay using delay(), and then run another set of animations on them, putting the divs back to their original configuration. Here's the code that I have:

//only selectors called 'option1' are affected by delay, and not 'option1 img' or 'option2'
$("#option1").showOption1().delay(3000).hideOption1();
//if i don't attach to #option1, delay doesn't work, but the animations that need to happen simultaneously work

[Code]....

will work from hideOption1() after the delay. The rest of hideOption1() is fired immediately after showOption1() finishes, ignoring the delay.

On the other hand, if I run line 5, all the code in hideOption1() runs simultaneously as desired, but ignores the delay entirely, running immediately after showOption1() finishes. How can I have all the code in hideOption1() run simultaneously after the delay?

View 2 Replies View Related

JQuery :: Multiple Divs Toggle With Click

Dec 18, 2011

I am trying to toggle multiple divs toggle open/closed show/hide with a slide left effect It works but is buggy if you click too fast [URL] I want to create this but control to content in the sliding divs [URL]

View 1 Replies View Related

JQuery :: Opening And Closing Multiple Divs

Jan 4, 2012

I have five divs that I want to work kind of like an accordion, but you can open multiple sections. Right now, when user clicks any link, it opens all five sections. And when you click to close, it closes all five. I want to be able to open one section, then go to the next and so on.

Here's what I have now:

Html looks like this:

View 1 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved