Prevent divs from wrapping, but do not add default scroll - javascript

Alright, so I'm a little puzzled about this: as you can see on the site for the Polymer Project, they have tabs that are horizontally scrollable if there are too many. I'd like to replicate this effect, but I can't figure out how to both prevent the <div> elements for tabs from wrapping as well as scrolling. Obviously, JS will need to be used here. Unless it's possible to get a custom scrollbar?
How can I do the above? A non-jQuery solution would be very much preferable.

Should be able to use plain JavaScript or jQuery to compare the calculated width of the inner div to the set width of the outer div. If #inner is wider than #outer, add a class to one of the divs to change how they're displayed. If not, remove the class.
The markup:
<div id="outer">
<div id="inner">
<div class="scroll-button"></div>
<!-- your tabs here -->
<div class="scroll-button"></div>
</div>
</div>
The styling:
#outer{
width:500px;
overflow-x:hidden;
}
#outer .scroll-buttons{
display:none;
}
#outer.has-scroll-buttons .scroll-button{
display:block;
}

Give the divs a fixed height and dynamic length. Where the length property of the div is made by counting the number of columns you want in a div.
Why the aversion to jquery?

Related

Reorganizing divs vertically with jquery

I have 5 divs going vertically down a page.
I want to be able to click any one, and have it move to be the first div in the order, the top of the "list" in a way. In a perfect world, the others would dim/decrease opacity and the clicked one would slide/animate up to the top while the others bumped down. But, that can come later. I've seen div-reordering done with CSS, but that's not continuously dynamic on the page.
I tried putting all 5 divs inside a container wrapper and doing this in css:
#wrapper { display: table; }
with this javascript (example for clicking second div):
$('#secondDiv').css("display","table-header-group");
$('#firstDiv').css("display","table-row-group");
$('#thirdDiv').css("display","table-row-group");
$('#fourthDiv').css("display","table-row-group");
$('#fifthDiv').css("display","table-row-group");
but that messed up my rounded corners on the div, my alignment, and other parts of my existing css.
This seems like it shouldn't be that hard, but I can't figure it out. Thanks for any help!
A very simple solution: move the element to the top using jQuery's prepend() to the parent element.
$("div").click(function() {
$(this).parent().prepend($(this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Div1</div>
<div>Div2</div>
<div>Div3</div>
<div>Div4</div>
<div>Div5</div>
<div>Div6</div>
<div>Div7</div>
<div>Div8</div>
<div>Div9</div>
<div>Div10</div>
$('.reorderable').click(function(){
$(this).prependTo(this.parentNode);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="reorderable">first</div>
<div class="reorderable">second</div>
<div class="reorderable">third</div>
<div class="reorderable">fourth</div>
<div class="reorderable">fifth</div>
</div>
Look at the jQuery UI tools that enable sortable displays.
Your end goal seems to be consistent with this jQuery UI feature.

How to animate the movement of inline-block items on page resize (ideally using css)?

HTML
<div class="mosaic_tile" style="background:rgb(255,0,0);">
</div>
<div class="mosaic_tile" style="background:rgb(0,255,0);">
</div>
<div class="mosaic_tile" style="background:rgb(0,0,255);">
</div>
CSS
.mosaic_tile{
width:100px;
height:100px;
display:inline-block;
}
https://jsfiddle.net/suse008b/
Notice how when the width of the page is less than the total width of the elements on a said line an element is moved to the next line. Is there anyway for me to animate the movement of the elements as they reblock?
Edit:
I found an example. Something similar to the portfolio portion of this webpage.
http://www.socialfix.com/
On the example site you mentioned they are using a javascript library called Isotope for that effect.
http://isotope.metafizzy.co/

Content behind Position: fixed is intractable

I have following setup:
<div class="wrapper">
<div class="element" id="first"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
...
</div>
so wrapper is set to overflow-x: auto and content that overflows it is horizontally scrollable. #first div has fixed position and more styling applied, but essentially it is always visible and other divs scroll behind it, like this:
issue here is that I'm using drag and drop functionality which works fine, but once I try to drop stuff on a fixed div and if it has content behind it, the drag and drop happens to that content. Basically feels like I'm interacting with stuff behind fixed div even though it is in front. I know fixed elements are out of the flow and maybe this is whats causing it? But I can't figure out how to make content behind that div stay behind it.
Well... It maybe because fixed elements are out of the flow.
You can try setting the element with id first as absolute and giving it a high z-index value. A high value of z-index will make it stay on top of other elements.
So when others scroll it will remain at that position.
Try plaing with ay pointer-events: none; in CSS

Set the scrollable height of an entire page regardless of content?

Is there a way using css and html to control the maximum scrollable height of a page, regardless of the content which is present on the page?
For a concrete, hypothetical example: say the <body> is incredibly simple - a <div> which is 5000px tall. How would you set the scrollable height to be only 2000px?
Thus it would appear that the 2000th pixel is the last pixel on the page. The browser's scroll bar would appear to be at the bottom, not just "stuck" halfway down the page. Am I missing something simple to achieve this behavior? I would prefer pure css/html because it seems like it should be doable, but I would accept js.
You can do something like this
HTML
<div class="outer">
<div class="inner">
<!--your content here-->
</div>
</div>
CSS
.outer {
height:2000px;
overflow:auto;
}
.inner {
height:5000px;
overflow:hidden;
}
You should set the body height to a specific number and set overflow to hidden.
body{
height:2000px;
overflow:hidden;
}
Made an example here
Use max-height or height css properties and overflow:hidden on your container element. It will hide everything that is greater than the height you specify, therefore limiting the scrollbar height.
I should also mention that you can use overflow-y:hidden will achieve the same thing, but will only affect top and bottom edges of an element. See more details here.

How can I prevent one div from overlapping another on resize?

Here's an example: http://la.truxmap.com/truckpage?id=coolhaus
When I make the browser window narrower from the right hand side, the recent tweets div will go underneath the container div. i want to make it so that the recent tweets div can go no further left than the right hand border of the container div. Ive been trying to figure out if it can be done with css, but i cant seem to get it. is there a simple javascript solution that fits the bill?
Thanks!
You can either choose to work with a liquid layout or use the css property position.
Liquid layout:
You got 3 DIV's in your wrapper divand you want them to resize on a smaller browser window, you can do this with percentages that become variable widths :
css:
.wrapper {
width:100%
}
.divleft {
float:left;
width:20%
}
.divmiddle {
float:left;
width:60%
}
.divright {
float:left;
width:20%
}
html:
<div class="wrapper">
<div class="divleft">left</div>
<div class="divmiddle">middle</div>
<div class="divright">right</div>
</div>
As i said, the other possibility is the assigning the css property position to your different DIV's.
Try it yourself, its fairly easy:
http://www.w3schools.com/Css/pr_class_position.asp
You can also keep them from overlapping vertically:
.noOverlap{
float:left;
width:100%;
}

Categories