Powered By Blogger
Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Friday, November 29, 2013

Enable/ Disable Link Using jQuery


Consider a link by the id, 'link1'.
<a href="abc.htm" id="link1">

It can be disabled using jquery .
$("#link1").css({'pointer-events':'none', 'cursor':'default'});

Disabled link can be enabled by removing the css properties. 
$("#link1").css({'pointer-events':'', 'cursor':''});

thanks,
Shyarmal

Thursday, November 28, 2013

jQuery Popup Dialog



    This example shows how to prompt a pop-up with jQeury when an icon is clicked. Following is the HTML code required for this exercise. An image link is created with the id, 'hint' (, which does not link to any page). Then a div element is defined with the 'dialog' as the id. This is the dialog that would be displayed when the image icon is clicked. The dialog will have a title, 'Bank Code' and a text, 'Abbreviation of the bank name.'. Its dimensions are defined in the style attribute (height and width). Since the div should not be displayed on the html page, it has been made invisible by setting the 'display' property to 'none' in style attribute.

================================================================
<a href="#" id="hint"><img src="images/information-icon.gif" align="top"> </a>


<div id="dialog" title="Bank Code" style="display:none; height: 75mm; width: 300mm;">
    <p>Abbreviation of the bank name.</p>
</div>

================================================================

Binding of click event of the link (referred to by 'hint') should be done in jQuery ready function. Click event of the link is captured and the display property of the div, 'dialog' is set to 'block'. Then prompting of the dialog is done by calling '$( "#dialog" ).dialog();'.


================================================================
$(function() {
     $("#hint").click(function () {
        $( "#dialog").css("display", "block");
        $( "#dialog" ).dialog();
    });
});

================================================================


screen shot of the prompt:


thanks, 
Shyarmal

Sunday, July 31, 2011

Embed youtube video in HTML

 The following code will embed a you tube video to your html page. The attributes, value and src of param with name movie and embed tags respectively holds the url to the video, which is being embedded. The last segment of the url is the video ID (which is used to identify a video). The ID in the following example is rxUm-2x-2dM. 

<object width="425" height="350">
             <param name="movie" value="http://www.youtube.com/v/rxUm-2x-2dM"/>
             <param name="wmode" value="transparent" />
             <param name="allowFullScreen" value="true" />
             <embed src="http://www.youtube.com/v/rxUm-2x-2dM"
                      type="application/x-shockwave-flash"
                      wmode="transparent" width="425" height="350"
                      allowFullScreen="true">
              </embed>
</object>

Furthermore video options such as height, width, mode, full screen can be specified, as shown in the example.  Details about video options can be found at http://code.google.com/apis/youtube/player_parameters.html.

thanks,
Shyarmal.