Using an image inside a bootstrap panel to hyperlink to a tab - javascript

I'm trying to use an image inside a tab on bootstrap to hyperlink into a different panel/tab. For instance, in the code below, I want to hyperlink the first image in the all tab to open the tab/panel Branding. Is this possible? So far I tried to use an anchor tag of the panel Id but it's not working.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href='//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css' rel='stylesheet' />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container mt-5">
<!--Section: Content-->
<section class="dark-grey-text text-center">
<style>
.md-pills .nav-link.active {
background-color: #3f51b5;
}
</style>
<!-- Section heading -->
<h3 class="font-weight-bold mb-4 pb-2">Our best projects</h3>
<!-- Section description -->
<p class="text-muted w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum quas, eos officia maiores ipsam ipsum dolores reiciendis ad voluptas, animi obcaecati adipisci sapiente mollitia. </p>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-12">
<!-- Nav tabs -->
<ul class="nav md-pills flex-center flex-wrap mx-0" role="tablist">
<li class="nav-item">
<a class="nav-link active font-weight-bold" data-toggle="tab" href="#panel31" role="tab">ALL</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" data-toggle="tab" href="#panel32" role="tab">BRANDING</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" data-toggle="tab" href="#panel33" role="tab">PACKAGING</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" data-toggle="tab" href="#panel34" role="tab">PRINT DESIGN</a>
</li>
</ul>
</div>
<!--First column-->
</div>
<!--First row-->
<!--Tab panels-->
<div class="tab-content">
<!--Panel 1-->
<div class="tab-pane fade show in active" id="panel31" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
</div>
<!--Panel 1-->
<!--Panel 2-->
<div class="tab-pane fade" id="panel32" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project5.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
</div>
<!--Panel 2-->
<!--Panel 3-->
<div class="tab-pane fade" id="panel33" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project3.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project6.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
</div>
<!--Panel 3-->
<!--Panel 4-->
<div class="tab-pane fade" id="panel34" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project7.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
</div>
<!--Panel 4-->
</div>
<!--Tab panels-->
</section>
</div>


Basically you need to wrap your featured images with anchor tags, and on their clicks, find those nav links inside the nav tabs and trigger their clicks.
First, add an ID for those nav tab links you want those images to trigger the clicks for. Later I can wrap the images with anchor tags and set their href to javascript:document.getElementById().click(); to trigger nav link's clicks.
I've tried to use javascript:document.querySelector(a[href="#xxx"]).click(); but for some reason that didn't work out.
<!-- Nav tabs -->
<ul class="nav md-pills flex-center flex-wrap mx-0" role="tablist">
<li class="nav-item">
<a class="nav-link active font-weight-bold"
data-toggle="tab" href="#panel31" role="tab">
ALL
</a>
</li>
<li class="nav-item">
<a id="branding-tab-link"
class="nav-link font-weight-bold" data-toggle="tab" href="#panel32" role="tab">
BRANDING
</a>
</li>
<li class="nav-item">
<a id="packaging-tab-link"
class="nav-link font-weight-bold" data-toggle="tab" href="#panel33" role="tab">
PACKAGING
</a>
</li>
<li class="nav-item">
<a id="print-design-tab-link"
class="nav-link font-weight-bold" data-toggle="tab" href="#panel34" role="tab">
PRINT DESIGN
</a>
</li>
</ul>
And then the rest is just to wrap featured images with anchor tags and set their hrefs:
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<a href="javascript:document.getElementById('branding-tab-link').click();">
<div />
<p />
</a>
</div>
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<a href="javascript:document.getElementById('packaging-tab-link').click();">
<div />
<p />
</a>
</div>
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<a href="javascript:document.getElementById('print-design-tab-link').click();">
<div />
<p />
</a>
</div>
You can also write some custom jQuerys and bind image clicks to trigger nav tab link clicks. I just thought people might like achieving this without writing any additional JavaScripts separately.
demo: https://jsfiddle.net/davidliang2008/q9ztuv4w/8/
Scoll to the top after click?
Yea it's possible, but now instead of inline JavaScript, it makes more sense to write some custom JavaScripts to listen to the clicks, triggers nav link and do the scrolling.
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<a data-nav-link-id="#branding-tab-link" href="#" class="reference-link">
<div />
<p />
</a>
</div>
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<a data-nav-link-id="#packaging-tab-link" href="#" class="reference-link">
<div />
<p />
</a>
</div>
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<a data-nav-link-id="#print-design-tab-link" href="#" class="reference-link">
<div />
<p />
</a>
</div>
$(function() {
$('a.reference-link').click(function(){
// Get the nav link id from data attribute
let navLinkId = $(this).data('nav-link-id');
// Simulate the click on nav link
$(navLinkId).trigger('click');
// Scroll the document body to the top
$(body).scrollTop();
// Disable original click event on the reference-link
return false;
});
});
demo: https://jsfiddle.net/davidliang2008/q9ztuv4w/20/


This is the way to navigate to a tab by clicking any as requested:
https://jsfiddle.net/contactmikebray/Ldhpnqwg/
Summary:
Bootstrap uses jQuery so you can take advantage of the .click() event that is provided. Listen for an click on all image elements (can be replaced with other selectors). When an image is clicked, prop the tab show event.
<script type="text/javascript">
$(document).ready(function() {
$("img").click(function() {
$('.nav a[href="#panel32"]').tab('show');
})
});
</script>
Similar to:
Changing active Bootstrap 3 tab using jQuery

Related

How to implement a dynamic bootstrap 4 accordion, using Jquery

I'm looking for a way to add a new bootstrap 4 accordion when I click on button. Anybody could you please help me on that? And moreover, code should be implemented in Jquery. That too, I don't know whether it is possible or not to add new accordion dynamically in jquery.
<script>
$(document).ready(function(){
$('#addAccordion').click( function() {
var newDiv = "<div class='card'> <div class='card-header'> <a class='card-link' data-toggle='collapse' href='#collapseOne'>
Collapsible Group Item #1</a>
</div>
<div id='collapseOne' class='collapse show' data-parent='#accordion'>
<div class='card-body'>Lorem ipsum dolor sit amet,</div> </div> </div>";
$('.display').append(newDiv);
});
});
</script>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet,
</div>
</div>
</div>
</div>
<div class="display"> </div>
<button id="addAccordion">Add new accordion</button>

With this you can add dynamic accordion also open and close accordion dynamically
let id = 0
$('#addAccordion').click(() => {
id++
var test = "<div class='card'> <div class='card-header'> <a class='card-link' data-toggle='collapse' href='#collapse"+id+"'>" +
"Collapsible Group Item "+id+"</a> </div> <div id='collapse"+id+"' class = 'collapse' data-parent = '#accordion' ><div class='card-body'> Lorem ipsum dolor sit amet, </div> </div> </div>";
$('.display').append(test);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet,
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
consectetur adipisicing
</div>
</div>
</div>
</div>
<div class="display"> </div>
<button id="addAccordion" type="button">Add new accordion</button>
please vote answer as a useful if this is a solution, thank you in advance.

You just need to use backtick instead of inverted comma actually there was syntax error where you define var newDiv
Working Code:-
$(document).ready(function(){
$('#addAccordion').click( function() {
var newDiv = `<div class='card'> <div class='card-header'> <a class='card-link' data-toggle='collapse' href='#collapseOne'>
Collapsible Group Item #1</a>
</div>
<div id='collapseOne' class='collapse show' data-parent='#accordion'>
<div class='card-body'>Lorem ipsum dolor sit amet,</div> </div> </div>`;
$('.display').append(newDiv);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet,
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
consectetur adipisicing
</div>
</div>
</div>
</div>
<div class="display"> </div>
<button id="addAccordion">Add new accordion</button>

Bootstrap 5 Tab Content not displayed inside OwlCarousel2 Item

Hi I'm trying to add the Tabs Component inside OwlCarousel2 Item but the Tab Content not displayed where this error is coming from?
I try to fix this issue but nothing is work.
**I made some examples here to show you the issue **
HTML CODE :
<section id="example-carousel">
<div class="owl-carousel owl-theme">
<div class="w-100 vh-100 d-flex align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-xl-10">
<div class="item">
<h1>What is Lorem Ipsum?</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
<div class="col-12">
<!-- Tab -->
<div>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link active" id="nav-example1-tab" data-bs-toggle="tab" href="#nav-example1" role="tab" aria-controls="nav-example1" aria-selected="true">Example 1</a>
<a class="nav-link" id="nav-example2-tab" data-bs-toggle="tab" href="#nav-example2" role="tab" aria-controls="nav-others" aria-selected="false">Example 2</a>
</div>
</nav>
<div class="tab-content">
<div class="tab-pane fade show active" id="nav-example1" role="tabpanel" aria-labelledby="nav-example1-tab">
<h3>Tab Pane Example 1</h3>
</div>
<div class="tab-pane fade" id="nav-example2" role="tabpanel" aria-labelledby="nav-example2-tab">
<h3>Tab Pane Example 2</h3>
</div>
</div>
</div>
<!-- End Tab -->
</div>
</div>
</div>
</div>
</div>
</section>
JS CODE :
jQuery(document).ready(function($) {
// OwlCarousel2
var owl = $('.owl-carousel');
owl.owlCarousel({
loop:true,
margin:0,
nav:false,
});
});

Web Page with div class= parallax_background parallax-window is not loading in django/ pycharm

I am configuring a webpage using django and pycharm. I have placed all the static files and made the changes in settings.py file. In html i have added load static block at the beginning and added static block to all urls. Now when I run the server, all the static content is loading properly except two blocks (testimonial and footer) having div class= parallax_background parallax-window. Below is the code for html
Index.html
{% load static %}
<! DOCTYPE html>
<html lang="en">
<head>
<title>Travello</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Travello template project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{% static 'styles/bootstrap4/bootstrap.min.css' %}">
<link href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/owl.carousel.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/owl.theme.default.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/animate.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/main_styles.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/responsive.css' %}">
</head>
<body>
<div class="super_container">
<!-- Header -->
<header class="header">
<div class="container">
<div class="row">
<div class="col">
<div class="header_content d-flex flex-row align-items-center justify-content-start">
<div class="header_content_inner d-flex flex-row align-items-end justify-content-start">
<div class="logo">Travello</div>
<nav class="main_nav">
<ul class="d-flex flex-row align-items-start justify-content-start">
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
<div class="header_phone ml-auto">Call us: 00-56 445 678 33</div>
<!-- Hamburger -->
<div class="hamburger ml-auto">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header_social d-flex flex-row align-items-center justify-content-start">
<ul class="d-flex flex-row align-items-start justify-content-start">
<li><i class="fa fa-pinterest" aria-hidden="true"></i></li>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
<li><i class="fa fa-behance" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin" aria-hidden="true"></i></li>
</ul>
</div>
</header>
<!-- Menu -->
<div class="menu">
<div class="menu_header d-flex flex-row align-items-center justify-content-start">
<div class="menu_logo">Travello</div>
<div class="menu_close_container ml-auto"><div class="menu_close"><div></div><div></div></div></div>
</div>
<div class="menu_content">
<ul>
<li>Home</li>
<li>About us</li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<div class="menu_social">
<div class="menu_phone ml-auto">Call us: 00-56 445 678 33</div>
<ul class="d-flex flex-row align-items-start justify-content-start">
<li><i class="fa fa-pinterest" aria-hidden="true"></i></li>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
<li><i class="fa fa-behance" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin" aria-hidden="true"></i></li>
</ul>
</div>
</div>
<!-- Home -->
<div class="home">
<!-- Home Slider -->
<div class="home_slider_container">
<div class="owl-carousel owl-theme home_slider">
<!-- Slide -->
<div class="owl-item">
<div class="background_image" style="background-image:url({% static 'images/home_slider.jpg' %})"></div>
<div class="home_slider_content_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_slider_content">
<div class="home_title"><h2>Let us take you away</h2></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="owl-item">
<div class="background_image" style="background-image:url({% static 'images/home_slider.jpg' %})"></div>
<div class="home_slider_content_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_slider_content">
<div class="home_title"><h2>Let us take you away</h2></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="owl-item">
<div class="background_image" style="background-image:url({% static 'images/home_slider.jpg' %})"></div>
<div class="home_slider_content_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_slider_content">
<div class="home_title"><h2>Let us take you away</h2></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="home_page_nav">
<ul class="d-flex flex-column align-items-end justify-content-end">
<li>Offers<span>01</span></li>
<li>Testimonials<span>02</span></li>
<li>Latest<span>03</span></li>
</ul>
</div>
</div>
</div>
<!-- Search -->
<div class="home_search">
<div class="container">
<div class="row">
<div class="col">
<div class="home_search_container">
<div class="home_search_title">Search for your trip</div>
<div class="home_search_content">
<form action="#" class="home_search_form" id="home_search_form">
<div class="d-flex flex-lg-row flex-column align-items-start justify-content-lg-between justify-content-start">
<input type="text" class="search_input search_input_1" placeholder="City" required="required">
<input type="text" class="search_input search_input_2" placeholder="Departure" required="required">
<input type="text" class="search_input search_input_3" placeholder="Arrival" required="required">
<input type="text" class="search_input search_input_4" placeholder="Budget" required="required">
<button class="home_search_button">search</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Intro -->
<div class="intro">
<div class="intro_background" style="background-image:url({% static 'images/intro.png' %})"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="intro_container">
<div class="row">
<!-- Intro Item -->
<div class="col-lg-4 intro_col">
<div class="intro_item d-flex flex-row align-items-end justify-content-start">
<div class="intro_icon"><img src="{% static 'images/beach.svg' %}" alt=""></div>
<div class="intro_content">
<div class="intro_title">Top Destinations</div>
<div class="intro_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
</div>
</div>
</div>
<!-- Intro Item -->
<div class="col-lg-4 intro_col">
<div class="intro_item d-flex flex-row align-items-end justify-content-start">
<div class="intro_icon"><img src="{% static 'images/wallet.svg' %}" alt=""></div>
<div class="intro_content">
<div class="intro_title">The Best Prices</div>
<div class="intro_subtitle"><p>Sollicitudin mauris lobortis in.</p></div>
</div>
</div>
</div>
<!-- Intro Item -->
<div class="col-lg-4 intro_col">
<div class="intro_item d-flex flex-row align-items-end justify-content-start">
<div class="intro_icon"><img src="{% static 'images/suitcase.svg' %}" alt=""></div>
<div class="intro_content">
<div class="intro_title">Amazing Services</div>
<div class="intro_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Destinations -->
<div class="destinations" id="destinations">
<div class="container">
<div class="row">
<div class="col text-center">
<div class="section_subtitle">simply amazing places</div>
<div class="section_title"><h2>Popular Destinations</h2></div>
</div>
</div>
<div class="row destinations_row">
<div class="col">
<div class="destinations_container item_grid">
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="{% static 'images/destination_1.jpg' %}" alt="">
<div class="spec_offer text-center">Special Offer</div>
</div>
<div class="destination_content">
<div class="destination_title">Bali</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="{% static 'images/destination_2.jpg' %}" alt="">
</div>
<div class="destination_content">
<div class="destination_title">Indonesia</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="{% static 'images/destination_3.jpg' %}" alt="">
</div>
<div class="destination_content">
<div class="destination_title">San Francisco</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="{% static 'images/destination_4.jpg' %}" alt="">
</div>
<div class="destination_content">
<div class="destination_title">Paris</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="{% static 'images/destination_5.jpg' %}" alt="">
</div>
<div class="destination_content">
<div class="destination_title">Phi Phi Island</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
<!-- Destination -->
<div class="destination item">
<div class="destination_image">
<img src="{% static 'images/destination_6.jpg' %}" alt="">
</div>
<div class="destination_content">
<div class="destination_title">Mykonos</div>
<div class="destination_subtitle"><p>Nulla pretium tincidunt felis, nec.</p></div>
<div class="destination_price">From $679</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Testimonials -->
<div class="testimonials" id="testimonials">
<div class="parallax_background parallax-window" data-parallax="scroll" data-image-src="{% static 'images/testimonials.jpg' %}" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col text-center">
<div class="section_subtitle">simply amazing places</div>
<div class="section_title"><h2>Testimonials</h2></div>
</div>
</div>
<div class="row testimonials_row">
<div class="col">
<!-- Testimonials Slider -->
<div class="testimonials_slider_container">
<div class="owl-carousel owl-theme testimonials_slider">
<!-- Slide -->
<div class="owl-item text-center">
<div class="testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. lobortis dolor. Cras placerat lectus a posuere aliquet. Curabitur quis vehicula odio.</div>
<div class="testimonial_author">
<div class="testimonial_author_content d-flex flex-row align-items-end justify-content-start">
<div>john turner,</div>
<div>client</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="owl-item text-center">
<div class="testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. lobortis dolor. Cras placerat lectus a posuere aliquet. Curabitur quis vehicula odio.</div>
<div class="testimonial_author">
<div class="testimonial_author_content d-flex flex-row align-items-end justify-content-start">
<div>john turner,</div>
<div>client</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="owl-item text-center">
<div class="testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. lobortis dolor. Cras placerat lectus a posuere aliquet. Curabitur quis vehicula odio.</div>
<div class="testimonial_author">
<div class="testimonial_author_content d-flex flex-row align-items-end justify-content-start">
<div>john turner,</div>
<div>client</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="test_nav">
<ul class="d-flex flex-column align-items-end justify-content-end">
<li>City Breaks Clients<span>01</span></li>
<li>Cruises Clients<span>02</span></li>
<li>All Inclusive Clients<span>03</span></li>
</ul>
</div>
</div>
<!-- News -->
<div class="news" id="news">
<div class="container">
<div class="row">
<div class="col-xl-8">
<div class="news_container">
<!-- News Post -->
<div class="news_post d-flex flex-md-row flex-column align-items-start justify-content-start">
<div class="news_post_image"><img src="{% static 'images/news_1.jpg' %}" alt=""></div>
<div class="news_post_content">
<div class="news_post_date d-flex flex-row align-items-end justify-content-start">
<div>02</div>
<div>june</div>
</div>
<div class="news_post_title">Best tips to travel light</div>
<div class="news_post_category">
<ul>
<li>lifestyle & travel</li>
</ul>
</div>
<div class="news_post_text">
<p>Pellentesque sit amet elementum ccumsan sit amet mattis eget, tristique at leo. Vivamus massa.Tempor massa et laoreet.</p>
</div>
</div>
</div>
<!-- News Post -->
<div class="news_post d-flex flex-md-row flex-column align-items-start justify-content-start">
<div class="news_post_image"><img src="{% static 'images/news_2.jpg' %}" alt=""></div>
<div class="news_post_content">
<div class="news_post_date d-flex flex-row align-items-end justify-content-start">
<div>01</div>
<div>june</div>
</div>
<div class="news_post_title">Best tips to travel light</div>
<div class="news_post_category">
<ul>
<li>lifestyle & travel</li>
</ul>
</div>
<div class="news_post_text">
<p>Tempor massa et laoreet malesuada. Pellentesque sit amet elementum ccumsan sit amet mattis eget, tristique at leo.</p>
</div>
</div>
</div>
<!-- News Post -->
<div class="news_post d-flex flex-md-row flex-column align-items-start justify-content-start">
<div class="news_post_image"><img src="{% static 'images/news_3.jpg' %}" alt=""></div>
<div class="news_post_content">
<div class="news_post_date d-flex flex-row align-items-end justify-content-start">
<div>29</div>
<div>may</div>
</div>
<div class="news_post_title">Best tips to travel light</div>
<div class="news_post_category">
<ul>
<li>lifestyle & travel</li>
</ul>
</div>
<div class="news_post_text">
<p>Vivamus massa.Tempor massa et laoreet malesuada. Aliquam nulla nisl, accumsan sit amet mattis.</p>
</div>
</div>
</div>
</div>
</div>
<!-- News Sidebar -->
<div class="col-xl-4">
<div class="travello">
<div class="background_image" style="background-image:url('{% static 'images/travello.jpg' %}')"></div>
<div class="travello_content">
<div class="travello_content_inner">
<div></div>
<div></div>
</div>
</div>
<div class="travello_container">
<a href="#">
<div class="d-flex flex-column align-items-center justify-content-end">
<span class="travello_title">Get a 20% Discount</span>
<span class="travello_subtitle">Buy Your Vacation Online Now</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="parallax_background parallax-window" data-parallax="scroll"
data-image-src="{% static 'images/footer_1.jpg' %}" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="newsletter">
<div class="newsletter_title_container text-center">
<div class="newsletter_title">Subscribe to our newsletter to get the latest trends &
news</div>
<div class="newsletter_subtitle">Join our database NOW!</div>
</div>
<div class="newsletter_form_container">
<form action="#"
class="newsletter_form d-flex flex-md-row flex-column align-items-start justify-content-between"
id="newsletter_form">
<div
class="d-flex flex-md-row flex-column align-items-start justify-content-between">
<div><input type="text" class="newsletter_input newsletter_input_name"
id="newsletter_input_name" placeholder="Name" required="required">
<div class="input_border"></div>
</div>
<div><input type="email" class="newsletter_input newsletter_input_email"
id="newsletter_input_email" placeholder="Your e-mail"
required="required">
<div class="input_border"></div>
</div>
</div>
<div><button class="newsletter_button">subscribe</button></div>
</form>
</div>
</div>
</div>
</div>
<div class="row footer_contact_row">
<div class="col-xl-10 offset-xl-1">
<div class="row">
<!-- Footer Contact Item -->
<div class="col-xl-4 footer_contact_col">
<div
class="footer_contact_item d-flex flex-column align-items-center justify-content-start text-center">
<div class="footer_contact_icon"><img src="{% static 'images/sign.svg' %}" alt="">
</div>
<div class="footer_contact_title">give us a call</div>
<div class="footer_contact_list">
<ul>
<li>Office Landline: +44 5567 32 664 567</li>
<li>Mobile: +44 5567 89 3322 332</li>
</ul>
</div>
</div>
</div>
<!-- Footer Contact Item -->
<div class="col-xl-4 footer_contact_col">
<div
class="footer_contact_item d-flex flex-column align-items-center justify-content-start text-center">
<div class="footer_contact_icon"><img src="{% static 'images/trekking.svg' %}"
alt=""></div>
<div class="footer_contact_title">come & drop by</div>
<div class="footer_contact_list">
<ul style="max-width:190px">
<li>4124 Barnes Street, Sanford, FL 32771</li>
</ul>
</div>
</div>
</div>
<!-- Footer Contact Item -->
<div class="col-xl-4 footer_contact_col">
<div
class="footer_contact_item d-flex flex-column align-items-center justify-content-start text-center">
<div class="footer_contact_icon"><img src="{% static 'images/around.svg' %}" alt="">
</div>
<div class="footer_contact_title">send us a message</div>
<div class="footer_contact_list">
<ul>
<li>youremail#gmail.com</li>
<li>Office#yourbusinessname.com</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col text-center">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©
<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made
with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com"
target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</div>
</footer>
</div>
<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'styles/bootstrap4/popper.js' %}"></script>
<script src="{% static 'styles/bootstrap4/bootstrap.min.js' %}"></script>
<script src="{% static 'plugins/OwlCarousel2-2.2.1/owl.carousel.js' %}"></script>
<script src="{% static 'plugins/Isotope/isotope.pkgd.min.js' %}"></script>
<script src="{% static 'plugins/scrollTo/jquery.scrollTo.min.js' %}"></script>
<script src="{% static 'plugins/easing/easing.js' %}"></script>
<script src="{% static 'plugins/parallax-js-master/parallax.min.js' %}"></script>
<script src="{% static 'js/custom.js' %}"></script>
</body>
</html>
settings.py-
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'static')
]
STATIC_ROOT=os.path.join(BASE_DIR,'assets')
Am I missing any changes to be done?

The issue is solved... I guess there was issue while setting up the project. Everything is working fine now.

Setting margin left equal to sum of width of previous elements

I m working on horizontal scroll website and want to set left margin for element based on sum of width of previous elements.
But till element with class="block-5" its working fine and after that its taking too much value for left. Not getting what is the issue exactly.
HTML
<div id="scroll-main-wrapper" class="container main-wrapper">
<div class="common-wrapper block-1" width="230">
<div style="background-image: url(images/img.png);">
<h1>Some Heading</h1>
</div>
</div>
<div class="common-wrapper block-2" width="546">
<div class="row">
<div class="col-md-12">
<div class="img-wrapper">
<div class="img" style="background-image: url(images/groom.jpg);">
</div>
</div>
<div class="img-wrapper">
<div class="img" style="background-image: url(images/bride.jpg);">
</div>
</div>
</div>
</div>
</div>
<div class="common-wrapper block-3" width="230">
<img src="images/pattern.png" alt="pattern">
</div>
<div class="common-wrapper block-4 text-center" width="286">
<img src="images/img-bg.png" alt="bg-img" class="img-responsive">
<p class="title">Title</p>
</div>
<div class="common-wrapper block-5" width="1578">
<div class="vertically-center">
<div class="row">
<div class="col-md-12">
<img src="images/img.png" alt="bg-img" class="img-responsive">
<p class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="images/img.png" alt="bg-img" class="img-responsive">
<p class="chapter-title">Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
<div class="common-wrapper block-6" width="740">
<div class="row">
<div class="col-md-12">
<img src="images/img.png" alt="bg-img">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="common-wrapper block-7 text-center" width="230">
<img src="images/img.png" alt="bg-img" class="img-responsive">
</div>
</div>
JQUERY
var left = 0;
$('#scroll-main-wrapper .common-wrapper').each(function() {
$(this).css('left', left);
left += $(this).outerWidth() + 40;
});
CSS
.common-wrapper {
position: absolute;
top: 62px;
bottom: 0px;
min-width: 230px;
padding: 10px 0px;
border: 1px rgba(244, 200, 113, 0.3) solid;
}
RESULT
<div id="scroll-main-wrapper" class="container main-wrapper">
<div class="common-wrapper block-1" style="left: 0px;">
<div style="background-image: url(images/img.png);">
<h1>Some Heading</h1>
</div>
</div>
<div class="common-wrapper block-2" style="left: 270px;">
<div class="row">
<div class="col-md-12">
<div class="img-wrapper">
<div class="img" style="background-image: url(images/groom.jpg);">
</div>
</div>
<div class="img-wrapper">
<div class="img" style="background-image: url(images/bride.jpg);">
</div>
</div>
</div>
</div>
</div>
<div class="common-wrapper block-3" style="left: 856px;">
<img src="images/pattern.png" alt="pattern">
</div>
<div class="common-wrapper block-4 text-center" style="left: 1126px;">
<img src="images/img-bg.png" alt="bg-img" class="img-responsive">
<p class="title">Title</p>
</div>
<div class="common-wrapper block-5" style="left: 1452px;">
<div class="vertically-center">
<div class="row">
<div class="col-md-12">
<img src="images/img.png" alt="bg-img" class="img-responsive">
<p class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="images/img.png" alt="bg-img" class="img-responsive">
<p class="chapter-title">Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
<div class="common-wrapper block-6" style="left: 7096px;">
<div class="row">
<div class="col-md-12">
<img src="images/img.png" alt="bg-img">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="common-wrapper block-7 text-center" style="left: 8040px;">
<img src="images/img.png" alt="bg-img" class="img-responsive">
</div>
</div>
Thanks in advance. :)

change to html width to style="width:"
<div id="scroll-main-wrapper" class="container main-wrapper">
<div class="common-wrapper block-1" style="width:230px;">
<div style="background-image: url(images/img.png);">
<h1>Some Heading</h1>
</div>
</div>
<div class="common-wrapper block-2" style="width:546px;">
<div class="row">
<div class="col-md-12">
<div class="img-wrapper">
<div class="img" style="background-image: url(images/groom.jpg);">
</div>
</div>
<div class="img-wrapper">
<div class="img" style="background-image: url(images/bride.jpg);">
</div>
</div>
</div>
</div>
</div>
<div class="common-wrapper block-3" style="width:230px;">
<img src="images/pattern.png" alt="pattern">
</div>
<div class="common-wrapper block-4 text-center" style="width:286px;">
<img src="images/img-bg.png" alt="bg-img" class="img-responsive">
<p class="title">Title</p>
</div>
<div class="common-wrapper block-5" style="width:1578px;">
<div class="vertically-center">
<div class="row">
<div class="col-md-12">
<img src="images/img.png" alt="bg-img" class="img-responsive">
<p class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="images/img.png" alt="bg-img" class="img-responsive">
<p class="chapter-title">Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
<div class="common-wrapper block-6" style="width:740px;">
<div class="row">
<div class="col-md-12">
<img src="images/img.png" alt="bg-img">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="common-wrapper block-7 text-center" style="width:230px;">
<img src="images/img.png" alt="bg-img" class="img-responsive">
</div>
</div>
https://jsfiddle.net/n6aaz3o7/3/

all images tabs jump and appear on page when refresh

i am having a problem first this is the code that i am working on
<section id="portfolio">
<div class="container">
<div class="center">
<h2>Products</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<ul class="portfolio-filter text-center">
<li><a class="btn btn-default " href="#" data-filter="*">All Works</a></li>
<li><a class="btn btn-default" href="#" data-filter=".bootstrap">Creative</a></li>
<li><a class="btn btn-default" href="#" data-filter=".html">Photography</a></li>
<li><a class="btn btn-default active" href="#" data-filter=".wordpress">Web Development</a></li>
</ul><!--/#portfolio-filter-->
<div class="row">
<div class="portfolio-items">
<div class="portfolio-item apps col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item1.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item1.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item joomla bootstrap col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item2.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item2.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item bootstrap wordpress col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item3.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item3.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item joomla wordpress apps col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item4.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item4.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item joomla html bootstrap col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item5.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item5.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item wordpress html apps col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item6.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item6.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item wordpress html col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item7.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item7.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item wordpress html bootstrap col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item8.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item8.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
</div>
</div>
</div>
</section><!--/#portfolio-item-->
as u can see it's a portfolio page and it's has random images and as u click on of the data-filter it will show u the images of that section ,but i am having a problem that when i reload the page ,all the images jump into the page and how many images i put all of them will appear ,and that's not good ,what i want to do is that for example if i reload the page only and automatically the "Creative images" tab images only appear ,i am strugling on how to do that this is my javascript code
// portfolio filter
$(window).load(function(){'use strict';
var $portfolio_selectors = $('.portfolio-filter >li>a');
var $portfolio = $('.portfolio-items');
$portfolio.isotope({
itemSelector : '.portfolio-item',
layoutMode : 'fitRows'
});
$portfolio_selectors.on('click', function(){
$portfolio_selectors.removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$portfolio.isotope({ filter: selector });
return false;
});
});
any reply it will be very helpful thanks in advance.

Demo
filter: '.bootstrap' in the initialization will hide all other div's. filter option can be used while initializing isotope.
// portfolio filter
var $portfolio_selectors = $('.portfolio-filter >li>a');
var $portfolio = $('.portfolio-items');
$portfolio.isotope({
itemSelector: '.portfolio-item',
layoutMode: 'fitRows',
filter: '.bootstrap'
});
$portfolio_selectors.on('click', function () {
$portfolio_selectors.removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$portfolio.isotope({
filter: selector
});
return false;
});

Categories