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

semiotically · #1 (**permalink**) September 26th, 2009, 02:21 AM

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.

Old Pedant · #2 (**permalink**) September 27th, 2009, 02:28 AM

Sorry, but what does this have to do with JSP???

You are talking about JavaScript, which runs in the browser. JSP runs on the web server. And almost the only thing that Java Server Pages (JSP) and JavaScript have in common is the first 4 letters of their name.

jomet · #3 (**permalink**) September 29th, 2009, 01:08 AM

post the ? in javascript forum..

http://p2p.wrox.com/javascript-85/

iamrakesh22 · #4 (**permalink**) October 1st, 2009, 09:34 AM

See the following URL. It explains how to add and remove events using javascript.
On button click you can remove the "onmousemove" event added to 'hmenu'

http://www.quirksmode.org/js/events_mouse.html

Try it out.

semiotically · #5 (**permalink**) October 1st, 2009, 09:56 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?

Rakesh, thank you, you may now also notice the buttons (the 1st goal: the original on/off/ effect). How can these target the scrolling; please post script... again I've tried various "hmenu.onclick="wtf!" 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.

P.S. Sorry for forum category I just read the first four letters hehe.

semiotically · #6 (**permalink**) October 1st, 2009, 10:06 PM

removed gaps:

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

iamrakesh22 · #7 (**permalink**) October 5th, 2009, 01:52 AM

Hi,
I tried to create a sample html page similar to your requirement, hope it helps!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sample document </title>
    <script type="text/javascript">
        // function similar to your "autoscroll()"
        function changeColor() {
            var cl = document.getElementById('heading').style.color;
            // alert(cl);
            if (cl == 'red') {
                document.getElementById('heading').style.color = 'green';
            } else if (cl == 'green') {
                document.getElementById('heading').style.color = 'red';
            }
        }
        // function to start animation of sort on mouse over
        function start() {
            document.getElementById('heading').onmouseover = changeColor;
        }
        // function to stop the move over event
        function stop() {
            document.getElementById('heading').onmouseover = null;
        }
        // initialization function on your page
        function init() { 
            // this can be done inline but wanted to keep it similar to your code
            document.getElementById('heading').onmouseover = changeColor;
        }
        // initialize on page load
        window.onload = init;
    </script>
</head>

<body>
    <h1 id="heading" style="color:red;">Sample Heading</h1>
    <input type="button" value="Start" onclick="start()" />
    <input type="button" value="Stop" onclick="stop()" />
</body>
</html>

iamrakesh22 · #8 (**permalink**) October 5th, 2009, 01:59 AM

There are couple of HTML validation errors, you might want to fix them!

Code:

<div id="hold"

should be

Code:

<div id="hold">

And forum moderator can help moving this post to appropriate category :-)

semiotically · #9 (**permalink**) October 5th, 2009, 08:10 PM

hey excellent example, I need one missing piece:

document.getElementById

the ascroll.js file is separate from the index.html (i.e. it is called from the <head>) how do I reference an element within ascroll.js from with the index.html?

Thanks, feeling more positive...

Sem.

semiotically · #10 (**permalink**) October 5th, 2009, 08:45 PM

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

Need to download code?

Navigation