Can I get help correcting the code below? You can just copy and paste and try it yourself. Onmouseover the popup div appears. If I click X the popup div should close but it doesn't. Only doubleclicking X closes the popup div. Onmouseover it should always display a popup div though.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<style type="text/css">
.container {
display:block;
width:500px;
height:200px;
border:1px solid green;
}
.advert {
float:right;
overflow:hidden;
width:100px;
height:30px;
border:1px solid red;
}
.close {
float:right;
width:20px;
height:28px;
cursor:pointer;
border:1px solid black;
}
</style>
<body>
<div class="container" onmouseover='getad(39);' onmouseout='hidead(39);changeback(39);'>
<div class='advert' id="39" style="display:none;"><div class="close">X</div></div>
<input type="text" value="1" id="ad39" />
</div>
<div class="container" onmouseover='getad(40);' onmouseout='hidead(40);changeback(40);'>
<div class='advert' id="40" style="display:none;"><div class="close">X</div></div>
<input type="text" value="1" id="ad40" />
</div>
<script type="text/javascript">
function getad(number) {
if(document.getElementById('ad'+number).value==1) {
if(document.getElementById(number).style.display == "none") {
document.getElementById(number).style.display = "block";
}
}
}
function hidead(number) {
if(document.getElementById('ad'+number).value==1) {
if(document.getElementById(number).style.display == "block") {
document.getElementById(number).style.display = "none";
}
}
}
function closead(number) {
document.getElementById('ad'+number).value = 0;
if(document.getElementById(number).style.display == "block") {
document.getElementById(number).style.display = "none";
}
}
function changeback(number) {
if(document.getElementById('ad'+number).value==0) {
document.getElementById('ad'+number).value = 1;
}
}
</script>
</body>
</html>
You IDs are wrong:
<div class='advert' id="39" style="display:none;">
<div class='advert' id="40" style="display:none;">
should be:
<div class='advert' id="ad39" style="display:none;">
<div class='advert' id="ad40" style="display:none;">
I tried your code in firefox and it works.
In IE8, it does not work.
This is the main reason why you should never write native Javascript...
Use JQuery or another JS framework.
First, it will make your code cross browser compatible.
Second, only 1 line of code will do what you need to do ;-)
Something like $(#39).hide() or $(#39).show()
The problem isn't that your ad isn't being removed. It's that in order to click the link that triggers the hidead() function, you must also be hovering the mouse cursor over the div that triggers getad() on mouseover.
So what is actually executing if you step through the actions is this.
Click event triggers on the tag for the "X-link"
closead(number) fires and executes it's code.
Mouseout event fires and propagates to the parent
hidead(number) fires and executes.
Mouseover event fires and propagates to the parent
getad(number) fires and executes.
So your event is being unloaded, then immediately reloaded. Perhaps if you could provide some context, we could help you make this workable. I'm not sure under what circumstances you want to load an ad on mouseover, hide it on mouseout, and give the user a close button. That just seems like a lot of loading/unloading/flashing content that's going to annoy your visitor more than simply having a static ad that reloads every X seconds via AJAX or something.
Related
I want the screen to scroll down to the div. This div has an ID of 'weather-data'
I have tried the following;
document.getElementById('weather-data').scrollIntoView();
I have also tried using anchor tags this did not seem to work
The button which the user will click:
<button id="submit" onclick="myFunction()">
Submit
</button>
The function that runs when the button is clicked:
function myFunction(){
cityName();
getData();
clear();
document.getElementById('weather-data').scrollIntoView();
}
This is the div I want the screen to scroll to:
<div id="weather-data">
</div>
use the anchor tag to link the the div
body{
margin: 0;
}
div{
height: 100vh;
border: 1px solid black;
}
<html>
<body>
<div id='a'>a</div>
<div id='b'>b</div>
<div id='c'>c</div>
<div id='d'>d</div>
<div id='e'>e</div>
<button><a href='#c'>go to c</a></button>
</body>
</html>
I fixed the issue I had to write an if statement to check if there was any text in the h1 element.
if(weatherMain != null){
document.getElementById('icon').scrollIntoView();
document.getElementById('weather-main').scrollIntoView();
}
I'm learning event delegation, and I encounter a problem.
At first, when I did the first draft, if I clicked in the < span > it would only delete the text and not the button, so I modified it. Later, when clicking the container div it deleted the whole thing, so I changed it again.
Right now it's functional, but it seems to me that it could be written more generically (without needing to add the class names, just the id of the container) and in a more efficient way, I feel there is a lot more code than it should be.
And one more thing: It should work with dynamically added elements.
Any help would be very appreciated!
function getTarget(e) {
return e.target;
}
function remove(e) {
var target = getTarget(e);
target.parentNode.removeChild(target);
}
function remove1(e) {
var target = getTarget(e);
var parent = target.parentNode;
parent.parentNode.removeChild(parent);
}
document.getElementById("contenedor").addEventListener("click", function (e) {
if (e.target && e.target.nodeName === "DIV" && e.target.classList.contains("bot")) {
remove(e);
}
if (e.target && e.target.nodeName === "SPAN") {
remove1(e);
}
document.getElementById("parrafo").textContent = "Hice click en";
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="contenedor">
<div class="bot" id="boton" style="width:200px; height:50px; background-color: red"><span>asdasd</span></div>
<br>
<div class="bot" id="boton1" style="width:200px; height:50px; background-color: red"><span>asdasd</span></div>
<br>
<div class="bot" id="boton2" style="width:200px; height:50px; background-color: red"><span>asdasd</span></div>
<br>
<div class="bot" id="boton3" style="width:200px; height:50px; background-color: red"><span>asdasd</span></div>
<br>
<div class="bot" id="boton4" style="width:200px; height:50px; background-color: red"><span>asdasd</span></div>
<br>
<div class="bot" id="boton5" style="width:200px; height:50px; background-color: red"><span>asdasd</span></div>
</div>
<br>
<script src="script.js"></script>
</body>
</html>
In a JS event, e.target is the element the action (click) is performed on and this the element the code is attached to. That can be used to check if the parentNode is the div the click was attached to (well, the same could be done by checking if the parent is the div by its id, but since it's an event delegation excercise, this is more fun :) )
document.getElementById("contenedor").addEventListener("click", function (e) {
var target = e.target;
if(target!==this){ //if the div itself is clicked do nothing
while(target.parentNode !== this) //loop up until it's a direct parent, this also works with multiple nested elements
target = target.parentNode;
target.parentNode.removeChild(target);
}
document.getElementById("parrafo").textContent = "Hice click en";
});
fiddle
As a side note, instead of adding a <BR> under each div, you can also alter the margin through css with something like
.bot{
margin-bottom:20px;
}
This has the advantage that removed elements hold the same space (unless of course, that is not the intention ;) )
Example: fiddle
I have a html/JavaScript project that i am working on and i am encountering problems.
I am making a sign-up form for an email newsletter and i have it in a div element in the middle of a page like so:
(i know, its structure is really messed up but i am just playing around right now.)
<div id="overlay"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><center><div id="nothin" class="form">Sign Up For Our Newsletter<br><br>
<table><TD width="50%" valign="middle"><img class="round"src="picture1.jpg" height="150" width="250"></td><td width="5%"></td><td width="40%" valign="middle"><form>
<input type="text" class="round"required id="name" width="190"><br><br>
<input type="email" class="round"required id="email" width="190"><br><br>
<input id="submit"type="submit" class="button"value="Submit Your Email" onclick="success()"><br>
</form></td></table></div></center></div>
The problem i have is i made the script below so when you submit you get a success message and a button that should close down the div, leaving the webpage:
<script>
function success()
{
document.getElementById("nothin").innerHTML="<div id='form2'>Success!<br><br>Thank You!<br> You have successfully signed up for the Our newsletter!<br><button onclick='hide()' class='button'>Continue</button></div>";
}
</script>
When you click on the button "continue" it should run the function "hide()":
<script>
function hide()
{
document.getElementById("overlay").innerHTML="";
}
</script>
My problem is that when the "continue" button is clicked, it only closes <div id="nothin>
not "overlay" like it should. Do you have any idea why? Should i use some other method to close it?
Here is the CSS for the form, it wont work that well without it:
<style>
#overlay {
z-index: 16777271;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}
.form, .form2{
background-color:white;
color:black;
width:500;
height:250;
align:center;
border-radius: 40px;
border:dashed darkgreen;
}
.round{
border-radius:8px;
}
.button{
background-color:green;
border-color:green;
border-radius:45px;
height: 40px;
width:190px;
}
.BUTTON:HOVER{
background-color:darkgreen;
border-color:darkgreen;
border-radius:45px;
}
</style>
In the hide() function you are making the contents of "#overlay" element empty while element itself, remains.
One solution can be hiding the element.
This should work -
function hide(){
document.getElementById("overlay").style.visibility = 'hidden';
/*
//or setting the display to none
document.getElementById("overlay").style.display = 'none';
*/
}
Suppose you have a html code like
<div id ='parentWow'>
<div id='ChildHello'>
Some Content
<div>
</div>
If you want to remove the child of id "ChildHello" from the parent, instead of just making their visibility "hidden", you can use the following javascript
document.getElementById("ChildHello").parentNode.removeChild(document.getElementById("ChildHello"))
This helps... (y)
<div id="z1" onclick="document.getElementById('q1').style.display=''; document.getElementById('z1').style.display='none';" style="border:solid 1px; background- color: #DDDDDD; width:936px; height:auto; margin-left:0px;margin-right:0px;">
<h2> Pg. 419-423, problems 8-14 even, 20-30 odd, AYP 1-10</h2></div>
<div id="q1" onclick="document.getElementById('q1').style.display='none'; document.getElementById('z1').style.display='';" style="display:none; border:solid 1px; background-color: #DDDDDD; width:938px; height:auto;margin-left:0px;margin-right:0px;">
<h2> Pg. 419-423, problems 8-14 even, 20-30 odd, AYP 1-10</h2>
</br>
<img src="http://www.rediker.com/reports/samples/Attendance-Period/Homework-Assignment- form.jpg"></img></div>
The above script is what I planned on using to create a spoiler. Basically, when the user clicks on the z1 element, it hides itself and shows the q1 element, and vice-versa. It works on all browsers besides IE. Linking Jquery would be a small liability.
I think this is what you're looking for. You're missing to add display: block
Change this
document.getElementById('z1').style.display='';
to
document.getElementById('z1').style.display='block';
You should think about cleaning your code.
HTML:
<div id="z1" onclick="aa()"></div>
<div id="q1" onclick="bb()">
<img src="http://www.rediker.com/reports/samples/Attendance-Period/Homework-Assignment-form.jpg"/>
</div>
JS:
function aa() {
document.getElementById('q1').style.display = 'block';
document.getElementById('z1').style.display = 'none';
}
function bb() {
document.getElementById('q1').style.display = 'none';
document.getElementById('z1').style.display = 'block';
}
Working JSfiddle
I'm stuck for a while now with the following problem. I've created an website which contains an overlay. The overlay is placed in the html as below;
<html>
<body>
<div id="overlay"></div>
<div id="wrapper">
<!--More html - snipped-->
<div id="search">
<form method="post" action="Default.aspx?id=999" id="searchForm">
<label for="searchInput">Your searchcriteria:</label>
<input type="text" id="searchInput" />
</form>
</div>
<!--More html - snipped-->
</div>
</html>
The css for the overlay and div#search is as below. There is a bit more css to style the form elements inside the div#search, but since I don't think it's relevant I left this out.
div#search
{
clear:both;
width:990px;
height:50px;
z-index:1002;
display:none;
position:absolute;
margin:49px 0px 0px 0px;
background-color:#FFF;
}
#overlay
{
background-color:#000;
position:fixed;
opacity:0.7;
display:none;
z-index:1001;
width:100%;
height:100%;
top:0;
left:0;
}
When a user clicks an menuitem to open the searchwindow the following bit of javascript is executed. The javascript is just a concept, but it works.
function showSearchBar() {
//Check if search bar is shown, if it is hide it, otherwise show it.
var isVisible = $("#search").is(":visible");
if (isVisible) {
//Hide the div
$("#search").fadeOut(600);
//hide the overlay
$("#overlay").hide();
}
else {
//Show the overlay
$("#overlay").show();
//Show the hidden div
$("#search").fadeIn(600);
//$("input#searchInput").watermark("Enter your criteria");
}
}
The problem here is that whenever the javascript is executed the overlay is being placed at the top of the page disabling every other element on the page, including the searchform. I want the searchform to be available to the users, so it should be on top of the overlay. It's probably a very small issue, but I don't see the problem here. What is causing the overlay to be placed over the searchform instead of the searchform being on top of the overlay?
Problem solved. I modified the html to look like this;
<html>
<body>
<div id="search">
<form method="post" action="Default.aspx?id=999" id="searchForm">
<label for="searchInput">Your searchcriteria:</label>
<input type="text" id="searchInput" />
</form>
</div>
<div id="overlay"></div>
<div id="wrapper">
<!--More html - snipped-->
</div>
</html>
This was necessary because the wrapper has it's own z-index and is positioned relative. By placing the div#search as first element in the body I was sure that it lied on top of all other elements because of it's absolute positioning. Moving the html-element solved my problem. Other suggestions for improvement are welcome.