Browsed by
Category: Javascript

Mouse over zoom image jquery Example

Mouse over zoom image jquery Example

    Mouse over zoom image jquery Example: In online shopping websites, on product image mouse over, it will be zoomed like this,       This can be achieved using the opensource jquery elevateZoom plugin.   Plugins Required: 1. jQuery Plugin [jquery-1.8.3.min.js] 2. elevateZoom Plugin [jquery.elevateZoom-3.0.8.min.js]     Image Zoom – Sample Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Image Zoom</title> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script src="js/jquery.elevateZoom-3.0.8.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ $('#myimage').mouseover(function ()…

Read More Read More

1,325 total views, 2 views today

jQuery select onchange Example

jQuery select onchange Example

jQuery select onchange Example: Select dropdown onchange can be done using both javascript and jQuery. We have done here using jQuery. Please find the program below, Select Onchange jQuery Sample: <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $( '.left_select').change(function() { alert($('.left_select').val()); }); }); </script> </head> <body> <div class="dropdown"> <select class="left_select"> <option value="java" selected>Java</option> <option value="php">PHP</option> <option value="javascript">JavaScript</option> </select> </div> </body> </html> Output: Recommended jQuery Books: 1,240 total views, no views today

1,240 total views, no views today

Javascript Alert Message Color Example

Javascript Alert Message Color Example

Javascript Alert Message Color Example: In Javascript we can not customize the alert contents/messages like font color, font type, bold, italic etc… If you want to achieve the same, you can go for jquery scripts. We have tried the alert message with color using the jQuery. You can find the jsfiddle below, jsFiddle Sample: Thanks for reading this post..!! 1,705 total views, no views today

1,705 total views, no views today

Dynamically changing the select box value in html using javascript

Dynamically changing the select box value in html using javascript

You would have seen in many recharge websites, After entering your mobile number, operator will be chosen automatically. Here you can find how they have implemented that with sample snippet, <html> <head> <script type="text/javascript"> function Operator(input){ var element = document.getElementById('oprCode'); if(input == 9943){ element.value = "VF"; }else if(input == 9962){ element.value = "AT"; }else if(input == 7200) { element.value = "TD"; }else if(input == 8124) { element.value = "ID"; } } </script> </head> <body> Enter Your Mobile Number <input type="text"…

Read More Read More

751 total views, no views today

Importing Js file in Html Example

Importing Js file in Html Example

Javadomain.js: [Js file] function alertMe(){ alert("Hello Javadomain.in"); } Import.html <html> <head> <script type="text/javascript" src="Javadomain.js" > </script> </head> <body onload="alertMe();"> </body> </html> What we did: 1. We have written a javascript file named javadomain.js which contains a method called alertMe, which prints Hello Javadomain.in 2. Now this method is imported in Import.html file using src attribute of script tag. you can refer the highlighted line above. 3. We have called the alertMe() method from body onload method. 924 total views, no views…

Read More Read More

924 total views, no views today

Dynamically Add and Remove value to dropdown Javascript Example Program

Dynamically Add and Remove value to dropdown Javascript Example Program

Dynamically add & remove values to dropdownlist in javascript: <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>My Jsp</title> </head> <body> <br> <br> Javadomain.in – Dropdown dynamic Values Add and Remove <br> <br> <script type="text/javascript"> function addMe() { var textValue = document.getElementById("txtId").value; var ddlstSize = document.getElementById("ddlstId").length; document.getElementById("ddlstId").options[ddlstSize] = new Option( textValue, textValue); //document.getElementById("ddlist").add(new Option(val,val)); alert(textValue + " is Added successfully"); } function removeMe() { var ddlstValue = document.getElementById("ddlstId");…

Read More Read More

1,771 total views, 1 views today

Session Validation in Ajax

Session Validation in Ajax

Session validation in servlet: Usually if it is a servlet we can simply check if(session != null ){ // Business code }else{ // Redirection code }   Session validation in ajax: If you call the servlet from ajax then the above steps won’t work, since ajax gets everything as response, so the code which you have written in the else block (Redirection code) will also be sent as response, so expected redirection will not happen. So what can we do…

Read More Read More

839 total views, 2 views today

Javascript href onclick open new window

Javascript href onclick open new window

Javascript code to open new window: window.open(“http://www.google.co.in”) – opens google.co.in in new window. window.open(“http://www.google.co.in”,”My window”) – My window is the name of the new window. Javascript code to close the current window: window.close() – close the current opened window. It will ask the popup confirmation. Javascript code to close without popup confirmation: window.open(”,’_self’); window.close(); window.open(“http://www.ngdeveloper.com”); // It wont allow to go back or window.location= “./home.jsp”; (Relative path) // allow to go back or window.location =”http://www.ngdeveloper.com” (Absolute path) // allow to…

Read More Read More

1,277 total views, no views today

javascript onclick jsp value passing to servlet

javascript onclick jsp value passing to servlet

Program: MyJsp.jsp <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Javadomain.in</title> </head> <script type="text/javascript"> function document123() { var append_input = document.getElementById("txt").value; document.location.href="/My_Workouts/MyServlet?nav='"+append_input+"'"; // My_Workouts is the project name. } </script> <body> <label>Enter the text to pass Servlet </label> <input type="text" id="txt" ></input> <button type="button" onclick="document123()">Go to Servlet!</button></div> </body> </html> MyServlet.java import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet(&quot;/MyServlet&quot;) public class MyServlet extends HttpServlet…

Read More Read More

1,627 total views, 1 views today