I have a list of anchor elements (it's a page navigator at the bottom of the page). On mobile, the list wraps to two lines. I want to keep it at one line for easier mobile use, and display only the page numbers that will fit within the screen. I don't want to do whitespace: nowrap; or overflow-x: scroll -- I want to have as many elements as possible display on one line without scrolling or disappearing into the horizontal ether.
I was thinking I'd determine the window width with jQuery, and if the width of the list as a whole exceeds the width of the screen, show only the elements on either side of the active page div that will fit on one line. Is there such a thing as "select certain number of siblings"?
I know .siblings() exists in jQuery as well as the CSS sibling selector, but these either select all siblings or only the one immediately adjacent sibling. I want to dynamically select the siblings on either side of the active element (page) depending on screen size.
Without any code, it's hard to tell exactly what you're doing. But I would use whitespace: nowrap; so that the elements are as wide as they can be, then you can loop through them and compare their width to the viewport or container width, and selectively hide them. (or alternatively, hide them by default with opacity: 0; or visibility: hidden; and only show the ones whose widths are less than the container/viewport). Something like this:
var cw = $('.container').width();
$('footer li').each(function() {
if ($(this).width() > cw) {
$(this).addClass('hidden');
}
});
You can set the width of each element to window width/number of items
var numberOfAnchors=$("a").length;
$("a").css("width",$(window).width()/numberOfAnchors+"px");
but make sure that the anchor display is different to display:inline
Related
I have a 3 column layout where I want the left and right columns to be collapsible. I want the following:
A smooth slide
Sidebars that have a percentage width
No visible reflow on the sidebar content
No white-space: nowrap;, as this will mess with the display of the sidebar content.
Allow for complex content inside the sidebar, not just simple text in a <p> tag as in the codepen example below.
No hardcoded pixel widths - I know you can add a width on an inner div together with overflow:hidden on the parent, but I don't want to hardcode a large width.
I need the sidebar widths to be relative to the immediate parent (and not the viewport), in case the 3-column layout needs to be within a section of a page (in fact in my scenario that's the case).
Note that the I've tried transitioning on the width property in this codepen, but you can see the visible reflow of content inside the sidebar. Here's a .gif of it:
Ideally I'd like to do this without using JavaScript for the animation, but I'm open to it if there are no other good solutions.
One way to do this I would say is to give a % based width to your pabel-content.
Add these two properties to the class like this
.panel-content {
min-width: 300px;
}
This should remove the wrapping while animation.
I have something like a carousel with elements inside of a container with overflow: hidden
I can scroll left and right and I want to determine which elements are not visible at all or only half is visible (like on this picture) and when add to this invisible and half visible elements a class.
Width of each element is for example 100px but width of container depends on screen size. I can get number of elements which are visible (by dividing offsetWidth of container by width of one element)
Alse I know that there is such thing as getBoundingClientRect() but not sure how to use it in this case.
example
Here you can see how I try to implement getBoundingClientRect but I can't figure out which elements to target. I want to add class to the div which is partially seen (4th) and if on the first click part of the first div would be seen - to it too.
One of the divs which i want to display dynamically has to fit to screen. The problem is that if the earlier displayed div has height more than the screen height, when the dynamic div is displayed in the bottom of the page(after scrolling) there is some part of the earlier div still remaining. I dont want any trace of the earlier while displaying the dynamic div. Also i have to achieve this only by using javascript.
to place an div or any element one above another use position:absolute,top:0; left:0 and width and height to 100%
get the div out of your other divs, but still in the body and make it not visible "display:none;"
Give it some attributes, like Mardzis said, height : 100%; width : 100%; z-index:9999;
Then, when you want to display it, just do .show() or .hide() (with jquery if you use it) or .getElementById('#yourDivId').style.display = "none"; .... & so on...
I found a workaround for this.Put focus on the child div and disable scrolling.
Lets say I have a horizontal navigation bar that can have an arbitrary number of items in it. Now let say this page has a width of 1000px and all the items if displayed would be 1300px. Now what I would want to do is to take whatever elements are causing it to extend beyond the 1000px and put them into a drop down menu. The issue I am having is what is the best way to figure out how many element I would need to take to make sure everything fits in the window when the window width can be changed (if the user changes the window width, the number of elements in the drop down would increase or decrease) and the navigation element widths are random?
Something similar to google plus's side navigation, just horizontal instead fo vertical.
Put the navigation elements in a parent div whose overflow is set to hidden so the extra nav elements are hidden.
Then, find the items that are hidden using jquery and append them to your dropdown menu. See answer to this question: jQuery: How to get content not visible with overflow: hidden?
See my working example: http://jsfiddle.net/zSXTb. The basics:
var h = $("#container").height();
$("#container").find("div").each(function() {
if ($(this).position().top > h) {
$(this).clone().appendTo($("#extrasContent"));
}
});
Run this onload and when the window is resized.
Try using #media queries with the css - you get a lot of control regarding screen size. For example:
#media all and (max-width: 1000px){
/*insert normal css. e.g.:*/
body{
width: 700px;
}
}
You can use min-width instead of max-width.
I have a table that represents Tab-structure.
Some cells are set to display: none; and only the active tab is displayed.
I want to set the max-height to all of them.
To do it, I go through the array of tabs and do the following
// get the max-tab-height
for (var i = 0; i < TabPageList.length; i++)
{
// get max height
if (TabPageList[i].offsetHeight>MaxTabHeight)
MaxTabHeight = TabPageList[i].offsetHeight;
}
The problem with this approach is that offsetHeight is working only for the active tab that is displayed.
So, what's the Height of the ones that are not shown, when they will be shown?
Because the inactive tabs are set to display:none, the offsetHeight is not useful. Try running your MaxTabHeight routine at the same time that you activate the tab, after it is made visible. I'm assuming that's inside the tab's click event.
Try using visibility:hidden (not display:none). As I recall, using visibility elements are just hidden but keep their dimensions.
For usability, the tabs shouldn't be set to hidden with CSS. (There are still the small percentage out there that has js disabled). If you run through the tabs, reading their height, while hiding them, you can easily find the tallest tab. And at the same time make your site more user-friendly (:
And if you don't want the hidden cells to collapse, you could also use visibility:hidden; like stated above.
As the others have said you may get the height by setting the visibility to hidden (which makes the object keep its dimensions while hidden):
visibility:hidden;
with the additional trick of setting its position to absolute to avoid it taking space on the page (you may do this just for the time needed to get at the height, restoring its position attribute afterward).
A second approach may be to keep the tab visible but move it off the page by setting its absolute position to some sufficiently large coordinates.