Results 1 to 1 of 1

Thread: Slick Custom Scrollbar in IE

  1. #1
    Join Date
    Feb 2012
    Location
    Denmark
    Posts
    66
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    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?
    Last edited by jscheuer1; 04-23-2012 at 10:06 PM. Reason: merge/format

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •