I am trying to create two divs where one of which is resizable and the other takes the remaining available space in the parent container which holds the two divs.
Using flexbox model, i placed both divs beside each other and gave the one on the left a with of 50% and the one on the right flex: 1 so it takes the available space.
I then used jquery-ui resizable function on the div by the left. But when i resize the div by the left, it only decreases on mouse drag and does not increase, neither does the div to the right decrease..
I am trying to archive something like that of codepen, with multiple resizable divs layed out vertically or horizontally
Here is my code
HTML
<div class="wrapper">
<div class="left-div" id="resizable"></div>
<div class="right-div">
</div>
CSS
.wrapper{
width: 100%; // 100% of the body
height: 100vh; // take the entire view-port height
display: flex;
}
.left-div{
position: relative
width: 50%; // 100% of the parent div(wrapper)
height: 100%;
}
.right-div{
position: relative
flex: 1;
}
JS
$(document).ready(function () {
$("resizable").resizable({
handles: "e",
autoHide: true,
maxWidth: ""
});
})
$(document).ready(function () {
$("#resizable").resizable({
resize: function(event, ui) {
ui.size.height = ui.originalSize.height;
}
});
})
Check out this CodePen
I added a function to lock the resizable along Y axis.
Also, remember to add # before id selector.
Related
I am trying to place a position: absolute div inside a scrolling div and make it stay on the left when scrolling left or right. This is because I want the div to move like one unit (when scrolling left, right, top, bottom). It's working great on screen that lower then 2K but on HD screens (ie. 2k, 3k, 4k...) the child div is jumping around and looks bad.
Is there a better way to do it? What change should I make to the CSS for HD screens?
#parent {
overflow: auto;
width: 100%;
height: 100%;
position: relative;
}
#child {
overflow: hidden;
width: 20%;
height: 100%;
z-index:1;
position: absolute;
}
<div id="parent">
<div id="child"></div>
</div>
$("#parent").on('scroll', function (event) {
$("#child")[0].style.marginLeft = this.scrollLeft+"px";
});
You can use jQuery's css function to set the value. And use the parent element as jQuery object to use scrollLeft() function:
$("#parent").on("scroll", function() {
$("#child").css("margin-left", $(this).scrollLeft() + "px");
});
But I would not use jQuery for this at all. Why not use a fixed position in css for this? Like in this example. It should not flicker on any screen.
I'm creating a 2 column masonry layout using images of different sizes. The images can be any size as long as they have the greatest common divisor (as required by the Masonry plugin).
In order to make the layout responsive I'm converting the width of the masonry items into percent (or I can use min-width and width 100%).
Update: I noticed that many who answer make both columns 50% as a solution. That works but is not the goal. Images have to retain their original image size. They can shrink but keep the same ratio.
$(function () {
var container = $('#container');
// Convert .box width from pixels to percent
$('.box').find('img').each(function () {
var percent = ($(this).width()) / container.width() * 100 //convert to percent;
$(this).closest('.box').css('max-width', percent + '%');
});
// Trigger masonry
container.masonry({
itemSelector: '.box',
columnWidth: 1 //widths dividable by 1
});
});
jsfiffle: http://jsfiddle.net/AMLqg/278/
This seems to work. The items are fluid when you resize the window. However if you load the script in a small window size (smaller than the 2 column width) the items collapse. How can I keep the masonry items responsive on window load even when the window is smaller?
Update: Here is more info for a better understanding. I'm trying to keep 2 responsive columns regardless of the window size. The columns can't have equal widths because the images have different widths. For this reason I'm using columnWidth: 1 because all widths are dividable by 1.
Please see images below for examples.
Problem: When you open the page in a small window the elements are collapsed. When you resize the window to be larger the elements remain collapsed until the window width is larger than the width of both elements.
Goal: I'm trying to keep the elements in 2 responsive columns on load like in the image below. Currently they remain responsive if on load the window is large and you resize it to be smaller but not vice verse when window is small on load and you make it larger.
You can try overflow:hidden on the surrounding box.
Using imagesloaded.js and columnwidth set using css like so:
jsFiddle
<div id="container">
<div class="grid-sizer"></div>
<div class="box">
<img src="http://images.huffingtonpost.com/2007-11-01-ice.jpg" />
</div>
<div class="box">
<img src="http://www.wwalls.ru/mini/201211/57608.jpg" />
</div>
<div class="box">
<img src="http://artistsandwriters.com/site/wp-content/uploads/2014/09/IMG_7303LR-390x150-1412284267.jpg" />
</div>
</div>
Script
$(document).ready(function () {
var container = $('#container');
$('.box').find('img').each(function () {
var percent = $(this).width() / container.width() * 50;
$(this).closest('.box').css('max-width', percent + '%');
});
// Trigger masonry
container.imagesLoaded(function () {
container.masonry({
itemSelector: '.box',
columnWidth: '.grid-sizer'
});
});
});
CSS
#container {
max-width:580px;
}
.box {
float: left;
margin-bottom: 5px;
}
.box img {
width: 100%;
}
.grid-sizer {
width: 50%;
}
Are you looking for something like this?
Fiddle
So, all we're doing here is getting rid of your percentage calculation (of which I really don't understand the necessity), and setting a min-width on the .box class. Just like this:
.box {
float: left;
min-width: 100px;
}
I was able to reproduce your problem. This is how it looks for those curious:
The problem is your float: left rule in the CSS, which is collapsing the box when Masonry is doing its positioning calculations after adding the image. You can do a simple clear-fix to keep this if you really need to keep that clunky percentage calculation, like so:
.container:after {
content: '';
display: table;
clear: both;
}
Hope that helps!
Edit – Based on your comments:
Okay, if you always want there to be two columns, it's an even simpler change:
Get rid of this Javascript
// Convert .box width from pixels to percent
$('.box').find('img').each(function () {
var percent = $(this).width() / container.width() * 100;
$(this).closest('.box').css('max-width', percent + '%');
});
Add this CSS
.box {
max-width: 50%;
}
Fairly straightforward, I think.
Here's a fiddle, just for giggles
EDIT
Check this http://jsfiddle.net/gk3t009j/2/
CSS
#wrapper
{
background-color: red;
margin: 0 auto; max-width:580px;
}
#container,
{
overflow: hidden;
width: 100%;
}
.box
{
max-width: 290px!important; width: 50%;
}
.box img{width: 100%;}
JS
$( window ).load( function()
{
var wc=$( '#container').width();
wc=parseInt(wc);
if( wc % 2)
{
var wb=$('.box').width();
wb--;
$('.box').width(wb)
}
$( '#container').masonry(
{
itemSelector: '.box',
columnWidth: function( containerWidth ) {
return parseInt(containerWidth / 2);
}
});
});
HTML
<div id="wrapper">
<div id="container">
<div class="box">
<img src="http://images.huffingtonpost.com/2007-11-01-ice.jpg" />
</div>
<div class="box">
<img src="http://www.wwalls.ru/mini/201211/57608.jpg" />
</div>
<div class="box">
<img src="http://artistsandwriters.com/site/wp-content/uploads/2014/09/IMG_7303LR-390x150-1412284267.jpg" />
</div>
</div>
</div>
I removed the JS code and some of the HTML markup and updated the styling:
#container {
width: 100%;
}
img {
display: inline;
vertical-align: top;
float: left;
min-width: 50%;
width: 50%;
}
http://jsfiddle.net/org6nsr8/8/
I agree with Josh Burgess on that Masonry is not needed to accomplish this, take a look and see if this is what you're after.
I'd be happy to elaborate if something is unclear or you want anything explained.
You don't need the JavaScript; just change the css for .box to:
.box {
float: left;
max-width: 50%;
}
I am not sure if this is what you need. If I understood the problem correctly may be you need to use max-width instead of width.
Here is example fiddle :
http://jsfiddle.net/AMLqg/304/
My JS code :
$(function () {
var container = $('#container');
var maxWidth = container.css("maxWidth");
maxWidth = parseInt(maxWidth.substring(0,maxWidth.indexOf("px")));
// Convert .box width from pixels to percent
$('.box').find('img').each(function () {
var percent = ($(this).width()) / maxWidth * 100;
console.log(percent);
$(this).closest('.box').css('max-width', percent + '%');
});
// Trigger masonry
container.masonry({
itemSelector: '.box',
columnWidth: 1 //widths dividable by 1
});
});
After trying several library to make a masonry layout , I prefer salvattor.js
Very easy to use. the size of the columns you can configure css.
#media screen and (max-width: 480px){
#grid[data-columns]::before {
content: '1 .column.size-1of1';
}
}
What i understand you want to keep Layout 2 Column with Images on aspect ratio on all screen sizes ,
Check
http://jsfiddle.net/tasaeed/k40cgfye/
CSS
#container {
max-width: 580px;
}
.box {
float: left;
width:50%;
}
.box img {
width: 100%;
height:auto;
}
Script
$(function () {
var container = $('#container');
// Trigger masonry
container.masonry({
itemSelector: '.box',
});
});
<style type="text/css">
.collapse {
height: auto;
width: auto;
}
.collapse.in.width {
width: auto;
}
</style>
My horizontal collapse works fine however once collapsed I want the div class=span4 width to increase to the available viewport width space e.g: 8. and the button label to change to 'Show' and vice-versa using JQuery.
Just switch out the spanN class on the div when the collapse occurs using the event:
$('#demo').on('hidden', function () {
$('#your-content-div').removeClass('span4').addClass('span8');
});
See the section on events under http://getbootstrap.com/2.3.2/javascript.html#collapse
I have a container div element, this should contain all child div elements.
I saw this thread: Slide a div offscreen using jQuery and I was wondering how to implement it (within a div element and not in the body).
The code is working fine, but what if the "wrapper" div element has 500px width, how am I supposed to wrap the child divs? Am I need to use iframe or ...?
For a better understanding I made this image:
The red rectangle would be a window and the grey background the wall. You can only see trough the window and see the current div element. If you push the right button -aqua- you will see the green div and if you push the left button you will see the yellow div.
Notice: Div elements should move and not the wall.
jQuery for the logic and CSS3 for transition and transform.
Multiple galleries + Auto-slide + Pause on hover:
$(function(){
$('.gallery').each(function() {
var $gal = $(this),
$movable = $(".movable", $gal),
$slides = $(">*", $movable),
N = $slides.length,
C = 0,
itv = null;
function play() { itv = setInterval(anim, 3000); }
function stop() { clearInterval(itv); }
function anim() {
C = ($(this).is(".prev") ? --C : ++C) <0 ? N-1 : C%N;
$movable.css({transform: "translateX(-"+ (C*100) +"%)"});
}
$(".prev, .next", this).on("click", anim);
$gal.hover(stop, play);
play();
});
});
.gallery{
position: relative;
overflow: hidden;
}
.gallery .movable{
display: flex;
height: 70vh;
transition: transform 0.4s;
}
.gallery .movable > div {
flex:1;
min-width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Pause on hover and autoslide
<div class="gallery">
<div class="movable">
<div style="background:#0af">1 <p style="position:absolute; top:400px;">aaaa</p></div>
<div style="background:#af9">2</div>
<div style="background:#f0a">3</div>
</div>
<button class="prev">Prev</button>
<button class="next">Next</button>
</div>
As many galleries as you want
Count the number of slides and put into a counter C.
On prev/next click manipulate C
On autoslide $(this).is(".prev") will also evaluate as false so ++C will be used, just like clicking the Next button.
On mouseenter simply clearInterval the currently running itv and on mouseleave (the second .hover argument) reinitialize the itv
The animation is achieved by multiplying C*100 and translateX by - C * 100 %
Add all three div in a container div, then make the window wrap around the long div and hide the overflow.
Example if the window area is 960px then the div inside would be 3x 960 (2880)
You can center it by changing it's left position by increments of 960 (placing the long div in relative positioning and the window to overflow to hidden)
#window{
width:960px;
overflow: hidden;
}
#container{
position: relative;
left: -960px;
}
.content_box{
width:960px;
}
Then you can use javascript (jQuery) to animate the left position:
$('#arrow-left').click(function() {
$('#container').animate({
left: '-=960'
}, 5000, function() {
// Animation complete.
});
});
$('#arrow-right').click(function() {
$('#container').animate({
left: '+=960'
}, 5000, function() {
// Animation complete.
});
});
More on .animate can be found in the manual: http://api.jquery.com/animate/
<div id="parent">
<div id="container">
<div id="child1"></div>
<div id="child2"></div>
</div>
</div>
give the parent red div css properties:
position: relative;
overflow: hidden;
width: 500px;
height: somevalue;
wrap the children divs with another div "container for example" and give it the following css properties:
position: absolute;
width: ;/*overall width of all children divs including margins*/
top: 0;
left: 0;
height: ;/*same as parent*/
and finally for children divs:
float: left;
height: ;/*same as parent*/
I have a div with some text inside and absolute position. I can set the left or the right, but is there a way to set the center, so Div's text would expand in both directions.
So far I could only think about creating exstremly long div and centering text inside.
If your div is positioned absolutely, you can simply set it's left property so that it's centered.
Example:
HTML:
<div class="outer">
<div class="inner">Some text...</div>
</div>
CSS:
.outer {
position: relative;
width: 900px;
}
.inner {
position: absolute;
width: 500px;
top: 0;
left: 200px;
}
If you don't know the width of the inner element, you'll have to rely on javascript.
Here's an example using jQuery:
var $el = $('.inner');
$el.css('left',
( $el.parent().width() - $el.width() ) / 2
);
and here's the fiddle: http://jsfiddle.net/aa93G/ . Play around with the text inside .inner, and you'll see that the text stays centered.
to centralize inner text and inline elements use text-align: center in the parent element.
If you're dealing with block elements, you should use margin: auto in the element itself. but you must first set a width for the element, otherwise it will just occupy the whole width of the parent.