Updates from January, 2010 Toggle Comment Threads | Keyboard Shortcuts

  • saif 8:49 am on January 12, 2010 Permalink | Reply
    Tags: drop down list url, onChange go url   

    Go to a URL/link from drop down list/menu in html+javascript 

    In many web application, we see some kind of drop down list to go to a URL only by clicking on the list item, no need to click on any button. For the users, this is a nice experience that they don’t have to click on submit button.
    I have described here in details the tutorial especially for beginners. Let we have a form like below:


    <form method="post" action="http://www.example.com/submit.php">
    <input type="submit" name="submit_button" value="Go">
    <select name="url_list" >
    <option value="http://www.example.com/index.html">list 1</option>
    <option value="http://www.example.com/about.html">list 2</option>
    </select>
    </form>

    we can improve the form performance by combining it with a simple javascript and it has below advantages:

    1.It makes your page more efficient, because if JavaScript is enabled, the web browser can jump to the destination webpage itself without having to run the script. Also it is nicer for users because they do not need to select the “go” button.

    2.The form will also continue to work with web browsers that do not have JavaScript available.

    Now, the following example displays a drop down list with a js function. Include the js in your <head></head> of the file :


    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin gotosite
    function gotosite()
    {
    var URL = document.gotoform.url_list.options[document.gotoform.url_list.selectedIndex].value; window.location.href = URL;
    }
    // End gotosite -->
    </script>

    and now try the form like this :


    <form name="gotoform" method="post" action="http://www.example.com/submit.php">
    <noscript>
    <!-- use noscript to only show this if no javascript is available -->
    <input type="submit" name="submit_button" value="Go">
    </noscript>
    <select name="url_list" size="1" onChange="gotosite()">
    <-- Value of first option is default, usually current page -->
    <option value="http://www.example.com/submit.php"> Select a Site...</option>
    <option value="http://www.example.com/index.html">list 1</option>
    <option value="http://www.example.com/about.html">list 2</option>
    </select>
    </form>

    we call ‘gotosite()’  function on ‘onChange’ of <select>, and this will help to jump to the url for each list.
    Hope this will help the beginners for more reliable user experience.

     
    • Craige 11:21 pm on April 29, 2012 Permalink | Reply

      this is very helpful! Thanks much..as a beginner in JS, it really helped me a lot 😀 thanks Sir 😀

    • Yodi 1:27 am on August 30, 2012 Permalink | Reply

      I tried this code on my blog and it works. But how can I make the length/size of the menu fixed?
      The above code follows the length of the list name. Please help!

      • saif 7:20 am on August 31, 2012 Permalink | Reply

        Hi, Yodi.
        i think u tried it with a dropdown menu, if u want to bind/fix a menu’s width or length, u can use css for it. it can be a inline css or from a css class like this :
        style=”width: 150px;”

        if u need further help, feel free to knock me 🙂

    • PompanoBeachPlumber 6:39 pm on October 17, 2012 Permalink | Reply

      Good stuff, thank you for this. As a contractor this really helps keep me fresh…. Thanks Again…

    • coupons 2012 9:54 pm on October 17, 2012 Permalink | Reply

      Please let me know if you’re looking for a article author for your site. You have some really good articles and I feel I would be a good asset. If you ever want to take some of the load off, I’d love to write some
      articles for your blog in exchange for a link back to mine.

      Please blast me an email if interested. Many thanks!

    • http://iepla.net/forums/index.php?action=profile&u=311 8:39 am on December 23, 2012 Permalink | Reply

      I love it when people get together and share ideas.
      Great site, keep it up!

    • tao of badass login info 12:53 pm on May 1, 2013 Permalink | Reply

      I’ve been surfing online more than 4 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. Personally, if all web owners and bloggers made good content as you did, the net will be a lot more useful than ever before.

    • ปฏิทิน ไทย 2556 8:21 pm on May 15, 2013 Permalink | Reply

      I think this is one of the most significant info for me.
      And i am glad reading your article. But wanna remark
      on some general things, The site style is wonderful, the articles is really nice : D.

      Good job, cheers

    • gold bullion 9:55 am on June 9, 2013 Permalink | Reply

      Wow, this post is nice, my sister is analyzing these
      things, thus I am going to convey her.

  • saif 9:13 am on December 12, 2009 Permalink | Reply
    Tags: Dynamic row color, Javascript   

    Alter Dynamic Table Row Background Colors Using JavaScript 

    Many web applications that present tabular data use alternating background colors of table rows to increase the readability of that data. This could be more attractive and nice looking for visitors.

    I wanted the table to be dynamic. We can use PHP for doing this, but hence I’m showing it in JavaScript.

    Getting Started

    Let’s start with an ordinary html table. Whether the table contains head/foot elements doesn’t matter in this case:

    <table id="theTable">
    <tr><td>0 - some txt</td></tr>
    <tr><td>1 - some txt</td></tr>
    <tr><td>2 - some txt</td></tr>
    <tr><td>3 - some txt</td></tr>
    <tr><td>4 - some txt</td></tr>
    </table>

    we use a style element through which we have defined two classes for background colors:

    <style>
    .odd{background-color: white;}
    .even{background-color: gray;}
    </style>

    The style is flexible: it could just as well define something else, such as that every second row should display in italics. The complete function looks like this:

    function alternate(id){
    if(document.getElementsByTagName){
    var table = document.getElementById(id);
    var rows = table.getElementsByTagName("tr");
    for(i = 0; i < rows.length; i++){
    //manipulate rows
    if(i % 2 == 0){
    rows[i].className = "even";
    }else{
    rows[i].className = "odd";
    }
    }
    }
    }

    The above function should be called from the onload event of the body tag:

    <html>

    <body onload="alternate('thetable')">
    <table id="thetable">
    <tr><td>…</td></tr>
    </table>

    The result could look something like this:

    row color img

    row color example

    Hope this may help the beginners who are developing web applications. 🙂

    Happy’s coding.

    Many web applications that present tabular data use alternating background colors of table rows to increase the readability of that data. This could be more attractive and nice looking for visitors.

    I wanted the table to be dynamic. We can use PHP for doing this, but hence I’m showing it in JavaScript.

    Getting Started
    Let’s start with an ordinary html table. Whether the table contains head/foot elements doesn’t matter in this case:

    <table id="theTable">
    <tr><td>0 - some txt</td></tr>
    <tr><td>1 - some txt</td></tr>
    <tr><td>2 - some txt</td></tr>
    <tr><td>3 - some txt</td></tr>
    <tr><td>4 - some txt</td></tr>
    </table>

    we use a style element through which we have defined two classes for background colors:

    <style>
    .odd{background-color: white;}
    .even{background-color: gray;}
    </style>

    The style is flexible: it could just as well define something else, such as that every second row should display in italics. The complete function looks like this:

    function alternate(id){
    if(document.getElementsByTagName){
    var table = document.getElementById(id);
    var rows = table.getElementsByTagName("tr");
    for(i = 0; i < rows.length; i++){
    //manipulate rows
    if(i % 2 == 0){
    rows[i].className = "even";
    }else{
    rows[i].className = "odd";
    }
    }
    }
    }

    The above function should be called from the onload event of the body tag:

    <html>

    <body onload="alternate('thetable')">
    <table id="thetable">
    <tr><td>…</td></tr>
    </table>

    The result could look something like this:
    1457_rowcolor1

    Hope this will may help the beginners who are developing web applications. J

    Happy’s coding.

     
    • Mahbub 10:38 am on February 8, 2010 Permalink | Reply

      I remember when i used to do this way 6-7 years back. Now with jQuery this is a piece of Cake.

      It’ll look like

      $(“#thetable tr:even”).addClass(“even”);
      $(“#thetable tr:odd”).addClass(“odd”);

      • saif 12:09 pm on February 8, 2010 Permalink | Reply

        @mahbub bhai, thanx for sharing. I just wrote it in js way and for beginners, Yours one is also useful and pretty. 😉

c
Compose new post
j
Next post/Next comment
k
Previous post/Previous comment
r
Reply
e
Edit
o
Show/Hide comments
t
Go to top
l
Go to login
h
Show/Hide help
shift + esc
Cancel
%d bloggers like this: