In: Root » » AJAX » Manipulating Dynamic Content Blocks
This article looks at the best ways to define distinct content blocks in applications for example, for the purposes of drag and drop. Problem When creating distinct content blocks in aWeb application, you need to know the best way to define and manipulate them, whether that’s through div or span elements, or through iframe elements. Theory Many Web sites display content as a single block through the use of an HTML div element. The div element allows content to float on the page, and it supports dragging a block on an HTML page. The HTML page with the wave image is a desktop that has some icons along the top of the page. The window that resembles a dialog box is an application within the desktop. The dialog box and many other elements are all HTML content blocks defined using div elements. You could also use an iframe HTML element, which is an embedded frame used as a content block. In both examples, it is not obvious that one HTML page is using div elements and the other is using iframe elements. First, let’s define a content block. A content block is an HTML element that serves as a placeholder for HTML content. What distinguishes a content block from, say, a table cell, is that you can move a content block from one location in the HTML hierarchy to another. It is not possible to remove a table cell (a td element) and make it a child of the form element. The HTML elements span and div are the most commonly used elements to define content blocks. Solution The big difference between using a div or span vs. an iframe element to display content is how the content block is populated. A div or span content block cannot populate itself; it requires an external assignment. The assignment could be an XMLHttpRequest or an iframe method call. An iframe can download its own content by assigning the src property. In essence, even though you can use div, span, and iframe as content blocks, each of the three tags has very distinct features. The features of each tag are defined as follows: • div: Defines an assignable content block that functions as a paragraph separator. This means that when adding a div element to an HTML page in relative coordinate mode, any HTML elements placed afterwards are located on the HTML page underneath the div element. When used in absolute coordinate mode, a div element can behave like a dialog box. A div element is always part of the HTML page. • iframe: Defines a content block where a script can assign the content, or the iframe can load its own content by assigning the src property. Using an iframe element is like creating an HTML page within an HTML page. For example, if your script messes up the content of iframe, it won’t mess up the content of the parent HTML page. The separation of content makes it possible to define identically named variables or functions with different values.
Source: /website/ROOT/ajax articles/dhtml/dataplaceholder.html
<html>
<head>
<title>Data Placeholder Example</title>
</head>
<script language="JavaScript" type="text/javascript">
function Replace() {
document.getElementById( "word").innerHTML =
document.getElementById( "toreplace").value;
}
</script>
<body>
<p>
<input type="text" size="20" id="toreplace" />
<input type="button" value="Replace" onclick="Replace()" />
</p>
<p>This is a runalong text that contains a
<span id="word">word</span> that can be replaced</p>
</body>
</html>
The following code illustrates how to define the div and span elements: Some text with embedded ( <div style="display:inline"><i>inline div element</i></div>). and more text with embedded ( <span style="display:block"><i>block span element</i></span>). You can also use the span and div elements to display content in an HTML page that can be directly referenced without having to manipulate the referenced elements surrounding HTML. Now suppose you want to create error messages. You should not display error messages before an error occurs, so you should keep the error message hidden. You can use the following HTML code to hide a span element: (<span id="hidden" style="visibility:hidden">empty space</span>) The span element is indeed hidden, but it’s apparent that some text is being hidden. This is obvious, because the space required by the span element is still taken. It is sort of like the ostrich that sticks its head in the ground. Sure, you and it cannot see each other, but you know the ostrich is still there. To hide the span element, or any HTML element in particular, you use the display property that you used to determine the alignment of the text. To hide the element completely, set the display subproperty to none, as shown by the following example: (<span id="hidden" style="visibility:none">empty space</span>) You can also hide the HTML element to store reference data, such as the serialization results of a JavaScript object, in the span or div elements. The downside to using a span or div element and the innerHTML property is HTML content might be escaped or encoded. Consider the following source code, which illustrates the problem of escaped or encoded HTML: document.getElementById( "escaped").innerHTML = "<2 > 1</hello>"; document.getElementById( "valueescaped").value = document.getElementById( "escaped").innerHTML; In the example, the method getElementById retrieves a reference to a span or div element with the identifier escaped. The innerHTML property is assigned a string that contains a number of reserved characters (<, >). Then the value of the innerHTML property is assigned to the HTML element valueescaped, which is a textarea. When the text is surrounded by an HTML comment (<!-- -->), the HTML parser doesn’t attempt to process the special characters. Now let’s discuss the use of an iframe element as a content block. For reference purposes, an iframe element is a combination of a div or span element and the XMLHttpRequest object. An iframe element is like an HTML frame, except the frame can float on the HTML page. For example, when writing the tests for the pages of this article, the test page would contain an iframe that references the page to be tested. With iframe, you’re delegating the responsibility of retrieving and displaying the content to the frame. In turn, this gives you less control over how the content is retrieved and displayed. For example, the navigation contains a list of emails that you can reference and display in the other window. Let’s look at a simple example of using the iframe element: <iframe width="200" height="200" src="/ajax articles/dhtml/otherdisplay.html"></iframe> In the example, the iframe element is declared with an initial height and width, and it is set to download the content at the URL defined by the src attribute. The URL of the iframe can be anything, as the iframe will download what is requested. If the URL falls under the same origin policy as the parent HTML page, then a script can reference the DOM within the iframe, but if the URL does not fall under same origin policy, then the content will be downloaded by the DOM and cannot be referenced by the script. If the script attempts to reference the content, an access-denied exception will occur. When rendering, an iframe generates a depth-like frame, but otherwise it behaves like a div or span element and allows users to interact with it as such. The iframe obeys the same rules as the span and div element when hiding or aligning the elements. You can assign or retrieve the data in the iframe window by using a contentWindow or contentDocument property. The following example illustrates copying the contents from an iframe to a div element:
<script language="JavaScript" type="text/javascript">
function GetSrc() {
document.getElementById( "gensrc").innerHTML =
document.getElementById( "newassign").contentDocument.body.innerHTML;
}
</script>
<p>
<iframe id="newassign" width="200" height="200"
src="/ajax articles/dhtml/percentagelayout.html"></iframe>
</p>
<div id="gensrc"></div>
Keep the following points in mind when creating and managing content chunks: • There are three types of content blocks: span, div, and iframe. • When using a div element as a content block, you’re responsible for assigning or retrieving the content. • When using an iframe element as a content block, the iframe is responsible for retrieving and rendering the content. • A div element is part of the HTML page. This means that when multiple div elements have the same identifier, getElementById retrieves the first instance. Think of a div element as a shared library that is loaded into the process space of the application. • When used as a content block, an iframe element is separate from the parent HTML page. An iframe element can have identical identifiers that don’t conflict with the parent. Think of an iframe element as another process that can communicate to the parent process. • When choosing to use either an iframe or div content block, remember they require two different strategies. An iframe uses a delegation model, where the iframe is given a task in the form of a URL. Based on the URL, the iframe and content decide what and how to display the content. A div element doesn’t use any delegation, and you’re in control of all aspects related to content display and manipulation. |
legal disclaimer
Our website is not responsible for the information contained by this article. Web-articles is a free articles resource.
Suggestion: If you need fresh, daily updated content for your website, feel free to use our service. Click here for more information.
related articles
Coding the Contract Using Test-Driven Development Techniques Coding the contract using agile and test-driven development techniques requires writing a number of tests and implementing aMock URL layer. Problem You want to code the contract using these development techniques. Solution To demonstrate, let’s define a use case, implement the use case as a contract, write a test case(s) to implement the contract, implement the contract in the Mock URL, and finally...
Problem You want to effectively test your application’s client-side logic. Theory Testing GUI code tends not to be a productive task because of the complications that arise. The main complication is how to test the correctness of a user interface. Imagine a situation where clicking a button causes a table to be filled with data. Now imagine that when a check box is checked and the button is clicked again, a different table is filled with content. The fact that clicking the same button results in two ...
3. Understanding JavaScript and Types
Understanding JavaScript and Types Problem You want to work around the fact that JavaScript does not have types declared for its variables. Theory JavaScript code does not have any variables with a declared type. The lack of typed variables is apparent when you declare functions. That said, not having typed variable declarations does not mean JavaScript has no types or no type safety. Let’s start out with the simple declaration of a function, as illustrated by the following ex...
4. Coding Using Conventions and Not Configurations
Coding Using Conventions and Not Configurations Problem You want to make your JavaScript constructs more efficient by applying the Rails “convention over configuration” principle to them. Theory You may already be familiar with the programming platform Ruby on Rails, which is used to build Web applications. The focus of this recipe is not Ruby on Rails, but one aspect of Ruby on Rails namely, convention over configuration (see http://en.wikipedia.org/wiki/ Ruby_on_Rails for m...
5. Advantage of parameterless functions in JavaScript
Using Parameterless Functions Problem You want to take advantage of parameterless functions in JavaScript. Theory JavaScript functions for the most part have parameters. You may think that the previous sentence states the obvious after all, without parameters, what data could be passed to a function? JavaScript has the ability to declare functions that have no parameters, even though the caller of the function has passed parameters to the function. For example, let’s look at...
6. JavaScripot Functions
Treating Functions Like Objects Problem You want to take advantage of the fact that functions are objects (remember, everything is an object in JavaScript). Theory Many people think that a function is some keyword used in JavaScript. A function is also an object that can be manipulated. Knowing that a function is an object makes it very interesting from the perspective of writing JavaScript code, because the code can treat the function like another other object. This mean...
7. Implementing an Error and Exception Handling Strategy
Implementing an Error and Exception Handling Strategy Problem You want to implement a clean error and exception handling strategy in your applications, to make them run more smoothly. Theory Of course, you might argue that one error is a dialog box and the other is generated in the JavaScript console. The fact that one browser uses a dialog box to show an error and the other does not is a browser issue, not an error issue. A concise way of classifying the two errors is to ...
8. Understanding the Behavior of Variables When Implementing Recursion
Understanding the Behavior of Variables When Implementing Recursion Problem You want to implement recursion in JavaScript, and you also want to understand how variables will behave under those circumstances. Theory In JavaScript, you do not need to declare the variable type, or even declare the variable. For example, the following code works perfectly: if( counter == 1) { buffer = "counter is 1"; } document.getEle...
9. Using Functions to Initialize and Make Decisions JavaScript
Using Functions to Initialize and Make Decisions Problem You want to use functions to initialize and make decisions. Theory Usually when you write a piece of code where a change of logic needs to take place based on a context, you use a decision structure. For example, say you are implementing a light switch using a program. You turn on the light if the light is off, and you turn off the light if the light is on. The behavior of the program is determined by the conditions. One example behavior t...