I know flashing text is banned at many places but still as my client requires it, I need to flash one line of text using HTML, JavaScript which ever is feasible. I would like the text to appear and disappear within seconds and continue this cycle.
I know text-decoration:blink in CSS can do this but it only works in FireFox, Opera. And I need this to work in all browsers Firefox, Chrome, Safari, IE. I have searched and tried a lot of Javascript codes but none seem to be working.
So any one who knows how to do this, please post a working version of code which does flash the text in all browsers.
var blink_speed = 1000; // every 1000 == 1 second, adjust to suit
var t = setInterval(function () {
var ele = document.getElementById('myBlinkingDiv');
ele.style.visibility = (ele.style.visibility == 'hidden' ? '' : 'hidden');
}, blink_speed);
<div id="myBlinkingDiv">Hello World, blinking is back!</div>
I feel dirty.
You can do something like this:
<div id="Foo">Blink</div>
With the script:
$(document).ready(function() {
var f = document.getElementById('Foo');
setInterval(function() {
f.style.display = (f.style.display == 'none' ? '' : 'none');
}, 1000);
});
Sample: http://jsfiddle.net/7XRcJ/
If you're not using jQuery, you can try something like this:
window.addEventListener("load", function() {
var f = document.getElementById('Foo');
setInterval(function() {
f.style.display = (f.style.display == 'none' ? '' : 'none');
}, 1000);
}, false);
Various browsers have different ways of binding event handlers, so I would strongly suggest using some sort of cross-browser library for this sort of thing if possible.
You can also try using the onload event in the body tag. Here's a full example that I've tested in FF and IE7:
function blink() {
var f = document.getElementById('Foo');
setInterval(function() {
f.style.display = (f.style.display == 'none' ? '' : 'none');
}, 1000);
}
<html>
<body onload="blink();">
<div id="Foo">Blink</div>
</body>
</html>
if you use jQuery you can do something like
<div id="msg"> <strong>This will blink</strong> </div>
<script type="text/javascript" />
function blink(selector){
$(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this);
});
});
}
$(function() {
blink('#msg');
});
</script>
Have a look at this snippet.
function blinkIt() {
var blinks = document.getElementsByClassName("blink");
for(var i = 0, l = blinks.length; i < l; i++){
var blink = blinks[i];
var visiblity = blink.style.visibility;
blink.style.visibility = visiblity == 'visible' ? 'hidden' : 'visible';
}
}
setInterval(blinkIt, 500 /* blinking interval in ms */);
This solution will make all elements with class blink blinking.
EDIT: Tested on Firefox, Chrome and IE9.
Using JavaScript and the Web Animation API!
elem.animate([{opacity:0},{opacity:1}],{duration:300,iterations:Infinity})
<h1 id="elem">WTF</h1>
Using CSS #keyframes!
#elem {
animation: blink 0.3s infinite
}
#keyframes blink {
from {
opacity: 0
}
to {
opacity: 1
}
}
<h1 id="elem">WTF</h1>
If you really have to do this then you can use the blink plugin for jQuery
http://www.antiyes.com/jquery-blink-plugin
$(document).ready(function() {
$('.blink').blink(); // default is 500ms blink interval.
//$('.blink').blink({delay:100}); // causes a 100ms blink interval.
});
You could make the text blink via jquery. Put the text you want to blink in a <blink> tag and the javascript below will make it blink. Increase the duration below if it blinks too fast.
<script type="text/javascript">
setInterval(function(){
$('blink').each(function(){
$(this).css('visibility' , $(this).css('visibility') === 'hidden' ? '' : 'hidden')
});
}, 250);
</script>
<blink>Text to blink here</blink>
You can use something like this
<html>
<head>
<style>
#blink{
color:black;opacity:1;font-size:3EM;
}
</style>
</head>
<body>
<div id="blink">
Poop
</div>
<script>
var ops,blink=document.getElementById('blink');
ops=1
setInterval(function (){
ops = (ops < 1) ? 1:0;
blink.style.opacity=ops;
},500);
</script>
</body>
function blink() {
var f = document.getElementById('Foo');
setInterval(function() {
f.style.display = (f.style.display == 'none' ? '' : 'none');
}, 1000);
}
<html>
<body onload="blink();">
<div id="Foo">Blink</div>
</body>
</html>
CSS:
.hidden { visibility: hidden; }
JS:
setInterval(blinkFunc, 200)
blinkFunc = function () {
var selector = '#some-selector';
jQuery(selector + ':visible').addClass('hidden');
jQuery(selector + ':not(:visible)').removeClass('hidden');
}
That's probably the most cross-browser. Note that Webkit does some crazy stuff with visibility so it might be easier to just change the color.
Related
I have a loading page that I used javascript to make. I would like to be able to fade-out the loading page as the index.html fades in. I understand this can easily be done with jQuery, but would like to not use jQuery since I have yet to use it on this site. I understand this may be a common question, but I have not been able to tailor other answers to my solution since most use jQuery.
I am thinking to edit the opacity of the loading element onReady. Or could I do this with simple CSS?
Javascript:
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);
});
HTML:
<div id="loading">
<div class="logo">
Logo
</div>
<span class="loading-center-cross"></span>
<h3>Loading...</h3>
</div>
<div id="page">
.....
</div>
I expect for the loading screen to fade to the index.html as previously described. Thanks for all the help!
You can do this with CSS, using something like the following:
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).classList.toggle('fade-in-out', value);
}
onReady(function () {
show('page', true);
show('loading', false);
});
And have the following CSS:
#page,
#loading {
transition: opacity 1s;
}
.fade-in-out {
opacity: 0;
pointer-events: none;
}
That way, the show() function will toggle a class of fade-in-out based on value, and there will be a transition to 'fade' the div in and out, with an addition of pointer-events: none to make the div non-interactive whist transitioning.
So, I'm trying hard to speed up my page (by avoiding some requests) and wonder if anyone knows how to keep the following code working without having to load the whole JQuery library:
$("#div1").click(function () {
$("#div2).hide();
$("#div3").fadeIn();
})
Ofcourse this code needs a JQuery library to work, but it's heavier than my page itself.
Is there a way,somewhere, to just select the code needed from the library and insert it inline (in my html)?
Thank You,
CSS3 #keyframes is a clean way to do what you want without jQuery. Have a look at this thread, which has a demo. It actually runs smoother than jQuery's fadeIn.
Here's an example using CSS for the fade and plain Javascript for triggering the changes:
document.getElementById('div1').onmousedown = function() {
addClass('div2', 'hide');
addClass('div3', 'show');
}
function addClass(id, className) {
var el = document.getElementById(id);
if (el.classList)
el.classList.add(className);
else
el.className += ' ' + className;
}
#div2.hide {
display: none;
}
#div3 {
opacity: 0;
transition: 0.3s opacity ease;
}
#div3.show {
opacity: 1;
}
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
If you aren't set on using jQuery you could just use normal JS, something along these lines:
document.getElementById('div1').onclick(function() {
document.getElementById('div2').style.visibility = 'hidden';
document.getElementById('div3').style.visibility = 'visible';
});
disclaimer there are better ways to do these DOM manipulations, this is an example!
The fadeIn function taken from here.
function fadeIn(el) {
el.style.opacity = 0;
var tick = function() {
el.style.opacity = +el.style.opacity + 0.01;
if (+el.style.opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
}
};
tick();
}
document.getElementById("div1").onmousedown = function () {
document.getElementById("div2").style.display = 'none';
fadeIn(document.getElementById("div3"));
};
This only works on single selectors and not multiple elements at once, and it's not going to work for any other jQuery functions. For your situation it will allow a drop in replacement so you don't require an extra library.
$ = function(selector) {
return document.querySelector(selector);
}
HTMLElement.prototype.hide = function() {
this.style.visibility = "hidden";
this.style.opacity = 0;
}
HTMLElement.prototype.fadeIn = function() {
this.style.display = "block";
this.style.visibility = "visible";
this.style.opacity = 1;
}
For the fadeIn() animation you can add a CSS property to your element. This is set to 400ms just like jQuery's effect:
transition: opacity .4s ease;
The JavaScript below causes some text to blink on a web page. When I use it with an anchor tag on Blogger it only acts like a link and does not blink. If it is not an anchor tag it will blink. Is there any way to get around this on Blogger?
<html>
<head>
<script type="text/javascript">
function blinker()
{
if(document.getElementById("blink"))
{
var d = document.getElementById("blink") ;
d.style.color= (d.style.color=='red'?'white':'red');
setTimeout('blinker()', 500);
}
}
</script>
</head>
<body onload="blinker();">
<div id="blink">GOOGLE</div>
</body>
</html>
function blinker() {
if (document.getElementById("blink")) {
var d = document.getElementById("blink");
d.style.color = (d.style.color == 'red' ? 'white' : 'red');
setTimeout('blinker()', 500);
}
}
blinker();
GOOGLE
<div id="blink">GOOGLE</div>
<script type="text/javascript"> function blinker() {
if(document.getElementById("blink"))
{
var d = document.getElementById("blink") ;
d.style.color= (d.style.color=='red'?'white':'red');
setTimeout('blinker()', 500);
} } </script>
<body onload="blinker();">
<div id="blink"> GOOGLE</div> </body>
Basically, you need to add an href element.
Finally found answer myself
<script type="text/javascript">
function blinker()
{
if(document.getElementById("blink"))
{
var d = document.getElementById("blink") ;
d.style.color= (d.style.color=='red'?'white':'red');
setTimeout('blinker()', 500);
}
}
</script>
<body onload="blinker();">
<div id="blink">GOOGLE</div>
</body>
Thanks everybody for helping
Maybe try this. It uses JavaScript to treat the div a link. Looks like StackOverflow blocks that though, which is understandable. It should still work for you on other pages. Note however that the user won't see what's on the other side if they hover their mouse over it, and the cursor won't change to indicate it is clickable.
function blinker() {
if (document.getElementById("blink")) {
var d = document.getElementById("blink");
d.style.color = (d.style.color == 'red' ? 'white' : 'red');
setTimeout('blinker()', 500);
}
}
function goto(page) {
document.location = page;
}
blinker();
<div onclick="goto('https://www.google.com/')" id="blink">GOOGLE</div>
I have the following simple demo here: https://tinker.io/8e585/1. I have attached code below.
Initially, the contents of both 'Test 1' & 'Test 2' are closed.
However, when clicked, they open. I would like it, if when one is open and then clicked it closes. So, if open AND clicked = close. Is this possible?
Many thanks for any helpers with this :-)
..
HTML
<div class="grid_4">
<h2 style="margin-bottom:4px">Test 1</h2>
<div class="newboxes2" id="newboxes6">
<p>bla 1</p>
</div>
</div>
<div class="grid_4">
<h2 style="margin-bottom:4px">Test 2</h2>
<div class="newboxes2" id="newboxes7">
<p>bla 2</p>
</div>
</div>
CSS
.newboxes2 {display:none}
jQuery
function slideonlyone(thechosenone) {
$('.newboxes2').each(function(index) {
if ($(this).attr("id") == thechosenone) {
jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_onstate.png');
$(this).slideDown(200);
}
else {
jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
$(this).slideUp(600);
}
});
}
You can simply use a class to do it:
https://tinker.io/8e585/12
function slideonlyone(thechosenone) {
$('.newboxes2').each(function(index) {
if (this.id == thechosenone) {
if($(this).is('.active') )
$(this).removeClass('active').slideUp(600);
else
$(this).addClass('active').slideDown(200);
}
else
$(this).removeClass('active').slideUp(600);
if($(this).is('.active') )
jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_onstate.png');
else
jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
});
}
everything should be a lot easier then you think. you should remove your inline javascript event-handler. and use the jquery-toggle-mechanism:
then your javascript code could become as short as this:
$('.grid_4').bind('click', function () {
$(this).find('.newboxes2').slideToggle(200);
});
see the updated tinker for an example: https://tinker.io/8e585/4
if you want your slideDown to be faster (200) than your slideUp (600), you could lookup the current display property:
var duration, $newboxes2;
$('.grid_4').bind('click', function () {
$newboxes2 = $(this).find('.newboxes2');
duration = $newboxes2.css('display') === 'none' ? 200 : 600;
$(this).find('.newboxes2').slideToggle(duration);
});
tinker thats working here: https://tinker.io/8e585/5
code with your imageswap. this code could even be 1 or 2 lines shorter (the if-else), but i leave it like that, to make it easier to read for you:
var duration, $newboxes2, imgSrc, imgBase = '/wp-content/themes/boilerplate/images/';
$('.grid_4').bind('click', function () {
$newboxes2 = $(this).find('.newboxes2');
if ($newboxes2.css('display') === 'none') {
duration = 200;
imgSrc = imgBase + 'image_corner_btn_onstate.png';
} else {
duration = 600;
imgSrc = imgBase + 'image_corner_btn_offstate.png';
}
$(this).find('img.small').attr('src', imgSrc);
$(this).find('.newboxes2').slideToggle(duration);
});
see tinker: https://tinker.io/8e585/13
Sounds like you want an accordion: http://jqueryui.com/accordion/ alternatively, you could use the Javascript below (remove the inline Javascript you have in your HTML and just use '#'):
(function($) {
$(function() {
var links = $('.grid_4 h2:first-child a');
links.addClass('closed');
links.click(function() {
var $this = $(this);
links.each(function() {
var curLink = $(this);
if(curLink !== $this) {
curLink.parents('.grid_4').find('.newboxes2').slideUp(600, function({curLink.addClass('closed');});
curLink.parents('.grid_4').find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
}
});
if($this.hasClass('closed')) {
$this.parents('.grid_4').find('.newboxes2').slideDown(200, function() {$this.removeClass('closed');});
$this.parents('.grid_4').find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_onstate.png');
} else {
$this.parents('.grid_4').find('.newboxes2').slideUp(600, function() {$this.addClass('closed');});
$this.parents('.grid_4').find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
}
});
});
})(jQuery);
Context: On my product website I have a link for a Java webstart application (in several locations).
My goal: prevent users from double-clicking, i. e. only "fire" on first click, wait 3 secs before enabling the link again. On clicking, change the link image to something that signifies that the application is launching.
My solution works, except the image doesn't update reliably after clicking. The commented out debug output gives me the right content and the mouseover callbacks work correctly, too.
See it running here: http://www.auctober.de/beta/ (click the Button "jetzt starten").
BTW: if anybody has a better way of calling a function with a delay than that dummy-animate, let me know.
JavaScript:
<script type="text/javascript">
<!--
allowClick = true;
linkElements = "a[href='http://www.auctober.de/beta/?startjnlp=true&rand=1249026819']";
$(document).ready(function() {
$('#jnlpLink').mouseover(function() {
if ( allowClick ) {
setImage('images/jetzt_starten2.gif');
}
});
$('#jnlpLink').mouseout(function() {
if ( allowClick ) {
setImage('images/jetzt_starten.gif');
}
});
$(linkElements).click(function(evt) {
if ( ! allowClick ) {
evt.preventDefault();
}
else {
setAllowClick(false);
var altContent = $('#jnlpLink').attr('altContent');
var oldContent = $('#launchImg').attr('src');
setImage(altContent);
$(this).animate({opacity: 1.0}, 3000, "", function() {
setAllowClick(true);
setImage(oldContent);
});
}
});
});
function setAllowClick(flag) {
allowClick = flag;
}
function setImage(imgSrc) {
//$('#debug').html("img:"+imgSrc);
$('#launchImg').attr('src', imgSrc);
}
//-->
</script>
A delay can be achieved with the setTimeout function
setTimeout(function() { alert('something')}, 3000);//3 secs
And for your src problem, try:
$('#launchImg')[0].src = imgSrc;
Check out the BlockUI plug-in. Sounds like it could be what you're looking for.
You'll find a nice demo here.
...or just use:
$(this).animate({opacity: '1'}, 1000);
wherever you want in your code, where $(this) is something that is already at opacity=1...which means everything seemingly pauses for one second. I use this all the time.
Add this variable at the top of your script:
var timer;
Implement this function:
function setFlagAndImage(flag) {
setAllowClick(flag);
setImage();
}
And then replace the dummy animation with:
timer = window.setTimeout(function() { setFlagAndImage(true); }, 3000);
If something else then happens and you want to stop the timer, you can just call:
window.clearTimeout(timer);