I'm using Scroll Reveal for on-scroll reveal animation. what I want to do is to reveal child items of a container sequentially when its position is reached. How can I do that? I'm finding it hard to understand its documentation.
This is my code,
<div class="container-fluid features" style="padding-bottom: 75px;">
<h2 style="text-align: center;">Features</h2>
<div class="row">
<div class="col-md-4">
<div class="featureOne">
<div class="row">
<div class="col-md-10">
<h3>Lorem</h3>
</div>
<div class="col-md-2">
<img src="img/cog-upd.png" style="margin-top: 42px;position: absolute;right: -55px;" />
</div>
</div>
</div>
<div class="featureTwo">
<div class="row">
<div class="col-md-10">
<h3>Lorem</h3>
</div>
<div class="col-md-2">
<img src="img/task-upd.png" style="margin-top: 50px;position: absolute;right: -55px;" />
</div>
</div>
</div>
<div class="featureThree">
<div class="row">
<div class="col-md-10">
<h3>Lorem</h3>
</div>
<div class="col-md-2">
<img src="img/payment-upd.png" style="margin-top: 50px;position: absolute;right: -55px;" />
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img class="ipad" src="img/ipad-center.png" style="display:block;margin:auto;padding-top: 35px;" />
</div>
<div class="col-md-4">
<div class="featureFour">
<div class="row">
<div class="col-md-2">
<img src="img/integration-upd.png" style="margin-top: 50px;position: absolute;left: -55px;" />
</div>
<div class="col-md-10">
<h3>Lorem</h3>
</div>
</div>
</div>
<div class="featureFive">
<div class="row">
<div class="col-md-2">
<img src="img/ach-upd.png" style="margin-top: 50px;position: absolute;left: -55px;" />
</div>
<div class="col-md-10">
<h3>Lorem</h3>
</div>
</div>
</div>
<div class="featureSix">
<div class="row">
<div class="col-md-2">
<img src="img/config-upd.png" style="margin-top: 50px;position: absolute;left: -55px;" />
</div>
<div class="col-md-10">
<h3>Lorem</h3>
</div>
</div>
</div>
</div>
</div>
</div>
Scroll reveal code,
<script>
window.sr = ScrollReveal();
sr.reveal('.ipad', {
duration: 500,
origin: 'bottom'
});
sr.reveal('.featureOne', {
duration: 1000,
origin: 'left',
delay: 500
});
sr.reveal('.featureTwo', {
duration: 1000,
origin: 'left',
delay: 800
});
sr.reveal('.featureThree', {
duration: 1000,
origin: 'left',
delay: 1300
});
sr.reveal('.featureFour', {
duration: 1000,
origin: 'left',
delay: 1800
});
sr.reveal('.featureFive', {
duration: 1000,
origin: 'left',
delay: 2200
});
sr.reveal('.featureSix', {
duration: 1000,
origin: 'left',
delay: 2600
});
</script>
Related
I am new to jQuery and confused about simple logic and need your help to sort the mess. I am using HTML, CSS, jQuery to display some data by on click the jQuery event on selector '.class'.
I have successfully opened the data for the first time for a single div panel. But if I used the same HTML twice then both of the panels display data at the same. Below is the code
jQuery(document).ready(function() {
jQuery(".flip").click(function () {
jQuery(this).siblings(".panel").slideToggle("slow");
});
});
.panel, .flip {
padding: 30px;
text-align: center;
background-color: transparent;
font-weight: bold;
font-size: 28px;
}
.panel {
padding: 50px;
display: none;
}
.flip{
cursor:pointer;
}
.cards-header.flip {
background-color: #001c47;
color: #fff;
margin-bottom: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- navigation end -->
<div class="heading-wrapper">
<h1>Ingredient of the Month</h1>
</div>
<div class="wrapper">
<div class="cards-header flip">
Year - 2022
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<div class="ingredient-month-wrapper">
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="" alt="Shea Butter" />
<div class="ingredient-month-wrapper">
<h2>January'22, Shea Butter</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cards-header flip">
Year - 2021
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-carrot-seed-oil.jpg" alt="Carrot Seed Oil" />
<div class="ingredient-month-wrapper">
<h2>December'21, Carrot Seed Oil</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-olive-oil.jpg" alt="Olive Oil" />
<div class="ingredient-month-wrapper">
<h2>November'21, Olive Oil</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-lemon.jpg" alt="Lemon" />
<div class="ingredient-month-wrapper">
<h2>October'21, Lemon</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-lycopene.jpg" alt="Lycopene" />
<div class="ingredient-month-wrapper">
<h2>September'21, Lycopene</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-peach.jpg" alt="Peach" />
<div class="ingredient-month-wrapper">
<h2>August'21, Peach</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-cucumber.jpg" alt="Cucumber" />
<div class="ingredient-month-wrapper">
<h2>July'21, Cucumber</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-avocado.jpg" alt="Avocado" />
<div class="ingredient-month-wrapper">
<h2>June'21, Avocado</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-watermelon.jpg" alt="Watermelon" />
<div class="ingredient-month-wrapper">
<h2>May'21, Watermelon</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="ingredient-of-the-month/coffee.html" title="Coffee" target="_blank" ><img class="img-fluid" src="./assets/img/Carousel-cofee.jpg" alt="Coffee" /></a>
<div class="ingredient-month-wrapper">
<h2>April'21, Coffee</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-kakaduplum.jpg" alt="Kakadu Plum" />
<div class="ingredient-month-wrapper">
<h2>March'21, Kakadu Plum</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
So I want to open one by one i.e. when someone clicks on the year 2021 then it will open its data and if someone clicks on 2022 then that year div data open.
How to achieve the same?
jQuery(document).ready(function() {
jQuery(".flip").click(function () {
jQuery(this).next(".panel").slideToggle("slow");
});
});
.panel, .flip {
padding: 30px;
text-align: center;
background-color: transparent;
font-weight: bold;
font-size: 28px;
}
.panel {
padding: 50px;
display: none;
}
.flip{
cursor:pointer;
}
.cards-header.flip {
background-color: #001c47;
color: #fff;
margin-bottom: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- navigation end -->
<div class="heading-wrapper">
<h1>Ingredient of the Month</h1>
</div>
<div class="wrapper">
<div class="cards-header flip">
Year - 2022
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<div class="ingredient-month-wrapper">
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="" alt="Shea Butter" />
<div class="ingredient-month-wrapper">
<h2>January'22, Shea Butter</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cards-header flip">
Year - 2021
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-carrot-seed-oil.jpg" alt="Carrot Seed Oil" />
<div class="ingredient-month-wrapper">
<h2>December'21, Carrot Seed Oil</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-olive-oil.jpg" alt="Olive Oil" />
<div class="ingredient-month-wrapper">
<h2>November'21, Olive Oil</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-lemon.jpg" alt="Lemon" />
<div class="ingredient-month-wrapper">
<h2>October'21, Lemon</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-lycopene.jpg" alt="Lycopene" />
<div class="ingredient-month-wrapper">
<h2>September'21, Lycopene</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-peach.jpg" alt="Peach" />
<div class="ingredient-month-wrapper">
<h2>August'21, Peach</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-cucumber.jpg" alt="Cucumber" />
<div class="ingredient-month-wrapper">
<h2>July'21, Cucumber</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-avocado.jpg" alt="Avocado" />
<div class="ingredient-month-wrapper">
<h2>June'21, Avocado</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-watermelon.jpg" alt="Watermelon" />
<div class="ingredient-month-wrapper">
<h2>May'21, Watermelon</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="ingredient-of-the-month/coffee.html" title="Coffee" target="_blank" ><img class="img-fluid" src="./assets/img/Carousel-cofee.jpg" alt="Coffee" /></a>
<div class="ingredient-month-wrapper">
<h2>April'21, Coffee</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-kakaduplum.jpg" alt="Kakadu Plum" />
<div class="ingredient-month-wrapper">
<h2>March'21, Kakadu Plum</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Use next instead of siblings
JQuery(document).ready(function() {
JQuery(".flip").click(function () {
JQuery(this).next(".panel").slideToggle("slow");
});
});
Working codepen. https://codepen.io/rvtech/pen/zYEWxqR
$(".flip").click(function(e) {
$(this).next().slideToggle()
})
https://codepen.io/hardik9193/pen/yLzKNEZ
I have a problem with owl carousel and till now I don't have any ideas how to fix it.
So on the image 1 you can see the normal behaviour of the slider. On the second one you will see the extended functionality of it. The idea is very simple, when user click on the element, he should expand it, but when the element is expanded all other element goes to 2 rows and I don't want to happen.
Image 1
Image 2
also Source code of one element
<div class="element box-shadow">
<div class="child">
<div class="row">
<div class="col-xs-12 col-md-8">
<span>05.</span>
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
<p class="view-more">View more <img src="assets/images/view-more.svg" /></p>
</div>
<div class="col-xs-12 col-md-4 portfolio-image" >
<img src="assets/images/inventive-small-img.png" />
</div>
</div>
</div>
<div class="parent hidden">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="row " style="margin-bottom: 15px;" >
<div class="col-xs-12 col-md-3">
<img src="assets/images/inventive-small-img.png" style="width:34px" class="rounded-circle">
</div>
<div class="col-xs-12 col-md-9 text no-padding" >
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 social-el" style="padding-left:0;">
<div class="stars">
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/half_star.svg" />
<img class="mr-2" src="assets/images/empty_star.svg" />
<img src="assets/images/empty_star.svg" />
</div>
</div>
</div>
<img src="assets/images/inventive-studio-img.png" class="img-fluid">
<div class="content">
<p >Designing and producing catalogs, sales sheets, proposals, scenario illustrations, brochures, posters, custom displays for trade shows and in-house exhibits and all others items.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<a class="view-less" href="#"><img src="assets/images/view-more.svg"/> View Less</a>
</div>
<div class="col-xs-12 col-md-6">
<div class="stars">
<img src="assets/images/Facebook.svg"/>
<img class="mr-10" src="assets/images/twitter.svg"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
also will share and jquery code
$(".owl-carousel").owlCarousel({
margin:10,
loop: true,
autoWidth: true,
items:3,
rewind: true,
autoplay: true,
responsiveClass:true,
});
$('.work').each(function(i, el) {
$parent = $(el);
$('.element', $parent).each(function(i, item) {
$element = $(item)
$element.on('click', function(e) {
$current = $(this)
console.log($current)
if ($('.parent', $current).hasClass('hidden')) {
$('.parent', $current).removeClass('hidden');
$current.addClass('expand-element');
$current.css('border-radius', 10)
$('.child', $current).addClass('hidden');
} else {
$current.removeClass('expand-element');
$('.parent', $current).removeClass('visible').addClass('hidden');
$current.css('border-radius', 20)
$('.child', $current).removeClass('hidden');
}
})
})
})
Im using the Slick-Slider as part of a responsive website. the problem is when you resize the browser the content panels in the slider will not swipe and gets stuck.
If you resize the browser to phone size and swipe to slide 5. Then resize the browser to full width.
You will see that you can no longer see slide 1 to 4 and the first slider will show on slide 5 onward.
HTML file code:
<div class="container-fluid">
<h1 class="text-danger">Recommended For You / Latest Offer</h1>
<div id="ig-offer" class="row">
<div id="ig-offer-6-latest" class="slider responsive">
<div class="col-sm-2">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-acc">Account</div>
<img src="../../images/game/assassin.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">Player of the Month: Messi</h5></div>
<div class="offer-desc text-muted small">
FIFA 15
<br />
Xbox ONE
</div>
<h4 class="txt-1line"><b>RM 103.90</b></h4>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-cur">Currency</div>
<img src="../../images/game/ff-tactics.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">5,000 GOLD</h5></div>
<div class="offer-desc text-muted small">
1 Gold = RM 0.000703
<br />
Aegwynn - Alliance
</div>
<h4 class="txt-1line"><b>RM 23.90</b></h4>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-itm">Item</div>
<img src="../../images/game/harvest-moon.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">Legendary Weapon's Raw Materia</h5></div>
<div class="offer-desc text-muted small">
Guild Wars 2
<br />
All Servers
</div>
<h4 class="txt-1line"><b>RM 486.56</b></h4>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-bss">Boosting</div>
<img src="../../images/game/hero.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">10,000 GOLD</h5></div>
<div class="offer-desc text-muted small">
1 Gold = RM 0.000703
<br />
Aegwynn - Alliance
</div>
<h4 class="txt-1line"><b>RM 48.50</b></h4>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-crd">Card</div>
<img src="../../images/game/lol.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">Legendary Weapon's Raw Materia</h5></div>
<div class="offer-desc text-muted small">
World of Warcraft
<br />
Firetree - Horde
</div>
<h4 class="txt-1line"><b>RM 263.10</b></h4>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-cur">Currency</div>
<img src="../../images/game/reckoning.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">Something of Something: Epicness</h5></div>
<div class="offer-desc text-muted small">
Guild Wars 2
<br />
All Servers
</div>
<h4 class="txt-1line"><b>RM 82.50</b></h4>
</div>
</div>
</div>
</div>
</div>
</div>
index.js :
jQuery("div[id^='ig-offer-6-']").slick({
dots: false,
infinite: true,
speed: 250,
slidesToShow: 6,
slidesToScroll: 1,
prevArrow: '<a class="slick-prev slick-nav slick-left" role="button" data-role="none"><span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span></a>',
nextArrow: '<a class="slick-next slick-nav slick-right" role="button" data-role="none"><span class="glyphicon glyphicon-chevron-right" aria-hidden="false"></span></a>',
responsive: [
{breakpoint: 1024, settings: {slidesToShow: 3}},
{breakpoint: 600, settings: {slidesToShow: 2}},
{breakpoint: 480, settings: {slidesToShow: 1}}
]
});
The slick.js is a default javascript download from github.
Thanks for your help.
Put below script then can able to solve the solution.
<script>
var $slider = $('#your-element'); // my slider
$(window).resize(function() {
$slider.slick('slickGoTo', 0);
});
</script>
Ps* this is only for slider with no animation.
I was setting up a slideshow using the first version of cycle and then thought I'd update to the newest version, but once I linked the file, my slideshow broke. I'm not sure why it is working in version 1 but not 2. I even get a console message : [cycle2] --c2 init-- .
Ideas?
HTML:
<div class="row">
<div class="span1">
<div class="chevron">
<i class="icon-chevron-left"></i>
</div>
</div>
<div class="span8">
<div class="slide-show-container noselect">
<div class="slide">
<img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" />
</div>
<div class="slide">
<div id="highcharts01"> </div>
</div>
<div class="slide">
<div id="highcharts02"> </div>
</div>
<div class="slide">
<img src="http://www.h3dwallpapers.com/wp-content/uploads/2014/08/Landscape-wallpapers-1.jpeg" />
</div>
</div>
</div>
<div class="span1">
<div class="chevron">
<i class="icon-chevron-right"></i>
</div>
</div>
</div>
<div class="row" id="slideNav">
<div class="offset1 span8 noselect" id="circleNav">
</div>
</div>
JS:
$('.slide-show-container').cycle({
fx: 'fade',
speed: 500,
timeout: 0,
next: ".icon-chevron-right",
prev: ".icon-chevron-left",
pager: "#circleNav",
after: initCharts
});
What are the differences between your code, and the one below?
Deleted after: initCharts and timeout: 0 from your JS.
Added jquery.cycle.all.js and jquery.min.js
Added position: relative; to .slide-show-container
Added position: absolute; and z-index: 5; for images
It's working now, however I guess your pagers won't show up because I don't have the CSS containing the images for divs.
$(document).ready(function() {
$('.slide-show-container').cycle({
fx: 'fade',
speed: 500,
next: ".icon-chevron-right",
prev: ".icon-chevron-left",
pager: "#circleNav"
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div class="row">
<div class="span1">
<div class="chevron">
<i class="icon-chevron-left"></i>
</div>
</div>
<div class="span8">
<div class="slide-show-container noselect" style="position: relative;">
<div class="slide">
<img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" width="180" height="180" style="position: absolute; z-index: 5;"/>
</div>
<div class="slide">
<div id="highcharts01"> </div>
</div>
<div class="slide">
<div id="highcharts02"> </div>
</div>
<div class="slide">
<img src="http://www.h3dwallpapers.com/wp-content/uploads/2014/08/Landscape-wallpapers-1.jpeg" width="180" height="180" style="position: absolute; z-index: 5;"/>
</div>
</div>
</div>
<div class="span1">
<div class="chevron">
<i class="icon-chevron-right"></i>
</div>
</div>
</div>
<div class="row" id="slideNav">
<div class="offset1 span8 noselect" id="circleNav" >
</div>
</div>
Hope that someway I could help with this, also you wanted something like this.
I am using FancyBox lightbox from "http://fancyapps.com/fancybox/"
I want to show a "dynamic table" generating at runtime, in this Lightbox.
Please find the code of Table which will be generation at runtime on click of any <div class="bin">
<div class="vault overflowHidden">
<div class="floatLeft">
<div class="bin" data-cols="4" data-rows="3">
<div class="number">S1</div>
<div class="type">4x3</div>
<div class="description">
Designed to hold max size packages.
<br>
Est. capacity: 23 pkgs
</div>
</div>
<div class="bin" data-cols="5" data-rows="4">
<div class="number">S3</div>
<div class="type">5x4</div>
<div class="description">Est. capacity: 34.5 packages</div>
</div>
<div class="bin" data-cols="7" data-rows="4">
<div class="number">S4</div>
<div class="type">7x4</div>
<div class="description">Est. capacity: 72.8 packages</div>
</div>
<div class="bin" data-cols="9" data-rows="5">
<div class="number">S5</div>
<div class="type">9x5</div>
<div class="description">Est. capacity: 121 packages</div>
</div>
<div class="bin" data-cols="4" data-rows="3">
<div class="number">S6</div>
<div class="type">4x3</div>
<div class="description">
Designed to hold max size packages.
<br>
Est. capacity: 23 packages
</div>
</div>
<div class="bin repack" data-cols="9" data-rows="5">
<div class="number">S8</div>
<div class="type">9x5 Repack</div>
<div class="description">Est. capacity: 117 packages</div>
</div>
</div>
<div class="floatRight">
<div class="bin repack" data-cols="9" data-rows="5">
<div class="number">S2</div>
<div class="type">9x5 Repack</div>
<div class="description">Est. capacity: 117 packages</div>
</div>
<div class="loader">
<div class="lot" data-cols="8" data-rows="1">
<div class="number">L1</div>
<div class="type">42-50.5</div>
</div>
<div class="lot" data-cols="7" data-rows="1">
<div class="number">L2</div>
<div class="type">50.5-77.5</div>
</div>
<div class="lot" data-cols="4" data-rows="1">
<div class="number">L3</div>
<div class="type">93.6-119</div>
</div>
<div class="lot repack" data-cols="8" data-rows="1">
<div class="number">L4</div>
<div class="type">Repack</div>
</div>
<div class="lot removed">
<div class="number">L5</div>
<div class="type">42-50.5</div>
</div>
<div class="lot" data-cols="4" data-rows="1">
<div class="number">L6</div>
<div class="type">93.6-119</div>
</div>
<div class="lot" data-cols="8" data-rows="1">
<div class="number">L7</div>
<div class="type">42-50.5</div>
</div>
<div class="lot removed">
<div class="number">L8</div>
<div class="type">42-50.5</div>
</div>
<div class="lot" data-cols="7" data-rows="1">
<div class="number">L9</div>
<div class="type">50.5-77.5</div>
</div>
</div>
<div class="bin" data-cols="9" data-rows="5">
<div class="number">S7</div>
<div class="type">9x5</div>
<div class="description">Est. capacity: 121 packages</div>
</div>
<div class="bin" data-cols="5" data-rows="4">
<div class="number">S9</div>
<div class="type">5x4</div>
<div class="description">Est. capacity: 34.5 packages</div>
</div>
</div>
</div>
Here is the Table which will be generating on click of any above DIV:-
<div class="beanStructure overflowHidden">
<div class="tableContainer">
<table class="container">
</table>
</div>
</div>
Jquery for generating Table :-
<script>
function generateTable(rows, cols) {
$('table.container').add
$('table.container').each(function () {
for (i = 0; i < rows; i++) {
$(this).hide().append('<tr>').fadeIn(100);;
}
});
$('table.container tr').each(function () {
for (j = 0; j < cols; j++) {
$(this).hide().append('<td></td>').fadeIn(100);;
}
});
}
$(function() {
$('.bin, .lot').click(function() {
var repack = '';
if ($(this).hasClass('repack')) {
repack = ' repack';
}
var myRows = $(this).attr('data-rows');
var myCols = $(this).attr('data-cols');
$("table.container").html('');
$("div.tableContainer").removeClass().addClass('tableContainer bin-' + myCols + 'x' + myRows + repack + '');
generateTable(myRows, myCols);
//$('.beanStructure div').hide();
//$('.beanStructure div.bin-' + $(this).children('.type').html() + '').show();
});
});
</script>
Code for Calling Lightbox:-
<script>
//Lightbox Function
$(document).ready(function () {
$(".various").fancybox({
maxWidth: 1000,
maxHeight: 800,
fitToView: false,
width: '80%',
height: '80%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
});
});
</script>
Please let me know if you need any other information.
Thank You
Thanks Guys for looking into it! I got the solution!!
All I did is:-
I gave <a class="various" href="#inline"> tag outside each
<div class="bin">... </div></a>
Ex:-
<div class="bin" data-cols="5" data-rows="4">
<div class="number">S3</div>
<div class="type">5x4</div>
<div class="description">Est. capacity: 34.5 packages</div>
</div>
And give id="inline" to the div inside which dynamic table is generating:-
<div class="beanStructure overflowHidden" id="inline">
<div class="tableContainer">
<table class="container">
</table>
</div>
</div>
Thanks once again