Page 1 of 1

Thumbnail viewer popup box & Record Light

Posted: Mon 12 Sep 2011 1:34 am
by 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.

Re: Thumbnail viewer popup box & Record Light

Posted: Mon 12 Sep 2011 4:58 am
by beteljuice
pacificblue03 wrote: > 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.

Re: Thumbnail viewer popup box & Record Light

Posted: Mon 12 Sep 2011 7:41 am
by pacificblue03
does it matter where i apply that code? what is it for?

Re: Thumbnail viewer popup box & Record Light

Posted: Mon 12 Sep 2011 11:29 am
by 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.

Re: Thumbnail viewer popup box & Record Light

Posted: Mon 12 Sep 2011 2:09 pm
by 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"
},

Re: Thumbnail viewer popup box & Record Light

Posted: Mon 12 Sep 2011 2:20 pm
by beteljuice
pacificblue03 wrote: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 :roll:

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"
},

Re: Thumbnail viewer popup box & Record Light

Posted: Mon 12 Sep 2011 2:22 pm
by pacificblue03
OHHHHHHHHHH i see

:clap: :clap: :clap:

Re: Thumbnail viewer popup box & Record Light

Posted: Mon 12 Sep 2011 2:25 pm
by pacificblue03
i still want that additional row for a <# tag to go on

im going to sleep now , goodnight

Antonio.

Re: Thumbnail viewer popup box & Record Light

Posted: Sun 16 Oct 2011 12:38 pm
by 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.