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
ADVERTISEMENT
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
Jan 9, 2010
I want a menu at the top of the page. When I press a button in the menu the content of the page slides up, the content changes and it slides down. I've done this so far, but how can I do a more dynamic solution without having different divs for each menu item?
JS:
<script type="text/javascript" src="[URL]"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#f1').click(function() {
a("1");
});
$('#f2').click(function() {
a("2");
});
$('#f3').click(function() {
a("3");
});
function a(info) {
$('#content').slideUp("normal");
document.getElementById('content').innerHTML = info;
$('#content').slideDown("normal");
};
});
</script>
HTML:
<div id="f1"><a href="#">Menu 1</a></div>
<div id="f2"><a href="#">Menu 2</a></div>
<div id="f3"><a href="#">Menu 3</a></div>
<div id="content">Chose something in the menu</div>
View 5 Replies
View Related
Feb 14, 2011
I'm trying to create a fade in out effect of three divs in the same place, but for some reason the effect is duplicating itself for two of the divs.
<div id="click1">click1</div>
<div id="click2">click2</div>
<div id="click3">click3</div>
<div id="content1" class="vis">This is the content initially</div>
[Code]....
View 2 Replies
View Related
Jun 8, 2009
I basically have several buttons that are created dynamically via a db, so I can have 1 to 40 etc. now at the moment I give each one a unique id and a hover code in the loops. see below:loops goes here..
<img src="button.jpg" alt="button" border="0" id="myButton<?=
$newCode ?>" />
$(document).ready(function(){
[code]....
View 5 Replies
View Related
Sep 9, 2010
Im trying to get 2 elements to execute some effect individually at the same time on a hover.Ive looked at .animate but if I understand it correctly I can do multiple effects but still limited to that single element.[code]So basically Im just trying to get 1st & 2nd on hovers to happen at the same time and 1st and 2nd off hovers to happen at the same time.
View 1 Replies
View Related
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
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
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
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
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
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
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
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
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
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
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
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
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
Dec 9, 2010
I am trying to arrange 15 divs into a 5x3 grid.The divs have an id of piece1, piece2, piece3 etcI figured I could run a loop wherein each div is positioned to the right of the last.For each div, I'm trying to store the current position and width into variables then move it to the right by the number of pixels the div measures widthwise.This would position 5 divs horizontally and I am still unsure of how to get the next row of 5 divs positioned under the first and so on.This is what I have so far:
JQuery
for (var i=0; i<x; i++) {
var pos = $("#piece" + i).offset();
[code]....
View 1 Replies
View Related
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
Jan 12, 2009
I'm trying to get the following code to update two divs at a time rather than one
$(document).ready(function() {
$jQuery("ul").tabs();
}[code].....
View 4 Replies
View Related
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
View Related
Aug 14, 2010
I have the following to add curvy corners to my divs;
<script type="text/javascript">
$(document).ready(function(){
$('#album').corner();
});
</script>
My divs look like:
<div
id
="album"
> ... something here ... </div
>
<div
id
="album"
> ... somthing here ... </div
>
<div
id
="album"
> ... somthing here ... </div
>
<div
id
="album"
> ... somthing here ... </div
>
The curvy corners only works on the first div. How to make it work on all album divs ?
View 1 Replies
View Related
Sep 21, 2010
I've been using the jQuery Cycle Plugin now for a variety of clients and feel pretty comfortable with implementing it and how it works. I rarely have any difficulties and it always seems to shave time off my projects. Its really is an awesome plugin that I am extremely grateful for. That being said I'm having a little difficulty with a more involved implementation on a personal project. [URL]. The plugin is working correctly - but not ideally.
Each image and title you see is a callout for a blog post. The posts are automatically added by calling the WordPress theme's "loop" - a PHP function loading the information and images from the last several posts written - then it displays each post's featured images, titles, and other info inside divs labeled "post". Afterward, the jQuery cycle plugin uses all the "post" div's to create a great user-interactive recent blog-post slider - using (my favorite) vertScroll effects.
What I'm looking for is a way to display 2-3 posts at a time instead of just 1. I've seen people have 2-3 images displaying per scroll by adding two-three images into a div - and then having that div (with more divs) cycle. What prevents me from doing something like that here is the fact that the list of blog-posts is dynamically populated by PHP. There isn't a way (I know of) to insert a </div> after 2-3 posts and then open a new <div> for the next 2-3 so that the cycle plugin knows where to stop the scroll content.
View 4 Replies
View Related
May 21, 2010
I made this small piece of code, and I think I made it in a very drawn out way. I am sure there is a lot quicker way to do it. I want all divs to be cleared that are in a certain div. So when one link is clicked, the visible div is replaced with the new one (depending on the link)
Here is the code I have done...
$(document).ready(function(){
$(".untitled1link").click(function(){
$('.untitled1, .untitled2, .untitled3, .untitled4, .untitled5_1, .untitled5_2, .untitled5_3, .wall, .lightswitch, .detritus, .untitled6, .table, .socket, .socket2').hide();
$(".untitled1").fadeIn('5');
});
});
I just need a way to say clear all in that certain div, rather than having to name each class. I was thinking of giving each of those another class which is uniform across them all. But I don't think you can have two classes.
View 2 Replies
View Related
