I'm having a strange issue with
I've created a fiddle at
http://jsfiddle.net/alexjamesbrown/oqu54cav
In the source, there's a <li> element at line 153 that says 'THIS SHOULD BE VISIBLE'
However, when initially running it, it's not visible in the scroll window.
If I resize the window, even a tiny bit, the rest of the items are visible as expected
I'm struggling to see a) what is causing this, and b) why it fixes itself on resize?
If you turn off prettycheckable, you can see that the problem doesn't happen. I believe this is happening because the scrollbar plugin reads the height of the div before the checkboxes are made larger by the prettycheckable plugin. So the height of the div is set, the scrollbar is generated, then the checkboxes are enlarged with the other plugin.
Right now you are styling the heights for the generated elements. Those only come into play once the javascript has evaluated. In order to fix this, you need to style the elements in the real html. For example, this solves your problem:
.overview li {
height: 2.5em;
}
Because the .overview li is there before the checkboxes are "prettyfied" and then when they are generated, they don't make that element any larger.
Related
I got a centered Layout including a max-width and margin: 0 auto;. Furthermore i am currently using Isotope for filtering and sorting a grid.
The Problem is: There is the possibility that the height of the body / main container becomes smaller than the actual window height and therefor of course removes the scrollbar, since the body has overflow: hidden. The centered layout jumps (because of the margin: 0 auto), which doesn't look very great.
The Question: Is there a callback function from Isotope where i could test if the scrollbar is shown or not? Or is there even a possibility to bind a function on the body when the scrollbar disappears? what is the best method to check if there is a scrollbar visible or not? (EDIT// as suggested an easy method is $(document).height > $(window).height, now i just need a triggered event to call the if statement)
Thanks in advance!
EDIT here is a LINK TO FIDDLE to play around
I've got a webpage with a full-screen canvas. Over the canvas I'm going to place and position divs that will contain UI elements for the canvas. I'm using jQuery to create the divs and give them the css style they need. I also re-position and/or re-size them in JavaScript upon window re-size. The problem is, as soon as I enter even one space into a div, FireFox says 'NO!' and seems to ignore any css changes made by JavaScript, even if I remove the content of the div again.
Here's some technical details:
The div I'll show is a fullscreen div that overlays the canvas and functions as dim-screen in case there are dialogs the user has opened so the canvas appears darker and extra attention is pulled towards the dialog.
The css I'm using is:
.ui_layer {
position: absolute;
top:0px;
left:0px;
}
#ui_layer_dim {
background-color: #000000;
opacity: 0.5;
}
In JavaScript I have my own function that creates the div, but it runs this jQuery:
$("<div id='ui_layer_dim' class='ui_layer' style='z-index:1'/>");
Then, on onWindowResize (tiggered by a window 'resize' eventlistener), I change the div's width and height to fit the new window size:
gameUI.layers["ui_layer_dim"].onWindowResize = function() {
this.css("width", window.innerWidth + "px");
this.css("height", window.innerHeight + "px");
};
In Chrome this works perfectly, even if I place content in the div. FireFox works, but only when the div is in it's initial state. One change to the div's contents and 'BOOM it goes': No more dynamic sizing.
I've tried the different css position settings, tried setting the width and height attributes using the css function, using the style function of the element and using setAttribute to see if it's caused by some sort of incompatibility; the results didn't change.
I've run a series of tests to see what happens to the html as soon as content is placed into the div and noticed something weird: The inspector and css rules won't show changes to the width and height of the window's innerWidth and innerHeight. Neither does the div itself, but I've set up some logging to view info about the window's innerWidth and innerHeight before setting the div's width and height and some logging about the div's width and height after setting it, and that actually shows the correct dimensions...
After building and testing the system for several days I have no clue anymore what could cause the problem. Like I've said before: Chrome works as it should so I know my code technically works, but it might just be that a different approach is needed to make it work in FireFox. I hope anyone knows. Help would be greatly appreciated!
Edit: Here's a fiddle with the code, try running in FireFox, resize the result, it should resize the grey div as well. Now, right click the result, go to the inspector and put some text or even a space inside the div and resize again. Not working for me. Link: http://jsfiddle.net/UsLL6/
Edit 2: Here's a screenshot that will hopefully clear up the problem I'm having. Marked yellow is the initial state of the browser width, I set it to very narrow to be able to show the problem more clearly. Marked orange is the state after I made the browser wider a bit. You can see the grey div doesn't resize with it as it should, neither do the inspector value and the CSS rules value, but the console shows the correct value. The first ("Setting property:.....") was retrieved from window.innerWidth, the second ("Property height now has....") was retrieved from the actual width property from the div element using style.getPropertyValue.
Just noticed IE gives the same result as FireFox, but yea..IE....
Is your gameUI.layers known by mozilla?
Did you try the jQuery solution?
$(window).resize(function(){
$('#ui_layer_dim').width(window.innerWidth);
$('#ui_layer_dim').height(window.innerHeight);
});
When adding and removing content from the div using JavaScript it works. Even though the problem does not exist for me anymore I'm still very confused by the fact that editing the div in the FF inspector creates such a weird result.
Similar question, without a great answer:
How can I include the width of "overflow: auto;" scrollbars in a dynamically sized absolute div?
I have a <div> of fixed height that acts as a menu of buttons of uniform width. Users can add/remove buttons from the menu. When there are more buttons than can fit vertically in the <div>, I want it to become scrollable - so I'm using overflow-y:auto, which indeed adds a scrollbar when the content is too large in y. Unfortunately, when the scrollbar shows up it overlaps the menu buttons, and adds a horizontal scroll bar as a result - the big problem is it just looks horrible.
Is there a "right" way to fix this? I'd love to learn some style trick to make it work right (i.e. the scrollbar sits outside the div rather than inside, or the div automatically expands to accommodate the scroll bar when necessary). If javascript is necessary, that's fine - I'm already using jQuery - in that case, what are the right events are to detect the scrollbar being added/removed, and how do I make sure to use the correct width in a cross-browser/cross-style way?
JSFiddle: http://jsfiddle.net/vAsdJ/
HTML:
<button type="button" id="add">Add a button!</button>
<div id="menu">
</div>
CSS:
#menu{
background:grey;
height:150px;
overflow-y:auto;
float:left;
}
Script:
$('#add').button().click(function(){
var d = $('<div/>');
var b = $('<button type="button">Test</button>');
d.appendTo($('#menu'));
b.button().appendTo(d);
});
First: To remove the horizontal scrollbar set overflow-x: hidden; as Trent Stewart has already mentioned in another answer.
CSS Approach:
One thing I have done in the past is to add a wider wrapping div around the content div to make room for the scrollbar. This, however, only works if your container width is fixed... and may need to be adjusted (by serving different styles) in various browsers due to variable rendering of scrollbars.
Here a jsfiddle for your case. Note the new wrapper <div id="menu-wrap"> and its fixed width width: 95px;. In this case the wrapper div is doing the scrolling.
You could probably also solve this by giving the wrapper some padding on the right, and thereby avoid the fixed width problem.
jQuery Approach:
Another option is to detect the overflow using jquery as described here, and then increasing the width or padding of the div to make space. You may still have to make browser-specific adjustments though.
Here a jsfiddle with a simplified version for your example. This uses your click function to check the div height after every click, and then adds some padding to make room for the scrollbar; a basic comparison between innerHeight and scrollHeight:
if($('#menu').innerHeight() < $('#menu')[0].scrollHeight){
$('#menu').css( "padding", "0 15px 0 0" );
}
To make this more cross-browser friendly you could check for the scrollbar width (as outlined here) and then add the returned value instead of the fixed padding. Here another jsfiddle to demonstrate.
There are probably many other methods, but this is how I would go about it.
Have you tried simply using overflow-x: visible; or hidden
This should be simple but nothing's working:
Question
How do you set the height of a webpage to be, lets say, exactly 4000 pixels—in such a way that scroll bars exist even when the page is blank?
Background
I'm new to JavaScript/JQuery but very experienced with similar technologies. I'm trying to do some fancy effects based on scrolling the page. To accomplish this methodically, as a first step I'm looking to make a "really tall" page. From there I will hide/display items based on the scroll height with pseudo-code along the lines of:
function onScrollEvent() {
var height = scroll height
var sectionIndex = Math.floor(height / MAX_SECTION_HEIGHT);
for each item in my array of graphics
if item index != sectionIndex then item.fadeOut else item.fadeIn
}
Once I have that working, I'll start creating the effects I want to see. The problem is, I can't make the stupid page "really tall."
Summary
When I set the height style property of the main-content div, it doesn't seem to trigger scroll bars unless there's actual content on the page. How do I make the page "permanently tall," so to speak? That is, I want the page to behave (scroll) as though it has 4000 pixels of content even if there's only one line of text on the page. Right now it behaves as though there's a call to:
height = Math.min(height of contents, height of div style)
Have you tried min-height for body, or html tags? min-height requires the element to be at least that height regardless of the content contained.
CSS
html, body{
min-height: 4000px;
}
Live Demo
Reference
Easy in CSS:
body
{
height: 4000px;
}
Example here.
This is the simplest way. min-height is not supported by all browsers. This is a specific height that you can set to the body tag (essentially the webpage itself) to make it really tall.
In your CSS add:
body
{
min-height: 4000px;
}
And you'll also need:
body
{
height: 4000px;
}
for internet explorer (via IE's conditional comments).
In Chrome 10, on OSX 10.6 -- this renders a complete blank page with scroll on the Y axis, hope this is how you meant:
http://pastie.org/1674432
I am using a div to populate a ul/li list and then draw a jCarousel out of it.
So this works fine:
$('#mycarousel').jcarousel();
Here is the problem:
The div containing the ul/li items could be hidden by the click of another button. When the div is hidden, and I re-size the browser window, the jCarousel also attempts to redraw itself, but since it is hidden, it is not able to draw it properly. The result is that everything is jumbled up in the list (if I click the button again to make it visible). But again if I re-size the window now (the jumbled up jCarousel is NOT hidden now), it redraws itself correctly.
I tried getting ahold of the jCarousel instance and reload itself as soon as the button is clicked to make the div visible (the way it re-sizes itself when it is visible and window is re-sized).
To get the jCarousel, I am using:
JQuery('#mycarousel').data('jcarousel')
and it is returned as null.
How can I get the jCarousel to draw correctly?
What makes you assume that the $().jcarousel() call does anything with .data()? Better to stick with the API provided by the plugin anyway, rather than guessing at how it works under the hood. Anyway, to answer your question...
The problem is that, when a div is hidden, it has no height or width. Use the "off-left technique" rather than hiding the div, like this:
#mycarousel {
height: 100px; /* whatever height your div will have when shown */
width: 100px; /* whatever width your div will have when shown */
position: absolute:
left: -10000px;
}
When you want to show it, use $('#mycarousel').css('position', 'static') to remove the absolute positioning, and the div will jump into place.
A little more info here.
Little more debugging and found that when the browser ressizes (and the carousel is already visible), its reload function is called to adjust its position, so to help myself in the hide/show div scenario, I ended up calling the carousel api's reload function after the wrapping div becomes visible.
a bit of effort was to actually get hold of the jcarousel instance.
so it was a two step process...
get hold of the carousel instance.
var cInstance = null;
cInitCallback = function(c){
cInstance = c;
};
$('#mycarousel').jcarousel({
initCallback: cInitCallback,
});
reload the carousel on the show of the div
cInstance.reload();