Web Solution 4U: JavaScript

Showing posts with label JavaScript. Show all posts

Monday, May 11, 2015

Important Things in JavaScript | Closure in JavaScript | New Operators in JavaScript

1) Extension Method or Prototype in JavaScript

<script type="text/javascript">
            function Person(fname, lname) {
                this.firstName = fname;
                this.lastName = lname;
            }


            Person.prototype = {
                model: {
                    name: "Welcome"
                },
                eventbinder: function () {
                    return this.controller(); //.eventbinder();
                },
                controller: function () {
                    alert(this.model.name);
                },
                obj: "hello"
            };
            var p = new Person("Hari", "Prasad");
            var s = p.controller();
            var d = p.obj;
        </script>

2) Closure in JavaScript

A closure is a function having access to the parent scope, even after the parent function has closed.

Normally, the local variables within a function only exist for the duration of that function's execution.

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

3) Differentiate between == and ===?

Both are companrision operator in javascript and use to compare values. Difference between **

== and === is

While using == javascript use typeCast before comparing variables. For example:-

var j=1,c="1";
console.log(j==c)      // Will result True

console.log(j===c)      // Will result False

Because === operator doesn't perform typeCasting it is faster than == operator.

!== Also follow the same behaviour deffrence compare to != Operator.

Thursday, April 11, 2013

Calculate dynamic height of iFrame | how to calculate content height of iFrame | Acces iframe parent tag id

Using iFrame is very wrong approach to achieve any functionality. But due to some reasons we have to use iframe in our application.

After using iframe in application our main problem becomes that how to give it dynamic height. As we all know that in dynamic site we can't fix our content height. after long time gooling i found best script which can set its height after calculating its content height.

Not only you can set its height according to its height also you can change attribute of iframe parent ID also.

I hope this will help to work with iframe and make your task easy.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
   
        function resizeIframe(iframeID) {
            var iframe = window.parent.document.getElementById(iframeID);
            var container = document.getElementById('content');
            iframe.style.height = container.offsetHeight + 'px';
        } 
    </script>
</head>
<body>
    <div id="content">
        What I have done in the past is use a trigger from the iframe'd page in window.onload
        (NOT domready, as it can take a while for images to load) to pass the page's body
        height to the parent.What I have done in the past is use a trigger from the iframe'd
        page in window.onload (NOT domready, as it can take a while for images to load)
        to pass the page's body height to the parent.What I have done in the past is use
        a trigger from the iframe'd page in window.onload (NOT domready, as it can take
        a while for images to load) to pass the page's body height to the parent.What I
        have done in the past is use a trigger from the iframe'd page in window.onload (NOT
        domready, as it can take a while for images to load) to pass the page's body height
        to the parent.What I have done in the past is use a trigger from the iframe'd page
        in window.onload (NOT domready, as it can take a while for images to load) to pass
        the page's body height to the parent.</div>
    </div>
    <script type="text/javascript">
        resizeIframe('slideshow_frame');
    </script>
</body>
</html>

Just copy and paste this code block in your iframe.

I have use this script code in our project if you are not able to use this please share your problem with me. May be i can help you.

Thursday, January 3, 2013

Basic Questions in Jquery, Interview Questions for UI Developer, Interview Questions for JQuery, Interview Question ask by Recuriter in jQuery

Q1     What is jQuery ?
Ans.   jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, animating, event handling, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. Jquery is build library for javascript no need to write your own functions or script jquery all ready done for you.

Q2    What the use of $ symbol in Jquery?
Ans: $ Symbol is just replacement of jquery means at the place of $ you may use jquery hence $ symbol is used for indication that this line used for jquery.

Q3: How do you select an item using css class or ID and get the value by use of jquery?
Ans: If an element of html like < div> , < p> or any tag have ID MyId and class used MyClass then we select the element by below jquery code
Code:
$('#MyId') for ID and for classs $('.MyClass')
and for value
Code:
var myValue = $('#MyId').val();
// get the value in var Myvalue by id
Or for set the value in selected item

Code:
$('#MyId').val("print me");
// set the value of a form input

Q4:   What are the different type of selectors in Jquery?
Ans: There are 3 types of selectors in Jquery
1. CSS Selector
2. XPath Selector
3. Custom Selector

Q5:   How can you select all elements in a page using jQuery?
Ans: To select all elements in a page, we can use all selectors, for that we need to use *(asterisk symbol).
<script language="javascript" type="text/javascript">
         $("*").css("border", "2px dotted red");
</script>

Q6:   What is the use of EQ in Jquery?
Ans: The eq( index ) method reduces the set of matched elements to a single element.
Syntax:
Here is the simple syntax to use this method:
selector.eq( index )

Q6:   What is the difference between height and outerheight in jquery?
Ans: The .height() method gets or sets the height of the HTML element. To get the height of an HTML element, you would use .height() like below:
        $("#myDiv").height();
The .outerHeight() method gets the height of the HTML element and includes the top and bottom padding and the border. If the argument is set to true, it will also include the top and bottom margins. The value is expressed in pixels (px) and is a numeric value. To get the outer height without the margins, you would use:
        $("#myDiv").outerHeight();

Q7:   What does .size() method of jquery return ?
Ans: .size() method of jquery returns number of element in the object. That means that you can count the number of elements within an object.

For example :-
$(document).ready(function(){
var Count = $("div").size();
alert(Count);
});

Q8: What document.ready() is use in jQuery?
Ans: It indicates that the DOM of the page is ready and we can start manipulating the DOM elements even though other parts
of the page content(e.g. images/other external resources) are not fully loaded.As soon as the DOM is loaded,
everything inside the (document).ready() should be load even before the page contents are loaded.

Q9:   What is diffrence between javascript onload and document.ready()?
Ans:   The onLoad function for the window object executes after the entire page is fully loaded.Untill DOM tree is completely created and all images/other associated resources (like audio files,video files etc) are fully loaded,this onLoad function is never executed and hence the script execution needs to wait till the page is loaded.

But the document.ready() method of JQuery indicates that the DOM of the page is ready and we can start manipulating the DOM elements even though other parts of the page content(e.g. images/other external resources) are not fully loaded. As soon as the DOM is loaded, everything inside the (document).ready() should be load even before the page contents are loaded.

Q10: What is chaining method in jquery?
Ans: In jQuery most of the methods returns a jQuery object that you can then use to call another method. This allows you to do command chaining, where you can perform multiple methods on the same set of elements, which is really neat because it saves you and the browser from having to find the same elements more than once.

Here's an example:

$('div').css('border','solid 1px red').attr('class','active');

Saturday, December 24, 2011

menu open on click and hide when we click outside of div or blank body

Most of time I got stuck when I see click menu into facebook and gmail for opening their account information.
I tried lots of time to make same kind of script or jquery code. But not able to find it anywhere on websites.

So tried to make it by myself and create a little jquery code which perform same work for me.

I hope this will help my designer friends to achieve that kind of functionality.

Example

<div class="userinfo">

<a href="javascript:void(0);" class="selnot">User Info</a>
<ul class="hide">
<li class="user"><asp:Label ID="lblUserName" runat="server" Text=""></asp:Label></li>
<li class="to"><asp:Label ID="lblTotalPost" runat="server" Text=""></asp:Label></li>
<li class="fa"><asp:Label ID="lblTotalFcebookPost" runat="server" Text="Label"></asp:Label></li>
<li class="in"><asp:Label ID="lblTotalLinkedinPost" runat="server" Text="Label"></asp:Label></li>
<li class="tw"><asp:Label ID="lblTotalTwitterPost" runat="server" Text="Label"></asp:Label></li>
<li class="out"><asp:LinkButton ID="lnkBtnLogout" runat="server" OnClick="lnkBtnLogout_Click">Logout</asp:LinkButton></li>
</ul>
</div>
<script type="text/javascript">
$(".selnot").click(function() {

if ($(this).next("ul").attr("class") == "show") {
$(this).next("ul").removeClass("show");
$(this).next("ul").addClass("hide");
}
else {
if ($(this).next("ul").attr("class") == "hide") {
$(this).next("ul").removeClass("hide");
$(this).next("ul").addClass("show");
}
}
});

$(document).click(function(e) {
if (e.target.className != "selnot") {
$("ul").removeClass("show");
$("ul").addClass("hide");
}
});

</script>

This Jquery use DOCUMENT Click to find on which Class we have made click.
If its not our menu class it disable our Menu to show.

Monday, August 8, 2011

Blink effect in html, Blinking effect, Blinking effect using J-Query, new effect without image, jquery effect of changing color

Blinking text animation is use to catch the user attraction for a particular thing or feature.
This effect is widely use for New link, services, and feature of websites. We can achieve this blink effect using CSS by using CSS attribute.

But this CSS attribute do not have support for all browsers. I have created a simple jquery script code to do the Blink effect in my companies website to achieve the same feature.

Now I want to share that Script code with my web friends.

JQuery Script Code

var i = 1;



function color() {



//alert(1);



if (i == 1) {



$('.txt').css("color", "red");



i += 1;



return;



}



if (i == 2) {



$('.txt').css("color", "black");



i += 1;



return;



}



if (i == 3) {



$('.txt').css("color", "blue");



i += 1;



return;



}



if (i == 4) {



$('.txt').css("color", "orange");



i = 1;



return;



}



}



setInterval(color, 400);

Put this script code before end of body tag.
give the class name "txt" to text for whom you want color animation.

you can increase the time of changing color animation by increase the value of 400 to your value in code.

setInterval(color, 400);

you can also change the color code according to your requirement.

Also put Jquery Library file.
JavaScript Library File

Thursday, July 28, 2011

Random image on refresh using javascript, Change image on every refresh, Another Picture, every refresh

Changing things on every refresh to your website is attractive feature to retain your visitors to your website.

Because it create suspense into visitor about the next information.

So I want to share this JavaScript.

JavaScript Code

var ranNum = Math.floor(Math.random() * 3);
        //alert(ranNum);
        var quote = new Array(3)
        var lnk = new Array(3)


          quote[0] = "home/modeltiranga.jpg";
          quote[1] = "home/modelbeauty.jpg";        
          quote[2] = "home/modeltiranga.jpg";


          lnk[0] = "product_category.aspx?id=446";      

          lnk[1] = "Product_category.aspx?samemodel=17440"; 
          lnk[2] = "product_category.aspx?id=446";

Put this code into HEAD tag.

HTML Code

put this code into BODY tags

Friday, July 22, 2011

javascript marquee example, JavaScript Marquee, horizontal scroller text using Jquery, Jquery tutorial to create Marquee effect, simple Jquery tmple Jquery to o create Marquee, horizontal ticker using jquery

Marquee is nice and useful feature for New news and promotions of website for which most of designer and Developers are used marquee tag and its attributes.

Now these days web accessibility is become must for websites due to make website GOOGLE friendly. So google can easily crawl them.

But according to W3C Marquee is not more with HTML tag family it shows error in W3C validation.

after searching long time to web I found the REPLACEMENT of Marquee using JQUERY and this information I would like to share with my designer and Developer friends using this Post.

Its very simple to use and implement into our website whether its Dynamic or static.

HTML CODE

<ul id='ticker02'>

 <li><a href="#">Hello 1</a></li>
 <li><a href="#">Hello 2</a></li>
 <li><a href="#">Hello 3</a></li>
 <li><a href="#">Hello 4</a></li>
 <li><a href="#">Hello 5</a></li>

</ul>

<script type="text/javascript" language="javascript"> 
//<![CDATA[ 
$(function(){ $("ul#ticker02").liScroll({travelocity: 0.03}); }); 
//]]> 
    </script>

CSS CODE

.tickercontainer {

}

.tickercontainer .mask {

}

ul.newsticker {

}

ul.newsticker li {

}

ul.newsticker a {

}

ul.newsticker span {

}

Now just need to add two Script file URL given Below you can save them too.
https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
https://www.obcindia.co.in/obcnew/site/common/css/jquery.li-scroller.1.0.js

Wednesday, July 6, 2011

jquery tutorial for check all checkbox, Select Multiple checkbox, JQuery Check and Uncheck All Checkboxes

This function is specially designed for dynamic pages with varying numbers of checkboxes.

I found same functionality in JavaScript too but we can't use same script for two control.

So i decide to create Jquery for same script here I am providing both SCRIPT code for JavaScript and Jquery.

JavaScript

function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
 if(!document.forms[FormName])
  return;
 var objCheckBoxes = document.forms[FormName].elements[FieldName];
 if(!objCheckBoxes)
  return;
 var countCheckBoxes = objCheckBoxes.length;
 if(!countCheckBoxes)
  objCheckBoxes.checked = CheckValue;
 else
  // set the check value for all check boxes
  for(var i = 0; i < countCheckBoxes; i++)
   objCheckBoxes[i].checked = CheckValue;
}

Jquery


 $('#ctl00_ContentPlaceHolder1_chkPending').live('click',function() {
            if(pending==0){
            $("#ctl00_ContentPlaceHolder1_chkPending").attr("checked", false);
            $("#ctl00_ContentPlaceHolder1_chkPendingList input:checkbox").each(function() {
                $(this).attr("checked", false);
            });
            pending=1;
            }
            else
            {
            $("#ctl00_ContentPlaceHolder1_chkPending").attr("checked", true);
            $("#ctl00_ContentPlaceHolder1_chkPendingList input:checkbox").each(function() {
                $(this).attr("checked", true);
            });
            pending=0;
            }
        });

Please do not forget to add Jquery library file.
https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js

You all need to do is put two id's into script.
$("#ctl00_ContentPlaceHolder1_GridView1_ctl01_ChkAll").toggle

here you need to put id of whom click you want to check all check-box .

$("#accordion1 input:checkbox").each
here you need to mention in which all check-box should be checked.

Tuesday, June 28, 2011

Model Box In JavaScript, Simple JavaScript to create Light Box, Light Box Tutorial in javascript

Now these days Light box / Model box are widely use in website to show content or some other information.

and tutorial provide by website for creating Lightbox or Model box are too complex to alter the things.

Here I am providing simple light box and Model box tutorial with using few lines of script code.

JavaScript Code

function gray_box1() {
document.getElementById('light1').style.display = 'block';
document.getElementById('fade').style.display = 'block';
document.getElementById('fade').style.height='2000px';
}

HTML Code

<div id="fade" class="black_overlay">
div>

Hello! this is light box example.

CSS Code

.white_content {
background-color:white;
border:2px solid #FFFFFF;
display:none;
left:3%;
overflow:auto;
padding:2px;
position:absolute;
text-align:left;
top:35%;
width:450px;
z-index:1002;
}

.black_overlay {
background-color:black;
display:none;
height:100%;
left:0;
opacity:0.4;
filter: alpha(opacity=40);
position:fixed;
top:0;
width:100%;
z-index:1001;
}

Online Link

Thursday, June 23, 2011

Multi Level CSS DropDownn, DropDown Menu, MiltiLevel menu, DropDown menu using CSS

Tomorrow I found an another Simple menu style which using CSS to create its drop down list and also it works upto 4 four level.

it use different CSS style for this menu to work in IE6 using conditional CSS.

So I decided to put that complete code here so that my Designer friends can use and learn easily.

Head Code Section

<style type="text/css" media="screen, tv, projection">
/*<![CDATA[*/

/* page styling, unimportant for the menu. only makes the page looks nicer */
body {
 font-family: Calibri, "Trebuchet MS", sans-serif;
 font-size: 100%;
}

h1 {font-size: 2em;}
h2 {font-size: 1.5em;}

.example {
 background: #eee;
 padding: 50px;
}

/* - - - ADxMenu: BASIC styles [ MANDATORY ] - - - */

/* remove all list stylings */
.menu, .menu ul {
 margin: 0;
 padding: 0;
 border: 0;
 list-style-type: none;
 display: block;
}

.menu li {
 margin: 0;
 padding: 0;
 border: 0;
 display: block;
 float: left; /* move all main list items into one row, by floating them */
 position: relative; /* position each LI, thus creating potential IE.win overlap problem */
 z-index: 5;  /* thus we need to apply explicit z-index here... */
}

.menu li:hover {
 z-index: 10000; /* ...and here. this makes sure active item is always above anything else in the menu */
 white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
       see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}

.menu li li {
 float: none;/* items of the nested menus are kept on separate lines */
}

.menu ul {
 visibility: hidden; /* initially hide all submenus. */
 position: absolute;
 z-index: 10;
 left: 0; /* while hidden, always keep them at the top left corner, */
 top: 0;  /*   to avoid scrollbars as much as possible */
}

.menu li:hover>ul {
 visibility: visible; /* display submenu them on hover */
 top: 100%; /* 1st level go below their parent item */
}

.menu li li:hover>ul { /* 2nd+ levels go on the right side of the parent item */
 top: 0;
 left: 100%;
}

/* -- float.clear --
 force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
 content: ".";
 height: 0;
 display: block;
 visibility: hidden;
 overflow: hidden;
 clear: both;
}
.menu, .menu ul { /* IE7 float clear: */
 min-height: 0;
}
/* -- float.clear.END --  */

/* -- sticky.submenu --
 it should not disappear when your mouse moves a bit outside the submenu
 YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
 if you do it, make sure you 110% know what you do */
.menu ul {
 background-image: url(empty.gif); /* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
 padding: 10px 30px 30px 30px;
 margin: -10px 0 0 -30px;
 /*background: #f00;*/ /* uncomment this if you want to see the "safe" area.
        you can also use to adjust the safe area to your requirement */
}
.menu ul ul {
 padding: 30px 30px 30px 10px;
 margin: -30px 0 0 -10px;
}
/* -- sticky.submenu.END -- */






/* - - - ADxMenu: DESIGN styles [ OPTIONAL, design your heart out :) ] - - - */

.menu, .menu ul li {
 color: #eee;
 background: #234;
}

.menu ul {
 width: 11em;
}

.menu a {
 text-decoration: none;
 color: #eee;
 padding: .4em 1em;
 display: block;
 position: relative;
}

.menu a:hover, .menu li:hover>a {
 color: #fc3;
}

.menu li li { /* create borders around each item */
 border: 1px solid #ccc;
}
.menu ul>li + li { /* and remove the top border on all but first item in the list */
 border-top: 0;
}

.menu li li:hover>ul { /* inset 2nd+ submenus, to show off overlapping */
 top: 5px;
 left: 90%;
}

/* special colouring for "Main menu:", and for "xx submenu" items in ADxMenu
 placed here to clarify the terminology I use when referencing submenus in posts */
.menu>li:first-child>a, .menu li + li + li li:first-child>a {
 color: #567;
}

/* Fix for IE5/Mac \*//*/
.menu a {
 float: left;
}
/* End Fix */

/*]]>*/
</style>



<!--  Conditional CSS for IE6 -->


<!--[if lte IE 6]>
<style type="text/css" media="screen, tv, projection">
/*<![CDATA[*/

/* - - - ADxMenu: IE6 BASIC styles [MANDATORY] - - - */

/*
 this rules improves accessibility - if Javascript is disabled, the entire menu will be visible
 of course, that means that it might require different styling then.
 in which case you can use adxie class - see: aplus.co.yu/adxmenu/examples/ie6-double-style/
 */
.menu ul {
 visibility: visible;
 position: static;
}

.menu, .menu ul { /* float.clear */
 zoom: 1;
}

.menu li.adxmhover {
 z-index: 10000;
}

.menu .adxmhoverUL { /* li:hover>ul selector */
 visibility: visible;
}

.menu .adxmhoverUL { /* 1st-level submenu go below their parent item */
 top: 100%;
 left: 0;
}

.menu .adxmhoverUL .adxmhoverUL { /* 2nd+ levels go on the right side of the parent item */
 top: 0;
 left: 100%;
}

/* - - - ADxMenu: DESIGN styles - - - */

.menu ul a { /* fix clickability-area problem */
 zoom: 1;
}

.menu li li { /* fix white gap problem */
 float: left;
 width: 100%;
}

.menu li li { /* prevent double-line between items */
 margin-top: -1px;
}

.menu a:hover, .menu .adxmhoverA {  /* li:hover>a selector */
 color: #fc3;
}

.menu .adxmhoverUL .adxmhoverUL { /* inset 2nd+ submenus, to show off overlapping */
 top: 5px;
 left: 90%;
}

/*]]>*/
</style>

<script type="text/javascript" src="ADxMenu.js"></script>
<![endif]-->

HTML Source Code

<div class="example">
        <ul class="adxm menu">
            <li><a href="#">Main menu:</a></li>
            <li><a href="#" title="My writings">Blog</a>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#feeds/">Feeds</a></li>
                    <li><a href="#archive/">Archive</a></li>
                </ul>
            </li>
            <li><a href="#adxmenu/" title="Nested fly-out menu, standard-compliant">ADxMenu</a>
                <ul>
                    <li><a href="#">1st submenu</a></li>
                    <li><a href="#adxmenu/">Overview</a></li>
                    <li><a href="#adxmenu/instructions/">Instructions</a></li>
                    <li><a href="#adxmenu/examples/">Examples</a>
                        <ul>
                            <li><a href="#">2nd submenu</a></li>
                            <li><a href="#adxmenu/examples/htb/">Top to bottom</a></li>
                            <li><a href="#adxmenu/examples/hbt/">Bottom to top</a>
                                <ul>
                                    <li><a href="#">3rd submenu</a></li>
                                    <li><a href="#">Item 2</a></li>
                                    <li><a href="#">Item 3</a></li>
                                    <li><a href="#">Item 4</a></li>
                                </ul>
                            </li>
                            <li><a href="#adxmenu/examples/vlr/">Left to right</a></li>
                            <li><a href="#adxmenu/examples/vrl/">Right to left</a></li>
                        </ul>
                    </li>
                    <li><a href="#adxmenu/trouble/">Troubleshooting</a></li>
                </ul>
            </li>
            <li><a href="#wch/" title="Windowed Controls Hider, for Win IE">WCH</a>
                <ul>
                    <li><a href="#wch/">Overview</a></li>
                    <li><a href="#wch/instructions/">Instructions</a></li>
                    <li><a href="#wch/examples/">Examples</a></li>
                    <li><a href="#wch/trouble/">Troubleshooting</a></li>
                </ul>
            </li>
            <li><a href="#lab/" title="Reusable web techniques">Lab</a>
                <ul>
                    <li><a href="#css/z-pos">z-index tutorial</a></li>
                    <li><a href="#css/forms/">Styling forms</a></li>
                    <li><a href="#css/cfl/">Centered frame layout</a></li>
                    <li><a href="#css/tabs2/">Tabs with variable height</a></li>
                    <li><a href="#css/nestedtabs2/">2-level navigation</a></li>
                    <li><a href="#css/ow/">Tabs: Overlapping Windows</a></li>
                    <li><a href="#scripts/windowopen/">Unobtrusive window.open</a></li>
                    <li><a href="#scripts/fif/">Floating iFrame</a></li>
                </ul>
            </li>
            <li><a href="#deliver/" title="Various sites I (co-)did">Delivered</a>
                <ul>
                    <li><a href="#deliver/sites/">Sites & proof of concepts</a></li>
                    <li><a href="#deliver/wp/">WordPress goodies</a></li>
                </ul>
            </li>
            <li><a href="#about/" title="Relevant info about me">Colophon</a></li>
            <li><a href="#about/contact/">Contact me</a></li>
        </ul>
    </div>

JavaScript link

ADxMenu.js

Wednesday, June 22, 2011

JavaScript Captcha implement, Form Captcha validation, captcha implementation using image and MD5

CAPTCHAs are used in attempts to prevent automated software from performing actions which degrade the quality of service of a given system, whether due to abuse or resource expenditure.

Its very difficult to implement captch into Static HTML pages. so here i am providing simple code to implement captcha.

use script function to create input and image field in your for and link the md5.js and jcap.js in your HTML source.

<script type="text/javascript">sjcap();</script>

website using this script for using captcha.
View online
Download source code

Wednesday, June 15, 2011

JavaScript Video Gallery, youtube Video Gallery, JavaScript Dynamic Video Gallery, JavaScript Tutorial to create dynamic Video gallery using youtube, DHTML SlideShow in JavaScript for Video

I found DHTML Slideshow coded in JavaScript on Dynamic Drive for manual slide show for images.

I found it useful because i need same effect but Instead using image i need same effect for my videos.

So i have edit its javascript to run OBJECT code of youtube flash to create my dynamic Video galley. I am sharing my own edited script here so it will help other users to create their Video gallery.

To run the video we are using youtube links means videos uploaded on youtubes will run in our video gallery by passing their links to javascript array.

I am providing here complete source for JavaScript Dynamic Video gallery.

HTML Source

<div class="youtube_frame">
<div class="video">
<script type="text/javascript">

    //Define your own array to hold the photo album images
    //Syntax: ["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]

    var myvacation = new Array()
    myvacation[0] = ["http://www.youtube.com/v/cgd5OQy0nhI?fs=1&hl=en_US", "Indian michael jackson awesome dance - funny video", ""]
    myvacation[1] = ["http://www.youtube.com/v/q5ZUWEDyyxA?fs=1&hl=en_US", " Antisex ( Max Film Company) (1m 20s, Russia)", ""]
    myvacation[2] = ["http://www.youtube.com/v/cgd5OQy0nhI?fs=1&hl=en_US", "Indian michael jackson awesome dance - funny video", ""]
    myvacation[3] = ["http://www.youtube.com/v/q5ZUWEDyyxA?fs=1&hl=en_US", " Antisex ( Max Film Company) (1m 20s, Russia)", ""]
    myvacation[4] = ["http://www.youtube.com/v/cgd5OQy0nhI?fs=1&hl=en_US", "Indian michael jackson awesome dance - funny video", ""]
    myvacation[5] = ["http://www.youtube.com/v/q5ZUWEDyyxA?fs=1&hl=en_US", " Antisex ( Max Film Company) (1m 20s, Russia)", ""]

    //myvacation[2]=["http://www.youtube.com/v/r5N2BLDftuY?fs=1&hl=en_US&color1=0x234900&color2=0x4e9e00", "Delhi 6 Mast Song", ""]

    //initiate a photo gallery
    //Syntax: new photogallery(imagearray, cols, rows, tablewidth, tableheight, opt_[paginatetext_prefix, paginatetext_linkprefix])
    var thepics = new photogallery(myvacation, 1, 1, '659px', '260px', 'testing')

    //OPTIONAL: Run custom code when an image is clicked on, via "onselectphoto"
    //DELETE everything below to disable
    //Syntax: function(img, link){}, whereby img points to the image object of the image, and link, its link object, if defined
    thepics.onselectphoto = function(img, link) {
        if (link != null) //if this image is hyperlinked
            window.open(link.href, "", "width=800, height=600, status=1, resizable=1")
        return false //cancel default action when clicking on image, by returning false instead of true
    }

</script></div>

</div>

Put this text into body of your HTML.

CSS Source

JavaScript Source

// -------------------------------------------------------------------
// Photo Album Script v2.0- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Mar 11th, 07': Script updated to v2.0
// -------------------------------------------------------------------

function photogallery(garray, cols, rows, twidth, theight, paginatetext){
 gcount=(typeof gcount=="undefined")? 1 : gcount+1 //global var to keep count of current instance of photo gallery
 this.gcount=gcount
 this.galleryarray=garray
 this.cols=cols
 this.rows=rows
 var twidth=twidth || "700x" //default table width is 700px
 var theight=theight || "500px"
 var ptext=(typeof paginatetext=="object")? paginatetext : ["Browse Gallery:", ""] //Store 2 compontents of paginate DIV text inside array
 this.pagecount=Math.ceil(this.galleryarray.length/(cols*rows)) //calculate number of "pages" needed to show the images
 document.write('<table class="photogallery" id="photogallery-'+gcount+'" style="width:'+twidth+'; height:'+theight+';">') //Generate table for Photo Gallery
 for (var r=0; r<rows; r++){
  document.write('<tr>')
  for (var c=0; c<cols; c++)
   document.write('<td valign="top"></td>')
  document.write('</tr>')
 }
 document.write('</table>')
 document.write('<div class="photonavlinks" id="photogallerypaginate-'+gcount+'"></div>') //Generate Paginate Div

 var gdiv=document.getElementById("photogallery-"+this.gcount)
 var pdiv=document.getElementById("photogallerypaginate-"+this.gcount)
 gdiv.onselectphoto=function(imgobj, linkobj){return true} //custom event handler "onselectphoto", invoked when user clicks on an image within gallery
 this.showpage(gdiv, 0)
 this.createNav(gdiv, pdiv, ptext)
 gdiv.onclick=function(e){return photogallery.defaultselectaction(e, this)} //attach default custom event handler action to "onclick" event
 return gdiv
}


photogallery.prototype.createImage=function(imgparts){
 //var imageHTML='<img src="'+imgparts[0]+'" title="'+imgparts[1]+'"/>'
 var imageHTML='<object height="243" width="645" type="application/x-shockwave-flash" data="'+imgparts[0]+'"><param name="movie" value="'+imgparts[0]+'"><param name="quality" value="high"><param value="opaque" name="wmode"></object>'
 if (typeof imgparts[2]!="undefined" && imgparts[2]!=""){ //Create URL?
  var linktarget=imgparts[3] || ""
  imageHTML='<a href="'+imgparts[2]+'" target="'+linktarget+'">'+imageHTML+'</a>'
 }
 if (typeof imgparts[1]!="undefined" && imgparts[1]!="") //Display description?
  imageHTML+='<div class="details" style="position:absolute; left:0px; bottom:30px;">'+imgparts[1] +'</div>'
 return imageHTML
}


photogallery.prototype.showpage=function(gdiv, pagenumber){
 var totalitems=this.galleryarray.length //total number of images
 var showstartindex=pagenumber*(this.rows*this.cols) //array index of div to start showing per pagenumber setting
 var showendindex=showstartindex+(this.rows*this.cols) //array index of div to stop showing after per pagenumber setting
 var tablecells=gdiv.getElementsByTagName("td")
 for (var i=showstartindex, currentcell=0; i<showendindex && i<totalitems; i++, currentcell++) //Loop thru this page's images and populate cells with them
  tablecells[currentcell].innerHTML=this.createImage(this.galleryarray[i])
 while (currentcell<tablecells.length){ //For unused cells, if any, clear out its contents
  tablecells[currentcell].innerHTML=""
  currentcell++
 }
}

photogallery.prototype.createNav=function(gdiv, pdiv , ptext){
 var instanceOfGallery=this
 var navHTML=""
 for (var i=0; i<this.pagecount; i++)
  navHTML+='<a href="#navigate" rel="'+i+'">'+ptext[1]+(i+1)+'</a> ' //build sequential nav links
 pdiv.innerHTML=ptext[0]+' '+navHTML
 var navlinks=pdiv.getElementsByTagName("a")
 navlinks[0].className="current" //Select first link by default
 this.previouspage=navlinks[0] //Set previous clicked on link to current link for future ref
 for (var i=0; i<navlinks.length; i++){
  navlinks[i].onclick=function(){
   instanceOfGallery.previouspage.className="" //"Unhighlight" last link clicked on...
   this.className="current" //while "highlighting" currently clicked on flatview link (setting its class name to "selected"
   instanceOfGallery.showpage(gdiv, this.getAttribute("rel"))
   instanceOfGallery.previouspage=this //Set previous clicked on link to current link for future ref
   return false
  }
 }
}

photogallery.defaultselectaction=function(e, gdiv){ //function that runs user defined "onselectphoto()" event handler
 var evtobj=e || window.event
 var clickedobj=evtobj.target || evtobj.srcElement
 if (clickedobj.tagName=="object"){
  var linkobj=(clickedobj.parentNode.tagName=="A")? clickedobj.parentNode : null
  return gdiv.onselectphoto(clickedobj, linkobj)
 }
}

Modification
myvacation[0] = ["http://www.youtube.com/v/cgd5OQy0nhI?fs=1&hl=en_US", "Indian michael jackson awesome dance - funny video", ""]

Myacation is array name to add new links.
it accept four argument as describe below.
["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]

path_to_thumbnail = here you mention the url for video you want to run.
Else option will not used as we are working on video so their title will be same as it on youtube.

Online Link

Download link

Monday, June 13, 2011

Image Gallery with onhover Scroll, javaScript Tutorial for Smooth DIV Scroll

I have found one of very good Jquery image gallery or horizontal scroll animation for contents.

its a Jquery plugin use to scroll content horizontally on mouse over it shows its left and right when you have content to be showed.

I am presenting here its filtered HTML and CSS code for SmoothDIVScroll gallery.

you can find complete Detail for SmoothDivScroll by visting its website.

Smooth DIV Scroll

HTML Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Basic demo - jQuery Smooth Div Scroll</title>
    
    <link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" />
    

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<link href="css/smoothDivScroll.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery.ui.widget.js" type="text/javascript"></script>



    <script src="js/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></script>

    <script type="text/javascript">
        // Initialize the plugin with no custom options
        $(window).load(function() {
            $("div#makeMeScrollable").smoothDivScroll({});
        });
    </script>

    
    <style type="text/css">
        #makeMeScrollable
        {
            width: 100%;
            height: 330px;
            position: relative;
        }
        #makeMeScrollable div.scrollableArea img
        {
            position: relative;
            float: left;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="makeMeScrollable">
        <div class="scrollingHotSpotLeft">
        </div>
        <div class="scrollingHotSpotRight">
        </div>
        <div class="scrollWrapper">
            <div class="scrollableArea">
                <img src="images/field.jpg" alt="Demo image" />
                <img src="images/gnome.jpg" alt="Demo image" />
                <img src="images/pencils.jpg" alt="Demo image" />
                <img src="images/golf.jpg" alt="Demo image" />
                <img src="images/river.jpg" alt="Demo image" />
                <img src="images/train.jpg" alt="Demo image" />
                <img src="images/leaf.jpg" alt="Demo image" />
            </div>
        </div>
    </div>
</body>
</html>

CSS Source

/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
    /* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
    min-width: 75px;
    width: 10%;
    height: 100%;
    /* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
    background-image: url(../images/arrow_left.png);
    background-position:center center;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    z-index: 200;
    left: 0;
    display:none;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
    background-image: url(../images/arrow_left.gif);
    background-color: #fff;
    background-repeat: no-repeat;
    opacity: 0.35; /* Standard CSS3 opacity setting */
    -moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
    filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
    zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
    min-width: 75px;
    width: 10%;
    height: 100%;
    background-image: url(../images/arrow_right.png);
    background-position:center center;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    z-index: 200;
    right: 0;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
    background-image: url(../images/arrow_right.gif);
    background-color: #fff;
    background-repeat: no-repeat;
    opacity: 0.35;
    filter: alpha(opacity = 35);
    -moz-opacity: 0.35;
    zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

div.scrollableArea
{
    position: relative;
    width: auto;
    height: 100%;
}

JavaScript Script files

jquery.smoothDivScroll-1.1-min.js

js/jquery.ui.widget.js

jquery.min.js

Wednesday, June 8, 2011

JavaScript Content Slider, Content Scrollbar using JavaScript, Custom JavaScript Scrollbar tutorial

Here I am providing the details how to create Custom Scrollbar for WebPage.
So now you are not bound to use browser's inbuilt scrollbar.

Create your own Fancy Scrollbar for your Website with Easy Step.

HTML Source

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0054)http://www.n-son.com/scripts/jsScrolling/example2.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jsScrollbar</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">.Container {
 BACKGROUND: url(images/container_background.gif) #fff no-repeat; LEFT: 100px; WIDTH: 400px; POSITION: absolute; TOP: 50px; HEIGHT: 600px
}
#Scroller-1 {
 OVERFLOW: hidden; WIDTH: 420px; POSITION: absolute; HEIGHT: 490px
}
#Scroller-1 P {
 PADDING-RIGHT: 20px; PADDING-LEFT: 20px; FONT-SIZE: 11px; PADDING-BOTTOM: 10px; MARGIN: 0px; COLOR: #6f6048; TEXT-INDENT: 20px; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.Scroller-Container {
 LEFT: 0px; POSITION: absolute; TOP: 0px
}
#Scrollbar-Container {
 LEFT: 60px; POSITION: absolute; TOP: 40px
}
.Scrollbar-Up {
 CURSOR: pointer; POSITION: absolute
}
.Scrollbar-Track {
 BACKGROUND: url(scrollbar_track.gif) repeat-y center center; LEFT: 4px; WIDTH: 20px; 
 POSITION: absolute; TOP: 36px; HEIGHT: 490px
}
.Scrollbar-Handle {
 WIDTH: 20px; POSITION: absolute; HEIGHT: 22px
}
.Scrollbar-Down {
 CURSOR: pointer; POSITION: absolute; TOP: 517px
}
</style>

    <script src="jsScrollbar_files/jsScroller.js" type="text/javascript"></script>

<script src="jsScrollbar_files/jsScrollbar.js" type="text/javascript"></script>

    <script type="text/javascript">
var scroller  = null;
var scrollbar = null;
window.onload = function () {
  scroller  = new jsScroller(document.getElementById("Scroller-1"), 600, 200);
  scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, false);
}
</script>

</head>
<body>
    <div id="Scrollbar-Container">
        <img class="Scrollbar-Up" src="jsScrollbar_files/up_arrow.gif">
        <img class="Scrollbar-Down" src="jsScrollbar_files/down_arrow.gif">
        <div class="Scrollbar-Track">

<img class="Scrollbar-Handle" src="jsScrollbar_files/scrollbar_handle.gif">
        </div>
    </div>
    <div class="Container">
        <div id="Scroller-1">
            <div class="Scroller-Container">
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et
                    congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque
                    id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                    inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec
                    arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis
                    ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer
                    ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo.
                    Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum
                    ante erat et elit.</p>

<p>
                    Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum
                    nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit
                    porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a,
                    dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
                <p>
                    Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc.
                    Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt
                    dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris.
                    Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit.
                    Nunc vitae urna sed nisl mattis ornare.</p>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et
                    congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque
                    id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                    inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec
                    arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis
                    ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer
                    ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo.
                    Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum
                    ante erat et elit.</p>
                <p>

Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum
                    nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit
                    porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a,
                    dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
                <p>
                    Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc.
                    Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt
                    dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris.
                    Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit.
                    Nunc vitae urna sed nisl mattis ornare.</p>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et
                    congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque
                    id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                    inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec
                    arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis
                    ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer
                    ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo.
                    Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum
                    ante erat et elit.</p>
                <p>
                    Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum
                    nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit
                    porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a,
                    dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>

<p>
                    Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc.
                    Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt
                    dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris.
                    Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit.
                    Nunc vitae urna sed nisl mattis ornare.</p>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et
                    congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque
                    id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                    inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec
                    arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis
                    ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer
                    ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo.
                    Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum
                    ante erat et elit.</p>
                <p>
                    Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum
                    nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit
                    porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a,
                    dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
                <p>

Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc.
                    Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt
                    dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris.
                    Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit.
                    Nunc vitae urna sed nisl mattis ornare.</p>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et
                    congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque
                    id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                    inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec
                    arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis
                    ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer
                    ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo.
                    Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum
                    ante erat et elit.</p>
                <p>
                    Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum
                    nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit
                    porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a,
                    dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
                <p>
                    Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc.
                    Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt
                    dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris.
                    Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit.
                    Nunc vitae urna sed nisl mattis ornare.</p>

<p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et
                    congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque
                    id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                    inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec
                    arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis
                    ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer
                    ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo.
                    Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum
                    ante erat et elit.</p>
                <p>
                    Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum
                    nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit
                    porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a,
                    dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
                <p>
                    Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc.
                    Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt
                    dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris.
                    Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit.
                    Nunc vitae urna sed nisl mattis ornare.</p>
                <p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et
                    congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque
                    id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                    inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec
                    arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis
                    ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer
                    ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo.
                    Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum
                    ante erat et elit.</p>
                <p>
                    Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum
                    nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit
                    porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a,
                    dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
                <p>
                    Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc.
                    Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt
                    dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris.
                    Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit.
                    Nunc vitae urna sed nisl mattis ornare.</p>
            </div>
        </div>

</div>
</body>
</html>

JavaScript Laibrary File
JsScroller.js
JsScrollbar.js

Image File

Pages