Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Java > Java and JDK > JSP Basics
| Search | Today's Posts | Mark Forums Read
JSP Basics Beginning-level questions on JSP. More advanced coders should post to Pro JSP.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the JSP Basics section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old September 26th, 2009, 01:21 AM
Authorized User
 
Join Date: Aug 2009
Posts: 18
Thanks: 0
Thanked 0 Times in 0 Posts
Arrow 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.
  #2 (permalink)  
Old September 27th, 2009, 01:28 AM
Friend of Wrox
 
Join Date: Jun 2008
Location: Snohomish, WA, USA
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

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.
  #3 (permalink)  
Old September 29th, 2009, 12:08 AM
jomet
Guest
 
Posts: n/a
Default

post the ? in javascript forum..

http://p2p.wrox.com/javascript-85/
  #4 (permalink)  
Old October 1st, 2009, 08:34 AM
Friend of Wrox
 
Join Date: Mar 2007
Location: Hyderabad, A.P., India.
Posts: 373
Thanks: 0
Thanked 1 Time in 1 Post
Default

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.
__________________
- Rakesh
http://iam-rakesh.blogspot.com
  #5 (permalink)  
Old October 1st, 2009, 08:56 PM
Authorized User
 
Join Date: Aug 2009
Posts: 18
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.
  #6 (permalink)  
Old October 1st, 2009, 09:06 PM
Authorized User
 
Join Date: Aug 2009
Posts: 18
Thanks: 0
Thanked 0 Times in 0 Posts
Default

removed gaps:

.mh_menu li
{
float: left;
display: block;
padding-left:0px;
padding-right:0px;
}
  #7 (permalink)  
Old October 5th, 2009, 12:52 AM
Friend of Wrox
 
Join Date: Mar 2007
Location: Hyderabad, A.P., India.
Posts: 373
Thanks: 0
Thanked 1 Time in 1 Post
Default

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>
__________________
- Rakesh
http://iam-rakesh.blogspot.com
  #8 (permalink)  
Old October 5th, 2009, 12:59 AM
Friend of Wrox
 
Join Date: Mar 2007
Location: Hyderabad, A.P., India.
Posts: 373
Thanks: 0
Thanked 1 Time in 1 Post
Default

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 :-)
__________________
- Rakesh
http://iam-rakesh.blogspot.com
  #9 (permalink)  
Old October 5th, 2009, 07:10 PM
Authorized User
 
Join Date: Aug 2009
Posts: 18
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.
  #10 (permalink)  
Old October 5th, 2009, 07:45 PM
Authorized User
 
Join Date: Aug 2009
Posts: 18
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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




Similar Threads
Thread Thread Starter Forum Replies Last Post
dynamically add a new row to a existing GridView srkvellanki ASP.NET 2.0 Professional 1 September 21st, 2008 09:15 PM
Will static dataset affect the performance? hhkris4u ASP.NET 1.0 and 1.1 Professional 1 January 9th, 2007 12:05 PM
Accessing a Pre-existing Shape on a Worksheet excelthoughts C# 0 June 21st, 2006 02:00 AM
javascript - add element to existing xml? willgotoo XML 4 October 8th, 2004 09:33 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.