</div>
</div>
<div class="grid--cell mb0 mt4">
<a href="/questions/15527866/i-created-a-dialog-now-how-can-i-close-it" dir="ltr">I Created A Dialog, Now How Can I Close It?</a>
<span class="question-originals-answer-count">
(5 answers)
</span>
</div>
<div class="grid--cell mb0 mt8">Closed <span title="2013-03-22 00:26:11Z" class="relativetime">7 years ago</span>.</div>
</div>
</aside>
This is a 2nd thread of a first I started here: I Created A Dialog, Now How Can I Close It?
I'm creating a new thread so I can include updated code.
First of all I'd like to give an enormous THANKS to all whom have helped me in the post linked above but as I stated, I'm starting this thread so I can add code samples.
I have a dialog on some of my pages that appears onscroll but I'm having some trouble.
This dialog can be seen here: (The semi transparent box that appears) http://classifieds.your-adrenaline-fix.com/detail.php?fatherID=37&TypeID=42&ListingID=42
On detail.php I have:
(in the head)
<script type="text/javascript">
function loaddiv(thediv, thefile) {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject ('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById(thediv).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', thefile, true);
xmlhttp.send();
}
</script>
Below That:
<body onscroll="loaddiv('div2', 'do-you-have-a-dirt-bike-for-sale.html')">
Then:
if (!Has_Seen_DB_For_Sale_Dialog($user_ip)){
echo "<div id='div2'></div>";
ip_add($user_ip);
}
Above that (in an include file) I have:
function Has_Seen_DB_For_Sale_Dialog($ip){
global $user_ip;
$query ="SELECT `IP` FROM `DB_For_Sale_Dialog` WHERE `IP`='$user_ip'";
$query_run = mysql_query($query);
$query_num_rows = mysql_num_rows($query_run);
if($query_num_rows==0){
return false;
} else if($query_num_rows==1){
return true;
}
}
function ip_add($ip){
$query = "INSERT INTO `DB_For_Sale_Dialog` VALUES('', '$ip') ";
@$query_run = mysql_query($query);
}
And the file that is displayed looks like:
<div id='div2'>
<div class="DoYouHaveADirtBikeForSaleBox" id="DoYouHaveADirtBikeForSaleBox">
<h2>Got A Dirt Bike You Want to Sell?</h2>
<p class="DirtBikeForSaleBannerButton">
<a href="http://classifieds.your-adrenaline-fix.com/add.php">Yea, Show Me How</a>
</p>
<p class="DirtBikeForSaleBannerButtonNoThanks">
<a onclick="javascript:var div = document.getElementById('div2');div.parentNode.removeChild(div);">Nope, Get This Out of The Way</a></p>
</div>
</div>
I'm VERY Grateful of the help provided me in my last thread and mean NO disrespect in starting a new thread but What I'm now having trouble with is:
When I hover over the right button to close the box, the pointer doesn't turn into a hand as it does with other links.
When the dialog box is closed and the page is scrolled, the box reappears. (the function to display the box is called onscroll but I only want the box to appear ONCE.
If anyone wouldn't mind commenting on this I'd be most appreciative and I certainly look forward to your responses.
Thanks So Much, Stuart K
</div>
Use this aproach:
<script type="text/javascript">
function loaddiv(thediv, thefile) {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject ('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById(thediv).innerHTML = xmlhttp.responseText;
window.onscroll = null;
}
}
xmlhttp.open('GET', thefile, true);
xmlhttp.send();
}
</script>
--------I made this little test--------------
function loaddiv() {
alert('hiiii');
window.onscroll = null;
}
The body call:
<body onscroll="loaddiv();">
And works just once xD
Saludos.