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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    textNode not recognised in I.E - works fine in FF

    I have created a new p element and attached a text node to it. This new text node appears on the page in I.E. I have an onclick function that changes the text in this new textnode to the "title" text from a link according to whichever link is clicked.

    The whole process works great in firefox but not in I.E

    The newly created textnode appears on the screen but IE sends back errors staing this element is null. I am assuming the browser doesn't recognise it but the newly created text in the textnode "Choose an image" appears on the screen ! Any tips would be appreciated.
    I alerted the new p element - sends back object exists but has no childnodes.

    I have tried to add as many comments as possible but if code is unclear I apologise , 1st post on forum.

    HTML - new elements created after the unordered list
    <ul id="images">
    <li><a href="images/ugly-men.jpg" title="New Face">Brand new(ish) face</a></li>
    <li><a href="images/severedhead_index.jpg" title="New Male Head">New Male Head</a></li>
    <li><a href="images/severedleg_index.jpg" title="New Male leg">New Male Leg</a></li>
    <li><a href="images/severed-armindex.jpg" title="Severed Right Arm">New Right Arm</a></li>
    <li><a href="images/severedfoot_index.jpg" title="Severed Foot (left)">New Left Foot</a></li>
    <li><a href="images/severedhand_index.jpg" title="Severed Left Hand">New Right Hand</a></li>
    </ul>

    <!--Javascript Functions -->
    window.onload = start;

    function start()
    { //execute these in order

    // create elements
    prepPage();

    // attach elements event listener for image onclick
    attachElements();

    // daft slideshow
    //startSlideshow();
    }

    ////////////////////////////// PREPPAGE ///////////////////////////
    // creates the elements required for the images and title text

    function prepPage()
    {

    // create img element
    var placeholder = document.createElement("img");

    //set the id attribute of the image tag
    placeholder.id ="placeholder";

    // set src attribute of the img tag
    placeholder.src = "images/Severed head_placeholder.jpg";

    //set alt attribute of the img
    placeholder.alt = "Severed Head";

    //create a <p> element
    var description = document.createElement("p");

    //set id of the p to description
    description.id = "description";

    //create a text node for the parent <p>
    var descText = document.createTextNode("Choose an image");

    //attach the text node to the p element
    description.appendChild(descText);

    // load in the ul object
    var gallery = document.getElementById("images");

    // insert the new object after the ul (images)
    insertAfter(placeholder,gallery); // placeholder after gallery

    // insert the new p object after the new image element !
    insertAfter(description,placeholder);

    }


    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    // insertAfter isn't a built in dom function - needs to be created

    function insertAfter(newElement,targetElement)
    {
    var parent = targetElement.parentNode;

    if (parent.lastChild == targetElement)
    {
    parent.appendChild(newElement);
    }

    else
    {
    parent.insertBefore(newElement, targetElement.nextSibling);
    }
    }

    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    function attachElements()
    {

    // get object
    var imageColl = document.getElementById("images");
    // get all a elements and assign to array
    var images = imageColl.getElementsByTagName("a");

    // loop thru array
    for(var i=0;i<images.length;i++)
    {
    //execute event when link clicked
    images[i].onclick = function(){
    // pass new attributes to showpic function
    showPic(this.href,this.title);
    return false;
    } //end anonymous function

    } //end for loop

    } // end attachElements


    function showPic(imageName,titleText)
    {

    //get the placeholder object
    var placeholder = document.getElementById("placeholder");

    //set the src of the placeholder to the value of the href variable
    placeholder.src = imageName;

    //////////////////////// Assign title attribute to new element (problem area !!!!!!!!!!!!!! /////////////////////////////////////////////////////////////////
    I have tried various ways to assign the value to this texnode - most are commented out.

    // get the object I want to assign the text to
    var description = document.getElementById("description");
    //set the paragraph text to the value of the title attribute in the first child element of the paragraph element
    description.firstChild.nodeValue = titleText;
    //description.childNodes[0].nodeValue = titleText;
    //description.innerHTML = titleText;
    alert(description.firstChild.nodeType);
    }

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,459
    Thanks
    0
    Thanked 632 Times in 622 Posts
    You have attached the text inside of the image tag instead of after it.

    Replace:

    description.appendChild(descText);

    With:

    description.parentNode.appendChild(descText);

    and see if that works better. Otherwise you will need to set up a fragment and append both the image and text to that before adding it to the page.

    Attaching it the way you have is the equivalent of placing the text between <img> and </img> and as there is no such end tag the text does not work the way you would expect.
    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.

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Your problem must be also that you have variables and ids named the same: "description", "placeholder"..... IE does not like that. Change one of them.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks for suggestions - but still not working in IE

    Thanks for tips guys. Have tried implementing them but they don't fix problem.
    Have tried to rewrite code again from scratch a couple of times , same result.
    fine in ff , not working in i.e
    Keeps telling me that this object is null , I'm presuming it(IE) is telling me it doesn't exist . But I have assigned the textnode a value which appears on the page , so if it doesn't exist why does it show this value ?
    Good advice given , vars and id's shouldn't be same name.

    Internet Explorer:What a joy to work with (not)
    I'm nodding at you Mr Bill Gates

    Thanx , Stuart M.


  •  

    Posting Permissions

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