...

View Full Version : dynamic js content loader showing a 2px border when it shouldn't



canadianjameson
07-11-2007, 12:10 AM
Hi,

I'm using this (http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm) script to dynamically load .htm files into a central div called 'contentarea'. I gave contentarea a css border (border: 1px solid black; ) and for some reason the script shows the top and bottom sections of this border even before a link have been clicked. see www.enviromark.ca/head/indexTest.htm --> then click on the first vertical image (the 'i') to see what i mean

How can the script be modified to not show these borders until a link is clicked?


/***********************************************
* Dynamic Ajax Content- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

rwedge
07-11-2007, 01:06 AM
Your CSS is doing just what it should. You do not see the 'side' borders because the division is collapsed, empty.

Since you are using innerHTML to add the response to the division, why not add the border style or visibility at the same.

canadianjameson
07-11-2007, 04:57 AM
can you show me how to do that?

rwedge
07-11-2007, 02:55 PM
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
document.getElementById(containerid).style.border = '2px solid #000000';
}

canadianjameson
07-11-2007, 04:07 PM
perfect, thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum