PDA

View Full Version : Slick Custom Scrollbar in IE



Mejse78
04-23-2012, 09:00 PM
Slick Custom Scrollbar script v1.1

Slick Custom Scrollbar (http://www.dynamicdrive.com/dynamicindex11/scrollc.htm)

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:


<!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:

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