[RESOLVED] Frameset, Scroller, Countdown [Archive]

Click to See Complete Forum and Search --> : [RESOLVED] Frameset, Scroller, Countdown

Ipsens

August 17th, 2006, 05:14 PM

With one file I declare a frameset. Upper part loads frame of my site and is constant and down will be randomly added site for some amount of time.
Random url is taken from the database(this part I know how to do) and "ejected" to the down frame(this part I need help).

Regarding countdown how do I do it with PHP. In upper frame it is ticking 20sec(example). After that period new randomly choosen url is picked from the database and "ejected" in bottom frame.

Thanks in advance, Ipsens

PeejAvery

August 18th, 2006, 09:46 AM

A countdown will have to be done on the client-side. PHP has to have server interaction therefore it can't countdown and then talk to the client.

I suggest using JavaScript to redirect the PHP.

Ipsens

August 18th, 2006, 10:35 AM

I have 2 JavaScripts that don't work together in FF and IE but they work together in Opera 9.01

FIRST:

This is a scrooler in head



</script>


This is a scrooler in body

<body onload="P7_setScroller('p7scroller1','p7s1content1',0,300);P7_runScroller('p7scroller1','Down','Medium',1,0,0,0)">...

This is a scroolers text


<div id="p7scroller1" onmouseover="P7_runScroller('p7scroller1','Stop','Medium',0,0,0,0)" onmouseout="P7_runScroller('p7scroller1','Resume','Medium',0,0,0,0)">
<div id="p7s1content1">
<h3 class="naslov">Free Security Software:</h3>
</div>
</div>


SECOND:

Ticking Server Time: - in HEAD

<script type="text/javascript">
var currenttime = '<?php print date("F d, Y H:i:s", time())?>'
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
var serverdate=new Date(currenttime)

function padlength(what){
var output=(what.toString().length==1)? "0"+what : what
return output
}

function displaytime(){
serverdate.setSeconds(serverdate.getSeconds()+1)
var datestring=montharray[serverdate.getMonth()]+" "+padlength(serverdate.getDate())+", "+serverdate.getFullYear()
var timestring=padlength(serverdate.getHours())+":"+padlength(serverdate.getMinutes())+":"+padlength(serverdate.getSeconds())
document.getElementById("servertime").innerHTML=datestring+" "+timestring
}
window.onload=function(){
setInterval("displaytime()", 1000)
}
</script>

Ticking Server Time: - in BODY

<span id="servertime"></span>

And here is CSS for both scripts(theirs divs):

#servertime {
z-index:12;
}
#p7s1content1 {
margin:0px auto 0px auto;
position:absolute;
top:500px;
left:0px;
width:170px;
visibility:visible;
z-index: 8;
}
#p7scroller1 {
margin:0px auto 0px auto;
overflow: hidden;
position: absolute;
visibility: visible;
z-index: 7;
height: 875px;
width: 170px;
left: 646px;
top: 206px;
}

I would like second script to be altered(Server time) NOT scrooler, to be cross browser compatible.

One more IMPORTANT thing.
When I put in HEAD, fisrt script of scrooler and then of server time, then scrooler works and server time doesn't. and....
when I put in HEAD, fisrt script of server time and then of scrooler, then server time works and scrooler is freezed!
This comment is for FF and IE not for Opera browser(in it both works simultaniously ok!)

Also, please, aim at altering server time script, to make them both work.

Ipsens

Ipsens

August 18th, 2006, 10:45 AM

Ok here is a countdown JavaScript 20sec and backward.

<body>
<p><div id="dl"><h3>ERROR: Please enable JavaScript.</h3></div></p>
<script>var c = 20; fc(); function fc() {
if(c>=0){document.getElementById("dl").innerHTML = "Countdown " + c.toFixed(1);
c = c - .1;setTimeout("fc()", 100)}}</script>
</body>

Now I've get it by looking javascript on some other site and altered it to suit my needs but not because I know JS, but simply by looking patterns in code and logicaly retouching it. I filtered out about 80% of usseles code for me.

Now because a fact that I don't know JS, could you help me to finish it...

So it will countdown in upper frame and when reaching 0.1 ejecting new url in bottom frame.

Thank you...

Ipsens

PeejAvery

August 18th, 2006, 10:50 AM

PeejAvery

August 18th, 2006, 10:56 AM

Dr. Script

August 18th, 2006, 11:02 AM

Merged. I changed the title as well because Compatibility problems didn't really address the things in the thread. Thanks for the heads up

Ipsens

August 18th, 2006, 11:47 AM

Well, I can't code it exactly but I can do an example that you can easily alter.

<script language="JavaScript">
function countdown(){
var seconds = 20;
setTimeout("timerdone()", seconds * 1000);
}

function timerdone(){
parent.FRAMENAME.location.replace('http://www.google.com');
}
</script>

<body onload="countdown()">

Hey thanks.
For me it will be

<script language="JavaScript">
function countdown(){
var seconds = <?php echo 'Timeframe as I please'; ?>;
setTimeout("timerdone()", seconds * 1000);
}

function timerdone(){
parent.FRAMENAME.location.replace('<?php echo 'random url ejected from the database'; ?>');
}
</script>

<body onload="countdown()">

PeejAvery

August 18th, 2006, 11:52 AM

Good. I hope that helps.

Ipsens

August 18th, 2006, 11:53 AM

Whoa, that is a lot of scripting for anyone to look through. I don't think anyone will have the time to do that.

Can you thoroughly explain what you are trying to do and maybe we can work something out.

Note: I will have a moderator merge the server-side thread into this one.

What am I trying to do here is make them both run in IE and FF browser like they do in a Opera.
I really can't find out conflict. But then again, why is that conflict not occuring in Opera?
In FF and IE they work separetly, but when scripts are together they shutdown each other(depending which is showing first in a HEAD)

I prefer altering server time script because it is tiny.

Ipsens

PeejAvery

August 18th, 2006, 12:06 PM

All browsers are different. Each interprets JavaScript in a different fashion. The code you posted is not well organized at all. This will make it a pain to sort through just to find the difference.

If you want to organize it, it will still take time but not as much. Someone might be able to point it out right away.

Ipsens

August 18th, 2006, 01:23 PM

I can't organize it simply because I didn't made those scripts.
If it was PHP, I wouldn't have any problem.

Maybe altering second script(ServerTime) by substituing functions in it with other functions that do the exactly the same thing.

PeejAvery

August 18th, 2006, 02:50 PM

Well, because it is far from organized the time to look through is will take 10 times more.

What is it you are trying to do with JavaScript scrollers?

Ipsens

August 18th, 2006, 05:36 PM

Both scripts works just fine, but not together.

With scroller I'am scrolling text from down to upside and when I mouseover, it pauses, and on mouseout it resumes scrolling.

Nah..., I think TickingServerTime should be altered, because it is small script.

<script type="text/javascript">
var currenttime = '<?php print date("F d, Y H:i:s", time())?>'
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
var serverdate=new Date(currenttime)

function padlength(what){
var output=(what.toString().length==1)? "0"+what : what
return output
}

function displaytime(){
serverdate.setSeconds(serverdate.getSeconds()+1)
var datestring=montharray[serverdate.getMonth()]+" "+padlength(serverdate.getDate())+", "+serverdate.getFullYear()
var timestring=padlength(serverdate.getHours())+":"+padlength(serverdate.getMinutes())+":"+padlength(serverdate.getSeconds())
document.getElementById("servertime").innerHTML=datestring+" "+timestring
}
window.onload=function(){
setInterval("displaytime()", 1000)
}
</script>

<span id="servertime"></span>

PeejAvery

August 18th, 2006, 05:49 PM

Both scripts works just fine, but not together.
That is probably because both scripts are similar and so the authors would have used some of the same variable names.

If you have a variable conflict, neither script will run. Look through the code and change all the variables of the shorter script by adding a letter to them.

Ipsens

August 19th, 2006, 07:34 AM

Nah... no variable conflict,

But I DID found a catch.

Problem is with window.onload function.
Both scripts are using ONLOAD which is a conflict.

All I need to modify is:

window.onload=function(){
setInterval("displaytime()", 1000)
}

I need to substitue window.onload with something else. I tried with window.onblur and it worked, but I can't use it cause I need to switch tabs while surfing and come back to see it.

I just need it to load, so give me alternative to window.onload
It doesn't need to be on screen ASAP, I can wait another sec LOL!

Ipsens

PeejAvery

August 19th, 2006, 08:01 AM

Create a function to launch them both and then put that function to fire onload.

<script language="JavaScript">
function loadboth(){
functionname();
functionname();
}
window.onload = loadboth();
</script>

Ipsens

August 19th, 2006, 08:52 AM

Thanks but I don't want to even try that simply because first BIG script is dreamweaver plug in and I can alter it only trough DW8. I don't know JS.
I "crack" it only by loking similar/same patterns in code and trial/error combination.

Now, please, can we alter ONLY second(TickingServeClockTime) script, by removing
window.onload with something else? I just need it to load like anything else in a page.

Ipsens

PeejAvery

August 19th, 2006, 11:00 AM

Now, please, can we alter ONLY second(TickingServeClockTime) script, by removing window.onload with something else? I just need it to load like anything else in a page.
You can't! That is why I have been suggesting alternatives. You can call this function at the end of the other if you want. But onload is the only way to make fire automatically. Any other way will require user interaction.

Ipsens

August 19th, 2006, 11:28 AM

This one doesn't require any user imput and I don't see onload anywhere...

This is snowfall:

var SNOW_Picture = "im/snow4.gif"
var SNOW_no = 30;

var SNOW_browser_IE_NS = (document.body.clientHeight) ? 1 : 0;
var SNOW_browser_MOZ = (self.innerWidth) ? 1 : 0;

var SNOW_Time;
var SNOW_dx, SNOW_xp, SNOW_yp;
var SNOW_am, SNOW_stx, SNOW_sty;
var i, SNOW_Browser_Width, SNOW_Browser_Height;

if (SNOW_browser_IE_NS)
{
SNOW_Browser_Width = document.body.clientWidth;
SNOW_Browser_Height = document.body.clientHeight;
}
else if (SNOW_browser_MOZ)
{
SNOW_Browser_Width = self.innerWidth - 20;
SNOW_Browser_Height = self.innerHeight;
}

SNOW_dx = new Array();
SNOW_xp = new Array();
SNOW_yp = new Array();
SNOW_am = new Array();
SNOW_stx = new Array();
SNOW_sty = new Array();

for (i = 0; i < SNOW_no; ++ i)
{
SNOW_dx[i] = 0;
SNOW_xp[i] = Math.random()*(SNOW_Browser_Width-50);
SNOW_yp[i] = Math.random()*SNOW_Browser_Height;
SNOW_am[i] = Math.random()*20;
SNOW_stx[i] = 0.02 + Math.random()/10;
SNOW_sty[i] = 0.7 + Math.random();
if (i == 0) document.write("<\div id=\"SNOW_flake"+ i +"\" style=\"position: absolute; z-index: "+ i +"; visibility: visible; top: 15px; left: 15px;\"><a href=\"http://www.peters1.dk\" target=\"_blank\"><\img src=\""+SNOW_Picture+"\" border=\"0\"></a><\/div>");
else document.write("<\div id=\"SNOW_flake"+ i +"\" style=\"position: absolute; z-index: "+ i +"; visibility: visible; top: 15px; left: 15px;\"><\img src=\""+SNOW_Picture+"\" border=\"0\"><\/div>");
}

function SNOW_Weather()
{

for (i = 0; i < SNOW_no; ++ i)
{
SNOW_yp[i] += SNOW_sty[i];

if (SNOW_yp[i] > SNOW_Browser_Height-50)
{
SNOW_xp[i] = Math.random()*(SNOW_Browser_Width-SNOW_am[i]-30);
SNOW_yp[i] = 0;
SNOW_stx[i] = 0.02 + Math.random()/10;
SNOW_sty[i] = 0.7 + Math.random();
}

SNOW_dx[i] += SNOW_stx[i];

document.getElementById("SNOW_flake"+i).style.top=SNOW_yp[i]+"px";
document.getElementById("SNOW_flake"+i).style.left=SNOW_xp[i] + SNOW_am[i]*Math.sin(SNOW_dx[i])+"px";
}

SNOW_Time = setTimeout("SNOW_Weather()", 10);

}

SNOW_Weather();

PeejAvery

August 19th, 2006, 02:53 PM

That is because it uses setTimeout(). You can use that as well, but it will skip any preloading. It won't wait for the whole document to load before firing.

Ipsens

August 19th, 2006, 03:16 PM

I'm TAKING IT!!!

It doesn't matter if I wait a little longer. I already said that it doesn't need to show on screen ASAP, LOL!

Ok, can you give me a JS code now, plz?

Ipsens

August 19th, 2006, 03:25 PM

I got it all alone, YEA!

Altered part:

setTimeout(function(){
setInterval("displaytime()", 1000)
})

Crazy thing is that it loads even faster then window.onload

SOLVED!!!

Ipsens

PeejAvery

August 19th, 2006, 04:45 PM

Wait, what you have works but is not good. You function created a perpetual timer.

Use the following. This will set a one time wait timer.
setTimeout("displaytime()", 1000);

Ipsens

August 19th, 2006, 06:30 PM

Nah...
That didn't work.

But this did:

setTimeout(function(){
setInterval("displaytime()", 1000)
}, 1000)

PeejAvery

August 19th, 2006, 06:38 PM

But you should not use setInterval(). That will not cancel unless you cancel it through scripting. That will affect resources and CPU.

Ipsens

August 19th, 2006, 07:11 PM

It is NOT supposed to cancel, it is supposed to run till the end of time, LOL.
Why?
Because I inject starting time(which is server time at the moment of loading of page) with PHP into JS and from that time JS is supposed to count indefenitly. If that would stop after 15min. Then ticking server time would stop on a user screen and it wouldn't be dinamic(realtime) anymore.

Ipsens

PeejAvery

August 20th, 2006, 04:11 PM

Oh. I thought you wanted something different this whole time. I thought you wanted something to load and after it was loaded, to be done.

Ipsens

August 24th, 2006, 01:05 PM

Ok! One last thing left:

Regarding timer..., I 've set it up and it works flawlessly

<div id="dl">Number of ADs limit is reached.</div>

<script>
var c = '10'; fc(); function fc() {
if(c>=0){document.getElementById("dl").innerHTML = "Next ad in " + c.toFixed(1) +"seconds";
c = c - .1;setTimeout("fc()", 100)} else {location.replace('somewhere.php')}}
</script>

Now what i want here is to add PLAY and PAUSE.

<a href="#" onClick="play();">Play</a>

and

<a href="#" onClick="pause();">Pause</a>

Logicaly, one pauses countdown and second resumes it.

Now I need play(); and pause(); JavaScript functions and I'm finally done here!

Thx in advance!

Ipsens

PeejAvery

August 24th, 2006, 01:36 PM

What you need to do is give it a variable. Give that variable a value and if it is set to 1 continue with setTimeout(). If it is set to 0 don't.

I organized the code a little for easier reading.

Example:
<div id="dl">Number of ADs limit is reached.</div>

<script>
var playing = 1;
var c = '10';
function fc(){
if(c>=0){
document.getElementById("dl").innerHTML = "Next ad in " + c.toFixed(1) +"seconds";
c = c - .1;
if(playing == 1){setTimeout("fc()", 100);}
}
else{
location.replace('somewhere.php');
}
}
function changemode(which){
playing = which;
if(which == 1){setTimeout("fc()", 100);} //have to start the timer again
}
fc();
</script>

<input type="button" value="Play" onclick="changemode(1)">
<input type="button" value="Pause" onclick="changemode(0)">

Ipsens

August 24th, 2006, 02:41 PM

Works Flawlessly!

Many thanks for your effort. ;-)

Ipsens

PeejAvery

August 24th, 2006, 02:48 PM

Works Flawlessly!

Many thanks for your effort. ;-)
You're welcome.

Note: I called the fc() after the function was declared. In your original script it is before. This can cause JavaScript errors. Remember to always call a function after it is declared.

Ipsens

August 24th, 2006, 03:12 PM

I'll watch for that in a future, though, JS isn't my language. LOL!

Ipsens

PeejAvery

August 24th, 2006, 03:28 PM

I'll watch for that in a future, though, JS isn't my language. LOL!
JavaScript is very useful and very easy to learn. When you have some free moments, make it your friend. ;)

Ipsens

September 12th, 2007, 06:11 PM

Hey hey!
Houston we got a problem here!

I've found a out one unwanted effect. :wave:

If you click "play", while it is not paused, timer will countdown faster.

And the more you click "play", the more fast it counds down. :lol:

Code needs a little alteration to fix thi issue. :D

Help...

PeejAvery

September 12th, 2007, 06:16 PM

Whoa. You are coming back to a thread from a year ago. Next time, please just start a new thread.

To solve your problem...Why don't you just disable the button after you click it once. Then when you stop it, enable it.

Ipsens

September 12th, 2007, 06:44 PM

Because, I am not wasting time this way on explaining things again and posting same code again here. ;)

Hm..., Ok..., Can I have a code please?

I didn't learn JS because there was always something more interesting in PHP, Apache, MySQL, FreeBSD....

But now when I cam to AJAX..., well that is a something worth learning JS for.

AJAX + PHP !

Yes....

Now let's fix this please. :wave:

PeejAvery

September 12th, 2007, 07:31 PM

You didn't have to waste code. You just had to explain your problem.

Anyways...to disable a button.

<input type="button" id="theButton" value="Click Me">
<input type="button" value="Enable" onclick="enableButton()">
<input type="button" value="Disable" onclick="disableButton()">

<script type="text/javascript">
function disableButton(){
document.getElementById('theButton').disabled = true;
}
function enableButton(){
document.getElementById('theButton').disabled = false;
}
</script>

Ipsens

September 14th, 2007, 05:47 AM

Hey thanks, but .disable works only on input fields and buttons.
My case is like:
<a href="#"onclick="changemode(1)">Play</a> |::| <a href="# onclick="changemode(0)">Pause</a>

I've fixed by adding:
var running = 1;
So I could determine current state and decide will call to changemode function be honored. ;)

Yes, I learn very fast, but what was always rejecting me from JS, was a fact that each browser interprets it in its own way.

That fact is ultra frustrating for me! :mad:

PeejAvery

September 14th, 2007, 07:39 AM

That's called improvisation...and it's exactly what I would have suggested.

Don't forget to mark the thread resolved.

Ipsens

September 14th, 2007, 08:46 AM

Ok Thanks.