I'm using React, and I centered an element horizontally and vertically using display: table and display: table-cell, with appropriate centering css.
Inside of it I have some content, when I add content to that element with javascript, the whole element recenters properly, but elements jump from their initial place to their next place.
I'd like to animate it in place, is that possible?
Going from this:
<div table>
<div table-cell>
<div>First Content</div>
</div>
</div>
to this:
<div table>
<div table-cell>
<div>First Content</div>
<div>Second Content</div>
</div>
</div>
(didn't include css to make it easy to read)
I'd do this by adding the new elements with a special class like:
<div table>
<div table-cell>
<div>First Content</div>
<div class="slide-in">Second Content</div>
</div>
</div>
Make the special class have max-height: 0. After it has been inserted into the DOM replace the maximum height with some large enough pixel value to fit the contents on screen. Make sure you have a transition on max-height.
.slide-in {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s;
}
Related
So My situation is this, I have a lot of divs... A LOT (over 300) and im using them as part of an interactive background. EDIT:(they all have the same class btw)
The Problem?
Since on mobile I need more divs to fill the page than on desktop, I have too many divs on desktop, meaning you can scroll wayyyyyy more than I want to.
How can I have it so Divs Below a certain point are deleted or (more usefully) how to stop scrolling after a certain amount of pixels.
I literally have no idea how to do this, I've tried experimenting with margins, padding, overflow, position: fixed; but I haven't found a solution so don't pester my "lack of effort"
(some of my accounts have been blocked because I had no legitimate idea what to do and you "cool kids" decided to downvote me enough to get blocked (thanks for that!))
Anyway enough blabbing. Help would be appreciated! Thanks in advance.
You can do 2 things for this:
Wrap all your content in a div and set height to it and overflow-y: hidden.
.wrapper{
height: 1000px; overflow-y: hidden
}
With CSS you can hide the elements after certain number. Like if you want to hide all div after 100
.container .className:nth-child(n+101) {
display: none;
}
This will hide all the divs after 100.
Put all your divs inside a container div and use this css
.container{
max-height:900px; // Set this value to the no of pixel you want to scroll
overflow:hidden;
}
I have set the max-height to 900px cause i want to show only 9 div each div is off height 100px.
SNIPPET
.item {
width: 100%;
height: 100px;
background-color: red;
}
.item:hover {
background-color: yellow;
}
.container {
max-height: 900px;
overflow: hidden;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<!--You cant scroll after that-->
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
</div>
This is my HTML structure:
<body>
<header class="header"></header>
<div class="col-sm-4 sidebar" id="sidebar">
<div class="accordion-1"></div>
<div class="accordion-2">i want vertical scroll for this div without defining height</div>
</div>
<div class="col-sm-8 container no-padding"></div>
</body>
Image 1
Image 2
I have a tow accordian inside the sidebar. So I need a scroll bar in the last red backrounded div if the contents overflows.
Add this to the last red backrounded div it's CSS:
overflow-y: scroll;
Or if you want the scroll bar to appear only if the content overflows:
overflow-y: auto;
I've trying to create something a bit like the navigation on google play, with a fixed number og tabs (the swyping in app-browsing).
I've created a div that contains some content divs.
<div id="container">
<div class="section"> ... </div>
<div class="section"> ... </div>
<div class="section"> ... </div>
</div>
To create the sliding between sections I set the container to a width of 300 %
I then set the left property of the container according to the button pressed.
My question is: How to disable horizontal scrolling of viewport?
You have two solutions:
Wrap #container inside another <div> which has 100% width, disabled wrap and overflow: hidden, then scroll #container inside it, or
Put overflow: hidden on the viewport (or try with overflow-x:hidden);
I am using the tabs feature of the twitter bootstrap v2.2.2 API within divs being displayed using twitter modal (again, v2.2.2 of the bootstrap). The problem is, when I do this the modal dialog changes shape and size as the tabs change.
I have been looking at trying to set the size of the div that wraps the tab panes by interrogating those tab panes and setting the outer div to the maximum size and width encountered from the panes. Problem is, whatever I do I always seem to be unable to determine the size of those panes (I assume because they have yet to be displayed?).
My layout (roughly)...
<div id="ClientEditPanel" class="modal hide" role="dialog">
<div class="modal-header">
<h3>Client details</h3>
</div>
<div class="modal-body form-horizontal">
<ul class="nav nav-tabs">
<li><a class="active" data-toggle="tab" href="#ClientEditPanel_Tab_Personal">Personal</a></li>
<li>Profile</li>
<li>Other</li>
</ul>
<div id="ClientEditPanel_Tabs" class="tab-content">
<div id="ClientEditPanel_Tab_Personal" class="tab-pane active">
...
</div>
<div id="ClientEditPanel_Tab_Profile" class="tab-pane">
...
</div>
<div id="ClientEditPanel_Tab_Other" class="tab-pane">
...
</div>
</div>
</div>
<div class="modal-footer form-actions">
<input type="submit" class="btn btn-primary" />
</div>
</div>
this is further supported by the following CSS...
.tab-content {
overflow: auto;
}
.tab-content > .tab-pane, {
display: none;
}
.tab-content > .active, {
display: block;
}
I am trying to get the panes as follows...
$.each($(".tab-pane"), function () {
...
});
In theory it should then be as simple as setting the width of the parent div to the width of the widest child and the height of the parent div to the height of the tallest child. I want to measure ClientEditPanel_Tab_Personal, ClientEditPanel_Tab_Profile and ClientEditPanel_Tab_Other and set the maximums on ClientEditPanel_Tabs.
Through debugging, I can confirm that my selector is bringing back the right elements "this" clearly represents my first tab on the first pass through the iterator. Having ascertained that though, whichever property of the div that I interrogate is always null or zero. I have tried the following properties of "this"...
clientHeight
clientWidth
scrollHeight
scrollWidth
innerHeight
innerWidth
outerHeight
outerWidth
style.height
style.pixelHeight
offsetHeight
and probably a few more that I have not listed.
Does anybody have any further ideas that I might achieve what I am looking for. I am sure it can be done as I know that JQuery.dialog can automatically size the dialog to the content (including when combined with JQuery.tabs), but I am too far down the road with the twitter bootstrap to change now.
Thanks.
The height and width properties of an element aren't set until the element is rendered in HTML. You can push the container to be off the page, render the content, do some adjustments and then move the content back to the screen. From my personal experience, I would just render the output and then on document ready (jQuery) I would make the adjustment to the page. This should happen very fast and I haven't noticed any adverse affects as long as the number of elements is fairly small.
You can't read dimensions unless it is in DOM. As #Kalpers suggested, render it outside viewport (e.g. append to <body> and have position:absolute; top: -9999px or append anywhere else but add visibility:hidden, then get element dimensions.
so i have a few divs inside divs like this:
<div class="flip-container">
<div class="flipper">
<a href="#" data-reveal-id="pc1">
<div class="inner" style="background-color:#ea6524;">
<p class="text">title</p>
<img src="1.png" class="img" />
</div>
</a>
</div>
</div>
DESCRIPTION:
now the flip-container and the flipper are used because when i hover this div i have a css transition triggered which flips the div.
the href simply allows to open a div with a description when the inner div is clicked
the inner div is a square with inside a text and an image.
WHAT I WANT TO DO:
i would like to hide the text "title" and the img "1.png" when i hover the flip-container.
how can i do this?
i tried to add display:hidden to the class text but it works only when i hover the actual text and not when i hover the flip-container background.
thanks for the help
i would prefer a pure css solution if possible, if not also a javascript solution could do.
This should do the trick:
.flip-container:hover .text, .flip-container:hover img {
display: none;
}
Alternatively, you could use visibility: hidden as this will keep the elements in the document flow, rather than removing them all together.
OP,
In this case, I'd suggest visibility:hidden over display:none;. Here's a fiddle with this approach: http://jsfiddle.net/wEr3T/1/.
In short, visibility:hidden will literally just hide the element(s)—still taking up the space it did before, thus not affecting the layout.
In contrast, display:none; causes it not to be rendered, thus the space it had previously occupied is now unaccounted for. As such, hovering to show/hide elements that have been set to display:none will likely cause some undesired flickering.
hiding the text and the image when hovering #flip-container by setting display: none may cause flashing and change in layout of the parent container. so instead make them transparent by set visibility: hidden.
.flip-container:hover img {
visibility:hidden
}
.flip-container:hover .text {
visibility:hidden
}
i have created jsFiddle for you.
Try this...
.flip-container:hover .text, .flip-container:hover img {
visibility: hidden;
}
<div class="flip-container">
<div class="flipper">
<a href="#" data-reveal-id="pc1">
<div class="inner" style="background-color:yellow;">
<p class="text" style="color:red">title</p>
<img src="//placehold.it/100x100" class="img" />
</div>
</a>
</div>
</div>