Masonary image not positioning correctly on ajax call - javascript

I am using https://masonry.desandro.com/ v4.2.2 and the minimal code looks like:
<div class="fk-grid-container" id="ajax-concepts">
<?php
//This is just the wordpress loop and currently its looping and showing 3 items
//LOOP START
while ( $the_query->have_posts() ) :
$the_query->the_post();
$thumbnail_url = get_the_post_thumbnail_url('','full');
?>
<div class="fk-grid-item">
<a href="<?php echo $thumbnail_url; ?>" class="gallery-link">
<div
class="boxes"
data-aos="fade-down"
data-aos-duration="2000"
>
<div class="images-box">
<img
src="<?php echo $thumbnail_url; ?>"
class="img-fluid"
alt="<?php the_title(); ?>"
/>
</div>
</div>
</a>
</div>
<?php
//LOOP END
endwhile;
wp_reset_postdata();
?>
</div>
And, I have initalized it as :
jQuery(".fk-grid-container").imagesLoaded(function () {
jQuery(".fk-grid-container").masonry({
itemSelector: ".fk-grid-item",
gutter: 30,
});
AOS.refresh();
});
Upto this point its fine, now on click load more, I am making an ajax call and on success it is returning html as:
<div class="fk-grid-item">
<a href="http://famous.test/wp-content/uploads/2021/08/02.png" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box"><img src="http://famous.test/wp-content/uploads/2021/08/02.png" class="img-fluid" alt="Image 3" /></div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="http://famous.test/wp-content/uploads/2021/08/05.png" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box"><img src="http://famous.test/wp-content/uploads/2021/08/05.png" class="img-fluid" alt="Image 2" /></div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="http://famous.test/wp-content/uploads/2021/08/06.png" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box"><img src="http://famous.test/wp-content/uploads/2021/08/06.png" class="img-fluid" alt="Image 1" /></div>
</div>
</a>
</div>
and my ajax success:
success: function(data){
var $data = jQuery(data);
if($data.length){
jQuery(".fk-grid-container").append(data).masonry( 'reloadItems' );
AOS.refresh();
}
},
But, with this code the image are not aligned to correct position and is displayed as:
This is what it looked initially:
What it should look like:
Update:
I have tried with:
var $grid = $('.fk-grid-container');
$grid.masonry()
.append( $data )
.masonry( 'appended', $data )
.layout();
AOS.refresh();
I have tried with above code, it is adding the new content but it is not increasing the height of current container and instead overlapping over next container. With this the load data button is covered by the data so I can't make another request.


On load more, it looks like you are not making use of imagesLoaded correctly.
Let's take a look at your initialization code:
jQuery(".fk-grid-container").imagesLoaded(function () {
jQuery(".fk-grid-container").masonry({
itemSelector: ".fk-grid-item",
gutter: 30,
});
AOS.refresh();
});
above one is correct
But, on success (according to your last update) you are doing as:
var $grid = $('.fk-grid-container');
$grid.masonry()
.append( $data )
.masonry( 'appended', $data )
.layout();
AOS.refresh();
Actually, the above code is somehow correct you just need to update the layout once all the images are loaded and you have to update that layout part to masonry (because it looks like you are using jquery). Just like here, mentioned in the first block https://masonry.desandro.com/methods.html
So, the final code should look like this:
var $grid = $('.fk-grid-container');
//appending the data on the grid
$grid.masonry()
.append( $data )
.masonry( 'appended', $data );
$grid.imagesLoaded(function(){
//once images are fully loaded, you update the layout
$grid.masonry();
AOS.refresh();
});
Hope, it helps


You need to use appended & reloadItems method after click to to Load More button and then call imageLoaded method to check all images are loaded or not then again need to call layout method in masonry for adjusting(update) items.
Helpful links for masonry methods:
https://masonry.desandro.com/methods.html#layout-masonry
https://masonry.desandro.com/methods.html#appended
https://masonry.desandro.com/methods.html#reloaditems
I hope below snippet will help you a lot.
var $grid = $('#ajax-concepts') //grid container
$grid.imagesLoaded().done(function (instance) {
$grid.masonry({
itemSelector: ".fk-grid-item",
gutter: 30,
});
// Initialize AOS plugin
AOS.init();
});
// $data like ajax success items
var $data = `<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x650/099900/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x300/999000/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x220/000000/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>`;
$(document).on('click', '#loadmore', function() {
$grid.masonry().append($data).masonry('appended', $data).masonry('reloadItems');
$grid.imagesLoaded(function () {
//once images are fully loaded, you update the layout
$grid.masonry('layout');
// Initialize AOS plugin after append new items
AOS.init();
//Page scroll down at load more button
$('html, body').animate({
scrollTop: $("#loadmore").offset().top
},1500);
});
});
* { box-sizing: border-box; }
.fk-grid-container{
display: flex;
flex-wrap: wrap;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.fk-grid-container:after {
content: '';
display: block;
clear: both;
}
.fk-grid-item{
max-width: calc(33.333333% - 30px);
margin-bottom: 30px;
}
.img-fluid{
max-width: 100%;
display: block;
}
#media(max-width: 768px){
.fk-grid-item{
max-width: calc(50% - 30px);
}
}
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded#4/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<div class="fk-grid-container" id="ajax-concepts">
<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x500/0000FF/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x300/FF00FF/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x600/00FFFF/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x450/09F900/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>
</div>
<div style="text-align: center; padding: 20px; clear: both;">
<button type="button" style="padding: 10px 40px;" id="loadmore">Load More</button>
</div>

Related

Make different groups of "Gallery with one preview image" using fancybox

This is what I want to achieve
-create different groups of items
-just one group preview image
-On click, it should open a slider of images related to only that group.
This is what I have tried so far
<?php
for ($i = 1; $i <= 14; $i++) {
//Loop through groups and create image thumbnail
$sql = "SELECT name, image from item_group WHERE id= ++$i";
if ($result = mysqli_query($con, $sql)) {
$row = mysqli_fetch_row($result);
$group_name = $row[0];
$group_image = $row[1] = './j.jpg';
}
echo '<div class="col-xs-12 col-sm-4">
<div class="card">
<a class="img-card" data-fancybox="images-preview" href="./j.jpg">
<img src=" ' . $group_image . ' " />
</a>
<div style="display: none;">
<a href="https://source.unsplash.com/Ai2TRdvI6gM/1500x1000" data-fancybox="images-preview"
data-width="1500" data-height="1000"
data-thumb="https://source.unsplash.com/Ai2TRdvI6gM/240x160"></a>
<a href="https://source.unsplash.com/Hau6K6VP5vs/1500x1000" data-fancybox="images-preview"
data-width="1500" data-height="1000"
data-thumb="https://source.unsplash.com/Hau6K6VP5vs/240x160"></a>
<a href="https://source.unsplash.com/muFaKaGw0eE/1500x1000" data-fancybox="images-preview"
data-width="1500" data-height="1000"
data-thumb="https://source.unsplash.com/muFaKaGw0eE/240x160"></a>
<a href="https://source.unsplash.com/eXHeq48Z-Q4/1500x1000" data-fancybox="images-preview"
data-width="1500" data-height="1000"
data-thumb="https://source.unsplash.com/eXHeq48Z-Q4/240x160"></a>
<a href="https://source.unsplash.com/hBYzBU1xP6s/1500x1000" data-fancybox="images-preview"
data-width="1500" data-height="1000"
data-thumb="https://source.unsplash.com/hBYzBU1xP6s/240x160"></a>
</div>
<div class="card-content">
<h5 class="card-title text-center">
' . $group_name . '
</h5>
</div>
</div>
</div>';
}
?>
It's opening all the images in slider not just one related to the group.
Links that I have already tried to solve the problem
https://codepen.io/fancyapps/pen/EeqJPG?editors=1000
http://fancyapps.com/fancybox/3/docs/

data-fancybox="images" This need to be different for each group
For Example: If i have first 4 images in one group then this should be data-fancybox="images1"
If i have next 6 images in other group then this should be data-fancybox="images2" for all img tag
<!-- 1. Add latest jQuery and fancybox files -->
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.js"></script>
<!-- 2. Create links -->
<div class="col-xs-12 col-sm-4">
<div class="card">
<a class="img-card" data-fancybox="images-preview" href="./j.jpg">
<img src="1.jpg" />
</a>
<p class="imglist" style="max-width: 1000px;">
<a href="https://source.unsplash.com/juHayWuaaoQ/1500x1000" data-fancybox="images">
<img src="https://source.unsplash.com/juHayWuaaoQ/240x160" />
</a>
<a href="https://source.unsplash.com/eWFdaPRFjwE/1500x1000" data-fancybox="images">
<img src="https://source.unsplash.com/eWFdaPRFjwE/240x160" />
</a>
<a href="https://source.unsplash.com/c1JxO-uAZd0/1500x1000" data-fancybox="images">
<img src="https://source.unsplash.com/c1JxO-uAZd0/240x160" />
</a>
<a href="https://source.unsplash.com/i2KibvLYjqk/1500x1000" data-fancybox="images">
<img src="https://source.unsplash.com/i2KibvLYjqk/240x160" />
</a>
<a href="https://source.unsplash.com/RFgO9B_OR4g/1500x1000" data-fancybox="images">
<img src="https://source.unsplash.com/RFgO9B_OR4g/240x160" />
</a>
<a href="https://source.unsplash.com/7bwQXzbF6KE/1500x1000" data-fancybox="images">
<img src="https://source.unsplash.com/7bwQXzbF6KE/240x160" />
</a>
<a href="https://source.unsplash.com/NhU0nUR7920/1500x1000" data-fancybox="images">
<img src="https://source.unsplash.com/NhU0nUR7920/240x160" />
</a>
<a href="https://source.unsplash.com/B2LYYV9-y0s/1500x1000" data-fancybox="images">
<img src="https://source.unsplash.com/B2LYYV9-y0s/240x160" />
</a>
</p>
<div class="card-content">
<h5 class="card-title text-center">
DEMo
</h5>
</div>
</div>
</div
<div class="col-xs-12 col-sm-4">
<div class="card">
<a class="img-card" data-fancybox="images-preview" href="./j.jpg">
<img src="1.jpg" />
</a>
<p class="imglist" style="max-width: 1000px;">
<a href="https://source.unsplash.com/juHayWuaaoQ/1500x1000" data-fancybox="images1">
<img src="https://source.unsplash.com/juHayWuaaoQ/240x160" />
</a>
<a href="https://source.unsplash.com/eWFdaPRFjwE/1500x1000" data-fancybox="images1">
<img src="https://source.unsplash.com/eWFdaPRFjwE/240x160" />
</a>
<a href="https://source.unsplash.com/c1JxO-uAZd0/1500x1000" data-fancybox="images1">
<img src="https://source.unsplash.com/c1JxO-uAZd0/240x160" />
</a>
<a href="https://source.unsplash.com/i2KibvLYjqk/1500x1000" data-fancybox="images1">
<img src="https://source.unsplash.com/i2KibvLYjqk/240x160" />
</a>
<a href="https://source.unsplash.com/RFgO9B_OR4g/1500x1000" data-fancybox="images1">
<img src="https://source.unsplash.com/RFgO9B_OR4g/240x160" />
</a>
<a href="https://source.unsplash.com/7bwQXzbF6KE/1500x1000" data-fancybox="images1">
<img src="https://source.unsplash.com/7bwQXzbF6KE/240x160" />
</a>
<a href="https://source.unsplash.com/NhU0nUR7920/1500x1000" data-fancybox="images1">
<img src="https://source.unsplash.com/NhU0nUR7920/240x160" />
</a>
<a href="https://source.unsplash.com/B2LYYV9-y0s/1500x1000" data-fancybox="images1">
<img src="https://source.unsplash.com/B2LYYV9-y0s/240x160" />
</a>
</p>
<div class="card-content">
<h5 class="card-title text-center">
DEMo2
</h5>
</div>
</div>
</div
<!-- 3. Have fun! -->
Changes in your php code should be add $i to data-fancybox which will always create uniqueID in each loop
data-fancybox="images'.$i.'"
This will make groups with different images
<!-- 1. Add latest jQuery and fancybox files -->
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox#3.5.7/dist/jquery.fancybox.min.js"></script>
<?php
for ($i = 1; $i <= 14; $i++) {
//Loop through groups and create image thumbnail
$sql = "SELECT name, image from item_group WHERE id= ++$i";
if ($result = mysqli_query($con, $sql)) {
$row = mysqli_fetch_row($result);
$group_name = $row[0];
$group_image = $row[1] = './j.jpg';
}
echo '<div class="col-xs-12 col-sm-4">
<div class="card">
<a class="img-card" data-fancybox="images-preview" href="./j.jpg">
<img src=" ' . $group_image . ' " />
</a>
<p class="imglist" style="max-width: 1000px;">
<a href="https://source.unsplash.com/juHayWuaaoQ/1500x1000" data-fancybox="images'.$i.'">
<img src="https://source.unsplash.com/juHayWuaaoQ/240x160" />
</a>
<a href="https://source.unsplash.com/eWFdaPRFjwE/1500x1000" data-fancybox="images'.$i.'"
<img src="https://source.unsplash.com/eWFdaPRFjwE/240x160" />
</a>
<a href="https://source.unsplash.com/c1JxO-uAZd0/1500x1000" data-fancybox="images'.$i.'"
<img src="https://source.unsplash.com/c1JxO-uAZd0/240x160" />
</a>
<a href="https://source.unsplash.com/i2KibvLYjqk/1500x1000" data-fancybox="images'.$i.'"
<img src="https://source.unsplash.com/i2KibvLYjqk/240x160" />
</a>
<a href="https://source.unsplash.com/RFgO9B_OR4g/1500x1000" data-fancybox="images'.$i.'"
<img src="https://source.unsplash.com/RFgO9B_OR4g/240x160" />
</a>
<a href="https://source.unsplash.com/7bwQXzbF6KE/1500x1000" data-fancybox="images'.$i.'"
<img src="https://source.unsplash.com/7bwQXzbF6KE/240x160" />
</a>
<a href="https://source.unsplash.com/NhU0nUR7920/1500x1000" data-fancybox="images'.$i.'"
<img src="https://source.unsplash.com/NhU0nUR7920/240x160" />
</a>
<a href="https://source.unsplash.com/B2LYYV9-y0s/1500x1000" data-fancybox="images'.$i.'"
<img src="https://source.unsplash.com/B2LYYV9-y0s/240x160" />
</a>
</p>
<div class="card-content">
<h5 class="card-title text-center">
' . $group_name . '
</h5>
</div>
</div>
</div>';
}?>

jQuery Packery plugin not setting height properly

I'm using the Packery plugin to give my image gallery a more interesting layout on a website I'm building.
Every now and then, I visit the page and some of the images are overlapping each other like so:
But then when I refresh the page, it displays it properly:
I tried specifying a height on the container element but to no avail.
Here is the code I'm using:
CSS:
.packery-grid {
min-height: 500px;
}
.packery-grid-03 {
width: 20%;
}
.packery-grid-06 {
width: 40%;
}
.packery-grid figure {
padding: 15px;
}
jQuery:
$(document).ready(function() {
// visuals
$('.packery-grid').packery({
// options
itemSelector: '.packery-grid-item',
gutter: 0
});
});
HTML:
<div class="row">
<div class="packery-grid">
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/255-198x127.jpg" alt="Six" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/319-198x127.jpg" alt="Five" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/IMG_8204-198x127.jpg" alt="Four" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-06">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/157-426x284.jpg" alt="Three" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-06">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/IMG_4445-426x284.jpg" alt="Two" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/Iceland-198x127.jpg" alt="One" />
</a>
</figure>
</div>
</div>
</div>
</div>
</div>

I think I've found the solution on their support page
Unloaded images can throw off Packery layouts and cause item elements
to overlap. imagesLoaded resolves this issue.
And so I've modified my code like so:
// visuals
var $grid = $('.packery-grid').packery({
// options
itemSelector: '.packery-grid-item',
gutter: 0
});
// layout Packery after each image loads
// to prevent overlapping images
$grid.imagesLoaded().progress( function() {
$grid.packery();
});

Replacing div with div while having few buttons on the same page

I have a div in the middle of html page.
It has 4 links that have images inside and some text.
What I need is this : when a user clicks on one of those links, it completely changes the div ( without reloading the page ), which will have an image, another text and a link. Those 4 links need to stay there, so that user can click on another one and get the same change again.
I couldn't write or find any code that helps me beyond replacing or toggling functions, which are good for 2 elements only.
Here's my HTML markup:
<div class="container-fluid fullspan offers_content" id="offers_content">
<div class="row offers">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offers_text col-md-7">
<p> text </p>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_1">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer1.png" alt="" class="img-responsive offer_image" />
<p>text-111</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_2">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer2.png" alt="" class="img-responsive offer_image" />
<p>text-222</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_3">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer3.png" alt="" class="img-responsive offer_image" />
<p>text-333</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_4">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer4.png" alt="" class="img-responsive offer_image" />
<p>text-444</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
My relevant CSS:
.offers_content{
min-height:450px;
background-color:#fff;
}
#offer_quickstart,#offer_quickstartplus, #offer_basic, #offer_pro{
display:none;
}
#offers_content{
display:block;
}
.offer_image{
margin: 5% auto auto auto;
}
.offer_text_ad>p{
color:#000;
}
Thanks in advance.

Use Javascript and do something along the lines of:
function swapDivs(div1, div2) { // where div 1 will disappear and div 2 will take its place
document.getElementById(div1).className('hidden');
document.getElementById(div2).className('shown');
}
and then CSS like
.hidden {
top: -500px; // forces div above the screen
}
.shown {
// CSS code for the div you want shown
}
And in the HTML with the link it could be
<a onclick="javascript:swap('rowOffers','row');"><img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/></a>
Just use "swap('div you want hidden', 'div you want shown')" as you need to.
So the end result will make the first div disappear and the second reappear in its place. So initially code the div you want shown from the beginning set its class to "shown" and then all the other divs as "hidden".
Hopefully this has been helpful and answers your question. If not, feel free to ask anymore about it :)

Collapsing a div and opening another one bootstrap

I'm using Bootstrap and I'm trying to use the Collapse.
I want the div #film to hide when I click the <li class="rekruterring>and I'm missing something. It won't close no matter what I do, I've tried with accordion, data-parents, javascript and nothing makes the #filmdiv hide when I click the .rekruterring and the #rekruttering div is shown.
Here's my code and be aware that the #rekruterring is expanding as it should, but is not hiding #film.
/* Latest compiled and minified JavaScript included as External Resource */
/* DOES NOTHING */
$(document).ready(function() {
$(".rekruttering").click(function() {
$("#film").collapse('hide');
});
})
/* VIMEO */
img {
max-width: 100%;
height: auto;
}
.video {
background: #fff;
padding-bottom: 20px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
width: 100%;
/* Thumbnails 5 across */
margin: 1%;
}
.video img {
width: 100%;
opacity: 1;
}
.video img:hover,
.video img:active,
.video img:focus {
opacity: 0.75;
}
.categories li {
list-style-type: none;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="accordion" class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Galleri</h2>
<hr class="bg-primary">
</div>
<div class="col-lg-12 categories text-center">
<ul>
<a class="film" data-toggle="collapse" data-target="#film" data-parent="#accordion">Firmapræsentation</a> |
<a class="rekruterring" data-toggle="collapse" data-target="#rekruterring" data-parent="#accordion">Rekruterringsfilm</a> |
<li>TV -/Biografspots & Imagefilm</li>|
<li>Salgs- & Produktfilm</li>
</ul>
</div>
</div>
<div id="film" class="row text-centered collapse in">
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h2 class="videoTitle" style="text-align:center;">FILM</h2>
</article>
</div>
</div>
<!-- FILM -->
<div id="rekruterring" class="row text-centered collapse">
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h2 class="videoTitle" style="text-align:center;">REKRUTERRING</h2>
</article>
</div>
</div>
<!-- REKRUTERRING -->
</div>

This is not working because there is a Bootstrap bug/issue when using the parent class. It relies on the use of the panel class being wrapped around your collapse elements.
https://github.com/twbs/bootstrap/issues/10966
Updated JSFiddle
<div class="panel">
<div id="film" class="row text-centered collapse in">
<div class="panel">
<div id="rekruterring" class="row text-centered collapse">

Select an element inside div with multiple elements a same class onmouseover

I have installed Joomla 3 and Im trying select an element from multiple elements with the same class, but when I apply onmouseover event on the element, the function affect all elements with same class, I want the function affect to select element (onmouseover element)
function ocultarDatos() {
var itemk2 = document.querySelectorAll(".encabezado");
for (var i = 0; i < itemk2.length; i++) {
itemk2[i].style.display = "none";
}
}
<span class="catItemImage" onmouseover="ocultarDatos();">
<a href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>">
<img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="height:auto;" />
</a>
<a rel="author" href="<?php echo $this->item->author->link; ?>"><img class="globo" src="<?php echo $this->item->author->avatar; ?>" alt="<?php echo K2HelperUtilities::cleanHtml($this->item->author->name); ?>" >
</a>
</span>
<div class="catItemView groupLeading">
<div class="encabezado">
<div class="catItemBody">
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
</div>
</div>
<div class="itemContainer itemContainerLast" style="width:12.5%;">
<div class="catItemView groupLeading">
<div class="encabezado">
<div class="catItemBody">
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
</div>
</div>
</div>
</div>
</div>

Try using var itemk2 = $(this).find(".encabezado");
instead of var itemk2 = document.querySelectorAll(".encabezado");
This should achieve the effect you are looking for

You need to pass event object in callback. and then you can use that event object to find current object and its child such as element with encabezadoclass in your case.
Try below code.
HTML
<span class="catItemImage" onmouseover="ocultarDatos(event);">
... ...
</span>
JS
function ocultarDatos(event){
var encabezado = event.currentTarget.querySelectorAll('.encabezado');
encabezado[0].style.display = "none";
};
Working Demo:
function ocultarDatos(event){
var encabezado = event.currentTarget.querySelectorAll('.encabezado');
encabezado[0].style.display = "none";
};
function ocultarDatosOther(event){
var encabezado = event.currentTarget.querySelectorAll('.encabezado');
encabezado[0].style.display = "";
};
<div onmouseover="ocultarDatos(event);" onmouseout="ocultarDatosOther(event);">
MouseOver on me.
<span class="encabezado">
and i will hide
</span>
</div>

<div class="catItemView groupLeading">
<div class="encabezado">
<div class="catItemBody">
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
</div>
</div>
<div class="itemContainer itemContainerLast" style="width:12.5%;">
<div class="catItemView groupLeading">
<div class="encabezado">
<div class="catItemBody">
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
</div>
</div>
</div>
</div>
</div>

I Have fixed it with CSS:
.encabezado { background: white; padding: 0px 15px; display:none; } .itemContainer:hover .encabezado { padding: 0px 15px; display:block; top: 150px; z-index: 100; }
With the effect i was searching for. Thanks for you attention.

Categories

Resources