survey website design idea lalit nishad
Posts
Slide Toggle menu, tutorial blog
<header> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> function showonlyone(thechosenone) { $('.newboxes').each(function(index) { if ($(this).attr("id") == thechosenone) { $(this).slideToggle( "slow"); } else { $(this).hide(0); } }); } </script> </header> <body> <div style="width:100%; height:auto; float:left;"> <div style="border: 1px solid blue; background-color: #99CCFF; float:left; padding: 5px; width: 150px;"> <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a> </div> <div style="border: 1px solid blue; background-color: #99CCFF; fl
image checkbox use css, checkbox tutorial
<style> .amPmCheckbox input[type="checkbox"] { display: none; width:20px; height:auto; float:left; } .amPmCheckbox input[type="checkbox"]+label { background: url('http://renegadeox.com/img/off.png') no-repeat; height:17px; padding-left: 18px; float:left; } .amPmCheckbox input[type="checkbox"]:checked + label { background: url('http://renegadeox.com/img/on.png') no-repeat; height:17px; float:left; } .amPmCheckbox1 input[type="checkbox"] { display: none; width:20px; height:auto; float:left; } .amPmCheckbox1 input[type="checkbox"]+label { background: url('37.gif') no-repeat; height:17px; padding-left: 18px; float:left; } </style> <div class="amPmCheckbox"> <input type="checkbox" name="data[Child][remember_me]" class="checkboxLabel main_street_input image" id="am_
Java script link & image hover effect
(mouse over link) onmouseover="this.style.color='yellow'" onmouseout="this.style.color='white'" --------------------------------------------------------------------------------------------------------------------------- (mouse over image) onmouseover="this.src='images/nifa-classes_03.jpg'" onmouseout="this.src='images/nifa-classes_02.jpg'"
HTML Flash Script
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="131" height="75" id="FlashID2" title="tower"> <param name="movie" value="images/web_tower.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. --> <param name="expressinstall" value="Scripts/expressInstall.swf" /></object> <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. --> <!--[if !IE]>--> <object type
CSS Gradient style
.gradient-bg { background-color: #1a82f7; background-image: url(images/fallback-gradient.png); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7)); background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7); background-image: -moz-linear-gradient(top, #2F2727, #1a82f7); background-image: -ms-linear-gradient(top, #2F2727, #1a82f7); background-image: -o-linear-gradient(top, #2F2727, #1a82f7); }
Page loader jquery
<style> .loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url('../images/loading.gif') 50% 50% no-repeat black; } </style> <body> <div class="loader"> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(window).load(function () { $(".loader").fadeOut("slow"); }) </script> </body>
popup box loader jquery
<head runat="server"> <title>Untitled Page</title> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" /> <!-- you can have your own style --> <style> body { font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; font-size: .8em; } /* dialog div must be hidden */ #basicModal{ display:none; } </style> </head> <body> <!-- sample content in your page --> <div>You can click the button.</div> <input type='button' value='Click here' id='showDialog' /> <!-- -this time, we don't have the dialog html in the body, it is in another url -we use the image loa
Font Property in CSS
The font property can set the style, weight, variant, size, line height and font: font-family: 'Font Name'; src: url('../fonts/fontname-webfont.eot'); src: url('../fonts/fontname-webfont.eot?iefix') format('eot'), url('../fonts/fontname-webfont.woff') format('woff'), url('../fonts/fontname-webfont.ttf') format('truetype'), url('../fonts/fontname-webfont.svg#webfontjSpbZQRv') format('svg'); font-weight: normal; font-style: normal;
Use Backgroung Video Tutorial
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> <style> body{ margin:0px; background:#000; } #bg_container{ height:500px; overflow:hidden; } #bg{ width:100%; height:100%; } #content{ position:absolute; top:0px; padding:30px; color:#FFF; text-shadow:#000 2px 2px; } </style> </head> <body> <div id="bg_container"> <iframe id="bg" src="//www.youtube.com/embed/NnFQy49mank?autoplay=1&controls=0&loop=1&showinfo=0&modestbranding=1&disablekb=1&enablejsapi=1&" frameborder="0" allowfullscreen></iframe> </div> <div id="content"> <h1>Hello</h1> <h2>I Am a web designer</h2> </div> </body> </html>
.noConflict() Script
I know that I need to run jQuery in .noConflict() mode, but I must be getting the syntax wrong. When I assign the $ to jQuery .noConflict as follows, it still shuts down the script.aculo.us functions: </script> <script type="text/javascript"> var $j = jQuery.noConflict(); <------------------------------ -Use this line and use variable name $j(document).ready(function() { $j('.sf-menu ul').superfish({ delay: 1000, animation: {opacity:'show',height:'show'}, speed: 'medium', autoArrows: false, dropShadows: 'medium' }); }); </script>
