Two scripts not working together

Two scripts not working together - javascript

I'm learning to write some scripts in jQuery at work and I have a problem with two of them: one of them is not working along with the other, while when alone it is working perfectly fine. As I'm not expert on Javascript nor programming basics (sorry for that), I don't know if there is some kind of conflict between the scripts.
So I'm begging you to help me, cause I'm desperate right now.
This is the page where both scripts are: http://www.ufv.es/beli (just scroll until you see some blue buttons).
The first script is loading different content on the right side of the page depending on the button you click on.
The second one is supposed to work within "Claustro docente" button, just as it works on this other page I created to show you: http://www.ufv.es/beli2
I'm sure I'm making a lot of mistakes, but if you could please help me... thank you!
$(document).ready(function() {
jQuery('.grados-content').hide();
jQuery('#grados-contenido').html(jQuery('#grados-content1').html());
divContenido = jQuery('.grado-item', this).children('.grados-content');
$('.grado-item',this).click(function(e){
e.preventDefault();
jQuery('#grados-contenido').html(jQuery(this).children('.grados-content').html());
$(this).addClass('grado-seleccionado');
$('.grado-item').not(this).removeClass('grado-seleccionado');
});
var curentProfe = 0;
var totalProfes = $('#profes').children().length;
function showBigProfe(profeDiv) {
var RutaImagen = $(profeDiv).children('img').attr('src');
var titulo = $(profeDiv).find('h3').html();
var subti = $(profeDiv).find('.masinfo').html();
var profeweb = $(profeDiv).find('.webenlace').attr('href');
var profemail = $(profeDiv).find('.mailenlace').attr('href');
var linkedin = $(profeDiv).find('.linkedinenlace').attr('href');
var researchgate = $(profeDiv).find('.researchgate').attr('href');
var facebook = $(profeDiv).find('.facebookenlace').attr('href');
var twitter = $(profeDiv).find('.twitterenlace').attr('href');
$('#grande').fadeIn();
$('#conteneprof').children('img').attr('src', RutaImagen);
$('.infocontenido').children('h3').html(titulo);
$('.bio').html(subti);
if (profeweb == '#') {
$('#iconoweb').css('display', 'none');
} else {
$('#iconoweb').css('display', 'inline-block');
$('.infocontenido').children('.webenlace').attr('href', profeweb);
}
if (profemail == '#'){
$('#iconomail').css('display', 'none');
} else{
$('#iconomail').css('display', 'inline-block');
$('.infocontenido').children('.mailenlace').attr('href', profemail);
}
if (linkedin == '#'){
$('.linkedinenlace').css('display', 'none');
} else {
$('.linkedinenlace').css('display', 'inline-block');
$('.infocontenido').children('.linkedinenlace').attr('href', linkedin);
}
if (researchgate == '#'){
$('.researchgate').css('display', 'none');
} else {
$('.researchgate').css('display', 'inline-block');
$('.infocontenido').children('.researchgate').attr('href', researchgate);
}
if (facebook == '#'){
$('.facebookenlace').css('display', 'none');
} else {
$('.facebookenlace').css('display', 'inline-block');
$('.infocontenido').children('.facebookenlace').attr('href', facebook);
}
if (twitter == '#'){
$('.twitterenlace').css('display', 'none');
} else {
$('.twitterenlace').css('display', 'inline-block');
$('.infocontenido').children('.twitterenlace').attr('href', twitter);
}
}
$('.profe', this).mouseenter(function() {
$('.infoprof', this).fadeIn(600).css('z-index', '1');
});
$('.profe', this).mouseleave(function() {
$('.infoprof', this).fadeOut(600);
});
$('.fa-times, #grande').click(function() {
$('#grande').fadeOut();
});
$('#conteneprof').click(function(event) {
event.stopPropagation();
});
$('.profe', this).click(function() {
curentProfe = Number(this.id);
showBigProfe(this);
});
$('.fa-chevron-left').click(function() {
curentProfe = curentProfe - 1;
if (curentProfe < 1) {
curentProfe = totalProfes;
}
showBigProfe('#' + curentProfe);
});
$('.fa-chevron-right').click(function() {
curentProfe = curentProfe + 1;
if (curentProfe > totalProfes) {
curentProfe = 1;
}
showBigProfe('#' + curentProfe);
});
});
jQuery('.boton-redondo-llamamos').click(function(){
window.location.href = "http://www.ufv.es/nosotros-te-llamamos";
});
#profes{
min-width:106%;
}
#profes .profe{
width:150px;
height:130px;
margin:5px;
float:left;
position:relative;
overflow: hidden;
cursor:pointer;
}
#profes .infoprof{
width:100%;
height:90px;
margin-top:20px;
background:rgba(255, 255, 255, 0.75);
position:absolute;
display:none;
}
.infoprof a{
text-indent:-9999px;
color:transparent;
}
.infoprof h3, .infoprof p{
position:absolute;
color:white;
}
.infoprof h3{
text-align:center;
text-transform:uppercase;
color:#003d67;
z-index:-1;
width:100%;
margin:0!important;
}
#profes .profe img.fotos{
position: absolute;
min-height:130px;
opacity:.8;
}
.profe p{
left:30%;
top:50%;
}
.masinfo{
display:none;
}
#grande{
position:fixed;
background-color:rgba(0,0,0,0.7);
width:100%;
height:100%;
top:0px;
left:0;
display:none;
z-index:10;
}
#conteneprof{
width:625px;
display:table;
padding:60px;
background-color:white;
margin:150px auto;
opacity:1;
position:relative;
border-radius:10px;
}
#conteneprof p{
color:#575950;
margin:5px;
}
.fa-times{
color:#003d67;
text-align:center;
width:24px;
height:24px;
position:absolute;
top:15px;
right:15px;
font-size:22px!important;
cursor:pointer;
border:3px solid transparent;
border-radius:30px;
transition:all 0.35s linear;
-webkit-transition:all 0.35s linear;
padding:2px 0 2px 5px;
}
.fa-times:hover{
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
border:3px solid #003d67;
}
.fa-chevron-left, .fa-chevron-right{
position:absolute;
width:36px;
height:36px;
font-size:32px!important;
color:#003d67;
top:50%;
margin-top:-18px;
cursor:pointer;
transition:all .3s ease;
}
.fa-chevron-left:hover, .fa-chevron-right:hover{
color:#6fa3b6;
}
.fa-chevron-left{
left:10px;
}
.fa-chevron-right{
right:10px;
}
#conteneprof img{
float:left;
width:160px;
margin:5px;
padding:15px 0 0 45px;
}
#conteneprof .infocontenido{
max-width:345px;
margin:0 57px 0 5px;
float:left;
padding:15px 0 20px 0;
}
#conteneprof .infocontenido h3{
color:#003d67;
float:left;
margin:5px;
text-transform:uppercase;
}
#conteneprof .infocontenido p{
padding:0!important;
}
#conteneprof .infocontenido a.redenlace{
text-indent: -9999px;
float: left;
width: 27px;
height: 27px;
backface-visibility: hidden;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
transform: translateZ(0px);
transition-duration: 0.3s;
transition-property: transform;
vertical-align: middle;
border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
display:none;
color:transparent;
margin:5px;
}
#conteneprof .infocontenido a.webenlace{
background: url("http://recursos.ufv.es/img/es/icono-web.png") no-repeat 0 0;
}
#conteneprof .infocontenido a.mailenlace{
background: url("http://recursos.ufv.es/img/es/mail-arroba.png") no-repeat 0 0;
}
#conteneprof .infocontenido a.linkedinenlace{
background: url("http://recursos.ufv.es/img/es/linkedin.png") no-repeat 0 0;
}
#conteneprof .infocontenido a.researchgate{
background: url("http://recursos.ufv.es/img/es/logo-research-gate.gif") no-repeat 0 0;
}
#conteneprof .infocontenido a.facebookenlace{
background: url("http://recursos.ufv.es/img/es/facebook-profes.png") no-repeat 0 0;
}
#conteneprof .infocontenido a.twitterenlace{
background: url("http://recursos.ufv.es/img/es/twitter.png") no-repeat 0 0;
}
#conteneprof .infocontenido a.redenlace:before {
background: radial-gradient(ellipse at center center , rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%) repeat scroll 0 0 rgba(0, 0, 0, 0);
content: "";
height: 10px;
left: 5%;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transition-duration: 0.3s;
transition-property: transform, opacity;
width: 90%;
z-index: -1;
}
#conteneprof .infocontenido a.redenlace:hover, #conteneprof .infocontenido a.redenlace:focus, #conteneprof .infocontenido a.redenlace:active {
transform: translateY(-5px);
border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
}
#conteneprof .infocontenido a.redenlace:hover:before, #conteneprof .infocontenido a.redenlace:focus:before, #conteneprof .infocontenido a.redenlace:active:before {
opacity: 1;
transform: translateY(5px);
}
.infocontenido .bio{
max-height:200px;
overflow-y:scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beli test</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="beli.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<script src="beli.js"></script>
</head>
<body>
<div class="grados-menu">
<ul>
<li class="grado-item grado-seleccionado">
<a class="enlace" href="#" id="1">Presentación</a>
<div class="grados-content" id="grados-content1">
content1
</li>
<li class="grado-item">
<a class="enlace" href="#" id="2">Plan de estudios</a>
<div class="grados-content" id="grados-content2">
content2
</div>
</li>
<li class="grado-item">
<a class="enlace" href="#" id="3">Título propio: El liderazgo colaborativo en el marketing digital</a>
<div class="grados-content" id="grados-content3">
content3
</div>
</li>
<li class="grado-item">
<a class="enlace" href="#" id="4">Metodología</a>
<div class="grados-content" id="grados-content4">
content4
</div>
</li>
<li class="grado-item">
<a class="enlace" href="#" id="5">Salidad profesionales del Grado en Marketing</a>
<div class="grados-content" id="grados-content5">
content5
</div>
</li>
<li class="grado-item">
<a class="enlace" href="#" id="6">Claustro docente</a>
<div class="grados-content" id="grados-content6">
<h1>
Claustro docente</h1>
<br />
<p>
Nuestro equipo docente combina perfiles de diferentes características:</p>
<div class="lista">
<ul class="inline">
<li>
Profesionales en activo que desempeñan su actividad ajena a la Universidad y que se prestan por su vocación docente a dar clase a nuestros alumnos.</li>
<li>
Profesores a tiempo completo en la Universidad que son doctores en sus materias.</li>
</ul>
</div>
<br />
<div id="profes">
<div class="profe" id="1">
<div class="infoprof">
<h3 class="hfoto">
Raquel Ayesterán</h3>
<a class="webenlace" href="http://raquelayestaran.com">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="https://es.linkedin.com/in/raquelayestaran">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div>
<img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/raquel-ayesteran.jpg" />
<div class="masinfo">
<p>
<strong>Área: </strong>Dirección Estratégica, Marketing, Comercial y Comunicación. Doctor en Marketing Integrado 360º. Directora de Grado.</p>
</div>
</div>
<div class="profe" id="2">
<div class="infoprof">
<h3 class="hfoto">
Rafael Alé Ruiz</h3>
<a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div>
<img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/rafael-ale.jpg" />
<div class="masinfo">
<p>
<strong>Área: </strong>Organización de Empresas. Doctor en Físicas.</p>
</div>
</div>
<div class="profe" id="3">
<div class="infoprof">
<h3 class="hfoto">
Guillermo Arce</h3>
<a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="https://www.linkedin.com/in/guillermo-arce-dr-phd-2b7623b?trk=nav_responsive_tab_profile">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div>
<img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/guillermo-arce.jpg" />
<div class="masinfo">
<p>
<strong>Área: </strong>Marca, Marketing, Ventas, Redes Sociales e Internet Doctor en UAX. Experto en Estrategia de Marca.</p>
</div>
</div>
<div class="profe" id="4">
<div class="infoprof">
<h3 class="hfoto">
Beatriz Duarte</h3>
<a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="https://es.linkedin.com/in/beatriz-duarte-monedero-67641682">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div>
<img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/beatriz-duarte.jpg" />
<div class="masinfo">
<p>
<strong>Área: </strong>Doctora en Ciencias Económicas y Empresariales, UCM.Analista Financiero. Responsable de Calidad del Grado en ADE.</p>
</div>
</div>
<div class="profe" id="5">
<div class="infoprof">
<h3 class="hfoto">
Adolfo García</h3>
<a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div>
<img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/adolfo-garcia.jpg" />
<div class="masinfo">
<p>
<strong>Área: </strong>Logística, Marketing y Ventas Experiencia profesional en: MINOLTA, TNT, TELEFONICA, MAFRESA. Licenciado en Ciencias Económicas y Empresariales.</p>
</div>
</div>
<div class="profe" id="6">
<div class="infoprof">
<h3 class="hfoto">
Fidel Rodríguez</h3>
<a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div>
<img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/fidel-rodriguez.jpg" />
<div class="masinfo">
<p>
<strong>Área: </strong>Ciencias sociales, Historia y Artes Doctor en Historia y Doctor en Sociología. Profesor universitario, UFV.</p>
</div>
</div>
<div class="profe" id="7">
<div class="infoprof">
<h3 class="hfoto">
Jesús Sánchez</h3>
<a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div>
<img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/jesus-sanchez.jpg" />
<div class="masinfo">
<p>
<strong>Área: </strong>Comercial y Marketing en ADE+MARKETING Doctor en Derecho, Comillas. Miembro del Comité Científico del Instituto de Investigación. TheScientificCommittee oftheAnnuals of Economicand Management, Universidad Católica Juan Pablo II de Lublin-Polonia.</p>
</div>
</div>
<div class="profe" id="8">
<div class="infoprof">
<h3 class="hfoto">
Francisco Solá</h3>
<a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div>
<img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/matthew-foley-ryan.jpg" />
<div class="masinfo">
<p>
<strong>Área: </strong>Marketing y Comunicación Licenciado en Ciencias Económicas y Empresariales, UCM. Experto en Marketing y Comunicación Publicitaria. Socio de la empresa "Acciones de Comunicación y Estrategia". Responsable de Calidad del Grado en Marketing, UFV.</p>
</div>
</div>
<div class="profe" id="9">
<div class="infoprof">
<h3 class="hfoto">
Alfonso Jesús Torres</h3>
<a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div>
<img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/alfonso-jesus-torres.jpg" />
<div class="masinfo">
<p>
<strong>Área: </strong>Administración de empresas Licenciado en Ciencias Económicas y Empresariales, UAM. Master en Dirección Comercial y Marketing,CEI. Master en Humanidades UFV</p>
</div>
</div>
<div class="profe" id="10">
<div class="infoprof">
<h3 class="hfoto">
Inmaculada Puebla</h3>
<a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="https://es.linkedin.com/in/inmaculada-puebla-a398ba46">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div>
<img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/inmaculada-puebla.jpg" />
<div class="masinfo">
<p>
<strong>Área: </strong>Tecnologías de la Información y Comunicación, Ventas, Marketing, Gestión Empresarial, Gamificación, Matemáticas etc. Doctora en Humanidades, UFV. Licenciada en Ciencias Físicas, especialidad Informática por la UCM. Máster de finanzas y marketing UPM. Alta experiencia en empresas tecnológicas.</p>
</div>
</div>
</div>
<div class="clear">
</div>
<div id="grande">
<div id="conteneprof">
<i class="fa fa-times"> </i> <i class="fa fa-chevron-left"> </i> <i class="fa fa-chevron-right"> </i> <img />
<div class="infocontenido">
<h3>
</h3>
<div class="clear">
</div>
<a class="redenlace webenlace" href="#" id="iconoweb" target="blank_">a</a> <a class="redenlace mailenlace" href="#" id="iconomail" target="blank_">a</a> <a class="redenlace linkedinenlace" href="#" id="iconoli" target="blank_">a</a> <a class="redenlace researchgate" href="#" id="iconorg" target="blank_">a</a> <a class="redenlace twitterenlace" href="#" id="iconotw" target="blank_">a</a> <a class="redenlace facebookenlace" href="#" id="iconotw" target="blank_">a</a>
<div class="clear">
</div>
<div class="bio">
</div>
</div>
</div>
</div>
</div>
</li>
<li class="grado-item">
<a class="enlace" href="#" id="7">Perfil internacional del Grado en Marketing</a>
<div class="grados-content" id="grados-content7">
content7
</div>
</li>
<li class="grado-item">
<a class="enlace" href="#" id="8">Alumni</a>
<div class="grados-content" id="grados-content8">
content8
</div>
</li>
<li class="grado-item">
<a class="enlace" href="#" id="9">Vive la UFV</a>
<div class="grados-content" id="grados-content9">
content9
</div>
</li>
<li class="grado-item">
<a class="enlace" href="#" id="10">Calidad y mejora del título</a>
<div class="grados-content" id="grados-content10">
content10
</div>
</li>
</ul>
</div>
<div id="grados-contenido">
</div>
</body>
</html>

I've already found the mistake and it wasn't within the js file, but the html itself (I had various elements with the same ID and that's why the second script didn't work along with the first one).
Thank you all for your help!
Cheers.

Related

how to move the whole main-video-wrap div into video-list-Wrapping div?

Thanks #Kathara Your help is greatly appreciated
I have created the video layout with a picture in picture mode option click the video move to the background works fine, but I need to move the whole video wrap into the main video wrap not only the video, with the card image name, and dropdowns also moved on within the video list and also changing the id attribute of videoWraping element how to modify it?
here is my demo code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div class="container-fluid m-0" id="videos m-0">
<div class="row vh-100 align-items-end align-items-lg-center m-0" >
<div class="col-12 offset-lg-8 col-lg-4 text-center text-lg-end ">
<div id="VisualMedia">
<div class=" main-video mainVideoWrap" id="cardvideo_localstream">
<video id="video-main" class="video1" src="https://www.dropbox.com/s/ve0apo59semvv70/example-video-1.mp4?raw=1 " muted autoplay loop type="video/mp4" ></video>
<div class="card-img-overlay p-0 " id="mainCard">
<div>
<span class="text-capitalize user-name">
<i class="icon-user pe-1"></i>videoBg
</span>
<div id="dropDown" class="dropdown float-end">
<button class="btn btn-sm btn-danger me-3 mt-2 dropdown-toggle" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false">
<i class="icon-dot"></i>
</button>
<ul id="drop" class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu" >
<li>
<a id="dropdown_items" class="dropdown-item" href="#" >
<i class="bi bi-mic-mute m-1"></i>Start Audio</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-camera-video-off m-1"></i>Stop Video</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-person-x m-1"></i>Remove</a>
</li>
</ul>
</div>
</div>
<div id="mainlogo">
<img src="./client_img.png" alt="logo" class="img-fluid rounded float-end" />
</div>
</div>
</div>
<!-- <div class="row vh-100 align-items-end align-items-lg-center m-0"> -->
<div class=" video-list listofvideos">
<div class="position-relative videoWrap" id="cardvideo_remotestream">
<video src=" https://www.dropbox.com/s/se8r4svvnt2qpfu/example-video-2.mp4?raw=1 " muted autoplay loop type="video/mp4" ></video>
<div class="card-img-overlay p-0 " id="imgCard">
<div>
<span class="text-capitalize user-name">
<i class="icon-user pe-1"></i>videolist1
</span>
<div id="dropDown" class="dropdown float-end">
<button class="btn btn-sm btn-danger me-3 mt-2 dropdown-toggle" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false">
<i class="icon-dot"></i>
</button>
<ul id="drop" class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu" >
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-mic-mute m-1"></i>Start Audio</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-camera-video-off m-1"></i>Stop Video</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-person-x m-1"></i>Remove</a >
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="position-relative videoWrap" id="cardvideo_remotestream">
<video src=" https://www.dropbox.com/s/se8r4svvnt2qpfu/example-video-2.mp4?raw=1 " muted ></video>
<div class="card-img-overlay p-0 " id="imgCard">
<div>
<span class="text-capitalize user-name">
<i class="icon-user pe-1"></i>videolist2
</span>
<div id="dropDown" class="dropdown float-end">
<button class="btn btn-sm btn-danger me-3 mt-2 dropdown-toggle" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false" >
<i class="icon-dot"></i>
</button>
<ul id="drop" class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu" >
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-mic-mute m-1"></i>Start Audio</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-camera-video-off m-1"></i>Stop Video</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-person-x m-1"></i>Remove</a >
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="position-relative videoWrap" id="cardvideo_remotestream">
<video src=" https://www.dropbox.com/s/se8r4svvnt2qpfu/example-video-2.mp4?raw=1 " muted autoplay loop type="video/mp4"></video>
<div class="card-img-overlay p-0 " id="imgCard">
<div>
<span class="text-capitalize user-name">
<i class="icon-user pe-1"></i>videolist3
</span>
<div id="dropDown" class="dropdown float-end">
<button class="btn btn-sm btn-danger me-3 mt-2 dropdown-toggle" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false" >
<i class="icon-dot"></i>
</button>
<ul id="drop" class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-mic-mute m-1"></i>Start Audio</a>
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#"><i class="bi bi-camera-video-off m-1"></i>Stop Video</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-person-x m-1"></i>Remove</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="position-relative videoWrap" id="cardvideo_remotestream">
<video src=" https://www.dropbox.com/s/se8r4svvnt2qpfu/example-video-2.mp4?raw=1 " muted autoplay loop type="video/mp4"></video>
<div class="card-img-overlay p-0 " id="imgCard">
<div>
<span class="text-capitalize user-name">
<i class="icon-user pe-1"></i>videolist4
</span>
<div id="dropDown" class="dropdown float-end">
<button class="btn btn-sm btn-danger me-3 mt-2 dropdown-toggle" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false"
>
<i class="icon-dot"></i>
</button>
<ul id="drop" class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu" >
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-mic-mute m-1"></i>Start Audio</a >
</li>
<li> <a id="dropdown_items" class="dropdown-item" href="#"
><i class="bi bi-camera-video-off m-1"></i>Stop Video</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#"
><i class="bi bi-person-x m-1"></i>Remove</a >
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- </div> -->
</div>
<!-- row column -->
</div>
</div>
</div>
</div>
</body>
<script src="./bootstrap/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</html>
style.css
body{
margin: 0;
transition: all 0.3s ease;
}
/* main video */
.main-video video{
transition: all 0.3s ease-in-out;
position: absolute;
object-fit: cover;
height: 100vh;
width: 100%;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
}
.main-video #mainlogo{
position: fixed;
bottom: 2rem;
right: 1rem;
}
.main-video #mainlogo img{
width: 40px;
}
#main-video{
transition: all 0.3s ease-in-out;
}
.videoWrap{
position: relative;
max-width: 320px;
display: inline-block;
}
.videoWrap #logo{
position: absolute;
bottom: 2rem;
right: 1rem;
}
.videoWrap #logo img{
width: 40px;
}
.video-list video{
transition: all 0.3s ease-in-out;
max-width: 320px;
margin: 0 1rem 1rem 0;
border-radius: 1.25rem;
z-index: 2;
}
.user-name{
color: #fff;
float: left;
padding: 0.125rem 0.25rem;
background: #000;
border-radius: 0.5rem;
margin: 0.5rem 0 0 1rem;
}
#media screen and (max-width:768px){
.videoWrap,
.video-list video{
max-width: 217px;
}
}
#media only screen and (min-device-width: 200px) and (max-device-width: 992px) and (orientation:landscape) {
.videoWrap,
.video-list video{
max-width: 150px;
}
.videoWrap, #dropDown {
margin: -0.8rem 0.2rem -1.8rem -0.3rem;
left: 31px;
bottom: 4px;
}
.videoWrap .user-name{
margin: -0.8rem 0.2rem -1.8rem -0.3rem;
left: 31px;
bottom: 4px;
}
}
#media screen and (max-width:480px){
.videoWrap,
.video-list video{
max-width: 149px;
bottom: 4rem;
}
.videoWrap #logo{
bottom: 1.5rem;
}
.videoWrap #logo img{
width: 30px;
}
}
jsfile
// using jQuery
var initVideoSwapping = function() {
// check if there is an element first
if ($('.video-list #imgCard').length > 0 && $('#video-main').length > 0) {
$('.video-list .videoWrap').on('click', function() {
var $thisVideoWrapId = $(this).find('.videoWrap');
var $mainVideoWrapId= $('.main-video')
$mainVideoWrapId.attr('id', 'cardvideo_remotestream')
$thisVideoWrapId.attr('id', 'cardvideo_localstream')
// video change
var $thisVideo = $(this).find('video');
var $mainVideo = $('#video-main');
// clone the two elements to change them
// without modifying the original element
var $thisVideoClone = $thisVideo.clone();
var $mainVideoClone = $mainVideo.clone();
// exchange the ids
$thisVideoClone.attr('id', 'video-main');
$mainVideoClone.attr('id', '');
// insert the clones before the originals
// and remove the originals
$thisVideoClone.insertBefore($mainVideo);
$mainVideo.remove();
$mainVideoClone.insertBefore($thisVideo);
$thisVideo.remove();
});
}
}
$(function() {
initVideoSwapping();
});
main-videoWrap <--> video-list videoWrap, video-list videoWrap<--> main-videoWrap
How to append to move and add the video element with a single click using JavaScript or jQuery?

I have looked into the code you have provided and found a few bugs.
Replace:
$('#main-video').length with $('.main-video').length
var $mainVideo = $('#video-main'); with $mainVideo = $('#video-main');
In also restructured your code so that the clicked video is used as main and removed from the DOM. Please use it and test let me know if works as you would want. If not, just comment on this answer and I will see if I can make some improvements.
// using jQuery
var initVideoSwapping = function () {
// check if there is an element first
if ($('.video-list .videoWrap').length > 0 && $('.main-video').length > 0) {
$('.video-list .videoWrap').on('click', function () {
var $thisVideoWrapId = $(this).find('.videoWrap');
var $mainVideoWrapId= $('.main-video');
if ($mainVideoWrapId.attr('id') !== 'cardvideo_remotestream') {
$mainVideoWrapId.attr('id', 'cardvideo_remotestream');
} else {
$mainVideoWrapId.attr('id', 'cardvideo_localstream');
}
if ($thisVideoWrapId.attr('id') !== 'cardvideo_localstream') {
$thisVideoWrapId.attr('id', 'cardvideo_localstream');
} else {
$thisVideoWrapId.attr('id', 'cardvideo_remotestream');
}
var $thisVideo = $(this).find('video');
var $thisVideoSrc = $thisVideo.attr('src');
var $mainVideo = $('#video-main');
var $mainVideoSrc = $mainVideo.attr('src');;
// Replace main video source with clicked video source
$mainVideo.attr('src', $thisVideoSrc);
// Replace clicked video with main video source
$thisVideo.attr('src', $mainVideoSrc);
});
}
}
$(function () {
initVideoSwapping();
});

Difficulty with CSS

This is my current plan: making the button with the white circle around, does not even need the WhatsApp icon.
But after so much hitting my head and looking for a solution, I could not find the solution and came for help.
It's coming out like this:
Someone can help me?
The HTML code:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="keywords" content="piauí fábio abreu segurança eleições">
<title>Fábio Abreu</title>
<meta property="og:title" content="Fábio Abreu">
<meta name="twitter:title" content="Fábio Abreu">
<meta name="description" content="Site do deputado federal e secretário de segurança do estado do Piauí, Fábio Abreu.">
<meta property="og:description" content="Site do deputado federal e secretário de segurança do estado do Piauí, Fábio Abreu.">
<meta name="twitter:description" content="Site do deputado federal e secretário de segurança do estado do Piauí, Fábio Abreu.">
<meta property="og:image" content="https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_caecb618-6523-409d-8af6-d31dbd7351b0.png">
<meta name="twitter:image" content="https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_caecb618-6523-409d-8af6-d31dbd7351b0.png">
<meta property="og:image:secure_url" content="https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_caecb618-6523-409d-8af6-d31dbd7351b0.png">
<meta property="og:image:width" content="600">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:site_name" content="Fábio Abreu">
<meta property="og:url" content="http://www.fabioabreupi.com.br/">
<meta property="og:type" content="website">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="smUoPpsSNtD2udIYqosIhQyHKaWY5tK49rUhJBLTElTKMCyIgbxE3BAqVwLvADny/9UZ+J6IGf29QvjPM72Fvw==" />
<link rel="stylesheet" media="all" href="/assets/site-dc393f9cdad26bd31342ace6c0e567e3893492c1ec06c16976bea61958ce06ad.css" />
<link rel="stylesheet" media="all" href="/assets/default/css/main-5c3e617fe669fbfd1915fd6ba42ddae97daaf842e3037fde45d55bfdd0f7b4aa.css" />
<link rel="canonical" href="http://www.fabioabreupi.com.br/">
<link rel='shortcut icon' type='image/x-icon' href='https://inovaweb-production.s3.amazonaws.com/attachment/image/original_95e76849-329a-449b-8e1b-f118083035a4.png' /> <link href='https://fonts.googleapis.com/css?family=Roboto Condensed:400,400i,700,700i' rel='stylesheet'> <style>
#TopMenu ul#menu-main li a,#TopMenu ul#menu-main li a span.caret{font-size:14px !important;text-transform:uppercase !important}
#MainHeader{background-color:rgba(0, 0, 0, 0) !important}
h3{font-size:15px !important;font-family:'Roboto Condensed' !important;font-weight:bold !important}
footer#MainFooter{background-color:rgba(255, 255, 255, 1) !important;border-color:rgba(255, 255, 255, 1) !important}
</style>
<style>#TopMenu{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2722ad+28,ff3b21+100 */
background: #2722ad; /* Old browsers */
background: -moz-linear-gradient(left, #2722ad 28%, #ff3b21 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #2722ad 28%,#ff3b21 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #2722ad 28%,#ff3b21 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2722ad', endColorstr='#ff3b21',GradientType=1 ); /* IE6-9 */
}
#menu-main{
padding: 0px 20px 0px 9px;
margin: 0px 20px 0px 9px;
word-spacing: 0px;
}
#menu-main li:last-child{
padding-left: 178px;
}
#menu-main li:last-child{
-moz-box-shadow: 0px 0px 0px 0px #ffffff;
-webkit-box-shadow: 0px -0px 0px 0px #ffffff;
box-shadow: 0px 0px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #bfb9bf) );
background:-moz-linear-gradient( center top, #f9f9f9 5%, #bfb9bf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#bfb9bf');
background-color:#f9f9f9;
border-radius: 42px;
display:inline-block;
color:#000000;
height:35px;
line-height:26px;
width:178px
text-decoration:none;
text-shadow:0px 0px 6px #ffffff;
}
.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bfb9bf), color-stop(1, #f9f9f9) );
background:-moz-linear-gradient( center top, #bfb9bf 5%, #f9f9f9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfb9bf', endColorstr='#f9f9f9');
background-color:#bfb9bf;
}.classname:active {
position:relative;
top:44px;
}
}
#menu-main li:nth-last-child(2){
padding-left: 20px;
}
#menu-main li:nth-last-child(3){
padding-left: 20px;
}
#menu-main li:nth-last-child(4){
padding-left: 20px;
}
#menu-main li:nth-last-child(5){
padding-left: 20px;
}
#MainHeader{
padding: 0px 0px 0px 5px;
}
#MainFooter{
background-color: #00004d
}
#GroupList1{
background-color: #ffffff;
box-shadow: none;
}
#lws-homesection-title{
text-align: center;
}
#GroupList2{
display: none;
}</style>
</head>
<body class="palette-red">
<div id="fb-root"></div>
<header id="MainHeader">
<div class="container">
<div class="row vertical-align">
<div class="col-xs-12 col-sm-3">
<div class="LogoArea">
<a href="/" id="BrandImage">
<img src="https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_caecb618-6523-409d-8af6-d31dbd7351b0.png" alt="Fábio Abreu" class="img-responsive center-block">
</a>
</div>
</div>
<div class="col-xs-12 col-sm-9">
<div id="ContactsTop">
</div>
</div>
</div>
</div>
</header>
<nav id="TopMenu" class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul id="menu-main" class="nav navbar-nav" data-hover="dropdown" data-animations="zoomIn">
<li>Início</li>
<li>NOTÍCIAS</li>
<li>FOTOS</li>
<li>PROJETOS</li>
<li>BIOGRAFIA</li>
<li>ENTRE EM CONTATO</li>
</ul>
</div>
</div>
</nav>
<div id="mySlide">
<div style="width:100%;" id="bf494d0c-d537-4f36-bdf2-4754dbee0839" class="inner-content-slide carousel slide" data-ride="carousel" data-interval="5000" data-pause="hover"><ol class="carousel-indicators"><li data-target="#bf494d0c-d537-4f36-bdf2-4754dbee0839" data-slide-to="0" class="active"></li><li data-target="#bf494d0c-d537-4f36-bdf2-4754dbee0839" data-slide-to="1" class=""></li><li data-target="#bf494d0c-d537-4f36-bdf2-4754dbee0839" data-slide-to="2" class=""></li></ol><div class="carousel-inner" role="listbox"><div class="item active"><div data-img-height="481" data-img-width="1000" class="item-img" role="img" aria-label="" style="height:500px;background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_f5a4a97f-204c-4538-bc79-d4bed4be75f3.jpeg);background-size:cover"></div></div><div class="item "><div data-img-height="480" data-img-width="1000" class="item-img" role="img" aria-label="" style="height:500px;background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_06fa6929-4e05-4d40-aebd-99233e3852d6.JPG);background-size:cover"></div></div><div class="item "><div data-img-height="488" data-img-width="1000" class="item-img" role="img" aria-label="" style="height:500px;background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_471118d4-7857-496c-b0db-21d5479de784.jpg);background-size:cover"></div></div></div><a class="left carousel-control" href="#bf494d0c-d537-4f36-bdf2-4754dbee0839" role="button" data-slide="prev"><i class="icon-prev"></i><span class="sr-only">Anterior</span></a><a class="right carousel-control" href="#bf494d0c-d537-4f36-bdf2-4754dbee0839" role="button" data-slide="next"><i class="icon-next"></i><span class="sr-only">Próximo</span></a></div>
</div>
<div class="marketing">
<div class="container"><section data-section-area='V10'><div data-section='home-section' data-area='V10' data-section-id='c60fb099-5b76-4835-a254-f7ead8bde197'><div class='lws-homesection-text-image'><div class='row'><div class='col-xs-12 col-sm-12 col-md-6'><img src='https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_edab1478-6055-4a29-aa01-1fe4426e6ff2.png' class='img-responsive'></div><div class='col-xs-12 col-sm-12 col-md-6'><div class='lws-homesection-body'>Ingressou na Polícia Militar do Piauí em 1993 e possui especialização em Segurança Pública pela Universidade Estadual do Piauí em 2013. Ao tempo de sua eleição como deputado federal pelo PTB em 2014, ostentava a patente de capitão. Licenciou-se do mandato no terceiro governo Wellington Dias para assumir a Secretaria de Segurança Pública sendo convocado o suplente Silas Freire. Ingressou na Polícia Militar do Piauí em 1993 e possui especialização em Segurança Pública pela Universidade Estadual do Piauí em 2013. Ao tempo de sua eleição como deputado federal pelo PTB em 2014, ostentava a patente de capitão. Licenciou-se do mandato no terceiro governo Wellington Dias para assumir a Secretaria de Segurança Pública sendo convocado o suplente Silas Freire.
Ingressou na Polícia Militar do Piauí em 1993 e possui especialização em Segurança Pública pela Universidade Estadual do Piauíem 2013. Ao tempo de sua eleição como deputado federal pelo PTB em 2014, ostentava a patente de capitão. Licenciou-se do mandato no terceiro governo Wellington Dias para assumir a Secretaria de Segurança Pública sendo convocado o suplente Silas Freire.
Ingressou na Polícia Militar do Piauí em 1993 e possui especialização em Segurança Pública pela Universidade Estadual do Piauíem 2013. Ao tempo de sua eleição como deputado federal pelo PTB em 2014, ostentava a patente de capitão. Licenciou-se do mandato no terceiro governo Wellington Dias para assumir a Secretaria de Segurança Pública sendo convocado o suplente Silas Freire.</div></div></div></div></div></section></div>
<div id="GroupList1">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div data-iw-group="group1">
<div role="img" aria-label="" style="background-image: url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_6310756a-7f23-4ba3-bedb-2b317c786ed3.png); background-size: cover" data-iw-bg="https://inovaweb-production.s3.amazonaws.com/attachment/image/large_6310756a-7f23-4ba3-bedb-2b317c786ed3.png" data-iw-image="image_group1" data-iw-version="medium" class="area-img"> </div>
<h2 data-iw-line="title_group1">Projetos</h2>
<p data-iw-multiline="body_group1"></p>
<a data-iw-link="link_group1" class=" btn btn-primary" href="categories/projetos" role="button">Saiba mais</a>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div data-iw-group="group2">
<div role="img" aria-label="" style="background-image: url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_b665fc4e-f95d-4b91-9dea-138d5b287022.png); background-size: cover" data-iw-bg="https://inovaweb-production.s3.amazonaws.com/attachment/image/large_b665fc4e-f95d-4b91-9dea-138d5b287022.png" data-iw-image="image_group2" data-iw-version="medium" class="area-img"> </div>
<h2 data-iw-line="title_group2">Biografia</h2>
<p data-iw-multiline="body_group2"></p>
<a data-iw-link="link_group2" class=" btn btn-primary" href="biografia" role="button">Saiba mais</a>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div data-iw-group="group3">
<div role="img" aria-label="" style="background-image: url(https://inovaweb-production.s3.amazonaws.com/attachment/image/large_08c91774-9593-498f-b984-e4ac21991226.png); background-size: cover" data-iw-bg="https://inovaweb-production.s3.amazonaws.com/attachment/image/large_08c91774-9593-498f-b984-e4ac21991226.png" data-iw-image="image_group3" data-iw-version="medium" class="area-img"> </div>
<h2 data-iw-line="title_group3">Fotos</h2>
<p data-iw-multiline="body_group3"></p>
<a data-iw-link="link_group3" class=" btn btn-primary" href="categories/fotos" role="button">Saiba mais</a>
</div>
</div>
</div>
</div>
</div>
<div class="container"><section data-section-area='V20'><div data-section='home-section' data-area='V20' data-section-id='a40ab6b2-e909-4021-99b5-ac1ebde763d7'><h2 class='lws-homesection-title'>Notícias destaque</h2><div class='lws-homesection-resource-list'><div class='row'><div class='col-xs-12 col-sm-6 col-md-4'><div class='lws-homesection-wrapper-item'><div role='img' aria-label='' class='resource-list-post-thumbnail' style='background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_dc88125b-b8f3-4455-bcbc-de7d9d0720ca.jpg);background-size:cover'></div><h4 class='resource-list-title'>Fábio Abreu troca PTB pelo PR e tenta reeleição a deputado federal</h4><div class='resource-list-excerpt'>No evento de filiação ao PR, Fábio Abreu anunciou sua pré-candidatura a deputado federal e afirmou que está preparado para disputar a reeleição. O ...</div><a href='/posts/fabio-abreu-troca-ptb-pelo-pr-e-tenta-reeleicao-a-deputado-federal' class='btn btn-primary'>Veja mais</a></div></div><div class='col-xs-12 col-sm-6 col-md-4'><div class='lws-homesection-wrapper-item'><div role='img' aria-label='' class='resource-list-post-thumbnail' style='background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_d445acdc-1a7f-4b75-a96c-76f3e0cf67d3.jpg);background-size:cover'></div><h4 class='resource-list-title'>Antes de entregar cargo, Fábio Abreu apresenta Plano de Segurança</h4><div class='resource-list-excerpt'>
O documento traça uma linha de trabalho para o setor pelos próximoa s20 anos e prevê investimentos que começam com um empréstimo junto ao BNDES p...</div><a href='/posts/antes-de-entregar-cargo-fabio-abreu-apresenta-plano-de-seguranca' class='btn btn-primary'>Veja mais</a></div></div><div class="hidden-xs col-sm-12 hidden-md hidden-lg"></div><div class='col-xs-12 col-sm-6 col-md-4'><div class='lws-homesection-wrapper-item'><div role='img' aria-label='' class='resource-list-post-thumbnail' style='background-image:url(https://inovaweb-production.s3.amazonaws.com/attachment/image/medium_56e67980-ecd2-444e-a0d9-e2c8a8735420.jpg);background-size:cover'></div><h4 class='resource-list-title'>Fábio Abreu destaca falta de atenção a segurança pública</h4><div class='resource-list-excerpt'>
Em entrevista ao Acorda Piauí, o deputado federal Fábio Abreu (PR), destacou que, enquanto a falta de segurança pública é um dos problemas mais a...</div><a href='/posts/fabio-abreu-destaca-falta-de-atencao-a-seguranca-publica' class='btn btn-primary'>Veja mais</a></div></div><div class="hidden-xs hidden-sm col-md-12 col-lg-12"></div></div></div></div></section></div>
<div id="GroupList2">
<div class="container">
<div class="GL2-item" data-iw-group="group4">
<div class="row">
<div class="col-md-7">
<h2 data-iw-line="title_group4" class="featurette-heading"></h2>
<p data-iw-multiline="body_group4" class="lead"></p>
<a data-iw-link="link_group4" class="hidden btn btn-primary btn-lg" href="" role="button"></a>
</div>
<div class="col-md-5">
<div role="img" aria-label="" style="background-image: url(/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif); background-size: cover" data-iw-image="image_group4" data-iw-version="medium"data-iw-bg="/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif" class="imagem-topicos"></div>
</div>
</div>
</div>
<div class="GL2-item" data-iw-group="group5">
<div class="row">
<div class="col-md-7">
<h2 data-iw-line="title_group5" class="featurette-heading"></h2>
<p data-iw-multiline="body_group5" class="lead"></p>
<a data-iw-link="link_group5" class="hidden btn btn-primary btn-lg" href="" role="button"></a>
</div>
<div class="col-md-5">
<div role="img" aria-label="" style="background-image: url(/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif); background-size: cover" data-iw-image="image_group5" data-iw-version="medium"data-iw-bg="/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif" class="imagem-topicos"></div>
</div>
</div>
</div>
<div class="GL2-item" data-iw-group="group6">
<div class="row">
<div class="col-md-7">
<h2 data-iw-line="title_group6" class="featurette-heading"></h2>
<p data-iw-multiline="body_group6" class="lead"></p>
<a data-iw-link="link_group6" class="hidden btn btn-primary btn-lg" href="" role="button"></a>
</div>
<div class="col-md-5">
<div role="img" aria-label="" style="background-image: url(/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif); background-size: cover" data-iw-image="image_group6" data-iw-version="medium"data-iw-bg="/assets/no-pixel-d69f97510d506fdff62059b955a572bfebc93e9c0a243ec79beaf245e737b59a.gif" class="imagem-topicos"></div>
</div>
</div>
</div>
</div>
</div>
<div class="container"><section data-section-area='V30'></section></div>
</div>
<footer id="MainFooter">
<div class="container">
<div class="lws-home-sections-footer">
<div class="lws-1-col-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12"><section data-section-area='F10'><div data-section='home-section' data-area='F10' data-section-id='f97be27b-c0e9-4229-b584-64ee920ef08a'><img src='https://inovaweb-production.s3.amazonaws.com/attachment/image/original_3939ae3f-43d1-4f63-a724-741c5ae11f47.png' class='img-responsive'></div></section></div>
</div>
</div>
<div class="lws-2-cols-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12 col-sm-6"><section data-section-area='F20'></section></div>
<div class="col-xs-12 col-sm-6"><section data-section-area='F30'></section></div>
</div>
</div>
<div class="lws-4-cols-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F40'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F50'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F60'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F70'></section></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<ul class="contacts_footer list-inline">
<li></li>
<li></li>
<li></li>
</ul>
<p>© 2018 - Fábio Abreu</p>
</div>
<div class="col-xs-12 col-sm-6">
</div>
</div>
<div class="lws-home-sections-footer">
<div class="lws-1-col-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12"><section data-section-area='F80'><div data-section='home-section' data-area='F80' data-section-id='76c13c4e-249f-4cac-b9ae-e2a56220e80c'><div class='lws-homesection-body'>Todos os direitos reservados.
</div></div></section></div>
</div>
</div>
<div class="lws-2-cols-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12 col-sm-6"><section data-section-area='F90'></section></div>
<div class="col-xs-12 col-sm-6"><section data-section-area='F100'></section></div>
</div>
</div>
<div class="lws-4-cols-footer lws-cols-footer-hs">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F110'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F120'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F130'></section></div>
<div class="col-xs-12 col-sm-6 col-md-3"><section data-section-area='F140'></section></div>
</div>
</div>
</div>
</div>
</footer>
<script src="/assets/site-fd70af901fb20b8029f75be40e0f5ff5848d5415b704279fd88ad5bc9c0ec4ec.js"></script>
<script src="/assets/default/js/main-efff309d3722bafb3f5fa5a2092f366e799cac0d724996ca31c7e52b408475ec.js"></script>
<div id="side-social-networks-loguei" role="group" class="list-unstyled btn-group-vertical">
</div>
<aside id="AVS-ContactButtons" class="">
<ul class="list-unstyled">
</ul>
</aside>
<script>
setTimeout(function(){
$('#AVS-ContactButtons ul li a span').css({
right: '-200px'
});
}, 4000);
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1982872918652221',
xfbml : true,
version : 'v2.11'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.onload = function() { fbAsyncInit(); }
js.src = 'https://connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.11&appId=1982872918652221';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script type="text/javascript">
var NEWSLETTER_URL = '/fabio-abreu-1/newsletters';
var DEFAULT_ADDRESS = '';
$('.iw-contact-form').submit(function(e){
e.preventDefault();var f = $(this);$.ajax({
url:'/contact/fabio-abreu-1?authenticity_token=%2FLURz%2Fx9fdgyLq2zjSHViEkAz%2BQpMcS5Jvvnqwx9hveE4BV55tMP1NS9KKnIquT%2FulL%2FuS9fD%2FxtDD5ALRMRHA%3D%3D',
type:'POST',data:f.serialize(),success:function(){
var redir = $('#iw_redir_loguei_cf').length;
if (redir == 0) {alert('Email enviado com sucesso');f[0].reset();} else {
var to = $('#iw_redir_loguei_cf').val(); window.location=to;
}
},error:function(){alert('Erro ao enviar email');}
});
});
</script>
</body>
</html>
This is the CSS code:
#menu-main li:last-child{
padding-left: 378px;
}
#menu-main li:last-child{
-moz-box-shadow: 0px 0px 0px 0px #ffffff;
-webkit-box-shadow: 0px -0px 0px 0px #ffffff;
box-shadow: 0px 0px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #bfb9bf) );
background:-moz-linear-gradient( center top, #f9f9f9 5%, #bfb9bf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#bfb9bf');
background-color:#f9f9f9;
border-top-left-radius:42px;
border-radius-topleft:42px;
border-top-left-radius:42px;
border-top-right-radius:42px;
border-radius-topright:42px;
border-top-right-radius:42px;
border-bottom-right-radius:42px;
border-radius-bottomright:42px;
border-bottom-right-radius:42px;
border-bottom-left-radius:42px;
border-radius-bottomleft:42px;
border-bottom-left-radius:42px;
text-indent:0px;
display:inline-block;
color:#000000;
height:35px;
line-height:26px;
width:178px;
text-decoration:none;
text-align:center;
text-shadow:0px 0px 6px #ffffff;
}
.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bfb9bf), color-stop(1, #f9f9f9) );
background:-moz-linear-gradient( center top, #bfb9bf 5%, #f9f9f9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfb9bf', endColorstr='#f9f9f9');
background-color:#bfb9bf;
}.classname:active {
position:relative;
top:1px;
}

I would be happy to help, but I would need to see your HTML, so please add it to the question.
I imagine that:
It has too much width
You probably need some margin around it to make it centered more on the navbar
That padding-left: 378px; should likely be margin-left or nothing, as that might be causing the over-sided width
Also, if you want the WhatsApp icon you can check out https://fontawesome.com/icons/whatsapp?style=brands

You can just set border-radius: 42px; instead of doing each corner by itself.
try using float: right; on the button and I think you were trying to use margin-left and not padding-left on #menu-main li:last-child

How to make buttons inside columns equal in height on all devices?

My Bootstrap columns are equal in height no matter the size of the device (computers, tablets, phones, etc.) thanks to JavaScript's MatchHeight.
But the problem is that I also want to make the buttons inside them equal in height despite different amount of text above them. I've tried min-height, margin-bottom (aren't responsive). How can I achieve this? With bootstrap somehow, or js, or something but it's important for aesthetics!
EDIT: This is what I want to achieve: https://i.stack.imgur.com/NOlns.png
Buttons stay the same no matter what!
#section4 .divider-fullwidth {
margin-bottom: 15px;
}
#section4 .lastdivider {
margin-top: 50px;
}
#section4 .box {
margin: 1px;
margin-bottom: 30px;
padding: 5% 8%;
}
#section4 .btn {
font-size: .9em;
padding: 5% 4%;
width: 100%;
}
#section4 .innerBox {
min-height: 210px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background_section4">
<div id="section4" class="container">
<div class="row intro">
<h2>ESCOGE TU PLAN</h2>
<p>El precio influye en el tipo y número de actividades que organizaremos, pero te aseguramos que todas son extraordinarias.</p>
</div>
<div class="row columns">
<div class="col-sm-4">
<div class="box">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #e5e874; font-weight: 800;">basic</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">29</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 14€ niñ#
</p>
<div>
<p>El plan perfecto para iniciarte como. Date un capricho y pasa un día diferente.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong>
</p>
<ul>
<li>
<span>Salida en catamarán + Snorkel en mar abierto</span>
</li>
<li>
<span>Visita Bodegas + Cata de vinos + Brunch entre viñedos</span>
</li>
<li>
<span>Circuito SPA privado + Copa de cava + Menú degustación</span>
</li>
<li>
<span>Menú degustación fusión cocina japonesa y mexicana</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg" href="">QUIERO MI</a>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #f99584; font-weight: 800;">plus</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">59</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 29€ niñ#
</p>
<div>
<p>Solo para espíritus aventureros con hambre de descubrir nuevas y emocionantes experiencias.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros:</strong>
</p>
<ul>
<li>
<span>Excursión guiada en moto acuática + Menú degustación estilo Mediterráneo</span>
</li>
<li>
<span>Masaje relajante de chocolate blanco natural + Jacuzzi de cacao + Circuito SPA privado + Curso de cata de vinos</span>
</li>
<li>
<span>Barranquismo guiado + Menú degustación</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg" href="">QUIERO MI</a>
</div>
</div>
<div class="col-sm-4">
<div class="box lastBox">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #7ed9c3; font-weight: 800;">premium</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">99</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 49€ niñ#
</p>
<div>
<p>¡Vamos a lo grande! Una combinación de actividades exclusivas para ocasiones especiales.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox lastInnerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong>
</p>
<ul>
<li>
<span>Vuelo en parapente biplaza + Visita bodegas + Cata de vinos + Menú degustación con maridaje exclusivo</span>
</li>
<li>
<span>Puesta de sol en velero + Degustación de ostras con cava + Cena romántica bajo las estrellas</span>
</li>
<li>
<span>Conducción de Ferrari en circuito + Bautismo de buceo + Menú degustación</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg" href="">QUIERO MI</a>
</div>
</div>
</div>
</div>
</div>

Below is the solution, I assume ,this is what you are looking for.
.box{
position: relative;
height:500px;
}
.btn{
position: absolute;
bottom:0px;
width: auto; //You can adjust the width accordingly
}
You can adjust the height of your div accordingly.
.box {
border: 1px solid black;
padding: 20px;
margin: 20px;
position: relative;
height: 440px;
}
.btn {
font-size: .9em;
float: none;
width: auto;
position: absolute;
bottom: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row columns">
<div class="col-sm-4">
<div class="box">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #e5e874; font-weight: 800;">basic</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">29</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 14€ niñ#
</p>
<div>
<p>El plan perfecto para iniciarte como. Date un capricho y pasa un día diferente.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong>
</p>
<ul>
<li>
<span>Salida en catamarán + Snorkel en mar abierto</span>
</li>
<li>
<span>Visita Bodegas + Cata de vinos + Brunch entre viñedos</span>
</li>
<li>
<span>Circuito SPA privado + Copa de cava + Menú degustación</span>
</li>
<li>
<span>Menú degustación fusión cocina japonesa y mexicana</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg btn-primary" href="">QUIERO MI</a>
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #f99584; font-weight: 800;">plus</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">59</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 29€ niñ#
</p>
<div>
<p>Solo para espíritus aventureros con hambre de descubrir nuevas y emocionantes experiencias.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros:</strong>
</p>
<ul>
<li>
<span>Excursión guiada en moto acuática + Menú degustación estilo Mediterráneo</span>
</li>
<li>
<span>Masaje relajante de chocolate blanco natural + Jacuzzi de cacao + Circuito SPA privado + Curso de cata de vinos</span>
</li>
<li>
<span>Barranquismo guiado + Menú degustación</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg btn-primary" href="">QUIERO MI</a>
</div>
</div>
<div class="col-sm-4">
<div class="box lastBox">
<h4>
<span style="font-weight: 100;">ZZZ</span><span style="color: #7ed9c3; font-weight: 800;">premium</span>
</h4>
<p>
<span style="font-size: 3em; font-weight: bold;">99</span><span style="font-size: 2em; font-weight: bold;">€</span> adulto / 49€ niñ#
</p>
<div>
<p>¡Vamos a lo grande! Una combinación de actividades exclusivas para ocasiones especiales.</p>
</div>
<div class="divider-fullwidth">
</div>
<div class="innerBox lastInnerBox">
<p>
<strong>Algunos planes sorpresa que han hecho otros Zurpraisers:</strong>
</p>
<ul>
<li>
<span>Vuelo en parapente biplaza + Visita bodegas + Cata de vinos + Menú degustación con maridaje exclusivo</span>
</li>
<li>
<span>Puesta de sol en velero + Degustación de ostras con cava + Cena romántica bajo las estrellas</span>
</li>
<li>
<span>Conducción de Ferrari en circuito + Bautismo de buceo + Menú degustación</span>
</li>
</ul>
</div>
<div class="divider-fullwidth lastdivider">
</div>
<a type="button" class="btn btn-lg btn-primary" href="">QUIERO MI</a>
</div>
</div>
</div>
Padding given to .box is causing the issue.

Why jquery load page doesn't work in my page

Why my fancybox doesn't work when I replace div id=book0... and add jquery.load like that in my page:
<div id="book0" class="withoutborder0"></div>
<div id="book1" class="withoutborder1"></div>
<div id="book2" class="withoutborder2"></div>
<div id="book3" class="withoutborder3"></div>
<div id="book4" class="withoutborder4"></div>
$('#book0').load('import.html #book0img');
$('#book1').load('import.html #book1img');
$('#book2').load('import.html #book2img');
$('#book3').load('import.html #book3img');
$('#book4').load('import.html #book4img');
Here is my page with jquery.load
http://www.booclin.ovh/tom/365/book.html
Here is the link and the code of my page without jquery.load who works fine
http://www.booclin.ovh/tom/365/bookb.html
code
$("img").error(function() { $(this).parent().remove(); });
$("a.fancyboxgallerybook0, a.fancyboxgallerybook1, a.fancyboxgallerybook2, a.fancyboxgallerybook3, a.fancyboxgallerybook4").fancybox();
console.clear();
$('#logohomepage').click(function() {
$('body').css({ 'overflow': 'auto' });
});
function showDiv() {
document.getElementById('logohomepage').style.display = "none";
document.getElementById('allgalleries').style.display = "block";
}
$("#launcherbook0, #launcherbook0b, #launcherbook0c").on("click", function(){
$("a.fancyboxgallerybook0").eq(0).trigger("click");
});
$("#launcherbook1, #launcherbook1b").on("click", function(){
$("a.fancyboxgallerybook1").eq(0).trigger("click");
});
$("#launcherbook2, #launcherbook2b").on("click", function(){
$("a.fancyboxgallerybook2").eq(0).trigger("click");
});
$("#launcherbook3, #launcherbook3b").on("click", function(){
$("a.fancyboxgallerybook3").eq(0).trigger("click");
});
$("#launcherbook4, #launcherbook4b").on("click", function(){
$("a.fancyboxgallerybook4").eq(0).trigger("click");
});
$("#launcherinfo, #launcherinfob").on("click", function(){
$("#infofull").eq(0).trigger("click");
});
$(".fancybox-lock").bind("mousewheel", function() { return false; });
$( function( ){
$( "#closegallerybook0, #closegallerybook1, #closegallerybook2, #closegallerybook3, #closegallerybook4, #infofull" ).on( "click", function(){ $.fancybox.close(); return false; });
});
$(".fancyboxthumbnailsgallerybook0, .hidemenubook0").click(function(){
$(".secondleftpartbook0").show();
$(".secondleftpartbook1").hide();
$(".secondleftpartbook2").hide();
$(".secondleftpartbook3").hide();
$(".secondleftpartbook4").hide();
$(".partmenuhideninfo").show();
});
$("#closegallerybook0").click(function(){
$(".secondleftpartbook0").hide();
$("#book0").show();
$("#book1").hide();
$("#book2").hide();
$("#book3").hide();
$("#book4").hide();
$("#infofull").hide();
});
$(".fancyboxthumbnailsgallerybook1, .hidemenubook1").click(function(){
$(".secondleftpartbook0").hide();
$(".secondleftpartbook1").show();
$(".secondleftpartbook2").hide();
$(".secondleftpartbook3").hide();
$(".secondleftpartbook4").hide();
$(".partmenuhideninfo").show();
});
$("#closegallerybook1").click(function(){
$(".secondleftpartbook1").hide();
$("#book0").hide();
$("#book1").show();
$("#book2").hide();
$("#book3").hide();
$("#book4").hide();
$("#infofull").hide();
});
$(".fancyboxthumbnailsgallerybook2, .hidemenubook2").click(function(){
$(".secondleftpartbook0").hide();
$(".secondleftpartbook1").hide();
$(".secondleftpartbook2").show();
$(".secondleftpartbook3").hide();
$(".secondleftpartbook4").hide();
$(".partmenuhideninfo").show();
});
$("#closegallerybook2").click(function(){
$(".secondleftpartbook2").hide();
$("#book0").hide();
$("#book1").hide();
$("#book2").show();
$("#book3").hide();
$("#book4").hide();
$("#infofull").hide();
});
$(".fancyboxthumbnailsgallerybook3, .hidemenubook3").click(function(){
$(".secondleftpartbook0").hide();
$(".secondleftpartbook1").hide();
$(".secondleftpartbook2").hide();
$(".secondleftpartbook3").show();
$(".secondleftpartbook4").hide();
$(".partmenuhideninfo").show();
});
$("#closegallerybook3").click(function(){
$(".secondleftpartbook3").hide();
$("#book0").hide();
$("#book1").hide();
$("#book2").hide();
$("#book3").show();
$("#book4").hide();
$("#infofull").hide();
});
$(".fancyboxthumbnailsgallerybook4, .hidemenubook4").click(function(){
$(".secondleftpartbook0").hide();
$(".secondleftpartbook1").hide();
$(".secondleftpartbook2").hide();
$(".secondleftpartbook3").hide();
$(".secondleftpartbook4").show();
$(".partmenuhideninfo").show();
});
$("#closegallerybook4").click(function(){
$(".secondleftpartbook4").hide();
$("#book0").hide();
$("#book1").hide();
$("#book2").hide();
$("#book3").hide();
$("#book4").show();
$("#infofull").hide();
});
$(".hidemenuinfo").click(function(){
$(".secondleftpartbook0").hide();
$(".secondleftpartbook1").hide();
$(".secondleftpartbook2").hide();
$(".secondleftpartbook3").hide();
$(".secondleftpartbook4").hide();
$(".partmenuhideninfo").hide();
$("#infofull").show();
});
$("#infofull").click(function(){
$("#book0").hide();
$("#book1").hide();
$("#book2").hide();
$("#book3").hide();
$("#book4").hide();
});
function toggleOverlay () {
var overlay = document.querySelector("div");
overlay.classList.toggle('hide-overlaymenu');
document.body.style.overflow = "hidden";
}
$('#menumodalclose').click(function() {
$('body').css({
'overflow': 'scroll'
});
});
$(function() {
var salt = Math.floor(Math.random() * 1000),
time;
function load_script() {
$('#backgroundhomepage').remove();
$.getScript("index/js/backgroundhome.js?s=" + salt, function() {
$('script:last').attr('id', 'myscript');
salt = Math.floor(Math.random() * 1000);
time = setTimeout(function() {
load_script();
}, 5 * 1000);
});
}
load_script();
});
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="http://www.booclin.ovh/tom/365/index/js/modernizr.custom.js"></script>
<script type="text/javascript" src="http://www.booclin.ovh/tom/365/index/book/jquery.fancybox.js"></script>
<script type="text/javascript" src="http://www.booclin.ovh/tom/365/index/book/fancybox.js"></script>
<script id="backgroundhomepage" src="http://www.booclin.ovh/tom/365/index/js/backgroundhome.js"></script>
<link property="stylesheet" rel="stylesheet" type="text/css" href="http://www.booclin.ovh/tom/365/index/css/style.css">
<link property="stylesheet" rel="stylesheet" type="text/css" href="http://www.booclin.ovh/tom/365/index/book/jquery.fancybox.css" type="text/css">
<div class="hide-overlaymenu">
<div class="overlaymenu">
<div class="overlaymenu-content">
<div class="buttonmenuinside-container">
<a id="menumodalclose" class="buttonmenuinside" onclick="toggleOverlay()">
<i class="fa fa-toggle-off"></i>
<i class="fa fa-toggle-on"></i>
<img style="height:20px; width:20px; opacity:0.5;" src="http://www.starkasia.com/wp-content/uploads/icons/menuclose.png" alt="">
</a>
</div>
<div class="menucontent">
<a style="opacity: initial!important;" class="hidemenubook0" id="launcherbook0" data-fancybox-group="book0" href="javascript:void(0);">
BOOK0</a>
<br/><br/><br/>
<a style="opacity: initial!important;" class="hidemenubook1" id="launcherbook1" data-fancybox-group="book1" href="javascript:void(0);">BOOK 1</a><br/>
<a style="opacity: initial!important;" class="hidemenubook2" id="launcherbook2" data-fancybox-group="book1" href="javascript:void(0);">BOOK 2</a><br/>
<a style="opacity: initial!important;" class="hidemenubook3" id="launcherbook3" data-fancybox-group="book1" href="javascript:void(0);">BOOK 3</a><br/>
<a style="opacity: initial!important;" class="hidemenubook4" id="launcherbook4" data-fancybox-group="book1" href="javascript:void(0);">ARCHIVE</a><br/>
<a style="opacity: initial!important;" class="hidemenuinfo" id="launcherinfo" href="javascript:void(0);">INFO</a>
</div>
</div>
</div>
</div>
<div id="logohomepage" style="display:inline;" onclick="showDiv()">
<a style="opacity: initial!important;" class="hidemenubook0" id="launcherbook0b" data-fancybox-group="book0" href="javascript:void(0);">
<span style="width: 100%; max-width:120px; position: absolute; top: 100px; left:-100%; right:-100%; margin:auto;">
CLICK ME</span>
</a>
</div>
<div id="allgalleries" style="display:none;">
<div class="leftpart">
<div class="firstleftpart">
<a style="opacity: initial!important;" class="hidemenubook0" id="launcherbook0c" data-fancybox-group="book0" href="javascript:void(0);">BOOK 0</a>
<br/><br/><br/>
<a style="opacity: initial!important;" class="hidemenubook1" id="launcherbook1b" data-fancybox-group="book1" href="javascript:void(0);">BOOK 1</a><br/>
<a style="opacity: initial!important;" class="hidemenubook2" id="launcherbook2b" data-fancybox-group="book2" href="javascript:void(0);">BOOK 2</a><br/>
<a style="opacity: initial!important;" class="hidemenubook3" id="launcherbook3b" data-fancybox-group="book3" href="javascript:void(0);">BOOK 3</a><br/>
<a style="opacity: initial!important;" class="hidemenubook4" id="launcherbook4b" data-fancybox-group="book4" href="javascript:void(0);">ARCHIVE</a><br/>
<a style="opacity: initial!important;" class="hidemenuinfo" id="launcherinfob" href="javascript:void(0);">INFO</a>
<br/><br/><br/>
</div>
<div style="display:none;" class="secondleftpartbook0">
<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>
<a style="font-size: 8px;" href="javascript:;"> | </a>
<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>
<br/>
<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook0" class="opengallerybook0" href="javascript:;">
THUMBNAILS</a>
</div>
<div style="display:none;" class="secondleftpartbook1">
<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>
<a style="font-size: 8px;" href="javascript:;"> | </a>
<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>
<br/>
<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook1" class="opengallerybook1" href="javascript:;">
THUMBNAILS</a>
</div>
<div style="display:none;" class="secondleftpartbook2">
<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>
<a style="font-size: 8px;" href="javascript:;"> | </a>
<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>
<br/>
<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook2" class="opengallerybook2" href="javascript:;">
THUMBNAILS</a>
</div>
<div style="display:none;" class="secondleftpartbook3">
<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>
<a style="font-size: 8px;" href="javascript:;"> | </a>
<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>
<br/>
<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook3" class="opengallerybook3" href="javascript:;">
THUMBNAILS</a>
</div>
<div style="display:none;" class="secondleftpartbook4">
<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>
<a style="font-size: 8px;" href="javascript:;"> | </a>
<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>
<br/>
<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook4" class="opengallerybook4" href="javascript:;">
THUMBNAILS</a>
</div>
<a class="iconfirstleftpart" style="cursor:pointer" onclick="toggleOverlay()">
<img style="height:20px; width:20px;" src="http://www.starkasia.com/wp-content/uploads/icons/menu.png" alt=""></a>
</div>
<div class="rightpart">
<div id="globalgalerie">
<div id="book0" class="withoutborder0">
<a class="fancyboxgallerybook0" data-fancybox-group="book0" href="http://1.bp.blogspot.com/-N2KeLaszKAM/T26Tghy9lsI/AAAAAAAAAVI/ghFRPBmP0o8/s1600/200px-George_Spanky_McFarland.jpg" title="">
<img class="fancyboxthumbnailsgallerybook0" style="max-width:200px" src="http://1.bp.blogspot.com/-N2KeLaszKAM/T26Tghy9lsI/AAAAAAAAAVI/ghFRPBmP0o8/s1600/200px-George_Spanky_McFarland.jpg" alt=""/>
</a>
<a class="fancyboxgallerybook0" data-fancybox-group="book0" href="http://creationwiki.org/pool/images/thumb/d/df/Ctenophore_larva.jpg/200px-Ctenophore_larva.jpg" title="">
<img class="fancyboxthumbnailsgallerybook0" style="max-width:200px" src="http://creationwiki.org/pool/images/thumb/d/df/Ctenophore_larva.jpg/200px-Ctenophore_larva.jpg" alt=""/>
</a>
</div>
<div id="book1" class="withoutborder1">
<a class="fancyboxgallerybook1" data-fancybox-group="book1" href="http://animebathscenewiki.com/images/thumb/1/13/School_Rumble_12.png/200px-School_Rumble_12.png" title="">
<img class="fancyboxthumbnailsgallerybook1" style="max-width:200px" src="http://animebathscenewiki.com/images/thumb/1/13/School_Rumble_12.png/200px-School_Rumble_12.png" alt=""/>
</a>
<a class="fancyboxgallerybook1" data-fancybox-group="book1" href="http://www.zeldadungeon.net/wiki/images/thumb/1/10/Windfish.jpg/200px-Windfish.jpg" title="">
<img class="fancyboxthumbnailsgallerybook1" style="max-width:200px" src="http://www.zeldadungeon.net/wiki/images/thumb/1/10/Windfish.jpg/200px-Windfish.jpg" alt=""/>
</a>
</div>
<div id="book2" class="withoutborder2">
<a class="fancyboxgallerybook2" data-fancybox-group="book2" href="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Plasmafractal.gif/200px-Plasmafractal.gif" title="">
<img class="fancyboxthumbnailsgallerybook2" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Plasmafractal.gif/200px-Plasmafractal.gif" alt=""/>
</a>
<a class="fancyboxgallerybook2" data-fancybox-group="book2" href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Stazione_zoologica_Dohrn.jpg/200px-Stazione_zoologica_Dohrn.jpg" title="">
<img class="fancyboxthumbnailsgallerybook2" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Stazione_zoologica_Dohrn.jpg/200px-Stazione_zoologica_Dohrn.jpg" alt=""/>
</a>
</div>
<div id="book3" class="withoutborder3">
<a class="fancyboxgallerybook3" data-fancybox-group="book3" href="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Rufisque-1912.jpg/200px-Rufisque-1912.jpg" title="">
<img class="fancyboxthumbnailsgallerybook3" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Rufisque-1912.jpg/200px-Rufisque-1912.jpg" alt=""/>
</a>
<a class="fancyboxgallerybook3" data-fancybox-group="book3" href="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/HMS_Intrepid.jpg/200px-HMS_Intrepid.jpg" title="">
<img class="fancyboxthumbnailsgallerybook3" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/HMS_Intrepid.jpg/200px-HMS_Intrepid.jpg" alt=""/>
</a>
</div>
<div id="book4" class="withoutborder4">
<a class="fancyboxgallerybook4" data-fancybox-group="book4" href="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/RMS_Olympic_radio_1913.jpg/200px-RMS_Olympic_radio_1913.jpg" title="">
<img class="fancyboxthumbnailsgallerybook4" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/RMS_Olympic_radio_1913.jpg/200px-RMS_Olympic_radio_1913.jpg" alt=""/>
</a>
<a class="fancyboxgallerybook4" data-fancybox-group="book4" href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Agiospavlos_DM_2004_IMG003_Felsenformation_nahe.JPG/200px-Agiospavlos_DM_2004_IMG003_Felsenformation_nahe.JPG" title="">
<img class="fancyboxthumbnailsgallerybook4" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Agiospavlos_DM_2004_IMG003_Felsenformation_nahe.JPG/200px-Agiospavlos_DM_2004_IMG003_Felsenformation_nahe.JPG" alt=""/>
</a>
</div>
<div id="infofull">
<span class="spanbold">INFO</span><br/><br/>
BLABLABLA
</div>
</div>
</div>
</div>

.load() method is assynchroneous...
Meaning it has a delay to get the response.
This delay is long enought for the script to execute completely before a response is received.
Moreover, you are initiating your FancyBox instances before calling the loads.
So the elements (ancors) you provide for it are obviously missing.
So a solution is to modify this line:
$("a.fancyboxgallerybook0, a.fancyboxgallerybook1, a.fancyboxgallerybook2, a.fancyboxgallerybook3, a.fancyboxgallerybook4").fancybox();
as a function:
function fancyInit(x){
$("#book"+x).find("a.fancyboxgallerybook"+x).fancybox();
}
Then use the .load() callback:
$('#book0').load('import.html #book0img',fancyInit(0));
$('#book1').load('import.html #book1img',fancyInit(1));
$('#book2').load('import.html #book2img',fancyInit(2));
$('#book3').load('import.html #book3img',fancyInit(3));
$('#book4').load('import.html #book4img',fancyInit(4));
The callback exectutes when .load() as completed successfully.

Navbar collapse is not working in Bootstrap 3.2

On phone view The Navbar works just File in Bootply but it is not expanding in my site.
Here is the full page Code-
<html lang="en"><head>
<title>Your store</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="generator" content="nopCommerce">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link href="/themes/ProcoDefault/Content/jquery.datetimepicker.css" rel="stylesheet" type="text/css">
<link href="/themes/ProcoDefault/Content/bootstrap-3.2.0/CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="/Content/jquery-ui-themes/smoothness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css">
<script id="facebook-jssdk" src="//connect.facebook.net/en_US/all.js#xfbml=1"></script><script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="/Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/Scripts/jquery-migrate-1.2.1.min.js"></script>
<script src="/Scripts/public.common.js"></script>
<script src="/Scripts/public.ajaxcart.js"></script>
<script src="/Scripts/jquery.datetimepicker.js"></script>
<link rel="shortcut icon" href="http://localhost:38451/favicon.ico">
<!--Powered by nopCommerce - http://www.nopCommerce.com-->
<!--Copyright (c) 2008-2013-->
<style type="text/css">.fb_hidden{position:absolute;top:-10000px;z-index:10001}.fb_invisible{display:none}.fb_reset{background:none;border:0;border-spacing:0;color:#000;cursor:auto;direction:ltr;font-family:"lucida grande", tahoma, verdana, arial, sans-serif;font-size:11px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:1;margin:0;overflow:visible;padding:0;text-align:left;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-spacing:normal}.fb_reset>div{overflow:hidden}.fb_link img{border:none}
.fb_dialog{background:rgba(82, 82, 82, .7);position:absolute;top:-10000px;z-index:10001}.fb_reset .fb_dialog_legacy{overflow:visible}.fb_dialog_advanced{padding:10px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}.fb_dialog_content{background:#fff;color:#333}.fb_dialog_close_icon{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 0 transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/yL/r/s816eWC-2sl.gif);cursor:pointer;display:block;height:15px;position:absolute;right:18px;top:17px;width:15px}.fb_dialog_mobile .fb_dialog_close_icon{top:5px;left:5px;right:auto}.fb_dialog_padding{background-color:transparent;position:absolute;width:1px;z-index:-1}.fb_dialog_close_icon:hover{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 -15px transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/yL/r/s816eWC-2sl.gif)}.fb_dialog_close_icon:active{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 -30px transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/yL/r/s816eWC-2sl.gif)}.fb_dialog_loader{background-color:#f2f2f2;border:1px solid #606060;font-size:24px;padding:20px}.fb_dialog_top_left,.fb_dialog_top_right,.fb_dialog_bottom_left,.fb_dialog_bottom_right{height:10px;width:10px;overflow:hidden;position:absolute}.fb_dialog_top_left{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 0;left:-10px;top:-10px}.fb_dialog_top_right{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 -10px;right:-10px;top:-10px}.fb_dialog_bottom_left{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 -20px;bottom:-10px;left:-10px}.fb_dialog_bottom_right{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 -30px;right:-10px;bottom:-10px}.fb_dialog_vert_left,.fb_dialog_vert_right,.fb_dialog_horiz_top,.fb_dialog_horiz_bottom{position:absolute;background:#525252;filter:alpha(opacity=70);opacity:.7}.fb_dialog_vert_left,.fb_dialog_vert_right{width:10px;height:100%}.fb_dialog_vert_left{margin-left:-10px}.fb_dialog_vert_right{right:0;margin-right:-10px}.fb_dialog_horiz_top,.fb_dialog_horiz_bottom{width:100%;height:10px}.fb_dialog_horiz_top{margin-top:-10px}.fb_dialog_horiz_bottom{bottom:0;margin-bottom:-10px}.fb_dialog_iframe{line-height:0}.fb_dialog_content .dialog_title{background:#6d84b4;border:1px solid #3b5998;color:#fff;font-size:14px;font-weight:bold;margin:0}.fb_dialog_content .dialog_title>span{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yd/r/Cou7n-nqK52.gif) no-repeat 5px 50%;float:left;padding:5px 0 7px 26px}body.fb_hidden{-webkit-transform:none;height:100%;margin:0;overflow:visible;position:absolute;top:-10000px;left:0;width:100%}.fb_dialog.fb_dialog_mobile.loading{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ya/r/3rhSv5V8j3o.gif) white no-repeat 50% 50%;min-height:100%;min-width:100%;overflow:hidden;position:absolute;top:0;z-index:10001}.fb_dialog.fb_dialog_mobile.loading.centered{max-height:590px;min-height:590px;max-width:500px;min-width:500px}#fb-root #fb_dialog_ipad_overlay{background:rgba(0, 0, 0, .45);position:absolute;left:0;top:0;width:100%;min-height:100%;z-index:10000}#fb-root #fb_dialog_ipad_overlay.hidden{display:none}.fb_dialog.fb_dialog_mobile.loading iframe{visibility:hidden}.fb_dialog_content .dialog_header{-webkit-box-shadow:white 0 1px 1px -1px inset;background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#738ABA), to(#2C4987));border-bottom:1px solid;border-color:#1d4088;color:#fff;font:14px Helvetica, sans-serif;font-weight:bold;text-overflow:ellipsis;text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0;vertical-align:middle;white-space:nowrap}.fb_dialog_content .dialog_header table{-webkit-font-smoothing:subpixel-antialiased;height:43px;width:100%}.fb_dialog_content .dialog_header td.header_left{font-size:12px;padding-left:5px;vertical-align:middle;width:60px}.fb_dialog_content .dialog_header td.header_right{font-size:12px;padding-right:5px;vertical-align:middle;width:60px}.fb_dialog_content .touchable_button{background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4966A6), color-stop(.5, #355492), to(#2A4887));border:1px solid #29447e;-webkit-background-clip:padding-box;-webkit-border-radius:3px;-webkit-box-shadow:rgba(0, 0, 0, .117188) 0 1px 1px inset, rgba(255, 255, 255, .167969) 0 1px 0;display:inline-block;margin-top:3px;max-width:85px;line-height:18px;padding:4px 12px;position:relative}.fb_dialog_content .dialog_header .touchable_button input{border:none;background:none;color:#fff;font:12px Helvetica, sans-serif;font-weight:bold;margin:2px -12px;padding:2px 6px 3px 6px;text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0}.fb_dialog_content .dialog_header .header_center{color:#fff;font-size:16px;font-weight:bold;line-height:18px;text-align:center;vertical-align:middle}.fb_dialog_content .dialog_content{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/y9/r/jKEcVPZFk-2.gif) no-repeat 50% 50%;border:1px solid #555;border-bottom:0;border-top:0;height:150px}.fb_dialog_content .dialog_footer{background:#f2f2f2;border:1px solid #555;border-top-color:#ccc;height:40px}#fb_dialog_loader_close{float:left}.fb_dialog.fb_dialog_mobile .fb_dialog_close_button{text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0}.fb_dialog.fb_dialog_mobile .fb_dialog_close_icon{visibility:hidden}
.fb_iframe_widget{display:inline-block;position:relative}.fb_iframe_widget span{display:inline-block;position:relative;text-align:justify}.fb_iframe_widget iframe{position:absolute}.fb_iframe_widget_lift{z-index:1}.fb_hide_iframes iframe{position:relative;left:-10000px}.fb_iframe_widget_loader{position:relative;display:inline-block}.fb_iframe_widget_fluid{display:inline}.fb_iframe_widget_fluid span{width:100%}.fb_iframe_widget_loader iframe{min-height:32px;z-index:2;zoom:1}.fb_iframe_widget_loader .FB_Loader{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/y9/r/jKEcVPZFk-2.gif) no-repeat;height:32px;width:32px;margin-left:-16px;position:absolute;left:50%;z-index:4}
.fbpluginrecommendationsbarleft,.fbpluginrecommendationsbarright{position:fixed !important;bottom:0;z-index:999}.fbpluginrecommendationsbarleft{left:10px}.fbpluginrecommendationsbarright{right:10px}</style></head>
<body>
<div id="dialog-notifications-success" title="Notification" style="display:none; width:600px;">
</div>
<div id="dialog-notifications-error" title="Error" style="display:none;">
</div>
<div id="bar-notification" class="bar-notification">
<img src="/Content/Images/ico-close-notification-bar.png" class="close" alt="Close" title="Close">
</div>
<div class="headerwrapper">
<div class="header ">
<div class="container top-header-container shadowwrapper">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="header-logo">
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<link href="/themes/ProcoDefault/Content/flyout/flyout.css" rel="stylesheet" type="text/css">
<script src="/themes/ProcoDefault/Content/flyout/flyout.js" type="text/javascript"></script>
<div class="social_container_login">
<div class="social_container">
<div><a target="_blank" href="http://www.facebook.com/pages/Brookhaven-Marketplace/33148540039"><img src="/Content/Images/uploaded/social/big_facebook_icon.png" alt="Facebook"></a></div>
<div><a target="_blank" href="https://twitter.com/#!/brookhavenmkt"><img src="/Content/Images/uploaded/social/Twitter.png" alt="Twitter"></a></div>
<div><a target="_blank" href="http://pinterest.com/brookhavenmkrt/"><img src="/Content/Images/uploaded/social/icon_pinterest.png" alt="Pinterest"></a></div>
</div>
<div class="login">
My Account
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<a class="see-u-picks" href="../../../specialcouponoffer"><img class="img-responsive" src="/content/images/uploaded/See-current-upick-offer-btn.png"></a>
</div>
<div id="login-box" class="login-popup">
<img src="/Content/Images/uploaded/close_pop.png" class="btn_close" title="Close Window" alt="Close">
<div class="header-links">
<h1>My Account</h1>
<ul>
<li>Shopping List</li>
<li>Preferences</li>
<li>Log out</li>
<li id="topcartlink">Shopping cart
(16)
</li>
<script type="text/javascript">
$('#topcartlink').live('mouseenter', function () {
$('#flyout-cart').addClass('active');
});
$('#topcartlink').live('mouseleave', function () {
$('#flyout-cart').removeClass('active');
});
$('#flyout-cart').live('mouseenter', function () {
$('#flyout-cart').addClass('active');
});
$('#flyout-cart').live('mouseleave', function () {
$('#flyout-cart').removeClass('active');
});
</script>
<li>Wishlist <a href="/wishlist" class="wishlist-qty">
(1)</a> </li>
</ul>
</div>
<div class="topdownclickme">
<div class="ico-myaccount">My Account</div></div>
<script>$('.topdownclickme').click(function() {
$('.header-links').slideToggle('slow', function() {
// Animation complete.
});
});
</script>
</div>
</div>
</div>
<div class="header-selectors-wrapper">
<div class="header-taxdisplaytypeselector">
</div>
<div class="header-currencyselector">
</div>
<div class="header-languageselector">
</div>
</div>
</div>
<div class="top-header-menu">
<link media="print" rel="stylesheet" type="text/css" href="/themes/ProcoDefault/Content/print.css">
<link rel="stylesheet" type="text/css" href="/themes/ProcoDefault/Content/nav/superfish.css" media="screen">
<script type="text/javascript" src="/Scripts/hoverIntent.js"></script>
<script type="text/javascript" src="/Scripts/superfish.js"></script>
<script type="text/javascript">
// initialise plugins
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>
<div class="container shadowwrapper ">
<div class="row">
<div class="col-lg-12 col-md-12 ">
<div class="headermenu">
<nav role="navigation" class="navbar navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button data-target="#top-header-menu-proco" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="top-header-menu-proco" class="navbar-collapse collapse" style="height: 1px;">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li>
<a href="/books">Books
</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Computers
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/desktops">Desktops
</a>
</li>
<li>
<a href="/notebooks">Notebooks
</a>
</li>
<li>
<a href="/accessories">Accessories
</a>
</li>
<li>
<a href="/software-games">Software & Games
</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Electronics
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/camera-photo">Camera, photo
</a>
</li>
<li>
<a href="/cell-phones">Cell phones
</a>
</li>
</ul>
</li>
<li>
<a href="/apparel-shoes">Apparel & Shoes
</a>
</li>
<li>
<a href="/digital-downloads">Digital downloads
</a>
</li>
<li>
<a href="/jewelry">Jewelry
</a>
</li>
<li>
<a href="/gift-cards">Gift Cards
</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div><!-- /.container-fluid -->
</div>
</div>
</div>
</div>
</div>
<div class="background-wrapper">
<div class="#*master-wrapper-page*#">
<div class="#*master-wrapper-content*#">
<script type="text/javascript">
//<![CDATA[
//replace the first parameter with "true" to use popup notifications
AjaxCart.init(true, '.header-links .cart-qty', '.header-links .wishlist-qty', '#flyout-cart');
//]]>
</script>
<div class="ajax-loading-block-window" style="display: none">
<div class="loading-image">
</div>
</div>
<div class="white-background container shadowwrapper">
<div class="">
<div class="row">
<div class="col-md-3 ">
<div class="htmlcontent">
<div class="htmlcontent-body">
<div class="left-nav">
<ul>
<li><img src="/Content/Images/uploaded/HomePageLeft/glutenfree_promo.png" alt="" width="280" height="184"></li>
<li><img src="http://brookhavenmarket.com/Content/Images/uploaded/HomePageLeft/winegeek.jpg" alt="" width="265" height="185"></li>
<!-- <li><img width="280" height="184" src="/Content/Images/uploaded/HomePageLeft/glutenfree_promo.png" /></li> -->
<li><img src="/Content/Images/uploaded/HomePageLeft/lifetime_fitness_button.jpg" alt="" width="232" height="185"></li>
<!--<li><img src="/Content/Images/uploaded/HomePageLeft/catering_promo.jpg" height="184" width="338" /></li>--></ul>
</div>
</div>
</div>
<div class="clear">test
</div>
</div>
<div class="col-md-9 ">
<div class="">
<link rel="stylesheet" href="/themes/ProcoDefault/Content/flexslider/flexslider.css" type="text/css">
<script src="/Scripts/jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
slideshowSpeed: 5000
});
});
</script>
<div class="homepage_container">
<div id="fb-root" class=" fb_reset"><div style="position: absolute; top: -10000px; height: 0px; width: 0px;"><div><iframe name="fb_xdm_frame_http" frameborder="0" allowtransparency="true" scrolling="no" id="fb_xdm_frame_http" aria-hidden="true" title="Facebook Cross Domain Communication Frame" tabindex="-1" src="http://static.ak.facebook.com/connect/xd_arbiter/KFZn1BJ0LYk.js?version=41#channel=f2cbd788b4&origin=http%3A%2F%2Flocalhost%3A38451" style="border: none;"></iframe><iframe name="fb_xdm_frame_https" frameborder="0" allowtransparency="true" scrolling="no" id="fb_xdm_frame_https" aria-hidden="true" title="Facebook Cross Domain Communication Frame" tabindex="-1" src="https://s-static.ak.facebook.com/connect/xd_arbiter/KFZn1BJ0LYk.js?version=41#channel=f2cbd788b4&origin=http%3A%2F%2Flocalhost%3A38451" style="border: none;"></iframe></div></div><div style="position: absolute; top: -10000px; height: 0px; width: 0px;"><div></div></div></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="homepagebanners"> <div class="htmlcontent">
<div class="htmlcontent-body">
<div class="flexslider">
<ul class="slides">
<li class="flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; display: list-item; opacity: 0.347983469537255;"><img src="http://brookhavenmarket.com/Content/Images/uploaded/HomeBanners/Easter-Menu-banner.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img src="../../../Content/Images/uploaded/HomeBanners/4-16-2014-1.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img src="../../../Content/Images/uploaded/HomeBanners/4-16-2014-2.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img src="http://www.brookhavenmarket.com/Content/Images/uploaded/HomeBanners/2013_catering_banner.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img src="http://brookhavenmarket.com/Content/Images/uploaded/HomeBanners/gluten-free-banner.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: list-item; opacity: 0.652016530462745;" class=""><img src="../../../Content/Images/uploaded/HomeBanners/help_wanted.jpg" alt="" width="634" height="216"></li>
</ul>
<ol class="flex-control-nav flex-control-paging"><li><a class="flex-active">1</a></li><li><a class="">2</a></li><li><a class="">3</a></li><li><a class="">4</a></li><li><a class="">5</a></li><li><a class="">6</a></li></ol><ul class="flex-direction-nav"><li><a class="flex-prev" href="#">Previous</a></li><li><a class="flex-next" href="#">Next</a></li></ul></div>
</div>
</div>
</div>
<div class="homepagebottom"> <div class="htmlcontent">
<div class="htmlcontent-body">
<div class="homepageBlogContainer">
<p class="homepageBlogText"><span style="font-size: medium;"><strong><em>Easter Traditions with a Twist</em></strong></span></p>
<p>Easter is always a busy time at a food store ranking up there with the likes of Christmas and Thanksgiving as traditionally it’s a time when families gather together to share a meal. Not just any meal but what most would consider a feast. It’s a time when traditional foods that we have loved since childhood are planned, shopped for and prepared with great care and attention to detail. It’s a time when on most cases paper plates and plastic flatware are foregone in deference to Mom’s best china, crystal and silverware. Last week’s blog focused on our sweet tooth with suggested Easter Desserts. This week let’s concentrate on the main course....</p>
<p><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span lang="en-US">Okay, perhaps not. But we can still hope, can’t we?</span></span></span></p>
<p><span style="color: #800000;"><strong><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span lang="en-US"> ...</span></span></span><a style="font-size: small; font-family: Arial, sans-serif;" href="http://www.brookhavenmarket.com/blog"><span style="color: #800000;">read more</span></a></strong></span></p>
<div class="readmore"><img src="/Content/Images/uploaded/arrow.png" alt="" align="right"></div>
</div>
<div style="float: left;"><iframe style="width: 338px; height: 346px; overflow: hidden;" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBrookhaven-Marketplace%2F33148540039&width=340&colorscheme=light&show_faces=false&stream=true&header=true&height=346" width="320" height="240" frameborder="0" scrolling="no"></iframe></div>
</div>
</div>
</div>
<div class="clear">
</div>
<div class="clear">
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-wrapper">
<div class="container shadowwrapper">
<div class="row">
<div class="col-md-12">
<div class="footer ">
<div class="clear" style="height:1px"></div>
<img class="proco-logo" src="../themes/ProcoDefault/Content/images/proco_logo.png">
</div>
</div>
</div>
</div>
</div>
<div class="footer-disclaimer">
Copyright © 2014 Brookhaven Market. All rights reserved.
</div>
<div class="footer-storetheme">
</div>
</body></html>
I am using jquery-1.10.2.min.js. What could be the problem? There is showing no problem in console too. I already used navbar in many sites but never saw that kind of problem before. Please Help.

Bootstrap relies on jQuery but in your code you have presented the files for Bootstrap first. Change the order and it will work. Additionally you need to ensure your paths are correct as you seem to be missing the name of the theme.
As you mention in the comments, your code to include the scripts is:
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Themes/Content/bootstrap-3.2.0/js/bootstrap.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");
Simply change the order of the last 2 lines like this:
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");
Html.AppendScriptParts("~/Themes/ProcoDefault/Content/bootstrap-3.2.0/js/bootstrap.min.js");

We Keep Coding

JavaScript is the programming language of the Web.

Two scripts not working together - javascript

I've already found the mistake and it wasn't within the js file, but the html itself (I had various elements with the same ID and that's why the second script didn't work along with the first one). Thank you all for your help! Cheers.

Related

how to move the whole main-video-wrap div into video-list-Wrapping div?

Difficulty with CSS

How to make buttons inside columns equal in height on all devices?

Why jquery load page doesn't work in my page

Navbar collapse is not working in Bootstrap 3.2

Categories

Resources