Thumbnail viewer popup box & Record Light

[pacificblue03]

if you go here http://www.westmeadnswweather.com/index.htm and hover over 24hr graphs

you click on one of the images

> how do i add another row under the white row with the image name?
> How can i configure or create something in css so it is more simple to edit and change around?
> How can i make a New Record flashing light and link it to my records.htm page?

Antonio.

[beteljuice]

> how do i add another row under the white row with the image name?
> How can i configure or create something in css so it is more simple to edit and change around?

That is all handled by the thumbnailviewer.js you are using, not only does 'show' the picture, it creates the container and all its styles.
It's using the 'title' attribute in the link to create the image footer, you could eg.
title="The first line<br />The second line"
but that would also show in the mouseover of the link.

BTW - your navigation menu can cover the image if the page is not full screen !

In thumbnailviewer.js add the following line of code:

Code: Select all

centerDiv:function(divobj)
.......


........
divobj.style.zIndex="2000": // new line at end
}

> How can i make a New Record flashing light and link it to my records.htm page?

This has been covered elsewhere.

[pacificblue03]

does it matter where i apply that code? what is it for?

[beteljuice]

The beteljuice typed:

BTW - your navigation menu can cover the image if the page is not full screen !

The additional line of code:

Code: Select all

centerDiv:function(divobj)
.......


........
divobj.style.zIndex="2000": // new line at end
},

Is in the thumbnailviewer.js, at the end of the function:

centerDiv:function(divobj)

Immediately following the other divobj.stlye ... lines

Changing the z-index to a high number ensures that the image container 'sits' on top of everything else on the page.

[pacificblue03]

Very sorry

im still learning very very basic javascript and looking at this makes me go .... so i guess im not going to succeed in this task you have given me. hopeless i know.


centerDiv:function(divobj){ //Centers a div element on the page
var ie=document.all && !window.opera
var dom=document.getElementById
var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
var scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset
var docwidth=(ie)? this.standardbody.clientWidth : window.innerWidth-this.scrollbarwidth
var docheight=(ie)? this.standardbody.clientHeight: window.innerHeight
var docheightcomplete=(this.standardbody.offsetHeight>this.standardbody.scrollHeight)? this.standardbody.offsetHeight : this.standardbody.scrollHeight //Full scroll height of document
var objwidth=divobj.offsetWidth //width of div element
var objheight=divobj.offsetHeight //height of div element
var topposition=(docheight>objheight)? scroll_top+docheight/2-objheight/2+"px" : scroll_top+10+"px" //Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint
divobj.style.left=docwidth/2-objwidth/2+"px" //Center div element horizontally
divobj.style.top=Math.floor(parseInt(topposition))+"px"
divobj.style.visibility="visible"
},

[beteljuice]

Very sorry

im still learning very very basic javascript and looking at this makes me go .... so i guess im not going to succeed in this task you have given me. hopeless i know.

So what's to misunderstand

Revised code snippet::

Code: Select all

centerDiv:function(divobj){ //Centers a div element on the page
var ie=document.all && !window.opera
var dom=document.getElementById
var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
var scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset
var docwidth=(ie)? this.standardbody.clientWidth : window.innerWidth-this.scrollbarwidth
var docheight=(ie)? this.standardbody.clientHeight: window.innerHeight
var docheightcomplete=(this.standardbody.offsetHeight>this.standardbody.scrollHeight)? this.standardbody.offsetHeight : this.standardbody.scrollHeight //Full scroll height of document
var objwidth=divobj.offsetWidth //width of div element
var objheight=divobj.offsetHeight //height of div element
var topposition=(docheight>objheight)? scroll_top+docheight/2-objheight/2+"px" : scroll_top+10+"px" //Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint
divobj.style.left=docwidth/2-objwidth/2+"px" //Center div element horizontally
divobj.style.top=Math.floor(parseInt(topposition))+"px"
divobj.style.visibility="visible"
divobj.style.zIndex="2000"
},

[pacificblue03]

OHHHHHHHHHH i see

[pacificblue03]

i still want that additional row for a <# tag to go on

im going to sleep now , goodnight

Antonio.

[pacificblue03]

Well i added that extra line of code but i still have no second area from my <tags> to go in so i just included my tags in the title

Antonio.