Extending Templates: Uncaught SyntaxError: Unexpected token < - javascript

Getting several errors of type "Uncaught SyntaxError: Unexpected token < " when I load the same template with a different request.
My project url:
url(r'^$', 'larkspur.views.home', name='home'),
url(r'^test/', 'larkspur.views.home', name='home'),
My app view:
def home(request):
return render_to_response('larkspur/index.html', context, context_instance=RequestContext(request))
When I load mysite.com/ everything loads fine. When I load mysite.com/test things get a little whacky First, I get several "Uncaught SyntaxError: Unexpected token < ". Additionally, some javascript doesn't seem to function correctly, though it appears to load fully.
Any guesses or help would be greatly appreciated. Possibly relevant code below:
index.html (modified from a purchased/licensed HTML5 template):
{% extends "larkspur/base.html" %}
{% block content %}
<!-- CONTENT BEGIN -->
<div id="content" class="">
<div class="inner">
<div class="block_slider_type_1 general_not_loaded">
<div id="slider" class="slider flexslider">
<ul class="slides">
<li>
<img src="{{ STATIC_URL }}larkspur/images/pic_slider_1_1.jpg" alt="">
<div class="animated_item text_1_1" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Travel, PHOTOGRAPHY</div>
<div class="animated_item text_1_2" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Mountains in Switzerland</div>
<div class="animated_item text_1_3" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Read More</div>
</li>
<li>
<img src="{{ STATIC_URL }}larkspur/images/pic_slider_1_2.jpg" alt="">
<div class="animated_item text_1_1" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Travel, PHOTOGRAPHY</div>
<div class="animated_item text_1_2" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">My Love - New York</div>
<div class="animated_item text_1_3" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Read More</div>
</li>
<li>
<img src="{{ STATIC_URL }}larkspur/images/pic_slider_1_3.jpg" alt="">
<div class="animated_item text_1_1" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Life, PHOTOGRAPHY</div>
<div class="animated_item text_1_2" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">My Awesome workplace</div>
<div class="animated_item text_1_3" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Read More</div>
</li>
<li>
<img src="{{ STATIC_URL }}larkspur/images/pic_slider_1_4.jpg" alt="">
<div class="animated_item text_1_1" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Life, PHOTOGRAPHY</div>
<div class="animated_item text_1_2" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Flying over the mountains</div>
<div class="animated_item text_1_3" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Read More</div>
</li>
<li>
<img src="{{ STATIC_URL }}larkspur/images/pic_slider_1_5.jpg" alt="">
<div class="animated_item text_1_1" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">People, Fashion</div>
<div class="animated_item text_1_2" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Young Businessman</div>
<div class="animated_item text_1_3" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Read More</div>
</li>
<li>
<img src="{{ STATIC_URL }}larkspur/images/pic_slider_1_6.jpg" alt="">
<div class="animated_item text_1_1" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">People, Life</div>
<div class="animated_item text_1_2" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">The guy on the field</div>
<div class="animated_item text_1_3" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Read More</div>
</li>
</ul>
</div>
<script type="text/javascript">
jQuery(function() {
init_slider_1('#slider');
});
</script>
</div>
<div class="block_general_title_1 w_margin_1">
<h1>Latest Posts</h1>
<h2>ENTER THE SUB TITLE FOR THIS SECTION</h2>
</div>
<div class="block_posts type_1 type_sort general_not_loaded">
<div class="posts">
<article class="post_type_1">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_1.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
<span>TOP NEWS.</span> Sed ut perspiciatis unde omnis iste natus sit volup.
</div>
</div>
</article>
<article class="post_type_1">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_6.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Red ut perspiciatis unde omnis iste.
</div>
</div>
</article>
<article class="post_type_1">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_11.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Perspiciatis unde omnis iste.
</div>
</div>
</article>
<article class="post_type_1">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_7.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Totam rem aperiam, eaque ipsa quae ab illo inventore verit.
</div>
</div>
</article>
<article class="post_type_1">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_12.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
<span>NEWS.</span> Totam rem aperiam, eaque ipsa quae ab illo inventore.
</div>
</div>
</article>
<article class="post_type_2">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_2.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.
</div>
</div>
</article>
<article class="post_type_3">
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</div>
</article>
<article class="post_type_2">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_13.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Accusantium doloremque lauda ntium, totam.
</div>
</div>
</article>
<article class="post_type_2">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_3.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia.
</div>
</div>
</article>
<article class="post_type_1">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_14.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Sed ut perspiciatis unde omnis iste natus sit volup.
</div>
</div>
</article>
<article class="post_type_2">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_8.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Sed ut perspiciatis unde omnis iste natus sit volup.
</div>
</div>
</article>
<article class="post_type_1">
<div class="feature">
<div class="slider">
<div id="post_slider_1" class="flexslider">
<ul class="slides">
<li><img src="{{ STATIC_URL }}larkspur/images/pic_post_1_4.jpg" alt=""></li>
<li><img src="{{ STATIC_URL }}larkspur/images/pic_post_1_16.jpg" alt=""></li>
<li><img src="{{ STATIC_URL }}larkspur/images/pic_post_1_17.jpg" alt=""></li>
</ul>
</div>
<script type="text/javascript">
jQuery(function() {
init_post_slider_1('#post_slider_1');
});
</script>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
<span>TOP NEWS.</span> Quae ab illo inventore veritatis et quasi architecto beatae.
</div>
</div>
</article>
<article class="post_type_2">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_9.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta.
</div>
</div>
</article>
<article class="post_type_1">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_10.jpg" alt=""><span class="hover no_icon"></span><span class="icon video"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
<span>TOP NEWS.</span> Totam rem aperiam, eaque ipsa quae ab illo inven.
</div>
</div>
</article>
<article class="post_type_2">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_15.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.
</div>
</div>
</article>
<article class="post_type_1">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_5.jpg" alt=""><span class="hover"></span>
</div>
<div class="review">
<div class="num">7.5</div>
<div class="type">score</div>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Voluptatem sequi nesciunt.
</div>
</div>
</article>
<article class="post_type_3">
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Accusantium doloremque laudantium, totam rem aperiam, eaqu.
</div>
</div>
</article>
</div>
<div class="controls">
<span>Load more posts</span>
</div>
</div>
</div>
</div>
<!-- CONTENT END -->
{% endblock %}

Related

Why do we use the Intersection Observer API? Does it impact speed? Or Give me Some Advantages of using Intersection Observer

I Want to know why we use the intersection observer API. I want to load my page sections in an interval. Does it affect the page speed or not?
Below is my code. I'm confused why I'm using this when it has no effect on speed or any other things. I have an array of sections and a loader while threshold call.
Please explain to me why we are using this API while it has no advantage
const featureds = document.querySelectorAll(".featured");
const options = {
root: null,
threshold: 0.25,
rootMargin: '0px'
};
const observer = new IntersectionObserver(function(entries,observer) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
}
console.log(entry);
});
}, options);
featureds.forEach(featured => {
observer.observe(featured);
});
<div class="container featured 1">
<div class="row">
<div class="col-12">
<!-- <h4 class="team-name"></h4> -->
<h3 class="team-expert"><span>Feature Posts</span></h3>
<div class="feature-post">
<div class="container">
<div class="owl-carousel team-slider nospace group team">
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book1.png" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book2.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book5.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book3.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book7.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- feature posts ends -->
<!-- popular posts starts -->
<div class="container featured 2">
<div class="row">
<div class="col-12">
<!-- <h4 class="team-name"></h4> -->
<h3 class="team-expert"><span>Popular Posts</span></h3>
<div class="popular-post">
<div class="container">
<div class="owl-carousel team-slider nospace group team">
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book8.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book2.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book5.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book3.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book7.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

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

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

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.

Smooth Scroll not working properly on mobile layout

I'm doing a site and in browser layout, smooth-scroll works perfectly but in mobile layout when I click in a link it doesn't leave me in the right place. Always much lower. Why?
I have reviewed the code and documentation of Smooth Scroll but I can not find anything wrong.
Here is my code:
https://codepen.io/ZeR0ByTe/pen/wrbMRZ
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- ESTILOS CSS -->
<link href="css/estilo.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/blueimp-gallery.min.css">
<!-- scroll -->
<script src="js/smooth-scroll.min.js"></script>
<script src="js/wow.min.js"></script>
<script>
</script>
</link>
</link>
</link>
</meta>
</meta>
</head>
<body>
<header class="d-none d-md-block" >
<div id="sliderFotos" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#sliderFotos" data-slide-to="0" class="active"></li>
<li data-target="#sliderFotos" data-slide-to="1"></li>
<li data-target="#sliderFotos" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url(img/bg-4.jpg">
<div class="carousel-caption d-none d-md-block">
<div class="row">
<div class="col-4 d-flex">
<img class="img-fluid align-self-center logo wow bounceIn" data-wow-duration="1s" src="img/logoSB.png" width="300" height="300" alt="">
</div>
<div class="col-8">
<div class="jumbotron wow bounceIn" data-wow-duration="1s">
<h1 class="display-2 bg-warning">Bienvenidos!</h1>
<p class="lead">Aca iría un primer mensaje de presentación a la página, noticia u otra cosa.</p>
<hr class="m-y-md">
<p>Y se puede complementar con otro texto acá, pero más corto.</p>
<p class="lead">
<a class="btn btn-warning btn-lg" href="#servicio" role="button"><i class="fa fa-arrow-down fa-lg mr-2"></i>Más info
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url(img/bg-7.jpg">
<div class="carousel-caption d-none d-md-block">
<h3>ALGÚN MENSAJE 2</h3>
<p>Descripción 2do mensaje.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url(img/bg-5.jpg">
<div class="carousel-caption d-none d-md-block">
<h3>ALGÚN MENSAJE 3</h3>
<p>Descripción 3er mensaje.</p>
</div>
</div>
</div>
<!-- CONTROLES SLIDER -->
<a data-scroll-ignore class="carousel-control-prev" href="#sliderFotos" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a data-scroll-ignore class="carousel-control-next" href="#sliderFotos" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-xl navbar-dark bg-dark sticky-top">
<a class="navbar-brand" href="#">
SBGuardavidas
</img>
</a>
<button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto text-center">
<a class="nav-item nav-link active" data-scroll href="#">
Inicio
</a>
<a class="nav-item nav-link" data-scroll href="#nosotros">
Nosotros
</a>
<a class="nav-item nav-link" href="#">
Publicidad
</a>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="" id="navbarDropdownMenuLink">
Eventos
</a>
<div aria-labelledby="navbarDropdownMenuLink" class="dropdown-menu">
<a class="dropdown-item" data-scroll href="#conciencia">
PROYECTO +CONCIENCIA
</a>
<a class="dropdown-item" data-scroll href="#">
Antorchada
</a>
<a class="dropdown-item" data-scroll href="#">
Competencias
</a>
</div>
</li>
<a class="nav-item nav-link" data-scroll href="#galeria">
Galería
</a>
<a class="nav-item nav-link" data-scroll href="#contacto">
Contacto
</a>
</ul>
<div class="d-flex flex-row justify-content-center">
<a class="mr-2 mx-2" href="#">
<i class="fa fa-2x fa-facebook-official" aria-hidden="true"></i>
</a>
<a class="" href="#">
<i class="fa fa-2x fa-instagram" aria-hidden="true"></i>
</a>
</div>
</div>
</nav>
<!-- FIN NAVBAR -->
<!-- NOTICIAS -->
<section class=" d-flex justify-content-center align-content-center flex-wrap iconos" >
<div class="container-fluid" >
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="" id="servicio" >
SIEMPRE A TU SERVICIO
</h2>
<hr>
</div>
</div>
</div>
<div class="container my-5">
<div class="row ">
<div class="col-lg-3 col-md-6 text-center wow fadeInUp" data-wow-duration="0.2s">
<div class="">
<i class="fa fa-5x fa-binoculars text-danger sr-icons">
</i>
<h3>
Seguridad
</h3>
<p class="text-muted">
A tu cuidado en la playa, continuamente vigilando.
</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center wow fadeInUp" data-wow-duration="0.4s">
<div class="service-box">
<i class="fa fa-5x fa-handshake-o text-danger fa-fw">
</i>
<h3>
Confianza
</h3>
<p class="text-muted">
Trabajamos en equipo para un mejor resultado.
</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center wow fadeInUp" data-wow-duration="0.6s">
<div class="service-box">
<i class="fa fa-5x fa-globe text-danger sr-icons">
</i>
<h3>
Medio Ambiente
</h3>
<p class="text-muted">
Protegemos, concientizamos y educamos.
</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center wow fadeInUp" data-wow-duration="0.8s">
<div class="service-box">
<i class="fa fa-5x fa-heart text-danger sr-icons">
</i>
<h3>
Pasión
</h3>
<p class="text-muted">
Amamos lo que hacemos.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- FIN NOTICIAS -->
<!-- NOSOTROS -->
<div class="container-fluid nosotros d-flex justify-content-center align-items-center" >
<div class="row">
<div class="col-sm-12">
<h2 class="text-center" id="nosotros">
NOSOTROS
</h2>
<hr>
<p class="lead text-center">
Conocenos un poco más...
</p>
</div>
<div class="col-sm-12 col-md-6 p-4">
<p class="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias iste explicabo consectetur mollitia aperiam unde dolor molestias quasi, fuga ipsam incidunt fugiat, quia molestiae eveniet. Aspe
</p>
<p class="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias iste explicabo consectetur mollitia aperiam unde dolor molestias quasi, fuga ipsam incidunt fugiat, quia molestiae eveniet. Aspe
</p>
<p class="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias iste explicabo consectetur mollitia aperiam unde dolor molestias quasi, fuga ipsam incidunt fugiat, quia molestiae eveniet. Aspe
</p>
</div>
<div class="col-sm-12 col-md-6 p-4">
<img alt="" class="img-fluid" src="img/equipo.jpg">
</img>
</div>
</div>
</div>
<!-- FIN NOSOTROS -->
<!-- +CONCIENCIA -->
<div class="container-fluid" >
<div class="row ">
<div class="col-sm-12 col-md-6 d-flex justify-content-center align-items-center conciencia-izquierda ">
<img alt="" class="img-fluid" width="400" height="400" src="img/logoSB.png">
</img>
</div>
<div class="col-sm-12 col-md-6 d-flex justify-content-center align-items-center flex-wrap conciencia-derecha">
<h2 class="" id="conciencia">
PROYECTO +CONCIENCIA
</h2>
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, temporibus, animi. Nesciunt fugit unde voluptates cum, aut, quia, doloribus laborum inventore quam nemo repudiandae veniam? Sapiente tempora iusto suscipit quae at eligendi nobis odit voluptatibus quos perspiciatis, assumenda deserunt modi enim minima numquam facilis quis dignissimos, molestias veniam culpa amet!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem et cumque, aliquid. Magnam sapiente aliquam repellat dolorum harum,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas dignissimos aut dolorum aliquam minus, rerum.
</p>
</div>
</div>
</div>
</div>
<!-- FIN CONCIENCIA -->
<!-- GALERIA -->
<div class="container-fluid galeria d-flex align-items-center">
<div class="row ">
<div class="col-md-12">
<h2 class="text-center text-white" id="galeria">
GALERÍA
</h2>
<hr>
<p class="lead text-center text-white">
Un poco de nuestros momentos...
</p>
</div>
<!-- The container for the list of example images -->
<div id="links" class="text-center p-2">
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
</div>
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
</div>
</div>
</div>
</div>
<!-- FIN GALERIA -->
<!-- SPONSORS -->
<div class="container-fluid bg-warning sponsors d-none d-lg-block">
<div class="row">
<div class="col-12">
<h2 class="text-center text-white">MARCAS QUE NOS APOYAN</h2>
<hr>
<p class="lead text-center text-white">
Cada temporada confían en nosotros...
</p>
<div class="col-12 owl-carousel owl-theme">
<div class="item my-3">
<img class="" src="img/partner-1.png" alt="Effacy partner">
</div>
<div class="item my-3">
<img class="" src="img/partner-2.png" alt="Effacy partner">
</div>
<div class="item my-3">
<img class="" src="img/partner-3.png" alt="Effacy partner">
</div>
<div class="item my-3">
<img class="" src="img/partner-1.png" alt="Effacy partner">
</div>
<div class="item my-3">
<img class="img-fluid center-block" src="img/partner-2.png" alt="Effacy partner">
</div>
</div>
</div>
</div>
</div>
<!-- FIN SPONSORS -->
<!-- CONTACTO -->
<div class="container" >
<div class="row d-flex justify-content-center align-content-center contacto">
<div class="col-12">
<h2 class="text-center" id="contacto">CONTACTO</h2>
<hr>
<p class="lead text-center mb-5">
Comunicate con nosotros ante cualquier duda.
</p>
</div>
<div class="row justify-content-center">
<!-- MENSAJE DE ENVIO Y ERROR PHP -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Mensaje enviado correctamente.</strong> En poco tiempo te respodemos. ¡Muchas gracias!
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Error, hubo un problema.</strong> Intentalo otra vez. ¡Muchas gracias!
</div>
<!-- FIN MENSAJE DE ENVIO Y ERROR PHP -->
</div>
<!-- FORM LADO IZQUIERDO -->
<div class="col-md-12 col-lg-4">
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
<div class="input-group mb-3">
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Nombre">
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="E-mail">
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="fa fa-mobile fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Celular">
</div>
</div>
<!-- FORM LADO DERECHO -->
<div class="col-md-12 col-lg-8">
<div class="input-group mb-3">
<span class="input-group-addon"><i class="fa fa-commenting fa-fw"></i></span>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="6" placeholder="Escriba su mensaje..."></textarea>
</div>
</div>
<button type="submit" class="btn btn-success align-s"><i class="fa fa-paper-plane fa-lg mr-2"></i>Enviar</button>
<button type="reset" class="btn btn-danger align-s"><i class="fa fa-trash-o fa-lg mr-2"></i>Borrar</button>
<!-- BOTON MOSTRAR MAPA DE SB -->
<button id="mapa" type="button" class="btn btn-lg btn-block btn-warning mt-5" data-toggle="modal" data-target="#mostrarMapa">Mapa de San Bernardo</button>
<!-- MODAL MAPA DE SB -->
<div class="modal fade" id="mostrarMapa" tabindex="-1" role="dialog" aria-labelledby="modalLabelLarge" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modalLabelLarge">Mapa de San Bernardo - Horarios ENERO / FEBRERO</h4>
</div>
<div class="modal-body">
<img class="img-fluid" src="img/mapa2.png">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- FIN CONTACTO -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/blueimp-gallery.js"></script>
<script src="js/jquery.blueimp-gallery.js"></script>
<script>$(document).ready(function(){
// Animacion Scroll (animate.css)
new WOW().init();
// SmoothScroll
var scroll = new SmoothScroll('a[href*="#"]', {
// Speed & Easing
speed: 2000, // Integer. How fast to complete the scroll in milliseconds
offset: 0, // Integer or Function returning an integer. How far to offset the scrolling anchor location in pixels
easing: 'easeInOutQuart', // Easing pattern to use
});
// COMIENZO CARROUSEL
$(".owl-carousel").owlCarousel({
items:8,
loop: true,
margin: 30,
autoplayTimeout:1500,
center: true,
autoplay: true,
autoplayHoverPause:true,
autowidth: false,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:8,
nav:true,
}
}
});
$('.navbar-nav>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
$('.navbar-nav>.dropdown>.dropdown-menu>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
});
// comienzo isotope
// fin isotope
</script>
</body>
</html>
-(Sorry for my english)
-(Tablet layout is not ready yet)
Thanks!

Finally a friend could solve the problem, so I share the solution in case someone else serves him.
I have removed the JS library SmoothScroll and also the code to start it.
// SmoothScroll
var scroll = new SmoothScroll('a[href*="#"]', {
speed: 2000,
offset: 0,
easing: 'easeInOutQuart', // Easing pattern to use
});
And I replace for this:
$('a[href*="#"]')
.not('[href="#"]')
.not('[href="#0"]')
// Remove links that don't actually link to anything
.click(function(event) {
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
var scrollTop = target.offset().top - $('.sticky-top').height();
$('html, body').animate({
scrollTop: scrollTop
}, 1000)
}
}
});
The code above is adapted to what I needed, but it was based on this:
https://css-tricks.com/snippets/jquery/smooth-scrolling/
Thanks and sorry again for my english.

I manage to solve this by using a different offset value when the window width is on mobile
const options = {
speed: 500,
speedAsDuration: true,
offset: window.innerWidth < 768 ? 400 : 90
}
new SmoothScroll('a[href*="#"]', options);
The problem seems to be that in mobile the library requires a higher offset value, maybe because the elements are not exactly the same dimensions than on desktop.
Hope this could help you or someone.
Greetings

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/

Categories