button to dynamically affect pre-existing javascript... try

semiotically · Joined: 28 May 2009 Posts: 20

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.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3598 Location: Biloxi, MS

That page is certainly not designed for Firefox or any other browser. Need to clean up your coding errors before attempting to make additions.

CSS Errors

HTML Errors

semiotically · Joined: 28 May 2009 Posts: 20

I'd prefer to do it the other way round...

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3598 Location: Biloxi, MS

Then go for it. That's not how you fix problems.

semiotically · Joined: 28 May 2009 Posts: 20

I need to know its possible to do this first, once I'm sure I can I will tidy code... I need to know this design has right concept and theory first before implementing anything...

If you are saying you can't modify the javascript without this tidying then make the corrections and add the javascript and maybe I'll believe you...

semiotically · Joined: 28 May 2009 Posts: 20

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

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="wtf!" 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.

semiotically · Joined: 28 May 2009 Posts: 20

removed gaps:

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

semiotically · Joined: 28 May 2009 Posts: 20

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..?

semiotically · Joined: 28 May 2009 Posts: 20

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>

semiotically · Joined: 28 May 2009 Posts: 20

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?