Posts

Showing posts with the label HTML

Page Unload Show Notification to user

<script>       jQuery("body").append("<div style='background-color: #f5f5f5; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 99999;display:none;opacity: 0.8;' id='pageloader'><img src='http://217.37.162.106/sme/logo/ajax-loader.gif' style='top: 50%; left: 50%; max-width: 30px; position: fixed;' /></div>"); jQuery(window).on('beforeunload', function(){ jQuery("#pageloader").css("display","block"); }); </script>

Help Content for Registration form using CSS

Image
Here , I am describing a help content for a registration fields. Some Time we have to make a registration form, where we want to show some information about the Input fields. Here, I am making a tooltip using CSS and HTML. Company Name

A Basic PHP Program

Image
PHP is a server side language, which means it execute on the server machine and send output to the client machine. so Server is like a computers which store information on it memory and display data on the machine connected to Internet. This system is setup via assigning a Fixed IP to that machine, so that the file on the machine can executed anywhere in world, The system we are using will called as client machine, Which ask data from the server machine to display the information on the screen or output device like Printer. So PHP is sever side languages, which actually create the HTML with some numeric or Theoretical calculation done by the programmer. so here are a Basic PHP Program , which simply print hello in the webpage. The PHP start with <?php and end with ?> This sign tell the server to execute the PHP code between these sign. The Following is the code:  (Use spaces and tab, so the programm is easily readable for future reading/ reviewing of the code) ##

Make a Custom Slider Using JQuery

Image
<div dir="ltr" style="text-align: left;" trbidi="on"> <div dir="ltr" style="text-align: left;" trbidi="on"> <style>  .userslider   {    margin: 10px 0px;   }  .users   {    display:none;   }  #user1   {    display:block;   } </style> <div dir="ltr" style="text-align: left;" trbidi="on"> <div> <ul class="userslider" style="height: 0px; overflow: hidden;"> <li> <img class="users" src="http://betadating.ilearnersindia.com/img/slider/1.jpg" id="user1" style="display: none;" /> </li> <li> <img class="users" src="http://betadating.ilearnersindia.com/img/slider/2.jpg" id="user2" style="display: none;" /> </li> <li> <img class="u

Upload File Using PHP - Example For Image

Create The HTML Form Create an HTML form, so you can choose file want to upload: *********************** Code *********************** <form action="upload.php" method="post" enctype="multipart/form-data">   Please choose a file: <input type="file" name=" uploadFile " accept="image/*" /> <br>   <input type="submit" value="Upload File" /> </form> *********************** End of Code *********************** On the Above code  accept is use for accepting only Image file as a File Input. If no accept is specify, All File are accepted. Create a upload.php file , whose code will be as Follow: *********************** Code *********************** ?php $target_dir = "uploads/"; $target_dir = $target_dir . basename( $_FILES["uploadFile"]["name"]); $uploadOk=1; // Check if file already exists if (file_exists($

Save HTML Content into Database

    Generally we have required to save HTML Content i.e. a HTML page or a Block of content into Database. But if we Directly save it to Database, Its throw error due to Special Character and Quotation in the Content.     So First we have to Convert it to database supported Value. We can do it by Decoding the html. In PHP we have a Function "htmlspecialchars" and for Decoding the Function is "htmlspecialchars_decode". So Here is the Code: Create a Form into a File i.e. "form.php". In this Example, we will get only one input on textarea. Code will be as Follow: ######################## Code for form.php ######################## <html> <head> <title> Form For HTML Element Save into Database. </title> </head> <body> <div style="width:250px;margin:0px auto;background:#666666;padding: 20px;"> <h4> Save HTML Content into Database </h4>

A Program in Jquery for Excercise - Jquery

Image
A Program in Jquery for Pity - Jquery: Style to be Define (CSS): body { margin:0px; padding:0px;background:#cc0000; } .container { margin:0px auto; padding:10px; background:#0f0f0f; position:relative; min-height:100%; width:350px; text-align: center; } .container img { display:none; max-width:100%; } .container h3 { background: #cc0000; color: aqua; padding: 5px 5px; font-size: 35px; font-weight: normal; font-family: arial; } Script to be Define (.js file): /* A JQuery Program to run a Excercise */ function startpity() { $("#gamestatus").val('1'); } function stoppity() { $("#gamestatus").val('0'); } var runningtimer = 0; var starttimer = 0; var stoptimer = 0; function runthepity() { runningtimer++; var gamestatus = $("#gamestatus").val(); if( gamestatus ==1  ) { starttimer++; console.log('pity is run for '+starttim

Gallery Hover Effect via only CSS

Image
DEMO: For Making this Effect: We have to Defined only four class on CSS as following: .container  { float:left; margin: 10px; } .imgb {  display: none; position: absolute; } .container:hover .imgb {  display: block; } .clear {  clear:both;  } Description: container: We have take attribute of float to left, so that our gallery 's Images will be distributed as a uniform manner. imgb: This is the big image, which will be display on hover on the above div, So we have defined its attribute to display none, and the position is absolute. so that the image will not take space on pages. and will like a popup effect. .container:hover .imgb This property is the main point for this. The display of the class imgb is going to block after hovering on class  container. clear: This div is made for breaking the flow of content from left i.e.  float:left will be disable after this. Now we have to make HTML: { <div class="container"

Text Slider

Running Example: PHP is a server side language. JQUERY is a client side language. CSS is used for styling attribute to be called at once. MYSQL is used for storing the database. Here I am describing, how to used Text slider: First we need to define style:   .h1_title  { font-size: 20px;line-height: 22px;font-family: 'Patua One', cursive;font-weight: normal; text-transform: uppercase; letter-spacing: 4px; color:#e7decf;text-align: center; width:50%;padding-top: 25px;display:none; } HTML to be define: <div class="textslider"> <input type="hidden" id="h1countvalue" name="h1countvalue" value="1"/> <h1 class="h1_title" id="h1_title1" style="display:block;">WE OFFER OUR CLIENT EXPERT LEGAL ADVICE<br>ALWAYS PROTECT CLIENTS INTERESTS</h1> <h1 class="h1_title" id="h1_title2">WE OFFER OUR CLIENT EXPERT LEGAL ADV