Enlarge Image with Smooth Transition – Jquery CSS

Enlarge Image with Smooth Transition – Jquery CSS
In this article we are going to see how to zoom an image when mouse pointer enters the image and how to make it to its original size when mouse leave.

We are going to use mouseenter and mouseleave events of jquery.

In this code, We are using -webkit-transition for smooth enlarging of image when mouseenters and taking back to its original size when mouse leaves.

Similar to mouseenter and mouseleave, we can substitute other events like mouseover, mouseout, hover etc.

Read More

Pop up Screen using jquery and CSS

Pop up Screen using CSS
In this article we are going to see how to create a pop-up screen using jquery and CSS. We are going to set a link, When user clicks that link a pop-up screen will get displayed and a video has been embedded in the pop-up screen (Autoplay video). We are going to have a close button in the pop-up screen which brings it back to main page.

Output:
op1
on clicking show, this screen appears
op2

Read More

Pop-up Screen Using Bootstrap

Pop-up Screen Using Bootstrap:
In this article we are going to see how to create a pop-up window with the help of Bootstrap.

Whenever user clicks a button, a pop-up window will open in the same screen with background in light color.

We are going to use in-build class in Bootstrap for this purpose Modal.

Lets see these modal class in detail before we go ahead with coding,

class name = modal –> Creates a modal (pop-up window)
class name = model-content –> Designing modal window and also acts as a contained holding modal header, modal body and modal footer
class name = model-header –> Acts as a header for Modal
class name = model-body –>  Modal body
class name = model-footer –> Modal footer
class name = model – sm, modal – lg –> In built size of model window size, sm is small and lg is for large

In addition this, there are also few more modal events which can be used for better user experience

modal(“toggle”)
modal(“show”)
modal(“”hide”)

Now let us see an example of Modal

Please download Bootstrap for this or you can use the url for this bootstrap purpose

Output:

op1
After clicking the button,

op2

Read More

Html inside Another HTML – Ajax + Jquery

Html inside Another HTML – Ajax + Jquery
Today, In this article we are going to see how to load a html/jsp file into another file using ajax.

Many applications make use of Ajax for loading form/file dynamically in the same page to improve performance of the application. When a user selects the option from drop-down box or when user clicks a button etc. We may be required to load or show a Html/Jsp/Forms based on the user input or when user performs any action.

So let us see an example code about how to load a JSP/HTML file within another JSP/HTML file.

Let us create 2 JSP files for this example,

form1.jsp

We are just creating a sample text in form1.jsp
Now we are going to bring this form1.jsp into form2.jsp when user clicks a button

From the above code, We are using ajax and we are setting the URL of form1.jsp and we are setting its type (html). We are setting the time for the form1 to be displayed and if url and datatype is success, then it will get displayed inside <div> </div>

Output:
op1
On clicking the button,
op2

Read More

Autocomplete textbox in JSP with Database

Autocomplete textbox in JSP with Database
Autocomplete textbox in JSP with Database using Jquery. You can retrieve your data from database and make it as suggestions for autofill textbox in JSP.

Requirements:
Download jquery-ui.js,  jquery-1.10.2.js, jquery-ui.css

JSP Page:

 

Read More