Home » JavaScript
Category Archives: JavaScript
ShowModalDialog Example – How to Save Popup Form Information and Close the Modal Popup Window
ShowModalDialog
In this article I will go through a technique that you can use when working with a modal popup that lets you store form information from your popup to later use with your main Web form.
In earlier articles I have covered some of the general functions and benefits of using the ShowModalDialog function that I will expand on this article. If you have questions about some of the code I’ve used in this article, then please take a look at my earlier articles that might help explain some of the concepts:
JQuery 2.0 – Notes About the Official Release
jQuery 2.0
The latest news coming from the world of jQuery is the official release of jQuery 2.0.
The new jQuery 2.x library is a significantly smaller file size than the jQuery 1.x series of libraries, but the 2.0 library does not support versions of Internet Explorer prior to version 9.
For the foreseeable future, the makers of jQuery plan to run two separate lines of the jQuery library:
- The jQuery 1.x library will continue to be developed for years to come and will support older browser versions.
- On the other hand, the jQuery 2.x library will support newer browsers and will offer both a smaller file size, and likely modern features that older browsers can not support.
Note: Have a look at this series of articles covering jQuery if you find this post interesting and want to read more about the subject. (more…)
JQuery – Example of Tabs Event Handling
JQuery UI Tab Click Event
If you are working with JQuery tabs and want to extend the functionality of your tabs beyond the basics, then it’s good to know how to handle the JQuery tabs click event.
In this article I will:
- Review how to add event handling to the JQuery tabs when a tab is clicked
- I will show how to load an iFrame contained in a tab when the tab is selected.
If you like this article, please have a look here for further useful articles about JQuery.
JavaScript / JQuery – Click Button by ID
JavaScript Click
In this article I will review how you code a button click event in JavaScript, and how it differs from a button click event in JQuery. I’ll also show some integration of the client-side JavaScript with server-side code in both identifying an ASP.NET button control in JavaScript, and in making the button click event trigger a post-back to the Web server.
Structure of the Example
As you can see in the image above (and the example code below), I’ve coded both a JavaScript and a JQuery button, and have added ASP.NET button controls beside each that will get clicked when the user clicks the JavaScript or JQuery button.
I have written further useful articles about JQuery and JavaScript that are worth having a look at if you are interested in these languages. (more…)
Setting the Z-Index and Page Position of a JQuery Modal Dialog
Modal Dialog Markup
The JQuery modal dialog widget can be a useful tool on most Web pages. If you take a look at its structure in a tool such as FireBug you will see that it consists of a div that grays out the web page’s background, and another div that sits on top and that presents the modal dialog.
If you are adding absolute positioning and z-index markup to your Web page, then you will want to look a little deeper into the properties of your modal dialog widgets and how they interact with other elements on your Web page.
When an area of your page has a higher z-index than your modal dialog does, then the dialog will not be modal for that area, and may even be hidden by the area entirely. For example, if you have a text field on your form that is wrapped in an element with a z-index that is higher than that of your modal dialog, then your modal dialog will not gray out the text field. Even worse, the text field will remain editable which is certainly not desirable behavior.
If you find this article interesting, then take a look at my collection of articles on JQuery and the JQuery Modal Dialog widget.
