Removing whitespace around hidden image

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;
}





try with display: none instead of visibility: hidden maybe

do you have a pen or something in which you can show what’s going on?

1 Like

i think with position: absolute and display: none you could make it disappear and remove itself from the regular flow of elements, making other elements rearrange, but that will also depend on your other css settings.
Another way could be to use grid and change the grid areas, moving the image to an area where it wont cause disruptions.

Ah this worked when I changed it to absolute.

But when trying to use display:none; in CSS it disappeared altogether. What was the purpose of that one if I may ask? Did you mean for Javascript or something?

Also, I wonder how(if) I can make everything else flow around the picture when it becomes visible somehow? And not just behind it. So the text flows around the picture somehow.

diaplay: none is a CSS style, you better read the specifications from google, im not that familiar. The purpose was to make like there is no image in the first place, i supposed this is what you aimed for.
Idk how you mean the text to flow around picture. Image is by default an inline-block element, so other inline/inline-blocks can stand next to it, as long as there is enough page width to contain them. Ofc flex and grid negates the inline-block display. There is also the float property involved with image tag, but you better check that on the web again.
To make content go back to regular positions, you must set the position back to default.
I guess the best way to make your image come in and out would be to make a simple class which contains the styles to make it hidden and add/remove that class from the image as the button is clicked. Do not add those styles to the image id, or they will take priority over class. classList.toggle() is one way you can “toggle” a class on and off from the element classes list. Again, check documentation for more info ^^

Hmm what do you mean by documentation.

I want the text of that page to flow around that image(and not disappear behind it like it does now) when it appears.

That I don’t understand how to do.

by check documentation, i mean check sources where is more accurately explained the use of properties im speaking of, such as w3schools and MDN web docs
I cannot assist you further as i dont have your code in working page in front of me to see where the issue comes from, so far i only guessed what it could be

Now I have uploaded the code. Not sure how to upload the image though:

https://codepen.io/-Noob-/pen/rNjGamO

So what happens is that my image shows up as it should. Although it looks strange on codepen, because it is only a square with no image inside it. But what I want is for the text to “flow” around the image when it appears. As you can see now it is behind and under the image. And that means you can’t see it when the image appears.

How can I make the text flow around the picture when it appears instead?

Can anyone teach me how to make the text flow around the image?

You only have that image locally on your computer, and you can’t upload images to Codepen. For demonstration purposes, you can take an image from the internet (unsplash.com or pixabay.com) and use the URL as src, for example:

<img src="https://images.unsplash.com/photo-1618080621010-74e7832a27a4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" />

As for the text flowing around the image, I have difficulties to visualise what you’re trying to do, can you maybe post a picture to show what you’d like to happen when the image is visible/not visible?

If the image is left or right of the text block, the image should normally take its space and the text shouldn’t flow into it (unless the image is set to position:absolute). But if you want the image to appear in the center and the text to flow left and right, I don’t think that’s possible.

Ok

In this article they talk about this.
https://www.homeandlearn.co.uk/WD/wds4p6.html

But that don’t seem to work when it is a popup image like mine that arises from “onclick-javascript”. When I do it and the image appears from the onlick, the text behind it is still there and does not “flow” around the image. I want the text behind to “flow” or “wrap” around my image-popup. I don’t want it to be behind the image when it appears. This means that when the image appears, from the onclick, I want the text-paragraphs in that page to flow around my image on the sides. So that all of the text is still visible.

But if my image appears on top of the paragraph, like now, the text gets hidden behind the image. If you know what I mean? Which means it is not possible to read and the user experience is a bit screwed. Also it looks weird :slight_smile:

It doesn’t matter that the image appears after a click event, the styles are coming from CSS. As mentioned, if you set the image to position:absolute, the text will disappear behind the image. It needs to have either position:relative or position:static.

The image already has a class and a position of absolute. It is not working for making the text appear around it though.

I can only repeat myself… if the image is set to absolute, the text will disappear behind it…

Ok I will repeat myself also. The image is set to absolute already. I don’t know why it is not working.

This image, which is appearing on an onclick, has position absolute. Perhaps you are missing something or I am. I have no idea:

if it’s set to absolute, the text disappearing behind it is the expected behaviour, you need to use a different value than absolute

I have tried relative is well. But it is still behind it. Maybe I could add something to relative or something?

Thing is that the image should appear onclick. Through Javascript. So maybe that is why it is not working?

So I want the text to wrap around the image onclick. But the text should not wrap around the image when the image is not appearing. So before onclick it should not wrap around the image.

Thanks @ilenia I was running out of ways to express it.

@O.w I think you’ll get what’s happening if you experiment with different values for position, basically switch between absolute and static and it’ll be obvious to you what they do.

To make text flow around an image, maybe this article can help: Wrap Text Around Images Using CSS Float and Padding

Thing is it is an onclick. It should only wrap around the image when visitors click for it to appear.

Thanks ieahleen. But none of the positioning stuff works unfortunately. Maybe because of the Javascript or something?

more likely it’s that it is not so simple implementation. An element is a rectangle, including p elements, so you can’t have the image inside a single paragraph element, but maybe you can insert it between two paragraphs, or find something else you would like to do

1 Like