Conditionally blink text - javascript

Can anyone let me know how can i make it blink text based on if statement?
Sample:
if value 0 - NO BLINK
If not 0 - Should blink
Thank you in advance

I think you mean $('.blink'), assuming you mean a class and not a tag name.
<script type="text/javascript">
setInterval(function(){
$('.blink').each(function(){
$(this).css('visibility' , $(this).css('visibility') === 'hidden' ? '' : 'hidden')
});
}, 250);
</script>
JSFiddle test

You don't need the inline style, Since you are using jQuery, toggle will help you doing this. you can simply do it in this way.
Here is demo:
setInterval(function(){
$('.blink').toggle();
}, 250);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='blink'>Hello!</div>
<div class="blink">Testing again.</div>

See this fiddle.
http://jsfiddle.net/tcy6a5kz/
//Line 21
if (blinkStatus == 1) {
Blinker.start();
}
else {
Blinker.stop();
}
At this line, you can change the if statement to whatever you want (true-like or false-like value).
You can get the span value like this:
// This will return the inner text of the span
// I expect this text as 0 or more. (number or text)
// No text in the span == 0
$('span.top-title').val();
So you can change my code at line 21:
//Line 21
if ($('span.top-title').val() == 1) {
Blinker.start();
}
else {
Blinker.stop();
}
NOTE: You need jQuery included to your site to run this code. Everything starting with '$' is jQuery object and cannot operate without jQuery library.
In case you do not have jQuery. You can include it in your HTML:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
This script must be included before the scripts that uses jQuery. (in most cases it's included at the <head> tag of the HTML. I'm not sure, but I think the "blog service providers" ignoring script definitions in the blog posts.

I know this is too old, but it might help someone searching for this.
I figure it out myself and I know that this is not the best solution.
<div class="blink1">
<span><asp:Label runat="server" Text="Label" ID="inprogress"></asp:Label></span>
</div>
<div class="blink2"><span><asp:Label runat="server" Text="Label" ID="behindsched"></asp:Label></span>
</div>
<script>
var in_progress = parseInt(documentElementById("<%=inprogress.ClientID%>").innerHTML);
var behind_sched = parseInt(documentElementById("<%=behindsched.ClientID%>").innerHTML);
var blinkfunc1 = function(){
$('.blink1').toggle();
}
var blinkfunc2 = function(){
$('.blink2').toggle();
}
var blinkspeed = 550;
$(document).ready(function{
if(in_progress > 0){
setInterval(blinkfunc1, blinkspeed);
}
if(behind_sched > 0){
setInterval(blinkfunc2, blinkspeed);
}
});
</script>
Make sure you don't forget this into your head tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Related

Changing a javascript variable inside a DIV using JQuery

Firstly - i'm not even sure if the syntax is correct, but what i'm trying to do is, i have a div showing an animated image sequence which picks a position using a variable.
I will eventually use JSON to feed the value being changed, but for now i'm just trying to understand how to use JQuery to change the variable. Here's the code:
<div id="noiseAnimDiv" style="float: center; background-color: #ffffff; ">
<script type="text/javascript" src="./animatedpng.js">
</script>
<script type="text/javascript">
var stoptheClock = 3;
noiseAnim = new AnimatedPNG('noise', './noise/noise0.png', 8, 50);
noiseAnim.draw(false);
noiseAnim.setFrameDelay(stoptheClock, 1000); //spin yet stay on value 3
</script>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(
function() {
$("#stoptheClock").val(6); //
}
);
</script>
Any help much appreciated
code is live btw at so you can at least see the animation seq
http://ashleyjamesbrown.com/fgbp/noise.htm
The AnimatedPNG library you are using only checks the variable's value once - when initialized. in your code, you are changing the value after initializing it.
$(document).ready(
function() {
$("#stoptheClock").val(6); //
}
);
Should be
function() {
stoptheClock = 6;
noiseAnim.draw(false);
noiseAnim.setFrameDelay(stoptheClock,1000);
}
You are not using JQuery for any useful cause in your code, therefore I have removed all of the Jquery parts.

if var > then div display: none

I have a variable lineNum that increment when I click on h1
I am trying to make 'if' make a div display:none, but I just cant type the if code right?
Here is the if JQuery line I am having trouble with below:
if (lineNum > 1) {blue-sun-div, display: none;}
thank you for your help : )
***EDIT:
hello
here is the jquery code I have made ( my first jquery coding project)
Two divs move across the screen when I click 'h1'and 'h2', 'var' also increments. When 'var' goes 1 or above: blue-sun-div should disappear.
I can make the blue-sun-div disapear if I refresh the browser but only whilst i manually enter 'var' =1 or more ,so I have the div-name correct, but it will not disappear when lineNum++ raises the var 'lineNum' past 1 automatically.
Do I need to re trigger the code at the end, after lineNum does its job?
sorry if this does not make sense. its 4am here.
here is the code. thank you very much
$(document).ready(function() {
var lineNum = 0;
$("h1").click(function() {
$("#blue-sun-div, #red-sun-div").animate({
"left": "+=200px"
}, 1000);
});
$("h2").click(function() {
$("#blue-sun-div, #red-sun-div").animate({
"left": "-=200px"
}, 1000);
});
lineNum++;
if(lineNum > 1) {
$("#blue-sun-div").css({ display: "none" });
}
})
To make an element have css display: none, you can use the following method:
Pure JavaScript:
if(lineNum > 1) {
document.getElementById("blue-sun-div").style.display = "none";
}
With JQuery (I recommend this)
if(lineNum > 1) {
$("#blue-sun-div").css({ display: "none" });
}
This is assuming you have a <div id="blue-sun-div"> ....
just do:
if blue-sun-div is a classname
if(lineNum>1){
$(".blue-sun-div").hide();
}
if blue-sun-div is an ID
if(lineNum>1){
$("#blue-sun-div").hide();
}
do you have access to jquery? or are you just using plain javascript?
the easiest way would be:
if(lineNum > 1)
{
$('#blue-sun-div').hide();
}
this assumes that you have jquery setup already and that blue-sun-div is the id of the div (<div id="blue-sun-div">)
if it is the class (<div class="blue-sun-div">) then the jquery above needs to change to $('.blue-sun-div').hide();
for plain javascript, the best way would be to create a hide function and call it in the onclick of the h1.
in your javascript:
function hideDiv(divId){
document.getElementById(divId).style.display="none";
}
then in the html:
<h1 id="SomeID" onclick="hideDiv('blue-sun-div');">H1 TEXT</h1>

Showing images conditionally

I've been working on a simple website for a while now. The basic coding and CSS are complete, so I am now looking to expand by adding certain features to the website. As it is a fully functioning website that serves a purpose, the main source of revenue comes from Google AdSense. I am looking for a way to show an image if Adblock is detected and another one if if it not.
The method I've found for detecting whether AdSense is active is shown below:
JS (saved as advertisement.js)
document.write('<div id="TestAdBlock" style="display:none;">an advertisement</div>');
The HTML bit:
<div id="adblockFrame">
<script type="text/javascript" src="js/advertisement.js"></script>
<script type="text/javascript">
if (document.getElementById("TestAdBlock") != undefined)
{
document.write('<strong>ADBlock Plus</strong> NOT detected!');
}
else
{
document.write('<strong>ADBlock Plus</strong> detected!');
}
</script>
</div>
CSS:
#adblockFrame {
visibility: hidden;
}
What I'm asking is that if someone could be kind enough to show me how, instead of displaying text, the JS would show an image in its place. I'm not that good with JS so I'm grateful for any help.
I would create an empty target div :
<div id="adblockDetector"></div>
<script type="text/javascript">
if (document.getElementById("TestAdBlock") != undefined)
{
document.getElementById('adblockDetector').innerHTML="<img src='noadblock.jpg' alt='no adblock' />";
}
else
{
document.getElementById('adblockDetector').innerHTML="<img src='adblock.jpg' alt='Adblock detected!' />";
}
</script>
Assuming you are using jquery, just because you tagged it:
html
<div id="wheretoappend"></div>
js
var whereToAppend = '#wheretoappend';
var myDiv = $('<div/>', {id: 'mydiv'});
($('#adblockFrame').length)
? myDiv.addClass('hasit').appendTo(whereToAppend)
: myDiv.addClass('doesnt').appendTo(whereToAppend);
CSS
.hasit {background: url('hasit.png');}
.doesnt {background: url('doesnt.png');}
Please, don't use the devil document.write!
If you want to add content to your page, use DOM methods or .innerHTML.
If you want to detect AdBlock, just create a global variable in advertisement.js
For example:
advertisement.js:
window.TestAdBlock = true;
Your page:
<div id="adblockFrame">
<img id="TestAdBlock" alt="AdBlock Detected???" />
<script type="text/javascript" src="js/advertisement.js"></script>
<script type="text/javascript">
(function() {
var AdBlockImg = document.getElementById('TestAdBlock');
if (window.TestAdBlock)
{
AdBlockImg.src = "/images/AdBlockDetected.jpg";
AdBlockImg.alt = "AdBlock Detected!";
}
else
{
AdBlockImg.src = "/images/AdBlockNOTDetected.jpg";
AdBlockImg.alt = "AdBlock NOT Detected!";
}
AdBlockImg.title = AdBlockImg.alt;
});
</script>
</div>
Firstly, you shouldn't use document.write for anything. It's just bad practice. But here's generally how I'd do it with jquery, since you tagged it:
<div id="adblockFrame>
<script type="text/javascript" src="js/advertisement.js"></script>
<script type="text/javascript">
var adsAllowed = adsAllowed || false;
var src = adsAllowed ? '/images/myAd.png' : '/images/noAd.png';
$('#ad').attr('src',src);
</script>
<img id="ad"/>
</div>
advertisement.js
var adsAllowed = true;

Hide div when another div is empty

I know theres lots of answers on this problem, but I've read through all I can find but still cant get it to work.
I have a div which i need to be hidden if another div is empty, or just containing whitespace.
<div id="rt-main" class="mb12">
<div class="rt-grid-12">
<div class="rt-block component-block main-overlay-light">
<div id="rt-mainbody">
<div class="component-content">
<div class="blog-featured"></div>
( I want to hide div.mb12 when div blog-featured = ' ' )
My closest bet is this:
$(document).ready(function() {
str = $('div.section').text();
if($.trim(str) === "") {
$('div.section').hide();
}
});
But I get all sorts of errors in the console when trying.
Now I've got "TypeError: Cannot call method 'text' of null"
On the actual site (not included in the question), you have this:
jQuery.noConflict();
This makes it so that $ is no longer jquery. Most likely because one of the many other libraries you have included uses the $ name. You can simply change your code to use jQuery in place of $:
jQuery(document).ready(function() { ...
Alternatively, you can assign jQuery to a different variable name:
var $j = jQuery.noConflict();
$j(document).ready(function(){ ...
You want this -
jQuery(document).ready(function () {
var str = jQuery('div.blog-featured').text();
if (jQuery.trim(str) === "") {
jQuery('div.mb12').hide();
}
});
Demo ---> http://jsfiddle.net/PqXWJ/20/
Are you loading the jQuery library before your script? Do you have something like this in the <head> tags of your page?
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
etc etc
</script>

Simply tag-based highlighting with Javascript

I got this code which works:
<html>
<head>
<title>JS highlighting test</title>
<script type="text/javascript">
function highlight()
{
var t = document.getElementById('highlight').innerHTML;
t = t.replace(/(if|switch|for|while)\s*(\()/gi, "<b>$1</b>$2");
document.getElementById('highlight').innerHTML = t;
}
</script>
</head>
<body onload="javascript:highlight();">
<pre id="highlight">
1 if(foo) {
2 bar();
3 }
4
3 while(--baz) {
5 oof();
6 }
</pre>
</body>
</html>
I would like to have it for all <pre> tags instead of just one with some specific and
unique id as it works now. The best would be to have an combination of a specific tag
with a specific id. Is it possible to extend the small JS function above to work this
way (using some document.getElementsByTag(tag).getElementsById(id).innerHTML or
something alike (I don't know what exactly suites the need) in a loop? I tried myself but with no real success. I need only as simple solution as possible, nothing really special.
Thank you for your ideas.
--
nkd
You almost guessed it right ;-)
function doSomethingWithAllPres() {
var pres = document.getElementsByTagName("pre");
for (var i = 0; i < pres.length; i++) {
// you can check the class name via pres[i].className === "highlight"
// (and you should use a class instead of an id therefore)
if (pres[i].className.indexOf("highlight") >= 0) {
// action goes here
}
}
}
Using a JS-Framework like jQuery, things would be even more simple:
$("pre.highlight").each(function(i) {
// action goes here
});
However, using a framework might be overkill...

Categories