I am trying to add an animation/fade to a show/hide script.
When the user clicks the ".show" anchor, I would like to slide down the ".buttons" div by the height of the ".targetDiv" div, after-which I would like the ".targetDiv" div to fade in.
Then (if possible), I would like the reverse action to occur when the ".hide" anchor is clicked - causing the ".targetDiv" to fade out, and the ".buttons" div to slide upwards (back to its original position).
Thank you for your help!
jsFiddle:
http://jsfiddle.net/XwN2L/1296/
HTML:
<div id="content" class="targetDiv">Content</div>
<div class="buttons">
<a class="show" target="content">Show</a>
<a class="hide" target="content" style="float: right;">Hide</a>
</div>
JavaScript:
$('.targetDiv').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#' + $(this).attr('target')).show();
});
$('.hide').click(function () {
$('#' + $(this).attr('target')).hide();
});
I would simply use the slideUp/slideDown methods of jquery.
$('.targetDiv').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#' + $(this).attr('target')).slideDown('slow');
});
$('.hide').click(function () {
$('#' + $(this).attr('target')).slideUp('slow');
});
If you are desperate to slide and fade, checkout the following:
fadeOut() and slideUp() at the same time?
It's easier to accomplish when the target element is nested inside another element. This way you can separately apply the slide animations to the containing parent element and the fade animations to the target child element.
For example:
HTML
<div id="content_container">
<div id="content" class="targetDiv">Content</div>
</div>
<div class="buttons">
<a class="show" target="content">Show</a>
<a class="hide" target="content" style="float: right;">Hide</a>
</div>
Javascript
$('.show').click(function () {
var target = $('#' + $(this).attr('target'));
var target_parent = target.parent().height(target.outerHeight());
target_parent.slideDown(250, function() { target.fadeIn(500); });
});
$('.hide').click(function () {
var target = $('#' + $(this).attr('target'));
var target_parent = target.parent();
target.fadeOut(500, function() {target_parent.slideUp(500);} );
});
Note how in the "show" handler, the parent element inherits its height from the currently hidden child element.
See possible jsFiddle demo
one option:
give your elements absolute positioning:
position: absolute;
top:0px;
then animate it like so:
$('.show').click(function () {
$('.targetDiv').hide();
$('.buttons').animate({
top : '80px' // the height of your content + the padding + the margins
},'slow',function(){
$('#content').fadeIn('slow');
});
});
$('.hide').click(function () {
$('#content').fadeOut('slow',function(){
$('.buttons').animate({
top : '0px' // the height of your content + the padding + the margins
});
});
});
working example: http://jsfiddle.net/XwN2L/1298/
Related
I'm looking for some help with fading hidden div's in.
This is what I have so far, but it doesn't seem to want to work, the div just appears with no fade.
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
$('.one').click(function(){
$("#one").fadeIn("5000");
});
html
<body>
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
Just click event on alike this:
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e) {
//e.preventDefault();
$("#" + $(this).attr("class")).fadeIn(5000).siblings('div').hide();
});
Fiddle
setTimeout(function() {
$("#one").css('display','none');
}, 5000);
Try this.
$("body").on('click', '#button-hide' function(e){
$("#" + $(this).attr("class")).show().siblings('div').hide();
})
$("body").on('click', '#button-show' function(e){
$("#one").fadeIn("5000");
})
For best answers, please explain more detail you problem. Include the context and example.
Salute!
you don't see the change because "One" is staying on the same position. Try to hide it first, then you can fadeIn
$('.one').click(function(){
$("#one").hide().fadeIn("5000");
});
I am trying to create an effect whereby clicking on a title toggles the corresponding content div. Clicking on another title while some content is showing should hide that content div and show the content div corresponding to the title just clicked.
However the code is not doing anything, as you can see on the following jquery: http://jsfiddle.net/dPsrL/
Any ideas?
HTML:
<div class="row title">
<div class="title" industry_id="education">Ed</div>
<div class="title" industry_id="tech">Tech</div>
<div class="title" industry_id="finance">Fin</div>
</div>
<br>
<br>
<div class="row content">
<div class="content" id="education">Education is great</div>
<div class="content" id="tech">Technology is awesome</div>
<div class="content" id="finance">Finance is super</div>
</div>
JAVASCRIPT:
$(document).ready(function () {
$('.content').hide();
});
('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$("#"+clicked).toggle(400);
$("#"+clicked).siblings().hide();
});
Instead of toggling the clicked element first and then hiding the others, why don't you just hide everything first and then show the clicked one? Saves you a check, and all you have to do is switch the order
$('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$('.content').hide();
$('#' + clicked).show(400);
});
Your attribute doesn't have the id selector in it. You need to do a string concatenation :
$('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$('#' + clicked).toggle(400);
$('#' + clicked).siblings().hide();
//The two last lines could be :
//$('#' + clicked).toggle(400).siblings().hide();
});
Also you have to remove the class content and title on the row since it trigger the click event and the hide part.
Here's a working fiddle : http://jsfiddle.net/dPsrL/3/
Typo on ('.title'). Should be $('.title'). Also, you should probably not give the container divs the same class as the child divs and then use that same class in your CSS and jQuery. It just makes selection more difficult.
jsFiddle example
Please take a look at this FIDDLE that shows and hides the text in a container on click . What I'm trying to do is that when I click open the first hidden text and then scroll down to click open another one, I want it to scroll back to the sibling image of that opened text to keep it in view. How can I find the sibling element and scroll to it on click?
This one is not valid.
$('.slider2').click(function(e) {
var imageposition = $(this).closest('.imageclass');
$(document.body).animate({scrollTop: imageposition.offset().top}, 'fast');
});
HTML:
<div class="container" style="border:2px solid #222;">
<img class="imageclass" style="width:100px;height:100px" src ="image.jpg">
<div class="slider2">Hi</div>
<div class="internal" style="display: block;">Text<p></p></div>
</div>
<div class="container" style="border:2px solid #222;">
<img class="imageclass" style="width:100px;height:100px" src ="image.jpg">
<div class="slider2">Hi</div>
<div class="internal" style="display: block;">Text<p></p></div>
</div>
..............
JS:
$('.slider2').click(function(e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
var imageposition = $(this).closest('.imageclass');
$(document.body).animate({scrollTop: imageposition.offset().top}, 'fast');
});
$('.internal').hide();
You've at least a couple of problems here
$(this).closest('.imageclass') doesn't select the image that is previous sibling of <a>
even if you get your desired image, the moment your scrolling code runs, the image has not placed itself to its final position.
using $(document.body) to scroll the window (I'm doubtful about it myself)
Below code selects the right image element, gets the scrolltop at right moment, and scrolls the html, body using working syntax.
$(function () {
$('.slider2').click(function (e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
$('.internal').slideUp('normal');
var imageposition = $('.imageclass', $(this).closest('.container'));
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal', function () {
$('html, body').animate({scrollTop: $(imageposition).offset().top})
});
}
});
$('.internal').hide();
});
There's a bit of a problem with how your scrolling function works because the position of the active .container alters in relation to other containers(when active and inactive state).
Also, you should not be looking for the closest position but for its parent element.
Please take a look at my code: CSS
.slider2 {
margin:40px;
}
.internal p {
padding:5px;
}
.internal h3 {
text-align:center;
}
.container {
position: relative;
}
You might need to look for a way, to detect the height of an inactive container since I made mine as a static value.
JS:
$('.slider2').click(function (e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
var containerHeight = 205;
var containerIndex = $(this).offsetParent().index();
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
var scrollPosition = containerHeight * containerIndex;
$('body').animate({
scrollTop: scrollPosition
}, 'fast');
});
$('.internal').hide();
<script>
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#slidewrapper').scrollTo($(this).attr('href'), 300);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
$('#slidewrapper, .item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});
$('#slidewrapper').scrollTo($('a.selected').attr('href'), 0);
}
</script>
QUESTION: how can i disable "a.panel" styling when the link is current? right now, when the link is current the script adds "selected" styling to the link (see line 5) but it still retains the styling of "a.panel" because it is not disabled.
how can i apply ONLY the styling of "selected" to a current link without the influence of "a.panel"?
EDIT: ADDITIONAL FEATURE REQUESTED:
here is some of the html for this script:
item1
item2
item3
<div id="slidewrapper">
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="content">item1</div>
</div>
<div id="item2" class="item">
<a name="item2"></a>
<div class="content">item2</div>
</div>
<div id="item3" class="item">
<a name="item3"></a>
<div class="content">item3</div>
</div>
</div>
</div>
when the page loads, the first pane in this slider is open, however, the link is not styled as "selected" until it's clicked on. how can the first link always be styled as "selected"?
Do as follows:
$(document).ready(function() {
var $aPanel = $('a.panel');
$aPanel.click(function () {
$aPanel.removeClass('selected');
$(this).addClass('selected');
$(this).removeClass('panel');
current = $(this);
$('#slidewrapper').scrollTo($(this).attr('href'), 300);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
$('#slidewrapper, .item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});
$('#slidewrapper').scrollTo($('a.selected').attr('href'), 0);
}
Explanation: added a new line, var $aPanel = $("a.panel"); to "cache" the jQuery selector at the DOM ready event, so that you can add and remove classes without fear, knowing that the same anchor elements will be in the $aPanel variable.
You would need to remove the "panel" style from your element, like:
$(this).removeClass('panel')
But I'm not sure if this is what you want, because when you click another panel later the call to $('a.panel').removeClass('selected'); will fail, because it doesn't have the panel class anymore.
Why not make 2 classes selected and unselected which you differentiate in your stylesheet. Then you can user the panel class for associating event handlers and other things.
Alternatively change the style from selected so that it overrides the properties from panel that you doesn't want.
Edit: Changed answer, see comment
The jQuery:
$(document).ready( function() {
$("#links .button").click(function() {
var id = $(this).attr("id") + "-fade";
$("#sliding-blocks").fadeOut(100);
$("#" + id).fadeIn(300);
});
});
And the simplified HTML:
<table id="links">
<tr>
<td>
<div id="projects" class="button">
Projects
</div>
</td>
</tr>
</table>
<table id="sliding-blocks">
<tr>
<td>
<span id="projects-fade" class="block">
<img class="icon" src="github.png" height="20" width="20" />
</span>
</td>
</tr>
</table>
The non-simplified HTML contains more entries in #links and #sliding-blocks, but all following the same "fade" naming convention.
For some reason, I can't get anything to work (not even something I can work from). And yes, I've loaded jQuery.
Solution:
$(document).ready( function() {
var blocks = ["projects-fade", "blog-fade", "online-fade", "resume-fade"];
$("#links .button").click(function() {
var id = this.id + "-fade";
$("#sliding-blocks").fadeOut(100,function() {
$.each(blocks, function() {
$("#" + this).hide();
});
$("#" + id).show();
$(this).fadeIn(300);
});
});
});
Your fade out the #sliding-blocks table, and fade in one element of it, but the table itself is still faded out. You should instead fade out all .block elements, then fade in the one you want, leaving the table visible all the time.
Because you've faded out an ancestor of the element you're trying to fade in.
When the ancestor is faded out, none of its descendants will be visible.
I assume you're looking for something like this...
$(document).ready( function() {
$("#links .button").click(function() {
var id = this.id + "-fade";
$("#sliding-blocks").fadeOut(100,function() {
$("#" + id).show();
$(this).fadeIn(300);
});
});
});
you're hiding sliding-blocks and then your're trying to fade a child element of it in. that won't work as the parent container sliding-blocks is invisible