button to dynamically affect pre-existing javascript... you'll see...

Sem_White · 09-25-2009, 11:37 PM

A friend modified a code to make a scrollable horizontal menu, that I use as the basis for my site:

The code can be found here: http://www.semiotically.com/ascroll.js
The site is http://www.semiotically.com

I really enjoy the fun aspect of the scrolling, I would now like to add a button underneath that on clicking will stop the JS code, so users can browse without the speedy scrolling, and once they want to rescroll again: to be able to click this button again to turn it back on...

How do I make this button that targets the pre-existing javascript with on/off/on/off affect?

Thanks guys.

Sem_White · 10-01-2009, 06:58 PM

I've calmed it down a little... If you know how to achieve the following you may be able to tame it ;)

I noticed something at the same time: If I can remove the gaps between the IFrames (that contain the pdf's, guestbooks, movies etc), then the only area that could cause scrolling would be thin pale green area, the secondary goal I was looking for (so taking out 2 birds with 1 stone)...

I'm such an amateur I've added so much miscellaneous CSS to try and remove these pixels it's surreal... so how can I do this?

You may also notice the buttons (the 1st goal: the original on/off/ effect). If anyone knows how to target the scrolling from these please post script... again I've tried various "hmenu.onclick="***!" so if you mean business please enlighten this rookie.

Sorry for delay in replies I enabled 'instant notification' I'm sure?!? I will just check website regularly in future.

Thanks again.

Sem_White · 10-01-2009, 07:06 PM

removed gaps:

.mh_menu li
{
float: left;
display: block;
padding-left:0px;
padding-right:0px;
}

Sem_White · 10-05-2009, 05:54 PM

I tried (at least as far as I can imagine it might implement successfully)

so please!!!

I have this in script in head:
<script>
// function to start animation of sort on mouse over
function start() {
document.getElementById('hmenu').onmouseover = autoscroll(e);
}
// function to stop the move over event
function stop() {
document.getElementById('hmenu').onmouseover = null;
}
// initialize on page load
window.onload = init;
</script>

And this code at very end of <body>

<h1 id="hmenu" style="color:red;"></h1>
<input type="button" value="StartScroll" onclick="start()" />
<input type="button" value="StopScroll" onclick="stop()" />

I can see the way the buttons are not going to activate the script just I don't know the way to do this..?

**jamiemac2005** · 10-06-2009, 04:01 AM

You're making too much effort out of this, by killing and re-instating the event handler you risk memory leaks and making the site laggy as hell... (I used to do this a lot though so don't worry, we have all coded in this way at one time or another).

All you need to do is create a variable to hold whether to scroll or not:

Code:

var keepScrolling=true;

Then change the autoscroll function to look something like this:

Code:

function autoscroll(e)
		{
                //If the boolean is set to false, stop the function here rather than continuing
                 if(keepScrolling==false) return;
                 var mousx = 0;
	        var mousy = 0;
	        var doid=this.id;
	        var dobj=document.getElementById(doid);
	        if (!e) var e = window.event;
	        if (e.pageX || e.pageY)
	         	{
		            mousx = e.pageX;
		            mousy = e.pageY;
	             }
	        else if (e.clientX || e.clientY)
	         	{
		            mousx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		            mousy = e.clientY + document.body.scrollTop	+ document.documentElement.scrollTop;
	            }
	        var offx = offy = 0;
	        while(dobj) // calculate the actual x&y offsets of the element to be scrollled 
	            {
	                offx+=dobj.offsetLeft;
	                offy+=dobj.offsetTop;
	                dobj=dobj.offsetParent;
	            }
	        relx=mousx-offx; // Relative mouse positions wrt the element
	        rely=mousy-offy;
	        dobj=document.getElementById(doid);
	        var margn=dobj.offsetWidth/10;
	        if(relx<margn) relx=margn;
	        if(relx > (dobj.offsetWidth-margn)) relx=dobj.offsetWidth-margn;
		    dobj.finy=parseInt(( dobj.scrollHeight - dobj.offsetHeight ) * (rely-margn) / (dobj.offsetHeight-2*margn));
		    dobj.finx=parseInt(( dobj.scrollWidth  - dobj.offsetWidth ) * (relx-margn) / (dobj.offsetWidth-2*margn));
		    if(!dobj.speedy && !dobj.speedx) // If not already scrolling
		  	    {   dobj.speedy=0;
		  	        dobj.speedx=0;
		  	        scrollToFin(doid);
		        }
		 }

Then change your start and stop functions to the following:

Code:

function start() {
keepScrolling=true;
}
// function to stop the move over event
function stop() {
keepScrolling=false;
}

I haven't tested this because this script became quite long-winded and mimicing it on my own pc would take a little more effort. But i'm certain it should work.

Cheers,
Jamey

Sem_White · 10-06-2009, 05:54 AM

this works...

<head>
<script type="text/javascript" src="http://www.semiotically.com/ascroll.js"></script>
<script type="text/javascript" >
function init (){
document .getElementById ('hmenu').onmousemove=autoscroll;
}
window.onload = init;
</script>

<script>
// function to start animation of sort on mouse over
function start() {
document.getElementById('hmenu').onmousemove = autoscroll;
}
// function to stop the move over event
function stop() {
document.getElementById('hmenu').onmousemove = null;
}
// initialize on page load
window.onload = init;
</script>
</head>

<body>
<h1 id="hmenu" style="color:red;"></h1>
<input type="button" value="StartScroll" onclick="start()" />
<input type="button" value="StopScroll" onclick="stop()" /> now working...
</body>

-----------------------------------------------------

Jamey I'll try to improve things based on your recommendations...

Sem_White · 10-06-2009, 06:06 AM

Jamey, where does this piece go?

var keepScrolling=true;

**jamiemac2005** · 10-06-2009, 06:22 AM

That piece would go in global scope (anywhere that's not in a function within your script, preferably at the top of the script)...

Code:

<script language="javascript">
var keepScrolling = true;
//... the rest of your code here

Though if your first script works and does not leave the browser lagging then you should be fine as it is. (Check on all browsers, or at least FF and IE).

Cheers,
Jamey

Sem_White · 10-06-2009, 08:08 PM

hi another implementation.

1. Am using this script:

<script language=javascript>function loadsource()
{
var defaultPage = "tweets.html";
var query = window.location.search.substring(1);
var pos = query.indexOf('=');
if (pos > 0)
{
var frameSource = query.substring(pos+1);
window.frames["righthere"] .location = frameSource;
}
else
{
window.frames["righthere"] .location = defaultPage;
}
}
</script>

with this code:

<body onLoad="loadsource()">

This scipt allows me to load external content into IFrames (within index.html), try if you wish: http://www.semiotically.com/index.html?fs=cv.pdf

THE ISSUE:

When using <body onLoad="loadsource()"> it intereferes with the scrolling script, and although still works you have to manually click start scrolling button. So how can I alter this little snippet to achieve same effect though with the scrolling still active straightaway?

09-25-2009, 11:37 PM	#1 (permalink)
Sem_White Registered User Join Date: Jun 2008 Posts: 35 OS: XP SP3	button to dynamically affect pre-existing javascript... you'll see... A friend modified a code to make a scrollable horizontal menu, that I use as the basis for my site: The code can be found here: http://www.semiotically.com/ascroll.js The site is http://www.semiotically.com I really enjoy the fun aspect of the scrolling, I would now like to add a button underneath that on clicking will stop the JS code, so users can browse without the speedy scrolling, and once they want to rescroll again: to be able to click this button again to turn it back on... How do I make this button that targets the pre-existing javascript with on/off/on/off affect? Thanks guys.

10-01-2009, 06:58 PM	#2 (permalink)
Sem_White Registered User Join Date: Jun 2008 Posts: 35 OS: XP SP3	Re: button to dynamically affect pre-existing javascript... you'll see... I've calmed it down a little... If you know how to achieve the following you may be able to tame it ;) I noticed something at the same time: If I can remove the gaps between the IFrames (that contain the pdf's, guestbooks, movies etc), then the only area that could cause scrolling would be thin pale green area, the secondary goal I was looking for (so taking out 2 birds with 1 stone)... I'm such an amateur I've added so much miscellaneous CSS to try and remove these pixels it's surreal... so how can I do this? You may also notice the buttons (the 1st goal: the original on/off/ effect). If anyone knows how to target the scrolling from these please post script... again I've tried various "hmenu.onclick="***!" so if you mean business please enlighten this rookie. Sorry for delay in replies I enabled 'instant notification' I'm sure?!? I will just check website regularly in future. Thanks again.

10-01-2009, 07:06 PM	#3 (permalink)
Sem_White Registered User Join Date: Jun 2008 Posts: 35 OS: XP SP3	Re: button to dynamically affect pre-existing javascript... you'll see... removed gaps: .mh_menu li { float: left; display: block; padding-left:0px; padding-right:0px; }

10-05-2009, 05:54 PM	#4 (permalink)
Sem_White Registered User Join Date: Jun 2008 Posts: 35 OS: XP SP3	Re: button to dynamically affect pre-existing javascript... you'll see... I tried (at least as far as I can imagine it might implement successfully) so please!!! I have this in script in head: <script> // function to start animation of sort on mouse over function start() { document.getElementById('hmenu').onmouseover = autoscroll(e); } // function to stop the move over event function stop() { document.getElementById('hmenu').onmouseover = null; } // initialize on page load window.onload = init; </script> And this code at very end of <body> <h1 id="hmenu" style="color:red;"></h1> <input type="button" value="StartScroll" onclick="start()" /> <input type="button" value="StopScroll" onclick="stop()" /> I can see the way the buttons are not going to activate the script just I don't know the way to do this..?

10-06-2009, 05:54 AM	#6 (permalink)
Sem_White Registered User Join Date: Jun 2008 Posts: 35 OS: XP SP3	Re: button to dynamically affect pre-existing javascript... you'll see... this works... <head> <script type="text/javascript" src="http://www.semiotically.com/ascroll.js"></script> <script type="text/javascript" > function init (){ document .getElementById ('hmenu').onmousemove=autoscroll; } window.onload = init; </script> <script> // function to start animation of sort on mouse over function start() { document.getElementById('hmenu').onmousemove = autoscroll; } // function to stop the move over event function stop() { document.getElementById('hmenu').onmousemove = null; } // initialize on page load window.onload = init; </script> </head> <body> <h1 id="hmenu" style="color:red;"></h1> <input type="button" value="StartScroll" onclick="start()" /> <input type="button" value="StopScroll" onclick="stop()" /> now working... </body> ----------------------------------------------------- Jamey I'll try to improve things based on your recommendations...

10-06-2009, 06:06 AM	#7 (permalink)
Sem_White Registered User Join Date: Jun 2008 Posts: 35 OS: XP SP3	Re: button to dynamically affect pre-existing javascript... you'll see... Jamey, where does this piece go? var keepScrolling=true;

10-06-2009, 06:22 AM	#8 (permalink)
jamiemac2005 Design Team Member Join Date: Jul 2007 Location: Coventry, UK Posts: 1,873 OS: Vista, various linux distros	Re: button to dynamically affect pre-existing javascript... you'll see... That piece would go in global scope (anywhere that's not in a function within your script, preferably at the top of the script)... Code: <script language="javascript"> var keepScrolling = true; //... the rest of your code here Though if your first script works and does not leave the browser lagging then you should be fine as it is. (Check on all browsers, or at least FF and IE). Cheers, Jamey __________________ Myspace

10-06-2009, 08:08 PM	#9 (permalink)
Sem_White Registered User Join Date: Jun 2008 Posts: 35 OS: XP SP3	Re: button to dynamically affect pre-existing javascript... you'll see... hi another implementation. 1. Am using this script: <script language=javascript>function loadsource() { var defaultPage = "tweets.html"; var query = window.location.search.substring(1); var pos = query.indexOf('='); if (pos > 0) { var frameSource = query.substring(pos+1); window.frames["righthere"] .location = frameSource; } else { window.frames["righthere"] .location = defaultPage; } } </script> with this code: <body onLoad="loadsource()"> This scipt allows me to load external content into IFrames (within index.html), try if you wish: http://www.semiotically.com/index.html?fs=cv.pdf THE ISSUE: When using <body onLoad="loadsource()"> it intereferes with the scrolling script, and although still works you have to manually click start scrolling button. So how can I alter this little snippet to achieve same effect though with the scrolling still active straightaway?