Posts

Showing posts with the label html

What is WebSockets in HTML5?

WebSockets in HTML5 Web Sockets is a next-generation communication technology for web applications by which you can send or receive data from server like ajax get post method. You have already used like this type of code in jQuery $.post() Or $.get() or $.ajax() etc What these function do? These function used for send and receive data from server to client or client to server. Same as WebSockets works. Syntax: var Socket = new WebSocket(url, [protocal] ); Example: <script type="text/javascript"> function WebSocketCheck() { if("WebSocket" in window) { alert("WebSocket is supported by your Browser!"); // Lets open a web socket var ws = new WebSocket("www.url.com/para"); ws.onopen = function() { // Web Socket is connected now, send data using send() Method ws.send("Message to send server"); alert("Message is sent now."); }; ws.onmessage = function (evt) { var received_msg = evt.data; alert(&

Simple html css tooltip.

Simple html css tooltip. this is html css tooltip which is faster than jquery or javascript tooltip simple code and paste this code in file and hover on link <!-- css code --> <style>   .tooltip { border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: pointer; text-decoration: none; position: relative; } .tooltip span { position: absolute; display:none; } .tooltip:hover span { border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); font-family: Calibri, Tahoma, Geneva, sans-serif; position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px; display:block; } .tooltip:hover img { border: 0; margin: -10px 0 0 -55px; float: left; position: absolute; display:block; } .toolt

Why my bootstrap css is not working on mobiles?

Bootstrap css is not working on mobiles when all is fine in your  Bootstrap  html code. and when you open your site on mobile then it shows as  it shows onn your pc. and you still you are frustrate that why  Bootstrap css  is not working. so please check your meta tag did you add this code in of head tag of html <meta name="viewport" content="width=device-width, initial-scale=1.0" />  most of the people when create Bootstrap css the forgot to add this on head tag in html thats why this css not working on mobiles browser so add this code in head tag of html code  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

How to add a text counter in textarea or Setting a maxlength on a textarea?

if you want to add text counter your textarea and set the Setting a maxlength on a textarea. so simply add this code in file and run the file in your browser <form name="textcount" id="textcount"> <textarea cols="60"  rows="12" class="input_compose_textarea" id="description" name="description" onkeypress="textCounter(this,this.form.counter,500);" onblur="textCounter(this,this.form.counter,500);"></textarea> <br/> Max length - <input    type="text" readonly="readonly"    name="counter"    maxlength="3"    size="3"    value="500"    onblur="textCounter(this.form.counter,this,500);"> char remaining. </form> <script type="application/javascript"> function textCounter( field, countfield, maxlimit ) { if ( field.value.length > maxlimit ) { field.value = field.va

How to add move div with page scroll in website?

Div move with Scroll Simple copy and paste this code <div id="floatdiv" style="position:absolute;right:0px;top:0px;"> Move content </div> <script type="text/javascript"><!-- var floatingMenuId = 'floatdiv'; var floatingMenu = { targetX: -40, targetY: 400, hasInner: typeof(window.innerWidth) == 'number', hasElement: document.documentElement && document.documentElement.clientWidth, menu: document.getElementById ? document.getElementById(floatingMenuId) : document.all ? document.all[floatingMenuId] : document.layers[floatingMenuId] }; floatingMenu.move = function () { if (document.layers) { floatingMenu.menu.left = floatingMenu.nextX; floatingMenu.menu.top = floatingMenu.nextY; } else { floatingMenu.menu.style.left = floatingMenu.nextX + 'px'; floatingMenu.menu.style.top = floatingMenu.nextY + 'px'; } } floatingMenu.computeShifts = function () { var de = docum

How to add jquery vertical left panel slider?

Image
Many people says that they want a good left panel and they want that when they select any menu then submenu should be open in slow motion vertically. So here is the code of left panel slider with jquery and css with some screen shot. You can also edit them according to you need. On the first view left panel will look like this If you move your cursor on it than look like this If you click any option then it opens the submenu like this Here is the code simply copy and paste this code in your page and run // Code start from here <style> body {     font-family: Helvetica,Arial,sans-serif;     font-size: 0.9em; } p {     line-height: 1.5em; } ul#menu, ul#menu ul {     list-style-type: none;     margin: 0;     padding: 0;     width: 18em; } ul#menu a {     display: block;     text-decoration: none; } ul#menu li {     margin-top: 1px; } ul#menu li a {     background: none repeat scroll 0 0 #F5ECF5;     border: 1px solid #D7C2D7;

How to overlap or overlay youtube video with html or How do I fix a YouTube flash video in iframe overlay problem on a ajax popup

How do I fix a YouTube flash video in iframe overlay problem on a ajax popup If you want to overlap or overlay youtube video with you html content or pop up And you having the problem that your pop up or html comes under the youtube video in your website and u had already tried too much code and all the unless so try this definitely this work Please follow the instruction it will definitely works four you... simple copy and paste this code in your header or top of iframe <script type="text/javascript"> $(document).ready(function() { $("iframe").each(function(){ var ifr_source = $(this).attr('src'); var wmode = "wmode=opaque"; if(ifr_source.indexOf('?') != -1) { var getQString = ifr_source.split('?'); var oldString = getQString[1]; var newString = getQString[0]; $(this).attr('src',newString+'?'+wmode+'&'+oldString); } else $(this).attr('src',ifr_source+'?'+wmode

how to use an image as a reset button in html?

if  you want to use an image as reset button so you have to call a predefined function of javascript on onclick event. simply copy and paste this code in your page and change the image path... <input type="image" src="images/reset-btn.png" onClick="this.form.reset();return false;">

JavaScript tabifier, tabbed change on button click

Image
Automatically create an HTML tab interface using JavaScript. In this code you will change the data dynamically in tabbing. Simply copy this code and paste on your html page. <script language="javascript"> function firstblock() {     var ele = document.getElementById("1stblock");             document.getElementById("firsttab").style.backgroundColor="red";         document.getElementById("secondtab").style.backgroundColor="black";         document.getElementById("thirdtab").style.backgroundColor="black";         document.getElementById("2ndblock").style.display="none";         document.getElementById("3rdblock").style.display="none";         document.getElementById("1stblock").style.display="block";         } function secondblock() {     var ele = document.getElementById("2ndblock");     if(ele.style.display

Toggling Default Value of Textbox on Focus

When you click on the textbox, it becomes blank but as the focus loses, the default value again appends to the text box. It’s very simle Just copy and paste this code on your page: <div class="signin_right" ><input type="text" name="emailid" id="emailid" style="color:#8B8B8B" value="Your Official Email Id" onfocus="if(this.value == 'Your Official Email Id'){this.value=''; this.style.color='#000000';}" onblur="if(this.value==''){ this.value='Your Official Email Id'; this.style.color='#8B8B8B';}"/></div>