...

View Full Version : jQuery Calling a normal JS function from within jquery



SnoringFrog
08-06-2009, 04:26 PM
I was having some problems with Opera and the onload attribute of the body tag, so I decided to call the necessary function a different way. window.onload= takes too long for me, so I started calling my function (rndmSource) from within jquery, but if I call rndmSource before the rest of the jquery code, then the jquery does not run. However, if I move "rndmSource();" to where the "end jquery" comment is, then both work fine. Why is this?

Also, I intend on converting the random image script to jquery in the (hopefully) near future. I just haven't had the time to do so yet and that's why I need this mixture.

Here's my script:

$(document).ready(function(){

rndmSource();
//Start News Ticker
$("#newsContainer .news:first").show();
var lngth=$(".news").length;
var whch=1;
$(".newsnumber:first").html(" (" + whch + "/" + lngth + ")");

function changeNews(){
var first=$('#newsContainer .news:first').html();
$('#newsContainer .news:first').remove();addLast(first);
$('#newsContainer .news:first').fadeIn(2000);
whch++;
if(whch>lngth){whch=1;};
$(".newsnumber:first").html(" (" + whch + "/" + lngth + ")");
}
interval = setInterval(changeNews, 3500);

function addLast(first){
last = '<span class="news" style="display:none">'+first+'</span>';
$('#newsContainer').append(last);
}
$('#newsHeader').click(changeNews); //enables "fast-forward" by clicking "BBA News"
//End News Ticker
});
//end jquery

//Begin normal JS
//Start random image script
var totalPics=258;
var commonSrc='http://bbafnc.org/images/10000/6000/170BE/user/P-IMAGE-';
var imagesOnPage=3;
var source=new Array(imagesOnPage);

function rndmSource(){
for (i=1; i<=imagesOnPage; i++) {
source[i]=commonSrc + rndmNum(totalPics) + ".jpg";
}
preventDuplicate();
}

function rndmNum (n){
return (Math.floor(Math.random()*n + 1));
}

//Rework this function to utilize "imagesOnPage" variable. Use for loop, "source[i]" and "source.length"
function preventDuplicate(){
if (source[1]!=source[2] && source[1]!=source[3] && source[2]!=source[3]) {insertSource();}
else if (source[1]==source[2]){source[1]=commonSrc + rndmNum(totalPics) + ".jpg"; preventDuplicate();}
else if (source[1]==source[3]){source[1]=commonSrc + rndmNum(totalPics) + ".jpg"; preventDuplicate();}
else if (source[2]==source[3]){source[2]=commonSrc + rndmNum(totalPics) + ".jpg"; preventDuplicate();}
}

function insertSource(){
document.getElementById("Image01").src = source[1];
document.getElementById("Image02").src = source[2];
document.getElementById("Image03").src = source[3];
}

//end random images script

</script>

Fumigator
08-06-2009, 05:09 PM
The rndmSource() function is probably throwing a JS error, stopping the script. All those global variables... I'm thinking they aren't yet declared when you call rndmSource() and use them all. Try moving the variable declarations to above the jQuery block (or change your code to send all those variables to the function so you know they will be defined within the function).

Are you using a decent browser (such as Firefox) where you can see the JS errors?

SnoringFrog
08-06-2009, 05:47 PM
I tried moving the global variables up, but no luck. And yes, I'm using Firefox, but the only error in the error console is "document.getElementById('Image02') is null"


<script language="javascript">

var totalPics=258;
var commonSrc='http://bbafnc.org/images/10000/6000/170BE/user/P-IMAGE-';
var imagesOnPage=3;
var source=new Array(imagesOnPage);
$(document).ready(function(){
rndmSource();
//Start News Ticker
$("#newsContainer .news:first").show();
var lngth=$(".news").length;
var whch=1;
$(".newsnumber:first").html(" (" + whch + "/" + lngth + ")");

function changeNews(){
var first=$('#newsContainer .news:first').html();
$('#newsContainer .news:first').remove();addLast(first);
$('#newsContainer .news:first').fadeIn(2000);
whch++;
if(whch>lngth){whch=1;};
$(".newsnumber:first").html(" (" + whch + "/" + lngth + ")");
}
interval = setInterval(changeNews, 3500);

function addLast(first){
last = '<span class="news" style="display:none">'+first+'</span>';
$('#newsContainer').append(last);
}
$('#newsHeader').click(changeNews); //enables "fast-forward" by clicking "BBA News"

//End News Ticker
});
//end jquery

//Begin normal JS
//Start random image script


function rndmSource(){
for (i=1; i<=imagesOnPage; i++) {
source[i]=commonSrc + rndmNum(totalPics) + ".jpg";
}
preventDuplicate();
}

function rndmNum (n){
return (Math.floor(Math.random()*n + 1));
}

//Rework this function to utilize "imagesOnPage" variable. Use for loop, "source[i]" and "source.length"
function preventDuplicate(){
if (source[1]!=source[2] && source[1]!=source[3] && source[2]!=source[3]) {insertSource();}
else if (source[1]==source[2]){source[1]=commonSrc + rndmNum(totalPics) + ".jpg"; preventDuplicate();}
else if (source[1]==source[3]){source[1]=commonSrc + rndmNum(totalPics) + ".jpg"; preventDuplicate();}
else if (source[2]==source[3]){source[2]=commonSrc + rndmNum(totalPics) + ".jpg"; preventDuplicate();}
}

function insertSource(){
document.getElementById("Image01").src = source[1];
document.getElementById("Image02").src = source[2];
document.getElementById("Image03").src = source[3];
}

//end random images script

</script>

I also tried moving all the global variables into the function itself to ensure that they would be defined when the function ran, but that didn't work either.

Fumigator
08-06-2009, 06:25 PM
I tried moving the global variables up, but no luck. And yes, I'm using Firefox, but the only error in the error console is "document.getElementById('Image02') is null"

So yeah that is stopping the script in its tracks.

SnoringFrog
08-06-2009, 06:44 PM
Ok, got it, thanks. My problem was due to commenting out a couple lines of HTML that in turn caused the javascript to get that error. Easy fix now that I know what's causing it, and now I know to check the errors for probs (which should have been obvious lol).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum