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

Custom Designed Alerts

Custom Designed Alerts
Most of the end users will not be interested in seeing default alert messages that our system provides.

default alert
In this article we are going to see some custom designed Alert Box and messages.
For this code to work, please download js and css files from Here. Also please download jquery-1.11.3.min.js file.

Sweet Alert:
We are going to see how to show custom designed alert boxes of Sweet Alert.
This sweet alert takes 3 attributes

swal(‘title’,’text’,’type’ );

Swal – Sweet Alert, you can also use SweetAlert in place of Swal
title – Title for the alert box (required)
text – Message to be displayed to the user
type – There are 4 types of type
Success
Delete
Warning
Error

Now let us see examples of using Sweet Alert,

op1

We have designed 4 buttons to display 4 designs of alert.

Alert Design 1 – Will display customized alert box.
Alert Design 2 – Will display an alert box that will disappear in 2 seconds
Alert Design 3 – Will display an alert of type warning
Alert Design 4 – Will display an alert with custom image.

Alert Design 1 Output:

op2

Alert Design 2 Output:

op3

Alert Design 3 Output:

op4

Alert Design 4 Output:

op5

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