Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can I convert IDs dynamically into classes

    Hi I have a problem with my IDs I have it set to two IDs, but I need to use them over the course of seven links. Please Please how do I make this happen I'm running out of time!

    var myBoxWidth = 0;
    var myBoxWidth2 = 0;
    function show() {

    var myBox = document.getElementById('box');
    var myContent = document.getElementById('content');
    myContent.style.display = 'inline';
    myBox.style.width = myBoxWidth + '%';
    if(myBoxWidth < 80) {

    myBoxWidth += 20;
    setTimeout(show,55);

    }
    }

    function hide(){

    var myBox = document.getElementById('box');
    var myContent = document.getElementById('content');
    myContent.style.display = 'none';
    var currentWidthVal = parseInt(myBox.style.width,10);

    if(myBoxWidth2 < currentWidthVal) {

    setTimeout(hide,55);
    myBox.style.width = currentWidthVal = currentWidthVal - 20 + '%';
    myBoxWidth = 0;

    }
    }
    56 minutes ago - 4 days left to answer.
    Additional Details
    Sorry that I didn't make this more clear, this is to be a onclick event. When the user clicks the box the object slides in from the left, this represents each page in the site. Let me include the HTML markup-

    <body onLoad="pauseEvent('this')">


    <!--HTML/CSS Link-->
    <a href="#home" id="minibox_html" onMouseOver="expandbox(this);" onMouseOut="returnbox(this)"; onclick="show(<?php require('page1.php')?>">HTML</a>
    <!--JavaScript Link-->
    <a href="#java" id="minibox_java" onMouseOver="expandbox(this);" onMouseOut="returnbox(this)"; onClick="easeIn('boxJava');"></a>
    <!--PHP Link-->
    <a href="#php" id="minibox_php" onMouseOver="expandbox(this);" onMouseOut="returnbox(this)"; onClick="easeIn('boxPhp');"></a>
    <!--Resume Link-->
    &lt
    19 minutes ago

    <div id="acknowledgment">
    <h4><a href="http://www.gwonsoongyu.com" target="_blank">Image by Soongyu Gwon</a></h4>
    <h5>From Ten of Our Friends - Fotolia</h5></div>
    <!--Footer Content-->
    <footer>
    <p><a href="#contact">Contact</a>
    <span class="phone">509-301-5601</span>
    <div class="ports">
    <a href="#twitter"></a>
    <a href="#facebook"></a>
    <a href="#linkedin"></a>
    <a href="#dribble"></a>
    <a href="#behance"></a>
    </div></p>
    </footer>


    <div id="box"><div id="content">
    <a href="#" onclick="hide()">X</a>
    <h1>HTML/CSS Code Sample</h1>
    </div></div>

    <div id="box"><div id="content">
    <a href="#" onclick="hide()">X</a>
    <h1>PHP Code Sample</h1>
    </div></div>

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    IDs must be unique within the page - you currently have duplicates.

    As your post's title suggests, you could use class-names and, rather than getElementById(), use getElementsByClassName(), which is supported in most modern browsers. This is just general advice, as I am not clear on what your specific question is(?).

    Please wrap your code in code tags!

    caniuse getElementsByClassName
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New Coder
    Join Date
    Mar 2011
    Location
    England
    Posts
    29
    Thanks
    0
    Thanked 5 Times in 5 Posts
    still a bit unclear but if you want to assign classes and id's during runtime you can try something like this:

    Code:
    var tags = document.getElementsByTagName("a")
    for (var i=0;i<tags.length;i++) {
        tags[i].className = "theclassname"
        tags[i].id = "link_" + parseInt(i + 1);
    }
    check out this example:http://jsfiddle.net/5Tta8/1/

    you can see i manually set the classes and id's to one thing then the js will change them. if you inspect the elements in the results window you can see that, oh and clean up your post with code tags please
    Last edited by stevehungry; 04-23-2013 at 10:23 AM.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You really ought to allow for if the tag already has one or more class attached.

    Code:
    tags[i].className += " theclassname"
    by leaving a blank at the front and concatenating it to what is already there you make sure that it doesn't delete any existing classes.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New Coder
    Join Date
    Mar 2011
    Location
    England
    Posts
    29
    Thanks
    0
    Thanked 5 Times in 5 Posts
    that's a good idea, would certainly make it more useful


  •  

    Tags for this Thread

    Posting Permissions

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