So I have an image that is appearing and disappearing onclick.
But in the middle of the hmtl-document there is a lot of white space between the paragraphs.
How do I close that whitespace? I want the image to appear onclick and disappear onclick. But how do I remove all the whitespace?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css">
<title>Document</title>
<script>
function sniffer(message) {
console.log("Something happened:" + message);
}
</script>
</head>
<body id="body">
<p onclick="callFunction('paragraph')">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p onclick="loadFunc('Rv')">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p onclick="sniffer('2nd p tag moused-over')" id="secondP">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<br>
<p id="firstYo">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<br>
<br>
<br>
<p id="firstP">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<br>
<br>
<br>
<input type="text" onchange="alert('It changed!')">
<button id="butt" type="button">Press me</button><br><br><br>
<input type="button" value="Click for ball" class="hot">
<input type="button" value="Click to hide ball" class="hot2">
<br>
<img src="images/Hamburger.svg" alt="Hamburgerii" class="Hamburger" onmouseover="bigImg(this)" onmouseout="normalImg(this)">
<img id="ball" src="images/ball.jpg" style="visibility:hidden"/>
<button id="activator" type="button">Klicka för att få 32</button>
<br>
<br>
<br>
<button id="activatornumero" type="button">Klicka för sant eller falskt</button>
<br><br><br>
<button id="activatornumerodose" type="button">Klicka för att veta vilken dricka det är nu</button>
<br><br><br>
<button id="activatornumerodosetwo" type="button">Click it</button>
<br><br><br>
<br><br><br>
<button id="activatornumerodosethree" type="button">Click to know the status</button>
<br><br><br>
<br><br><br>
<button id="butt" type="button" onclick="callFunction('W')">Click for good times.</button>
<br><br><br>
<br><br><br>
<button id="activator3" type="button">Activate it</button>
<br><br><br>
<br><br><br>
<input type="button" id="Rv" value="Do it again!">
<br><br><br>
<br><br><br>
<script>
function intCheck (){
var myNumber = "32 cookies";
var result = parseInt(myNumber);
alert(result);
}
document.getElementById("activator").onclick=function(){
intCheck();
}
document.getElementById("butt").onclick=function(){
sniffer("Inner sniffer");
}
function callFunction(message) {
alert("U clicked on message" + message);
prompt("Please enter your name", "You clicked on.." + message);
}
function loadFunc() {
alert("The page has loaded." + new Date());
}
function bigImg(x) {
x.style.height = "364px";
x.style.width = "546px";
}
function normalImg(x) {
x.style.height = "309px";
x.style.width = "1200px";
x.style.backgroundSize = "100%";
x.style.position = "center";
x.style.padding = "5px";
x.style.paddingBottom = "0px";
x.style.paddingLeft = "50px";
x.style.paddingRight = "0px";
x.style.styleColor = "Red";
x.style.marginLeft = "0px";
x.style.marginRight = "-10px";
}
document.getElementById("butt").onclick=function(){
sniffer("Clicked on SecondP");
outSide();
outSide2();
}
document.getElementById("secondP").onmouseover=function(){
sniffer("Mouse over inner P");
}
document.getElementById("body").onload=function(){
alert("Page oading");
}
var firstName = "Karl";
var lastName = "W";
var fullName = firstName +" "+ lastName;
var aNumber = 6;
var anotherNumber = 4;
var theAddition = aNumber * anotherNumber;
function sniffer(message) {
console.log("Event: " + message);
}
alert(fullName);
alert(theAddition);
document.getElementById("activatornumero").onclick=function(){
if(1 > 4) {
console.log("It's true");
alert("It's true");
} else {
console.log("It's not true");
alert("It's not true");
}
}
function runIt() {
var target = document.getElementById("firstP");
var currentValue = target.innerHTML;
console.log(currentValue);
var time = new Date().getHours();
if(time < 22-04) {
target.innerHTML="It is time for juice!";
target.innerHTML.style.color = "red";
}else{
target.innerHTML="It is time for beers!";
}
}
document.getElementById("activatornumerodose").onclick=function(){
runIt();
}
document.getElementById("activatornumerodosethree").onclick=function(){
alert("I am a meathead!");
}
function callFunction(Karl) {
alert("Display message" + Karl);
prompt("Please enter your name", "Your name.." + Karl);
}
function numberCheck (){
var myNumber = "skoj";
var result = isNaN(myNumber);
console.log(result);
alert(result);
}
function intCheck (){
var myNumber = "32 cookies";
var result = parseInt(myNumber);
console.log(result);
alert(result);
}
document.getElementById("activator3").onclick=function(){
numberCheck();
intCheck();}
function doItAgain() {
var loopCount = 5;
while(loopCount > 0) {
console.log("loopcount is now: " + loopCount);
loopCount = loopCount -1;
}
console.log("End loop");
}
document.getElementById("Rv").onclick=function(){
doItAgain();
this.style.color = "red";
}
</script>
<script type="text/javascript">
</script>
<script src="learning.js"></script>
</body>
</html>
JS:
function outSide () {
alert("called outside() function");
}
var dogTypes = "setter";
dogType = "setter";
function outSide2 () {
alert(fullName);
}
function womanFunc(){
document.getElementById('ball').style.visibility="visible";
}
document.getElementsByClassName("hot")[0].onclick=function(){
womanFunc();
}
function womanFunc2(){
document.getElementById('ball').style.visibility="hidden";
}
document.getElementsByClassName("hot2")[0].onclick=function(){
womanFunc2();
}
CSS
body {
margin: 0;
padding: 2px;
}
.Hamburger {
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
left: 0px;
top: 60px;
bottom: 10px;
z-index: -3;
padding: 5px;
bottom: 0px;
left: 10px;
right: 10px;
}
#ball {
height: 79rem;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
top: -690px;
margin-bottom: 0px;
right: -300px;
left: 200px;
float: none;
overflow: visible;
}