I have this JavaScript to make the div flash every two seconds. I was wondering if I could add anything into this current function so that the div fades in and out instead of appearing and disappearing with no transition.
JavaScript
<script language = "javascript">
function flash()
{
var blinker = 2000
var timeIn = setInterval(function() {
var element = document.getElementById('sign');
element.style.visibility = (element.style.visibility == 'hidden' ? '' : 'hidden');
}, blinker);
}
</script>
HTML div
<div class = "sign" id = "sign">
<p> hello </p>
</div>
Since you've tagged jQuery, you can simplify it to:
$('#sign').fadeIn(2000); // fade-in in 2 seconds
and
$('#sign').fadeOut(2000); // fade-out in 2 seconds
or as pointed out by user: Bondye
function flash() {
$('#sign').fadeToggle(2000);
}
If you want it to continue fading in and out.. you could try something like this:
function keepFading($obj) {
$obj.fadeToggle(2000, function () {
keepFading($obj)
});
}
keepFading($("#sign"));
See working example in Fiddle
This function would then work on any jquery object you pass it. So if you have something else you want to do the same thing you can just call it like keepFading($("#someOtherEle"));
For this to work, you'll need to make sure that jquery is included. You can then put the above code at the bottom of your html... or in your head if you wrap in a $(document).ready( ... )
You can implement fadeIn and fadeOut on pure javascript:
function fadeOut(id,val){
if(isNaN(val)){
val = 9;
}
document.getElementById(id).style.opacity='0.'+val;
//For IE
document.getElementById(id).style.filter='alpha(opacity='+val+'0)';
if(val>0){
val–;
setTimeout('fadeOut("'+id+'",'+val+')',90);
}else{
return;
}
}
function fadeIn(id,val){
// ID of the element to fade, Fade value[min value is 0]
if(isNaN(val)){
val = 0;
}
document.getElementById(id).style.opacity='0.'+val;
//For IE
document.getElementById(id).style.filter='alpha(opacity='+val+'0)';
if(val<9){
val++;
setTimeout('fadeIn("'+id+'",'+val+')',90);
}else{
return;
}
}
Here's a FIDDLE
setInterval(function() {
$('.sign').animate({ opacity: '0' }, 800).animate({ opacity: '1' }, 800);
}, 2000);
It is also possible to fadeToggle with jQuery. See details here:
http://api.jquery.com/fadeToggle/
<script>
function flash(id) {
$('#'+id).fadeToggle();
}
var blinker = 2000;
var timeIn = setInterval(function() {
flash('sign');
}, blinker);
</script>
Related
I set a click on some divs. When I click on them, the click either doesn't work or doesn't work immediately.
I've a carousel. The carousel has a background image that's determined by a css class. There are also divs inside the carousel that have a class. I'm attaching a fadein class to the inside divs to give a cross-fading effect. This works.
If I click a div immediately after page load, everything works. However, after the first carousel cycle completes, I have to click a div several times before the click takes, if it does.
After a lot of trial and error, I determined that ".addClass('fadein')" causes the problem. Removing that restores my clicks on the first try.
This is strange to me because I'm not adding it to anything that's a click.
Here's a snippet of my code. My HTML:
<div id="slider-wrapper" class="videos-set-1">
<div id="ss-video-1" class="video-selection video-display-top"></div>
<div id="ss-video-2" class="video-selection video-display-left"></div>
<div id="ss-video-3" class="video-selection video-display-right"></div>
</div>
My css:
#slider-wrapper.fadein.videos-set-3 .video-display-top,
#slider-wrapper.fadein.videos-set-3 .video-display-left,
#slider-wrapper.fadein.videos-set-3 .video-display-right {
visibility: hidden;
opacity: 0;
transition: visibility 0s 1s, opacity 1s linear;
}
And my jQuery:
var activeIndex = 0;
var play;
var carouselItems = $('#slider-wrapper .video-selection');
var panelsTotal = carouselItems.length;
var videoGallery = $('.container-videos');
var animateScreensaver = true;
$(function() {
function animateCarousel(n) {
if(!animateScreensaver) return;
if((n > activeIndex && n < panelsTotal) || (n < activeIndex && n >= 0)) {
if(carouselItems.eq(n)) {
$('#slider-wrapper').removeClass().addClass('videos-set-' + (n+1)).addClass('fadein');
}
}
setTimeout(function () {
$('#slider-wrapper').removeClass('fadein');
}, 3000);
activeIndex = n;
}
function playScreensaver() {
animateScreensaver = true;
play = setInterval(function() {
if(activeIndex >= panelsTotal-1) {
animateCarousel(0);
} else {
animateCarousel(activeIndex+1);
}
}, animateDuration);
}
function showScreensaver() {
animateScreensaver = true;
playScreensaver();
}
function playVideo(video) {
// play video stuff
}
var autoStart = setTimeout(function() {
playScreensaver();
});
$('.video-selection').on('click', function() {
var thisVideo = $(this).attr('id');
if(!animateScreensaver) {
showVideoGallery(thisVideo);
} else {
animateScreensaver = false;
playVideo(thisVideo);
}
});
})
I'd like to keep the cross-fade, but, after a couple hours of attempting to resolve this, I'm prepared to go without. I read through other SO answers, but they seem different from my issue, as they're adding a class to a click handler, and I'm not.
If someone could point me in the right direction, I can take it from there.
Thanks.
I'm not sure that my solution can solve your problem or not.
But from my experience, click event of Jquery have to write in ready event.
Example:
//this is ready event
$(document).ready(function() {
//add your click function here
});
so i've made a jquery carousel which you can see here: http://teste.boleiafacil.com/ (it's the one in the end of the page
this is the jquery:
//highlights slide animation
var prdlength = $(".rproducts").length;
var prdleft = 1;
var i = 0;
function swapC() {
i++;
prdleft++;
$(".rproducts").each(function(){
$(this).animate({"left":"-" + prdleft + "px"}, 10);
if (prdleft == 180){
$(this).appendTo(".rproductswrapper");
prdleft = 0;
}
});
if (i == prdlength) {
i = 0
}
window.setTimeout(function() { swapC() }, 10);
}
$(window).on("load", swapC);
the problem is when the divs get appended to the end of the wrapper it looks glitchy.
how can i fix this?
Try wrapping your function in a document ready rather than window load, the shorthand for it is:
$(function(){
//code here
});
html head:
<script type="text/javascript" language="JavaScript">
function getStyle() {
var temp = document.getElementById("cont").style.display;
return temp;
}
function switch01() {
var current = getStyle();
if (current == "none") {
document.getElementById("cont").style.display = "block";
}
else {
document.getElementById("cont").style.display = "none";
}
}
</script>
body:
CONTENT
CSS:
#cont{
display: none;
}
After loading the page - first click doesn't work. After the first click - everything works.
Also, How could I show/hide the div slowly (with sliding effect, not momentally) ?
The value you get for the first time is "undefined".
You can:
1) Set the value via javascript when page loads;
document.getElementById("cont").style.display = "none";
or
2) decode "undefined" value to none, because you know that at first the value will be none;
var temp = document.getElementById("cont").style.display;
if (temp == "undefined")
temp = "none";
return temp;
both pretty ugly solutions, but they work.
If it must be inline you need to do this DEMO
CONTENT
and this (reversing the test for none to be a test for not block)
<script type="text/javascript" language="JavaScript">
function switch01(objId) {
var current = document.getElementById(objId).style.display;
document.getElementById(objId).style.display=(current!="block")?"block":"none";
return false
}
</script>
The above ANSWERS your question
UPDATE: Since it seems you would like jQuery instead, here is how you need to code that - notice the return false which Michal missed.
CONTENT
$(function() { // wait for the page to load
$('#toggle').on("click",function(e) { // when link clicked
$('#cont').slideToggle(); // slide open or closed
return false; // or e.preventDefault(); // stop the click executing the href
});
});
If you want the slide effect, my recommendation is using jQuery:
$('#toggle').click(function() {
$('#cont').slideToggle();
});
See this DEMO.
For changing the sliding speed and more information see documentation.
For hiding the div.. you can take a look at
$('cont').hide(); function.
More relevant Information is available here :
http://api.jquery.com/hide/
http://api.jquery.com/show/
And for sliding effect Jquery is top notch in this department. You just have to pass the argument as given below.. and it does the work.
$("cont").click(function () {
$(this).hide("slide", { direction: "down" }, 1000);
});
FYI : http://docs.jquery.com/UI/Effects/Slide
Currently I am developing a simple show/hide div function with JavaScript. Now I have made it partially work. Take a look or you can copy and paste and try my code on your com. Here is the code:
http://jsfiddle.net/HRn3Q/
The current problem is I don't know how to trigger the content in the drop down list and show/hide it at the same position as graph1, graph2 and graph3 etc...I also want something like when diagram 1 is being shown then when I click show div 2, the content of diagram 1 will be replaced by graph2. I hope I have state my question clear.
This should do it.
The page wasn't recognizing the functions in that state for some reason.
turned:
function toggleStock(id)
{
}
into:
toggleStock = function(id)
{
}
http://jsfiddle.net/HRn3Q/
<script>
var opacity =0;
var intervalId =0;
function fadein()
{
intervalId = setInterval(hide,200)
}
function hide()
{
var img = document.getElementById("img1");
opacity = Number(window.getComputedStyle(img).getPropertyValue("opacity"));
if(opacity>0)
{
opacity=opacity-0.2;
img.style.opacity=opacity;
}
else
{
clearInterval(intervalId);
}
}
function fadeout()
{
intervalId = setInterval(show,200)
}
function show()
{
var img = document.getElementById("img1");
opacity = Number(window.getComputedStyle(img).getPropertyValue("opacity"));
if(opacity<1)
{
opacity=opacity+0.1;
img.style.opacity= opacity;
}
else
{
clearInterval(intervalId);
}
}
</script>
I want to make a loop in my function so that the slideshow effect always restarts.
Here's my fiddle : http://jsfiddle.net/Be67B/
It's all good for the image 1 to go to image 2, but I want it to fade it back to the image 1, and then go the image 2, and so on...to always loop like that.
What do I need to add in my code to make this work?
Don't use a loop, just ask the browser to repetitively call your animation step :
setInterval(function(){
// your animation (in fact just a step)
}, someDelay);
Demonstration : http://jsfiddle.net/dystroy/nPh6S/
In this precise case, the animation is done with :
setInterval(function(){
$("#top").fadeOut(function() {
$(this).attr("src","http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png").fadeIn().delay(1000).fadeOut(function(){
$(this).attr('src', 'http://coreldrawtips.com/images/applebig.jpg').fadeIn().delay(1000);
});
}
);
}, 4000);
see this jquery cycle plugin:
http://jquery.malsup.com/cycle/
may be this is what you want
You can create a function that does the transition, which has a callback function as part of the fadeIn method that will call back to itself to trigger the next transition, and it would just be in a constant loop.
Here's your modified jsfiddle:
http://jsfiddle.net/Be67B/1/
HTML:
<img id="top" src="http://coreldrawtips.com/images/applebig.jpg" width="300" height="300" />
Javascript:
$(document).ready(function(){
transition(false);
});
function transition(first)
{
var src = first ? "http://coreldrawtips.com/images/applebig.jpg" : "http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png";
$("#top").delay(1000).fadeOut(function() {
$(this).attr("src",src).fadeIn(function() {
transition(!first);
});
});
}
I just made this code:
$(document).ready(function(){
// images in the pool
var images=["http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu- I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png",
"http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png"];
// next image to display
var next = 0;
// interval beetween images
var INTERVAL = 1000;
// main function
var doCarrousel = function() {
$("#top").fadeOut(function() {
$(this).attr("src", images[next]).fadeIn(
function() {
setTimeout(doCarrousel, INTERVAL);
});
});
if (++next >= images.length)
next = 0;
};
//start carrousel
doCarrousel();
});
fiddler: http://jsfiddle.net/Be67B/
I would use a plugin. But you can do it by hand. I just recommend against changing the src of the images, because some browsers don't handle it very well, like safari not firing load event.
Instead, have all images inside a container, and cycle their visibility:
$(document).ready(function(){
var currentImage = $("#images img:first");
setInterval(function(){
currentImage.fadeOut();
if(currentImage.next().size())
currentImage = currentImage.next();
else
currentImage = currentImage.siblings().first();
currentImage.fadeIn();
}, 1000)
});
See fiddle: http://jsfiddle.net/Be67B/2/
Quick and dirty: jsFiddle example
function swap(img) {
img = (img == 'http://coreldrawtips.com/images/applebig.jpg') ? 'http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png' : 'http://coreldrawtips.com/images/applebig.jpg';
$('#top').delay(2000).fadeOut(function() {
$(this).attr('src', img)
}).fadeIn(function() {
setTimeout(function() {
swap(img)
}, 1000);
});
};
swap($('#top').attr('src'));