Have you tried to create a nice rich experience and then been fighting the “defaults” to go the extra mile? This hits me and thought of providing you with CSS ScrollBar.
This custom ScrollBar was Shamelessly stolen from maxvoltar.com, which in turn was shamelessly stolen from chatrboxapp.com
All You Have to do is to link the CSS File into your html code and wrap your entire body into <div id="wrapper">.....body......</div> of-course you can change the id name and scrollBar and many other properties.
<script src="jquery.js">
<link rel=stylesheet href="css file path">
<div id="wrapper">
body
</div>
Check out that pretty orange scrollbar on the image below.it really looks FREAKING awesome check out the Demo
<script src="jquery.js">
<link rel=stylesheet href="css file path">
<div id="wrapper">
body
</div>
Check out that pretty orange scrollbar on the image below.it really looks FREAKING awesome check out the Demo
DEMO
Image Enlarge On Mouse Hover Using CSS
Image Enlarge On Mouse Hover Using CSS
I was looking for a image enlarge script on Google,all i found was large scripts using jquery and javascripts and they were seriously useless and complicated.i wanted a smooth zoom effect on mouse Hover.i even searched for CSS but the results were not satisfying.But at the end i found css3 transitions effect through which i can achieve the result shown below :)
The code is very easy.
<style>
img#large
{
cursor: pointer;
-webkit-transition-duration: .7s;
-moz-transition-duration: .7s;
-o-transition-duration: .7s;
}
img#large:hover
{
width:500;
height:500;
}
</style><body>
<img height="100" id="large" src="YOUR IMAGE PATH" width="100" /></div>
</body>This is it play with the attributes of image and zoom as many as images you want.just keep on adding the images inside the body tag :)
Features:
Easy to embed into an HTML document;
Compatible with Internet Explorer and FireFox;
Full JavaScript: no plugin, no Java, no ActiveX;
Supports full HTML, including images, links and any other tags;
Smooth scrolling;
Very small script - fast to download;
Easy to customize;
Free for personal and commercial use.
To include a ticker in an HTML document, put the .js file in the same folder than your HTML document and add the following code where you want the ticker to be visible:
<DIV ID="TICKER" STYLE="overflow:hidden; width:520px"> My First Ticker!</DIV>
<script type="text/javascript" src="webticker_lib.js" language="javascript"></script>
If you want the scrolling to stop when the mouse is over it, try this code instead:
<DIV ID="TICKER" STYLE="overflow:hidden; width:520px" onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false">My First Ticker!</DIV><script type="text/javascript" src="webticker_lib.js" language="javascript"></script>
Here is an HTML document displaying the scrolling ticker:
<HTML><BODY><DIV ID="TICKER" STYLE="overflow:hidden; width:520px"> My First Ticker!</DIV>
<script type="text/javascript" src="webticker_lib.js"></script></BODY> </HTML>
You can edit the file webticker_lib.js and change the values for the following variables:
TICKER_RIGHTTOLEFT = false;
TICKER_SPEED = 2;
TICKER_STYLE = "font-family:Arial; font-size:12px; color:#444444";
TICKER_PAUSED = false;
Download the Source Code :)
