Member Avatar for Niloofar24

Hello.
There is a button in the page when i click it, a div will appear or disappear by toggling to the left and right.
I want when the page loaded, user can only see the button and have to click to appear the dive.
But the problem is that when the page loads, the dive is appeared on the page and user doesn't have to click the button to see the content of the hidden div.
What can i do for that?
I want the div to stay hidden till user click the button to make it appear, not be appeared by default!

Edited by Niloofar24
  • 5 Contributors
  • 9 Replies
  • 529 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by lps

Dani AI

Generated

The underlying cause is that the script locks the paragraph to whatever dimensions it measured when the page loaded. If that measurement happens while the element is hidden, the width/height will be zero and the paragraph gets forced into a tiny box (which explains why only "Welcome" shows). This matches the hints from and the quick fix suggested by : don’t pre-set the element’s inline width/height unless you actually have correct measurements to use.

Two practical approaches:

  • Easiest: remove the manual sizing and let the container size itself (the simplest fix already demonstrated).
  • If you must measure before animating, measure without exposing the element by rendering it off-screen and invisible, then restore its original styles. Example helper (jQuery) that measures a hidden element safely:
function measureHidden($el) {
  var old = {
    position: $el.css('position'),
    visibility: $el.css('visibility'),
    display: $el.css('display'),
    left: $el.css('left')
  };
  $el.css({ position: 'absolute', visibility: 'hidden', display: 'block', left: '-9999px' });
  var dims = { w: $el.outerWidth(true), h: $el.outerHeight(true) };
  $el.css(old);
  return dims;
}

Better modern pattern: avoid locking sizes and use CSS transforms/transitions for the slide. Move the panel off-screen with transform and toggle an open class — GPU-accelerated, smoother and doesn’t require measuring. Also consider white-space: nowrap or display: inline-block on the greeting if you want it to stay on one line.

Quick debugging checklist: inspect computed styles in DevTools to find leftover inline width/height, test after fonts load (web fonts change measured widths), ensure overflow is correct, and remove any temporary inline sizing after the animation completes. These steps resolve the collapsed/wrapped text without forcing layout hacks.

Recommended Answers

All 9 Replies

Member Avatar for gentlemedia

Use CSS or JS first (on page load) to hide it, but which method or properties depends on how you want to show it on click.

What do you have so far?

Member Avatar for Niloofar24

This is my code.
How can i hide it by css or js first?

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
body{
margin: 0;
}
/***************************************************************/

@font-face {
    font-family: 'secondFont';
    src: url('DancingScript-Regular.otf');
}

h2 {
font-family: 'secondFont', sans-serif;
font-size: 20px;
}

/***************************************************************/

.nav {
float: left;
margin-top: 5px; /* Added to dont overlap result box */
width: 100px;
height: 70px;
text-align: center;
background-color: #C2FFC2;
border-radius: 20px;
border: 2px dotted #C2FFC2;
}

.text {
overflow: hidden;
float: left;
margin: 5px;
padding: 5px;
width: 400px;
border-radius: 20px;
border-top: 2px dotted #C2FFC2;
border-bottom: 2px dotted #C2FFC2;
}

.text > p {
font-family: 'secondFont', sans-serif;
font-size: 20px;
margin-left: 10px;
}

#js-greenbox1 {
position: absolute;
z-index: 2;
width: 600px;
margin-top: 30px;
}
</style>
</head>
<body>
<!-- ************************************************************* --->

<div id="js-greenbox1">
    <div class="nav"><h2>greeting</h2></div>
    <div class="text">
    <p>Welcome guest!</p>
    </div>
</div>

<!-- ************************************************************* --->

<script>
$(function(){
    $('.nav').click(function() {
        $('.text p').css({
            'width': $('.text p').width(),
            'height': $('.text p').height()
        });
        $('.text').animate({'width': 'toggle'});
    });
});
</script>

</body>
</html>
Edited by Niloofar24
Member Avatar for jstfsklh211

use css display: none; will hide elements

Member Avatar for Niloofar24

Yes it works, thank you .

Member Avatar for Niloofar24

, i found a problem that i didn't attention to it before.

Without using display: none;, the output was like this:

And the only problem was appearing the div befor clicking the button by default when the page loads.

But now with using display: none;; the output is like this:

Now when the page loads, the div is disappeared by default and user have to click the button to appear the div by toggling, and it's ok.

But the problem is that as you see in the second picture, the height of the div is less than before and also the text in the div is broke down. The text was "Welcome guest!" but the only word is able to see is "Welcome".

If i set an amount for div's height and make it more higher, then the word "guest!" will be appeared under the word "Welcome".
Something like this:

Welcome
guest!

Anyway, who can i fix it? What is the problem? Why it happend?

Edited by Niloofar24
Member Avatar for Niloofar24

So there is no answer?!

Member Avatar for jstfsklh211

elements with display none set have no high/width

you'd need to remove the display:none; before can resize/toggle

with what you have now it looks like your setting each p to 0:height/width
which is whats killing everything for you

Member Avatar for lps

Remove your code of

$('.text p').css({
    'width': $('.text p').width(),
    'height': $('.text p').height()
});

I tested with the code below combining your css script and it is working fine.

$('.nav').click(function() {
    /*$('.text p').css({
        'width': $('.text p').width(),
        'height': $('.text p').height()
    });*/
    $('.text').toggle("slow");
});
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.