Scrolling Div problem

**Pacificus** · 03-11-2011, 02:40 AM

I’ve just found a JavaScript for a horizontal scrolling div, but have little idea as to how to position it in my webpage.

I know little of programming/coding and am working on my first website. I’ve never added a script/code to a web design before. I’ve managed to adapt the code slightly to open an embedded webpage. I just need to know how to add the code to my web page so that it will be positioned on that page where I want it to be in relation to other items (header, hyperlinks, etc.).

This is the JavaScript in question. Thanks for any help:

Code:

<html>
<head>
<title>Demo</title>
<style type="text/css">
div#wn	{ 
    position:relative; 
    width:425px; height:850px; 
    overflow:hidden;	
	}
</style>
<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_scroll.js" type="text/javascript"></script>
<script src="js/scroll_controls.js" type="text/javascript"></script>
<script type="text/javascript">

function init_dw_Scroll() {
    var wndo = new dw_scrollObj('wn', 'lyr1', 't1');
    wndo.setUpScrollControls('scrollLinks');
}

// if code supported, link in the style sheet and call the init function onload
if ( dw_scrollObj.isSupported() ) {
    //dw_Util.writeStyleSheet('css/scroll.css');
    dw_Event.add( window, 'load', init_dw_Scroll);
}

</script>
</head>
<body>

<h1></h1>



<div id="wn">
    <div id="lyr1">
    <table id="t1" border="0" cellpadding="0" cellspacing="">
        <tr>
            <td><embed src="images/demo/index.html" width="832" height="803" alt="" /></td>
        
        </tr>
    </table>
    </div>
</div>  <!-- end wn div -->


<!-- border attribute added to reduce support questions on the subject. 
    If you like valid strict markup, remove and place a img {border:none;} spec in style sheet -->

<div id="scrollLinks">
    <a class="mouseover_left" href="#"><img src="images/tri-lft.gif" alt="" border="0" /></a>
    <a class="mouseover_right" href="#"><img src="images/tri-rt.gif" alt="" border="0" /></a>
</div>





</body>
</html>

**Pacificus** · 04-08-2011, 12:20 AM

I’m trying to make proper use of the (javaScript) horizontal scrolling div mouseover code (downloaded from this page: http://www.dyn-web.com/code/scroll/demos.php ), but failing miserably. I want to use this code to accommodate the thumbnails for my web gallery.

I have managed to figure out how to embed a webpage within the mouseover code, instead of just an image. But now I have three problems:

I am unable to change the background colour of the mouseover page from white to black,

I am unable to change the position of the mouseover scroll links relative to the viewing (scrolling) area. (I want to move them closer),

The embedded page containing the thumbnails is 1538 pixels in width. I am unable to embed this page without it containing an unwanted – and useless – horizontal scrollbar.

Please help me! I am a beginner at coding trying to create my first website. Ideally I would spend a year learning this stuff from the absolute basics, but need to get my site done more quickly than that.

Thanks in advance.

**jscheuer1** · 04-08-2011, 04:01 AM

I've merged your two threads as they appear to be about the same thing.

In order to help, we would need to see what you have.

Please put up a live demo of your best effort and give us a link to it.

**Pacificus** · 04-09-2011, 02:22 PM

Thanks.

I've actually managed to solve all problems stated in my above posts. A miracle occurred!

However, although my JavaScript mouseover code (complete with embedded thumbnails page) works perfectly during offline preview, it did not function online, after I uploaded it to the host.

I checked the code for correct file locations and could see no errors.

Do you know why a JavaScript code would work perfectly well offline but not after being uploaded? The mouseover script does contain a copyright notice stating that it may only be used non-commercially.

I'm using 000webhost.com, as it's free (I redirect my URL to it). Unfortunately, they have currently suspended my site pending an inspection to check for abuse! Perhaps my bumbling method of site uploading/downloading prompted this! It should be back in a few hours.

**jscheuer1** · 04-09-2011, 03:58 PM

Free hosts usually put scripts on all your pages. Sometimes these conflict with scripts you might want to use. Other times these host added scripts are specifically designed to not allow any scripts from you, or to not allow certain types of scripts and/or markup/linking behavior.

These latter type host scripts are generally designed to enforce the terms of service of the free host, so you should familiarize yourself with those and follow them.

I have seen it happen though that a script that doesn't violate the letter of the law - the terms of service, is still blocked by the host added script because it appears to the host added script as if it might violate the terms of service.

But there could be some other problem(s). I'm not familiar with that host. To be more specific I would need a link to your page on that host.

Also be aware that we here at the forums are prohibited by the forum rules from helping to get around restrictions imposed by a host. So if that's the problem, my only advice would be to find another host. There may still be free ones without these sort of restrictions. All free hosts are limited in some way though, if only as to bandwidth and content allowed.

**Pacificus** · 04-09-2011, 06:11 PM

Thanks for your reply.

My site is back online following a lifting of the restriction. I think it fell under their suspicion because FileZilla kept logging me off, and my up/down loading was erratic while I was trying to get things to work!

Below was (I decided to remove it!) a link to the mouseover script page, which I will embed within an iframe on the gallery page. The mouseover page does not work in my Firefox browser, and neither does it work in IE (tried on a different, and newer, PC. It does appear in Chrome but it does not function – it only shows the first 12 thumbnails and does not permit scrolling. The offline preview (of the mouseover page) works perfectly in Chrome (horizontal scrolling with mouse wheel, auto-scrolling when cursor hovers over either of the nav arrows):

In the perfectly functioning offline preview, when the cursor is held over a nav arrow the file location is displayed at the bottom of the browser (as is typical). This file location ends with #. However, in the non-functioning online version, an incomplete file location is displayed. It also ends with # but omits the mouseover html file (mouseover/index.html# in the online version; mouseover scrolling code 2.html in the preview version).

Thanks.

**Pacificus** · 04-09-2011, 06:23 PM

I don't know why but it is suddenly working now! However, when the page loads a pop-up message appears stating that the code is only to be used for personal use. The site viewers need not read that message and it interferes with the viewing experience. Therefore, is there a way to block it? There are about 4-pages of code associated with the mouseover function, so what should I look for in them that is specific to the small pop-up?

Thread: Scrolling Div problem

Thread Tools

Search Thread

Help needed to position div

Scrolling Div problem

Bookmarks

Bookmarks

Posting Permissions