www.webdeveloper.com
Results 1 to 2 of 2

Thread: Inserting element and layout issues

  1. #1
    Join Date
    Dec 2005
    Posts
    108

    Inserting element and layout issues - Solved

    Edit:

    Instead of appending the node a node within the document, I inserted to the body node using:

    Code:
    		
    docBody.insertBefore(confirmationDiv, document.getElementById(parentId).nextSibling);
    I am trying to create a method to slimline the amount of code I need when providing confirmation messages to the user.

    The code attached creates a div below the object with the id 'parentId'. I dont want it to hover over the page like it does at the moment, but instead be inserted properly so that anything below the parent object shuffles down to make room.

    The div should disapear when the button loses focus, this works perfectly at the moment.

    I'm not sure how to do this, so if anyone could help me it would be great.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Help</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    
    <script>
    
    
    function showConfirmationMessage(button, parentId, title, message) {
    
    	    if (!document.getElementById("confirmationDiv")) {
    
    		// Create the base div and assign an id and style object
    		var confirmationDiv = document.createElement("div");
    		confirmationDiv.id = "confirmationDiv";
    		confirmationDiv.align = "right";
    		confirmationDiv.style.border = "1px solid #cccccc";
    		confirmationDiv.style.backgroundColor = "#edeff1";
    		confirmationDiv.style.width = "200px";
    		confirmationDiv.style.textAlign = "left";
    		confirmationDiv.style.padding = "10px";
    		confirmationDiv.style.position = 'absolute';
    
    		var titleParagraph = document.createElement("p");
    		titleParagraph.style.fontSize = '11px';
    		titleParagraph.style.fontWeight = 'bold';
    		titleParagraph.innerHTML = title;
    
    		var messageParagraph = document.createElement("p");
    		messageParagraph.style.color = '#666666';
    		messageParagraph.innerHTML = message;
    
    		confirmationDiv.appendChild(titleParagraph);
    		confirmationDiv.appendChild(messageParagraph);
    
    		// Get the body object
    		var docBody = document.getElementById(parentId);
    
    		// Create the structure
    		docBody.appendChild(confirmationDiv);
    		
    		button.onblur = function() {
    			docBody.removeChild(confirmationDiv);
    		}
    
    	}
    }
    
    </script>
    </head>
    <body>
    
    <input id="someButton" type="button" onclick="showConfirmationMessage(this, 'someButton', 'Success', 'This is the confirmation message to let you know its all good')" />
    
    <div style="border:1px solid #cccccc; background-color:#edef1; padding:50px;" width="100%">foo</div>
    
    </body>
    </html>
    Last edited by idn; 12-12-2005 at 07:05 PM. Reason: solved

  2. #2
    Join Date
    Dec 2005
    Location
    Queen Creek, AZ
    Posts
    1,564
    what is your code supposed to do exactly?

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