Archive for the ‘ Javascript ’ Category

Scripts — Javascript Cookie Script

TweetHere’s a basic Javascript cookie script, it’s from the public domain one, unfortunately we can’t remember it’s source, if anyone knows it, we’ll add that to the script header. This code is provided as is, but has been tested extensively over the years, and should work quite well for you. If you do manage to [ READ MORE ]

120+ Javascript, Ajax, jQuery Mega Toolbox

TweetIn this article tripwire magazine provides a huge Javascript, Ajax and jQuery Toolbox that I hope really really gonna make a difference in your work efficiency. Javascript, Ajax and jQuery is in combination with other Web Technologies like fx. CSS key enablers for Dynamic Elements on Websites. Make sure you look carefully through this article [ READ MORE ]

10 Impressive JavaScript Animation Frameworks

TweetComplex and slick JavaScript-based animation has been made easier with the emergence of frameworks and libraries that give developers the ability to create stunning and eye-grabbing animation and transition effects that make it easy these complex tasks. In this article, you will read about the top 10 JavaScript-based animation frameworks and libraries that will enable [ READ MORE ]

jQuery all-in-one gallery

TweetjQuery all-in-one gallery Information This gallery has everything. By that I mean that it has many choices of viewing the photographs. The top row of thumbnail images, which are the actual size images scaled down using CSS, can be scrolled left and right by positioning the mouse at the left or right of the line [ READ MORE ]

Create Resizing Thumbnails With Overflow Property

TweetCreate Resizing Thumbnails With Overflow Property Resizing Thumbnails Using Overflow Property This tutorial is aimed at controlling the size of the thumbnails appearing on your page. Sometimes we don’t have enough space to spare to fit in large thumbnails and yet we would like to avoid small and barely recognizable images. Using this trick we [ READ MORE ]

Rotate Image – Image Slide Show

TweetRotate Image – Image Slide Show DEMO imgAr = new Array()[ READ MORE ]

Free CSS Vertical Menu Designs

TweetFree CSS Vertical Menu Designs No. of Vertical Menu Demo DEMO h2 {font: bold 14px Verdana, Arial, Helvetica, sans-serif;color: #000;margin: 0px;padding: 0px 0px 0px 15px;}ul {list-style: none;margin: 0;padding: 0;}img {border: none;} /*- Menu 1--------------------------- */#menu1 {width: 200px;margin: 10px;border-style: solid solid none solid;border-color: #3D261D;border-size: 1px;border-width: 1px;}#menu1 li a {height: 32px;voice-family: "\"}\""; voice-family: inherit;height: 24px;text-decoration: none;} #menu1 [ READ MORE ]

Pure CSS horizontal Drop Down Menu

TweetPure CSS horizontal Drop Down Menu DEMO @import "http://www.phpasks.com/blogs/wp-content/uploads/2009/11/map_dropDown.css"; Menus CSS Dropdown Current Link Keyboard Special With Images Articles: A-D Accesskeys Branching Drop Caps Articles: E-K ie C.C. ieMac Bugs Images in Heading Images in Table Articles: L-O Location Object Many Layouts Null Links Articles: P-S Popup Windows PNG Overlay Scalable Tabs Styling Pullquotes Articles: [ READ MORE ]

js – slide show1

Tweet#exp_content { margin : auto; text-align : left; padding : 10px 40px 19px 4%; height : auto;}#jsss { margin : 0 auto 0; margin-bottom : 1px; text-align : center; width : 500px; height : auto; padding : 8px 10px 8px 10px;}.jsss { background-color : #666; width : 480px; height : 277px; border : 1px solid [ READ MORE ]

An enlarging unordered list

Tweet#easel {width:75px; height:100px; margin:3em auto;}#painters { padding:0; margin:0; list-style-type:none; }#painters li { width:75px; height:20px; float:left; border:1px solid #000; margin-right:2px; }#painters a em { font-style:normal; font-size:1em; line-height:1.5em; }#painters a { text-decoration:none; color:#000; position:absolute; width:75px; height:20px; display:block; text-align:center; }#painters a.red {background:#c00; color:#fff;}#painters a.orange {background:#fc0; color:#000;}#painters a.yellow {background:#ee0; color:#000;}#painters a.green {background:#080; color:#fff;}#painters a.blue {background:#00c; color:#fff;}#painters a:hover { width:120px; [ READ MORE ]

Horizontal sliding menu

Tweet#menu { margin:0; padding:0; width:45em; height:8.5em; overflow:hidden; background:#000; }#menu li { display:inline; list-style-type:none; }#menu li a { display:block; float:left; text-decoration:none; margin:0; }#menu li a img { opacity:0.7; margin:0.5em; border:0; float:left; }#menu li a span { display:none; }#menu li a:hover { background:#000; }#menu li a:hover img { opacity:1; }#menu li a:hover span { width:11em; color:#aaa; display:block; [ READ MORE ]

Sliding Tab Menu

Tweet #menu { margin:0; padding:0; height:32.5em; overflow:hidden; background:#f0f0f0; } #menu li { list-style-type:none; float:left; display:block; width:100%; } #menu li a { display:block; text-decoration:none; color:#00b; margin:0; width:100%; } #menu li a span { display:none; color:#000; } #menu li a.one span { display:block; height:15em; margin:0 10px; } #menu li a:hover { background:#f1f1f1; } #menu li a:hover span [ READ MORE ]

Image Link Text

Tweet.extra {display:inline; float:left; text-decoration:none; margin:0 25px; display:inline;}.extra em {font-style:normal;}.extra em.txt, .extra b {display:none;}.extra .head {display:block; width:200px; height:55px;}.extra .color1 {background:#9f7520;}.extra .color2 {background:#877660;}.extra .color3 {background:#8aaa7f;}.extra img {border:0; display:block;}.extra em.mh2 {padding-left:5px; margin:0; color:#000; font-weight:normal; font-family: verdana, arial, sans-serif; font-size:24px;}.extra em.mh3 {padding-left:5px; margin:0; color:#fff; font-weight:normal; font-family: verdana, arial, sans-serif; font-size:16px;}.extra:hover {background:#fff; position:relative;cursor:pointer; text-decoration:none;}.extra:hover b {display:block; position:absolute; top:55px; left:0; width:200px; [ READ MORE ]

Example Menu two

Tweet#menu a, #menu a:visited {position:relative;text-decoration:none; text-align:center; background-color:#9ab; color:#fff; display:block; width:10em; border:2px solid #fff;border-color:#ACE2EF #678 #345 #cde;padding:0.25em;margin:0.5em auto;}#menu a:hover {top:2px;left:2px;color:#fff;border-color:#345 #cde #ACE2EF #678;} Example Menu two Item 1Item 2Item 3Item 4Item 5 Information Another change of border style on hover to give the effect of a button press. This is a quick and easy method of [ READ MORE ]

Example Menu one

Tweet #menu a, #menu a:visited { text-align:center; text-decoration:none; color:#000; display:block; width:7em; height:1.2em; border:0.5em solid #E7FAFF; } #menu a:hover { color:#fff; background-color:#b2ab9b; border-color:#dfd7ca #b2ab9b; } Example Menu one Item 1 Item 2 Item 3 Item 4 Item 5 Information Just a simple change of border style on hover. Cascading Style Sheet #menu a, #menu a:visited { [ READ MORE ]

Executing JavaScript on page load

Tweet In my opinion, recent advances in JavaScript theory call for the removal of the event handlers that some Web developers-and all WYSIWYG editors-deploy in large masses in their XHTML files, where they don’t belong. PPK is talking about inline event attributes such as the infamous onclick="" and onmouseover="" which have infested our HTML ever [ READ MORE ]