How to combine JQuery.show() whit mine working animation so I can display text.
I would like to achieve the same effect like here on this working example .But I don't want to use "data" prefix for displaying text, I want to use jquery.show(). I am having trouble understanding where and how to put mine text for each button and showing it on the middleBubble.
Only difference between mine example and this one, is that mine middleBubble is toggling.
How can I make this work's and implement jquery show() library in working animation?
HTML for mine example:
<section class='circle-animation'>
<div class="container-fluid">
<div class="row">
<div class="hidden-xs hidden-sm">
<div class="col-sm-6 col-sm-offset-3 col-sm-pull-1">
<div id="middlepapir" class="jumbotron">
<div class="row">
<img class="papir img-responsive" src="img/circle/11.png" alt="">
<div class="row">
<div class="move1 col-sm-4 col-xs-4 col-md-push-4">
<img class="position1 round" src="img/circle/off/home-all-icon-off.png">
</div>
</div>
<div class="row">
<div class="move2 col-sm-4 col-xs-4 col-md-push-1">
<img class="position2 round" src="img/circle/off/home-cover-icon-off.png">
</div>
</div>
<div class="row">
<div class="move3 col-sm-4 col-xs-4 col-md-push-7">
<img class="position3 round" src="img/circle/off/home-design-icon-off.png">
</div>
</div>
<div class="row">
<div class="move4 col-sm-4 col-xs-4">
<img class="position4 round" src="img/circle/off/home-diy-icon-off.png">
</div>
</div>
<div class="row">
<div class="move5 col-sm-4 col-xs-4 col-md-push-8">
<img class="position5 round" src="img/circle/off/home-marketing-icon-off.png">
</div>
</div>
<div class="row">
<div class="move6 col-sm-4 col-xs-4 col-md-push-1">
<img class="position6 round" src="img/circle/off/home-other-icon-off.png">
</div>
</div>
<div class="row">
<div class="move7 col-sm-4 col-xs-4 col-md-push-4">
<img class="position7 round" src="img/circle/off/home-special-icon-off.png">
</div>
</div>
<div class="row">
<div class="move8 col-sm-4 col-xs-4 col-md-push-7">
<img class="position8 round" src="img/circle/off/home-vip-icon-off.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Jquery for HTML section:
// jQuery script for are Circle div whit Scroll Reveal Script
$(document).ready(function(){
/*==========================================
SCROLL REVEL SCRIPTS
=====================================================*/
window.scrollReveal = new scrollReveal();
/*==========================================
WRITE YOUR SCRIPTS BELOW
=====================================================*/
$('.round').click(function(){
$('.papir').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
});
});
});
This is more difficult to examine without your CSS, however, it seems that you missed the layout that your example used. They have a separate area for the main text called id="middleBubble". This is the area that the text is being replaced in.
They are performing the replacement here:
$("#middleBubble").html("<p><b>" + $(this).data("bubble1") + "</b><br />" + $(this).data("bubble2") + "</p>");
where "this" is the element (in this case the image) that has been hovered over. The data is stored in the data-bubble1 and data-bubble2 attributes. You could store it there (the replacement text for each section) or you could store it as a keyed JSON object and use the id of the image to key which values to use. I would recommend the later, but to each their own.
Related
I want to use a push, pull in Bootstrap v5.0.0-beta2, but how?
In Bootstrap 3, I'm using it like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
I tried. But I can't. Here is my JSFiddle
In Bootstrap V5, how can I use push and pull?
Please help.
Thanks in advance.
Push/pull is a grid technique. That's now deprecated in favour of flex.
For flex the helper classes are .order-. See BS5 Columns documentation.
You can use global ordering:
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
Or screen size specific ... i.e. .order-sm-*, .order-lg-*, and so on.
If you just want to shift, then use Offsetting Columns
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
EDIT:
In your case you can use:
<div class="row">
<div class="col-md-9 order-last">.col-md-9 <del>.col-md-push-3</del><ins>order-last</ins></div>
<div class="col-md-3 order-first">.col-md-3 <del>.col-md-pull-9</del><ins>order-first</ins></div>
</div>
or:
<div class="row">
<div class="col-md-9 order-2">.col-md-9 <del>.col-md-push-3</del><ins>order-2</ins></div>
<div class="col-md-3 order-1">.col-md-3 <del>.col-md-pull-9</del><ins>order-1</ins></div>
</div>
I have this page that contains dynamic tabs. The content inside the tabs changes depending on the tab the user picks. I want to get that content to be laid out with Masonry so that it looks nice.
Here's the problem: When the user switches tabs the content collapses. Like this:
If the user plays around with the window size it responds and lays out correctly. Like this:
Now I am pretty sure I know what the issue is here. I am using masonry on HTML and not jquery:
<div class="row" data-masonry='{ "columnWidth": ".news-box", "itemSelector": ".news-box" }'>
So I think the issue is that masonry on HTML doesn't work that well if the content isn't loaded (the images, in this case). I have looked around for JQuery approaches to solve this and my problem is that I can't get JQuery to work for some reason. This site is on ASP.NET and I can't get masonry on JQuery going, which is why I am stuck with HTML.
This is what I have tried, without any success, with JQuery:
<script>
$('.row').masonry({
itemSelector: '.news-box',
columnWidth: '.news-box'
});
</script>
I know that piece of code doesn't wait for the images to load. My point is that I don't get any results, even erroneous with that code.
Is there any way I can solve this on HTML? Make it so that when a user switches tabs the contents lay out perfectly to begin with?
Edit: I got this working with vanilla JS
var msnry = new Masonry('.row', {
columnWidth: '.news-box',
itemSelector: '.news-box'
});
Maybe I can get an event handler in here? Tips?
Example code that replicates problem
<!--TABS-->
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>
<!--TAB CONTENT-->
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<!--DUMMY CONTENT FOR MAIN TAB-->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
</div>
</div>
<div id="menu1" class="tab-pane fade">
<!--DUMMY CONTENT FOR SECONDARY TAB-->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
</div>
</div>
</div>
Actual solution, based on your provided code:
var updateMasonry = function(){
$('.tab-pane.active').masonry({
itemSelector: '.well',
})
}
$('a[data-toggle="tab"]').on('shown.bs.tab', updateMasonry);
$(window).on('resize load', updateMasonry)
var updateMasonry = function(){
$('.tab-pane.active').masonry({
itemSelector: '.well',
})
}
$('a[data-toggle="tab"]').on('shown.bs.tab', updateMasonry);
$(window).on('resize load', updateMasonry)
/* you don't need this css */
#media (min-width: 700px) {
.container {margin-top: 80px;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.0/masonry.pkgd.min.js"></script>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>
<!--TAB CONTENT-->
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<!--DUMMY CONTENT FOR MAIN TAB-->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
</div>
</div>
<div id="menu1" class="tab-pane fade">
<!--DUMMY CONTENT FOR SECONDARY TAB-->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
</div>
</div>
</div>
</div>
<!--TABS-->
Initial answer, unfolded...
The <script> tag you posted will be run when it is met. This means it will be executed when:
your DOM object has not yet been fully constructed
your images haven't loaded (because DOM building happens much faster than loading images).
That's why you need to push the execution of your code on the window.load event, which happens when all assets finished loading:
window.onload = function() {
var msnry = new Masonry('.row', {
columnWidth: '.news-box',
itemSelector: '.news-box'
});
};
Also, I'm not entirely sure pasing a selector to columnWidth param is valid. I think it can only take width-like values (you can go 25% to avoid pixels). My guess is it's currently ignored. It also doesn't make much sense, since you're giving it the width of the elements you're resizing...
Further details.
From comments, it results you're trying to apply .masonry() to content placed in inactive tabs. In most tabs mechanisms, this means the tab container has display:none, which makes it not rendered and its width will return 0. Because masonry() uses the container's width to calculate the columns, and place the items, it does work, but all the columns have 0 width. Here's what you probably want to do.
Step 1. Place your masonry init method inside a function, so you can call it when you need it:
var massonryInit = function() {
var msnry = new Masonry('.row', {
columnWidth: '.news-box',
itemSelector: '.news-box'
});
Step 2. Look in the documentation of whatever tabs you are using for a callback method run on tab contents after the tab is shown. If they were Bootstrap tabs we would be talking about shown.bs.tab event, but I know you're not using Bootstrap because you're not using jQuery.
On that method you'll need to call your newly declared massonryInit() function:
var yourTab = document.querySelector('yourTabSelectorHere');
yourTab.addEventListener("yourTabWasRenderedEvent", masonryInit);
Note the above method will only work on a single, specific tab, returned by yourTabselectorHere. If that selector matches more than one element, the event will only be added to first match. To add it to all, you need .querySelectorAll() instead of .querySelector() and you'll need to run a javascript for on that collection and add the event to each.
By default, JavaScript is pretty verbose. That's why jQuery is so popular. It reduces writing common methods and tasks to much shorter syntax. All the above, using jQuery would be:
var masonryInit = function(){
$('.row').masonry({
itemSelector: '.news-box',
});
}
$('yourTabSelectorHere').on('yourTabWasRenderedEvent', masonryInit);
... and it would work on multiple tabs. No for loop needed. It would be internally applied by jQuery.
Adding to the great explanation above, this article is a great read:
https://www.sitepoint.com/bootstrap-tabs-play-nice-with-masonry/
The best - simple solution i find is to destroy and initialized:
Demo (Tabby.js & Masonry): https://codepen.io/ezra_siton/pen/KOLdBO?editors=1111
Removes the Masonry functionality completely. destroy will return the
element back to its pre-initialized state.
$grid.masonry("destroy");
$grid.masonry(masonryOptions);
Flow (Use this with your tabs code): **Click on tabX show contectX - destroy gridX than reload gridX - **works like magic without any complex tricks (Like timeout or resize) :)
The idea comes from official docs (Toggle Masonry):
Masonry - destroy
Codepen: https://codepen.io/desandro/pen/jPyoRE
Docs: https://masonry.desandro.com/methods.html#destroy
Why not using "layout" (reload)?
Because this idea will work only if you change the grid (Append/prepended item, change elements size and so on).
// trigger layout after item size changes
$grid.masonry('layout');
Example (toggle class and update layout):
https://masonry.desandro.com/methods.html#layout-masonry
I my webpage I want background image to be changed each time when mouse hover happens on menu buttons. My code for it is like this
<div class="container-fluid ">
<div id="home-banner-1" class="active-banner">
<div class="main-banner-wrapper">
<img src="images/frontpage_bg.jpg" class="upload">
</div>
<div class="col-md-4 col-sm-6 visible-lg visible-md visible-sm front-text">
<p>Thethe world.</p>
</div>
</div>
<div id="home-banner-2" style="display:none">
<div class="main-banner-wrapper">
<img src="images/frontpage_bg_rigging.jpg" class="upload">
</div>
<div class="col-md-4 col-sm-6 visible-lg visible-md visible-sm front-text">
<p>Thethe world.</p>
</div>
</div>
<div id="home-banner-3" style="display:none">
<div class="main-banner-wrapper">
<img src="images/frontpage_bg-Hatches.jpg" class="upload">
</div>
<div class="col-md-4 col-sm-6 visible-lg visible-md visible-sm front-text">
<p>The around the world.</p>
</div>
</div>
</div>
<!--content-->
<div class="container-fluid">
<div class="main-logo-panel">
<div class="box">
<div class="col-md-12 col-sm-12 ">
<div class="col-md-3 col-sm-3 col-xs-4 main-logo"><img src="images/logo_frontpage.png" class="img-responsive"></div>
<div class="col-md-9 col-sm-9 col-xs-8 main-menu">
<ul class="list-inline home-menu-list">
<li>Rigging</li>
<li>Hatches </li>
<li>Stoppers</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".home-menu-list li a").hover(function () {
var bannerClass = '#home-banner-' + $(this).attr('id');
$('.active-banner').fadeOut();
$('.active-banner').removeClass('active-banner');
$(bannerClass).fadeIn();
$(bannerClass).addClass('active-banner');
});
});
</script>
everything looks okay, Except when the hover happens multiple back ground images fadeIn's not only the required one. Can any one point out what I am doing wrong here?
I think the problem is the animation queue, use .stop() to stop the execution of any previous animations in the queue
$(document).ready(function () {
$(".home-menu-list li a").mouseenter(function () {
var bannerClass = '#home-banner-' + $(this).attr('id');
$('.active-banner').not(bannerClass).stop().fadeOut().removeClass('active-banner');
$(bannerClass).stop().fadeIn().addClass('active-banner');
});
});
Also since you are not doing any operation on mouseleave, use mouseenter event directly instead of using hover
I have a jQuery slide down animation, but I would like to implement it to the paste section bellow.
Content is for a smaller device so every button need to have slide down element attached on him self.
Can some one show me how can I do this.
Mine jQuery slideDown code:
$(".squere").click(function(){
$(".content").hide(800);
$(".squere").removeClass("active");
$(this).addClass("active");
$(this).next(".content").slideDown(1000);
});
Mine Content:
<div id="squere" class='container hidden-lg hidden-md '>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle homepageGridDefault" src="img/circle/home-all-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-cover-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-diy-icon-off.png">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-marketing-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">Strange book here :)</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-other-icon-off.png">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-special-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-vip-icon-off.png">
</div>
<div class="col-sm-4 col-xs-4">
<img class="img-responsive img-circle" src="img/circle/home-designe-icon-off.png">
</div>
</div>
Fiddle example, this is the whole dive and it is responsive so do not mind the upper circle in the html section.
Simply use sildeDown and slideUp can resolve your problem.Try this fiddle. Just used slideUp and slide Down method in place of adding and removing active class.
$(document).ready(function(){
$('.content').hide();
});
$(document).on('click',".center",function(){
$(".content").slideUp(300);
$(this).next(".content").slideDown(300);
});
Ok. I've just modified your code and added just 3 images and a content div as below:
DEMO
HTML
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 1
</div>
</div>
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 2
</div>
</div>
<div class="col-sm-4 col-xs-4">
<a href="#" class="center">
<img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg" class="img-circle" alt=""/>
</a>
<div class="content">
Content Image 3
</div>
</div>
</div>
</div>
JS
$(document).ready(function(){
$('.content').hide();
});
$(document).on('click',".center",function(){
if($(this).hasClass('active'))
{
return;
}
$(".content").hide(800);
$(".center").removeClass("active");
$(this).addClass("active");
$(this).next(".content").show(1000);
});
Note: These are just basic animations. If you really want to perform some extra-ordinary animations then you need to check on .animate jquery function.
Please use id selector # instead of class selector .
$("#squere").click(function(){
$(".content").hide(800);
$("#squere").removeClass("active");
$(this).addClass("active");
$(this).next(".content").slideDown(1000);
});
Might be it is your issue.
$("#squere").removeClass("active");
$(this).addClass("active");
These lines will not make any effect, because you are removing and adding same css class.
Based on the code below & using bootstrap, I have a grid layout with multiple .block components, each containing an image and a title. The images are larger than the column size so that they can resize to full width for responsive screen sizes (done with the CSS listed below). each image may be different heights & widths.
This works just fine as long as you don't define the image height in the attributes. As soon as you add the height it distorts the image proportions.
Now however, I need to set the image heights for some javascript so that it loads properly. Without setting the heights, the js is loading too quickly and the element heights are incorrect basically.
Right now I'm getting around this by using a setTimeout() to delay the js script by 1.5 seconds. This obviously isn't ideal as for someone with a slow connection it won't be long enough.
My Question: Is there a way to either (A) delay the js until all images have loaded on the page or (B) set the height for each image in a way that it will resize with the image width and keep my proportions correct for the image with css?
HTML:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image1.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image2.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image3.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image4.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image5.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image6.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image7.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image8.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image9.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
</div>
</div>
CSS:
.block img{
max-width: 100%;
}
To delay the Js to run until all images are loaded you should use jquery's
$(window).load(function(){
//your code here
});
or you can resize images when each one is loaded
$('img').each($(this).load(function(){
//resizing code here with $(this).height or $(this).width() maybe
});
to check the bootstrap you can use
$(window).resize()
to do the same and that way resizing on the browser will rerun the js in load. This is how I test responsiveness with images.