I found this JSFiddle with a similar effect I'm looking for
But, I need to add the effect of fade In when the hidden div appears and also when this one gets back to hide.
I tried to add an effect from Animate CSS but it didn't work
$('#yourElement').addClass('animated bounceOutLeft');
Is this what you are looking for? Instead of moving the inner div left and right, we keep the home and member-home divs at the same spot with one as hidden using css.
#member-home {
display:none;
position:absolute;
left:0px;
width: 400px;
height: 600px;
background-color: green;
}
Then on button click we just use fadeToggle() with animation duration as 2000 to fade in the first showing div and fade out the hidden div and vice versa. No need of a seperate function with if-else conditions.
$("button").bind("click", function() {
$("#home").fadeToggle(2000);
$("#member-home").fadeToggle(2000);
});
Here is example code.
http://codepen.io/Nasir_T/pen/vXPjqy
Hope this helps.
update function as below.
function toggleDivs() {
var $inner = $("#inner");
// See which <divs> should be animated in/out.
if ($inner.position().left == 0) {
$inner.animate({
opacity: 1,left: "-400px"
},2000);
}
else {
$inner.animate({
opacity: 1,left: "0px"
},2000);
}
}
Try this: http://jsfiddle.net/1cgs9evo/1/
function toggleDivs() {
var $inner = $("#inner");
if ($inner.position().left == 0) {
$inner.fadeOut('slow');
$inner.animate({
left: "-400px"
});
$inner.fadeIn('slow');
} else {
$inner.fadeOut('slow');
$inner.animate({
left: "0px"
});
$inner.fadeIn('slow');
}
}
Related
If you visit this code pen and click anywhere on the home page it cycles through three boxes. If you scroll down you will see the content changes too.
I want to underline the correct nav bar word depending on the box currently being displayed.
Box 2 is the default at page load, and then the nav-bar should have the underline class active on the id="home". Then you click and it moves to box 3, which should apply the underline class to id="blog".
It is using left values to cycle through the elements. How can I check which box is active just by looking at the left value?
$('.box').click(function() {
$('.box').each(function() {
if ($(this).offset().left < 0)
{
$(this).css("left", "150%");
}
else if ($(this).offset().left > $('#container').width())
{
$(this).animate({
left: '0%',
}, 500 );
}
else
{
$(this).animate({
left: '-150%',
}, 500 );
}
});
});
The class I want to apply
.underline-active {
border-bottom: 2px solid white;
}
to the corresponding nav-bar ID:
#box1 {
left: -150%;
}
#box2 {
}
#box3 {
left: 150%;
}
Also, is there a way to animate the underline sliding from one nav item to the next?
Your navbar elements might be a little too big since whenever I add the .underline-active class to the them it extends past the edge of the element (at the same time, this would probably make creating a css animation easier since they seem to be equidistant this way).
In any event, you can do this with another $().each() call. Just look for whichever element has offset.left == 0. JQuery provides plenty of methods to add/remove CSS classes to an item so from there it's simply figuring out which navbar element gets the .underline-active class which I did using a switch statement. Your new js should look like this:
$(document).ready(function() {
$('#home').addClass('underline-active');
$('.box').click(function() {
$('.box').each(function() {
if ($(this).offset().left < 0)
{
$(this).css("left", "150%");
}
else if ($(this).offset().left > $('#container').width())
{
$(this).animate({
left: '0%',
}, 500 );
}
else
{
$(this).animate({
left: '-150%',
}, 500 );
}
});
$('.nav-button').each(function() {
$(this).removeClass('underline-active');
});
$(".box").each(function() {
if ($(this).offset().left == 0) {
switch($(this).attr('id')) {
case 'box1':
$('#home').addClass('underline-active');
break;
case 'box2':
$('#blog').addClass('underline-active');
break;
case 'box3':
$('#about').addClass('underline-active');
break;
}
}
})
});
});
If you want to animate the movement of the underline then you should alter this process slightly to use transitions instead of removing/adding it from elements. I'd imagine you can use the same animation that scrolls the page to move the underline since the navbar elements seem to be a consistent distance apart.
I am working with jquery on my page, I want when ever user click on a button an image will show loading for 1 second before the main content appears
Here is my code:
<script>
$(document).ready(function(){
$("#UseractivityLog").click(function(){
$(".UserProfileLogs-cont").html("<img src='image/loading.gif'/>");
//Then for 1/2 seconds this UserProfileLogs will display
$(".UserProfileLogs").toggle();
});
$("#IdealLog").click(function(){
$(".UserProfileLogs-con").toggle();
});
});
</script>
Here is my HTML part
Logs
<div id="UserProfileLogs-cont">
<div id="IdealLog"></div>
<div id="UserProfileLogs"></div>
</div>
Please i will appreciate jsfiled sample
You have some selector inconstancies, make sure you are watching those (# instead of .).
For the pause, use setTimout():
$(document).ready(function(){
$("#UseractivityLog").click(function(){
$("#UserProfileLogs-cont").html("Loading...");
setTimeout(function() {
$("#UserProfileLogs-cont").html("<img src='http://placehold.it/350x150'>");
}, 1000);
//Then for 1/2 seconds this UserProfileLogs will display
$(".UserProfileLogs").toggle();
});
$("#IdealLog").click(function(){
$("#UserProfileLogs-cont").toggle();
});
});
Fiddle: https://jsfiddle.net/Lqgum8hu/
For your comment:
//Then for 1/2 seconds this UserProfileLogs will display
Use another timeout:
setTimeout(function() {
// Whatever...
}, 500);
I changed your HTML a little to present the examples, but it can be changed to however you want it without changing the Javascript.
You can use setTimeout to update the image source after n seconds.
Also you can achieve this using single div and an nested img without using separate container for loading icon and image.
Hope this below snippet will be useful
HTML
Logs
<div id="UserProfileLogs-cont">
<img src="">
</div>
JS
$(document).ready(function(){
var _gif = "http://assets.motherjones.com/interactives/projects/features/koch-network/shell19/img/loading.gif";
var _forest="http://www.discovertheforest.org/images/hero/home/6.jpg";
$("#UseractivityLog").click(function(){
$("#UserProfileLogs-cont img").attr("src",_gif);
setTimeout(function(){
$("#UserProfileLogs-cont img").attr("src",_forest);
},3000)
});
});
Check this jsfiddle
You can wait until the body is ready:
function onReady(callback) {
var intervalID = window.setInterval(checkReady, 1000);
function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}
}
function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}
onReady(function () {
show('page', true);
show('loading', false);
});
#page {
display: none;
}
#loading {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(192, 192, 192, 0.5);
background-image: url("http://i.stack.imgur.com/MnyxU.gif");
background-repeat: no-repeat;
background-position: center;
}
Here is a JSFiddle that demonstrates this technique.
I am trying to use jQuerys slideToggle on a div that has a minimum height. this causes the animation to jump and not move smoothly. I have spent a while now looking for a solution but i am unable to get anything to work. I have made an example on jsfiddle and would appreciate if anyone could help me solve this issue.
my css for the div being toggled:
#selected-display{
height:calc(100vh - 50px);
display:none;
min-height: 750px;
}
my javascript:
$(document).ready(function(){
$(".toggle-display").click(function(){
$("#selected-display").slideToggle("slow");
});
});
https://jsfiddle.net/4y3q27mh/
https://jsfiddle.net/rqkt58L1/
You could just disable min-height during the animation, and then turn it back on when the animation is over:
$(document).ready(function () {
$(".toggle-display").click(function () {
var minHeight = $("#selected-display").css('min-height');
$("#selected-display").css('min-height',0).slideToggle("slow", function() {
$(this).css('min-height', minHeight);
});
});
});
Answer by dave works, but there is no animation to min-height. it just "appears"
I have solve it with javascript without using min-height:
function toggle(item) {
if (item.height() < 350) {
item.css('height', 350);
}
item.slideToggle();
}
I need that when I scroll down or up with mouse wheel or sidebar my div change incrementally the Y position (for example 50px up or down ). I need this in Javascript/Jquery.
I Try this code, but only works for scrolling down(The Scrolling Down and Up Function is working well, only the animate part is working wrong):
UPDATE:
var sidebarScrollTop = 0;
$(document).ready(function() {
sidebarScrollTop = $("body").offset();
$(window).scroll(function ()
{
var docScrollTop = $('body,html').scrollTop();
if(docScrollTop > sidebarScrollTop.top)
{
$("#legend").stop().animate({ marginTop: "+=50px",}, 'slow', "easeOutCirc" );
}
else
{
$("#legend").stop().animate({ marginTop: "-=50px",}, 'slow', "easeOutCirc" );
}
});
});
$(window).resize(function()
{
sidebarScrollTop = $("#legend").offset().top;
});
$(document).resize(function()
{
sidebarScrollTop = $("#legend").offset().top;
});
Thanks
You can use
$(window).scroll(function() {
// Your scroll code here
});
to grab whenever the user is scrolling on the page.
Next you want to change the div's y-value.
If the div is positioned absolute, this is just changing its top-value.
$('my-div').top = original-top-value + $(window).pageYOffset;
I believe you need is to keep the div always showing even when user scrolls down. If that is the case then it can be done with only CSS:
div {
position: fixed;
z-index: 100;
top: 100px;
left: 100px;
}
The values of z-index, top and left are dummy values. Change em with your ones.
UPDATE:
Since CSS Solution won't work for you, here is a working example writter in JS: http://jsfiddle.net/qCtt5/
This function adds an overlay with the following properties to the entire browser screen,
$('a.cell').click(function() {
$('<div id = "overlay" />').appendTo('body').fadeIn("slow");
});
#overlay
{
background-color: black;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
z-index: 100;
opacity: 0.5;
}
And this function is supposed to remove it.
$('#overlay').click(function() {
$(this).fadeOut("slow").remove();
});
But it seems to do absolutely nothing and now my page is stuck with a black overly over it. What's wrong with the removal?
The problem is that when you're adding the click handler, there isn't any overlay, so you're adding the handler to an empty set of elements.
To fix this, use the live method to bind your handler to all elements that match #overlay, whenever they are created.
Also, fadeOut is not a blocking call, so it returns before the element finishes fading out. Therefore, you're calling remove right after the element starts fading out.
To fix this, use fadeOut's callback parameter to call remove after the animation finishes.
For example:
$('#overlay').live(function() {
$(this).fadeOut("slow", function() { $(this).remove(); });
});
Here you go. This should fix the problem and let the overlay fade out before removing it.
$('#overlay').live("click", function() {
$(this).fadeOut("slow", function() { $(this).remove() });
});
Remove should be in the callback to fadeout, like so:
$('#overlay').live('click', function() {
$(this).fadeOut("slow", function() {
$(this).remove();
});
});
Try:
$('#overlay').live('click', function() {
$(this).fadeOut("slow").remove();
});
My recommendation is to use the jquery.tools overlay plugin. Your overlay will have a trigger (usually a button or link), but you can load or clear it with a javascript command, e.g.:
js:
var config = { closeOnClick:true, mask:{opacity:0.7, color:'#333', loadSpeed:1} }
$("#myTrigger").overlay(config); // add overlay functionality
$("#myTrigger").data("overlay").load(); // make overlay appear
$("#myTrigger").data("overlay").close(); // make overlay disappear
html:
<div id="myOverlay" style="display:none;">Be sure to set width and height css.</div>
<button id="myTrigger" rel="#myOverlay">show overlay</button>