freeze table header and left column

While i am freeze table header or first column , Google to find .There are lot's of way to do it. I try via jquery but it conflict some existing js. After spanding a 2-3 day find a script to do this and optimize to less and it's work there are 5-6 number of line in JavaScript and some css.it's run without any conflict or error and working on all browser.

If you would like to create a table with scrollable data. I have to freeze the first header row and first column of the table.Below is example :-
style.css

.midcontainer {
 width: 100%;
 height: 200px;
 table-layout: fixed;
}

table.root {
 table-layout: fixed;
 width: 100%;
}

table.content {
 table-layout: fixed;
 width: 100%;
}

table.head {
 table-layout: fixed;
 width: 1890px;
}

table.frozen {
 table-layout: fixed;
 width: 100%;
}

.horizontal-scroll {
 width: 98%;
 height: 22px;
 overflow: hidden;
 overflow-x: scroll;
}

.horizontal-scroll div {
 width: 2173px;
 height: 1px;
}

.vertical-scroll {
 height: 200px;
 width: 22px;
 overflow: hidden;
 overflow-y: scroll;
 /* border: solid 1px #666; */
}

.vertical-scroll div {
 height: 377px;
 width: 1px;
}

.columnStyle {
 padding: 3px;
 height: 28px;
 border-collapse: separate;
 border-color: -moz-use-text-color #CCCCCC #CCCCCC -moz-use-text-color;
 border-style: none dotted solid none;
 border-width: 0 1px 1px 0;
 border-color: -moz-use-text-color #CCCCCC #CCCCCC -moz-use-text-color;
 border-style: none dotted solid none;
 width: 200px;
 overflow: hidden;
 text-overflow: ellipses;
 white-space: nowrap;
}

td {
 border-left: none;
 width: 100 px;
 text-align: left;
}

td.head {
 background-color: #CAEBFA;
}

div.root {
 margin-left: 0px;
 overflow: hidden;
 width: 100%;
 height: 28px;
}

.frozen {
 overflow: hidden;
 width: 100%;
 height: 200px;
}

.divhead {
 overflow: hidden;
 height: 28px;
 width: 100%;
}

.content {
 height: 200px;
 overflow-x: hidden;
 overflow-y: auto;
 width: 100%;
 width: 100%;
}

.tableumn {
 width: 150px;
}

.tablecontent {
 width: 501px;
}

.tableverticalscroll {
 width: 2px;
}

Scroll.html

 
    


        
Name
       
        
Arun
       
        
Aryan
       
        
Jessica
       
        
Renu
       
        
Manisha
       
        
Arrus
       
        
Rehan
       
        
Riyaj
       
        
Palak
       
        
Jessica
       
    


         
Class
 
Roll No
         
Ref
         
City
         
H.No
         
Country
         
Opening Timing
         
Closing Timing
         
Section
         
Other
        
  
9th
         
10
         
Test
         
Chandigrah
         
#32
         
India
         
09:10am
         
05:30pm
         
XXX
         
ZZZ
       
         
9th
         
10
         
Test
         
Chandigrah
         
#32
         
India
         
09:10am
         
05:30pm
         
XXX
         
ZZZ
        
         
9th
         
10
         
Test
         
Chandigrah
         
#32
         
India
         
09:10am
         
05:30pm
         
XXX
         
ZZZ
        
 
9th
         
10
         
Test
         
Chandigrah
         
#32
         
India
         
09:10am
         
05:30pm
         
XXX
         
ZZZ
        
         
9th
         
10
         
Test
         
Chandigrah
         
#32
         
India
         
09:10am
         
05:30pm
         
XXX
         
ZZZ
        
 
9th
         
10
         
Test
         
Chandigrah
         
#32
         
India
         
09:10am
         
05:30pm
         
XXX
         
ZZZ
        
         
9th
         
10
         
Test
         
Chandigrah
         
#32
         
India
         
09:10am
         
05:30pm
         
XXX
         
ZZZ
        
         
9th
         
10
         
Test
         
Chandigrah
         
#32
         
India
         
09:10am
         
05:30pm
         
XXX
         
ZZZ
        
         
9th
         
10
         
Test
        
Chandigrah
       
#32
         
India
         
09:10am
         
05:30pm
         
XXX
         
ZZZ
        
     
    
     


   

:) Done May be this help you and save some value able time

below is image while run:-

Toggle image in jquery , jquery - toggle arrow

If you want to toggle between 2 images either on click show or hide content arrow up or down below is a sample to do this :-

JavaScript

Css

.trigger {
background: url(http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons-256/3d-transparent-glass-icons-arrows/006768-3d-transparent-glass-icon-arrows-arrows-up-down1.png) 0px -20px no-repeat;
    cursor: pointer;
    height: 95px;
    left: -77px;
    position: absolute;
    top: 36px;
    width: 15%;
}

Add Above css and js in imagetoggle.jsp

imagetoggle.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>







Is it possible to make an down arrow image (class of .trigger) change to an image of an
up-arrow when clicked? Basically, I'm using an image with the class of
.trigger to toggle the div of .links, and when .links is revealed
(slided down), I want the arrow to face up instead of down to show that
users can click it again to hide .links again. Once the user hides links
by clicking the UP arrow, I want it to change to the down arrow again.
It's a lot of explaining for a simple task, but hopefully you guys
understand what I'm asking. The toggle code:

while running above jsp you get below output :-

click on above image you get final output and image toggle effect :-

:)

disable right click on a webpage using jquery

add jquery file :-

The context menu should appear when a user right-clicks on the element.Paste these script above head tag right click stop working in page :-

Hope This Work You :)

onclick hide div when click on anywhere in page

If you would like to open slide down panel etc. when click on panel , icon , link. Then If you would like to close it by clicking anywhere on the page except for the box itself.

Try below script:-

$(document).click(function(){  
 $('#panel').hide();  //pass your div id class which you want to hide
     });

enjoy jquery :)

set year range in datepicker jquery

Default DatePicker Show a year like this :-

but if you want to set custom range of current to previous year to do this :-

now the result like this :-

Create A Light Weight Pop Up

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>











 Click To Open
 

      close