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 Coder
    Join Date
    Jun 2002
    Location
    Vancouver, WA
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Create and remove elements

    I am placing variable content, triggered by a rollover, into one of 3 <div> tags that have overlapping positions on the display. My first attempts appeared to work OK. I was simply using innerHTML = "" to clear the old <div> content. However, when a form with <input> elements was placed in one <div1>, the <div2> "under" the input tag would interfere (no cursor response) with form elements. This interference was at the left boundary of the interfering <div2>.

    I then decided to create and then remove the <div> element as follows:

    // Div one
    function makeTopics() {
    if(typeof(d_topic)!="undefined"){document.body.removeChild(d_topic)}
    if(typeof(d_section)!="undefined"){document.body.removeChild(d_section)}
    if(typeof(d_content)!="undefined"){document.body.removeChild(d_content)}
    var d_topic = document.createElement("<div class='topic' id='d_topic' name='d_topic'>");
    document.body.insertBefore(d_topic);
    document.getElementById('d_topic').innerHTML=topic;
    }

    // Div two
    function swapContent(n) {
    if (typeof(d_content)!="undefined"){document.body.removeChild(d_content);}
    var d_content = document.createElement("<div class='content' id='d_content' name='d_content'>");
    document.insertBefore(d_content);
    document.getElementById('d_content').innerHTML=content[n];
    }

    // Div three
    function swapSection(section) {
    if(typeof(d_section)!="undefined"){document.body.removeChild(d_section)}
    if(typeof(d_content)!="undefined"){document.body.removeChild(d_content)}
    if(typeof(d_topic)!="undefined"){document.body.removeChild(d_topic)}
    var d_section = document.createElement("<div class='section' id='d_section' name='d_section'>");
    document.body.insertBefore(d_section);
    document.getElementById('d_section').innerHTML=section;

    What happens is:

    makeTopic() <-> makeTopic() :1 or more rollover OK
    swapSection() <-> swapSection :1 or more rollover OK
    makeTopic() <-> swapSection() : Alternating rollover OK
    swapSection <-> makeTopic() : Alternating rollover OK
    makeTopic()<->makeTopic()->swapSection() : Fails
    swapSection<->swapSection()->makeTopic() : Fails

    The error message I get is "Object doesn't support this property or method".

    If I remove the removeChild code from the script, I don't get the error but the old contents isn't removed either.

    Any Thoughts

    Thanks

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    2 questions...

    1) What are you storing in d_topic, d_section, and d_content? Because if they aren't pointers to the objects that need to be removed, you need to make it that way.

    2) Are the above objects actually children of the body?
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #3
    New Coder
    Join Date
    Jun 2002
    Location
    Vancouver, WA
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    beetle

    Thank you for your reply. As is obvious, I'm new to most of this but I'll do my best to answer the questions.

    Question 1. I am placing JavaScript variables into d_topic, etc. These variables contain text, forms, tables, etc. For example,

    x = "Some Text";
    or
    x = "<form>
    <input type='text' />
    </form>";

    Question 2. I am a bit embarrassed to say that I'm not really sure d_topic, etc., are children of the <body>. I thought that the "document.body.insertBefore(d_topic);" statement placed the newly created <div> into the <body>. From your question, this must not be the case. Maybe a clue? When I included a border for the <div> tags, it appeared that empty <div>'s were being created "beneath" the <div> containing the variable content.

    However, I did finally get things to work (I think) in IE and Mozilla with this code :

    function makeTopics() {
    var testNode=document.getElementById('d_content')
    if(testNode!=null){document.body.removeChild(testNode)}
    var testNode=document.getElementById('d_section')
    if(testNode!=null){document.body.removeChild(testNode)}
    var newDiv = document.createElement("div");
    attrib = (navigator.appName=='Netscape') ? 'class' : 'className';
    newDiv.setAttribute("id",'d_topic');
    newDiv.setAttribute(attrib,'topic');
    document.body.appendChild(newDiv);
    document.getElementById('d_topic').innerHTML=topic;
    }

    I honestly don't know why it decided to work or why the former code didn't. I changed the test for the the <div> and added code to create the id and class atttributes (which seemed to be required for Mozilla to work), but I don't see why that should have fixed anything.

    I'd appreciate your insight.

    If I may ask two additional questions. I seemed to have read in this forum that using

    document.getElementById('d_topic').innerHTML=topic;

    to place content into an element is not recommended. Is this the case?

    Second. Could you recommend a book that would cover DHTML, including cross-browser issues? I do go to MSDN and the Gecko DOM reference but I'm still a bit old fashioned and need the printed page.

    Again, many thanks

    Denny

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts
    cond. Could you recommend a book that would cover DHTML, including cross-browser issues?
    For tutorials, I've found JavaScript Unleashed to be pleasant. I'd start here. Once you get the hang of the core JavaScript, event handling and what kind of properties are supported, (and objects are way cool too!) etc. you'll begin to see how to apply it to your specific needs. Once you can walk the walk, so to speak, then the next recommendation will be *extremely* helpful.

    As a reference i highly recommend Pure Javascript. This book is over 1,400 printed pages, and the entire book, along with the additional 800 pages are on the accompaning CD. The point is that this reference is complete. period. And... it specifies what version of what browser and what version of Javascript impliments each thing.

    There is a good intro tutorial on the DOM at http://www.webreference.com/js/ It's written as a series of magazine column like lessons. Look for "The DOM, Part xxxx"

    good luck!

  • #5
    New Coder
    Join Date
    Jun 2002
    Location
    Vancouver, WA
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    RadarBob

    Thanks a bunch.

    Denny


  •  

    Posting Permissions

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