I can't get this Bootstrap carousel snippet to work. I have added the code below to my Bootstrap HTML layout, but I'm not sure that the script is in the right place.
What am I doing wrong?
<!-- !FOTO AUTO -->
<div id="container-slider-dettaglio-auto">
<!-- Slider -->
<div id="slider-foto-auto" class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<!-- Top part of the slider -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img class="img-responsive" src="img/foto-auto/audi-s4/audi-s4-avant-3.jpeg" alt="Angolare Fronte Audi S4" title="Audi S4">
</div>
<div class="item" data-slide-number="1">
<img src="img/foto-auto/audi-s4/audi-s4-avant-3-2.jpeg" alt="Frontale Audi S4" title="Audi S4">
</div>
<div class="item" data-slide-number="2">
<img src="img/foto-auto/audi-s4/audi-s4-avant-3-3.jpeg" alt="Angolare Fronte Audi S4" title="Audi S4">
</div>
<div class="item" data-slide-number="3">
<img src="img/foto-auto/audi-s4/audi-s4-avant-3-4.jpeg" alt="Angolare Retro Audi S4" title="Audi S4">
</div>
<div class="item" data-slide-number="4">
<img src="img/foto-auto/audi-s4/audi-s4-avant-3-5.jpeg" alt="Retro Audi S4" title="Audi S4">
</div>
<div class="item" data-slide-number="5">
<img src="img/foto-auto/audi-s4/audi-s4-avant-3-6.jpeg" alt="Cerchione Audi S4" title="Audi S4">
</div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"></a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<div class="hidden-xs col-lg-12" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<ul class="hide-bullets">
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-0">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-0">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-2-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-1">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-3-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-2">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-4-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-3">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-5-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-4">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-6-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
</ul>
</div>
</div>
<!--/slider-dettaglio-auto-->
</div>
<!--/container-slider-dettaglio-auto-->
<!-- /FOTO AUTO -->
</div>
<!-- /content -->
</div>
<!-- END CONTENT ROW -->
I added this script before the end of the <body>:
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 5000
});
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click(function() {
var id = this.id.substr(this.id.lastIndexOf("-") + 1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function(e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-' + id).html());
});
});
The solution that Work:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> into the <head> and not at the bottom of <body>.
Is it correct?
Related
I want to be able to press one of the "buttons" as seen on the image below. When the button is pressed, the corresponding section of 3 images would appear/hide. As in, if I press on "Tapas", only the tapas images appear, If I press on "main" only the main images hide/appear.
Here is my HTML code:
var button = document.querySelector('.load-more-button');
var tapas = document.querySelectorAll('.show-tapas');
button.addEventListener("click", function(e) {
tapas.forEach(b => $(b).toggle());
})
.show-tapas {
display: none;
}
.show-tapas.showing {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="grid-portfolio" id="portfolio">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Tapas
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Main Courses
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_main_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_main_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_main_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Dessert
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_dessert_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_dessert_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_dessert_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
</div>
Everything is perfect including the function you have created, the only problem is that you haven't wrap the main courses images and dessert images into a div show-tapas-2 and show-tapas-3 and giving their a tag class load-more-button-2 and load-more-button-3
Just like you did it with Tapas images and then you can used the function for each respective content
var button1 = document.querySelector('.load-more-button');
var tapas1 = document.querySelectorAll('.show-tapas');
button1.addEventListener("click", function(e) {
tapas1.forEach(b => $(b).toggle());
})
var button2 = document.querySelector('.load-more-button-2');
var tapas2 = document.querySelectorAll('.show-tapas-2');
button2.addEventListener("click", function(e) {
tapas2.forEach(b => $(b).toggle());
})
var button3 = document.querySelector('.load-more-button-3');
var tapas3 = document.querySelectorAll('.show-tapas-3');
button3.addEventListener("click", function(e) {
tapas3.forEach(b => $(b).toggle());
})
.show-tapas {
display: none;
}
.show-tapas.showing {
display: block;
}
.show-tapas-2 {
display: none;
}
.show-tapas-2.showing {
display: block;
}
.show-tapas-3 {
display: none;
}
.show-tapas-3.showing {
display: block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="grid-portfolio" id="portfolio">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Tapas
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button-2">
Main Courses
</div>
</div>
</div>
<div class="row show-tapas-2">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button-3">
Dessert
</div>
</div>
</div>
<div class="row show-tapas-3">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
Using some jquery to do that.
I have some rule in a tag. (attribute img-data-class)
and the row including your image should put your class name.
function toggleImage(elm){
var _this = $(elm);
var _class = _this.attr('img-data-class');
$('.' + _class).toggle();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="grid-portfolio" id="portfolio">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
<a img-data-class="show-tapas" onclick="toggleImage(this)" href="#">Tapas</a>
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
<a img-data-class="show-main" onclick="toggleImage(this)" href="#">Main Courses</a>
</div>
</div>
</div>
<div class="row show-main">
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_main_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_main_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_main_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
<a img-data-class="show-dessert" onclick="toggleImage(this)" href="#">Dessert</a>
</div>
</div>
</div>
<div class="row show-dessert">
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_dessert_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_dessert_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_dessert_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
I have a slider on a page, I need the link in that slider to send it to another page with a specific tab open.
I tried to use # 1 at the end of the link however it does not work.
I think i have to use some js to do this, have to put active class on tab and remove the active from first tab. And they will have several sliders that will send to that same page with another open tab.
SLIDER
<div class="container-fluid">
<div class="row text-center my-3">
<div class="row mx-auto my-auto central_slider_prod">
<div id="recipeCarousel" class="carousel slide w-100 tamanho_carousel" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<img class="img-fluid" src="test1.jpg" /><span>Test 1</span>
</div>
<div class="carousel-item">
<img class="img-fluid" src="test2.jpg" /><span>Test 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
TABS
<div id="exTab2" class="container alinha-tab">
<ul class="nav nav-tabs">
<li class="bt_prod_1">
<a id="bt_prod_2" class="active" href="#1" data-toggle="tab">
Test 1
</a>
</li>
<li class="bt_prod_1">
<a id="bt_prod_3" href="#2" data-toggle="tab">
Test 2
</a>
</li>
</ul>
<div class="tab-content">
<!-- TAB #1 -->
<div class="tab-pane active" id="1">
<div class="container-fluid">
<div class="row">
Test 1
</div>
</div>
</div>
<!-- TAB #2 -->
<div class="tab-pane" id="2">
<div class="container-fluid">
<div class="row">
Test 2
</div>
</div>
</div>
</div>
</div>
</div>
To open a new tab you add target="_blank" to your anchor link
<img class="img-fluid" src="test2.jpg" /><span>Test 2</span>
Try this in your js if you use jquery:
$(window.location.hash).tab('show');
First of all I don't know nothing about javascript.
I have this slider:
<div class="col-md-12" id="slider">
<!-- Top part of the slider -->
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" data-slide-number="0">
<img src="img/one.png"></div>
<div class="item" data-slide-number="1">
<img src="img/two.png"></div>
<div class="item" data-slide-number="2">
<img src="img/three.png"></div>
<div class="item" data-slide-number="3">
<img src="img/four.png"></div>
</div><!-- Carousel nav -->
</div>
</div>
</div><!--/Slider-->
<div class="col-md-12" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<div class="carousel slide" id="indicador">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-0"><img src="img/one.png"></a>
</div>
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-1"><img src="img/two.png"></a>
</div>
</div>
<div class="item">
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-0"><img src="img/three.png"></a>
</div>
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-1"><img src="img/four.png"></a>
</div>
</div>
</div>
</div>
</div>
And with this javascript, they works:
$('[id^=carousel-selector-]').click(function () {
var id_selector = $(this).attr("id");
try {
var id = /-(\d+)$/.exec(id_selector)[1];
console.log(id_selector, id);
jQuery('#myCarousel').carousel(parseInt(id));
} catch (e) {
console.log('Regex failed!', e);
}
});
But I would like to make the thumbnail with an active class, how can I made this with javascript // jquery?
Thanks a lot to help me!
Get all of the thumbnail images with $('.thumbnail img');, then when you click on one of the #carousel-selector-* elements, remove the .active class from all other thumbnails and add it to the one inside of the link you clicked on.
var $imgs = $('.thumbnail img');
$('[id^=carousel-selector-]').click(function() {
var id_selector = $(this).attr("id"),
$img = $(this).find('img');
$imgs.not($img).removeClass('active');
$img.addClass('active');
try {
var id = /-(\d+)$/.exec(id_selector)[1];
console.log(id_selector, id);
jQuery('#myCarousel').carousel(parseInt(id));
} catch (e) {
console.log('Regex failed!', e);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12" id="slider">
<!-- Top part of the slider -->
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" data-slide-number="0">
<img src="img/one.png"></div>
<div class="item" data-slide-number="1">
<img src="img/two.png"></div>
<div class="item" data-slide-number="2">
<img src="img/three.png"></div>
<div class="item" data-slide-number="3">
<img src="img/four.png"></div>
</div>
<!-- Carousel nav -->
</div>
</div>
</div>
<!--/Slider-->
<div class="col-md-12" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<div class="carousel slide" id="indicador">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-0"><img src="img/one.png"></a>
</div>
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-1"><img src="img/two.png"></a>
</div>
</div>
<div class="item">
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-0"><img src="img/three.png"></a>
</div>
<div class="col-md-2 miniaturas">
<a class="thumbnail" id="carousel-selector-1"><img src="img/four.png"></a>
</div>
</div>
</div>
</div>
</div>
My website is in bootstrap and jquery 2.3.3 whenever i reload my html code. some extra closing brackets are coming at the end of the code.Please check attached screenshot of webpage and also is here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>iRobot India | Roomba Braava</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="js/bootstrap.js" />
<link rel="stylesheet" href="js/navtab_scroll.min.js" />
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/my_js.js"></script>
<script>
$(function() {
$('.carousel').each(function() {
$(this).carousel({
interval: false
});
});
});
</script>
<body data-target=".navbar">
<div class="main-container col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 header-nav">
<div class="navbar-header ">
<nav class="navbar navbar-default container" id="fixednav" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="text-left">
<a href="index.html">
<img src="images/logo_small.png">
</a>
</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-left text-center">
<li class="nav-item menuactive on" style="border:none;">
<a href="shop.html" class="menu">
<span>Shop</span>
</a>
</li>
<li class="nav-item">
<a href="Vaccummcleaning.html" class="menu">
<span>Home Robots</span>
</a>
</li>
<li class="nav-item">
<a href="Companyprofile.html" class="menu">
<span>About iRobot</span>
</a>
</li>
<li class="nav-item">
<a href="FAQ.html" class="menu">
<span>Support</span>
</a>
</li>
<li class="nav-item">
<a href="contact-us.html" class="menu">
<span style="border:none !important;">Contact Us</span>
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="float-nav col-lg-9 col-lg-offset-3 col-md-9 col-md-offset-3 col-sm-12 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="height:22px;"></div>
<ul class=" ">
<li>Vacuuming
</li>
<li>Mopping
</li>
<li style="border:none !important;">Accessories
</li>
<li style="border:none !important;" class="gray-panel">
<div>
<p>Shopping Cart
<a href="#vaccum.html">
<img src="images/cart_icon.png">
</a>(0)</p>
</div>
</li>
</ul>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 banner-top-whitespace"></div>
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-lg-offset-2 col-sm-12 col-xs-12 bannerimage text-center top-border bottom-border" style="padding: 0;">
<p class="text-center"><span>Free Shipping</span> on all irobot ordres
</p>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="height:50px;"></div>
<div class="row col-lg-10 col-lg-offset-1 col-md-10 col-lg-offset-1 col-sm-12 col-xs-12 text-center product-detail-wrapper">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="col-lg-12 col-md-12 col-SM-12 col-XS-12" id="popupframe">
<div class="video-iframe" id="popupdivframe">
<div class="frameheader text-left">
<div class="heading-dark-green"><strong>iRobot <sup>®</sup> Roomba 980 <sup>®</sup></strong>
</div>
<div class="heading-green-sm"> <strong>Vaccum cleaning Robot</strong>
</div>
<i onclick="div_hide()" class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="frameimage carousel slide" align="center" id="carousel-ex">
<ol class="carousel-indicators">
<li data-target="#carousel-ex" data-slide-to="0" class="active"></li>
<li data-target="#carousel-ex" data-slide-to="1"></li>
<li data-target="#carousel-ex" data-slide-to="2"></li>
<li data-target="#carousel-ex" data-slide-to="3"></li>
<li data-target="#carousel-ex" data-slide-to="4"></li>
<li data-target="#carousel-ex" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/more images/980/R980_CarpetTransition_lowres.png" alt="image" class="img-responsive">
</div>
<div class="item">
<img src="images/more images/980/R980_NavigatingFurniture_crop_lowres.png" alt="image" class="img-responsive">
</div>
<div class="item">
<img src="images/more images/980/R980_UnderBed_lowres.png" alt="image" class="img-responsive">
</div>
</div>
</div>
<a class="popupframe-footer" href="#carousel-ex" data-slide="prev"><Previous</a> <a class="popupframe-footer" href="#carousel-ex" data-slide="next">Next></a>
<br />
<br />
<br />
<br />
</div>
</div>
<div class="col-lg-12 col-md-12 col-SM-12 col-XS-12" id="popupframe2">
<div class="video-iframe" id="popupzoomframe">
<div class="frameheader text-left">
<i onclick="div_hide2()" class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="framezoomimage carousel slide" align="center" id="carousel-ex1">
<ol class="carousel-indicators">
<li data-target="#carousel-ex" data-slide-to="0" class="active"></li>
<li data-target="#carousel-ex" data-slide-to="1"></li>
<li data-target="#carousel-ex" data-slide-to="2"></li>
<li data-target="#carousel-ex" data-slide-to="3"></li>
<li data-target="#carousel-ex" data-slide-to="4"></li>
<li data-target="#carousel-ex" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/irobot-roomba-880-vacuum-cleaning-robot-for-pets-and-allergies.jpg" alt="image" class="img-responsive">
</div>
<div class="item">
<img src="images/pG01-21837072dt2.jpg" alt="image" class="img-responsive">
</div>
<div class="item">
<img src="images/pG01-21837072d1.jpg" alt="image" class="img-responsive">
</div>
</div>
</div>
<div class="popupframe-footer">
spin <i class="fa fa-caret-square-o-left" aria-hidden="true"></i>
<i class="fa fa-caret-square-o-right" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-SM-12 col-XS-12" id="popupframe3">
<div class="video-iframe" id="popupdivframe">
<div class="frameheader text-left">
<div class="heading-dark-green"><strong>iRobot <sup>®</sup> Roomba 980 <sup>®</sup></strong>
</div>
<div class="heading-green-sm"><strong> Vaccum cleaning Robot</strong>
</div>
<i onclick="div_hide3()" class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="frametext text-left">
<strong>What's In The Box:</strong>
<br />
<br />
<ul>
<li>1 iRobot Roomba 980</li>
<li>1 Rechargeable Battery</li>
<li>1 Home Base Charging Station</li>
<li>1 Line Cord</li>
<li>2 Dual Mode Virtual Wall Barriers (batteries included)</li>
<li>1 Extra AeroForce® High-Efficiency Filter</li>
<li>1 Extra Side Brush</li>
<li>1-Year Manufacturer's Limited Warranty On Robot, 6-Month Manufacturer's Limited Warranty On Battery</li>
</ul>
<br />
<br />
<strong>Specifications: </strong>
<br />
<br />
<span class="para-text-xs">Package Dimensions: 43.3 x 14.7 x 54.7 cm<br />
Package Weight: 6.9 Kgs<br />
Robot Dimensions: 35 cm in diameter, 9.2 cm in height <br />
Robot Weight: 3.94 Kgs
<br /><br />
* Tested in iRobot's Home Test Lab on hard floors. Run times may vary<br />
** Compared to Roomba 600 and 700 series AeroVac™ systems</span>
<br />
<br />
<strong> The iRobot limited warranty shall not apply to failures or problems which are caused by products or equipment not <br /><br />
authorized by iRobot Corporation.</strong>
<br />
<br />
</div>
</div>
</div>
<img src="images/pIRBT1-21837072v38011.png" class="img-responsive" />
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="images/camera-icon-43654.png" class="img-responsive" id="popup" onclick="div_show()">
<div class="image-caption image-caption-xs">MORE IMAGES</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="images/box.png" class="img-responsive" id="popup" onclick="div_show3()">
<div class="image-caption image-caption-xs">WHAT'S IN THE BOX</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<a class="text-center">
<button class="btn btn-block btn-watch">Add To Watchlist</button>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left">
<a class="text-center">
<img src="images/mail.png" class="img-responsive" /><span class="image-caption image-caption-xs">EMAIL TO A FREIND</span>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left">
<a class="text-center">
<img src="images/print.png" class="img-responsive" /><span class="image-caption image-caption-xs">PRINTABLE VIEW</span>
</a>
</div>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12 text-left content-small">
<p class="heading-black">iRobot<sup>®</sup> Roomba<sup>®</sup> 980</p>
<p class="heading-black-small">Vacuum Cleaning Robot</p>
<p class="para-text-xs text-left">The new Roomba 980 gives you cleaner floors, throughout your entire home, all at the push of a button. Roomba 980 seamlessly navigates an entire level of your home, keeping track of its location and recharging as needed until the job is done.
The AeroForce® Cleaning System with Carpet Boost automatically increases power on carpets where it's needed most. And with the iRobot HOME App, you can clean and schedule on the go.</p>
<p class="text-left heading-green-xs">Read Full Product Specifications
</p>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left">
<p class="text-left heading-black-xs"><span class="para-text-xs">Price:</span> ₹ 64900.00</p>
</div>
<div class="col-md-8 col-lg-8 col-sm-8 col-xs-8 text-left">
<div class="col-md-6 col-lg-6 col-sm-6 col-xs-6 social-button">
<a class="text-left buttonhover">
<img src="images/like.png" class="img-responsive" />
</a>
<a class="text-right share buttonhover">
<img src="images/share.png" class="img-responsive" />
</a>
<p class="heading-black-xs views">1,443,00 People like this</p>
</div>
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 text-left pinit">
<a class="text-left">
<img src="images/pintit.png" class="img-responsive" />
</a>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2 text-left">
<p class="heading-black-xs">QTY:
<input type="text" style="width: 23px;color: #000;text-align: center;" id="eaBar-quantity" name="eaBar-quantity" maxlength="2" size="1" value="1">
</p>
</div>
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 text-left float-button" style="">
<p align="center">
<a href="#">
<img src="images/addToCart_sm.png" class="img-responsive" />
</a>
<!--<span>-OR-</span><br/>
<img src="images/checkout-logo-small.png" /></p>-->
<p class="heading-black-xs"><span class="blue-text-xs">In-Stock, usually ships in 7 - 10 full bus. days <span><a class="heading-green-xs-bold" href="#">(Details)</a></span></span>
<br>
<span class="heading-black-xs-bold">AVAIBILITY:</span>
<br />
<span class="heading-black-xs-bold">Sales Tax:</span>Sales tax will be added at checkout.</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 product-detail-right-panel">
<a href="http://irobot.netmahiti.in/owneroverview.aspx?id=cHJvc3JzMDAwMDAwMDA1" target="_blank">
<div class="product-vedio"></div>
</a>
<a href="FAQ.html" target="_blank">
<div class="green-border text-center green-text-xs col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p>FAQ</p>
</div>
</a>
<a href="wi-fi-information.html" target="_blank">
<div class="green-border text-center green-text-xs col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p>Wi-Fi Information
</p>
</div>
</a>
<a href="http://irobot.netmahiti.in/owneroverview.aspx?id=cHJvc3JzMDAwMDAwMDA1" target="_blank">
<div class="green-border text-center green-text-xs col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p>900 Series Owner's Center</p>
</div>
</a>
</div>
</div>
<hr />
<div class=" col-lg-10 col-lg-offset-1 col-md-10 col-lg-offset-1 col-sm-12 col-xs-12 pro-detail" style=" font-family:Arial, Helvetica, sans-serif !important;">
<br />
<br />
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<p class="heading-black-small"><b>TOP SELLING ACCESSORIES</b>
</p>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
<p>
<img src="images/pIRBT1-17181539v380.png" class="img-responsive">
</p>
</div>
<div class="col-lg-8 col-lg-offset-1 col-md-8 col-md-offset-1 col-sm-7 col-sm-offset-1 col-xs-12">
<br />
<p class="heading-black-small-bold">3 Replacement AeroForce<sup>®</sup> High-Efficiency Filters For Roomba<sup>®</sup> 800 and 900 Series</p>
<p class="heading-black-xs">Price:<span class="heading-green-xs"><b>₹ 1490.00</b></span>
</p>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<p class="heading-black-xs">QTY:
<input type="text" style="width: 23px;color: #000;text-align: center;" id="eaBar-quantity" name="eaBar-quantity" maxlength="2" size="1" value="1">
</p>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-sm-12">
<p>
<a href="#">
<img src="images/addToCart_smm.png" class="img-responsive" />
</a>
</p>
</div>
</div>
</div>
<-- compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>>>>>>>
enter image description here
Delete extra >>>>> from html closing tag at the end.
It is not a javascript error it is a typo error Remove last line </html>>>>>>> by </html>
There's </html>>>>>>> at the end instead of </html> that's why you see the extra >>>>>>
I'm having trouble with jQuery's on event delegation:
Here's my code:
HTML
<body>
<!-- Page Content Wrapper-->
<div id="sb-site">
<div id="overlay"> </div>
<!-- Ajax loaded here -->
<div id="ajax-loadHeader" class="homeNavbar">
</div>
</div>
<!-- End Page Content Wrapper -->
</body>
JS
$.get("header.html").done(function (data) {
var html = $(data);
var transition = $("#ajax-loadHeader").hasClass("homeNavbar");
if(transition){
html = html.attr("data-transitions","true").addClass("home");
}
$("#ajax-loadHeader").append(html);
$.slidebars({
siteClose: true, // true or false
disableOver: 767, // integer or false
scrollLock: true // true or false
});
});
The problem is on the following functions. None of them are fired when i click the buttons. But, after jQuery 1.7, $(document).on("click","selector",function(){}); should work even for dynamically loaded elements.
I've also tried: $("selector").on("click",function(){});
The
//The element is present on header.html.
$(document).on("click","#mobile-hamburger-menu-open",function(){
$("#overlay").toggleClass("overlay");
$("body").toggleClass("overlayed");
$("#mobile-hamburger-menu-close").removeClass("hide");
$("#mobile-hamburger-menu-open").addClass("hide");
$("#sb-site").addClass("locked");
});
//The element is present on header.html.
$(document).on("click","#mobile-hamburger-menu-close",function(){
$("#overlay").toggleClass("overlay");
$("body").toggleClass("overlayed");
$("#mobile-hamburger-menu-close").addClass("hide");
$("#mobile-hamburger-menu-open").removeClass("hide");
$("#sb-site").removeClass("locked");
});
//The #navbar-top element is present on header.html.
$(document).on("click","#overlay, #navbar-top nav[class*='navbar-default']",function(){
if($("#overlay").hasClass("overlay")){
$("#overlay").removeClass("overlay");
$("body").removeClass("overlayed");
$("#mobile-hamburger-menu-close").addClass("hide");
$("#mobile-hamburger-menu-open").removeClass("hide");
$("#sb-site").removeClass("locked");
}
});
HTML present in header.html
<div id="login-section" class="login-section closed container-fluid">
<div class="row">
<div class="col-md-8 col-sm-6 hidden-xs banner-login">
<div class="row">
<div class="col-md-6 col-sm-12 col-md-offset-6 col-sm-offset-0">
<div class="banner-login-text">
<div class="banner-login-title">
text
</div>
<p>
text
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 no-gutters">
<!-- Login Content -->
<div class="row no-gutters">
<div class="col-md-6 col-sm-6 col-xs-6">
<div id="sou-cliente-btn" class="tab-btn tab-active">
text
</div>
<div class="arrow-tab"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div id="nao-sou-cliente-btn" class="tab-btn">
text
</div>
<div class="arrow-tab"></div>
</div>
</div>
<div class="login-content">
<div class="login-form">
<form id="form-validate-login">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="col-md-3 col-sm-4">E-mail</label>
<div class="col-md-9 col-sm-8">
<input id="usernameField" type="text" data-rule-required="true" class="login-input" placeholder="nome#example.com">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="col-md-3 col-sm-4">Senha</label>
<div class="col-md-9 col-sm-8">
<input id="passwordField" data-inputmask-regex="[a-zA-Z0-9]{8,15}" data-rule-minlength="8" data-rule-maxlength="15" type="password" data-rule-required="true" class="login-input required" placeholder="Digite sua senha">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-primary"> entrar </button>
</div>
</div>
</form>
<div class="row">
<div class="col-md-12 col-xs-12"> <a class="link-arrow">Esqueci meus dados</a> </div>
</div>
<div class="row no-login">
<div class="col-md-12 col-xs-12"> <span>Se você não possui login:</span> </div>
<div class="col-md-12">
<a class="btn btn-style2"> crie seu primeiro cadastro </a>
</div>
</div>
</div>
<div class="novo-cadastro-section hide">
<span class="nao-cliente-title">text</span>
<br/>
<p class="nao-cliente-subtitle">text</p>
<a class="btn btn-primary">text</a>
</div>
</div>
<!-- End Login Content -->
<div class="row area-login login-especial-input hide">
<div class="col-md-12 col-xs-12">
<select class="col-md-12 col-xs-12 padding15">
<option selected disabled="disabled">Estabelecimento</option>
</select>
</div>
</div>
<div class="col-md-8 nao-cadastrado-section-container hide">
<div class="hidden-xs nao-cadastrado-section">
<div class="row">
<div class="col-md-12"> <span class="nao-cadastrado-title">Não é cadastrado?</span> </div>
</div>
<div class="row nao-cadastrado-description">
<div class="col-md-12"> <span class="">text</span> </div>
</div>
<div class="row nao-cadastrado-btns">
<div class="col-md-6">
<div class="row area-login">
<div class="col-md-12 col-xs-12"> <strong><span class="control-label">Já sou cliente</span></strong> </div>
</div>
<div class="row area-login">
<div class="col-md-12">
<button type="submit" class="btn col-md-12 col-xs-12 primeiro-cadastro-btn"> Criar meu primeiro acesso </button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row area-login">
<div class="col-md-12 col-xs-12"> <strong><span class="control-label">Não sou cliente</span></strong> </div>
</div>
<div class="row area-login">
<div class="col-md-12">
<button type="submit" class="btn col-md-12 col-xs-12 primeiro-cadastro-btn"> Quero testar o gerenciador</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row area-login login-especial-input hide">
<div class="col-md-12">
<div class="input-group"> <span class="input-group-addon login-description"> Código </span>
<input type="text" class="login-input" placeholder="XXXXXXXXXXXX">
</div>
</div>
</div>
</div>
<div class="primeiro-cadastro-section"> </div>
</div>
</div>
<!-- End Login -->
<!-- Header -->
<header id="navbar-top" data-transitions="false">
<div class="container-fluid over-video-container">
<nav class="navbar navbar-default over-video-navbar">
<div class="container">
<!-- Nav Left -->
<div class="col-md-1 col-sm-2 col-xs-7 col-brand">
<div class="navbar-header">
<!-- Menu hamburger -->
<button id="mobile-hamburger-menu-open" type="button" class="mobile-sidebar-menu navbar-toggle collapsed is-closed sb-open-left" aria-expanded="false" aria-controls="navbar">
<div class="label-hamburger"></div>
<div class="icon"></div>
</button>
<button id="mobile-hamburger-menu-close" type="button" class="mobile-sidebar-menu navbar-toggle collapsed is-closed sb-close hide" aria-expanded="false" aria-controls="navbar">
<div class="label-hamburger"></div>
<div class="icon"></div>
</button>
<!-- End Menu hamburger -->
<!-- Logo -->
<a class="navbar-brand" href="index.html" itemprop="url">
<img class="logo-svg" src="images/logo_rede.svg" itemprop="logo">
<!-- Logo PNG for IE8 -->
<img class="logo-png" src="images/logo_rede.png" >
</a>
<!-- End Logo -->
</div>
</div>
<!-- End Nav Left -->
<div class="col-md-4 col-sm-4 col-xs-5 pull-right nav-right-container">
<!-- Nav Right -->
<ul class="nav navbar-nav navbar-right">
<li class="col-md-4 col-md-offset-1 col-sm-5 help col-xs-6">
<!-- AJUDA Ajuda -->
</li>
<li id="my-account-section" class="my-account col-md-7 col-sm-7 col-xs-6"> <a role="button">Minha Conta<span class="arrow hidden-xs hidden-sm"></span></a> </li>
</ul>
<!-- End Nav Right -->
</div>
<div class="col-md-7 col-sm-7 col-xs-12 col-collapse">
<!-- Collapse -->
<div id="navbar-rede" class="navbar-collapse collapse" aria-expanded="false">
<!-- Menu Dropdown -->
<ul class="nav navbar-nav">
<li class="visible-xs">
<div class="col-xs-12 input-group mobile-search-bar-container">
<div class="mobile-search-bar">
<input type="text" class="col-xs-10" placeholder="Digite aqui o que procura..." />
</div>
</div>
</li>
<!-- Produtos -->
<li id="dropdown-produtos" class="dropdown dynamic-image-dropdown">
Nossos Produtos
<!-- Dropdown container -->
<ul class="dropdown-menu dropdown-menu-produtos">
<!-- Links -->
<div class="col-links">
<li data-dropdown-link="0" class="dropdown-item active"> Para celular</li>
<li data-dropdown-link="1" class="dropdown-item"> <a href="#" >Sem fio</a> </li>
<li data-dropdown-link="2" class="dropdown-item"> <a href="#" >Com fio</a> </li>
<li data-dropdown-link="3" class="dropdown-item"> Vendas online </li>
<li data-dropdown-link="4" class="dropdown-item"> <a href="#" >Grandes empresas</a> </li>
<li data-dropdown-link="5" class="dropdown-item"> <a href="#" >Adicionais</a> </li>
<li data-dropdown-link="6" class="dropdown-item"> Todos os produtos </li>
</div>
<div class="col-links">
<li class="dropdown-subitem"> Nome Produto</li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> Nome Produto </li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> Nome Produto </li>
</div>
<!-- End Links -->
<!-- Imagem -->
<div class="col-img hidden-sm hidden-xs">
<img data-related-link="0" class="img-active" src="images/menu_maquininha_celular.png" >
<img data-related-link="1" class="" src="images/menu_maquininha_celular_2.png" >
<img data-related-link="2" class="" src="images/menu_maquininha_celular_3.png" >
<img data-related-link="3" class="" src="images/menu_maquininha_celular_4.png" >
<img data-related-link="4" class="" src="images/menu_maquininha_celular.png" >
<img data-related-link="5" class="" src="images/menu_maquininha_celular_2.png" >
<img data-related-link="6" class="" src="images/menu_maquininha_celular_3.png" >
</div>
<!-- End Imagem -->
</ul>
<!-- End Dropdown container -->
</li>
<!-- End Produtos -->
<!-- Tipos Negócio -->
<li id="dropdown-tipos-negocio" class="dropdown dynamic-image-dropdown">
Tipos de Negócio
<!-- Dropdown container -->
<ul class="dropdown-menu">
<!-- Links -->
<div class="col-links">
<li data-dropdown-link="0" class="dropdown-item active"> Restaurantes, Bares </li>
<li data-dropdown-link="1" class="dropdown-item"> Táxis </li>
<li data-dropdown-link="2" class="dropdown-item"> Lojistas </li>
<li data-dropdown-link="3" class="dropdown-item"> Vendedores ambulantes, feirantes </li>
<li data-dropdown-link="4" class="dropdown-item"> Serviços de bem-estar e beleza </li>
<li data-dropdown-link="5" class="dropdown-item"> Lojas online </li>
<li data-dropdown-link="6" class="dropdown-item products-2"> <a href="#">Não encontrou seu tipo de negócio? <br/>
Veja <span class="bold">Nossos produtos</span></a>
</li>
</div>
<!-- End Links -->
<!-- Imagem -->
<div class="col-img hidden-sm hidden-xs">
<img data-related-link="0" class="img-active" src="images/menu_tipos_negocio.jpg" >
<img data-related-link="1" src="images/menu_tipos_negocio_2.jpg" >
<img data-related-link="2" src="images/menu_tipos_negocio_3.jpg" >
<img data-related-link="3" src="images/menu_tipos_negocio_4.jpg" >
<img data-related-link="4" src="images/menu_tipos_negocio_5.jpg" >
<img data-related-link="5" src="images/menu_tipos_negocio_6.jpg" >
<img data-related-link="6" src="images/menu_tipos_negocio_7.jpg" >
</div>
<!-- End Imagem -->
</ul>
<!-- End Dropdown container -->
</li>
<!-- End Tipos Negócio -->
</ul>
<!-- End Nav Right -->
</div>
<!-- End Collapse -->
</div>
</div>
</nav>
</div>
</header>
Solved it.
So freaking simple. Just put the functions inside the done function of the AJAX call.
Thanks for all those who helped me!