Form Box showing thru image, set opacity?

Script: Image Thumbnail Viewer
URL on DD: http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm


Describe Problem:
Hi,
Great script however one question. I have a couple of dropdown boxes on the same page as the gallery, and the boxes are showing "thru" the image. Is there anyway to change the transparency/opacity of the window?

An example can be seen here, as the "Curency Converter" box is seen thru the image and even works "thru" the image.
http://obscuria.make-a-store.com/cgi...y.cgi?item=123

Thanks.

Well, what I don't understand here is how the boxes are showing through the image. Did you add a filter:

Code:

---

<style>
select {filter:alpha(Opacity=50)}
</style>

---

??
Because for one, you need to find the problem, and then you have to try to fix it.

Mike,
Thanks for the quick reply

I didn't add any type of filter to the image script. I really don't know what to look for to be causing the problem, that is why I am posting....

Any other ideas on this one, as I really don't know what I should be looking for...
If it matters, this problem only happens with IE. The box does not show thru on Firefox or Opera.

what type of browser are you using?

edit: oops, i missed that last bit.

I use have IE too, and it seems to be working fine

Or even better yet, when this happens on your browser, hit print screen, upload it and let me see it. then I'll be able to see what's happening, because whatever the problem is, it's not happening in my browser.

Quote:

---

Originally Posted by mburt

what type of browser are you using?

---

Problem is happening on IE 6.0 sp2.
Looks fine on opera9 and firefox 1.5.0.5

Quote:

---

Originally Posted by mburt

Or even better yet, when this happens on your browser, hit print screen, upload it and let me see it. then I'll be able to see what's happening, because whatever the problem is, it's not happening in my browser.

---

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

Well, you can make it a file attachment on a post

well, i have to go, i'll be back in about half an our

Quote:

---

Originally Posted by 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.

http://www.obscuriaradio.com/imagescriptproblem.jpg

Replace Step 1 from the demo page with this:

Code:

---

<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>

---

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

Regards,
Jeff

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?

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:

Code:

---

<!--[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:

Code:

---

<!--[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.

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?

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

Quote:

---

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.

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.....

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

"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