Slick Custom Scrollbar in IE

**Mejse78** · 04-23-2012, 09:00 PM

Slick Custom Scrollbar script v1.1

Slick Custom Scrollbar

First of all: I LOVE this script.
But I have two questions?

1. In IE it follows my mouse until I click on it (So it spins out of control) - it doesn't do this in FF. How can I change that?

2. I tryed to make targets (link inside the same page) - and the target part works, but the scrollbar dissapears. And it's in an IFrame, so I have limited height. How can I change that?

My code on the page is this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<link href="css/styles_blog.css" rel="stylesheet" type="text/css" media="screen">
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />

<script type="text/javascript" src="js/slimbox2.js"></script>
<script type="text/javascript" src="js/162_jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>

<script src="js/slickcustomscroll.js">

	/***********************************************
	* Slick Custom Scrollbar script (c) Dynamic Drive (www.dynamicdrive.com)
	* This notice MUST stay intact for legal use
	* Visit http://www.dynamicdrive.com/ for this script and 100s more.
	***********************************************/

</script>
<script type="text/javascript">
      
    $( document ).ready( function() {
        $( "div[rel='scrollcontent1']" ).customscroll( { direction: "vertical" } );
        $( "div[rel='scrollcontent2']" ).customscroll( { direction: "horizontal", bounce:0 } );
    });
</script>
</head>

<body bgcolor="#FFF">
<div id="paper_blog" >
	<div>
    	<h4><a href="#script">SCRIPTS</a> | <a href="#grafisk">GRAFISK</a>| <a href="#opsætning">OPSÆTNING</a></h4>
    </div>
    
    <div id="scroll" scrolling=yes rel="scrollcontent1">

   		<div>
    		<a name="script"><h5>SCRIPTS</h5></a>
   		 </div>
               
		<div id="blog_1" class="rounded_1" >
		<h1>SLICK CUSTOM SCROLLBAR</h1>
        <h2>Author: PK for Dynamic Drive</h2>
        </div>
        
        <div id="blog_2" class="rounded_2">
        <p>Denne scrollbar er simpel at bruge og kræver ikke billeder.
        <br> 
        <b>Scrollbaren benytter jQuery:</b>
        <br><a href="js/162_jquery.min.js" target="_blank">1.6.2/jquery.min.js</a>
        <br><a href="js/jquery.mousewheel.min.js" target="_blank">jquery.mousewheel.min.js</a>
        <br>
        <br>        
        <h3><i><font color="#91968b"><b>Teknisk:</b>
        <br>
        Jeg har 
        <br>
        Jeg har.</font></i></h3>
        </p>
        	<div align=right > <A title="find scrollbar her" href="http://www.dynamicdrive.com/dynamicindex11/scrollc.htm" target="_blank"><IMG class=image_frame_link src="images/layout/links/dynamiccdrive2.gif"></A>                   
       	  </div>
        </div>
        
        <div id="blog_3" class="rounded_3" >
			<p><a href="http://www.tegnehulen.dk">www.tegnehulen.dk</a></p>
        </div>
           
		<div id="blog_1" class="rounded_1" >
            <h1>IMGBUBBLES - MENU</h1>
            <h2>Author: Dynamic Drive</h2>
        </div>
        
        <div id="blog_2" class="rounded_2">
            <p>Dette er scriptet til topmenu.
            <br>
            Denne menu har en rigtig skøn forstørrelses effekt.
            <br> 
            Man kan vælge at bruge social icons - eller lave grafikken selv.
            <br>
            Den være lidt tricky i forhold til at sætte størrelser på billeder og container. 
            <br>
            <br>
            <b>Imgbubbles benytter jQuery:</b>
            <br><a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" target="_blank">1.4.2/jquery.min.js</a>
            <br>
            <br>        
            <h3><i><font color="#91968b"><b>Teknisk:</b>
            <br>
            Jeg ændrede ..
            <br>
            Jeg har .</font></i></h3>
            </p>
                <div id="link-inline" > 
                    <ul>
                        <li><A title="find imgbubbles her" href="http://www.dynamicdrive.com/dynamicindex4/imagebubbles.htm" target="_blank"><IMG 
                        class=image_frame_link src="images/layout/links/dynamiccdrive2.gif"></A></li>
                        <li><A title="find social icons her" href="http://webtoolkit4.me/" target="_blank"><IMG class=image_frame_link src=	
                        "images/layout/links/wt42.gif"></A></li>
                        <li><A title="find social icons her" href="http://webtreats.mysitemyway.com/category/icons/" target="_blank"><IMG class
                        =image_frame_link src="images/layout/links/webtreats2.gif"></A></li>
                    </ul>
                                       
                </div>
      	</div>
             
        <div id="blog_3" class="rounded_3" >
		<p><a href="http://www.tegnehulen.dk">www.tegnehulen.dk</a></p>
        </div>
        
        <br>
        <br>
        <br>
        
   	<div>
    	<a name="grafisk"><h5>GRAFISK</h5></a>

        <div id="blog_1" class="rounded_1" >
            <h1>DEVIANTART</h1>
            <h2>The world's largest online art community</h2>
        </div>
        
        <div id="blog_2" class="rounded_2">
            <p>Deviantart er . 
            <br>
            Jeg bruger øvelse.
            <br> 
            Der er
            <br>
            </p>
                <div id="link-inline" > 
                    <ul>
                        <li><A title="find portræt tutorial her" href="http://mayalaya.deviantart.com/" target=
                        "_blank"><IMG class=image_frame_link src="images/layout/links/deviant.gif"></A></li>
                    </ul>
                                       
                </div>
      	</div>
        
        <div id="blog_3" class="rounded_3" >
		<p><a href="http://www.tegnehulen.dk">www.tegnehulen.dk</a></p>
        </div>
        <div id="blog_1" class="rounded_1" >
            <h1>BRUSHES</h1>
            <h2>Obsidian Dawn - by Stephanie</h2>
        </div>
        <div id="blog_2" class="rounded_2">
            <p>En dag 
            <br>
            Stephanie 
            <br> 
            Hun h
            <br>
            <h3><i><font color="#91968b">
            Det kan 
            <br>
            Man skal .</font></i></h3>
            </p>
                <div id="link-inline" > 
                    <ul>
                        <li><A title="find portræt tutorial her" href="http://www.youtube.com/watch?v=KZEZL6RBttQ&feature=player_embedded" target=
                        "_blank"><IMG class=image_frame_link src="images/layout/links/youtube.gif"></A></li>
                        <li><A title="find info om webdesign her" href="http://www.obsidiandawn.com/textures-brushes" target=	
                        "_blank"><IMG class=image_frame_link src="images/layout/links/obsidiandawn.gif"></A></li>
                    </ul>
                                       
                </div>
      	</div>
             
        <div id="blog_3" class="rounded_3" >
		<p><a href="http://www.tegnehulen.dk">www.tegnehulen.dk</a></p>
        </div>

<br>
        <br>
        <br>
   	<div>
    	<a name="opsætning"><h5>OPSÆTNING</h5></a>
    </div>
        <div id="blog_1" class="rounded_1" >
            <h1>CSS - TUTORIALS</h1>
            <h2>Timothy Training</h2>
        </div>
        <div id="blog_2" class="rounded_2">
            <p>Efter et 
            <br>
            Min første 
            <br> 
            Hos Timothy Training kan man få rigtig gode tips til brug af css.
            <br>
            Han har 
            <br>
	        <h3><i><font color="#91968b">
            I første omgang virker det til, at Timothy bruger Dreamweaver som en lidt avanceret notepad, da han skriver alle koderne fra bunden.
            <br>
            Der er ikke umiddelbart så megen teknisk viden om Dreamweaver, men der falder nogle små tips af her og der.</font></i></h3>
            </p>
                <div id="link-inline" > 
                    <ul>
                        <li><A title="find tutorials her" href="http://www.youtube.com/createthenet" target="_blank"><IMG 
                        class=image_frame_link src="images/layout/links/youtube.gif"></A></li>
                        <li><A title="find info om webdesign her" href="http://www.timothytraining.net/dreamweaver-tutorials-training.php" target=	
                        "_blank"><IMG class=image_frame_link src="images/layout/links/timothy1.gif"></A></li>
                    </ul>
                                       
                </div>
      	</div>
             
        <div id="blog_3" class="rounded_3" >
		<p><a href="http://www.tegnehulen.dk">www.tegnehulen.dk</a></p>
        </div>
        
 	</div>
</div>

</body>
</html>

Or is it in the css maybe?

I'm trying to make targets in an IFrame content.

I've been using this:

Code:

<a href="#script">SCRIPTS</a>

<a name="script"><h5>SCRIPTS</h5></a>

I've been using it together with the slick custom scrollbar, wich worked ok.
But when I clik on the link - and it scrolls down to the target - the scrollbar dissapears. The problem is, that the content in that target text is bigger (heigher) than the IFrame - and therefore I can't see it all.
When I click on the link to to the top; the scrollbar comes back...

I don't know if there are other ways to make theese targets, so the scrollbar won't dissapear - or I have to place the scrollbar some place else?

Can you help?

Thread: Slick Custom Scrollbar in IE

Thread Tools

Search Thread

Bookmarks

Bookmarks

Posting Permissions