http://jsfiddle.net/6jxQs/18/
this is my code, I want somehow to elements show one by one with timeout of 700ms.
Currently all elements are shows at once.
I tryied with setInterval and setTimeout functions bu without succes.
Can anyone help me or point me to some tutorial how I can do this?
Code:
<!DOCTYPE html>
<html>
<head>
<title>.::Efekat::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/stil.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$('.mydiv').css('opacity','0');
$("#demo").click(function(){
$("div").each(function(index){
var self = $(this);
self.not(':animated').css(
{'opacity': 0.8}
).effect(
"scale",
{
origin:['middle','center'],
from:{width:self.width()+20,height:self.height()+20},
percent: 100,
direction: 'both',
easing: "linear"
},
700,
function(){
$(this).animate({"opacity": 1})
});
});
});
});
</script>
</head>
<body>
<span id="demo">klikni!</span>
<div class="mydiv">Element 1</div>
<div class="mydiv">Element 2</div>
<div class="mydiv">Element 3</div>
<div class="mydiv">Element 4</div>
<div class="mydiv">Element 5</div>
</body>
</html>
Use jquery's delay()
$("div").each(function(index){
var self = $(this);
self.not(':animated').css(
{'opacity': 0.8}
).delay(700 * index)
.effect(
"scale",
{
origin:['middle','center'],
from:{width:self.width()+20,height:self.height()+20},
percent: 100,
direction: 'both',
easing: "linear"
},
700,
function(){
$(this).animate({"opacity": 1})
});
}, 100);
});
Related
Am trying to implement JQuery Counter Plugin but I'm getting an error:
dashboard:694 Uncaught TypeError: $(...).counterUp is not a function
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>
</head>
<body>
<div class="task-stat"><i class="icon-tasks"></i>Total tasks today<br><h2><span class="counter" data-counterup-time="1500" data-counterup-delay="30" data-counterup-beginat="100">{{$tasks->count()}}</span></h2></div>
<script>
$('.counter').counterUp({
delay: 10,
time: 1000,
offset: 70,
beginAt: 100,
formatter: function (n) {
return n.replace(/,/g, '.');
}
});
</script>
</body>
</html>
Please check this
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>
</head>
<body>
<div class="task-stat"><i class="icon-tasks"></i>Total tasks today<br><h2><span class="counter">1000</span></h2></div>
<script>
$('.counter').counterUp({
delay: 10,
time: 1000,
offset: 70,
beginAt: 100,
formatter: function (n) {
return n.replace(/,/g, '.');
}
});
</script>
</body>
</html>
Update your waypoints.min.js library version
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
If you have two calling of jquery.waypoints.min.js or jquery.counterup.min.js comment one of them in other's file's.
Hi i'm experimenting with the auto play function in owl carousel, however whenever i switch to another web tab in chrome and come back to my webpage with the carousel, it stops working unless i give it a drag on the image. Here's my html and jquery code:
<!DOCTYPE html>
<html>
<head lang="en">
<title>MySite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">
<script type="text/javascript" src="jquery.js"></script>
<script src="owl.carousel.min.js"></script>
</head>
<body>
<div class="owl-carousel">
<div> <img src="1.jpg"></div>
<div> <img src="2.jpg"></div>
<div> <img src="3.jpg"></div>
<div> <img src="4.jpg"></div>
<div> <img src="5.jpg"></div>
<div> <img src="6.jpg"></div>
</div>
<script>
$(document).ready(function(){
var owl = $(".owl-carousel")
owl.owlCarousel({
items:1,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:false
});
owl.trigger('play.owl.autoplay',[5000]);
});
</script>
</body>
</html>
You can try to use ifvisible.js
And try to use both .blur and .focus commands otherwise it won't work
This is implementation for my site
jQuery(window).ready(function(){
var owl = jQuery('.owl-carousel');
owl.owlCarousel({
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:2000,
dots:false,
responsive:{
0:{
items:2
},
620:{
items:3
},
992:{
items:4
},
1200:{
items:6
}
}
})
jQuery('.owl-carousel .owl-item').on('mouseenter',function(e){
jQuery(this).closest('.owl-carousel').trigger('stop.owl.autoplay');
})
jQuery('.owl-carousel .owl-item').on('mouseleave',function(e){
jQuery(this).closest('.owl-carousel').trigger('play.owl.autoplay',[2000]);
})
ifvisible.blur(function(){
owl.trigger('stop.owl.autoplay',[2000]);
});
ifvisible.focus(function(){
owl.trigger('play.owl.autoplay',[2000]);});
});
});
I hope this helps
Here is answer
$(window).on("blur focus", function(e) {
var prevType = $(this).data("prevType");
if (prevType != e.type) { // reduce double fire issues
switch (e.type) {
case "blur":
// do work
owl.trigger('stop.owl.autoplay');
break;
case "focus":
// do work
owl.trigger('play.owl.autoplay', [1000]);
break;
}
}
$(this).data("prevType", e.type);
});
try this it will work ENJOY :D
You can simply trigger the next slide button. It worked well for me:
$(window).on('focus', function () {
$('.owl-next').trigger('click');
});
I am first time JQuery user today. I have managed to figure out how to work it enough to do what I want, which is change the color of the background onhover of button.
Only problem is that there is no fadein effect. I have looked up the fadein function but am not sure how to implement it into what I have done so far because the syntax is very different from what I am used to. Can anyone help me figure out how to add the fadein function to my code?
Thanks! Looking forward to replies! :)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index.html</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bgcolor.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class='splash'>
<div id='logoblock'>
<img src='images/logo.png'>
</div>
<div id='menublock'>
<a href='#' id='jabout'><div id='about'></div></a>
<a href='#' id='jphoto'><div id='photo'></div></a>
<a href='#' id='jinfo' ><div id='info'></div></a>
</div>
<div id='quoteblock'
<p class=quote>"blah blah blah!"</p>
<p class=author>- John Doe</p>
</div>
</div>
</body>
</html>
bgcolor.js
// JavaScript Document
$(document).ready(function(){
$( "#jphoto" ).hover(
function() {
$('body').css('background', '#9dd5fc');
},
function() {
$('body').css('background', '#d4e88f');
}
);
$( "#jabout" ).hover(
function() {
$('body').css('background', '#ffaf3c');
},
function() {
$('body').css('background', '#d4e88f');
}
);
$( "#jinfo" ).hover(
function() {
$('body').css('background', '#ff3c3c');
},
function() {
$('body').css('background', '#d4e88f');
}
);
});
You need to use animate() to have animation effect, also need to have jquery UI/color library for background color animation to work
$("#jinfo").hover(function () {
$('body').animate({
'background-color': '#ff3c3c'
});
}, function () {
$('body').animate({
'background-color': '#d4e88f'
});
});
Demo: Fiddle
I am learning how to use jQuery dialog. One link I found helpful is http://imperavi.com/redactor/examples/uidialog/. The code is listed below, but I don't know why it does not work.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Dialog</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<p>Open</p>
<div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div>
<script type="text/javascript">
function showDialog()
{
$("#dialog-modal").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
autoresize: false,
initCallback: function()
{
this.set('<p>Lorem...</p>');
}
});
}
});
}
</script>
</body>
</html>
The dialog appears after adding jquery-ui and css, but "Lorem..." does not show.
One more thing... Is it possible to pass a string to "showDialog" such that it can show different content based on different link? For example, adding "Open 1" and "Open 2" to show different string?
I think, you forgot to add jquery UI.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Dialog</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="path_to_jq_ui"></script>
</head>
<body>
<p>Open</p>
<div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div>
<script type="text/javascript">
function showDialog(text)
{
$("#dialog-modal").html(text)
$("#dialog-modal").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
autoresize: false,
initCallback: function()
{
this.set('<p>Lorem...</p>');
}
});
}
});
}
</script>
</body>
</html>
Here is working fiddle: http://jsfiddle.net/bY3F4/3/
Download JqueryUI from here
Edit: Dynamic dialog content added to code
Dialog is a part of jQuery UI. You have to include it as well.
the Dialog is in the JQuery UI, you only required the JQuery.
insert this in the beginning:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Add jQuery UI Stylesheet
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />
Add jQuery + jQuery UI
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
I have a Bee image and I want to animate it using jQuery.
The idea is to move the image from left (outside of screen) to right (outside of screen) to create an effect like it's flying.
Your bee needs to be absolutely positioned, something like this:
<div id="b" style="position:absolute; top:50px">B</div>
I've used a div here, but it could just as well be an <img> tag. As meo pointed out, don't forget the top attribute, because some browsers don't work without it. Then you can animate it:
$(document).ready(function() {
$("#b").animate({left: "+=500"}, 2000);
$("#b").animate({left: "-=300"}, 1000);
});
Here is a jsfiddle demo.
If you want to have a continuous animation as Hira pointed out, put the animation code in functions, make sure the left and right movement is the same, and use the onComplete option of animate() to call the next animation:
function beeLeft() {
$("#b").animate({left: "-=500"}, 2000, "swing", beeRight);
}
function beeRight() {
$("#b").animate({left: "+=500"}, 2000, "swing", beeLeft);
}
beeRight();
And the fiddle for that.
Try spritely: http://spritely.net/
i would do something like this:
http://jsfiddle.net/Uwuwj/2/
var b = function($b,speed){
var beeWidth = $b.width();
$b.animate({ //animates the bee to the right side of the screen
"left": "100%"
}, speed, function(){ //when finished it goes back to the left side
$b.animate({
"left": 0 - beeWidth + "px"
}, speed, function(){
b($b, speed) //finally it recalls the same function and everything starts again
});
});
};
$(function(){ //document ready
b($("#b"), 5000); //calls the function
});
bee careful, this code only works with bee's :P
In case you want the bee to keep flying across the screen, try this :-)
<html>
<head>
<script type="text/javascript" src="jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function animateImage() {
console.log("Called");
$('#bee').css({right:'10%'});
$('#bee').animate({right: '-100%'}, 5000, 'linear', function(){animateImage();});
}
$(document).ready(function() {
animateImage();
});
</script>
</head>
<body>
<div style="width: 100%;"><img src="bee.jpg" id="bee" style="position:relative;"/></div>
</body>
<script type="text/javascript" src="jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function rgt() {
$('#sldr').animate({ left: "500" }, 10000, hider);
}
rgt();
function hider() {
$('#sldr').css('left', '0px');
rgt();
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="sldr" src="../Images/animated%20images/birds/rightfuglan.gif" style="position:absolute" />
</div>
</form>
</body
>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
var k = $(window).width();
function rgt() {
$('#sldl').hide(1);
$('#sldr').animate({ left: "1000" }, 10000, hider);
}
rgt();
function hider() {
$('#sldr').css('left', '0px');
$('#sldr').hide(1);
$('#sldl').show();
lft();
}
function lft() {
$('#sldl').animate({ left: "0" }, 10000, hidel);
}
function hidel() {
$('#sldl').css('left', '1000px');
$('#sldr').show();
rgt();
}
});
</script>
<style type="text/css">
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="sldl" src="../Images/animated%20images/birds/fuglan.gif" style="position:absolute; right:0px" />
<img id="sldr" src="../Images/animated%20images/birds/rightfuglan.gif" style="position:absolute" />
</div>
</form>
</body>`enter code here`