We Keep Coding

Jquery Show/Hide multiple divs with transitions

I would like to have a single button show and hide multiple divs. The problem I ran into and haven't been able to construct is a working script that has each div transition during the show/hide and once completed loop back thru the function.
div.bg-1, div.content-1, div.link-1 are visible on page load.
On button.btn click div.bg-1 fades to show div.bg-2, div.content-1 swipes left to show div.content-2 and div.link-1 has no transition but displays div.link-2.
On the next button.btn click div.bg-2 fades to show div.bg-3, div.content-2 swipes left to show div.content-3 and div.link-2 has no transition but displays div.link-3.
Once div.bg-3 is shown on button.btn click it would loop back thru to show div.bg-1
<div class="bg-1 current display"></div>
<div class="bg-2 current"></div>
<div class="bg-3 current"></div>
<div class="content-1 current display"></div>
<div class="content-2 current"></div>
<div class="content-3 current"></div>
<div class="link-1 current display"> </div>
<div class="link-2 current"> </div>
<div class="link-3 current"> </div>
<button class="btn"></button>
I was able to get the divs to show and hide with the script below. However I don't think this is the most efficient and effective way, especially to add the desired different transitions to each element and loop back thru the function.
$(".btn").click(function () {
if ($(".current").next(".display").length) {
$(".current").removeClass("current").next(".display").addClass("current");
}
});
Thank you all in advace! I really appreciate any input and help.

You have to chain your effect and you can use jquery ui effect http://jqueryui.com/effect/. For exemple if you use blind.
$(".btn").click(function () {
$("#div1").show('blind', 1000, function () {
$("#div2").show('blind', 1000, function () {
$("#div3").hide('blind', 1000);
});
});
);
}
In this example, the div1 will show, 1 second later the div2 will show and 1 second later the div3 will hide. You can chain what ever you want whit the effect you want.

Scrolling effect on click on a image

I'm trying to make a scrolling effect to a menu. To be precise i want to click on a image and when i click it the menu to scroll down by 1 with a fade effect or what ever effect to the next link.
Ahhh...Like a windmill wheel if u understand what i mean.:)
And couldn't find any info.
Here is my code :
<div class=".img-fade"><img src="http://www.lahondafire.org/nest/Volunteer%20Manual/Signs%20and%20Forms/Arrow.gif" width="180" height="170"><BR>
When i click on the arrow the links below start scrolling down by 1 and contact to be top and about me to be to bottom...</div>
<div class="menu">
About me<BR>
Portofolio<Br>
Contact
</div>
http://jsfiddle.net/WCtQn/242/
So when i click on that arrow to move the links from top to bottom or bottom to top,dosen't matter.
Thank you.

You can try this method. It reorders the list elements when the arrow is clicked
$('.img-fade').click(function() {
var last = $('a')[0];
last.remove();
$('br')[0].remove();
$('.menu').append("<br> " + last['outerHTML']);
});
You should learn how to use javascript/jQuery and show us what you've tried so far and what you're having trouble with next time you post here
If you want something fancier you could look to do something similar to this example, though I'd add some .stop()s to remove some errors it has

I'm no jQuery pro but I've come up with something that is close to what you're looking for. I spiced it up with a fade effect. I also removed the <br> tags and set the links to display: block;. You could modify what I have to something similar to what #Zeaklous has posted to remove them along with the element and add them back in.
http://jsfiddle.net/WCtQn/248/
$('.img-fade').on('click', 'img', function(){
var firstItem = $('.menu a').first();
firstItem.fadeOut(2000, function() {
$(this).remove();
$('.menu').append(firstItem);
$('.menu a').last().fadeIn(2000);
});
});

JQuery, ScrollTop scrolls to last div and not ID div

So im basically using a link, to scroll through a series of divs to select the correct one.
Ie click on happy, and scrolls to 'happy' div,
However, the scroll seems to not go to what its linked to, but scrolls to the third div in the list.
Heres the code:
<div id="portfoliowrapper">
<div class="title">My Portfolio</div>
<div class="row1"><a id="kazookilink" href="#">Kazooki</a></div>
<div class="row1"><a id="uodlink" href="#">Universe of Downhill</a></div>
<div class="row1"><a id="kudialink" href="#">Kudia</a></div>
</div>
<div id="description">
<div id="top">description</div>
<div id="kazooki">kazooki</div>
<div id="uod">Universe of Downhill</div>
<div id="kudia">kudia</div>
</div>
<script type="text/jscript">
function goToByScroll(id){
id = id.replace("link", "");
$("#description").animate({scrollTop: $("#"+id).offset().top},'slow');
};
$(".row1 > a").click(function(e) {
// Call the scroll function
goToByScroll($(this).attr("id"));
});
</script>

Need to use position() instead of offset() and also need to set the #description to be position:relative.
Then you need to factor in the current scrollTop.
Last you need to cancel the default click behavior.
Complete example at http://www.jsfiddle.net/gaby/TneA6/

It's probably just scrolling to the very bottom of the page -- it can't align the top of the div with the top of the page because the page ends. Try adding a bunch of empty space at the bottom of the page (a <div style='height: 1000px;"></div> or something) and see if it still results in the unexpected behavior.

I guess you need to prevent the usual behaviour of the click:
$(".row1 > a").click(function(e) {
// prevent default behaviour
e.preventDefault();
// Call the scroll function
goToByScroll($(this).attr("id"));
});
Just guessing though.

.slideDown() content below jumps (isn't fluid)

So I'm writing a simple page that I want to be able to slide some content down when a button is clicked. Unfortunately this also causes some issues with the button I have underneath the sliding content. When I click the first button to slide content down, it works fine. As soon as I click the 2nd button, it slides the first content up, and the 2nd down and causes some jumping with the button below.
$('#1G').live('click', function(){
$('#slv').slideUp('slow');
$('#gld').slideUp('slow');
$('#brz').slideToggle('slow');
});
$('#2G').live('click', function(){
$('#brz').slideUp('slow');
$('#gld').slideUp('slow');
$('#slv').slideToggle('slow');
});
$('#3G').live('click', function(){
$('#brz').slideUp('slow');
$('#slv').slideUp('slow');
$('#gld').slideToggle('slow');
});
This happens on what seems to be every animation of size.
Here's an example:
http://kod.singaming.net/hosting
I've tried adding a width on #brz #slv and #gld, and I've tried adding a height to each.
Is it some css property I have to set? Let me know if I need to explain anything else.

This new method uses one box called info into which the correct content is loaded using the .load() function.
alternative html:
<div id="info" class='pkg'></div>
<div id="button" class="clearfix">
alternative script:
$('#1G').live('click', function(){
if ($("#info").hasClass("1")) return false;
$('#info').removeClass("1 2 3").slideUp('slow', function() {
$(this).load('_packages/bronze.html')
}).slideToggle('slow').addClass("1");
});
$('#2G').live('click', function(){
if ($("#info").hasClass("2")) return false;
$('#info').removeClass("1 2 3").slideUp('slow', function() {
$(this).load('_packages/silver.html')
}).slideToggle('slow').addClass("2");
});
$('#3G').live('click', function(){
if ($("#info").hasClass("3")) return false;
$('#info').removeClass("1 2 3").slideUp('slow', function() {
$(this).load('_packages/gold.html')
}).slideToggle('slow').addClass("3");
});
css for style.css:
#info {
display: none;
overflow: hidden;
height: 120px;
}
some other script that changes:
$('#brz').load('_packages/bronze.html');
$('#slv').load('_packages/silver.html');
$('#gld').load('_packages/gold.html');
The above can all just go away.
EDIT
I added the code I mentioned in my comment to prevent the buttons from functioning if the click is on the currently selected item. It's probably not the most elegant solution but it works. I add the class 1, 2, or 3 depending on the item clicked, and remove all of them upon a click of a different one.

The issue here is that the 3 divs #brz, #slv, and #gld are not wrapped in a div that will prevent the button below from moving because it is always the same height regardless of the movement of the content inside of it.
try:
<div style="[some height]">
// your three content divs
<div id="brz"></div>
<div id="slv"></div>
<div id="gld"></div>
</div>
the [some height] should be equal to whatever height you need it to be so that it will not be affected by the changes of the content inside the div.

showing floating div in a gridview

I have a gridview and when i mouse hover on a particular column, i am loading an external div(position:absolute) into that position.This i have done by calling a js function in the onmouseover event of the gridview cell(gvTestGrid.cells[1].attributes.add("onmouseover","loadDIV();")).
I am able to load the div properly on mouse hover, but the problem is my loaded div contains a dropdown and button inside it. when i try to move my mouse inside the div to click the button or select the dropdown list, the div moves away.This happens after i added
onmouseout event(gvTestGrid.cells[1].attributes.add("onmouseout","removeDIV();"))
without onmouse out event my div will remain loaded there on the gridview cell.Please help
i have done a small sample
<html>
<div id="divPopup" onmouseout="removeDIV(this,event);" style="display:none;width:100px;height:100px;color:Navy;border:2px;border-color:Red;border-style:solid;">
Yes its me
</div>
<table>
<tr><td>A</td></tr>
<tr><td>S</td></tr>
<tr><td onmouseover="loadDIV(event)" onmouseout="removeDIV(this,event);">D</td></tr>
<tr><td>E</td></tr>
</table>
</html>
<script language="javascript" type="text/javascript">
function loadDIV(evt)
{
var myWin = document.getElementById('divPopup');
myWin.style.position='absolute';
myWin.style.left = evt.x;
myWin.style.top = evt.y;
myWin.style.display='block';
}
function removeDIV(obj,evt)
{
var myWin = document.getElementById('divPopup');
myWin.style.display='none';
myWin.style.left = 0;
myWin.style.top = 0;
}
</script>
if you try to enter mouse into the div it will move away.Any solution for this please??

How about removing the div after you are done with the work in the DIV you have popped up? So you would close the DIV when you click the button in the DIV (Assuming it does work and should close afterward) or in a similar manner.

Set a small timeout for hiding the div and clear this timeout in the onmouseover handler for the div.

It seems like the onmouseout event should be attached to the div.

If you don't have Anchor tags in this content, may I suggest some CSS magic?
CSS here
a.MyCellPopup div.MyPopup {display:none;}
a.MycellPopup {position:relative;} /* Make pop up's position relative to the anchor tag */
a:hover.MyCellPopup div.MyPopup {display:block;position:absolute;top:10px;left:10px}
HTML Here
<a href="#" onclick="return false;" class="MyCellPopup">
<div class="MyPopup">POP UP STUFF without links (links won't work)</div>
</a>
I have an onclick="return false" so if they click on the cell, they won't be brought to the top of the page. The href needs to be in there or else IE won't recognize the hover. I got this idea from ZenGarden for how to do simple pop ups.
If this still doesn't work I highly recommend visiting the YUI library, they have a javascript widget for exactly this problem.