Form Box showing thru image, set opacity?

[Kraven]

Give me a few minutes and I will "get it up".

Here you go, I didnt want to insert too large an image, but this shows the issue, and the form box is usuable even thru the image.

[jscheuer1]

Replace Step 1 from the demo page with this:

<style type="text/css">

#showimage{
position:absolute;
visibility:hidden;
border: 1px solid #f5f5f5;
z-index:100;
}

#dragbar{
cursor: hand;
cursor: pointer;
background-color: #f5f5f5;
min-width: 100px; /*NS6 style to overcome bug*/
}

#dragbar #closetext{
font-weight: bold;
margin-right: 1px;
}
</style>

<!--[if lte IE 6]>
<!--[if gte IE 5.5]>
<iframe id="showimageiframe" src="" style="z-index:99;display:none;position:absolute;" frameborder="0"></iframe>
<![endif]-->
<![endif]-->

<script type="text/javascript">

/***********************************************
* Image Thumbnail viewer- © Dynamic Drive (www.dynamicdrive.com)
* Last updated Sept 26th, 03'. This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
* Modified to appear over selects in IE5.5 through IE6 by jscheuer1
* in http://www.dynamicdrive.com/forums 7/31/06
***********************************************/
var ie5_5=typeof showimageiframe=='undefined'? 0 : 1
var showing=0
var ie=document.all
var ns6=document.getElementById&&!document.all

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body
}

function enlarge(which, e, position, imgwidth, imgheight){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
if (position=="center"){
pgyoffset=ns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop)
horzpos=ns6? pageXOffset+window.innerWidth/2-imgwidth/2 : ietruebody().scrollLeft+ietruebody().clientWidth/2-imgwidth/2
vertpos=ns6? pgyoffset+window.innerHeight/2-imgheight/2 : pgyoffset+ietruebody().clientHeight/2-imgheight/2
if (window.opera && window.innerHeight) //compensate for Opera toolbar
vertpos=pgyoffset+window.innerHeight/2-imgheight/2
vertpos=Math.max(pgyoffset, vertpos)
}
else{
var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+event.clientX
var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+event.clientY
}
crossobj.style.left=horzpos+"px"
crossobj.style.top=vertpos+"px"

crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()"><font color=#000000>CLOSE</font></span> </div><img src="'+which+'">'
crossobj.style.visibility="visible"
showing=1;
unhideIframe();
return false
}
else //if NOT IE 4+ or NS 6+, simply display image in full browser window
return true
}

function closepreview(){
showing=0;
hideIframe();
crossobj.style.visibility="hidden"
}

function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx+"px"
crossobj.style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
}
if(showing)
unhideIframe();
return false
}

function initializedrag(e){
if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}

document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")

// Hide IFrame
function hideIframe() {
if (ie5_5){
var theIframe = document.getElementById("showimageiframe")
theIframe.style.display = "none";
}
}

// Unhide IFrame
function unhideIframe() {
if (ie5_5){
var theIframe = document.getElementById("showimageiframe")
var theDiv = document.getElementById("showimage");
theIframe.style.width = theDiv.offsetWidth+'px';
theIframe.style.height = theDiv.offsetHeight+'px';
theIframe.style.top = theDiv.offsetTop+'px';
theIframe.style.left = theDiv.offsetLeft+'px';
theIframe.style.display = "block";
}
}
</script>

[Kraven]

That worked perfectly!
You guys are awesome,thanks so much for your help at all hours of the morning.

Regards,
Jeff

[Kraven]

When using IE, this script now throws a "this page contains secure and nonsecure items" message. When I revert back to the old script which has the form showing thru, the error security warning disappears.

Any ideas what would be causing that warning in the script?

[jscheuer1]

It is hard to say exactly but, I would guess that you need to make up a blank page and give it the same security level as your page, and list it as the source of the iframe:

<!--[if lte IE 6]>
<!--[if gte IE 5.5]>
<iframe id="showimageiframe" src="secure_blank.html" style="z-index:99;display:none;position:absolute;" frameborder="0"></iframe>
<![endif]-->
<![endif]-->

Where secure_blank.html is the name of your secure blank page. The extension (.html) in my example may have to be different in order for it to truly be secure. Needless to say (I hope), working on this locally, I had no secure page to begin with so, didn't have this problem. You might be able to use:

<!--[if lte IE 6]>
<!--[if gte IE 5.5]>
<iframe id="showimageiframe" src="about:blank" style="z-index:99;display:none;position:absolute;" frameborder="0"></iframe>
<![endif]-->
<![endif]-->

Which would be better, if it works. It is possible that neither of these two approaches will work. If not, there may be no solution but, we could do some tests that will help us find a solution if one exists. Try the about:blank idea first. Then if that doesn't do it, make up a secure page for the iframe, let us know what happens.

[Kraven]

Hi John,

src="secure_blank.html" still showed a security warning when entering a secure page.

src="about:blank" caused my page to not show at all.

src="secure_blank.html"

src="http://obscuria.make-a-store.com/cgi-bin/Make-a-Store.cgi" not only threw a security warning, but a copy of the "browse by price" dropdown was actually attached to the image, and when I dragged the image, it was a part of it.

Hmmm, any other ideas?

[jscheuer1]

Well, I got this message when trying to access secure_blank.html -

The requested URL /cgi-bin/secure_blank.html was not found on this server.

So, I have to ask, did you make up a blank page of that name (secure_blank.html) and upload it to the /cgi-bin/ directory?

If not, give it a shot. Otherwise, I would consult your documentation for your marketing package and/or ask the folks who make it how to make up a blank page that is secure. If you cannot get anywhere like that, find a forum for the package that you are using and ask there how to make up a blank secure page. Tell anyone you ask for help that you are showing it through an iframe on a secure page. If this cannot be done, we can devise a way to make the select invisible while the pop up image is visible but, that will not look as professional.

[Kraven]

Yes, I made up the page, but later deleted it after testing.
I reuploaded the page, link here:http://obscuria.make-a-store.com/cgi...y=secure_blank



So again the gallery works fine now, but what happens is when adding an item to the cart and checking out I get a secure warning just by the script being between the head tags.....

[jscheuer1]

Why do you even have the script on the secure page? I see no gallery on it.

[Kraven]

"Why do you even have the script on the secure page? I see no gallery on it."

Because I put the script in the header template that is the same on every page. But in retrospect, I see that I could have just put the script in the product template pages that I need to use the gallery on.

I got with my shopping cart provider, they gave me the proper way to create and reference a secure page, and now the security warning is gone.

My apologizies for not realizing to just put the script on the same page as the gallery only the first time, but thank you for all of your excellent help.

Jeff