jason310771 Posted March 13, 2011 Share Posted March 13, 2011 Please can someone take a look at my code and advise how I place the 'helpContainer' just below the red icon that was clicked. Been messing around a lod of other codes from various calendar scripts that i have, but nothing seems to be working for me. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Overlay test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> #helpOverlay { border: 1px solid blue; background-color: #ccffcc; display: none; margin-left: 40px; position: absolute; width: 400px; height: 200px; visibility: visible } #helpContainer{ border: 1px solid green; color: black; background-color: #0ff; text-align: center; position: absolute; width: 100%; overflow: visible; visibility: visible; display: block } </style> <script type="text/javascript">//<![CDATA[ function hideHelpContent() { document.getElementById('helpOverlay').style.display = 'none'; var helpContent = document.getElementById('helpContent'); helpContent.innerHTML = ''; } function showHelpContent(layer) { var xmlhttp; document.getElementById('helpOverlay').style.display = 'block'; if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4 && xmlhttp.status==200) { if(xmlhttp.responseText == ''){ //document.getElementById('passengerID').value='0'; //document.getElementById('results').style.display='none'; } else { helpFieldId = document.getElementById(layer); alert(layer); // tmp = helpFieldId.offsetParent; alert(tmp); // tttt = helpFieldId.offsetParent; alert(tttt); helpContent = document.getElementById('helpContent'); helpContent.innerHTML = ''; // Move the help container! the_left = ds_getleft(helpFieldId); the_top = ds_gettop(helpFieldId);// + helpContent.offsetHeight; helpContent.style.left = the_left + 'px'; helpContent.style.top = the_top + 'px'; helpContent.innerHTML = xmlhttp.responseText; } } } xmlhttp.open("GET","getHelpText.php?name="+layer,true); xmlhttp.send(); } // Get the left and the top of the element. function ds_getleft(el) { var tmp = el.offsetLeft; el = el.offsetParent while(el) { tmp += el.offsetLeft; el = el.offsetParent; } return tmp; } function ds_gettop(el) { var tmp = el.offsetTop; el = el.offsetParent while(el) { tmp += el.offsetTop; el = el.offsetParent; } return tmp; } //]]></script> </head> <body> <div id="helpContainer"><div id="helpOverlay"><a href="#" onclick="hideHelpContent();" style="float: right;">close</a><div id="helpContent"></div></div></div> <br /> <br /> <br /> <br /> <br /> <br /> <img id="helpA" alt="" onclick="showHelpContent('helpA')" src="../images/newsimage39.gif"> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <img id="helpB" alt="" onclick="showHelpContent('helpB')" src="../images/newsimage39.gif"> </body> </html> Quote Link to comment Share on other sites More sharing options...
gristoi Posted March 13, 2011 Share Posted March 13, 2011 Hi, If you are looking for an elegant style overlay with fading in and out etc, then you might want to look at using jquery to achieve this effect. There are a lot of pre built plugins at your disposal that already do what you need. A good example is on this home page: http://flowplayer.org/tools/demos/overlay/index.html r you can search through the jquery repository: http://plugins.jquery.com/ Quote Link to comment Share on other sites More sharing options...
jason310771 Posted March 13, 2011 Author Share Posted March 13, 2011 to start with the basic will do for the site as i do not want to add in to many javascripts from jquery, i done this before on a site and the whole site was messed up as some of the jquery javascript functions are also names of my own, and the time to change them all was too long, i gave up on this project using jquery and a bit shy to use again. how would i place the box in the center of the viewpoint of the browser using javascript and the ID of the boxes ? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.