Add a floating Layer??

[Marlowe]

I've been trying different ways to add content to galleries (usually "all thumbs") and came across some code for adding a floating content box:
http://www.echoecho.com/toolfloatinglayer.htm

I'm not sure how to apply this code (in two parts) to a particular gallery; do I copy all of this code into the description box inside html tags, or body and script tags, or is some or all of the code needed in my CSS for that particular gallery.

I was trying it on this old unused gallery:

http://www.cxphotos.smugmug.com/gallery/10882497_rbae5!

Any help on this would be appreciated and if it cant be done I can live with it!
Thanks,
Jon

[Marlowe]

bump?

Still stuck after trying a couple different things, my trial floating box still above the thumbs. Does anyone know if I need to put any of the javascript into the gallery description or the top or bottom javascript section in the sitewide customization section?

Jon

[robographer]

bump?

Still stuck after trying a couple different things, my trial floating box still above the thumbs. Does anyone know if I need to put any of the javascript into the gallery description or the top or bottom javascript section in the sitewide customization section?

Jon

Very interested in this...

Once you got it working, could you post the code? please?? :bow

http://robographer.smugmug.com/

[Marlowe]

OK here's the directions that I'm having trouble with specifically (read:everything)::cry


(All the code provided is javascript in "script" tags)

"First: copy this code* to the head of your page."
-I'm unsure where to place this part, although I've tried just about everywhere and I know if its in the java section of customization I remove the "script" tags etc.

"Second: copy this code* to the bottom of your page (insert it just before the final BODY tag.)"
-Same problem; do I put this in the gallery description or again in the site wide customization java section.:dunno


*For the specific code see this page:
http://www.echoecho.com/toolfloatinglayer.htm

Anyway, I think I've tried every possible combination of code insertion but the "floating layer" remains a stationary image above the thumbs where the gallery description would be. :help

[jfriend]

OK here's the directions that I'm having trouble with specifically (read:everything)::cry


(All the code provided is javascript in "script" tags)

"First: copy this code* to the head of your page."
-I'm unsure where to place this part, although I've tried just about everywhere and I know if its in the java section of customization I remove the "script" tags etc.

"Second: copy this code* to the bottom of your page (insert it just before the final BODY tag.)"
-Same problem; do I put this in the gallery description or again in the site wide customization java section.:dunno


*For the specific code see this page:
http://www.echoecho.com/toolfloatinglayer.htm

Anyway, I think I've tried every possible combination of code insertion but the "floating layer" remains a stationary image above the thumbs where the gallery description would be. :help Without seeing the code, I can't tell for sure. But, if the first block is all script and no HTML, it sounds like the first block should go in your top javascript (without script tags). And, if the second block is all script code and no HTML, it should go in your bottom javascript. If the second block has both HTML and script, then put it in your custom footer.

[Marlowe]

I didn't try it that way since it was for a specific gallery and was including the second bit in the gallery description. Is there anyway to put both codes into sitewide customization but apply it to the one gallery only:

http://www.cxphotos.smugmug.com/gallery/10882497_rbae5


This is the second block which I put in the gallery description:


if (NS4) {document.write('<LAYER NAME="floatlayer" LEFT="'+floatX+'" TOP="'+floatY+'">');}
if ((IE4) || (NS6)) {document.write('<div id="floatlayer" style="position:absolute; left:'+floatX+'; top:'+floatY+';">');}
</********

<a href="/gallery/5836693_iCdHR"target="_blank">
<img src="http://www.cxphotos.smugmug.com/photos/353753050_Rt9Le-Th-1.jpg"width="110" height="110"border="0"></a>

********>
if (NS4)
{
document.write('</LAYER>');
}
if ((IE4) || (NS6))
{
document.write('</DIV>');
}
ifloatX=floatX;
ifloatY=floatY;
define();
window.onresize=define;
lastX=-1;
lastY=-1;
adjust();


Thanks,
Jon

[jfriend]

I didn't try it that way since it was for a specific gallery and was including the second bit in the gallery description. Is there anyway to put both codes into sitewide customization but apply it to the one gallery only:

http://www.cxphotos.smugmug.com/gallery/4186426_Ag9JB


This is the second block which I put in the gallery description:


if (NS4) {document.write('<LAYER NAME="floatlayer" LEFT="'+floatX+'" TOP="'+floatY+'">');}
if ((IE4) || (NS6)) {document.write('<div id="floatlayer" style="position:absolute; left:'+floatX+'; top:'+floatY+';">');}
</********

<a href="/gallery/5836693_iCdHR"target="_blank">
<img src="http://www.cxphotos.smugmug.com/photos/353753050_Rt9Le-Th-1.jpg"width="110" height="110"border="0"></a>

********>
if (NS4)
{
document.write('</LAYER>');
}
if ((IE4) || (NS6))
{
document.write('</DIV>');
}
ifloatX=floatX;
ifloatY=floatY;
define();
window.onresize=define;
lastX=-1;
lastY=-1;
adjust();


Thanks,
Jon You can try putting the second block (with script tags) in the gallery description to make it active only in one gallery. Just put <html> before it and </html> after it.

[Marlowe]

Yep I tried that, that's what is in the gallery description now. The rest was in bottom java to no effect.

[Marlowe]

Here's the first block of code, meant to be copied to the head part of the page:

******** LANGUAGE="JavaScript">
<!--
floatX=10;
floatY=10;
layerwidth=100;
layerheight=130;
halign="center";
valign="center";
delayspeed=3;

// This script is copyright (c) Henrik Petersen, NetKontoret
// Feel free to use this script on your own pages as long as you do not change it.
// It is illegal to distribute the script as part of a tutorial / script archive.
// Updated version available at: http://www.echoecho.com/toolfloatinglayer.htm
// This comment and the 4 lines above may not be removed from the code.

NS6=false;
IE4=(document.all);
if (!IE4) {NS6=(document.getElementById);}
NS4=(document.layers);

function adjust() {
if ((NS4) || (NS6)) {
if (lastX==-1 || delayspeed==0)
{
lastX=window.pageXOffset + floatX;
lastY=window.pageYOffset + floatY;
}
else
{
var dx=Math.abs(window.pageXOffset+floatX-lastX);
var dy=Math.abs(window.pageYOffset+floatY-lastY);
var d=Math.sqrt(dx*dx+dy*dy);
var c=Math.round(d/10);
if (window.pageXOffset+floatX>lastX) {lastX=lastX+delayspeed+c;}
if (window.pageXOffset+floatX<lastX) {lastX=lastX-delayspeed-c;}
if (window.pageYOffset+floatY>lastY) {lastY=lastY+delayspeed+c;}
if (window.pageYOffset+floatY<lastY) {lastY=lastY-delayspeed-c;}
}
if (NS4){
document.layers['floatlayer'].pageX = lastX;
document.layers['floatlayer'].pageY = lastY;
}
if (NS6){
document.getElementById('floatlayer').style.left=l astX;
document.getElementById('floatlayer').style.top=la stY;
}
}
else if (IE4){
if (lastX==-1 || delayspeed==0)
{
lastX=document.body.scrollLeft + floatX;
lastY=document.body.scrollTop + floatY;
}
else
{
var dx=Math.abs(document.body.scrollLeft+floatX-lastX);
var dy=Math.abs(document.body.scrollTop+floatY-lastY);
var d=Math.sqrt(dx*dx+dy*dy);
var c=Math.round(d/10);
if (document.body.scrollLeft+floatX>lastX) {lastX=lastX+delayspeed+c;}
if (document.body.scrollLeft+floatX<lastX) {lastX=lastX-delayspeed-c;}
if (document.body.scrollTop+floatY>lastY) {lastY=lastY+delayspeed+c;}
if (document.body.scrollTop+floatY<lastY) {lastY=lastY-delayspeed-c;}
}
document.all['floatlayer'].style.posLeft = lastX;
document.all['floatlayer'].style.posTop = lastY;
}
setTimeout('adjust()',50);
}

function define()
{
if ((NS4) || (NS6))
{
if (halign=="left") {floatX=ifloatX};
if (halign=="right") {floatX=window.innerWidth-ifloatX-layerwidth-20};
if (halign=="center") {floatX=Math.round((window.innerWidth-20)/2)-Math.round(layerwidth/2)};
if (valign=="top") {floatY=ifloatY};
if (valign=="bottom") {floatY=window.innerHeight-ifloatY-layerheight};
if (valign=="center") {floatY=Math.round((window.innerHeight-20)/2)-Math.round(layerheight/2)};
}
if (IE4)
{
if (halign=="left") {floatX=ifloatX};
if (halign=="right") {floatX=document.body.offsetWidth-ifloatX-layerwidth-20}
if (halign=="center") {floatX=Math.round((document.body.offsetWidth-20)/2)-Math.round(layerwidth/2)}
if (valign=="top") {floatY=ifloatY};
if (valign=="bottom") {floatY=document.body.offsetHeight-ifloatY-layerheight}
if (valign=="center") {floatY=Math.round((document.body.offsetHeight-20)/2)-Math.round(layerheight/2)}
}
}
//-->
</********

[jfriend]

Yep I tried that, that's what is in the gallery description now. The rest was in bottom java to no effect. Please read what I wrote. The first block goes in the top javascript (with no script tags). It has to appear in the page before the second block.

[Marlowe]

Oops, sorry didn't catch that! I'll try.
Thanks,
Jon

[Marlowe]

I tried that and something has happened in the gallery itself- the thumbnails are a single column down the page, but the box is still at the top:

http://www.cxphotos.smugmug.com/gallery/10882497_rbae5


Is this: "<!--" and "//-->" meant to be in the javascript at the beginning and end of the block?

Jon

[jfriend]

I tried that and something has happened in the gallery itself- the thumbnails are a single column down the page, but the box is still at the top:

http://www.cxphotos.smugmug.com/gallery/4186426_Ag9JB


Is this: "<!--" and "//-->" meant to be in the javascript at the beginning and end of the block?

Jon Remove this from the script:

"<!-- "

// is a javascript comment so it's fine

[Marlowe]

Thanks John,

Same thing happening.:dunno I placed the script in the Top Javascript, and the rest in the gallery description:

<html>
********>
if (NS4) {document.write('<LAYER NAME="floatlayer" LEFT="'+floatX+'" TOP="'+floatY+'">');}
if ((IE4) || (NS6)) {document.write('<div id="floatlayer" style="position:absolute; left:'+floatX+'; top:'+floatY+';">');}
</********

<a href="/gallery/5836693_iCdHR"target="_blank">
<img src="http://www.cxphotos.smugmug.com/photos/353753050_Rt9Le-Th-1.jpg"width="110 (http://www.cxphotos.smugmug.com/photos/353753050_Rt9Le-Th-1.jpg)" height="110"border="0"></a>

********>
if (NS4)
{
document.write('</LAYER>');
}
if ((IE4) || (NS6))
{
document.write('</DIV>');
}
ifloatX=floatX;
ifloatY=floatY;
define();
window.onresize=define;
lastX=-1;
lastY=-1;
adjust();
</********
</html>

[Marlowe]

:scratch I just can't seem to get this code to work on a gallery page, or any other version of a floating layer or floating menus found..I've tried both javascript & css versions, and most display the box only in the description area above the thumbs. One actually displayed fixed in the top left but wouldn't move when scrolling.

Is it possible instead to position an element absolutely on a page so it will remain stationary as you scroll ? I'm looking to position a menu on the right or left of the following example of one of my galleries, since there are many thumbs & involves a scroll bar:

http://www.cxphotos.smugmug.com/gallery/10882497_rbae5


Jon

[jfriend]

:scratch I just can't seem to get this code to work on a gallery page, or any other version of a floating layer or floating menus found..I've tried both javascript & css versions, and most display the box only in the description area above the thumbs. One actually displayed fixed in the top left but wouldn't move when scrolling.

Is it possible instead to position an element absolutely on a page so it will remain stationary as you scroll ? I'm looking to position a menu on the right or left of the following example of one of my galleries, since there are many thumbs & involves a scroll bar:

http://www.cxphotos.smugmug.com/gallery/7748981_fkLWg


JonJust google "CSS absolute positioning" and you will find tons of examples for how to use absolute positioning.

[Marlowe]

Thanks John,
Already looked into it, so far I have this in one gallerry:
http://www.cxphotos.smugmug.com/gallery/4186426_Ag9JB

Easy to move around and keep on top of the thumbs or the images once opened. Would it be difficult to make this stay stationary as the page is scrolled or would that involve java?

Anyway all I added was this to the gallery description, I'll add what i need later:

<html>
<div style="z-index: 2;position: absolute; color: white; position: absolute; left: 60px; top: 200px; width: 100px; height: 300px; padding: 5px; padding-right: 20px;">This will be the navigation 'column', which will run down the left of the page.</div>
</html>

[jfriend]

Thanks John,
Already looked into it, so far I have this in one gallerry:
http://www.cxphotos.smugmug.com/gallery/4186426_Ag9JB

Easy to move around and keep on top of the thumbs or the images once opened. Would it be difficult to make this stay stationary as the page is scrolled or would that involve java?

Anyway all I added was this to the gallery description, I'll add what i need later:

<html>
<div style="z-index: 2;position: absolute; color: white; position: absolute; left: 60px; top: 200px; width: 100px; height: 300px; padding: 5px; padding-right: 20px;">This will be the navigation 'column', which will run down the left of the page.</div>
</html> See here (http://www.w3schools.com/Css/pr_class_position.asp).

[Marlowe]

Thanks for all the help John, definitely usefull things to learn and now using in another gallery. I still go back to the one "floating layer" code that almost worked, in trying to find something to keep a box positioned on a page while scrolling. I've tried about a dozen different codes and this is the closest I came to what I wanted (updated gallery here):

http://www.cxphotos.smugmug.com/gallery/10882497_rbae5

-What I've done with this code from Yaldex.com for a persistent layer is placing the dog image DIV within my gallery description and the java in the bottom javascript in my site-wide customizationtion box. (it would not work at all placing in the top javascript)

-It seems that it begins to work by positiong the dog image down from the top, although I can only adjust the vertical position not horizontal for some reason. After the initial positioning it won't work when scrolling at all.
Most of the codes I have come across state that the javascript must be placed in the BODY section of your page in which you want the effect. Does this not work in our sitewide customization where we do have box for the body tag (although room for only one line), or must this javascript go in the top or bottom javascript sections in site-wide?

Anyway sorry to drag this one out I just hate to give up on anything, but do you know if this is something that will not work within the structure of Smugmug galleries?
Thanks,
Jon

code here:
http://www.yaldex.com/FSBackground/PersistentLayer.htm


:deadhorse

[jfriend]

Thanks for all the help John, definitely usefull things to learn and now using in another gallery. I still go back to the one "floating layer" code that almost worked, in trying to find something to keep a box positioned on a page while scrolling. I've tried about a dozen different codes and this is the closest I came to what I wanted (updated gallery here):

http://www.cxphotos.smugmug.com/gallery/7748981_fkLWg

-What I've done with this code from Yaldex.com for a persistent layer is placing the dog image DIV within my gallery description and the java in the bottom javascript in my site-wide customizationtion box. (it would not work at all placing in the top javascript)

-It seems that it begins to work by positiong the dog image down from the top, although I can only adjust the vertical position not horizontal for some reason. After the initial positioning it won't work when scrolling at all.
Most of the codes I have come across state that the javascript must be placed in the BODY section of your page in which you want the effect. Does this not work in our sitewide customization where we do have box for the body tag (although room for only one line), or must this javascript go in the top or bottom javascript sections in site-wide?

Anyway sorry to drag this one out I just hate to give up on anything, but do you know if this is something that will not work within the structure of Smugmug galleries?
Thanks,
Jon


:deadhorse

What are you really trying to accomplish here. I'm wondering why you need to javascript code at all? If you just want a fixed layer that you can position and doesn't move as you scroll, change your HTML for the layer to this (you can obviously tweak the position numbers):

<div id="floatLayer2" style="position: fixed; height: 150px; width: 150px; top: 200px; left: 10px; z-index: 100;"><a href="/gallery/5836693_iCdHR" target="_blank">
<img src="http://www.cyclingphotos.ca/photos/353753050_Rt9Le-Th-1.jpg" border="0" height="110" width="110"></a></div>

Note: I changed the id to floatLayer2 so the code knows nothing about this layer so you can see what happens when you just have HTML. This is what you get with no effect from the code at all.

FYI, the bottom javascript is "in the body section". The top javascript is "in the head section".

[Marlowe]

John that's awesome, it worked perfectly!!:clap

And you made it look so easy! I should've asked before trying all the other stuff. Thanks again,
Jon

[jfriend]

John that's awesome, it worked perfectly!!:clap

And you made it look so easy! I should've asked before trying all the other stuff. Thanks again,
Jon The only caveat I know of is that "position: fixed" doesn't work in IE6. If you're good to go with this, then you can remove the javascript you added to your top and bottom javascript sections for this.

[Marlowe]

By not working in IE 6 do you mean the box/image appears but moves when scrolling? I can live with that. I'm just amazed that you did in 2 lines what all the websites needed 100 lines of javascript! Is this because its used within a Smugmug gallery structure or would that work on any website?

Either way this answers a lot of questions for me including some I had over a year ago about looking for a vertical navbar within galleries, but I guess it would only be useful in the "all thumbs" view.

See in the intended gallery here (http://www.cxphotos.smugmug.com/gallery/10882497_rbae5).

Thanks again John!
:bow

[jfriend]

By not working in IE 6 do you mean the box/image appears but moves when scrolling? I can live with that. I'm just amazed that you did in 2 lines what all the websites needed 100 lines of javascript! Is this because its used within a Smugmug gallery structure or would that work on any website?

Either way this answers a lot of questions for me including some I had over a year ago about looking for a vertical navbar within galleries, but I guess it would only be useful in the "all thumbs" view.

See in the intended gallery here (http://www.cxphotos.smugmug.com/gallery/10882497_rbae5).

Thanks again John!
:bow IN IE6, it will appear inline where it's declared, ignoring the positioning commands. There are various hacks to try to make IE6 do something intelligent. I've never used any of them and don't have IE6 here to even try them. It would probably be easier to just use some conditional HTML to just remove this element when it's IE6.