Website Help

Question

jonathan.jbkt 0 Unverified User

17 Years Ago

I have a site that I am working on for a friend. The test site is located at:

http://linux1.jbknowledge.com/AJW/AJW%20Photo/

In the image galleries when you click on the large image it greys out the background but it does not fill the screen. I know it is probably just something simple but I just can't seem to see it. Any help would be greatly appreciated.

Here is the site code for
http://linux1.jbknowledge.com/AJW/AJW%20Photo/Wedding/beth_don.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/test.dwt" codeOutsideHTMLIsLocked="false" -->
<head>

<script language="JavaScript" type="text/javascript">
<!-- Begin
var message="You may not right mouse click this page.";
if (navigator.appName == 'Microsoft Internet Explorer'){
function NOclickIE(e) {
if (event.button == 2 || event.button == 3) {
alert(message);
return false;
}
return true;
}
document.onmousedown=NOclickIE;
document.onmouseup=NOclickIE;
window.onmousedown=NOclickIE;
window.onmouseup=NOclickIE;
}
else {
function NOclickNN(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}}}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=NOclickNN; }
document.oncontextmenu=new Function("alert(message);return false")
}
//  End -->
</script>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>AJW Photo</title>

<style type="text/css">
<!--
#Layer1 {
    position:absolute;
    top:180px;
    width:100%;
    height:325px;
    z-index:1;
    left: 0%;
    font-family: "High Tower Text";
    overflow: auto;
}


.photoSpace
{
    width:15px;
}
.photoDivisor
{
    height:15px;
}
.photoBorder
{
    border:solid 1px #816b44;
    height:99px;
    width:132px;
}


/******************** View Images ******************************************/
#divShowImageLarge
{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index:100;
    width: 100%;
    height: 100%;
    background-color: #000;
    margin:0;
    padding:0;
/**/filter:alpha(opacity=0);
    -moz-opacity: 0.0;
    opacity: 0.0;
}
#divPreload
{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index:100;
    margin:0;
    padding:0;
    /*filter:alpha(opacity=0);
    -moz-opacity: 0.0;
    opacity: 0.0;*/
}
#divImageLarge
{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index:100;
/*    background-color: #fbf2e1;*/
    margin:0;
    padding:0;
    border: solid 2px #fbf2e1
    /*filter:alpha(opacity=0);
    -moz-opacity: 0.0;
    opacity: 0.0;*/
}
#tblViewImage
{
    /*background-color: #fbf2e1;*/
    border:0px;
}
#imgLarge
{
    border: 0px;
    cursor: pointer;
}
#divImageLargeBorder
{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index:100;
    /*background-color: #000;*/
    margin:0;
    padding:0;
    border: solid 0px white;
    /*filter:alpha(opacity=0);
    -moz-opacity: 0.0;
    opacity: 0.0;*/
    cursor: pointer;
}

/******************************* End View Images *******************************************************/

-->
.style1 {color: #FFFFFF}
-->
</style>
</head>

<body>
<div id="Layer1">
    <!-- InstanceBeginEditable name="EditRegion1" -->
  <div align="center">
    <table width="750" border="0">
      <tr>
        <td width="130"><div align="center"><a href="#" onclick="SetImg('../images/Wedding/Beth_Don/Big/01.jpg',''); return false;"><img src="../images/Wedding/Beth_Don/Thumbs/01_thumb.jpg" width="80" height="100" border="0" /></a></div></td>

        <td width="130"><div align="center"><a href="#" onclick="SetImg('../images/Wedding/Beth_Don/Big/02.jpg',''); return false;"><img src="../images/Wedding/Beth_Don/Thumbs/02_thumb.jpg" width="80" height="100" border="0" /></a></div></td>

        <td width="130"><div align="center"><a href="#" onclick="SetImg('../images/Wedding/Beth_Don/Big/03.jpg',''); return false;"><img src="../images/Wedding/Beth_Don/Thumbs/03_thumb.jpg" width="80" height="100" border="0" /></a></div></td>

        <td width="130"><div align="center"><a href="#" onclick="SetImg('../images/Wedding/Beth_Don/Big/04.jpg',''); return false;"><img src="../images/Wedding/Beth_Don/Thumbs/04_thumb.jpg" width="80" height="100" border="0" /></a></div></td>

        <td width="130"><div align="center"><a href="#" onclick="SetImg('../images/Wedding/Beth_Don/Big/05.jpg',''); return false;"><img src="../images/Wedding/Beth_Don/Thumbs/05_thumb.jpg" width="80" height="100" border="0" /></a></div></td>
      </tr>
      <tr>
        <td width="130"><div align="center"><a href="#" onclick="SetImg('../images/Wedding/Beth_Don/Big/06.jpg',''); return false;"><img src="../images/Wedding/Beth_Don/Thumbs/06_thumb.jpg" width="80" height="100" border="0" /></a></div></td>

        <td width="130"><div align="center"><a href="#" onclick="SetImg('../images/Wedding/Beth_Don/Big/07.jpg',''); return false;"><img src="../images/Wedding/Beth_Don/Thumbs/07_thumb.jpg" width="80" height="100" border="0" /></a></div></td>

        <td width="130"><div align="center"><a href="#" onclick="SetImg('../images/Wedding/Beth_Don/Big/08.jpg',''); return false;"><img src="../images/Wedding/Beth_Don/Thumbs/08_thumb.jpg" width="80" height="100" border="0" /></a></div></td>

        <td width="130"><div align="center"><a href="#" onclick="SetImg('../images/Wedding/Beth_Don/Big/09.jpg',''); return false;"><img src="../images/Wedding/Beth_Don/Thumbs/09_thumb.jpg" width="80" height="100" border="0" /></a></div></td>

        <td width="130"><div align="center"><a href="#" onclick="SetImg('../images/Wedding/Beth_Don/Big/10.jpg',''); return false;"><img src="../images/Wedding/Beth_Don/Thumbs/10_thumb.jpg" width="80" height="100" border="0" /></a></div></td>
      </tr>
      <tr>
        <td width="130"><div align="center"><a href="#" onclick="SetImg('../images/Wedding/Beth_Don/Big/11.jpg',''); return false;"><img src="../images/Wedding/Beth_Don/Thumbs/11_thumb.jpg" width="80" height="100" border="0" /></a></div></td>

        <td width="130"><div align="center"><a href="#" onclick="SetImg('../images/Wedding/Beth_Don/Big/12.jpg',''); return false;"><img src="../images/Wedding/Beth_Don/Thumbs/12_thumb.jpg" width="80" height="100" border="0" /></a></div></td>

        <td width="130"><div align="center"><a href="#" onclick="SetImg('../images/Wedding/Beth_Don/Big/13.jpg',''); return false;"><img src="../images/Wedding/Beth_Don/Thumbs/13_thumb.jpg" width="80" height="100" border="0" /></a></div></td>

        <td width="130"><div align="center"><a href="#" onclick="SetImg('../images/Wedding/Beth_Don/Big/14.jpg',''); return false;"><img src="../images/Wedding/Beth_Don/Thumbs/14_thumb.jpg" width="80" height="100" border="0" /></a></div></td>

        <td width="130"><div align="center"><a href="#" onclick="SetImg('../images/Wedding/Beth_Don/Big/15.jpg',''); return false;"><img src="../images/Wedding/Beth_Don/Thumbs/15_thumb.jpg" width="80" height="100" border="0" /></a></div></td>
      </tr>
    </table>
  </div>
<!-- InstanceEndEditable -->
</div>

<div align="center"><img src="../images/background_2.jpg" width="800" height="534" border="0" usemap="#Map" />
    <map name="Map" id="Map"><area shape="rect" coords="103,134,158,159" href="../index.html" />
        <area shape="rect" coords="177,131,260,159" href="../wedd.html" />
        <area shape="rect" coords="273,133,338,159" href="../bridals.html" />
        <area shape="rect" coords="353,135,446,158" href="../engagement.html" />
        <area shape="rect" coords="466,135,528,157" href="../seniors.html" />
        <area shape="rect" coords="546,135,604,160" href="../family.html" />
        <area shape="rect" coords="621,135,698,159" href="../about_us.html" />
    </map>
</div>

</body>

<div id="divShowImageLarge" style="display:none;"></div>
<div id="divPreload" style="display:none;">
<img id="Img1" src="../images/indicator.gif" onClick="fnClickImg();">
</div>                                                    
<div id="divImageLarge" style="display:none;">
    <table cellpadding=0 cellspacing=0 border=0 id="tblViewImage">
    <tr>
        <td>
    <img id="imgLarge" src="../images/indicator.gif" onClick="fnClickImg();" alt="Close"></td></tr>
    <tr>
        <td>
            <div align="center" class="style1" id="divImageTitle">Click the Image to Return</div>
        </td>
    </tr>
    </table>
</div>
<div id="divImageLargeBorder" style="display:none;" onClick="fnClickImg();">
</div>
<script type="text/javascript" src="../include/ViewImages.js"></script>


<!-- InstanceEnd --></html>

Here is the code for the include "ViewImages.js":

var iMarginVertical = 0;
var iMarginHorizontal = 0;
var xLeftMove = 0;
var yTopMove = 0;

function SetImg( sImg, sText )
{
        //HideShowElements("OBJECT","hidden");
    if ( sText == null ) sText = "";
        document.getElementById( "divPreload" ).style.display="block";
    document.getElementById( "divShowImageLarge" ).style.display="block";

        posToCenter( document.getElementById( "divPreload" ) );
        maintPos();

        setOpacity( "divShowImageLarge", 0 );
        var ibox_op_level = 7;
        setIboxOpacity = setOpacity;
        for (var i=0;i<=ibox_op_level;i++) {setTimeout("setIboxOpacity('divShowImageLarge',"+i+")",70*i);}
    var img = new Image();
    img.onload = fnLoadImg;    
    img.onclick = fnClickImg;
    img.src = sImg;

    function fnLoadImg()
    {
        document.getElementById( "divImageLarge" ).style.width = img.width;
        document.getElementById( "divImageLarge" ).style.height = img.height;

        setOpacity( "divImageLarge", 10 );
        setOpacity( "divImageLargeBorder", 0 );
        document.getElementById( "divImageLarge" ).style.display="block";
        document.getElementById( "imgLarge" ).src = img.src;
        if ( sText != "" )
            document.getElementById( "divImageTitle" ).innerHTML = sText;
        /* resize img */
        /*var pageSize = new getPageSize();
        alert( img.width );
        if ( img.width >= pageSize.width )
            resizeImageToScreen( document.getElementById( "imgLarge" ) );
        else
        {
            document.getElementById( "divImageLarge" ).style.width = img.width;
            document.getElementById( "divImageLarge" ).style.height = img.height;
        }*/
        posToCenter( document.getElementById( "divImageLarge" ), xLeftMove, yTopMove );
        //alert(document.getElementById( "divImageLarge" ).offsetWidth );
        ///alert( img.width );
        var iMV = iMarginVertical * 2;
        var iMH = iMarginHorizontal * 2;
        document.getElementById( "divImageLargeBorder" ).style.width = img.width-iMV//document.getElementById( "divImageLarge" ).style.offsetWidth;
        document.getElementById( "divImageLargeBorder" ).style.height = img.height-iMV//document.getElementById( "divImageLarge" ).style.offsetHeight;
        document.getElementById( "divImageLargeBorder" ).style.display="block";
        posToCenter( document.getElementById( "divImageLargeBorder" ), xLeftMove, yTopMove );
        setOpacity( "divImageLarge", 0 );
        setOpacity( "divImageLargeBorder", 0 );
        var imagebox_op_level = 10;
        for (var i=0;i<=imagebox_op_level;i++) {setTimeout("setIboxOpacity('divImageLarge',"+i+")",30*i);}
        for (var i=0;i<=imagebox_op_level;i++) {setTimeout("setIboxOpacity('divImageLargeBorder',"+i+")",30*i);}
        //setOpacity( "divImageLarge", 10 );

        document.getElementById( "divPreload" ).style.display="none";
        //document.getElementById( "divShowImageLarge" ).innerHTML="";
        posToCenter( document.getElementById( "divImageLarge" ), xLeftMove, yTopMove );
    }
}
function fnClickImg()
{
    document.getElementById( "divShowImageLarge" ).style.display="none";
    document.getElementById( "divImageLarge" ).style.display="none";
    document.getElementById( "divImageLargeBorder" ).style.display="none";
    document.getElementById( "divPreload" ).style.display="none";
    //HideShowElements("OBJECT","visible");
}

    function HideShowElements(sTagName,sStatus)
    {
        var aElm = document.getElementsByTagName(sTagName);
        var oElm = null;
        for (i=0; i<aElm.length; i++)
        {
            oElm = aElm[i];
            oElm.style.visibility = sStatus;
        }
    }






setOpacity = function (elemid,value)
{
        var e = getElem(elemid);
        e.style.opacity = value/10;
        e.style.filter = 'alpha(opacity=' + value*10 + ')';
}

resizeImageToScreen = function(objImg)
{


    var pagesize = new getPageSize();

    var x = pagesize.width - 100;
    var y = pagesize.height - 100;

    if(objImg.width > x) { 
        objImg.height = objImg.height * (x/objImg.width); 
        objImg.width = x; 
        if(objImg.height > y) { 
            objImg.width = objImg.width * (y/objImg.height); 
            objImg.height = y; 
        }
    } 

    else if(objImg.height > y) { 
        objImg.width = objImg.width * (y/objImg.height); 
        objImg.height = y; 
        if(objImg.width > x) { 
            objImg.height = objImg.height * (x/objImg.width); 
            objImg.width = x;
        }
    }

    return objImg;
}






posToCenter = function(elem, xx, yy )
{
    if ( xx == null ) xx = 0;
    if ( yy == null ) yy = 0;
    var scrollPos = new getScrollPos();
    var pageSize = new getPageSize();
    var emSize = new getElementSize(elem);
    var x = Math.round(pageSize.width/2) - (emSize.width /2) + scrollPos.scrollX;
    var y = Math.round(pageSize.height/2) - (emSize.height /2) + scrollPos.scrollY;    
    //alert( x + " - " + y );
    x = x + xx;
    y = y + yy;
    //alert( x + " - " + y );
    elem.style.left = x+'px';
    elem.style.top = y+'px';
}

getScrollPos = function()
{
    var docElem = document.documentElement;
    this.scrollX = self.pageXOffset || (docElem&&docElem.scrollLeft) || document.body.scrollLeft;
    this.scrollY = self.pageYOffset || (docElem&&docElem.scrollTop) || document.body.scrollTop;
}

getPageSize = function()
{
    var docElem = document.documentElement
    this.width = self.innerWidth || (docElem&&docElem.clientWidth) || document.body.clientWidth;
    this.height = GetPageHeight();//self.innerHeight || (docElem&&docElem.clientHeight) || document.body.clientHeight;
}

getElementSize = function(elem)
{
    this.width = elem.offsetWidth ||  elem.style.pixelWidth;
    this.height = elem.offsetHeight || elem.style.pixelHeight;
}

getElem = function(elemId)
{
    return document.getElementById(elemId);    
}

maintPos = function() {
    var ibox = getElem('divImageLarge');
    var iboxBorder = getElem('divImageLargeBorder');
    var box_w = getElem('divShowImageLarge');
    var pagesize = new getPageSize();
    var ua = navigator.userAgent;
    //alert( box_w.style.width + " - " + pagesize.width );
    if(ua.indexOf("MSIE ") != -1) {box_w.style.width = pagesize.width+'px';} 
    else {box_w.style.width = pagesize.width-16+'px';}

    //alert( box_w.style.height + " - " + document.body.scrollHeight );
    if(ua.indexOf("Opera/9") != -1) {box_w.style.height = document.body.scrollHeight+'px';}
    else {box_w.style.height = document.body.scrollHeight+0+'px';}
    posToCenter( ibox, xLeftMove, yTopMove );
    posToCenter( iboxBorder, xLeftMove, yTopMove );

}
function GetPageHeight()
{
    if (self.innerHeight) // all except Explorer
        screenY = self.innerHeight;
    else if (document.documentElement && document.documentElement.clientHeight)    // Explorer 6 Strict Mode
        screenY = document.documentElement.clientHeight;
    else if (document.body) // other Explorers
        screenY = document.body.clientHeight;
    //document.getElementById( "contentall" ).style.height = screenY - 100;
    return screenY;
}

window.onscroll = maintPos;
window.onresize = maintPos;

javascript

Edited 11 Years Ago by TrustyTony because: fixed formatting

2 Contributors
7 Replies
132 Views
1 Day Discussion Span
Latest Post 17 Years Ago Latest Post by jonathan.jbkt

MattEvans 473 Veteran Poster

17 Years Ago

The entirely grey background works how you want in opera (although the images appear too high on the page to be seen properly). The background is short in Firefox 2, but the image appears in the center of the page and is visible.

I've noticed this happen often (always) in Firefox when you use XHTML and 100% height (and/or background properties). This is not the correct behaviour. In these contexts, 100% should be the height of the navigator window or the contents of the body, whichever is largest.

There's not much you can do about it, except set an absolute height for the body; which is a pain because how big is a window?, or remove the XHTML doctype and let browsers assume their quirks modes

MattEvans 473 Veteran Poster

17 Years Ago

How would you change the document type this late in the game.

Probably; delete it from the top of the page and see what happens :mrgreen:

Personally, I'd try and work around it rather than remove it. If you set the body height to something like 1400 pixels using CSS; then 100%/backgrounds will work; but you'll have a long scrollbar on your pages.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jonathan.jbkt 0 Unverified User · Answer 1 · 2007-01-31T08:53:19+00:00

remove the XHTML doctype and let browsers assume their quirks modes

How would you change the document type this late in the game.

jonathan.jbkt 0 Unverified User · Answer 2 · 2007-01-31T09:09:19+00:00

I changed the document type and it is working correctly. Thanks so much for the tip.

MattEvans 473 Veteran Poster Team Colleague Featured Poster · Answer 3 · 2007-01-31T09:11:45+00:00

Eek. Be careful that you check that the page still looks ok on all of your target browsers.

Try and look for a document type that doesn't cause ill effects but is still standardised, perhaps one of the latest HTML (4.0) ones.

jonathan.jbkt 0 Unverified User · Answer 4 · 2007-01-31T22:53:32+00:00

Eek. Be careful that you check that the page still looks ok on all of your target browsers.
Try and look for a document type that doesn't cause ill effects but is still standardised, perhaps one of the latest HTML (4.0) ones.

I changed it to:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Check it out now. I think it looks pretty good.

http://linux1.jbknowledge.com/AJW/AJW%20Photo/

- Jonathan

jonathan.jbkt 0 Unverified User · Answer 5 · 2007-02-01T09:35:13+00:00

I am trying to add links on the bottom of the large image to go to the next image in the large format. Any ideas?