Example of JQuery UI Dialog With Dynamically Loading an URL with an IFRAME

The jQuery UI dialog is easy to get started with but has a few areas that causes new users some trouble. One of the most commonly asked questions on the jquery-ui list is “how to load iframe (other webpage) in dialog?” In this article I’ll explain how to load Dynamically URL with an IFRAME in Query UI Dialog.

Demo

Demo

First, we create link to page which we want to open into dialog.

<a id="pop" href="http://www.ashishblog.com" title="Ashish Blog" >AshishBlog</a>

Now, we create dialog on link’s click event and get link href and title to diaplay in dialog.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery UI Dialog Demo - Ashish's Blog</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js"></script>
    <link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css">
    <script type="text/javascript">
        $(document).ready(function () {
            $('a#pop').live('click', function (e) {
                e.preventDefault();
                var page = $(this).attr("href")
                var pagetitle = $(this).attr("title")
                var $dialog = $('<div></div>')
                .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
                .dialog({
                    autoOpen: false,
                    modal: true,
                    height: 625,
                    width: 500,
                    title: pagetitle
                });
                $dialog.dialog('open');
            });
        });
    </script>
    </head>
    <body>
     <a id="pop" href="http://www.ashishblog.com" title="Ashish Blog">AshishBlog</a>
    </body>
    </html> 

Thanks.

Textbox Watermark without jQuery

What is TextBoxWatermark?
When a TextBox is empty, it displays a message to the user. Once the user has typed some text into the TextBox, the watermarked appearance goes away. The typical purpose of a watermark is to provide more information to the user about the TextBox itself without cluttering up the rest of the page.

However, TextBoxWatermark can be done in CSS by using :focus pseudo-class but note that :focus is not supported by IE. And also done by using jQuery plugin.

Here is simple way to do TextBoxWatermark by using HTML Event handler attributes such as OnFocus and OnBlur.

Code:

Demo:

Thanks

Left Menu Accordion using jQuery in AspDotNetStoreFront

There are many AspDotNetStorefront web developer wondering how to implement accordion of categories, manufacture in left menu of AspDotNetStorefront.
In this article, I show you have to create category accordion in left menu of AspDotNetStorefront.
Left Menu Accordion using jQuery in AspDotNetStoreFront

Step 1: Edit rev.categories.xml.config file to display all sub-categories and appropriate accordion format.
Here is code:

In above code, line 30 < xsl:if test="count(child::Entity)&gt;0" > is display all sub category..

Step 2: Apply some style to your Menu using CSS

#accordion {
list-style: none;
padding: 0 0 0 0;
width: 170px;
}
#accordion div {
display: block;
background-color: #FF9927;
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5 5 5 7px;
list-style: circle;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#accordion ul {
list-style: none;
padding: 0 0 0 0;
}
#accordion ul{
display: none;
}
#accordion ul li {
font-weight: normal;
cursor: auto;
background-color: #fff;
padding: 0 0 0 7px;
}
#accordion a {
text-decoration: none;
}
#accordion a:hover {
text-decoration: underline;
}

Note that in above CSS code, we have applied Round Corner CSS to our menu to improve the look. Although this technique works with all the modern web browser, may be not work in some.

Step 3: Give life to your category menu using jQuery
now, we need jQuery code to make Accordion category menu. Put jQuery code below your XMLPackage Defination.

(!XmlPackage Name="rev.categories"!)
<script type="text/javascript" >
$("#accordion > li > div").click(function () {
if (false == $(this).next().is(':visible')) {
$('#accordion ul').slideUp(300);
}
$(this).next().slideToggle(300);
});

$('#accordion ul:eq(0)').show();
</script>

If you notice the above code, code Line 10 made the first menu item in accordion menu visible.

If you using AspDotNetStorefront v9 then put below code

<asp:Literal ID="leftNavCat" runat="server" Text="<%$ Tokens:XMLPACKAGE, rev.categories.xml.config%>" />
<script type="text/javascript" >
$("#accordion > li > div").click(function () {
if (false == $(this).next().is(':visible')) {
$('#accordion ul').slideUp(300);
}
$(this).next().slideToggle(300);
});

$('#accordion ul:eq(0)').show();
</script>

Note: Please don’t put jQuery code in . If you want to put there use event .live() instead of .click().
if its not working 4 you let me know by comment..
Thanks.