Website Design Course in Andheri ,Mumbai

Posts

Showing posts from January, 2017

Javascript countdown-timer-reloading-again-on-refreshing page

(1)write code timer.html file: <html> <head> <title> timer example by om sir</title> </head> <body> <div id="divCounter"></div> <script> var hoursleft = 0; var minutesleft = 35; var secondsleft = 0; var finishedtext = "Countdown finished!"; var end; if(localStorage.getItem("end")) { end = new Date(localStorage.getItem("end")); } else { end = new Date(); end.setMinutes(end.getMinutes()+minutesleft); end.setSeconds(end.getSeconds()+secondsleft); } var counter = function () { var now = new Date(); var diff = end - now; diff = new Date(diff); var sec = diff.getSeconds(); var min = diff.getMinutes(); if (min < 10) { min = "0" + min; } if (sec < 10) { sec = "0" + sec; } if(now >= end) { clearTimeout(interval); localStorage.setItem("en

form validation example using javascript

<html> <head> <script> function check_valid(str) { var name=document.getElementById("username").value; if(name=="") { document.getElementById(" lb1 ").innerHTML="enter your name"; } } </script> </head> <form action="#" method="POST" name="form"> student user name:<input type="text" id=username name="username" onblur="check_valid(this.value)"> <br> <div id="lb1" style="color:red";></div> <input id="ok" style="margin-left: 74px;" type="submit" name="submit" value="create account!!"> </form> </body> </html>

@media Rule in css

@media Rule : Definition and Usage The @media rule is used to define different style rules for different media types/devices. In CSS2 this was called media types, while in CSS3 it is called media queries. Media queries look at the capability of the device, and can be used to check many things, such as: width and height of the viewport width and height of the device orientation (is the tablet/phone in landscape or portrait mode?) resolution and much more Example: <!DOCTYPE html> <html> <head> <style> body { background-color: lightblue; } @media screen and (min-width: 480px) { body { background-color: lightgreen; } } @media screen and (min-width: 600px) { body { background-color: orange; } } </style> </head> <body> <h1>Resize the browser window to see the effect!</h1> <p>The media query will only apply if the media t

Jquery Show Less and More Content | more/less toggle

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Demo by OM SIR - Jquery Show Less and More Content | more/less toggle</title> <script src="http://code.jquery.com/jquery-1.8.2.js"></script> <script> $(function() { var showTotalChar = 200, showChar = "Show (+)", hideChar = "Hide (-)"; $('.show').each(function() { var content = $(this).text(); if (content.length > showTotalChar) { var con = content.substr(0, showTotalChar); var hcon = content.substr(showTotalChar, content.length - showTotalChar); var txt= con + '<span class="dots">...</span><span class="morectnt"><span>' + hcon + '</span>  <a href="" class="showmoretxt">' + showChar + '</a></span>'; $(this).html(txt); } }); $(".showmoret

Important Javascript and Jquery Code for web development

Important Javascript and Jquery Code for web development: (1)how to make multiple preview of single image: http://phpdevelopmenttricks.blogspot.in/2017/01/how-to-make-multiple-preview-of-single.html (2)javascript code for confirmation before delte and update: http://phpdevelopmenttricks.blogspot.in/2016/12/javascript-code-for-confirmation-before.html (3)how to pass image file with text to php using Ajax: http://phpdevelopmenttricks.blogspot.in/2016/12/how-to-pass-image-file-with-text-to-php.html (4)how to preview form entered value in text: http://phpdevelopmenttricks.blogspot.in/2016/12/preview-form-entered-value-in-text.html (5)Drag and Drop file upload : http://phpdevelopmenttricks.blogspot.in/2016/12/drag-and-drop-file-upload-using.html (6)write jquery code for image preview as well as uploading of image with php code: http://phpdevelopmenttricks.blogspot.in/2017/01/jquery-code-for-preview-and-uploading.html

JQUERY SYNTAX

how to add jQuery to Your Web Pages ?: There are several ways to start using jQuery on your web site. You can: (1)Download the jQuery library from jQuery.com (2)Include jQuery from a CDN, like Google Downloading jQuery : There are two versions of jQuery available for downloading: · Production version - this is for your live website because it has been minified and compressed · Development version - this is for testing and development (uncompressed and readable code) Both versions can be downloaded from jQuery.com. The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section): <head> <script src="jquery-1.12.2.min.js"></script> </head> Tip: Place the downloaded file in the same directory as the pages where you wish to use it. Note Do you wonder why we do not have

JQUERY Selector

The JQUERY Selector: Selectors are used to select one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element. The $() factory function jQuery selectors start with the dollar sign and parentheses − $() . The factory function $() makes use of following three building blocks while selecting elements in a given document − S.N. Selector & Description 1 Tag Name Represents a tag name available in the DOM. For example $('p') selects all paragraphs <p> in the document. 2 Tag ID Represents a tag available with the given ID in the DOM. For example $('#some-id') selects the single element in the document that has an ID of some-id. 3 Tag Class Represents a tag available with the given class in the DOM. For example $('.some-class') selects all elements in the document that have a class of some-class. jQuery selectors allow you to select and manipulate HTML