How to get a blinking link on Blogger - javascript

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>

Related

changing image with javascript within if/else

I am trying to change an image in my HTML, via an If/else statement, so the page displays an image depending on a value from another script
i currently have this code
<script>
if (b.className="yes") {
img src="Site/assets/HappyObama.jpg"
}
else {
img src="Site/assets/SadObama.jpg"
}
how can i fix this? Is there something within Javascript that does this?
Here is working example
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to change the text in this paragraph.</p>
<img id="img" src="#">
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
var i = true;
if(i) {
document.getElementById("img").src = "https://www.w3schools.com/css/trolltunga.jpg";
} else {
document.getElementById("img").src = "http://wallpaper- gallery.net/images/image/image-13.jpg";}
}
</script>
</body>
</html>
Use a function to set the value for src.
function getImage(className) {
var image = "";
if (className == 'yes') {
image = "Site/assets/HappyObama.jpg"
}
else {
image = "Site/assets/SadObama.jpg"
}
return image;
}
Assign an id to your img tag, then you can
//First using jQuery
<script>
if (b.className="yes")
{
$("#img").attr('src', 'Site/assets/HappyObama.jpg');
}
else
{
$("#img").attr('src', 'Site/assets/SadObama.jpg');
}
</script>
//Second using javascript
<script>
if (b.className="yes")
{
document.getElementById("img").src="Site/assets/HappyObama.jpg";
}
else
{
document.getElementById("img").src="Site/assets/SadObama.jpg";
}
</script>
Lemme know if the problem resolved. Happy to help
You can do like this
if (b.className="yes") {
document.getElementById("imageid").src="Site/assets/HappyObama.jpg";
} else {
document.getElementById("imageid").src="Site/assets/SadObama.jpg";
}

Changing An Elements Content

I would like to change the content of a element with a button click and then have it return back to its original message. How Would i do this preferable with toggle class if possible.
<doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Day Practice</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
</head>
<body>
<h1> HotDogs</h1>
<input type=button id=button value=button>
<script>
$("#button").click(function(){
$("h1").html("Change to this");
});
</script>
This changes the header with a button, but I don't know how to revert it when I click on the button again. Maybe Toggle Class, I don't know.
this should solve:
$( "#button" ).toggle(function() {
$("h1").html("Change here");
}, function() {
$("h1").html("Revert back here");
});
Set a flag to toggle and check, and store the old text whenever you change it. An example:
var flag = false;
var old_text = "";
$("#button").click(function () {
if (flag) {
$("h1").html(old_text);
} else {
old_text = $("h1").html();
$("h1").html("Change to this");
}
flag = !flag;
});
You can try this:
var alternate_text = "Change to this";
$("#button").click(function(){
var temp = $("h1").html()
$("h1").html(alternate_text);
alternate_text = temp; // Switch the two instances of text.
});
Since you prefered to do this with toggleClass(), here you go:
$(document).ready(function(){
var oldContent;
$("#button").click(function(){
if($(".newCont")[0]){
$("h1").html(oldContent);
} else {
oldContent = $("h1").html();
$("h1").html("New text here");
}
$("h1").toggleClass("newCont");
});
});

onclick return and javascript

and thanks to anyone who can help me!
I have a text with this code:
<a onclick="return showPic(this); mostrarespectacular()" href="Imatges/productosnuevos/urbano01.jpg">&nbsp Circuito Espectacular Barcelona</a>
and the scripts are:
<script type="text/javascript">
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('imgContenedor').src = whichpic.href;
if (whichpic.title) {
document.getElementById('imgDescripcion').childNodes[0].innerHTML = whichpic.innerHTML;
}
return false;
} else {
return true;
}
}
</script>
<script type="text/javascript">
function mostrarespectacular() {
div = document.getElementById('circuloespectacular');
div.style.display = 'inline';
}
function cerrarespectacular() {
div = document.getElementById('circuloespectacular');
div.style.display='none';
}
</script>
and my problem is that the first function works perfect but not the second one (which has to show a div). Any ideas of what i'm doing wrong? Thanks!!
You return from the onclick after the first function call. Remove that and you should be fine.
The "return" is branching out of the script after calling the showPic() function. Remove the return or place it before the "mostrarespectacular()" call or move it to the end, etc.

How to make a text flash in html/javascript?

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.

javascript hide/show functionality doesn't work in Firefox

Some of the javascripts on this site: http://www.bristolhotel.com/pizzeria/onlinepizza3.php doesn't work in Firefox. What's the problem?
<script language="JavaScript">
function OpenDiv(popUpDiv){
popUpDiv.style.display="block";
window.setTimeout("Hide();", 2000);
}
function OpenDiv(blanket){
blanket.style.display="block";
window.setTimeout("Hide();", 2000);
}
function Hide() {
document.getElementById('popUpDiv').style.display='none'
document.getElementById('blanket').style.display='none'
}
</script>
<script language="JavaScript">
function OpenCloseDiv(divName) {
if (divName.style.display == "none") {
divName.style.display="block";
} else {
divName.style.display="none";
}
}
</script>
The code you provided isn't actually the problem.
If you look at the error console (I'm assuming you didn't), you'll see errors like "nr11 not defined". And this is why :
<a onclick="OpenCloseDiv(nr11)"
I don't know where you have the variable nr11 defined, but you'll probably want to make it a string: "nr11" instead.
try to change window.setTimeout("Hide();", 2000); to window.setTimeout(Hide, 2000);
I changed the code to this:
<script type="text/javascript">
function OpenCloseDiv(divName){
var div = document.getElementById(divName);
if (div.style.display == "none") {
div.style.display="block";
}
else {
div.style.display="none";
}
}
</script>
<script type="text/javascript">
function OpenDiv(popUpDiv){
var div = document.getElementById(popUpDiv);
div.style.display="block";
window.setTimeout("Hide();", 2000);
}
function OpenDiv(blanket){
var div = document.getElementById(blanket);
div.style.display="block";
window.setTimeout("Hide();", 2000);
}
function Hide()
{
document.getElementById('popUpDiv').style.display='none'
document.getElementById('blanket').style.display='none'
}
</script>
and then added "" ( ) and it seems to work now. :)
Thank you for all your help! Really appreciate it!

Categories