For a very specific project, I need my image captions to appear AND Disappear every X seconds. I managed to make them appear and disappear once, but I need to to "loop". Here's my code :
<figure>
<img src="http://url/image.jpg" alt="Write your image description here" width="400" height="600">
<figcaption class="test">Write your image caption here!</figcaption>
</figure>
Jquery :
document.createElement('figure');
document.createElement('figcaption');
window.setInterval(function(){$(document).ready(function(){
$('figcaption').css('top','600px');
$('figure')(function(){
$(this).find('figcaption').animate({'top':'600px'}, 2000, function(){});
},function(){
$(this).find('figcaption').animate({'top':'540px'}, 2000, function(){});
}
);
});
}, 500);
How can I do it ?
Thanks (a lot) in advance !
Try this:
setInterval(function () {
$('figcaption').fadeToggle();
}, 5000);
Fiddle
EDIT
Updated the fiddle to match your markup.
You certainly want to do something like that:
$(document).ready(function() {
var figcaption = $('figcaption');
setInterval(function() {
figcaption.hide().delay(5000).show();
}, 10000);
});
or:
document.createElement('figure');
document.createElement('figcaption');
$(document).ready(function() {
var figcaption = $('figcaption');
figcaption.css('top', '600px');
window.setInterval(function() {
figcaption
.animate({'top':'600px'}, 2000)
.delay(3000)
.animate({'top':'540px'}, 2000)
;
}, 10000);
});
window.setInterval(function() {
$('figcaption').slideToggle();
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
<img src="http://url/image.jpg" alt="Write your image description here" width="50" height="50">
<figcaption class="test">Write your image caption here!</figcaption>
</figure>
In your current code, you attach a new method to the document load event every half second. Instead, initialize the interval only once on document load:
$(document).ready(function(){
window.setInterval(function(){
$('figcaption').css('top','600px');
// This call below seems a bit weird. Not sure what you try to accomplish
$('figure')(
function(){
$(this).find('figcaption').animate({'top':'600px'}, 2000, function(){});
},
function(){
$(this).find('figcaption').animate({'top':'540px'}, 2000, function(){});
}
);
}, 500);
});
I'm not to sure about the code inside that function, but without more context I find it a bit hard to judge whether that will work or not.
Instead of hiding it completely through JavaScript, you can define a transition in CSS as well. You can call toggleClass to add and remove a CSS class to the element, or you can even define an infinite animation in CSS itself. This technique is asked for and demonstrated in this answer.
This is the function can do more than you expected:
function blink(elem, times, speed) {
if (times > 0 || times < 0) {
if ($(elem).hasClass("blink")) $(elem).removeClass("blink");
else $(elem).addClass("blink");
}
clearTimeout(function () {
blink(elem, times, speed);
});
if (times > 0 || times < 0) {
setTimeout(function () {
blink(elem, times, speed);
}, speed);
times -= .5;
}
}
And you can use it as:
$(document).ready(function () {
blink(".test", 4, 500);
});
See complete JSFiddle in: http://jsfiddle.net/jadendreamer/Nx4qS/
Hope this help.
Edit:
For using animate function see this post: How to create a jQuery button with blinking text without changing the background colour?
Related
I want to rotate an image every time I click on it.. I've created a function to do this but the image only rotate the first time I click on it... Moreover, once the image rotate it change automatically the width and height.. How can I keep the same width and height every time??
This is the function:
$(document).ready(function () {
$("img").click(function () {
$(this).rotate(45)
})
})
This can easily be done by using just javascript, working example would be like this
<div id="imgWrapper">
<img src="Desert.jpg" id="image" onclick="rotateBy10Deg(this)">
</div>
<script>
var delta =0;
function rotateBy10Deg(ele){
ele.style.webkitTransform="rotate("+delta+"deg)";
delta+=10;
}
</script>
The plugin converts the img into a canvas, that's the reason the click not working for second time. Change your jQuery or refer this demo
$(document).ready(function() {
$("img").click(function() {
$(this).rotate(45);
});
$('body').on('click', 'canvas', function() {
$(this).rotate(45);
});
});
I suggest setting max-height and max-width in your CSS file. This will ensure the image doesn't exceed a certain size.
This link might help you out:
Rotate image with onclick
Taken straight from that link in case you don't want to click:
Javascipt
var rotate_factor = 0;
function rotateMe(e) {
rotate_factor += 1;
var rotate_angle = (180 * rotate_factor) % 360;
$(e).rotate({angle:rotate_angle});
}
HTML
<img src='blue_down_arrow.png' onclick='rotateMe(this);' /></a>
I think the angle (45 degree) is calculated in reference to its initial angle that is 0. Once the image is in 45 degree it will only have to rotate if the angle changes (eg 90). So the below code may work
$(document).ready(function () {
var angle = 0;
$("img").click(function () {
angle = angle+45;
$(this).rotate(angle);
})
})
I did it as you suggested, I used css in JQuery:
css:
.rotate:active {
transform: rotate(180deg)
}
JQuery:
$(document).ready(function () {
$("img").click(function () {
//forcing img to rotate every time on click()
if ($(this).css("transform")=='none') {
$(this).css("transform", "rotate(180deg)");
}
else {
$(this).css("transform","")
}
})
})
I recently wanted to make a element in a div with the ID of "test" to have a "blink" effect like most text editors have where the cursor is hidden and then shown, then hidden and shown....(in a loop) I tried to recreate this effect but just couldn't get it to work. Please help!
Here is some code:
<div id="test">
<p> _ </p>
</div>
Something like this?
setInterval(function(){
$("#test p").toggle();
},3000);
blinks every 3 seconds.
Here's a concise, pure JavaScript way.
blink = setInterval(function () {
element = document.querySelector("#test p");
element.style.opacity = (element.style.opacity == 1 ? 0 : 1);
}, 500);
If you want to stop it, run clearInterval(blink).
Here's a working fiddle.
FIDDLE
setInterval(function(){
$("#test p").toggle();
},300);
Here is an example using Javascript
setInterval(function(){
var elem = document.querySelector("#test p");
if(isVisible(elem)) {
elem.style.display = 'none';
} else {
elem.style.display = 'block';
}
},500);
function isVisible(elem) {
return elem.offsetWidth > 0 || elem.offsetHeight > 0;
}
(Though knouroozi's answer will stop the contents from shifting around, so I'd suggest that.)
With JQuery it becomes simpler:
setInterval(function(){
$('#test p').toggle();
},500);
(stckrboy's answer covers toggling visibility, rather than 'display', which will prevent the content from shifting around.)
Here's an example using jQuery and setInterval
$(".crsr").each(function(){
var elem=$(this);
setInterval( function() {
if(elem.css('visibility')=='hidden') {
elem.css('visibility','visible')
} else {
elem.css('visibility','hidden')
}
},500)
});
jSFiddle
Throwing my approach into the ring. :) Set up a class that changes the visibility to hidden and then use setInterval and toggleClass to toggle the class off and on.
HTML
<div id="blinkingText">
Blink for me!
</div>
CSS
<style>
.blinkOn {visibility: hidden;}
</style>
JS
<script type="text/javascript">
$(document).ready(function(){
setInterval(function() {
$("#blinkingText").toggleClass("blinkOn");
},1000);
});
</script>
I would like to make some changes on a code and add some more options:
1- Rotate the images with the description of each one as well as the link,
2- Add the effect fadeOut while the image is disappearing.
Here is my little code:
var images = new Array ('BMW.png', 'Maybach.png', 'Mercedes-Benz.png', 'Mini.png', 'Jaguar.png', 'Toyota.png');
var descs = new Array ('BMW', 'Maybach', 'Mercedes-Benz', 'Mini', 'Jaguar', 'Toyota');
var links = new Array ('www.url1.com', 'www.url2.com', 'www.url3.com', 'www.url4.com', 'www.url5.com', 'www.url6.com');
var index = 1;
function rotateImage()
{
$('#myImage').fadeOut('fast', function()
{
$(this).attr('src', images[index]);
$(this).fadeIn(2000, function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
$(document).ready(function()
{
setInterval (rotateImage, 7000);
});
</script>
</head>
<body>
<div id="test">
<a href="www.url1.com">
<img class="rotate" id="myImage" src="BMW.png" width="800" height="300" alt="image test" />
</a>
<div class="rotate" id="myDesc" style="margin-top: -30px; margin-left: 30px;"></div>
</div>
uhm... something like this?
(Array is ZERO base so... initial index is 0 [with 1 you start with "Maybach.png" not "BMW.png" ]).
"Add the effect fadeOut while the image is disappearing" - if the image is disappearing is already doing a fade out... you should explain this point...
However...
var images = ['http://placehold.it/150x100', 'http://placehold.it/120x150', 'http://placehold.it/90x120', 'http://placehold.it/100x100', 'http://placehold.it/100x150', 'http://placehold.it/150x100'],
descs = ['BMW', 'Maybach', 'Mercedes-Benz', 'Mini', 'Jaguar', 'Toyota'],
links = ['www.url1.com', 'www.url2.com', 'www.url3.com', 'www.url4.com', 'www.url5.com', 'www.url6.com'],
index = 0; //start from first image
function rotateImage()
{
$('#test').fadeOut('fast', function() //fadeout all block (if display none collapse your graphics use animate and "opacity") to hide without change display
{
$(this).find("a").attr('href', links[index]); //add href to url
$(this).find("img").attr('src', images[index]); //add src to image
$(this).find("#myDesc").text(descs[index]); //add description in desc div
$(this).delay(500).fadeIn(2000, function() //delay (a little bit) to wait image load (for bigger image you need longer delay)
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
$(document).ready(function()
{
rotateImage(); //fire first time and then use Setinterval for loop
setInterval (rotateImage, 7000);
});
Example HERE jsfiddler
I hope this can help.
Simple image preload:
<img src="path/placeholder.gif" data-src="path/realImage.jpg" style="display:none" />
so the image that be loaded is a gif of trasparent singol pixel. when you need to preload you only need to place data-src in src and than show image... (do this when the prev image of your animation was displayed for prevent the load gap when this image will display)
I want to make one image pause for 9 secs and the other pause for 3 secs with this simple jquery slideshow
<script>
$(function(){
$('.fadein2 img:gt(0)').hide();
setInterval(function(){$('.fadein2 :first-child').fadeOut(2500).next('img').fadeIn(2500).end().appendTo('.fadein2');}, 9000);
});
</script>
html
<div class="fadein" >
<img src="1.jpg" >
<img src="2.jpg">
</div>
not exactly sure what you want to do, but I think you want this.
http://api.jquery.com/delay/
Do you mean something like thisthisthis?
function changeBackground() {
$(".fadein2 img").first().fadeIn("slow", function showNext() {
var next = $(this).next('img').length ? $(this).next('img') : $(".fadein2 img").first();
$(this).siblings().fadeOut('slow').delay(3000);
next.fadeIn("slow", showNext).delay(9000);
});
}
$(function() { // starts when page is loaded and ready
setTimeout(changeBackground, 0);
})
jsFiddle using just images, not set as background
I'm trying to hide the mouse if it hasn't moved for a period of time.
This is the code I'm using:
$(document).ready(function() {
var j;
$(document).mousemove(function() {
clearTimeout(j);
$('html').css({cursor: 'default'});
j = setTimeout('hide();', 1000);
});
});
function hide() {
$('html').css({cursor: 'none'});
}
When the hide() function is called the cursor is hidden, but unhides a split second later. Any help is appreciated.
Your initial problem is that the hiding of the mouse triggers mousemove and thus immediately resets it back to default. So you could solve that like this...
var justHidden = false;
$(document).ready(function() {
var j;
$(document).mousemove(function() {
if (!justHidden) {
justHidden = false;
console.log('move');
clearTimeout(j);
$('html').css({cursor: 'default'});
j = setTimeout('hide();', 1000);
}
});
});
function hide() {
$('html').css({cursor: 'none'});
justHidden = true;
}
...BUUUUUT...
You face a problem here which at the moment seems unsolvable to me. That is, a hidden mouse does not trigger mousemove ever, so once it's hidden you will not be able to unhide it as far as I can tell.
I'll keep investigating to see if there's a solution I'm missing.
I found this thread when I was looking for solution for this challenge in 2019. Based on answer here and in 'Hiding the mouse cursor when idle using JavaScript' I made a slightly different solution:
var DEMO = {
INI: {
MOUSE_IDLE: 3000
},
hideMouse: function() {
$("#game").css('cursor', 'none');
$("#game").on("mousemove", DEMO.waitThenHideMouse);
},
waitThenHideMouse: function() {
$("#game").css('cursor', 'default');
$("#game").off("mousemove", DEMO.waitThenHideMouse);
setTimeout(DEMO.hideMouse, DEMO.INI.MOUSE_IDLE);
},
showMouse: function() {
$("#game").off("mousemove", DEMO.waitThenHideMouse);
$("#game").css('cursor', 'default');
},
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This simple and clear example gives you the option to start hiding mouse (DEMO.hideMouse()) and also to turn this off (DEMO.showMouse()). It does not create multiple events on same element. This example shows hiding mouse pointer over #game div element. Just change this to the div of your choice or body.
As of fully updated Chrome and FF in October 2019: it works on both.
I'm 8 years late but I have a solution:
• First of all download an image of a cursor from the internet or copy my svg code:
<svg id="cursor" width="20" height="20" viewBox="0 0 95 92" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M84.6925 46.0105L40.25 20.3516C35.25 17.4648 29 21.0733 29 26.8468L29 78.1645C29 84.9879 37.3721 88.2664 42.0056 83.2575L58.1424 65.8134C58.4853 65.4427 58.9324 65.1846 59.4249 65.0729L82.6003 59.8201C89.255 58.3118 90.6017 49.4222 84.6925 46.0105Z" fill="black" stroke="white" stroke-width="5"/></svg>
And add it to your html file.
•Of course, if you want to made it in jQuery, you need to add this script above your js file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
•Then add this (in your JavaScript file):
let timedelay = 1;
function delayCheck() {
if (timedelay == 2) { //Here you can change this value which changes the time it takes the mouse to hide
$('#cursor').fadeOut();
timedelay = 1;
}
timedelay += 1;
}
$(document).mousemove(function() {
$('#cursor').fadeIn();
timedelay = 1;
clearInterval(_delay);
_delay = setInterval(delayCheck, 1000);
});
_delay = setInterval(delayCheck, 1000);
Now you'll see just a cursor on the top left of the screen that does what you asked but it's not YOUR cursor, to replace the cursor with the svg do the following:
//in the same js file as before
$(document).mousemove(function (e) {
$('#cursor').offset({
left: e.clientX,
top: e.clientY
});
});
/* on the css */
html {
cursor: none;
}
If it doesn't work, make sure that you put the jquery file ABOVE the file you wrote.
I hope I have helped someone!
You might want to check if this really works, here's the demo.
(Sorry if my English was bad, I'm italian).
(Tip) You will notice that there are two identical functions, if you want to merge them just replace them with this:
$(document).mousemove(function(e) {
$('#cursor').fadeIn();
timedelay = 1;
clearInterval(_delay);
_delay = setInterval(delayCheck, 1000);
$('#cursor').offset({
left: e.clientX,
top: e.clientY
});
});