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.
Related
I have something that I am working on that involves the slideToggle function from jQuery. I created an example on JSFiddle. If you are on that and you click the buttons from the bottom up as fast as you can the slides happen as you click it regardless if the previous slide is completed or not. I would like to make it so that the other buttons cannot perform any actions until the slide is complete. I don't want to start a queue of actions because if you get click crazy you could create some time to wait. Are there any suggestions or tricks that could help me with this?
I am doing this because on the actual site that I am working on has a few slide actions that happen for each button. The problem is that multiple buttons share the sections that it animates. If someone clicked a couple too fast, it makes it so some of the sections disappear. I would like to make the other buttons not work until the click function is complete.
The code that I have in the JSFiddle example that toggles it is this
HTML
<section id="big1" class="big">
<img class="bg-image" src="http://lorempixel.com/output/abstract-q-c-640-480-3.jpg" />
</section>
<section id="bar1" class="bar">
<a id="btn-1" href="#">Button for 1</a>
</section>
jQuery
$("#btn-1").click(function () {
$("#big1").slideToggle();
});
In the JSFiddle, these are repeated 6 times to create 6 buttons.
Try something like this in your JSfiddle:
//Hide all big
$(".big").hide();
var slideInProgress = false;
//Create button functions to toggle the slide open and close
$(".bar > a").click(function () {
if(!slideInProgress) {
slideInProgress = true;
$(this).parents('section').next().slideToggle(400, function() {
slideInProgress = false;
});
}
});
I am working on custom notifications.
I would like to apply fade in and fade out animation to the div.
I have a set time out method which triggers every 30 seconds, which closes the div. also there is a cross button which closes the div. when we close it should fade out.
tm is the list that is dynamically generated. When ever I have something in the list I get a notification which should fade in. right now I got every thing working except the animation.
<div ng-repeat="t in tm" class="alert alert-danger">
<figure><img class="alert-close close"
ng-click="closeToastMessage(toast._id)"
src="/img/Notification/RCWeb6_6NTF_IMG_ExitMinorNotification.svg" alt="×"/></figure>
<p class="alert-header">[[t.message.title]]</p>
<p class="alert-message">[[t.message.errorMessage]]</p>
</div
try this
$scope.closeToastMessage = function (id) {
$('#'+id).fadeOut(500, function() {
ToastMessages.remove({_id: id});
});
}
When a user rolls over a certain <td>, an iframe nested in a <div> slides down inside that <div>. Right now I have three <div>'s stacked on top of each other, and with jQuery I am showing and hiding the appropriate <div>.
It works fine if I let each <div> appear and then move my cursor to the next <td>, but if I move rapidly to each link, they load together and the jQuery does not properly hide the other <div>'s.
Here is the project site:
Click on "MPC Clients" dropdown, then hover the three links:
Project Site
Here is the jQuery that I'm using:
$("td#version1").hover(function() {
$("#iframe2,#iframe3").hide();
$("#iframe1").slideDown("slow");
$("#iframe2,#iframe3").hide();
});
$("td#version2").hover(function() {
$("#iframe1,#iframe3").hide();
$("#iframe2").slideDown("slow");
$("#iframe1,#iframe3").hide();
});
$("td#version3").hover(function() {
$("#iframe1,#iframe2").hide();
$("#iframe3").slideDown("slow");
$("#iframe1,#iframe2").hide();
});
Here's the html with the hidden <div>'s:
<tr>
<td id="previewWindow0" class="previewWindow" colspan="3"><h2>Preview Window</h2>
<div id="iframe1"><iframe src="http://www.crm-newsletter.com/client-emails/liveWebinar.html"></iframe></div>
<div id="iframe2"><iframe src="http://www.crm-newsletter.com/client-emails/MissedWebinar.html"></iframe></div>
<div id="iframe3"><iframe src="http://www.crm-newsletter.com/client-emails/Mobile.html"></iframe></div>
</td>
</tr>
When you move over the elements fast multiple events are fired and animations are not complete so you don't see the expected behavior.
Use stop() method to stop the previous animation before you start the next.
Try this.
$("td#version1").hover(function() {
$("#iframe2,#iframe3").hide();
$("#iframe1").stop(true, true).slideDown("slow");
$("#iframe2,#iframe3").hide();
});
$("td#version2").hover(function() {
$("#iframe1,#iframe3").hide();
$("#iframe2").stop(true, true).slideDown("slow");
$("#iframe1,#iframe3").hide();
});
$("td#version3").hover(function() {
$("#iframe1,#iframe2").hide();
$("#iframe3").stop(true, true).slideDown("slow");
$("#iframe1,#iframe2").hide();
});
stop(clearQueue, jumpToEnd) reference - http://api.jquery.com/stop/
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.
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.