I have a javascript method that runs, which hides certain parts of the screen, based on some values, which are sourced from a property in my MVC view model.
<body onload="TransferAmountDisplayToggle(#Model.EntityEventTypeId)">
When the screen loads, all controls are visible for around half a second, and then the controls hide, and the screen is ready.
Is there anyway to stop this from happening? i.e. Not show the screen until the javascript is complete?
You an hide the body with the visibility: hidden;
<body style="visibility:hidden;" onload="TransferAmountDisplayToggle(#Model.EntityEventTypeId)">
Then at the bottom of the TransferAmountDisplayToggle() JavaScript function, add:
$('body').css('visibility', 'visible');
Modifying display instead of visibility is an option, but I prefer to use visibility because sometimes there's JavaScript code that needs to check the width/height of elements and using display: none; can mess that up.
Related
Can I detect the width of a dynamicaly filled div box without rendering it on the web page?
<div>{{some.data.from.some.model}}</div>
If I render it, I know it's width is 260px (in every modern browser).
Can I detect it, before it is rendered on the web page? Are there tools, mechanisms, libraries to do that?
My Imagination is:
That is the div box width this class (margin, padding, whatever)
This is the content (text, font, fontsize, whatever..)
Tell me it's width
Don't show it on the homepage yet, I'll decide afterwards
You can't get the size of an element that doesn't exist (hasn't been rendered). Any solution you find to calculating an element's size without it being rendered is probably not going to be cross-browser.
So, the best you can do is render said element out of view, be it via "visibility: hidden", or pushing it out of view with "display: fixed". Once you have an actual element, you can check it's size for the current browser via JS and proceed accordingly.
I have created a simple fiddle here: http://jsfiddle.net/5wq8o02q/.
HTML
<div id="playground" class="block">
some content
</div>
<span id="width"> </span>
CSS
.block {
/* width: 100px; */
height: 100px;
}
JQUERY:
$(function(){
//$('#playground').css('visibility','hidden');
$('#playground').css('display','none');
$('#width').html($('#playground').css('width'));
});
It helps to use display: none and it won't use screen real estate as visibility: hidden. It still gives the width you are looking for (I think). Let me know me it helps ...
I'm curious if it expected behavior to do reflow when hiding absolutely positioned element?
Consider example code below:
<html>
<head>
<style>
.float {
position: absolute;
background-color: #E0E0E0;
padding: 5;
left: 100px;
top: 100px;
}
</style>
<script>
function toggle() {
var float = document.getElementById("float");
var style = float.style;
if (style.display == "none") {
style.display = "block";
} else
style.display = "none";
}
</script>
</head>
<body>
Click to toggle!
<div id="float" class="float" style="display:none">Floating div</div>
</body>
</html>
When I check Timeline tab in Chrome Dev Tools I see the following:
Line 23 corresponds to style.display = "none"; and my expectation is that no reflow is required.
Am I wrong? Or did I misinterpret Timeline results? Is there a better way of doing this?
Thank you!
There is a reflow. When you change the display of an element, the browser needs to perform layout operations. Maybe you're confusing the idea of a layout pass, with a layout pass that affects the whole document. In your case, I think the layout affects only the .float element. You can see it clicking in the layout bar. It'll tell you the scope of the layout.
Contrary to what it may seem, hiding an absolute positioned element can cause a reflow of the whole page. This can happen, for example, if the positioned element is higher or wider than the browser viewport. In this case, hiding it could cause the scrollbars to disappear, and, as a result, a reflow of the whole document.
Each browser has its own methods to determinate whehter a whole document reflow is needed or not, so what works in a browser may not work in another. You have a good article here: Introducing layout boundaries
EDIT: As #xotic750 said, you can avoid the reflow setting visibility: hidden. This causes the browser to avoid painting, but to the layout engine, it'll be there. This way it won't be a reflow when you show/hide it. The downside? Every time there is a reflow for another reason, the contents of your invisible div will be part of the layout process. If the div's DOM tree is simple, maybe playing with visibility is better. But if the div contains lots of objects, specially tables, I think you should use display: none. It'll also depend, of course, on the time the div is supposed to be visible or hidden.
I have a webpage that has one <div> with overflow-y:scroll; and for some reason my webpage is showing a vertical scroll bar. When I scroll down the page it's just blank, but it appears to be compensating for the div content because when I scroll to the bottom of the div, the webpage scroll bar disappears.
CSS:
#wrapper {width:1227px; height:400px; overflow-y:scroll;}
HTML:
<div id="wrapper">
<table>
<tr>
<td>
<script>
// Create the datePicker
datePickerController.createDatePicker({
// Associate the three text inputs to their date parts
formElements:{\"" . $emp_query['Emp_ID'] . "\":\"%Y-%m-%d\"},
// Disable the fade effect
noFadeEffect:true,
// Show week numbers
showWeeks:false,
// Set a statusbar format
statusFormat:\"%l, %d%S %F %Y\",
//Highlight Certain days
highlightDays:[0,0,0,0,0,1,1],
});
</script>
</td>
</tr>
<!-- Repeat the above cells many more times -->
</table>
</div>
I don't know if it's meant to do this, but I don't want it to because it just leaves a bunch of blank page below it, is there something I can do?
EDIT: I figured out the problem is caused by a date picker javascript widget that I have within the table. Code updated and here is the link to the widget: DatePicker.
I tried to create a fiddle with all of this, but it kept freezing up and the script stopped running. Is this normal when there is a script running inside the <div> like this?
EDIT: To clarify, what I want is to have a <div> with the viewing area limited to 400px high and to get rid of the extra blank space below it. When I remove the Javascript datepicker widget, everything works as it should, but for some reason the Javascript is causing the webpage height accommodate the hidden content of the <div>.
have you tried to change the overflow to "hidden"?
Its having vertical scrollbar because you have asked for y-scrollbar.
try sumthing like
#wrapper {width:1227px; height:400px; overflow:auto;}
css & html is sufficient enough to handle an overflow.
Setting overflow-y to auto will show a scrollbar only when it is needed:
#wrapper { /* ... */ overflow-y: auto; }
Alright, the problem has been solved...by the datepicker developer, Brian McAllister. In the CSS of the datepicker there is a class set for the :link and :visited, here is a snippet:
.date-picker-control:link,.date-picker-control:visited {
display:-moz-inline-stack;
}
When the display is changed to:
.date-picker-control:link,.date-picker-control:visited {
display:-moz-inline-box;
}
The problem goes away. Thanks Brian!
I used jQuery shown here (https://stackoverflow.com/a/6967175/1130782) to get the links on my page to show/hide 3 different divs, as seen here: http://ikstudio.squarespace.com/lightfield/
I needed all of the divs to be hidden initially, so I removed the #showall function and added
jQuery('.targetDiv').hide();
to hide all the divs initially. Doing this broke the javascript gallery I am using inside of .
I am assuming that this is because the page loads with that div hidden and the gallery script can not properly position everything it needs to.
Is there anyway to resolve this?
Thanks
Can you not hide them with CSS?
.targetDiv {
display: none;
}
I have an HTML Document that looks a bit like this, only is far more complex and harder to control:
<body>
<div id="title">This div does not do anything, just stays at the top.</div>
<div id="container">
<div id="navigation">Some navigation</div>
<div id="content">Most of the content</div>
</div>
</body>
Then I have a stylesheet that includes the following:
#container
{
height: auto !important;
overflow: visible !important;
overflow-x: auto;
overflow-y: scroll;
position: relative;
width: auto !important;
}
This all works absolutely perfectly. The title section stays at the top of the page, the container div becomes scrollable if the content is long enough to need to scroll, otherwise it doesn't.
The problem is, that I am then using Javascript to add a whole lot more stuff to the content div. This means that the content div is getting longer than the page after it has loaded and this seems to mean, in IE8 at least, that the scrollbars on the container never get activated, so once the Javascript added content falls off the bottom of the page it becomes inaccessible.
It doesn't help that the minute I start tinkering with the IE developer tools, the scrollbars vanish altogether and I can't make them reappear, so it becomes somewhat hard to test.
I know IE8 has some issues with overflow-y.
You should try with this maybe.
-ms-overflow-y: scroll;
Hope that helps.
Hard to say if this will work without seeing more code, but why not remove the styles from your css and add them with javascript, once the content has loaded.
The solution that has worked was a simple hackaround of resizing the element with JavaScript to match the size it actually is once I have added the extra data to it, like this:
document.all['container'].style.height = document.documentElement.clientHeight+"px";
Of course, this doesn't entirely circumvent the problem- for that we need a new function:
function resizeResults()
{
var resultPanel=document.all["container"];
var topPanel=document.all["title"];
var newHeight= document.documentElement.clientHeight;
newHeight -= topPanel.clientHeight;
resultPanel.style.height=newHeight;
}
Then we can use window.attachEvent("onresize", resizeResults); to ensure that we don't lose the scrollbar or have it otherwise messed around when the user changes the window size.
Just remove the styles you have given for the element to make it scroll before loading ajax content to it.After loading ajax content then add those attributes again.