I am using Masonry in my webpage. The problem is that after the page loaded, all images stack vertically, one image in a row. I would like them to stack both horizontally and vertically. See My Jsfiddle.
I use the following code in html:
<div class="container">
<div id="items">
<!-- the .box repeats several times -->
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
</div>
</div>
and the following javascript code:
$(document).ready(function(){
var $container = $('#items');
$container.masonry({
itemSelector: '.box',
isFitWidth: true
});
});
and also the CSS:
.box { margin: 5px; width: 214px; }
.box img { width: 100%; }
.panel .panel-heading {
color: #ffffff;
text-align: center;
margin-right: 0;
height: 150px
}
-------------------- Update ---------------------
The above code is just an abstraction of my webpage, in my first version of fiddle (http://jsfiddle.net/shapeare/saonpswu/), I accidentally put .box into separate #items, therefore, the code didn't work. This problem is pointed out by #Skelly. Thanks, Skelly. Now the fiddle works for the above demo (http://jsfiddle.net/shapeare/saonpswu/1), however, my webpage still cannot work. Now I have put almost the same content as my webpage in the following fiddle:
http://jsfiddle.net/shapeare/saonpswu/2
Fix your HTML so that there aren't separate DIV's with id="items"
<div id="items">
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
</div>
Demo: http://bootply.com/OD2uHuKupr
I forgot to mention that I am using Angular.js which probably caused this problem. I am now using the directive from http://passy.github.io/angular-masonry/ which resolved my problem.
Related
I would need to make sure that when the page is scrolled the div ".col-left" is placed in the fixed position (it must start from the top ".ctn-parte-iniziale").
Also, when it gets to the bottom of the footer ".bg-orange" it must stop and it must no longer be in the fixed position.
How can I do?
A thousand thanks!
This is my code:
<div class="ctn-parte-iniziale">...</div>
<div id="main-site">
<div class="bg-white">
<div class="container">
<div class="page_layout page_margin_top clearfix cnt-corsi-gen">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-12">
<div class="col-left">
...
</div>
</div>
<div class="col-md-9 col-sm-9 col-xs-12">
...
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-orange"></div>```
Try adding this to col-left. In 2021 you may not need the webkit line but try it first.
So, in CSS
div.sticky {
position: -webkit-sticky; <!-- Safari/Chrome --->
position: sticky;
top: 0;
}
And then in your HTML
<div class="col-left sticky">
I have an HTML table which is as following
Some of the code is below:
<table>
<tr>
<td>
<div style="width: 4.999999998%;" class="col-md-.6 col-sm-6">
<div style="height: 103px; width:80px;" class="location-block">
<div class="city-img">
<img src="worldwide-location.png" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
</div>
</td>
<td>
<div style=" width: 4.999999998%;" class="col-md-.6 col-sm-6">
<div style="height: 50px; width:80px;" class="location-block">
<div class="city-img">
<img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
<div style="height: 50px; width:80px; margin-top: -27px;" class="location-block">
<div class="city-img">
<img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
</div>
</td>
the table looks like the following:
enter image description here
As you can see the white space between each column, I am trying to reduce the white spaces between them, but this is not happening, I have tried padding-left and also gave cell spacing to the table, its not changing, can anyone tell me whats wrong with my code? Thanks in advance.
If you decide to use Bootstrap grid you can avoid to use HTML table tag, and use a structure like this:
<div class="row">
<div class="col margin-col">
<div>Images and content 1</div>
</div>
<div class="col margin-col">
<div>Images and content 2</div>
</div>
</div>
usign a proper CSS rule like this to set padding (inside columns) and margin (outside columns):
.margin-col{
padding: 10px;
margin: 20px;
}
I need to rearrange some content based on window/screen size.
This is how it looks when in full:
And this is what I need when screen size 768 or less:
This is my code structure:
<div class="container">
<div class="row">
<div class="col-md-9 site-main-content">
<div class="content">
<!--Main content-->
</div>
</div>
<div class="col-md-3 site-sidebar-content">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</div>
</div>
</div>
Not sure how to achieve this.
Update: I can not use hidden property. Box 1 contains some ajax search form. If I put it above main content (on full screen) and set display none, ajax form doesn't work anymore. So I am looking for a javascript snippet to remove box 1 from it's location and load it above main content when on smaller screen.
I have used hidden classes in my example please check and let me know...
Updated Fiddle
HTML
<div class="row">
<div class="col-md-9">
<div class="box-1 hidden-md hidden-lg">
Box 1
</div>
<div class="mainBox">
<div class="content">
Main Content
</div>
</div>
</div>
<div class="col-md-3">
<div class="box-1 hidden-xs hidden-sm">
Box 1
</div>
<div class="box-2">
Box 2
</div>
<div class="box-3">
Box 3
</div>
</div>
</div>
CSS
.mainBox{
background:green;
min-height:300px;
padding:10px;
margin-bottom:10px;
}
.box-1{
background:red;
min-height:100px;
padding:10px;
margin-bottom:10px;
}
.box-2, .box-3{
background:#00A2E8;
min-height:100px;
padding:10px;
margin-bottom:10px;
}
I am working on using the isotope plugin with bootstrap and have run into some trouble. I need the col-md-4 div around the isotope element gallery-image-a, so the .grid is not a direct parent of the isotope element. Once I get rid of the col-md-4 div that I need, the plugin works.
Was wondering if anyone knows of a way to keep the existing markup while maintaining the functionality of the isotope plugin?
HTML Snippet 1
<span class="menu-button" id="food-button">Food</span>
<span class="menu-button" id="staff-button">Staff</span>
<span class="menu-button" id="all-button">All</span>
HTML Snippet 2
<div class="container">
<div class="row grid">
<div class="col-md-4">
<a class="gallery-image-a food"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a staff"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a food"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a staff"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a food"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a staff"></a>
</div>
</div>
</div>
CSS
.gallery-image-a {
display:block;
height:360px;
background-position:center center;
transition: ease all 950ms;
background-repeat:no-repeat;
box-sizing: border-box;
border:10px solid #fff;
background-size:cover;
background-image: url('http://animalpetdoctor.homestead.com/acat1.jpg');
}
JavaScript
$grid = $('.grid');
$grid.isotope();
$('#food-button,#staff-button, #all-button').click(function(){
var id = $(this).attr('id');
var className = id.replace("-button", "");
if (className == 'all') {
$grid.isotope({ filter: '*' });
return false;
}
$grid.isotope({ filter: '.' + className });
});
2 problems. First, the filter works on children so change HTML to this
<div class="container">
<div class="row grid">
<div class="col-md-4 food">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 staff">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 food">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 staff">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 food">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 staff">
<a class="gallery-image-a"></a>
</div>
</div>
</div>
second, even if it does work, you won't see it. add min-width to class
min-width: 100px;
here's a working fiddle: https://jsfiddle.net/shirandror/rvnrk2kc/
Have you tried defining the itemSelector option to .col-md-4 or better declaring a designated class for that like "grid-item"?
$('.grid').isotope({
itemSelector: '.grid-item'
});
EDIT:
I put up a working example on codepen:
http://codepen.io/iCymiCy/pen/grwpXp?editors=1111
I am using Tiny Scrollbar.
Want to achieve horizontal scrolling. Look example of #scrollbar2
Code of that is here.
Markup code is at below.
<div class="wrapper wrapper-head" id="wrapper-head1" style="overflow-x: visible;">
<div class="scrollbar disable" style="width: 1548px;">
<div class="track" style="width: 1548px;">
<div class="thumb" style="width: 1548px;">
<div class="end">
</div>
</div>
</div>
</div>
<div class="div-table table-header viewport" style="overflow-x: hidden;">
<div class="div-table-row overview" style="overflow-x: visible; left: 0px;">
<<<<<< Content >>>>>>>
</div>
</div>
JS code is as below
$(document).ready(function(){
$("div.wrapper-head div.table-header").addClass("viewport").css('overflow-x','hidden');
$("div.wrapper-head div.div-table-row").addClass('overview').css('overflow-x','visible');
$("div.wrapper-head").css('overflow-x','visible');
scrollHtml = '<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>';
$("div.wrapper-head").prepend(scrollHtml);
$("div.wrapper-head").tinyscrollbar({ axis: 'x' });
});
I am not getting any error in browser console, but I am not getting tiny scrollbar as well.
What I want to achieve this
thanks in advance.