...

View Full Version : Horizontal image set wrapping when browser is not maximized



canadianjameson
07-10-2007, 10:52 PM
Hi,

I can't quite figure out why, but the horizontal image set I have contained in the div 'logoC' wraps onto a second line if the user's browser isn't maximized (or big enough), and even after the user maximizes the window the images stay stuck where they were: you can see it here www.enviromark.ca/head/ (open it in a shrunken browser window)

Does anybody know why this is occurring? I would like it so that regardless of window size they display horizontally in one line



/* CSS Document */
* {
padding: 0;
margin: 0;
outline: 0;
}
* html #pageContainer {
height:100%;
}
* img {
border: 0
}
#pageContainer {
min-height: 100%;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
#topText {
position: relative;
margin-top:75px;
margin-left: 75px;
}
#logoC {
margin-left: 175px
}
#bottomText {
margin-left: 75px;
margin-top: 67px
}
#links_BW {
float: left;
position: absolute;
display: block;
margin-left: 75px;
margin-top: 25px;
width: 70px;
}
#topBorder {
position: relative;
display: block;
margin-top:75px;
margin-left: 75px;
}
#contentarea {
position: relative;
margin-left: 155px;
margin-top: 27px;
margin-right: 150px;
}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing</title>


<link rel="stylesheet" href="css/main.css" type="text/css">
<script language="JavaScript" type="text/javascript" src="js/dynamic_content.js"></script>

<script language="JavaScript" type="text/javascript">
<!--
// Common Functions
// By Vic Phillips (30-June-2007) http://www.vicsjavascripts.org.uk


// Functional Code - No Need to Change

var zxcEvt=0;

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}

function zxcStyleValue(zxcobj,zxcp){ // pass object and property, returns property value
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}

function zxcStyleRules(){
var zxcssheets=document.styleSheets;
var zxcruleary=[];
var zxcstyleary=[];
for (var zxc0=0;zxc0<zxcssheets.length;zxc0++){ zxcstyleary.push((document.all)?zxcssheets[zxc0].cssText:zxcssheets[zxc0]); }
if (document.all){
for (var zxc1=0;zxc1<zxcstyleary.length;zxc1++){
zxcstyleary[zxc1]=zxcstyleary[zxc1].split('}');
for (var zxc1a=0;zxc1a<zxcstyleary[zxc1].length-1;zxc1a++){
zxcruleary.push(zxcstyleary[zxc1][zxc1a].replace(/\s/g,'')+'}');
}
}
}
else {
for (var zxc1=0;zxc1<zxcstyleary.length;zxc1++){
for (var zxc1a=0;zxc1a<zxcstyleary[zxc1].cssRules.length;zxc1a++){
zxcruleary.push(zxcstyleary[zxc1].cssRules[zxc1a].cssText.replace(/\s/g,''));
}
}
}
return zxcruleary
}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}

function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
}

function zxcNoTxtNodes(zxcp){
var zxcclds=zxcp.childNodes,zxcary=[];
for (var zxca=0;zxca<zxcclds.length;zxca++){ if (zxcclds[zxca].nodeType!=1) zxcary.push(zxcclds[zxca]); }
for (var zxcb=0;zxcb<zxcary.length;zxcb++){ zxcp.removeChild(zxcary[zxcb]); }
return zxcclds;
}

function zxcMse(zxcevt){
if(!zxcevt) var zxcevt=window.event;
if (document.all) return [zxcevt.clientX+zxcDocS()[0],zxcevt.clientY+zxcDocS()[1]];
return [zxcevt.pageX,zxcevt.pageY];
}

function zxcDocS(){
if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.scrollLeft,document.body.scrollTop];
}

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

function zxcAddEvent(zxc,zxcfun,zxcevt){
if (zxc.addEvent){ return; }
zxc.addEvent=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'addEvent');
}

function zxcAddEvt(zxc,zxcfun,zxcevt){
zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}

function zxcRemoveEvt(zxcfun,zxcevt){
if ( zxco.removeEventListener ){ zxco.removeEventListener(zxcevt,zxcfun,false); }
else if (zxco.detachEvent){ zxco.detachEvent('on'+zxcevt,zxcfun); }
}

function zxcOpacity(zxcobj,zxcopc) {
if (zxcopc<0||zxcopc>100){ return; }
if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }
else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }
else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')'; }
else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }
}

function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=tt_eobj.parentNode;
var zxcft;
if (zxce.type=='mouseout'){ zxcft=zxcEventTo(zxce); }
else { zxcft=zxcEventFrom(zxce); }
if (zxcft.oop){ return false; }
while (zxcft.parentNode){
if (zxcft.oop){ return false; }
zxcft=zxcft.parentNode;
}
return true;
}

function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
var zxceobj=(zxce.relatedTarget)?zxce.relatedTarget:(zxce.type=='mouseout')?zxce.toElement:zxce.fromElem ent;
while (zxceobj.parentNode){
if (window['zxc'+zxceobj.id]){ return false; }
zxceobj=zxceobj.parentNode;
}
return true;
}

//-->
</script><script language="JavaScript" type="text/javascript">
<!--

function zxcResetImages(zxcid2){
var zxcp=document.getElementById(zxcid2);
zxcp.hold=null;
if (zxcp.ary){
for (var zxc0=0;zxc0<zxcp.ary.length;zxc0++){
if (zxcp.mirror[zxc0][2].oop){
if (zxcp.mirror[zxc0][2].oop.inc>0) zxcFadeDo(zxcp.mirror[zxc0][2],'mouseout');
}
if (!zxcCkOpactiy(zxcp.mirror[zxc0][2])) zxcES(zxcp.mirror[zxc0][2].childNodes[0],{zIndex:'2'});
if (zxcp.ary[zxc0][2].oop){
if (zxcp.ary[zxc0][2].oop.inc>0) zxcFadeDo(zxcp.ary[zxc0][2],'mouseout');
}
if (!zxcCkOpactiy(zxcp.ary[zxc0][2])) zxcES(zxcp.ary[zxc0][2].childNodes[0],{zIndex:'2'});
}
}
}

function zxcInitImages(zxcid1,zxcid2){
var zxcp1=document.getElementById(zxcid1);
var zxcp2=document.getElementById(zxcid2);
zxcNoTxtNodes(zxcp1);
zxcNoTxtNodes(zxcp2);
var zxcimgs1=zxcp1.getElementsByTagName('IMG');
var zxcimgs2=zxcp2.getElementsByTagName('IMG');
zxcp2.mirror=[];
zxcp2.ary=[];
for (var zxc1=0;zxc1<zxcimgs1.length;zxc1++) zxcp2.mirror[zxc1]=[zxcimgs1[zxc1],zxcimgs2[zxc1],zxcES('DIV',{position:'absolute',left:(zxcimgs1[zxc1].offsetLeft)+'px',top:zxcimgs1[zxc1].offsetTop+'px',width:zxcimgs1[zxc1].width+'px',height:zxcimgs1[zxc1].height+'px',border:'solid black 0px'},zxcp1)];
for (var zxc3=0;zxc3<zxcimgs2.length;zxc3++) zxcp2.ary[zxc3]=[zxcimgs2[zxc3],zxcimgs1[zxc3],zxcES('DIV',{position:'absolute',left:(zxcimgs2[zxc3].offsetLeft)+'px',top:zxcimgs2[zxc3].offsetTop+'px',width:zxcimgs2[zxc3].width+'px',height:zxcimgs2[zxc3].height+'px',border:'solid black 0px'},zxcp2)];
for (var zxc2=0;zxc2<zxcp2.mirror.length;zxc2++){
zxcES(zxcp2.mirror[zxc2][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.mirror[zxc2][2]);
var zxcdiv=zxcES(zxcp2.mirror[zxc2][2].cloneNode(false),{left:'0px',top:'0px'},zxcp2.mirror[zxc2][2])
zxcES(zxcp2.mirror[zxc2][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
}
for (var zxc4=0;zxc4<zxcp2.ary.length;zxc4++){
zxcES(zxcp2.ary[zxc4][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.ary[zxc4][2]);
zxcp2.ary[zxc4][2].onclick=zxcp2.ary[zxc4][0].onclick;
var zxcdiv=zxcES(zxcp2.ary[zxc4][2].cloneNode(false),{position:'absolute',zIndex:'1',left:'0px',top:'0px'},zxcp2.ary[zxc4][2])
zxcES(zxcp2.ary[zxc4][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','mouseover');
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','mouseout');
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','click');
}
zxcp2.hold=null;
zxcp2.holdmirror=null;
}


function zxcMseOverOut(zxcevt){
var zxcp=this.parentNode;
var zxcdivs=zxcp.childNodes;
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0]==this) break;
}
if (zxcevt.type=='click'){
if (zxcp.hold&&zxcp.hold!=this) zxcFadeDo(zxcp.hold,'mouseout'); // to fix * If I click a second time on an image in links_BW (double-click slowly), the image fades back from colored to gray and stays that way. Can you set the script to verify that an image in links_BW is not already "set to color" to avoid this?
zxcp.hold=this;
if (zxcp.holdmirror) zxcFadeDo(zxcp.holdmirror,'mouseout');
zxcp.holdmirror=zxcp.mirror[zxc0][2];
zxcFadeDo(zxcp.holdmirror,'mouseover');
}
else if (this!=zxcp.hold){
zxcFadeDo(this,zxcevt.type);
// zxcFadeDo(zxcp.mirror[zxc0][2],zxcevt.type); // to make horizontal fade onmouseover
}
}

function zxcFadeDo(zxcobj,zxcmde){
if (!zxcCkOpactiy(zxcobj)) zxcES(zxcobj.childNodes[0],{zIndex:(zxcevt.type=='mouseover')?'0':'2'});
if (!zxcobj.oop) zxcobj.oop=new zxcFadeOOP(zxcobj);
clearTimeout(zxcobj.oop.to);
zxcobj.oop.ud=(zxcmde=='mouseover')?2:-2; // adjust speed here
if (zxcobj.oop.ud<0&&zxcobj.oop.inc<50) zxcobj.oop.cont();
else zxcobj.oop.swap();
}

function zxcCkOpactiy(zxcobj){
if (zxcobj.style.MozOpacity!=null&&zxcobj.style.opacity!=null&&zxcobj.style.filter!=null&&zxcobj.KHTMLOpacity!=null) return false;
return true;
}

var zxcOOPCnt=0;

function zxcFadeOOP(zxcobj,zxcident){
this.to=null;
this.ref='oop'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcobj.childNodes[1];
zxcES(zxcobj.childNodes[0],{zIndex:'0'});
this.ud=0;
this.inc=0;
this.opacity(0);
}

zxcFadeOOP.prototype.swap=function(){
if ((this.ud>0&&this.inc<=100-this.ud)||(this.ud<0&&this.inc>=0-this.ud)){
this.opacity(this.inc+=this.ud);
this.setTimeOut('swap()',10);
}
}

zxcFadeOOP.prototype.cont=function(){
if ((this.ud<0&&this.inc<50)||(this.ud>0&&this.inc>0)){ // change the '50' to change the min-fade delay
this.opacity(this.inc-=this.ud);
this.setTimeOut('cont()',10);
}
else if (this.ud<0&&this.inc>0){
this.ud=-this.ud
this.setTimeOut('cont()',10);
}
}

zxcFadeOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100) return;
if (this.obj.style.MozOpacity!=null) this.obj.style.MozOpacity=(zxcopc/100)-.001;
else if (this.obj.style.opacity!=null) this.obj.style.opacity=(zxcopc/100)-.001;
else if (this.obj.style.filter!=null) this.obj.style.filter='alpha(opacity='+zxcopc+')';
else if (this.obj.KHTMLOpacity!=null) this.obj.KHTMLOpacity=(zxcopc/100)-.001;
}

zxcFadeOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}

//-->
</script>

</head>

<body onload="zxcInitImages('logoC','links_BW')">
<div id="pageContainer">
<div id="topText"><img src="images/logoButtons/top_text.gif"></div>
<div id="logoC">
<img src="images/logoButtons/info_C.gif" >
<img src="images/logoButtons/YPP_C.gif" >
<img src="images/logoButtons/social_C.gif" >
<img src="images/logoButtons/med_C.gif" >
<img src="images/logoButtons/legal_C.gif" >
<img src="images/logoButtons/J2K_C.gif" >
<img src="images/logoButtons/street_C.gif" >
</div>
<div id="bottomText"><img src="images/logoButtons/bottom_text.gif"></div>
<div id="links_BW">
<img src="images/logoButtons/info_BW.jpg" onclick="ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/pages.css')">
<img src="images/logoButtons/YPP_BW.jpg" >
<img src="images/logoButtons/social_BW.jpg" >
<img src="images/logoButtons/med_BW.jpg" >
<img src="images/logoButtons/legal_BW.jpg" >
<img src="images/logoButtons/J2K_BW.jpg" >
<img src="images/logoButtons/street_BW.jpg" >

</div>
<div class="clear"></div>
<div id="contentarea"></div>

<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:hidden;top:420px;left:0px;" >
<input size=10 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=10 cols=100 ></textarea>
</form>

</div>
</body>
</html>



Thanks :D

vwphillips
07-11-2007, 10:10 AM
During initialisation the images are in absolutely positioned DIVs.
This is carried out sequentially so if the width of the containing div width is less than the required position of the last image left+width the divs will wrap.

Try:

1) Stop using margins.

2) Specifying the required width of the parent DIV.

ahallicks
07-11-2007, 12:03 PM
I would also recommend you place all of the script into an external file so that you don't have to replicate it on all the pages you create. It's pointless unless you only use it on that page, and if you do use it site-wide then it will reduce loading times dramatically once the script has been run once.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum