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
Related
I wanted to know if there was an easy way to change the div position when i refresh my browser I don't want to lose the place that I have changed to i have 3 Div (Div1 Logo - Div2 Text - Div3 Langue) I want to change Div2 and Div3 when witdh page <=765 and refresh and don't lose this position (Div1 -Div2 -Div3)
$(document).load($(window).bind("resize", listenWidth));
function listenWidth( e ) {
if($(window).width() <= 765)
{
$(".welcomeheader1").remove().insertAfter($(".welcomeheader2"));
} else {
$(".welcomeheader1").remove().insertBefore($(".welcomeheader2"));
}
}
HTML Code
<div id="header" class="header clearfix">
<div class="row clearfix">
<div class="col-lg-3 col-md-3 col-sm-6 col-4 xs-last txtRight">
<div id="headerLogo" ></div>
</div>
<div id="welcome" class="txtCenter col-lg-6 col-md-7 col-sm-12 col-12 clearfix welcomeheader1">
<!-- <img src="./resources/_images/wifi.png?1595436503" class="wifi-img" alt="WIFI" /> -->
<!--
<div class="wifi-symbol">
<div class="wifi-circle first"></div>
<div class="wifi-circle second"></div>
<div class="wifi-circle third"></div>
<div class="wifi-circle fourth"></div>
</div>
-->
<img class="wifi_welcome" src="./resources/_images/wifi_welcome.png?1590753851" alt="">
<h1 id="welcomeHeadline">WELCOME</h1>
<h2 id="connectezvous">Connectez-vous au Wifi gratuit</h2>
</div>
<div class="col-lg-3 col-md-2 col-sm-6 col-8 welcomeheader2 " align="Right">
<div id="lang_block">
<i id="showLanguages"> <span id="language_text_id">Langue</span> <img class="left_arrow" src="./resources/_images/left-arrow.png?1590753851" alt=""></i>
<div id="langContainer">
<a id="lang_link[en]" href="#" style="display:none"><img src="./resources/_images/flags/en.png?1595436503" title="English"></a>
<a id="lang_link[fr]" href="#" style="display:none"><img src="./resources/_images/flags/fr.png?1595436503" title="Français"></a>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<!-- The header template -->
<!-- Will be added on top of the page -->
So call the function on load
$(document).load( function () {
listenWidth();
$(window).bind("resize", listenWidth)
});
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;
}
Trying to add .active class on .inner-thumb-container whenever its corresponding .detail-box is set to display: block. I have two blocks using similar code so that layout is modified on mobile and desktop views.
Here's what I have so far. Works fine until window is resized...
jQuery:
// show different div based on image map hover
jQuery("#career-img-wrap a[data-toggle]").click(function(e) {
e.preventDefault();
var selector = $(this).data("toggle");
jQuery(".inner-thumb-container").removeClass('active');
jQuery(this).find(".inner-thumb-container").addClass('active');
jQuery(".detail-box").hide();
jQuery(".detail-box" + "#" + selector).show().addClass('animated fadeIn');
});
HTML (written in ExpressionEngine):
<div class="mobile-hide">
<div class="row">
<div class="col-md-6 text-center thumb-container">
{careers_benefits}
{careers_benefits:switch="<div class='row'>|"}
<div class="col-md-6" id="career-img-wrap">
<a href="#" data-toggle="career_content_{careers_benefits:field_row_count}">
<div class="inner-thumb-container {if careers_benefits:field_row_count == 1}active{/if}">
<img src="{careers_benefits:icon}" alt="{careers_benefits:title} icon">
<p>{careers_benefits:title}</p>
</div>
</a>
</div>
{if careers_benefits:field_row_count != careers_benefits:field_total_rows}{careers_benefits:switch="|</div>"}{/if}
{if careers_benefits:field_row_count == careers_benefits:field_total_rows}</div>{/if}
{/careers_benefits}
</div>
{careers_benefits}
<div class="col-md-6 career-thumb-content detail-box" id="career_content_{careers_benefits:field_row_count}">
<div class="career-thumb-content-inner">
<h3>{careers_benefits:title}</h3>
{careers_benefits:content}
</div>
</div>
{/careers_benefits}
</div>
</div>
<div class="mobile-show">
<div class="row">
<div class="col-md-12 text-center thumb-container">
{careers_benefits}
<div id="career-img-wrap">
<a href="#" data-toggle="career_content_{careers_benefits:field_row_count}">
<div class="inner-thumb-container">
<img src="{careers_benefits:icon}" alt="{careers_benefits:title} icon">
<p>{careers_benefits:title}</p>
</div>
</a>
</div>
<div class="career-thumb-content detail-box" id="career_content_{careers_benefits:field_row_count}">
<div class="career-thumb-content-inner">
<h3>{careers_benefits:title}</h3>
{careers_benefits:content}
</div>
</div>
{/careers_benefits}
</div>
</div>
</div>
CSS:
.mobile-hide {
display: block;
}
.mobile-show {
display: none;
}
#media (max-width: 992px){
.mobile-hide {
display: none;
}
.mobile-show {
display: block;
}
As you can see, is this a list view and my mission is when you click on an element / div then the div with the images expand / show. Now that is easy, even for a backend developer, but I would like to:
1. when I click again on the same element, then the element will hide.
2. When I click on another element, then the element that is already expand will hide and the other element that I click on, will expand / show.
I need Script and CSS for this please.
<div class="row">
#foreach(var post in CurrentPage.Children)
{
<div class="col-md-12">
<div class="content equal" onclick="showhide()">
<a href="#post.Url">
<div class="date">#post.CreateDate.ToLongDateString()</div>
<h2>#post.Name</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images(-expand)">
<img src="#post.Image" />
</div>
</div>
}
</div>
Try as follows.
$('.content.equal').click(function() {
$('.content.equal').not(this).next().slideUp();
$(this).next().slideToggle();
});
$('.content.equal a').click(function(event) {
event.preventDefault();
});
.images {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>
I would like to use picture to demonstrate my doubt.
For example, i would like to move Boston to the right, which would under USA_LL - United States - Low Pay. My code is below:
function move(elem){
if($(elem).parent().attr("id")=="left-part"){
$(elem).appendTo('#right-part');
}
else{
$(elem).appendTo('#left-part');
}
}
the html code is below:
<div class="panel-body" id="left-part">
<div class="item" onclick="move(this)">
<div class="row">
<div class="col-md-2 item_position"><p class="item-words">Boston(BOS)</p></div>
<div class="col-md-2 arroww"><img class="img-responsive arrow_1" src="file:///Users/cengcengruihong/Desktop/bootstrap%20exercise/static/images/ic_add_arrowshape_15px#1x.png" alt="arrow" width="18px"></div>
</div>
</div>
</div>
<div class="panel-body" id="right-part">
<div class="item2" id="removed">
<div class="row">
<div class="col-md-2 item_position2"><p class="item-words">CAN-Canada</p></div>
<div class="col-md-2 edit_position" style=""><img class="img-responsive edit" src="ic_edit_lightblue_15px#1x.png" alt="edit"></div>
<div class="col-md-1 remove"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
But the output just put the arrow to the right too. What i want is Boston moved to the right without the arrow and also with the edit and cancel icon.
Anyone could give me a hint would be highly appreciated.
This structure can help you. You can clone element using clone() and then append it to another div using .appendTo().
$('.copy').click(function() {
$(this).parents('h1').clone().append('<span class=remove>×</span>').appendTo('.div-2');
$(this).parents('h1').remove()
})
$(document).on('click', '.remove', function() {
$(this).parents('h1').remove();
})
div {
border: 1px solid;
margin-bottom: 10px;
float:left;
width:48%;
min-height:200px;
}
.div-2{
float:right
}
.div-2 .remove,
.div-1 .copy{
float:right;
cursor:pointer;
}
.div-2 .copy{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-1">
<h1>Element 1 <span class=copy>→</span></h1>
<h1>Element 2 <span class=copy>→</span></h1>
<h1>Element 3 <span class=copy>→</span></h1>
<h1>Element 4 <span class=copy>→</span></h1>
</div>
<div class="div-2">
<h1>Element 5 <span class=remove>×</span></h1>
</div>