www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Get id of an Element

  1. #1
    Join Date
    Dec 2003
    Location
    St. Louis
    Posts
    401

    Help with drop down list menu PLEASE almost got it

    Is there a way to get the id of an element, such as a list or something.



    thanks,
    Matt
    www.maddDidley.com
    Last edited by madddidley; 08-24-2005 at 02:07 PM.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Can you be more specific.

  3. #3
    Join Date
    Dec 2003
    Location
    St. Louis
    Posts
    401
    The reason I ask is because I am making a vertical drop down menu. It is dynamic, driven by mysql. There are categories then there are sub categories these would be the links. I am trying to make it drop down dynamically with javascript.

    I can post my code. Its pretty scrambled. Maybe I should, there has got to be an easier way to do this.

    PHP Code:


    <html>

    <head>

    <title>Drop down menu</title>

    <style>

    <?PHP //////////////////////////////////////////////////////////////////////////////////////////DYNAMIC CSS HIDE PRODUCTS
    $gp=mysql_query("SELECT category, product from products order by product asc");
    echo 
    mysql_error();

    while(
    $g=mysql_fetch_array($gp)) {
        
    $label=substr($g[category], 02);
        
        if(
    $label != $lastlabel) {
            echo 
    "#p_$label {display: none;}\n";
            
    $lastlabel=$label;
        }
    }
    ?>

    </style>



    <script>

    <?PHP /////////////////////////////////////////////////////////////////////////////////////DYNAMIC JAVASCRIPT FUNCTION
    $cg=mysql_query("SELECT category, product from products order by product asc");
    echo 
    mysql_error();

    while(
    $b=mysql_fetch_array($cg)) {
        
        
    }
    ?>

    function hideProduct() {
            document.getElementById("p_Cu").style.display = "none";
    }

    </script>

    </head>



    <body>


    <?PHP

    $category
    =mysql_query("SELECT * from products order by category, product ASC");
    $cnum=mysql_num_rows($category);
    echo 
    mysql_error();


    echo 
    "<ul>";

    $count=1;
    while(
    $a=mysql_fetch_array($category)) {
        
        if(
    $a[category] != $lastcategory) {
            echo 
    "<li><a href=\"#?productId=$a[productId]\" onMouseOver=\"showProduct();\" onMouseOut=\"hideProduct();\">$a[category]</a></li>";
            
    $lastcategory=$a[category];
        }
        
        
    //if($a[product] != $lastproduct) {
        
    $label=substr($a[category], 02);
            echo 
    "<ul id=\"p_$label\"><li>$a[product]</li></ul>";
            
    //$lastproduct=$a[product];
        //}

    $count++;
    }

    echo 
    "</ul>";

    ?>
    </body>

    </html>

  4. #4
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    If I understand you right, something like this:


    PHP part:
    Code:
    <?PHP
    
    $category=mysql_query("SELECT * from products order by category, product ASC");
    $cnum=mysql_num_rows($category);
    echo mysql_error();
    
    
    echo "<ul>";
    
    $count=1;
    while($a=mysql_fetch_array($category)) {
        
    
        //if($a[product] != $lastproduct) {
        $label=substr($a[category], 0, 2);
            echo "<ul id=\"p_$label\"><li>$a[product]</li></ul>";
            //$lastproduct=$a[product];
        //}
    
        if($a[category] != $lastcategory) {
            echo "<li><a href=\"#?productId=$a[productId]\" onMouseOver=\"showProduct(\'p_$label\');\" onMouseOut=\"hideProduct(\'p_$label\');\">$a[category]</a></li>";
            $lastcategory=$a[category];
        }
        
    
    $count++;
    }
    
    echo "</ul>";
    
    ?>
    JavaScript part:
    Code:
    <script type="text/javascript">
    
    function hideProduct() {
            document.getElementById(arguments[0]).style.display = "none";
    }
    function showProduct(){
            document.getElementById(arguments[0]).style.display = "block";
    }
    </script>

    I'm not sure what you are trying to do with this:
    Code:
    <?PHP /////////////////////////////////////////////////////////////////////////////////////DYNAMIC JAVASCRIPT FUNCTION
    $cg=mysql_query("SELECT category, product from products order by product asc");
    echo mysql_error();
    
    while($b=mysql_fetch_array($cg)) {
        
    //What are you trying to do inside this loop?
    
    }
    ?>
    Last edited by Ultimater; 08-23-2005 at 11:58 PM.

  5. #5
    Join Date
    Dec 2003
    Location
    St. Louis
    Posts
    401
    In that last part I was trying to do some dynamic javascript but said forget it.

    On this part

    <script type="text/javascript">

    function hideProduct() {
    document.getElementById(arguments[0]).style.display = "none";
    }
    function showProduct(){
    document.getElementById(arguments[0]).style.display = "block";
    }
    </script>

    I am getting an error. Should there be quotes in the getElementBId?

    And on this part I need the category to print first
    PHP Code:
    <?PHP

    $category
    =mysql_query("SELECT * from products order by category, product ASC");
    $cnum=mysql_num_rows($category);
    echo 
    mysql_error();


    echo 
    "<ul>";

    $count=1;
    while(
    $a=mysql_fetch_array($category)) {
        

        
    //if($a[product] != $lastproduct) {
        
    $label=substr($a[category], 02);
            echo 
    "<ul id=\"p_$label\"><li>$a[product]</li></ul>";
            
    //$lastproduct=$a[product];
        //}

        
    if($a[category] != $lastcategory) {
            echo 
    "<li><a href=\"#?productId=$a[productId]\" onMouseOver=\"showProduct(\'p_$label\');\" onMouseOut=\"hideProduct(\'p_$label\');\">$a[category]</a></li>";
            
    $lastcategory=$a[category];
        }
        

    $count++;
    }

    echo 
    "</ul>";

    ?>
    Does it need to be like that to work?

  6. #6
    Join Date
    Dec 2003
    Location
    St. Louis
    Posts
    401
    OK. So I got it to work kind of. Only though I have two products in a category and it only shows one. Here is my complete up-to-date code.

    PHP Code:
    <html>

    <head>

    <title>Drop down menu</title>

    <style>

    <?PHP //////////////////////////////////////////////////////////////////////////////////////////DYNAMIC CSS HIDE PRODUCTS
    $gp=mysql_query("SELECT category, product from products order by category asc");
    echo 
    mysql_error();

    while(
    $g=mysql_fetch_array($gp)) {
        
    $label=substr($g[category], 02);
        
        if(
    $label != $lastlabel) {
            echo 
    "#p_$label {display: none;}\n";
            
    $lastlabel=$label;
        }
    }
    ?>

    </style>



    <script type="text/javascript">

    function showProduct() {
        document.getElementById(arguments[0]).style.display = "block";
    }

    function hideProduct() {
            document.getElementById(arguments[0]).style.display = "none";
    }

    </script>

    </head>



    <body>


    <?PHP

    $category
    =mysql_query("SELECT * from products order by category, product ASC");
    $cnum=mysql_num_rows($category);
    echo 
    mysql_error();


    echo 
    "<ul>\n";

    $count=1;
    while(
    $a=mysql_fetch_array($category)) {
        
        if(
    $a[category] != $lastcategory) {
                
    $label=substr($a[category], 02);
            echo 
    "<li><a href=\"#?productId=$a[productId]\" onMouseOver=\"showProduct('p_$label');\" onMouseOut=\"hideProduct('p_$label');\">$a[category]</a></li>\n";
            
    $lastcategory=$a[category];
        }
        
        
    //if($a[product] != $lastproduct) {
        
    $label=substr($a[category], 02);
            echo 
    "<ul id=\"p_$label\"><li>$a[product]</li></ul>\n";
            
    //$lastproduct=$a[product];
        //}

    $count++;
    }

    echo 
    "</ul>\n";

    ?>
    </body>

    </html>


    Here is what I get when I view the source.
    PHP Code:
    <html>

    <
    head>

    <
    title>Drop down menu</title>

    <
    style>

    #p_Cu {display: none;}
    #p_St {display: none;}
    #p_tr {display: none;}

    </style>



    <
    script type="text/javascript">

    function 
    showProduct() {
        
    document.getElementById(arguments[0]).style.display "block";
    }

    function 
    hideProduct() {
            
    document.getElementById(arguments[0]).style.display "none";
    }

    </script>

    </head>



    <body>


    <ul>
    <li><a href="#?productId=4" onMouseOver="showProduct('p_Cu');" onMouseOut="hideProduct('p_Cu');">Custom Cuts</a></li>
    <ul id="p_Cu"><li>door jam thing</li></ul>
    <li><a href="#?productId=3" onMouseOver="showProduct('p_St');" onMouseOut="hideProduct('p_St');">Stereo Equipment</a></li>
    <ul id="p_St"><li>amp</li></ul>
    <ul id="p_St"><li>speakers</li></ul>
    <li><a href="#?productId=1" onMouseOver="showProduct('p_tr');" onMouseOut="hideProduct('p_tr');">transmission</a></li>
    <ul id="p_tr"><li>thing1</li></ul>
    </ul>
    </body>

    </html> 
    Last edited by madddidley; 08-24-2005 at 02:00 PM.

  7. #7
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    This part is bad HTML:
    Code:
    <ul id="p_St"><li>amp</li></ul>
    <ul id="p_St"><li>speakers</li></ul>
    The id attribute for each tag must be unique unlike the name attribute.

    The answer is to use names instead of ids and then use actual classes in your CSS instead of id references because of the lack of ids:
    Code:
    <html>
    
    <head>
    
    <title>Drop down menu</title>
    
    <style type="text/css">
    
    .display_none{display: none;}
    
    </style>
    
    
    
    <script type="text/javascript">
    
    function showProduct() {
    var els=document.getElementsByName(arguments[0]);
    for(var i=0,l=els.length;i<l;i++){
    els[i].style.display = "block";
    }
    }
    
    function hideProduct() {
    var els=document.getElementsByName(arguments[0]);
    for(var i=0,l=els.length;i<l;i++){
    els[i].style.display = "none";
    }
    }
    
    </script>
    
    </head>
    
    
    
    <body>
    
    
    <ul>
    <li><a href="#?productId=4" onMouseOver="showProduct('p_Cu');" onMouseOut="hideProduct('p_Cu');">Custom Cuts</a></li>
    <ul name="p_Cu" class="display_none"><li>door jam thing</li></ul>
    <li><a href="#?productId=3" onMouseOver="showProduct('p_St');" onMouseOut="hideProduct('p_St');">Stereo Equipment</a></li>
    <ul name="p_St" class="display_none"><li>amp</li></ul>
    <ul name="p_St" class="display_none"><li>speakers</li></ul>
    <li><a href="#?productId=1" onMouseOver="showProduct('p_tr');" onMouseOut="hideProduct('p_tr');">transmission</a></li>
    <ul name="p_tr" class="display_none"><li>thing1</li></ul>
    </ul>
    </body>
    
    </html>

  8. #8
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    Your up-to-date PHP code should now read as follows, after making my changes:
    Code:
    <html>
    
    <head>
    
    <title>Drop down menu</title>
    
    <style type="text/css>
    
    .display_none{display: none;}
    
    
    </style>
    
    
    
    <script type="text/javascript">
    
    function showProduct() {
    var els=document.getElementsByName(arguments[0]);
    for(var i=0,l=els.length;i<l;i++){
    els[i].style.display = "block";
    }
    }
    
    function hideProduct() {
    var els=document.getElementsByName(arguments[0]);
    for(var i=0,l=els.length;i<l;i++){
    els[i].style.display = "none";
    }
    }
    
    </script>
    
    </head>
    
    
    
    <body>
    
    
    <?PHP
    
    $category=mysql_query("SELECT * from products order by category, product ASC");
    $cnum=mysql_num_rows($category);
    echo mysql_error();
    
    
    echo "<ul>\n";
    
    $count=1;
    while($a=mysql_fetch_array($category)) {
        
        if($a[category] != $lastcategory) {
                $label=substr($a[category], 0, 2);
            echo "<li><a href=\"#?productId=$a[productId]\" onMouseOver=\"showProduct('p_$label');\" onMouseOut=\"hideProduct('p_$label');\">$a[category]</a></li>\n";
            $lastcategory=$a[category];
        }
        
        //if($a[product] != $lastproduct) {
        $label=substr($a[category], 0, 2);
            echo "<ul name=\"p_$label\" class=\"display_none\"><li>$a[product]</li></ul>\n";
            //$lastproduct=$a[product];
        //}
    
    $count++;
    }
    
    echo "</ul>\n";
    
    ?>
    </body>
    
    </html>
    Sorry, I would have used the [php] tag but every instance of \n was being replaced by n when using that tag unlike the [code] tag -- which doesn't have such a glitch in it, I hope that forum glitch gets fixed ASAP!
    Last edited by Ultimater; 08-24-2005 at 02:47 PM.

  9. #9
    Join Date
    Dec 2003
    Location
    St. Louis
    Posts
    401
    Ok, this is what I have and I don't get any errors but it doesn't do anything.

    PHP Code:
    <?PHP 
    error_reporting
    (E_ALL^E_NOTICE);
    mysql_connect("localhost");
    mysql_select_db("showmestreetcustoms");
    ?>

    <html>

    <head>

    <title>Drop down menu</title>

    <style text="text/css">

    .display_none {display: none; }
    </style>



    <script type="text/javascript">

    function showProduct() { 
        var els=document.getElementsByName(arguments[0]); 
        for(var i=0,l=els.length;i<l;i++){ 
            els[i].style.display = "block"; 
        } 


    function hideProduct() { 
    var els=document.getElementsByName(arguments[0]); 
        for(var i=0,l=els.length;i<l;i++){ 
            els[i].style.display = "none"; 
        } 
    }

    </script>

    </head>



    <body>


    <?PHP

    $category
    =mysql_query("SELECT * from products order by category, product ASC");
    $cnum=mysql_num_rows($category);
    echo 
    mysql_error();


    echo 
    "<ul>\n";

    $count=1;
    while(
    $a=mysql_fetch_array($category)) {
        
        if(
    $a[category] != $lastcategory) {
                
    $label=substr($a[category], 02);
            echo 
    "<li><a href=\"#\" onMouseOver=\"showProduct('p_$label');\" onMouseOut=\"hideProduct('p_$label');\">$a[category]</a></li>\n";
            
    $lastcategory=$a[category];
        }
        
        
        
    $label=substr($a[category], 02);
            echo 
    "<ul name=\"p_$label\" class=\"display_none\"><li>$a[product]</li></ul>\n";


    $count++;
    }

    echo 
    "</ul>\n";

    ?>
    </body>

    </html>

  10. #10
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    I don't know what your MySQL database has stored in it nor am I the best PHP programmer -- it ain't even worth telling me what's in it either. I did the JavaScript half, now go to the PHP forum and get help from someone that knows PHP, I hardly know any PHP at all -- I'm more a PERL programmer.

  11. #11
    Join Date
    Dec 2003
    Location
    St. Louis
    Posts
    401
    Thanks for all your help but...

    PHP Code:
    function showProduct() {
    var 
    els=document.getElementsByName(arguments[0]);
    for(var 
    i=0,l=els.length;i<l;i++){        /////////////////what is l=els.length do
    els[i].style.display "block";
    }


    I'm not sure if I totally understand that part els.length. Is that the length of the of argument or how many arguments there are?
    Last edited by madddidley; 08-25-2005 at 12:10 AM.

  12. #12
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    Code:
    for(var i=0,l=els.length;i<l;i++)
    is the same as:
    Code:
    for(var i=0;i<els.length;i++)
    except that the second way produces more lag because it checks the length of "els" ever time as apose to checking it once and remembering the length.

    els.length means how many elements were matched.
    The document.getElementsByName function accepts an argument, the name of the element to search for, then it returns an array of all the elements with the name attribute set to the argument sent to the function.

  13. #13
    Join Date
    Dec 2003
    Location
    St. Louis
    Posts
    401
    I just realized that I don't have a doc type. Could that cause a problem?

  14. #14
    Join Date
    Dec 2003
    Location
    St. Louis
    Posts
    401
    This is what I got and I know the database is ok. I threw an alert in to see what els was and I got [object]. So its not getting the p_$label argument. I don't know if that will help anyone helping me but yeah.

    PHP Code:
    function showProduct() { 
    var 
    els=document.getElementsByName(arguments[0]); 
    alert(els);

    for(var 
    i=0i<els.lengthi++){       els[i].style.display "block"



  15. #15
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    You are being stricter than XHTML STRICT on steriods, you are making errors outta perfectly legal code, lol. You should learn what arguments[0] means.
    Code:
    function showProduct() {
    alert(arguments[0])
    var els=document.getElementsByName(arguments[0]);
    
    for(var i=0; i<els.length; i++){       els[i].style.display = "block";
    }
    }
    Code:
    <script type="text/javascript">
    function testing123(a){
    alert(arguments[0])
    alert(a)
    alert(arguments)
    alert(arguments.length)
    }
    testing123("this is called an argument")
    </script>
    Btw, what seems to be the problem? You didn't mention anything wrong with my code and you seem to be pulling it appart as though there was an error in it.
    Last edited by Ultimater; 08-25-2005 at 04:08 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles