I'm trying to apply transitions as explained in here, but some cards fail to do a second transition/animation. Is it CSS, Semantic UI or me? You can try adding more cards to the test.
Edit:
As #niba requested, I made a jsfiddle to show what is
happening. Look that I named cards from "Card 0" to "Card 7". Run
several times and you may see some are missing.
Here is the code:
$(document)
.ready(function() {
$('.card')
.transition('fade')
.transition('fade', function() {
console.log('finished');
});
<div class="ui cards">
<div class="green card">
<div class="image">
<img src="img/1.jpg">
</div>
<div class="content">
<a class="header">Header</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">Description</div>
</div>
</div>
<div class="green card">
<div class="image">
<img src="img/2.jpg">
</div>
<div class="content">
<a class="header">Header</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">Description</div>
</div>
</div>
<div class="green card">
<div class="image">
<img src="img/3.jpg">
</div>
<div class="content">
<a class="header">Header</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">Description</div>
</div>
</div>
</div>
Related
thumbnail screenshot also attachedi have created thumbnail in my dashboard.but these thumbnails are collapsing each others and the last thumbnail in a row showing up full screen.kindly help me
<div class="container">
<h1>Trending Groups</h1>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
</div>
</div>
Try giving height and width to your image also dearch in google little bit and then post your questions on this that will help you.
I've been trying to figure out why my modals won't show up anymore after I close them. I have to refresh the page every time if I want to see the info from the modals again.
When I first load the page and click on the first card it will show me the modal, but then no matter how many times I click the first card it won't load the modal anymore because it removes it from where I set it and moves it to a div with the following classes "ui dimmer modals page transition visible active". Any idea how I can keep my modals where they were in the DOM?
Below is my code:
HTML:
<div class="ui three stackable cards">
<div class="card">
<div class="image">
<img src="/Assets/img/products/tfplus.jpg">
</div>
<div class="content">
<div class="header">
4Life Transfer Factor Plus
</div>
</div>
<div class="ui modal">
<i class="close icon"></i>
<div class="header">
4Life Transfer Factor Plus
</div>
<div class="image content">
<div class="ui medium image">
<img src="/Assets/img/products/tfplus.jpg">
</div>
<div class="description">
<div class="ui header">Ingrediente:</div>
<ul>
<li>Zinc</li>
<li>Colostru bovin</li>
<li>Galbenus de ou</li>
<li>Cordyvant: complex de polizaharide cu o proprietate exclusiva - IP6 (acid fitic)</li>
<li>Extract de boabe de soia</li>
<li>Cordyceps sinensis</li>
<li>Beta-glucani</li>
<li>Extract de Agaricus blazeii</li>
<li>Extract de pulbere de Aloe Vera</li>
<li>Frunze de maslin</li>
<li>Ciupercile Maitake si Shiitake</li>
<li>Pulbere de coaja de lamaie</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card">
<div class="image">
<img src="/Assets/img/products/tri-factor.jpg">
</div>
<div class="content">
<div class="header">
4Life Transfer Factor
</div>
</div>
<div class="ui modal">
<i class="close icon"></i>
<div class="header">
4Life Transfer Factor
</div>
<div class="image content">
<div class="ui medium image">
<img src="/Assets/img/products/tri-factor.jpg">
</div>
<div class="description">
<div class="ui header">Ingrediente:</div>
<ul>
<li>Colostru bovin (300 mg in fiecare capsula)</li>
<li>Galbenus de ou</li>
</div>
</div>
</div>
</div>
</div>
</div>
JS:
$('.card').click(function() {
$(this).children('.ui.modal').modal({
blurring: true
}).modal('show');
});
Found a workaround by adding one extra class to the modal ('productx') and the same class to the card, where x is the product number. the HTML & JS for this looks as follows:
HTML:
<div class="card product2">
<div class="image">
<img src="/Assets/img/products/tri-factor.jpg">
</div>
<div class="content">
<div class="header">
4Life Transfer Factor
</div>
</div>
<div class="ui modal product2">
<i class="close icon"></i>
<div class="header">
4Life Transfer Factor
</div>
<div class="image content">
<div class="ui medium image">
<img src="/Assets/img/products/tri-factor.jpg">
</div>
<div class="description">
<div class="ui header">Ingrediente:</div>
<ul>
<li>Colostru bovin (300 mg in fiecare capsula)</li>
<li>Galbenus de ou</li>
</div>
</div>
</div>
</div>
JS:
$('.card').click(function() {
$('.ui.modal.' + $(this).attr('class').split(' ')[1]).modal('show');
});
Basically I'm finding the clicked '.card' product class and using that to open the modal that has the same class in it's div, thus ensuring that the modal is opened every time no matter where it is in the DOM.
Hey guys having a problem with masonry plugin.
I'm trying to load the simple layout using percentPosition: true; and the problem is when everything loads, layout loads without the gutter and adds it later which causes all images to shift and it looks quiet annoying.
cant seem to figure out the solution to load it the way that nothing would shift. Bellow is the code:
and here is the link: dev3.oaknyc.com
<div class="section group">
<div class="col-sizer"></div>
<div class="gutter-sizer"></div>
<div class="col col-span2">
<img src={{media url="img/10-21/1.jpg"}}>
<a href={{store url="blog/introducing-hope-shoes-more/"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Introducing:</span>
<h3>HOPE for women + men</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/2.jpg"}}>
<a href={{store url="women/new-items.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Just In:</span>
<h3>HENRIK VIBSKOV</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/3.jpg"}}>
<a href={{store url="women/designers/oak.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3>OAK Collection Women</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/4.jpg"}}>
<a href={{store url="men/designers/oak-collection.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3> OAK Collection Men</h3>
</div>
</div>
</a>
</div>
<div class="col col-span2">
<img src={{media url="wysiwyg/blanco/img/10-21/5.jpg"}}>
<a href={{store url="women/designers/laura-siegel.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3>Laura Siegel</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/6.jpg"}}>
<a href={{store url="women/accessories.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3>Women's Accessories</h3>
</div>
</div>
</a>
</div>
<script src="https://npmcdn.com/imagesloaded#4.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
jQuery('.section').imagesLoaded(function(){
jQuery('.section').masonry({
// options
columnWidth: '.col-sizer',
itemSelector: '.col',
gutter: '.gutter-sizer',
percentPosition: true
});
});
});
//]]>
</script>
I'm trying to use modals with cards in Semantic UI. The concept is to click on the button on the card and display a modal with an image and description. I have 48 cards and I need different images with an every click on the card --> When I click on the card nr 1 - it shows the image number1, when I click on the card number2- it shows the image number 2, when I click on the card number 48- it shows the image nr 48 etc.
How can I get automatically each image from the card?
I'm a quite beginner with this stuff and I'm wondering if there is possible to use .append() with .each() in that case? Like this:
<script>
$(function(){
$('.ui.modal > .image').append($('.dimage')); //it adds only one image, but maybe there's a way to adds other ones using this script with minor modifications
});
</script>
This is excerpt from my code:
<!--head-->
<script>
$(function(){
$('.center > .ui.inverted.button').click(function(){
$('.ui.modal').modal('show');
});
});
</script>
<!-- my body-->
<div class="ui basic container">
<div class="ui four doubling special cards">
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">Show</div>
</div>
</div>
</div><!--ui dimmer-->
<img src="images/snacks/snack9.jpg">
</div>
<div class="content">
<a class="header">Snacks</a>
<div class="meta">
<span class="date">veggie/fruity</span>
</div>
</div>
</div><!--card-->
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">Show</div>
</div>
</div>
</div><!--ui dimmer-->
<img src="images/snacks/snack10.jpg">
</div>
<div class="content">
<a class="header">Snacks</a>
<div class="meta">
<span class="date">veggie/fruity</span>
</div>
</div>
</div><!--card-->
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">Show</div>
</div>
</div>
</div><!--ui dimmer-->
<img src="images/snacks/snack11.jpg">
</div>
<div class="content">
<a class="header">Snacks</a>
<div class="meta">
<span class="date">veggie/fruity</span>
</div>
</div>
</div><!--card-->
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">Show</div>
</div>
</div>
</div><!--ui dimmer-->
<img class="dimage" src="images/snacks/snack12.jpg">
</div>
<div class="content">
<a class="header">Snacks</a>
<div class="meta">
<span class="date">veggie/fruity</span>
</div>
</div>
</div><!--card-->
</div><!--ui four doubling special cards-->
<div class="ui modal">
<i class="close icon"></i>
<div class="header">
Modal Title
</div>
<div class="image content">
<div class="image">
An image can appear on the left
</div>
<div class="description">
A description can appear on the right
</div>
</div>
</div>
</div><!--ui basic container-->
Try the code below: https://jsfiddle.net/y7nd7qxw/. I had to adjust your card HTML a bit because the button wasn't showing up, but with the CSS you probably have it should be fine how you had it. Basically what I'm doing is storing the modal information on the data- attributes of your button. Then I'm getting those values in the click event and assigning them to the elements in the modal.
<!--head-->
<script>
$(function() {
var modal = $('#my-modal'), // hold reference to modal
modalImg = $('#modal-img'), // hold reference to image in modal
modalDesc = $('#modal-desc'); // hold reference to description in modal
//give your button an easier class reference
$('.show-modal').on('click', function() {
var button = $(this);
modalImg.attr('src', button.data('img'));
modalDesc.text(button.data('desc'));
modal.modal('show');
});
});
</script>
<!-- my body-->
<div class="ui basic container">
<div class="ui four doubling special cards">
<div class="card">
<div class="blurring dimmable image">
<div class="ui inverted button show-modal" data-desc="here is some description" data-img="http://placehold.it/200">Show</div>
<!--ui dimmer-->
<img src="images/snacks/snack9.jpg">
</div>
<div class="content">
<a class="header">Snacks</a>
<div class="meta">
<span class="date">veggie/fruity</span>
</div>
</div>
</div>
<!--card-->
<div class="card">
<div class="blurring dimmable image">
<div class="ui inverted button show-modal" data-desc="some other description description" data-img="http://placehold.it/400">Show</div>
<!--ui dimmer-->
<img src="images/snacks/snack9.jpg">
</div>
<div class="content">
<a class="header">Snacks</a>
<div class="meta">
<span class="date">veggie/fruity</span>
</div>
</div>
</div>
<!--card-->
</div>
<!--ui four doubling special cards-->
<div class="ui modal" id="my-modal">
<i class="close icon"></i>
<div class="header">
Modal Title
</div>
<div class="image content">
<div class="image">
<img src="" alt="" id="modal-img">
</div>
<div class="description">
<p id="modal-desc"></p>
</div>
</div>
</div>
</div>
<!--ui basic container-->
I'm working on this site here. http://opennetsummit.wpengine.com/
The three images in the second section down trigger the bootstrap collapse function on click. I'd like them to show on hover, and hide when not hovering.
What do I need to change?
<script>
$(".paneltab1").hover(
function() {
$('#collapsePanel1').collapse('show');
}, function() {
$('#collapsePanel1').collapse('hide');
}
);
</script>
<div class="row panel-heading">
<div class="container">
<div class="col-xs-3">
<a class="paneltab1" data-toggle="collapse" href="#collapsePanel1" aria-expanded="false" aria-controls="collapsePanel1">
<div class="panel-tabs">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-rocket-icon.png">
<h3>Workshops</h3>
</div>
</a>
</div>
<div class="col-xs-3 ">
<a class="" data-toggle="collapse" href="#collapsePanel2" aria-expanded="false" aria-controls="collapsePanel2">
<div class="panel-tabs">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-circles-icon.png">
<h3>Open Networking Summit</h3>
</div>
</a>
</div>
<div class="col-xs-3 ">
<a class="" data-toggle="collapse" href="#collapsePanel3" aria-expanded="false" aria-controls="collapsePanel3">
<div class="panel-tabs">
<div>
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
<h3>Webinars</h3>
</div>
</div>
</a>
</div>
<div class="col-xs-3 ">
<div class="panel-tabs">
<div class="mid-form">
<h3>Get Updates</h3>
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel1">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Defy Protocol </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel2">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Panel 2 </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel3">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Panel 3 </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
You can use jquery's hover along with bootstrap's collapse javascript, something like this:
$(".panel-tabs").hover(
function() {
$('#collapsePanel3').collapse('show');
}, function() {
$('#collapsePanel3').collapse('hide');
}
);
The first function(){} is for when the mouse enters, the second for when it leaves.
More info here:
http://api.jquery.com/hover/
http://getbootstrap.com/javascript/#collapse-methods
I changed the class from "collapse" to "collapse in" on mouseover and from "collapse in" to "collapse" on mouseout using GetElementbyID and it worked fine.
document.getElementById("panelid").className = "collapse in";