CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Kratalin Jan
Kratalin Jan

Reputation: 105

image moved with 1px above on click

So, I use this Javascript for hide - show effect:

function effect(id) {
    var h = document.getElementById(id);
    h.style.display = ((h.style.display != 'none') ? 'none' : 'inline');
}

HTML:

<div class="div">
    <a href="#" onclick="effect('h');"><img src="http://i.imm.io/1jf2j.png"/></a>
    <a href="index.php" class="url" id="h">Home</a>
</div>

and CSS:

.div {
    background: #000;
}
.div .url {
    font-size: 17px;
}

Here you can test (and edit!) the code: http://codepen.io/anon/pen/dhHiw
JSFiddle doesn't work for me.

All is good. Except when you click on image. It's moved 1px above. Should I use another image?
Where is the problem? And possible solutions. Thank you!

Upvotes: 0

Views: 61

Answers (1)

orhanhenrik
orhanhenrik

Reputation: 1415

You are basically removing the text element. Since the <div class="div"> does not have a set height, it depends on the elements inside it. When the text is not displayed (display=none), the div will resize to only the image.

You can fix this by either setting a height for the div, or by setting visibility=hidden for the text instead of display=none. When making it hidden, it still has the same dimensions, but it's invisible instead.

Upvotes: 3

Related Questions