SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
-
Jun 30, 2007, 17:10 #1
- Join Date
- Jun 2007
- Posts
- 5
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Executing JS function without <body onload="...">
Hi, I need help from us
I have this JS file:
var a, b, xtime, clock, minute, second = 0;
var xlocation, m = "";
function initTimer(time, location)
{
m = document.getElementById("d2");
i = 125;
xlocation = location;
xtime = time;
clock = time;
//document.getElementById("d1").innerHTML="";
m.style.width=0;
clearTimeout(a);
clearTimeout(b);
startCount();
startProgressBar();
}
function startProgressBar()
{
if (i >= 0)
{
if (clock < 10)
{
m.style.background="red";
}
else
{
m.style.background="blue";
}
m.style.width=i+"px";
a = setTimeout("startProgressBar();", xtime/125*1000);
}
i--;
}
function startCount()
{
if (clock != 0)
{
minute = Math.floor(clock/60);
second = (clock-minute*60);
b = setTimeout('startCount();', 1000);
}
else
{
window.location.href = xlocation;
}
clock --;
showClock();
}
function showClock()
{
minute = minute.toString();
second = second.toString();
if (minute.length < 2)
{
minute = "0" + minute;
}
if (second.length < 2)
{
second = "0" + second;
}
document.getElementById("clock").innerHTML = minute + ":" + second;
}
Basicly, I need execute initTimer(time, location) function everytime If I refresh my browser, but I canīt use onload method...for example...
<body onload="initTimer(180, 'http://www.example.com');">
Is here somebody, who can solve that ?
Thanks a lot ...
-
Jun 30, 2007, 18:24 #2
- Join Date
- Mar 2007
- Posts
- 25
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
It's not completely clear (to me at least) exactly what you are trying to do. If you just want to achieve the same functionality within a script:
Code:window.onload=function() { initTimer(10,'http://www.google.com/'); }
-
Jul 1, 2007, 03:41 #3
- Join Date
- Jun 2007
- Posts
- 5
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yeh, but If I write this code this way:
....<body>
<script type='text/javascript'>
window.onload = function() {
initTimer(10, 'http://www.google.com');
}
}
</script>
....
it doesnī twork
-
Jul 1, 2007, 04:10 #4
- Join Date
- Jun 2007
- Posts
- 5
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
addition:
This JS is generating clock (countdown) with progress bar (div with 125px width which is getting smaller with counted time). But I have problem, because I use lightbox script in the same page. And it doesnī t work properly if I call both script. (I discover, problem is caused by the bod=document.getElementsByTagName('body')[0]; in lightbox script). If I delete lightbox (or command above), it works properly. But I need all of them
-
Jul 1, 2007, 07:51 #5
- Join Date
- Mar 2007
- Posts
- 25
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You have two closing braces in your second to last example. I have it working on my end.
Can you post an example with both scripts? That line in and of itself wouldn't cause any conflict, but it's possible it affects something a few lines down.
What I'm guessing is that perhaps both scripts are calling an onload event, and one is overriding the other. If that's the case, just make sure your preload functions are wrapped as functions and call them with Simon Willison's onload-function-queue function (that's a mouthful!).
Good luck.Last edited by synotic; Jul 1, 2007 at 07:56. Reason: Forgot the link
-
Jul 2, 2007, 12:59 #6
- Join Date
- Jun 2007
- Posts
- 5
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
thanks for reply synotic: I was reading article which u are linking. But Iīm not so strong in JS. Iīm really noobie
(noobie in using DOM
)
So here are both srcipts:
First one is lightbox (itīs lightbox without image - so itīs rather modalbox):
/*
Created By: Chris Campbell
Website: http://particletree.com
Date: 2/1/2006
Inspired by the lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
*/
/*-------------------------------GLOBAL VARIABLES------------------------------------*/
var detect = navigator.userAgent.toLowerCase();
var OS,browser,version,total,thestring;
/*-----------------------------------------------------------------------------------------------*/
//Browser detect script origionally created by Peter Paul Koch at http://www.quirksmode.org/
function getBrowserInfo() {
if (checkIt('konqueror')) {
browser = "Konqueror";
OS = "Linux";
}
else if (checkIt('safari')) browser = "Safari"
else if (checkIt('omniweb')) browser = "OmniWeb"
else if (checkIt('opera')) browser = "Opera"
else if (checkIt('webtv')) browser = "WebTV";
else if (checkIt('icab')) browser = "iCab"
else if (checkIt('msie')) browser = "Internet Explorer"
else if (!checkIt('compatible')) {
browser = "Netscape Navigator"
version = detect.charAt(8);
}
else browser = "An unknown browser";
if (!version) version = detect.charAt(place + thestring.length);
if (!OS) {
if (checkIt('linux')) OS = "Linux";
else if (checkIt('x11')) OS = "Unix";
else if (checkIt('mac')) OS = "Mac"
else if (checkIt('win')) OS = "Windows"
else OS = "an unknown operating system";
}
}
function checkIt(string) {
place = detect.indexOf(string) + 1;
thestring = string;
return place;
}
/*-----------------------------------------------------------------------------------------------*/
Event.observe(window, 'load', initialize, false);
Event.observe(window, 'load', getBrowserInfo, false);
Event.observe(window, 'unload', Event.unloadCache, false);
var lightbox = Class.create();
lightbox.prototype = {
yPos : 0,
xPos : 0,
initialize: function(ctrl) {
this.content = ctrl.href;
Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
ctrl.onclick = function(){return false;};
this.activate();
},
// Turn everything on - mainly the IE fixes
activate: function(){
if (browser == 'Internet Explorer'){
this.getScroll();
this.prepareIE('100%', 'hidden');
this.setScroll(0,0);
this.hideSelects('hidden');
}
this.displayLightbox("block");
},
// Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
prepareIE: function(height, overflow){
bod = document.getElementsByTagName('body')[0];
bod.style.height = height;
bod.style.overflow = overflow;
htm = document.getElementsByTagName('html')[0];
htm.style.height = height;
htm.style.overflow = overflow;
},
// In IE, select elements hover on top of the lightbox
hideSelects: function(visibility){
selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++) {
selects[i].style.visibility = visibility;
}
},
// Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
getScroll: function(){
if (self.pageYOffset) {
this.yPos = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){
this.yPos = document.documentElement.scrollTop;
} else if (document.body) {
this.yPos = document.body.scrollTop;
}
},
setScroll: function(x, y){
window.scrollTo(x, y);
},
displayLightbox: function(display){
$('overlay').style.display = display;
$('lightbox').style.display = display;
if(display != 'none') this.loadInfo();
},
// Begin Ajax request based off of the href of the clicked linked
loadInfo: function() {
var myAjax = new Ajax.Request(
this.content,
{method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
);
},
// Display Ajax response
processInfo: function(response){
info = "<div id='lbContent'>" + response.responseText + "</div>";
new Insertion.Before($('lbLoadMessage'), info)
$('lightbox').className = "done";
this.actions();
},
// Search through new links within the lightbox, and attach click event
actions: function(){
lbActions = document.getElementsByClassName('lbAction');
for(i = 0; i < lbActions.length; i++) {
Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
lbActions[i].onclick = function(){return false;};
}
},
// Example of creating your own functionality once lightbox is initiated
insert: function(e){
link = Event.element(e).parentNode;
Element.remove($('lbContent'));
var myAjax = new Ajax.Request(
link.href,
{method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
);
},
// Example of creating your own functionality once lightbox is initiated
deactivate: function(){
Element.remove($('lbContent'));
if (browser == "Internet Explorer"){
this.setScroll(0,this.yPos);
this.prepareIE("auto", "auto");
this.hideSelects("visible");
}
this.displayLightbox("none");
}
}
/*-----------------------------------------------------------------------------------------------*/
// Onload, make all links that need to trigger a lightbox active
function initialize(){
addLightboxMarkup();
lbox = document.getElementsByClassName('lbOn');
for(i = 0; i < lbox.length; i++) {
valid = new lightbox(lbox[i]);
}
}
// Add in markup necessary to make this work. Basically two divs:
// Overlay holds the shadow
// Lightbox is the centered square that the content is put into.
function addLightboxMarkup() {
bod = document.getElementsByTagName('body')[0];
overlay = document.createElement('div');
overlay.id = 'overlay';
lb = document.createElement('div');
lb.id = 'lightbox';
lb.className = 'loading';
lb.innerHTML = '<div id="lbLoadMessage">' +
'<p>Loading...</p>' +
'</div>';
bod.appendChild(overlay);
bod.appendChild(lb);
}
------------------------------------------------------------------------
Here is second one (itīs countdown sript with progress bar) - itīsJS sript with HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0055)http://home.hetnet.nl/~hans-kuipers5/js/progressbar.htm -->
<HTML><HEAD><TITLE>Progressbar driven by javascript ( js ). DHTML HTML CSS Internet Explorer ( IE ) / Firefox ( FF ) / Mozilla / / Opera / Netscape ( NS ).</TITLE>
<META http-equiv=content-type content="text/html; charset=iso-8859-1">
<META content="Progress Bar using javascript ( js ) and HTML ( DHTML )."
name=description>
<SCRIPT type=text/javascript>
var a, b, xtime, clock, minute, second = 0;
var xlocation = "";
function initTimer(time, location)
{
i = 125;
xlocation = location;
xtime = time;
clock = time;
//document.getElementById("d1").innerHTML="";
document.getElementById("d2").style.width=0;
clearTimeout(a);
clearTimeout(b);
startProgressBar();
startCount();
}
function startProgressBar()
{
if (i >= 0)
{
document.getElementById("d2").style.width=i+"px";
a = setTimeout("startProgressBar();", xtime/125*1000);
}
i--;
}
function startCount()
{
if (clock != 0)
{
minute = Math.floor(clock/60);
second = (clock-minute*60);
b = setTimeout('startCount();', 1000);
}
else
{
window.location.href = xlocation;
}
clock --;
showClock();
}
function showClock()
{
minute = minute.toString();
second = second.toString();
if (minute.length < 2)
{
minute = "0" + minute;
}
if (second.length < 2)
{
second = "0" + second;
}
document.getElementById("clock").innerHTML = minute + ":" + second;
}
</SCRIPT>
<body onload = "initTimer(30,'http://www.example.com')">
<span id="clock"></span>
<div id="empty" style="PADDING-RIGHT: 0px; WIDTH: 125px; HEIGHT: 8px; BACKGROUND-COLOR: white;float: left; position: relative;">
<div id="d1" style="width: 100%; border: 1px solid black; position: relative;">
<div id="d2" style="HEIGHT: 8px; width: 100%; BACKGROUND-COLOR: BLUE;">
</div></div></div>
<div style="float: left; margin: 0 0 0 5px"><INPUT type=button onClick="initTimer(30,'http://www.example.com');" value="Refresh">
</div>
</BODY></HTML>
------------------------------------------------------------------------
So thatīs all. I repeat where is problem - I need execute countdown with progress bar (second one) with body onload or with clicking on refresh button. But It doesnīt work properly with onload (it work properly only with clicking on refresh button). Prblem is caused (on 99%) by lightbox script.
Thanks to all for solving my problem...
-
Jul 2, 2007, 13:07 #7
- Join Date
- Jun 2007
- Posts
- 5
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
addition: This lightbox require JS script prototpye 1.4.0
-
Jul 2, 2007, 13:35 #8
- Join Date
- Jun 2007
- Location
- San Diego, CA
- Posts
- 784
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I agree. I'm having some trouble understanding the code (I don't use browser/OS detects and my AJAX is pretty basic), so I wasn't able to do anything productive with it. But anytime someone says "onload" problems with multiple scripts I think of the Willison's code...
Although if he doesn't come up with a better name for it, I'm going to seriously consider going back to Scott Andrew's addEvent function. Expecting us to swallow a name like that just to include IE for Mac is bit much to ask I think.Whatever you can do or dream you can, begin it.
Boldness has genius, power and magic in it. Begin it now.
Chroniclemaster1, Founder of Earth Chronicle
A Growing History of our Planet, by our Planet, for our Planet.
Bookmarks