I have used the following code which makes it every time you click on the div it will animate and move across the page, thus moving the next one across after it.
http://jsfiddle.net/jtbowden/ykbgT/2/
However, I am trying to make it so it automatically scrolls every 3 seconds without having to click. I have tried the following adjustments to the javascript using a timer but it seems to just spazz out and not scroll correctly:
<script>
$('.box').click(function () {
$(this).animate({
left: '-50%'
}, 500, function () {
$(this).css('left', '150%');
$(this).appendTo('#container');
});
$(this).next().animate({
left: '50%'
}, 500);
});
$(document).ready(function ()
{
setInterval(function ()
{
$('.box').click();
console.log("BOX CLICKED.");
}, 3000);
});
</script>
Does anyone have any ideas?
Thanks
Similar to Zack's answer(but simpler, IMHO), I've found that the following works for you
id = 1
setInterval(function(){
$('#box' + id).animate({
left: '-50%'
}, 500, function() {
$(this).css('left', '150%');
$(this).appendTo('#container');
});
$('#box' + id).next().animate({
left: '50%'
}, 500);
id = id <= 5 ? id + 1 : 1;
},4000)
Sorted it by using the following adjustments:
<script>
ActiveDashboards = {};
ActiveDashboards["Projects"] = true;
ActiveDashboards["SHEQs"] = false;
ActiveDashboards["HR"] = false;
function ShowNextDashboard()
{
if (ActiveDashboards["Projects"] == true)
{
//Hide this one.
$('#box1').animate({
left: '-50%'
}, 500, function () {
$('#box1').css('left', '150%');
$('#box1').appendTo('#container');
});
//Show SHEQs one.
$('#box2').animate({
left: '50%'
}, 500);
ActiveDashboards["Projects"] = false;
ActiveDashboards["SHEQs"] = true;
}
else if (ActiveDashboards["SHEQs"] == true)
{
//Hide this one.
$('#box2').animate({
left: '-50%'
}, 500, function () {
$('#box2').css('left', '150%');
$('#box2').appendTo('#container');
});
//Show HR one.
$('#box3').animate({
left: '50%'
}, 500);
ActiveDashboards["SHEQs"] = false;
ActiveDashboards["HR"] = true;
}
else if (ActiveDashboards["HR"] == true)
{
//Hide this one.
$('#box3').animate({
left: '-50%'
}, 500, function () {
$('#box3').css('left', '150%');
$('#box3').appendTo('#container');
});
//Show Projects one.
$('#box1').animate({
left: '50%'
}, 500);
ActiveDashboards["HR"] = false;
ActiveDashboards["Projects"] = true;
}
}
$(document).ready(function ()
{
setInterval(function ()
{
ShowNextDashboard();
}, 4000);
});
</script>
Probably a better way of doing it, but it's working fine and scrolling through each one.
Related
This question already has answers here:
How to write a simple jQuery plugin [closed]
(3 answers)
Closed 5 years ago.
I am finally finished with what I've started. I created a responsive lightbox slideshow!
But, I am kinda facing a problem. I want to make it a library...In other words, I want the code to apply to the html classes that I can add infinitely (Like all libraries do).
Thank you!
var imageSliding = $('.box > .img');
$('.lightbox').click(function() {
$('.backdrop, .box').animate({
'opacity': '.50'
}, 300, 'linear');
$('.box').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, .box').css('display', 'block');
});
$('.close').click(function() {
close_box();
});
$('.backdrop').click(function() {
close_box();
});
function close_box() {
$('.backdrop, .box').animate({
'opacity': '0'
}, 300, 'linear', function() {
$('.backdrop, .box').css('display', 'none');
});
}
/* Slider */
var speed = 100;
$(".prev").click(function() {
var gallery = $(this).closest('.box').find("ul.gallery"),
now = gallery.children(":visible"),
last = gallery.children(":last"),
prev = now.prev();
prev = prev.index() == -1 ? last : prev;
now.fadeOut(speed, function() {
prev.fadeIn(speed);
});
});
$(".next").click(function() {
var gallery = $(this).closest('.box').find("ul.gallery"),
now = gallery.children(":visible"),
first = gallery.children(":first"),
next = now.next();
next = next.index() == -1 ? first : next;
now.fadeOut(speed, function() {
next.fadeIn(speed);
});
});
$(".gallery li").click(function() {
var first = $(this).parent().children(':first'),
next = $(this).next();
next = next.index() == -1 ? first : next;
$(this).fadeOut(speed, function() {
next.fadeIn(speed);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
See jQuery main Documentation for this: basic-plugin-creation
Also TeamTreehouse has a good tutorial About this: writing-your-own-jquery-plugins
Anyone know what is wrong with this code JS code? The function does not fire and console isn't offering any insight. This was working in the click function with minor changes but not in its own function.
//History Chart
$expanded = true;
var $parent;
function graphShowHide(parent) {
$parent = parent;
if ($expanded) {
$('#ExpandedGraphRow').hide("fast", function() {
});
if($('body').innerWidth() < 673) {
$('div.nbs-flexisel-nav-left, div.nbs-flexisel-nav-right').css('top', '415px');
$(parent).find('#ExpandedGraphRow').css({
position: 'relative',
bottom: '0'
});
$(parent).find('.animation-wrapper').animate({
height: '397px'},
200, function() {
});
}
setTimeout(function($) {
$(parent).find('.history-bar-wrapper').width('100%');
}, 200);
$(parent).find('h4 img').hide('fast');
$(parent).find('h4 span').width('100%').css('float', 'none');
$expanded = false;
$(this).text('show history');
} else {
var currentWidth = $(parent).find('h4').width();
var nthChild = $(parent).index();
if($('body').innerWidth() > 982 && nthChild == 2) {
$('.nbs-flexisel-nav-right').trigger('click');
} else if($('body').innerWidth() < 983 && nthChild == 1) {
$('.nbs-flexisel-nav-right').trigger('click');
}
$(parent).find('h4 span, .history-bar-wrapper').width(currentWidth);
$(parent).find('h4 span').css('float', 'left');
$(parent).find('h4 img').show('slow');
$('#ExpandedGraphRow').show("slow", function() {
});
if($('body').innerWidth() < 673) {
$('div.nbs-flexisel-nav-left, div.nbs-flexisel-nav-right').css('top', '748px');
$(parent).find('#ExpandedGraphRow').css({
position: 'absolute',
bottom: '66px'
});
$(parent).find('.animation-wrapper').animate({
height: '729px'},
200, function() {
});
}
$(this).text('hide history');
$expanded = true;
}
}
$('.history-button').click(graphShowHide('.BMI'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Try this:
$('.history-button').click(function() {
graphShowHide('.BMI');
});
You are calling the function, not binding it to the click. Wrap the call in another function for it to work correctly:
$('.history-button').click(function() {
graphShowHide('.BMI');
});
http://learn.jquery.com/javascript-101/functions/
You have to change this line:
$('.history-button').click(graphShowHide('.BMI'));
By this one:
$('.history-button').click(function() { graphShowHide('.BMI') });
Basically I want my piece of code to animate my menu out of the screen hence my -50px on scroll. and when not scrolling animate back in.
This is the code I have so far. but It only works on every time I refresh my browser.
var $menu = $(".sticky-nav");
var topAnim = $menu.css("top");
var scrollStopped;
var fadeInCallback = function () {
if (typeof scrollStopped != 'undefined') {
clearInterval(scrollStopped);
}
scrollStopped = setTimeout(function () {
$( ".sticky-nav" ).animate({
top: "20px"
}, 300);
});
}
$(window).scroll(function () {
if (!$menu.is(":animated") && topAnim == "20px") {
$( ".sticky-nav" ).animate({
top: "-50px"
}, 300);
} else {
fadeInCallback.call(this);
}
});
jsfiddle.net/B997S
I found 2 issues in your code.
Replaced topAnim in the below line with $menu.css("top") as topAnim always returned a constant.
if (!$menu.is(":animated") && $menu.css("top") == "20px") {
Next issue was
scrollStopped = setInterval(function () { // this is the right format
Please check the below link
http://jsfiddle.net/kapilgopinath/B997S/1/
I currently am using the code below to make a div class .overlay fade in when hovering over a div...
It fades out when you're not hovering over it.
How could I also make it fade out if your pointer is stationary for "x" time?
<script>
$(document).ready(function() {
$(".img-holder").on("mouseenter", function(){
$(".overlay").stop(true, true).fadeIn();
});
$(".img-holder").on("mouseleave", function(){
$(".overlay").stop(true, true).fadeOut();
});
});
</script>
Updated with new requirements:
$(document).ready(function() {
var timer = 0,
idleThreshold = 1;
setInterval(function(){
if(timer > idleThreshold) {
$('.overlay').stop(true, true).fadeOut();
} else {
timer++; }
}, 1000);
$('.img-holder').on("mousemove", function(){
if(timer == 0) {
$(".overlay").stop(true, true).fadeIn();
}
timer = 0;
});
$(".img-holder").on("mouseenter", function(){
$(".overlay").stop(true, true).fadeIn();
});
$(".img-holder").on("mouseleave", function(){
$(".overlay").stop(true, true).fadeOut();
});
});
DEMO
try something like this:
setTimeout(function(){
$(".img-holder").fadeOut("slow");
}, 10000 );
You can do it like this too
var timer;
var x=3000; // in ms
$(document).on('mousemove', function () {
clearTimeout(timer);
timer = setTimeout(function () {
$(".overlay").stop(true, true).fadeOut();
}, x);
});
I am quite new to Javascript (intermediate in HTML & CSS), though I am pretty good at working things out on my own by looking up other's examples. Unfortunately, I am having significant trouble with this one.
I have a table displaying 3 links to the viewer. Each link when clicked, slides a hidden div open to the right. When one of the other links are clicked, the opened div slides back to being hidden, and then the other one slides open.
What I am looking for, is to hide the divs again when the mouse is clicked on the link again, and also when the mouse is clicked outside the div (or anywhere on the page, really).
I have tried using "e.stopPropagation" but it doesn't seem to be working for me.
Any help is greatly appreciated - thank you.
I have a jsFiddle that I created for practice:
http://jsfiddle.net/AuU6D/3/
This is my jQuery code:
jQuery(function ($) {
$('a.panel').click(function () {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active'),
animIn = function () {
$target.addClass('active').show().css({
left: -($target.width())
}).animate({
left: 0
}, 500);
};
if (!$target.hasClass('active') && $other.length > 0) {
$other.each(function (index, self) {
var $this = $(this);
$this.removeClass('active').animate({
left: -$this.width()
}, 500, animIn);
});
} else if (!$target.hasClass('active')) {
animIn();
}
});
});
Try
jQuery(function ($) {
$('a.panel').click(function () {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active'),
animIn = function () {
$target.addClass('active').show().css({
left: -($target.width())
}).finish().animate({
left: 0
}, 500);
};
if (!$target.hasClass('active') && $other.length > 0) {
$other.each(function (index, self) {
var $this = $(this);
$this.removeClass('active').animate({
left: -$this.width()
}, 500, animIn);
});
} else if (!$target.hasClass('active')) {
animIn();
} else if ($target.hasClass('active')) {
$target.removeClass('active').finish().animate({
left: -$target.width()
}, 500);
}
});
$(document).click(function(e){
var $target = $(e.target), $active = $('div.panel.active');
if($active.length && $target.closest('a.panel').length == 0 && $target.closest($active).length == 0){
$active.removeClass('active').finish().animate({
left: -$active.width()
}, 500);
}
})
});
Demo: Fiddle
DEMO
$(document).click(function (e) {
if (!$(e.target).hasClass('panel')) {
$('div.panel').removeClass('active').removeAttr('style').css('background', ' #e4e4e4');
}
});
or
DEMO
$(document).click(function (e) {
console.log($(e.target).hasClass('panel'));
if (!$(e.target).hasClass('panel')) {
$('div.panel.active').removeClass('active').finish().animate({
left: -$('#right').width()
}, 500);
}
});