PDA

View Full Version : Show Hint Script Issues...



k0ldfuz10n
08-17-2006, 04:20 AM
1) Script Title: Show Hint Script

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex16/showhint.htm

3) Describe problem: When the page is loaded with the show hint script in IE6 it is blocked by IE's "security" measures but only on the page I created. When I visit the actual page on DD it isn't blocked. Of course this isn't a problem for me but visitors to the page may not allow the pop-up and thus not get the hint.

Also, if the page is opened in FF it appears as it should, a small pop-up. In IE it appears as a pop-under, I can adjust the width of the box to fix this but it does look funny.

Are these just issues with IE or is there a way to fix them?

Thanks

jscheuer1
08-17-2006, 05:40 AM
That only happens locally, as a security measure. As far as IE is concerned, javascript is ActiveX. Click on the bar and click on allow and click on yes. Once your page is live, this will not happen. You can also give your page 'the mark of the web'. That way (in most cases) it will not display the security bar locally either. Put this right after your <html> tag like so:


<html>
<!-- saved from url=(0014)about:internet -->
<!-- this and above comment should be removed for live, non-demo use -->
<head>

But, navigating away from the page to another local page, or including another local page on it via a frame or an iframe can be problematical if said page does not also have 'the mark of the web' on it.

I'm not sure what you mean by a pop under unless you are talking about the habit IE has of showing almost all DHTML generated content like this underneath a select (drop down combo box) element. If so, there are various ways around that, and a link to your problem page would help determine the options in your case.

k0ldfuz10n
08-17-2006, 02:16 PM
I'm not sure what you mean by a pop under unless you are talking about the habit IE has of showing almost all DHTML generated content like this underneath a select (drop down combo box) element. If so, there are various ways around that, and a link to your problem page would help determine the options in your case.

Thats exactly what I mean by pop-under. The issue is that on the form I'm working on the input box I want the hint next to is smaller than the select menu below it and when the hint is moused-over the default size of the box is half obscured by the select below it. Unfortunately, I'm at work right now and can't toss the page onto a geocities site or something for you to examine. If you would still like me to do so I will though.

As for fixing the local security measure, thanks. I was mainly worried that when I went live with the page it would nullify the point of the hint box.

Thanks again :)

jscheuer1
08-17-2006, 10:55 PM
Well, an example of your page on Geocities might help but, it wouldn't tell me some things. Like, are you using this as part of a secure data exchange environment like registration or purchasing? That could complicate or possibly rule out the most elegant solution I know of - the iframe shim. This requires a bit of work but, shouldn't be too hard for what I am assuming is a fairly simple script. Except that in a secure environment, the contents of the iframe (which would never actually be seen) must also be secure, or else you will get warnings from the page that it contains both secure and non-secure content.

The best and easiest thing to do is to move the select elements away from the hints but, this sounds as if it might be impractical for your design, though perhaps not. The only other alternative I'm aware of is to add some javascript code to hide the selects when and only when the hint(s) that might be obscured by them are visible.

I also rather like your idea that you mentioned of designing the tips so that they are a different shape, less likely to coincide with the selects. Perhaps a combination of that and moving the selects just a bit would yield a satisfactory result.

k0ldfuz10n
08-18-2006, 12:04 AM
Well the form is going to be a simple info gathering page for loan inquiries for a local mortgage company. The hint is actually being used on the social security number input box (for credit checks) and yes the form is going to be encrypted for obvious reasons. So if my best and easiest choice is to simply adjust the size of the hint box to keep it from appearing under the select below it then thats fine. I did try moving around the input associated with the hint box but it messes up the general flow of the form so I don't care if the hint box is a little wide as long as it works.

Thanks again:)

jscheuer1
08-18-2006, 02:16 AM
As I said, I didn't think it would be too hard to use the iframe shim with this script. I just worked it out in about 5 minutes. The only problem is that it probably will give you the warning I mentioned. If not, you are home free. If it does, all you should need to do is to find out how to create a secure blank page for your CMS or whatever type of package it is that you are using for your info gathering page and put its filename (and path if required) as the src attribute (empty and highlighted red in the below) for the iframe:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#hintbox{ /*CSS for pop up hint box */
position:absolute;
top: 0;
background-color: lightyellow;
width: 150px; /*Default width of hint.*/
padding: 3px;
border:1px solid black;
font:normal 11px Verdana;
line-height:18px;
z-index:100;
border-right: 3px solid black;
border-bottom: 3px solid black;
visibility: hidden;
}

.hintanchor{ /*CSS for link that shows hint onmouseover*/
font-weight: bold;
color: navy;
margin: 3px 8px;
}

</style>

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

<script type="text/javascript">

/***********************************************
* Show Hint script- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var horizontal_offset="9px" //horizontal offset of hint box from anchor link

/////No further editting needed

var ie5_5=typeof hintboxiframe=='undefined'? 0 : 1
var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.
var ie=document.all
var ns6=document.getElementById&&!document.all

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

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

function clearbrowseredge(obj, whichedge){
var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
if (whichedge=="rightedge"){
var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)
}
else{
var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
}
return edgeoffset
}

function showhint(menucontents, obj, e, tipwidth){
if ((ie||ns6) && document.getElementById("hintbox")){
dropmenuobj=document.getElementById("hintbox")
dropmenuobj.innerHTML=menucontents
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (tipwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=tipwidth
}
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
dropmenuobj.style.visibility="visible"
obj.onmouseout=hidetip
unhideIframe();
}
}

function hidetip(e){
hideIframe();
dropmenuobj.style.visibility="hidden"
dropmenuobj.style.left="-500px"
}

function createhintbox(){
var divblock=document.createElement("div")
divblock.setAttribute("id", "hintbox")
document.body.appendChild(divblock)
}

if (window.addEventListener)
window.addEventListener("load", createhintbox, false)
else if (window.attachEvent)
window.attachEvent("onload", createhintbox)
else if (document.getElementById)
window.onload=createhintbox

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

// Unhide IFrame
function unhideIframe() {
if (ie5_5){
var theIframe = document.getElementById("hintboxiframe")
var theDiv = document.getElementById("hintbox");
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>
</head>
<body>
<form>
<b>Username:</b> <input type="text" class="test" /> <a href="#" class="hintanchor" onMouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event, '150px')">[?]</a><select name="bob"><option value="">pppppppppppp</option>
<option value="">ooooooooooooo</option>
<option value="">kkkkkkkkkkkkkk</option>
</select><br />
<b>Password:</b> *<input type="text" class="test" /> <a href="#" class="hintanchor" onMouseover="showhint('Enter the desired password. <b>Must</b> be 8 characters or longer.', this, event, '200px')">[?]</a><select name="bob"><option value="">pppppppppppp</option>
<option value="">ooooooooooooo</option>
<option value="">kkkkkkkkkkkkkk</option>
</select><br />
</form>
</body>
</html>