This must have an answer already but I can't find it.
My div, which I want hidden on page load shows up for a fraction of a second until I explicitly hide it in the document.ready function.
$(document).ready(() => $("#myDiv").hide());
Short of not having it and re-creating it ($.append / $.add ) or making it the same background color as its background to hide it, how do I ensure that it remains hidden on page load?
You could toggle CSS properties on the div. display: none; prevents the element from being rendered at all, and visibility: hidden; will render it (occupy space for it from the layout), but makes it invisible. When you want to display the element, just remove the property you set.
If you have div which you want to be hidden at the beginning, what you can do is you can hide it by using CSS property. Here is how you can do it:
display: none.
visibility:hidden
or inline css can be given (e.g.
Make sure you know difference before using them. Your 'display:none' will completely hide the element whereas in 'visibility:hidden' a blank space will be there always. Since you are talking about page load here it is:
window.onload = function() {$(div).hide()});;
Use before div
'.' => for class
'#' => for id
Hope this helps!
Related
there is a html page of 400vh height and divided into two parts. I want the first part to be hidden and importantly non-scrollable by having a button
for that, the way once the user clicks the button, second part supersedes the first and the whole hight turns to 200vh so that only the second part is visible and scrollable.
how to do so?
Requirement is not very clear. But I guess you would hide the first div with css
diplay: none
then you would have the second div set as:
overflow-y: auto
And if this has to be done with a button, on click, link a js method which would update the style attributes to the desired css elements.
I want to hide an element as soon as it becomes visible (has loaded).
I have tried using timeout and setInterval. They work fine but they are a few seconds late. So first the element loads and then it disappears.
But I want it so it doesn't appear at all and just disappears without appearing first.
I tried to change the time and make it more/less but it didn't help. Is there another way?
I even tried to put the timeout and setinterval inside window.load it didn't work. I also tried checking when the element is visible by using the length but it was slow too.
window.setInterval(function(){
jQuery("#vz").find('div').first().hide();
}, 600);
You can specify its visibility as hidden (In case you still want it to occupy space)
Or specify its display as none (In case you don't want it to occupy space)
Both of these should be done using CSS, so in your CSS file:
#vz {
//This:
visibility: hidden;
//Or this:
display: none;
}
And as a general role of thumb, initial style should be set in CSS and then you can animate/change it using JS or more CSS
I making bookReader and one page will fit to user viewport. For this approach i make div
<div id="book">Long text...</div>
with
#book {
overflow: hidden
}
Then i provide to scroll this element only with buttons next and prev. When user click next button it will scroll like this
$('#next').on('click',function(){
$('#book').scrollTop($('#book').scrollTop() + $('#book').height());
});
But i have problem. That some times user will see part of text-line. How can i check every page is that last text-line is shown broken, and hide them if him is broken. I don't want to change content. I need a function that will check every page if that contains that part text and if this have that part text, hide him by making on the top element that should hide that.
DEMO: I show in red color what i need find and hide.
http://jsfiddle.net/lvivgeorge/jd7mum6c/3/
DEMO 2: It can contains anything (header tags, img, <code> , etc.)
http://jsfiddle.net/lvivgeorge/jd7mum6c/12/
P.S. Make all the same line-height is not solution. Change content styles is not solution too.
IMHO You should set fixed line-height of each text line, and set container height fixed as a multiple height of each textline. This should helps
Check this out: http://jsfiddle.net/jd7mum6c/5/
I have an Ajax call that inserts a div with several p elements with text. The problem is whenever I click the button to make the Ajax get, the height of the whole container will change because I haven't set a static height (I have set a specific width though) for the container in my css stylesheet.
Whenever I click the button to load the Ajax info, there will be a brief instant where you can see the container gets really small because I'm just replacing the text in the container with other text. Is there a simple css solution for this?
You could consider using the CSS min-height property, which would prevent the container from shrinking to a size too short (http://www.w3schools.com/cssref/pr_dim_min-height.asp). For instance,
#myContainer {
min-height: 600px;
}
Use
min-height:400px;//Whatever height you want it to not get smaller than
height:400px;//Whatever height you want the div to be
so that it doesn't gets small and use
overflow:auto;
so that it doesn't get big instead becomes scrollable when more content received than expected. Using overflow:auto will only show the scrollbars when the content overflows. i.e, when needed.
In case you want the scrollbars no matter what use
overflow:scroll;//Scrollbars will appear by default, even if not needed.
Imagine search bar on html page, it has, say 4 controls on the same line, each wrapped in DIV.
E.g. a few listboxes on the same line:
searchbyX, byY, byZ, byN
After some clicks, some of these controls are hidden, some are displayed (using JQuery).
The problem is that I want each control to keep it's place, but if I hide it's left neighbour, it will move to the left, thus not keeping its original position.
How to show/hide controls keeping their locations the same?
If I understand you correctly,
visibility: hidden
will do the trick.
It will hide the element, but reserve the space it needs.
To make it visible again, remove the property or set a explicit
visibility: visible
Instead of hiding them by setting "display" to "none", set "visibility" to "hidden".