JavaScript - setInterval not doing anything - javascript

I have code (like always) but the setInterval in my code is not working. Any clue why? My code:
setInterval(function(){
if ($("*:contains(':\\)')").length > 0) {
replace();
};
}, 300);
$("*:contains(':\\)')").length > 0 reports true just to let you know :)
Tell me if you need more details. Thank you!

Woohoo! I fixed it using the following code (based on Arun Sivan's solution):
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('script');
link.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js';
head.appendChild(link);
$(document).ready(function(){
function replace() {
// Lot's of code
}
replace();
function check() {
if ($("*:contains(':\\)')").length > 0) {
replace();
};
}
setInterval(check, 300);
}

This is a simple setInterval function. if this does'nt solve your problem please try to share a JSFiddle.
$(document).ready(function(){
setInterval(function(){$('.myTail').append("="); }, 500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myTail"> -:(my tail is growing)===</div>

Related

variable assignment not working

I do not understand why my variable assignment: var mn = $("nav"); is not working in this piece of code:
var mn = $("nav");
var randomNum = 23;
$(window).scroll(function() {
if( $(this).scrollTop() > 400 ) {
$("nav").addClass("main-nav-scroll");
alert(randomNum);
} else {
mn.removeClass("main-nav-scroll");
}
});
When I manually write it out in $("nav").addClass(...); it works perfectly. I thought the problem was maybe the scope of the variable so I added the randomNum variable to print out and it does so just fine. I'm really stumped. It took me forever to find this simple error So I'd like to understand for next time. Thanks.
Your problem is likely nav. It is a dom element just like <p>. So when you try to select it your query is to general.
Give nav and ID and select it that way.
For example
HTML
<nav id "foob"></nav>
JS
var mn = $("#foob");
In Addition
Also, put a console.log('scroll event fired') in your event handler so that you can verify that the event is actually firing.
This works:
<script type="text/javascript">
jQuery(document).ready(function ($selimatac) {
// öncelikle divi bir gizleyelim
$selimatac("#yukari").hide();
//scroll eğer 100 değerinin üstünde ise divi görünür yapacak, değilse gizleyecektir
$selimatac(function () {
$selimatac(window).scroll(function () {
if ($selimatac(this).scrollTop() > 100) {
$selimatac('#yukari').fadeIn();
} else {
$selimatac('#yukari').fadeOut();
}
});
// butona tıklayınca sayfa en üste çıkması için
$selimatac('div a').click(function () {
$selimatac('window,html,body').animate({
scrollTop: 0
}, 1000);
return false;
});
});
});
</script>
Look at http://selimatac.net/jquery-scrolltop-ile-yukari-cik-butonu/ for more information.
Maybe your var gets rewritten somewhere in your code. Try another var name

Refresh javascript if else statment not working

hi everyone I am new to Javascript and would like to know how would I refresh an if else statement in javascript every 5 seconds, i have looked and cannot get anything to work thanks in advance.
<script type="text/javascript">
if(total == randnum) {
document.write('Correct');
} else {
document.write('Incorrect');
}
</script>
Do you need to write out the document or can you display the text in some element like a div?
If so then you can try something similar to what 'chopper' suggested:
Assuming you have a div in your page with the id "myDiv"
<div id="myDiv"></div>
Then use this to write out your text:
var myDiv = document.getElementById("myDiv");
setInterval(function () {
if(total == randnum) {
myDiv.innerHTML = "Correct";
} else {
myDiv.innerHTML = "Incorrect";
}
}, 5000);
Wrap the code you want to repeat inside a function an use setInterval() (click for documentation with examples) for repeating it.
myFunction() {
//...
// Your code
//...
}
setInterval(myFunction, 5000);
And if you want it to start immediately and then repeat:
myFunction();
setInterval(myFunction, 5000);
setInterval will execute a given function periodically, for example like this:
setInterval( function() {
if(total == randnum) {
$('#result').append('Correct<br/>');
} else {
$('#result').append('Incorrect<br/>');
}
}, 5000);
Where
Of course you will have to define total and randnum.
See this jsFiddle.

Refresh content with jquery

I want to refresh the content of a div with jquery. I have this code but it always says the data and data_check doesn't match while they do when I alert them...
$(document).ready(function(){
pageLoad();
});
function reloadPage()
{
setTimeout(function(){
pageLoad();
},5000);
}
function pageLoad()
{
var data_check = $("div.portlet-body").html().replace(/\s+/g, '');
$.post("paginas/overzicht_sub.php",
function(data){
var data_output = data.replace(/\s+/g, '')
if(data_output==data_check)
{
return false;
}
else
{
$("div.portlet-body").html(data);
}
});
reloadPage();
}
Can someone help? I don't see the problem...
Ok I found the problem! There was a A-tag that always ended when there was no A-tag started. In the HTML (data_check) was that tag deleted and in the data not. Many thanks for the responses, I try to do it the next time with versions!
Remove the replace statement in pageLoad()
function pageLoad(){
var data_check = $("div.portlet-body").html();
$.post("aginas/overzicht_sub.php", function(data){
if(data_output==data){
return false;
}else{
$("div.portlet-body").html(data);
}
});
reloadPage();
}

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!

jQuery function attr() doesn't always update img src attribute

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);

Categories