We Keep Coding

Loading html into page using javascript

So I have this nice piece of javascript that will load local HTML files into my document for me on the fly, which is pretty cool.
function load_html(src) {
var html = document.createElement("object");
html.type = "text/html";
html.data = src;
document.getElementById("wrapper").appendChild(html);
}
I got the idea from the post here How do I load an HTML page in a <div> using JavaScript?.
The only problem with it is that it seems that the object tag that I create needs a default width and height, which I want it to wrap the size of it's containing elements, and the new elements that are within the object tag have their own set of css values instead of using the css value of the current page.
Does anyone know how to make the elements within my object get the css values from my current page?
Also, how can I make my object be the size of it's containing elements?
I'm sure there is an easy way to do it, but I haven't found much on object tags.

Static Data to be displayed using XML

I modify my XML now, I have a parent element <imgRes> in my XML in that I am having two different child nodes <images> and <rightContent>.
In earlier I wont have <imgRes> and <rightContent>, As i added it my code then its not adding in the div. I dont know whether my XML structure is wrong or something is missing.
So the <rightContent> having a div which is static which should be outside of the image sliding functionlity. I holds a link and a data.
I need some help where I am going wrong.
This is what I have tried.
http://jsfiddle.net/QNZDX/13/

It looks like you were never retrieving the data from the xml to set it into your new DOM elements. I updated the jsfiddle to alter the css and dom a bit so that the rightContent div wouldn't contain the link itself but the main piece you needed was this:
$("#rightContent").text( $xmldata.find('rightData').find('data').text());
$("#rightLink").prop('href',$xmldata.find('rightData').find('link').text());
prevIndex++;
The updated fiddle will show the minor changes.
If you want to update not only the URL of the link but also the link text then you can add something like this to set that value.
$("#rightLink").text($xmldata.find('rightData').find('link').text());
Note that the hardcoded values in the jsfiddle are just for demonstration. You can define whatever elements you like in the xml and then parse then into dom element values through jquery.

Dynamically injecting an <object> tag causes white flash

I'm trying to dynamically insert some HTML/JS/CSS on command. (holding
off this code for page loading speed). I found a neat way
of doing this, inserting a HTML5 tag pointing at the html-
file which in turn references the css and js, like so:
function toggleObject() {
var object = document.getElementById('myObject');
if (!object) {
var e = document.createElement('object');
e.setAttribute('data', 'testing.html');
e.setAttribute('id', 'myObject');
// inject data into DOM
document.getElementsByTagName('body')[0].appendChild(e);
} else {
document.getElementsByTagName('body')[0].removeChild(object);
}}
The only problem with this is that upon inserting the tag the object (height, width and position as defined by css) flashes white before loading which isn't very attractive.
Is there a remedy for the ugly white flash?
Note! I experimented with toggling the visibility property of the object and firing up a loader div, but I can't figure what event would be able to call off the loader and turn visibility back on when the object is fully injected in the DOM. In end I settled for just a timeout of 1 sec, which feels less than optimal..

Try setting the visibility to hidden when you create the OBJECT Element and then setting it to visible once it has been appended to its parent Node.

Cloning in-memory image in JavaScript /jQuery

This is probably a really simple one but I couldn't find the answer.
I have the following JavaScript/jQuery code where I am trying to create loading messages:
// preload an image to use for dynamic loading icon whenever requested
$(document).ready(function() {
var loadingIcon = document.createElement('img');
loadingIcon.src = '../images/ajax-loader.gif';
window.loadingIcon = loadingIcon; // chache in global var
});
I wanted to cache the image on load so I'm not requesting it each time I want a loading message. Am I actually acheiving this with the above code?
The idea is that there's a lot of dynamic content on the page, and at any time I might have several different loading icons active.
I add the loading icon wherever with:
$('#myElem').appendChild(window.loadingIcon);
This doesn't actually work though, when I try to show a new loading icon, it just moves the previous one, so I can't have more than one on the page at a time.
I'm assuming I need to clone the element?
I tried to wrap the element in a jQuery object to use clone with $(window.loadingIcon).clone() but that didn't work (the function errored).

You could clone the element, yes. But you can just as well create a new <img> element. If the image src has already been loaded by the browser, the image data will be cached and no further network-load will occur. You don't need to cache the element itself to cache the resource it's pointed at.

Try creating the image as a jQuery object:
var $loadingIcon = $('<img src="../images/ajax-loader.gif" />');
And then you should be able to clone it when you need to use it:
$('#myElem').append( $loadingIcon.clone() );

javascript has a native cloneNode method, at least in IE7, which is all I have at the moment. I'm pretty sure it's cross browser.
this should do what you want:
$('#myElem').appendChild(window.loadingIcon.cloneNode());

Appending to InnerHtml without rest of contents flicking

I have a div element with some formatted images. On user request, I load additional images asynchronously, without postback, and append the result (formatted HTML for new images) to the div element using JavaScript:
function onRequestComplete(result) {
var images = document.getElementById('images');
images.InnerHtml += result;
}
All is okay, except that part when images in the panel loaded previously flicker after the HTML is appended. As far I understand, the panel is reconstructed, not just new HTML is appended to its bottom. So it isn't web 2.0 behavior.
How can it be done without flicking? Thanks in advance.

Use the dom method of adding them:
var div = document.createElement('div');
div.innerHTML= result;
document.getElementById('images').appendChild(div);
Or if you really want to do it the right way, create an dom element for each image and then append them. This also has the benefit of preloading the images.
Or just use jQuery. ;)

Using the += operator is the same as:
images.innerHTML = images.innerHTML + result;
Which will re-render all your container, thus causing "flickering".
You should be able to have the same result appending new elements to the container, without having the flickering. For that, you will need the createElement and appendChild methods.
HTH!

When you append your content, you could tack on something like
<span class='endMarker'></span>
Then instead of just updating "innerHTML" like that, you'd look through the DOM inside the target, find the last <span> with class "endMarker", and then append new content after that. Without meaning to be a "use jQuery problem solved" person I will say that a library like that would make things a little easier. To append the content, you could drop it in a hidden div and then move it.

Make all images a single image, than use CSS positioning to show the desired section. The flickering is due to the loading of the new images.