jQuery file conflict - javascript

I am making a test website for a future project and I am having jQuery issues. It is a static HTML5 website with a social widget, when I remove one of the jQuery lines, the site loses its styling and the widget looks pretty. When I add that jQuery I removed, the site will look good, but the widget will look really bad. How can I fix this conflict issue? I will add the code to the main website on here:
<!DOCTYPE HTML>
<html><head>
<title>test site</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!-- Social Widget Goodies Start -->
<link rel="stylesheet" type="text/css" href="css/dcsmt.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="inc/js/jquery.plugins.js"></script>
<script type="text/javascript" src="inc/js/jquery.site.js"></script>
<script type="text/javascript" src="js/jquery.social.media.tabs.1.7.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#social-tabs').dcSocialTabs({
widgets: 'twitter,facebook',
twitterId: '20782546',
facebookId: '69431101263',
fblikeId: '69431101263',
fbrecId: 'https://www.facebook.com/ArkansasState',
tweetId: '20782546',
autoClose: true,
facebook: {
text: 'content'
}
});
});
</script>
<!-- Social Widget Goodies End... -->
</head>
<body class="homepage">
<!-- Header -->
<div id="header-wrapper">
<div id="header" class="container">
<!-- Logo -->
<h1 id="logo"><img style="margin-top:10px;" src="images/logo_tiny.png" width="147" height="50" alt="logo"></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li>
Main Menu
<ul>
<li>Lorem ipsum dolor</li>
<li>Magna phasellus</li>
<li>Etiam dolore nisl</li>
<li>
Phasellus consequat
<ul>
<li>Lorem ipsum dolor</li>
<li>Phasellus consequat</li>
<li>Magna phasellus</li>
<li>Etiam dolore nisl</li>
</ul>
</li>
<li>Veroeros feugiat</li>
</ul>
</li>
<li>Link#01</li>
<li class="break">Link#02</li>
<li>Link#03</li>
</ul>
</nav>
</div>
<!-- Hero -->
<section id="hero" class="container">
<header>
<h2>ASTATE EMERGENCY PORTAL
<br/>
our main website is currently down</h2>
</header>
<p>Please scroll down and use the links provided in this portal
to access external applications like<br> e-mail, blackboard, etc. etc.</p>
<ul class="actions">
<li>www.astate.edu</li>
</ul>
</section>
</div>
<!-- Features 1 -->
<div class="wrapper">
<div class="container">
<div class="row">
<section class="6u feature">
<div class="image-wrapper first">
<img src="images/pic01.jpg" alt="" />
</div>
<header>
<h2>For Students<br />
Access your E-mail Account Here</h2>
</header>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur vel
sem sit dolor neque semper magna. Lorem ipsum dolor sit amet consectetur et sed
adipiscing elit. Curabitur vel sem sit.</p>
<ul class="actions">
<li>Enter</li>
</ul>
</section>
<section class="6u feature">
<div class="image-wrapper">
<img src="images/pic02.jpg" alt="" />
</div>
<header>
<h2>For Faculty & Staff<br />
Access your E-mail Account here</h2>
</header>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur vel
sem sit dolor neque semper magna. Lorem ipsum dolor sit amet consectetur et sed
adipiscing elit. Curabitur vel sem sit.</p>
<ul class="actions">
<li>Enter</li>
</ul>
</section>
</div>
</div>
</div>
<!-- Promo -->
<div id="promo-wrapper">
<section id="promo">
<h2>Live social updates</h2>
Do not press
</section>
</div>
<!-- Features 2 -->
<div class="wrapper">
<section class="container">
<header class="major">
<h2>Sed magna consequat lorem curabitur tempus</h2>
<p>Elit aliquam vulputate egestas euismod nunc semper vehicula lorem blandit</p>
</header>
<div class="row features">
<section class="4u feature">
<div class="image-wrapper first">
<img src="images/pic03.jpg" alt="" />
</div>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur
vel sem sit dolor neque semper magna lorem ipsum.</p>
</section>
<section class="4u feature">
<div class="image-wrapper">
<img src="images/pic04.jpg" alt="" />
</div>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur
vel sem sit dolor neque semper magna lorem ipsum.</p>
</section>
<section class="4u feature">
<div class="image-wrapper">
<img src="images/pic05.jpg" alt="" />
</div>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur
vel sem sit dolor neque semper magna lorem ipsum.</p>
</section>
</div>
<ul class="actions major">
<li>Elevate my awareness</li>
</ul>
</section>
</div>
<!-- Footer -->
<div id="footer-wrapper">
<div id="footer" class="container">
<header class="major">
<h2>Keep in touch with us</h2>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur vel sem sit<br />
dolor neque semper magna lorem ipsum feugiat veroeros lorem ipsum dolore.</p>
</header>
<div class="row">
<section class="6u">
<form method="post" action="#">
<div class="row collapse-at-2 half">
<div class="6u">
<input name="name" placeholder="Name" type="text" />
</div>
<div class="6u">
<input name="email" placeholder="Email" type="text" />
</div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row half">
<div class="12u">
<ul class="actions">
<li><input type="submit" value="Send Message" /></li>
<li><input type="reset" value="Clear form" /></li>
</ul>
</div>
</div>
</form>
</section>
<section class="6u">
<div class="row collapse-at-2 flush">
<ul class="divided icons 6u">
<li class="icon fa-twitter"><span class="extra">twitter.com/</span>untitled</li>
<li class="icon fa-facebook"><span class="extra">facebook.com/</span>untitled</li>
<li class="icon fa-dribbble"><span class="extra">dribbble.com/</span>untitled</li>
</ul>
<ul class="divided icons 6u">
<li class="icon fa-instagram"><span class="extra">instagram.com/</span>untitled</li>
<li class="icon fa-youtube"><span class="extra">youtube.com/</span>untitled</li>
<li class="icon fa-pinterest"><span class="extra">pinterest.com/</span>untitled</li>
</ul>
</div>
</section>
</div>
</div>
<div id="copyright" class="container">
<ul class="menu">
<li>©2014 - ASTATE Emergency Portal. All rights reserved.</li>
</ul>
</div>
</div>
</body>
<div id="social-tabs"></div>
</html>


This is caused by the ordering of your scripts. Rather than just removing js/jquery.min.js, you should move your other jQuery script to this position:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
...
...otherwise the JavaScript files located above this jQuery include's current position may not wait for jQuery to load before attempting to execute then not-yet-present jQuery calls.

Related

data-filter and displaying more than one product

I have a double product filter, but they are working erratically, sometimes they work together and sometimes not, it should clean the content that is not in the filter and show the right one, but in addition to showing the wrong content of the filter it also show the correct,is there a simpler way to ralizar this filter using arrays?
$('.controll').on('click', 'li', function() {
$(this).parent().find('li').removeClass('active');
$(this).addClass('active');
gridFilter();
});
function gridFilter() {
var arr = [];
$('li.active').each(function() {
if (!$(this).attr('data-filter')) {
$(this).siblings('li').each(function() {
arr.push($(this).attr('data-filter'));
});
else {
arr.push($(this).attr('data-filter'));
console.log('arr: ' + arr);
}
});
$('.grid').each(function() {
var thisClassArr = $(this).attr('class').split(' '),
YouShallNotPass = true;
for (i in thisClassArr) {
if ($.inArray(thisClassArr[i], arr) > -1) {
console.log('ok ' + thisClassArr[i]);
YouShallNotPass = false;
break;
}
}
if (!YouShallNotPass) {
$(this).show(500);
else {
$(this).hide(0);
}
});
};
<script src="https://kit.fontawesome.com/8d610b99df.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css" crossorigin="anonymous">
<!-- Bar Menu Top RED -->
<section class="top-menu">
<div class="container">
c---------------------INFO BAR RED DESKTOP------------------->
<div class="row justify-content-around desktop">
<div class="col-3">
<p><i class="fa-regular fa-clock"></i>Segundas às sextas das 8h às 18h.</p>
</div>
<div class="col-5 ">
<p><i class="fa-solid fa-headset"></i>Fale com nosso time de especialistas: <b>0800 979 5406</b></p>
</div>
<div class="col-4">
<div class="row p-0 m-0">
<div class="col-6 ">
<i class="fa-solid fa-arrow-right-from-bracket"></i>Área do usuário</b>
</div>
<div class="col-6 ">
<i class="fa-solid fa-user"></i>Cadastre-se</b>
</div>
</div>
</div>
</div>
<!--row - desktop-->
<!-----------------------INFO BAR RED MOBILE------------------->
<div class="row align-items-center mobile">
<div class="col-4 p-0">
<p><i class="fa-solid fa-headset"></i> <b>0800 979 5406</b></p>
</div>
<div class="col-4 p-0">
<p><i class="fa-solid fa-arrow-right-from-bracket"></i>Área do usuário</b>
</p>
</div>
<div class="col-4 p-0">
<p><i class="fa-solid fa-user"></i>Cadastre-se</b>
</p>
</div>
</div>
<!--row - mobile-->
</div>
<!--container-fluid-->
</section>
<!--top-menu-->
Menu Main -->
<header id="header">
<div class="container">
<div class="row align-items-center justify-content-center ">
<a class="col-3 col-md-2 order-1 " id="logo" href="index.html">
<img src="assets/image/logo-SIC.png" alt="">
</a>
<nav class="col-3 col-md-7 order-3 order-lg-2 " id="nav">
<button aria-label="Abrir Menu" id="btn-mobile" aria-haspopup="true" aria-controls="menu" aria-expanded="false">
<span id="hamburger"></span>
</button>
<ul id="menu" role="menu">
<li>Home</li>
<li>Certificados Digitais</li>
<li>Suporte</li>
<li>Unidades</li>
<li>Contato</li>
<li>Blog</li>
</ul>
</nav>
<div class="col-6 col-md-3 order-2 order-md-3">
<div class="row">
<div class="col-md-2 align-self-center icon-cart"><i class="fa-solid fa-cart-shopping"></i></div>
<div class="col-12 col-lg-10">
<button>Meu Certificado</button>
</div>
</div>
</div>
</div>
</div>
</header>
Banner Page -->
<section class="banner-page">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-lg-6">
<h1>O que é um <br> <b>certificado e-CNPJ?</b></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
</div>
</div>
</div>
</section>
Filter -->
<section class="filter">
<div class="container">
<div class="row justify-content-start ">
<div class=" controll col-12 col-md-6">
<span>Escolha por Validade</span>
<ul class=" ">
<li data-filter="" class="active">Todos</li>
<li data-filter="meses-12">12 Meses</li>
<li data-filter="meses-24">24 Meses</li>
<li data-filter="meses-36">36 Meses</li>
</ul>
</div>
<div class=" controll col-12 col-md-6">
<span>Escolha por Tipo</span>
<ul class="">
<li data-filter="" class="active">Todos</li>
<li data-filter="cartao">Cartão</li>
<li data-filter="token">Token</li>
<li data-filter="cartaoleitora">Cartão + Leitora</li>
<li data-filter="sem">Sem Mídia</li>
</ul>
</div>
</div>
<div class="row justify-content-start">
<div class=" grid meses-36 sem col-12 col-md-4">
<div class="box-certificado ">
<h4>36 meses / Sem mídias</h4>
<img src="assets/image/produto_a1.png" alt="Certificado A1">
<span class="discount">DE R$160,00</span>
<p class="price">R$ 120</p>
<p class="desc">Certificado digital indicado para <b>pessoa física.</b></p>
<ul class="itens">
<li>Validade de até 3 anos </li>
<li> Parcele em até 12x</li>
<li>Renovação Online</li>
<li>Suporte dedicado</li>
</ul>
Comprar
<blockquote>Informações sobre segurança.</blockquote>
</div>
</div>
<div class=" grid meses-24 col-12 col-md-4">
<div class="box-certificado ">
<h4>24 meses</h4>
<img src="assets/image/produto_a1.png" alt="Certificado A1">
<span class="discount">DE R$160,00</span>
<p class="price">R$ 120</p>
<p class="desc">Certificado digital indicado para <b>pessoa física.</b></p>
<ul class="itens">
<li>Validade de até 3 anos </li>
<li> Parcele em até 12x</li>
<li>Renovação Online</li>
<li>Suporte dedicado</li>
</ul>
Comprar
<blockquote>Informações sobre segurança.</blockquote>
</div>
</div>
<div class=" grid cartao col-12 col-md-4">
<div class="box-certificado ">
<h4>Cartão</h4>
<img src="assets/image/produto_a1.png" alt="Certificado A1">
<span class="discount">DE R$160,00</span>
<p class="price">R$ 120</p>
<p class="desc">Certificado digital indicado para <b>pessoa física.</b></p>
<ul class="itens">
<li>Validade de até 3 anos </li>
<li> Parcele em até 12x</li>
<li>Renovação Online</li>
<li>Suporte dedicado</li>
</ul>
Comprar
<blockquote>Informações sobre segurança.</blockquote>
</div>
</div>
<div class=" grid meses-12 col-12 col-md-4">
<div class="box-certificado ">
<h4>12 meses</h4>
<img src="assets/image/produto_a1.png" alt="Certificado A1">
<span class="discount">DE R$160,00</span>
<p class="price">R$ 120</p>
<p class="desc">Certificado digital indicado para <b>pessoa física.</b></p>
<ul class="itens">
<li>Validade de até 3 anos </li>
<li> Parcele em até 12x</li>
<li>Renovação Online</li>
<li>Suporte dedicado</li>
</ul>
Comprar
<blockquote>Informações sobre segurança.</blockquote>
</div>
</div>
<div class=" grid token col-12 col-md-4">
<div class="box-certificado ">
<h4>Token</h4>
<img src="assets/image/produto_a1.png" alt="Certificado A1">
<span class="discount">DE R$160,00</span>
<p class="price">R$ 120</p>
<p class="desc">Certificado digital indicado para <b>pessoa física.</b></p>
<ul class="itens">
<li>Validade de até 3 anos </li>
<li> Parcele em até 12x</li>
<li>Renovação Online</li>
<li>Suporte dedicado</li>
</ul>
Comprar
<blockquote>Informações sobre segurança.</blockquote>
</div>
</div>
<div class=" grid meses12 token col-12 col-md-4">
<div class="box-certificado ">
<h4>12 meses / Token</h4>
<img src="assets/image/produto_a1.png" alt="Certificado A1">
<span class="discount">DE R$160,00</span>
<p class="price">R$ 120</p>
<p class="desc">Certificado digital indicado para <b>pessoa física.</b></p>
<ul class="itens">
<li>Validade de até 3 anos </li>
<li> Parcele em até 12x</li>
<li>Renovação Online</li>
<li>Suporte dedicado</li>
</ul>
Comprar
<blockquote>Informações sobre segurança.</blockquote>
</div>
</div>
</div>
</div>
</div>
</section>
certificado -->
<section class="certificado">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-lg-7">
<p>Escolha o tipo de certificado</p>
<div class="box-red row align-items-center">
<div class="col-2 "><a class="" href="">e-CNPJ</a> </div>
<div class="col-2">e-CPF </div>
<div class="col-2">NF-e </div>
<div class="col-2">PJ-e </div>
<div class="col-2">e-Profissional </div>
<div class="col-2">CT-e </div>
</div>
</div>
</div>
</div>
</section>
<!--Step Compra-->
<section class="step">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-12">
<h2>Passo a passo de <b>compra</b></h2>
</div>
<!--Step Desktop-->
<div class="col-12 desktop">
<div class="row line-progress">
<div class="col-12 col-lg-4">
<h3>Escolha o seu certificado</h3>
<img src="./assets/image/search.png" alt="Escolha o seu certificado">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</p>
<button>Escolha o seu</button>
</div>
<div class="col-12 col-lg-4">
<h3>Agende sua avaliação</h3>
<img src="./assets/image/checklist.png" alt="Escolha o seu certificado">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</p>
<button>Documentação</button>
</div>
<div class="col-12 col-lg-4">
<h3>Setup e instalação</h3>
<img src="./assets/image/setup.png" alt="Escolha o seu certificado">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</p>
<button>Agendamento</button>
</div>
</div>
</div>
<!-- end Step Desktop-->
<!--Step mobile-->
<div class="col-12 mobile">
<div class="row flex-nowrap line-progress">
<div class="col-12 col-lg-4">
<h3>Escolha o seu <br> certificado</h3>
<img src="./assets/image/primeiro.png" alt="Escolha o seu certificado">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</p>
<button>Escolha o seu</button>
</div>
<div class="col-12 col-lg-4">
<h3>Agende sua <br> avaliação</h3>
<img src="./assets/image/segundo.png" alt="Escolha o seu certificado">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</p>
<button>Documentação</button>
</div>
<div class="col-12 col-lg-4">
<h3>Setup e <br> instalação</h3>
<img src="./assets/image/terceiro.png" alt="Escolha o seu certificado">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</p>
<button>Agendamento</button>
</div>
</div>
</div>
<!-- end Step mobile-->
</div>
</div>
</section>
<!--Step Compra-->
<!--CTA Home-->
<section class="cta-home">
<div class="container">
<h3>Qual certificado escolher?</h3>
<p>Não se preocupe, nosso time de especialistas tem a resposta.</p>
<button>Fale Conosco</button>
</div>
</section>
<!--CTA Home-->
<!--FAQ-->
<section class="faq">
<div class="container">
<h3>Perguntas <b>frequentes</b></h3>
<p>Preparamos algumas perguntas e respotas para sanar as suas prencipais dúvidas sobre o assunto.</p>
<div class="accordion">
<div class="accordion-item">
<button id="accordion-button-1" aria-expanded="false"><span class="accordion-title">O que é Certificado Digital?<span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-2" aria-expanded="false"><span class="accordion-title">Pra que ser Certificado Digital</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-3" aria-expanded="false"><span class="accordion-title">Como Obter Certificado Digital</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-4" aria-expanded="false"><span class="accordion-title">Quanto custa Certificado Digital?</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-5" aria-expanded="false"><span class="accordion-title">Quais os tipos Certificado Digital?</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-5" aria-expanded="false"><span class="accordion-title">Qual a validade Certificado Digital</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-5" aria-expanded="false"><span class="accordion-title">Quem precisa Certificado Digital</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
</div>
</div>
</section>
<!--Icones Contato-->
<section class="icones-contato">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-lg-4">
<img src="assets/image/phone.png" alt="">
<p><b>0800 979 5406</b> Fale conosco e tire suas dúvidas através do nosso 0800.
</p>
</div>
<div class="col-12 col-lg-4">
<img src="assets/image/whatsapp.png" alt="">
<p><b>(27) 99979-0351</b> Fale conosco, a SIC Digital também está no WhatsApp.
</p>
</div>
<div class="col-12 col-lg-4">
<img src="assets/image/chat.png" alt="">
<p><b>Live Chat</b> tilize nosso chat ao vivo para tirar suas dúvidas.
</p>
</div>
</div>
</div>
</section>
<!--FOOTER-->
<footer class="footer">
<div class="container">
<div class="row ">
<div class="col-12 col-lg-4 info-footer">
<img class="logo-footer" src="assets/image/logo-branco.png" alt="SIC">
<p>
SIC Certificação Digital Ltda-ME CNPJ: 18.178.945/0001-63 Telefone: 0800 979 5406 / 27 2104-1578
</p>
<p>
Endereço: Av. N. S. dos Navegantes, 451, Ed. Petro Tower, lj 20 - Enseada do Suá - Vitória / ES - 29050305
</p>
<p>
Email: contato#sicdigital.com.br Todos os direitos reservados.
</p>
<div class="row
justify-content-center justify-content-lg-start instituicoes">
<div class=" col-2 col-lg-4">
<img src="assets/image/icp-logo.png" alt="ICP">
</div>
<div class="col-2 col-lg-4">
<img src="assets/image/logo-receita.png" alt="Receita Federal">
</div>
</div>
</div>
<!--COL- INFO FOOTER-->
<div class="col-12 col-lg-4 info-endereco ">
<h4>Locais de atendimento</h4>
<ul>
<li class="icon-map"> <b>Cariacica</b> - Espirito Santo </li>
<li class="icon-map">
<b>São Mateus</b> - Espirito Santo
</li>
<li class="icon-map"> <b>Serra</b> - Espirito Santo </li>
<li class="icon-map"> <b>Vila Velha</b> - Espirito Santo </li>
<li class="icon-map">
<b>Vitória</b> - Espirito Santo
</li>
<li class="icon-map">
<b>Vitória</b> - Espirito Santo
</li>
<li class="icon-map"> <b>Rio de Janeiro</b> -RJ </li>
</ul>
</div>
<div class="col-12 col-lg-4 info-institucional">
<h4>Institucional</h4>
<div>
<a href="repositorio.html"><b>Repositório</b>
Documentação da AC SIC</a>
</div>
<div>
<a href="politica-de-privacidade.html"><b>Política de Privacidade</b>
Seus dados estão seguros.</a>
</div>
<div>
<a href="plano-de-garantia.html"><b>Política de Garantia</b>
Conheça seus direitos.</a>
</div>
<div>
<b>Revogação</b> Informações sobre a revogação do seu certificado.
</div>
<h4 class="pay">Formas de Pagamento</h4>
<img src="assets/image/bandeiras_cartoes.png" alt="Formas de Pagamento">
</div>
</div>
</div>
</footer>
<div class="copy">
<div class="container">
<p>©️ Copyright 2022 - Todos os direitos reservados. SIC Certificação Digital LTDA-ME</p>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<script src="assets/js/isotope.pkgd.js.js"></script>
<script src="assets/js/main.js"></script>
I tried to make the two filters work perfectly together, in some elements it applies display:none and in others it doesn't

Why at extra small screen size, my collapse button doesn't open when i click on it?

<!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">
<title>Oxygen</title>
<link href="https://fonts.googleapis.com/css?family=Hind+Siliguri|Mukta" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle=" collapse" data-target="#myNav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/logo.png"> </a>
</div>
<div class="collapse navbar-collapse" id="myNav">
<ul class="nav navbar-nav navbar-right">
<li > HOME </li>
<li >SERVICE</li>
<li >ABOUT US</li>
<li >PORTFOLIO</li>
<li>TEAM</li>
<li >FEATURES</li>
<li >BLOG</li>
<li class="active">CONTACT</li>
</ul>
</div>
</div>
</nav>
<div id="main-content-contact" class="container-fluid">
<h2 class="text-center">Contact Us </h2>
<div id="brief-overview" class="text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus luctus accumsan tortor posuere ac ut consequat semper. Varius duis at consectetur lorem. Ipsum a arcu cursus vitae
</div>
<div class="row">
<div id="user-info" class="col-md-6 col-sm-6 col-xs-6">
<form>
<input class="nameEmail nameEmail1" type="text" name="fName" placeholder="Name">
<input class="nameEmail nameEmail2" type="email" name="emailAddress" placeholder="Email Address">
<br>
<input type="text" name="Subject" placeholder="Subject">
<br>
<input id="enterMessage" type="text" name="Message" placeholder="Enter Your Message">
<br>
<input id="submit-colors" type="submit" value="Send Now">
</form>
</div>
<div id="company-info" class="col-md-6 col-sm-6 col-xs-12">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus luctus accumsan tortor posuere
</div>
<div id="contact-info">
<span class="fas fa-map-marker-alt"></span> Address: 2400 South Avenue A<br>
<span class="fas fa-phone fa-rotate-90"></span> Phone: +928 336 2000<br>
<span class="fas fa-envelope"></span> Email: support#oxygen.com<br>
<span class="fas fa-globe-americas"></span> Website: wwww.sitename.com
</div>
</div>
</div>
</div>
<footer id="footer-area" class="panel-footer">
<div class="container text-center">
<img src="images/logo.png" alt="the brand photo">
<div id="socail-container">
<div class="fab fa-dribbble"></div>
<div class="fab fa-facebook-f"></div>
<div class="fab fa-instagram"></div>
<div class="fab fa-linkedin-in"></div>
<div class="fab fa-tumblr-square"></div>
<div class="fab fa-twitter"></div>
<div class="fas fa-envelope"></div>
</div>
</div>
</footer>
<div id="copyright" class="container-fluid">
<span >© 2019 Oxygen Theme.</span>
<span >Designed by Themeum</span>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
I use bootstrap 3 in my project, and when i zoom out the browser window, the collapse button appears but when i click on it, nothing happens
taking into consideration,i'm putting this piece of code at the very end of the body element
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
and you can see the entire html document by clicking on
here!
or you can see it directly at the following

So there are two issues that i found, first being your resources are not linked properly. Please check again your js files are properly put with the same names under the js directory.
Other easier way i would suggest is to use cdn. Use these three cdn
<!-- bootstrap-3 cdn -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
put these three links in your document's head section in this same order.
The second issue is that in the "data-toggle" attribute of your toggle button there is a space before the id of the collapsible division. Remove that space.
<button type="button" class="navbar-toggle collapsed" data-toggle=" collapse" data-target="#myNav">
Here is the working pen of your code.

Multiple tabs in same page using jQuery

I'm working on tabs I want multiple tabs on the same page and I don't want to change id's for the next tab because I have to pass dynamically. I tried using id same id's which are the conflict with each other. Can anyone suggest me. So, far I tried.
function atscTabs() {
$('.at-tabs-nav__item').click(function() {
var tab = $(this).data('tab');
$('.at-tab-__title_text').removeClass('current');
$('.at-tabs-nav__item').removeClass('current');
$(this).addClass('current');
$("#" + tab).addClass('current');
})
}
atscTabs();
.current {
color: white;
padding: 5px;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="at-tabs-c2a3d74" class="at-tabs">
<div class="at-tabs-nav">
<div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text current" data-tab="tab-1">Tab #1</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text" data-tab="tab-2">Tab #2</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text" data-tab="tab-3">Tab #3</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-tabs-content">
<div class="at-tabs-content__item" id="tab-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item" id="tab-2">
ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item" id="tab-3">
I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
</div>
</div>

Hi i have created small script to solve your problem. I hope this will help.
function atscTabs() {
$('.at-tabs').each(function(index, item){
var $mainContainer = $(this);
var $menuContainer = $(this).find('.at-tabs-nav__item');
var $label = $(this).find('.at-tab-__title_text');
var $content =$(this).find('.at-tabs-content__item');
$content.hide();
$label.each(function(idx, ele){ $(this).attr('data-target', idx)});
$($menuContainer[0], $label[0]).addClass('current');
$($content[0]).show();
$menuContainer.click(function(ele){
$($mainContainer).find('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-tab-__title_text').addClass('current');
$($mainContainer)
.find('.at-tabs-content .at-tabs-content__item')
.hide()
.eq(parseInt($(this).find('[data-target]')
.attr('data-target'))).show();
});
});
}
atscTabs();
Let me know if still need help. Avoid using one id multiple places.
FYI: https://stackoverflow.com/a/14446052/5011051

bx slider slider last slide always some part hidden?

Hi i m using bxslider plugin and used to min and max slide
but my problum is my slider allways shwo to last slide some part is hidden how to resolve it. i have try to some time but not find any solution my code is
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>TIL </title>
<!-- Google will often use this as its description of your page/site. Make it good. -->
<meta name="google-site-verification" content="">
<!-- Speaking of Google, don't forget to set your site up: http://google.com/webmasters -->
<meta name="author" content="">
<meta name="Copyright" content="Copyright 2015. All Rights Reserved.">
<meta name="DC.title" content="Project Name">
<meta name="DC.subject" content="What you're about.">
<meta name="DC.creator" content="Who made this site.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Bootstrap Core CSS -->
<link href="http://www.buylic.in/css/bootstrap.min.css" rel="stylesheet" />
<!-- Custom CSS -->
<link href="http://www.buylic.in/css/modern-business.css" rel="stylesheet" />
<!-- Custom Fonts -->
<link href="http://www.buylic.in/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Contact form -->
<link rel="stylesheet" type="text/css" />
<!-- Custom CSS -->
<link href="http://www.buylic.in/css/jquery.bxslider.css" rel="stylesheet" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="home">
<!-- Navigation -->
<div class="">Profolio</div>
<!-- Header End here -->
<!-- Body Start here -->
<!-- Header Carousel -->
<!-- Page Content -->
<div class="container">
<!-- Marketing Icons Section -->
<div class="row">
<div class="col-lg-9">
<div class="row">
asdf asd fasd fasd fasd fasd
</div>
</div>
<div class="col-md-3">
============= ------------
</div>
</div>
<!-- /.row -->
<hr>
<!-- Testimonial Section -->
<h2>Testimonials</h2>
<div class="well">
<ul class="bxslider">
<li>
<div class="testimonil">
<h5>Rakesh Kumar</h5>
<blockquote class="quotes">
<p>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictorut dolore ligulate ameti dapi licdu nt mtsent lusto dolor ltisim comme. Mes cuml dia sed inertio lacus ut eniascet ingerto aliiqt sit eism odictor.
</p>
</blockquote>
</div>
</li>
<li>
<div class="testimonil">
<h5>Vijay Kumar2</h5>
<blockquote class="quotes">
<p>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictorut dolore ligulate ameti dapi licdu nt mtsent lusto dolor ltisim comme. Mes cuml dia sed inertio lacus ut eniascet ingerto aliiqt sit eism odictor.
</p>
</blockquote>
</div>
</li>
<li>
<div class="testimonil">
<h5>Rohit Kumar3</h5>
<blockquote class="quotes">
<p>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictorut dolore ligulate ameti dapi licdu nt mtsent lusto dolor ltisim comme. Mes cuml dia sed inertio lacus ut eniascet ingerto aliiqt sit eism odictor.
</p>
</blockquote>
</div>
</li>
<li>
<div class="testimonil">
<h5>Suresh Kumar11</h5>
<blockquote class="quotes">
<p>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictorut dolore ligulate ameti dapi licdu nt mtsent lusto dolor ltisim comme. Mes cuml dia sed inertio lacus ut eniascet ingerto aliiqt sit eism odictor.
</p>
</blockquote>
</div>
</li>
<li>
<div class="testimonil">
<h5>Ravi Kumar22</h5>
<blockquote class="quotes">
<p>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictorut dolore ligulate ameti dapi licdu nt mtsent lusto dolor ltisim comme. Mes cuml dia sed inertio lacus ut eniascet ingerto aliiqt sit eism odictor.
</p>
</blockquote>
</div>
</li>
<li>
<div class="testimonil">
<h5>Rakesh Kumar33</h5>
<blockquote class="quotes">
<p>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictorut dolore ligulate ameti dapi licdu nt mtsent lusto dolor ltisim comme. Mes cuml dia sed inertio lacus ut eniascet ingerto aliiqt sit eism odictor.
</p>
</blockquote>
</div>
</li>
</ul>
</div> </div>
<!-- /.container -->
<!-- =========================================================================== -->
<!-- =========================================================================== -->
<!-- Footer here -->
<!-- Footer here -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<hr />
<ul class="footerLinking">
<li>Home</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-12">
Rohit azad
</div>
</div>
</div>
</footer>
<!-- Footer here end -->
<!-- jQuery -->
<script src="http://www.buylic.in/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="http://www.buylic.in/js/bootstrap.min.js"></script>
<script src="http://www.buylic.in/js/jquery.bxslider.min.js"></script>
<!-- Contact form -->
<script >
$(document).ready(function(){
$('.bxslider').bxSlider({
controls: false,
minSlides: 1,
maxSlides: 3,
slideWidth: 300,
slideMargin: 10
});
});
</script>
<script ></script>
</body>
</html>

just put this in your css
.bx-wrapper {
max-width: 930px!important;
}

That's because the two wrapping divs around ul.bxslider,that are generated by the BXslider plugin, have 5px border around them each set in the css, these borders are substracted from the overall calculated viewport of a slider - which is in your case 920px (3x300px + 2x10px margins), causing the last image not to be seen completely. If you unset these borders, your slider will fit just perfectly (on a large screen)
demo 1
alternatively, you can change the box-sizing of these divs to "content-box" in order there borders are not included into the total width.
.bx-wrapper, .bx-viewport {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.bx-viewport{
box-shadow:none !important;
}
Demo 2

changing pictures and content in a js slider

I have this slider on my website, I would like to learn how to change the pictures and to edit the content on my own?, I had seeing some videos but everyone work in a different way, so I would like to work for this specific example. This one is part of my own template,
<div class="slider-container">
<div class="container">
<div class="row">
<div class="span12">
<div class="slider_block">
<script type="text/javascript" src="{{skin url=''}}js/camera.js"></script>
<script type="text/javascript">
/* index slider */
jQuery(function(){
jQuery('#camera_wrap').camera({
alignmen: 'topCenter',
height: '57.179%',
minHeight: '134px',
loader : false,
pagination: false,
fx: 'simpleFade',
navigationHover:false,
thumbnails: false,
playPause: false
});
});
</script>
<div class="fluid_container">
<div class="camera_wrap camera_orange_skin" id="camera_wrap">
<div data-src="{{skin url=''}}images/slider_pic1.jpg" data-link="carpet-bags.html">
<div class="camera_caption fadeFromLeft">
<div class="right_slider_side slide1">
<div class="sl_row1">Summer</div>
<div class="sl_row2">sale</div>
<div class="sl_row3">Get up to</div>
<div class="sl_row4">35<span><i>%</i>off</span><strong>*</strong></div>
<div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
</div>
</div>
</div>
<div data-src="{{skin url=''}}images/slider_pic2.jpg" data-link="handbags.html">
<div class="camera_caption fadeFromLeft">
<div class="right_slider_side slide2">
<div class="sl_row1">Free</div>
<div class="sl_row2">Shipping</div>
<div class="sl_row3">on orders over</div>
<div class="sl_row4"><i>$</i>65<strong>*</strong></div>
<div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
</div>
</div>
</div>
<div data-src="{{skin url=''}}images/slider_pic3.jpg" data-link="laptop-bags.html">
<div class="camera_caption fadeFromLeft">
<div class="right_slider_side slide3">
<div class="sl_row1">Clearance</div>
<div class="sl_row2">sale</div>
<div class="sl_row3">Get up to</div>
<div class="sl_row4">75<span><i>%</i>off</span><strong>*</strong></div>
<div class="sl_row5"><span>*</span> Lorem ipsum dolor sit amet conse ctetur adipisicing elit</div>
</div>
</div>
</div>
</div>
</div>
<div class="banners_col">
<div class="tbanner banner1">
<a href="{{store direct_url="brands/piel-leather.html"}}">
<div class="b_holder">
<h2>Top Brands</h2>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor.</p>
<span class="ban_shop_now">Shop now!</span>
</div>
<img src="{{skin url=''}}images/banner1.jpg" alt="" />
</a>
</div>
<div class="tbanner banner2">
<a href="{{store direct_url="brands/vitalio-vera.html"}}">
<div class="b_holder">
<h2>New Arrivals</h2>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor.</p>
<span class="ban_shop_now">Shop now!</span>
</div>
<img src="{{skin url=''}}images/banner2.jpg" alt="" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Categories

Resources