Does bootstrap 2.0 have any helpers to make .span1, .span2 .... .span12 equal height. I've nested this type of html
<div class='container'>
<div class='row'>
<div class='span2'>
<div class='well'>
XXXX
</div>
</div>
<div class='span2'>
<div class='well'>
XXXX
XXXX
</div>
</div>
<div class='span2'>
<div class='well'>
XXXX
XXXX
XXXX
</div>
</div>
</div>
</div>
I would like each well to end up the same height if possible?
Here's a responsive CSS solution, based on adding a large padding and an equally large negative margin to each column, then wrapping the entire row in in a class with overflow hidden.
.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#ffc;
}
.col-wrap{
overflow: hidden;
}
You can see it working at jsFiddle
Edit
In response to a question, here's a variation if you need equal height wells or equal height columns with rounded corners: http://jsfiddle.net/panchroma/4Pyhj/
Edit
In response to a question, here's the same technique in Bootstrap 3, same principle, just update the class names in the Bootstap grid: http://jsfiddle.net/panchroma/bj4ys/embedded/result/
Try something like this (not very elegant, though):
$('.well').css({
'height': $('.well').height()
});
The jQuerys height() method returns the highest value when multiple elements are selected.
See the jsFiddle:
http://jsfiddle.net/4HxVT/
jQuery's height() method returns the value of the "first element in the set of matched elements". The answer in http://jsfiddle.net/4HxVT/ only works because the first element in the row is also the highest.
Here's another jQuery based solution:
http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/
(Via this answer: https://stackoverflow.com/a/526316/518535)
Expanding upon the answers already given, I have just solved this using jquery and underscore. The snippet below equalizes the height of my wells and alerts that appear on a given row, regardless of where the tallest one appears:
$('.well, .alert').height(function () {
var h = _.max($(this).closest('.row').find('.well, .alert'), function (elem, index, list) {
return $(elem).height();
});
return $(h).height();
});
$.fn.matchHeight = function() {
var max = 0;
$(this).each(function(i, e) {
var height = $(e).height();
max = height > max ? height : max;
});
$(this).height(max);
};
$('.match-height').matchHeight();
I solved this with a custom jQuery max plugin:
$.fn.max = function(selector) {
return Math.max.apply(null, this.map(function(index, el) { return selector.apply(el); }).get() );
}
Here content-box is my internal column element, content-container is the wrapper that contains the columns:
$('.content-box').height(function () {
var maxHeight = $(this).closest('.content-container').find('.content-box')
.max( function () {
return $(this).height();
});
return maxHeight;
})
The above solutions all work until you add nice bootstrap buttons! How do you position buttons I thought (yes, that was my problem).
I combined the CSS with the jquery answer from How might I force a floating DIV to match the height of another floating DIV?
After a bit of frigging I got this, which works with CSS although the buttons don't line up, and is fine with jQuery
Feel free to fix the CSS button line up bit :)
jQuery:
$.fn.equalHeights = function (px) {
$(this).each(function () {
var currentTallest = 0;
$(this).children().each(function (i) {
if ($(this).height() > currentTallest) {
currentTallest = $(this).height();
}
});
if (!px && Number.prototype.pxToEm) {
currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
}
// for ie6, set height since min-height isn't supported
if ($.browser.msie && $.browser.version == 6.0) {
$(this).children().css({
'height': currentTallest
});
}
$(this).children().css({
'min-height': currentTallest + 40 // THIS IS A FRIG - works for jquery but doesn't help CSS only
});
});
return this;
};
$(document).ready(function() {
var btnstyle = {
position : 'absolute',
bottom : '5px',
left : '10px'
};
$('.btn').css(btnstyle);
var colstyle = {
marginBottom : '0px',
paddingBottom : '0px',
backgroundColor : '#fbf'
};
$('.col').css(colstyle);
$('.row-fluid').equalHeights();
});
CSS
.col {
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#ffb;
position:relative;
}
.col-wrap {
overflow: hidden;
}
.btn{
margin-left:10px ;
}
p:last-child {
margin-bottom:20px ;
}
jsfiddle - http://jsfiddle.net/brianlmerritt/k8Bkm/
Here is my solution with 2 columns (adapt this to more columns is simple, just add more conditions).
Run on the load event to have the correct heights of all elements.
$(window).on('load', function () {
var left = $('.left');
var leftHeight = left.height();
var right = $('.right');
var rightHeight = right.height();
// Width like mobile, the height calculation is not needed
if ($(window).width() <= 751)
{
if (leftHeight > rightHeight) {
right.css({
'height': 'auto'
});
}
else {
left.css({
'height': 'auto'
});
}
return;
}
if (leftHeight > rightHeight) {
right.css({
'height': leftHeight
});
}
else {
left.css({
'height': rightHeight
});
}
});
<div class="row">
<div class="span4 left"></div>
<div class="span8 right"></div>
</div>
Related
Is there a way to create an multiple row image slider like the one in the image below using just css? or is there a way to do this with angular?
The slider needs to move as one (single rows cannot be swiped individually).
First you need to understand the overflow property in css:
https://css-tricks.com/almanac/properties/o/overflow/
This will allow you to see there is a scroll property. That can make your scroll bars. Yours should use overflow-x to scroll the direction you want it to go.
As for angular, you need to look into ng-repeat command. Here is a fiddle that is doing what you are looking for:
<div ng-repeat="user in users | limitTo:display_limit">
http://jsfiddle.net/bmleite/hp4w7/
Quick answer to your question.. no, there is no way to do this with just CSS because you will have to handle the swipe, touch, click, etc. events using javascript. I guess I was working under the assumption that you would be adding angularjs into your application solely for this purpose, so I made a jQuery solution. If that is a wrong assumption, I will rewrite an angular solution.
Basically, the idea is that you structure your HTML/CSS in a way to get the effect of the sliding within a given container, and then use event handlers to update the slider as the user interacts with it.
Working DEMO
HTML
<div class="slider-display centered">
<div class="image-container">
<div class="image">Image<br>1</div>
<div class="image">Image<br>2</div>
<div class="image">Image<br>3</div>
<div class="image">Image<br>4</div>
<div class="image">Image<br>5</div>
<div class="image">Image<br>6</div>
<div class="image">Image<br>7</div>
<div class="image">Image<br>8</div>
<div class="image">Image<br>9</div>
<div class="image">Image<br>10</div>
<div class="image">Image<br>11</div>
<div class="image">Image<br>12</div>
<div class="image">Image<br>13</div>
<div class="image">Image<br>14</div>
<div class="image">Image<br>15</div>
<div class="image">Image<br>16</div>
<div class="image">Image<br>17</div>
<div class="image">Image<br>18</div>
</div>
</div>
<div class="centered" style="text-align: center; max-width: 350px;">
<button class="move-left"><--</button>
<button class="move-right">--></button>
</div>
Javascript
$(function () {
var getWidth = function ($element) {
var total = 0;
total += $element.width();
total += Number($element.css("padding-left").replace("px", ""));
total += Number($element.css("padding-right").replace("px", ""));
total += Number($element.css("border-left").split("px")[0]);
total += Number($element.css("border-right").split("px")[0]);
total += Number($element.css("margin-left").split("px")[0]);
total += Number($element.css("margin-right").split("px")[0]);
return total;
};
var sliderPosition = 0;
var imageWidth = getWidth($(".image").eq(0));
$(".move-left").on("click.slider", function () {
var maxVisibleItems = Math.ceil($(".slider-display").width() / imageWidth);
var maxItemsPerRow = Math.ceil($(".image-container").width() / imageWidth);
var numRows = Math.ceil($(".image-container .image").length / maxItemsPerRow);
var maxPosition = numRows > 1 ? maxVisibleItems - maxItemsPerRow : maxVisibleItems - $(".image-container .image").length;
if (sliderPosition > (maxPosition)) {
sliderPosition--;
var $imageContainer = $(".image-container");
$(".image-container").animate({
"margin-left": sliderPosition * imageWidth
},{
duration: 200,
easing: "linear",
queue: true,
start: function () {
$(".move-left").prop("disabled", true);
},
done: function () {
$(".move-left").prop("disabled", false);
}
});
}
});
$(".move-right").on("click.slider", function () {
if (sliderPosition < 0) {
sliderPosition++;
var $imageContainer = $(".image-container");
$(".image-container").animate({
"margin-left": sliderPosition * imageWidth
},{
duration: 200,
easing: "linear",
queue: true,
start: function () {
$(".move-right").prop("disabled", true);
},
done: function () {
$(".move-right").prop("disabled", false);
}
});
}
});
});
CSS
.image {
float: left;
height: 80px;
width: 80px;
background: #888888;
text-align: center;
padding: 5px;
margin: 5px;
font-size: 1.5rem;
}
.image-container {
width: 650px;
position: relative;
}
.slider-display {
max-width: 450px;
overflow: hidden;
background: #ddd
}
.centered {
margin: 0 auto;
}
I am trying to zoom contents of div(same behavior as browser zoom). After searching a lot I found css 3 transform scale property will full fill this requirement.
The content is zooming when I increase the scale size but I am losing the contents of the div. overflow: hidden also didn't help.
var currentZoom = 1.0;
$(document).ready(function () {
$('#btn_ZoomIn').click(
function () {
currentZoom = currentZoom+0.04;
var scaleString = "scale("+currentZoom+")";
$('#divName').css("transform", scaleString);
})
$('#btn_ZoomOut').click(
function () {
//var scaleString = "scale("+currentZoom -= .1+")";
currentZoom = currentZoom-0.04;
var scaleString = "scale("+currentZoom+")";
$('#divName').css("transform", scaleString);
})
});
Js fiddle link: http://jsfiddle.net/chaitut715/k4WsB/
Add a container around #divName:
<div class="wrapper">
<div id="divName">
<img src="https://www.google.co.in/intl/en_ALL/images/srpr/logo11w.png"></img>
</div>
</div>
And set overflow: hidden; on the new container:
.wrapper {
overflow: hidden; /* 'auto' would probably be better */
width: 500px;
}
Working demo
I'm not sure if "sticky" is the term for this, but is there a way to make the scrollbar from overflow:auto stay visible?
I have a rather large table that I want to be scrollable horizontally; however, the table is fairly tall as well, so when the page loads the horizontal scrollbar is not within the viewport of the browser, so it's rather hard to tell that the table is scrollable at all.
<div style = 'width:900px;overflow:auto'>
<table>
<!-- Very large table here -->
</table>
</div>
The scroll bar appears below the table, but unfortunately the table is so tall you can't see it unless you scroll down.
I'd like to have the horizontal scrollbar stay visible even if the table goes off the screen, maybe fixed to the bottom of the viewport. Ideally I'd like to do it using only CSS or a minimal amount of javascript.
Here is a script for that http://jsfiddle.net/TBnqw/2288/
$(function($){
var scrollbar = $('<div id="fixed-scrollbar"><div></div></div>').appendTo($(document.body));
scrollbar.hide().css({
overflowX:'auto',
position:'fixed',
width:'100%',
bottom:0
});
var fakecontent = scrollbar.find('div');
function top(e) {
return e.offset().top;
}
function bottom(e) {
return e.offset().top + e.height();
}
var active = $([]);
function find_active() {
scrollbar.show();
var active = $([]);
$('.fixed-scrollbar').each(function() {
if (top($(this)) < top(scrollbar) && bottom($(this)) > bottom(scrollbar)) {
fakecontent.width($(this).get(0).scrollWidth);
fakecontent.height(1);
active = $(this);
}
});
fit(active);
return active;
}
function fit(active) {
if (!active.length) return scrollbar.hide();
scrollbar.css({left: active.offset().left, width:active.width()});
fakecontent.width($(this).get(0).scrollWidth);
fakecontent.height(1);
delete lastScroll;
}
function onscroll(){
var oldactive = active;
active = find_active();
if (oldactive.not(active).length) {
oldactive.unbind('scroll', update);
}
if (active.not(oldactive).length) {
active.scroll(update);
}
update();
}
var lastScroll;
function scroll() {
if (!active.length) return;
if (scrollbar.scrollLeft() === lastScroll) return;
lastScroll = scrollbar.scrollLeft();
active.scrollLeft(lastScroll);
}
function update() {
if (!active.length) return;
if (active.scrollLeft() === lastScroll) return;
lastScroll = active.scrollLeft();
scrollbar.scrollLeft(lastScroll);
}
scrollbar.scroll(scroll);
onscroll();
$(window).scroll(onscroll);
$(window).resize(onscroll);
});
It is a quick test rather than a complete generic plugin, but is a good start, I think
Here's my take, #user2451227's is almost perfect, but didn't work with nested overflowed elements and had a number of performance issues, so I rewrote it:
$(function($){
var fixedBarTemplate = '<div class="fixed-scrollbar"><div></div></div>';
var fixedBarCSS = { display: 'none', overflowX: 'scroll', position: 'fixed', width: '100%', bottom: 0 };
$('.fixed-scrollbar-container').each(function() {
var $container = $(this);
var $bar = $(fixedBarTemplate).appendTo($container).css(fixedBarCSS);
$bar.scroll(function() {
$container.scrollLeft($bar.scrollLeft());
});
$bar.data("status", "off");
});
var fixSize = function() {
$('.fixed-scrollbar').each(function() {
var $bar = $(this);
var $container = $bar.parent();
$bar.children('div').height(1).width($container[0].scrollWidth);
$bar.width($container.width()).scrollLeft($container.scrollLeft());
});
$(window).trigger("scroll.fixedbar");
};
$(window).on("load.fixedbar resize.fixedbar", function() {
fixSize();
});
var scrollTimeout = null;
$(window).on("scroll.fixedbar", function() {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(function() {
$('.fixed-scrollbar-container').each(function() {
var $container = $(this);
var $bar = $container.children('.fixed-scrollbar');
if($bar.length && ($container[0].scrollWidth > $container.width())) {
var containerOffset = {top: $container.offset().top, bottom: $container.offset().top + $container.height() };
var windowOffset = {top: $(window).scrollTop(), bottom: $(window).scrollTop() + $(window).height() };
if((containerOffset.top > windowOffset.bottom) || (windowOffset.bottom > containerOffset.bottom)) {
if($bar.data("status") == "on") {
$bar.hide().data("status", "off");
}
} else {
if($bar.data("status") == "off") {
$bar.show().data("status", "on");
$bar.scrollLeft($container.scrollLeft());
}
}
} else {
if($bar.data("status") == "on") {
$bar.hide().data("status", "off");
}
}
});
}, 50);
});
$(window).trigger("scroll.fixedbar");
});
Usage: Add the class fixed-scrollbar-container to your horizontally overflowed element, then include this code. If the container is updated or changes in size, run $(window).trigger("resize.fixedbar"); to update the bar.
Demo: http://jsfiddle.net/8zoks7wz/1/
#Mahn - I made a small update to the following function:
$('.fixed-scrollbar-container').each(function() {
var container = jQuery(this);
if (container[0].offsetWidth < container[0].scrollWidth) {
var bar = jQuery(fixedBarTemplate).appendTo(container).css(fixedBarCSS);
bar.scroll(function() {
container.scrollLeft(bar.scrollLeft());
});
bar.data("status", "off");
}
});
The if statement looks if the container offsetWidth is smaller than the scrollWidth. Else you will also get a fixed scrollbar if the content happens to be smaller than the container. I did not like having a disfunctional scrollbar, hence this edit.
How about restricting the height of the containing div so it stays within the body? You could then have the table scroll within that div.
Working jsfiddle here: http://jsfiddle.net/fybLK/
html, body {height: 100%; margin: 0; padding: 0;}
div {
width:500px;
max-height: 100%;
overflow:auto;
background: steelblue;}
table {
width: 1000px;
height: 1000px;
color: #fff;}
Here, I've set the html and body to 100% height so that the containing div can be sized.
Over the weekend, I've been working on a project that has a nav column and a main column. THe nav column has a toggle button. When the toggle button is pressed, I want to animate the shrinking and expanding of the column. In an effort to do that, I've created a jsfiddle which can be found here. My relevant HTML looks like the following:
<div class="ui full-height grid">
<div class="full-height row">
<div id="navDiv" class="four wide full-height column" style="background-color:navy; toggle
</div>
<div class="eight wide full-height column">
[Content Goes Here]
</div>
</div>
</div>
The relevant JavaScript looks like this:
var isOpen = true;
function toggleNav() {
var options = {};
if (isOpen === true) {
options = { to: { width: 56 } };
} else {
options = { to: { width: 114 } };
}
$("#navDiv").effect("size", options, 500);
isOpen = !isOpen;
}
As the example shows, the column performs the shrinking animation. However, the column doesn't stay shrunk. It snaps back to its original size. How do I make the animation change the width of navDiv from one size to another and make it stay there?
Thank you
You could simplify this a bit by using .animate() and checking the width of the #navDiv.
Working Example
var w = $('#navDiv').outerWidth();
function toggleNav() {
if ($('#navDiv').width() > 56) {
$('#navDiv').animate({
width: 56
}, 500);
} else {
$('#navDiv').animate({
width: w
}, 500);
}
}
I'm not sure if there is any real performance gain or if its just a personal preference, but I usually try to avoid using the inline onclick.
So the above code could be written as:
Working Example 2
toggle
var w = $('#navDiv').outerWidth();
function toggleNav() {
if ($('#navDiv').width() > 56) {
$('#navDiv').animate({
width: 56
}, 500);
} else {
$('#navDiv').animate({
width: w
}, 500);
}
}
$('#toggle').click(toggleNav);
I would like to highlight a div when it's clicked.
Heres the example: www.spidex.org
On this website if you hover any of the navigation buttons a div on the top of the page is highlighted.
You may use jQuery for achieving this.
get jQuery here.
now consider that you have a div that you want to highlight on mouseover called item.
do this by adding an overlay div.
div.overlay{
opacity:0;
background:#000;
width:100%;
height:100%;
position:absolute;
top:50px;left:0;
}
then use jquery
jQuery(document).ready(function($){
$('.item').mouseover(function(){
$('.overlay').css({opacity:0.3});
});
});
You can change the appearance of elements when hovered using the :hover pseudo-class.
For example
div:hover {
color: red;
}
Secondly, you can change the text color via using the color property and the background color using the background-color property.
Both are shown below:
div:hover {
color: black;
background-color: white;
}
In your given example, when you hover over the primary navigation items in the super-header, then the body dims. I agree with your analysis that this is managed with some cover div of the body.
One cross-browser approach (using jQuery in this example) you might consider would be the following:
EXAMPLE HTML:
<div class="header">
Some Link
</div>
<div class="body">
<div class="body-content">
[ CONTENT HTML ]
</div>
<div class="body-cover"></div>
</div>
EXAMPLE CSS:
.body {
position: relative; /* container needs position */
}
.body-cover {
position: absolute;
top: 0px;
left: 0px;
background-color: blue;
/*
you could use a sligtly transparent background here,
or tween your opacity in your javascript
*/
}
EXAMPLE JavaScript:
// on dom ready
jQuery(function ($) {
// closures
var $links = $('.header a');
var $body = $('.body');
var $content = $body.find('.body-content');
var $cover = $body.find('.body-cover');
var sCoverHiddenCssClassName = 'body-cover-hidden';
var sCoverTweeningCssClassName = 'body-cover-tweening';
var sCoverShowingCssClassName = 'body-cover-showing';
// closure methods
var fMouseOver = function () {
// check to see if hidden (not already tweening or showing)
if ($cover.hasClass(sCoverHiddenCssClassName)) {
// check content, may have changed.
$cover.css({
height: $content.outerHeight(),
width: $content.outerWidth()
});
// animate or tween cover (do this however you want)
$cover
.removeClass(sCoverHiddenCssClassName)
.addClass(sCoverTweeningCssClassName)
.fadeIn(function () {
// when completed, mark as showing/visible
$cover
.removeClass(sCoverTweeningCssClassName)
.addClass(sCoverShowingCssClassName);
});
}
};
var fMouseOut = function () {
// check to see if visible (not already tweening or hidden)
if ($cover.hasClass(sCoverShowingCssClassName)) {
// animate or tween cover (do this however you want)
$cover
.removeClass(sCoverShowingCssClassName)
.addClass(sCoverTweeningCssClassName)
.fadeOut(function () {
// when completed, mark as showing/visible
$cover
.removeClass(sCoverTweeningCssClassName)
.addClass(sCoverHiddenCssClassName);
});
}
};
var fClick = function (e) {
// prevent default if needed for anchors or submit buttons
// e.preventDefault();
if ($cover.hasClass(sCoverHiddenCssClassName)) {
fMouseOver();
}
else if ($cover.hasClass(sCoverShowingCssClassName)) {
fMouseOut();
}
};
// init interaction
$cover.hide().addClass(sCoverHiddenCssClassName);
$links.each(function () {
// wire links
jQuery(this)
.mouseover(fMouseOver)
.mouseout(fMouseOut);//
//.click(fClick); // use click event if desired
});
});
JQuery UI is also gives an good option to quickly highlight div .
https://jqueryui.com/effect/
$( "#divId" ).effect( "highlight", 500 );