Skip to main content

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; ...
1 comment
Read more

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>
2 comments
Read more

@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> ...
Post a Comment
Read more

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>&nbsp;&nbsp;<a href="" class="showmoretxt">' + showChar + '</a></span>'; $(this).html(txt); } }); $(".showmoret...
Post a Comment
Read more

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/...
7 comments
Read more

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 ...
Post a Comment
Read more

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 ...
Post a Comment
Read more