I'm currently using the code below found on web tutorial to show/hide DIVs. It works great but don't like the effect. Would like the DIVs to fade in / fade out instead (or something smoother, for the moment the DIVs are growing from the top-right corner). How could I adapt the code to do this? Youc ans ee it here http://jsfiddle.net/Grek/w4HWn/1/ Many thanks
function showonlyone(thechosenone) {
$('.textzone').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(2000);
}
else {
$(this).hide(2000);
}
});
}
Just change .hide() to .fadeOut() and .show() to .fadeIn()
But looking at your example, you could do it much simpler by using data attributes.
Have a look at this example.
You may need absolute positioning or some other technique because the two divs stack up while fading in and out.
You can use fadeIn and fadeOut methods, you can also minify the code, try the following:
function showonlyone(thechosenone) {
$('.textzone').fadeOut();
$('#'+thechosenone).fadeIn();
}
As you are using jQuery you can use the jQuery click handler:
HTML:
<div class="source-title-box"><span class="activity-title">Our region</span></div>
<div class="source-title-box"><span class="activity-title">Our source</span></div>
jQuery:
$('.activity-title a').click(function(e){
e.preventDefault()
var thechosenone = $(this).attr('href');
$('.textzone').fadeOut(600, function(){
$(thechosenone).fadeIn(600);
});
})
DEMO
Related
I have this code for an accordion style toggle. Works great, only problem is, if you click on an open accordion, it slides up then back down. It doesn't slide closed.
Any thoughts?
Thanks!
//toggles 2
$('body').on('click','.toggle h3 a', function(){
if($(this).parents('.toggles').hasClass('accordion')) return false;
$(this).parents('.toggles').find('.toggle > div').slideUp(300);
$(this).parents('.toggles').find('.toggle h3 a i').attr('class','icon-plus-sign');
$(this).parents('.toggles').find('.toggle').removeClass('open');
$(this).parents('.toggle').find('> div').slideDown(300);
$(this).parents('.toggle').addClass('open');
//switch icon
if( $(this).parents('.toggle').hasClass('open') ){
$(this).find('i').attr('class','icon-minus-sign');
} else {
$(this).find('i').attr('class','icon-plus-sign');
}
return false;
});
<div class="toggles">
<div class="toggle accent-color"><h3><i class="icon-minus-sign"></i>First Accord</h3>
<div>
Content
</div>
</div>
<div class="toggle accent-color"><h3><i class="icon-minus-sign"></i>Second Accord</h3>
<div>
Content
</div>
</div>
It's pretty simple why it does that. Your function always execute slideUp and slideDown. In that order. So when your div is collapsed, it will execute slideUp(which doesn't really make anything because it's already collapsed) and then it will slideDown. Now, when the div is expanded: The div will slideUp (this time it does go Up because it's not collapsed) and then it will go Down.
A better way to do it would be with SlideToggle.
http://api.jquery.com/slidetoggle/
EDIT: Also, you can check if the div is collapsed or not with...
if($(element).is(':visible')){
//expanded
} else {
//collapsed
}
Sorry I didn't really understand what was happening with your code so I rewrote the js part from scratch: http://jsfiddle.net/d503n47r/2/
$('body').on('click','.toggle h3 a', function(e){
e.preventDefault();
if($(this).parents('.toggles').hasClass('accordion')) return false;
if ($(this).parents('.toggle').find('div').eq(0).hasClass('open')) {
$(this).parents('.toggle').find('div').eq(0).removeClass('open').slideUp();
} else {
$('.toggle.open').removeClass('open');
$(this).parents('.toggle').find('div').eq(0).addClass('open').slideDown();
}
});
Please take a look at jquery UI as it helps a lot with all this common things http://jqueryui.com/ (No need to reinvent the wheel)
MinusFour was correct that it was firing both at the same time.
A way to remedy this is to do an if / then statement that checks whether or not it's open, and then fire's the open / close dependent on that.
Here's a link to a JSfiddle
I also added the class "toggle-panel" to the container that was sliding up / down, just so that following would be easier to read.
if($(this).closest('.toggle').hasClass('open')){
console.log('open');
$(this).parents('.toggle').find('.toggle-panel').slideUp(300);
$(this).closest('.toggle').removeClass('open');
return
}
else {
console.log('close');
$(this).parents('.toggles').find('.toggle h3 a i').attr('class','icon-plus-sign');
$(this).parents('.toggle').find('.toggle-panel').slideDown(300);
$(this).parents('.toggle').addClass('open');
}
I'm using the code below to display a notice at the top but it just appears out of nowhere. I would like it to scroll down similar to a toggle while pushing down all the content in the div below it down.
Heres the Javascript
<script>
window.onload = function() {
setTimeout(function() {
document.getElementById('top').style.display = 'block';
}, 10000);
}
</script>
html:
<div id="top">
<p>content here</p>
</div>
Use .slideDown() instead of changing the display property to block
window.onload = function () {
setTimeout(function () {
$('#top').slideDown()
}, 10000);
}
You have this question tagged with jQuery, and there is a straight forward jQuery function for this, so here is that version:
$(function(){
setTimeout(function(){
$('#top').slideDown();
}, 10000);
});
http://api.jquery.com/slideDown/
If you want to do this in plain javascript I would recommend using CSS3 transitions, instead of modifying attributes like display or attempting to perform the animation manually.
An example of this method using CSS3 and max-height, can be found here: http://davidwalsh.name/css-slide
You would then use javascript to add and remove classes to toggle the desired state, the animation would be performed for you by the CSS3 transitions.
I have two divs that are set to show only one at a time, but I cannot seem to get them to slowly fade in with .show("slow"). Fading out works fine with .hide("slow"). Here's what I have so far:
$(document).ready(function() {
$('#162').hide();
$('#164').hide();
function reveal162() {
$('#162').show("slow");
$('#164').hide("slow");
}
$('#162link').click(reveal162);
function reveal164() {
$('#164').show("slow");
$('#162').hide("slow");
}
$('#164link').click(reveal164);
});
jsFiddle with an example: http://jsfiddle.net/swiftsly/9Yx8b/
To animate using show(), element need to be displayed as block, you can use display:block
version{
display:block;
}
DEMO
Your fiddle example is using non-standard tags such as <vn> and <version>. The show and hide methods work as expected when these tags are replaced with <div>. Is there a reason for the non-standard tags?
Try the fadeIn() and fadeOut() functions instead.
$(document).ready(function() {
$('#162').fadeOut();
$('#164').fadeOut();
function reveal162() {
$('#162').fadeIn("slow");
$('#164').fadeOut("slow");
}
$('#162link').click(reveal162);
function reveal164() {
$('#164').fadeIn("slow");
$('#162').fadeOut("slow");
}
$('#164link').click(reveal164);
});
Im trying to fade out a DIV when clicking a link within the DIV itself. Here is my code:
$(".hideinfo").click(function () {
var parentLink = $(this).parent().parent();
$(parentLink).fadeTo("slow", 0);
});
The reason I'm not specifying the ID directly is because I want to use this to fade out multiple DIVs with different ID's.
The above code was returning the ID when I setup an alert but not fading the DIV out or anything else I tried to so... any help here would be appreciated. The HTML is:
<div id="First-Block" class="item">
<p>text here</p>
<p>Back</p>
</div>
Thank you!
You should use fadeOut("slow") instead.
Try changing your code to:
$(".hideinfo").click(function () {
var parentLink = $(this).parent().parent();
$(parentLink).fadeOut("slow");
});
To improve this even further you can shorten your code to:
$(".hideinfo").click(function() {
$(this).closest(".item").fadeOut("slow");
});
Just to mention as well that by clicking on an anchor it will jump to the top of the page using #. I would take a look at .preventDefault()
You can also check out the API here -> http://api.jquery.com/fadeOut/
Use fadeOut() instead since your primary goal is to affect the overall visibiltity not a given opacity.
jsBin demo
$(".hideinfo").click(function( e ){
e.preventDefault(); // prevent default anchor link behavior
$(this).closest('.item').fadeTo(400, 0);
});
Additionally try to wrap the above into a document ready :
$(function(){
// code here.
});
What I'm trying to do is simply, fadeout all images inside containers, replace #next1's image to #active and after that fadein all images again.
here is my code:
$('.logo').fadeOut('slow', function() {
$('#active>img').replaceWith( $('#next1>img') );
}).fadeIn('slow', function() {});
this does not work. i found myself looking at the empty #active
but this however;
$('.logo').fadeOut('slow', function() {}).fadeIn('slow', function() {});
$('#active>img').replaceWith( $('#next1>img') );
makes the replacing just fine but not the animation i'm trying to do.
i get same results with both chrome and ie.
My suggestion here would be to look at the promise/done methods in jQuery. As an example here you could do something like:
$('.logo').fadeOut('slow').promise().done(function(logo) {
$('#active>img').replaceWith($('#next1>img'));
$(logo).fadeIn('slow');
});
jQuery promise - http://api.jquery.com/promise/
Try:
$('.logo').fadeOut('slow', function() {
$('#active>img').replaceWith( $('#next1>img') );
$(this).fadeIn('slow');
});
Assuming what you want to achieve is fading out, then replacing the content while .logo is hidden, then fading in after the logo is replaced.