I'm working on tabs here multiple/nested tabs on the same page my code is working fine current class also added data-target attribute also working fine. The problem is on Click function might be I'm not targetting element properly. this children() I used because I have multiple/nested tabs on same page Can anyone suggest me what might be the issue here tabs are not changing click function not working properly
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var tab_item = $(this).find('.at-tab__item');
var tab_item_title = $(this).find('.at-title__text');
var tab_content = $(this).find('.at-content__item');
tab_content.hide();
//adding data attribute
tab_item_title.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$(tab_item[0], tab_item_title[0]).addClass('current');
$(tab_content[0]).show();
console.log('test');
//Display current tab content
$(this).children('.at-tab-wrapper').children('.at-tab__item').click(function(ele) {
//debugger;
$(this).closest('.at-tabs').children('.at-tab-wrapper').children('.current').removeClass('current').children('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-title__text').addClass('current');
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.at-tab__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tab-wrapper {
display: flex;
padding: 28px 0px;
}
.at-title__text {
text-decoration: none;
font-size: 18px;
color: black;
}
.current .at-title__text {
color: #fff;
}
.at-tab__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-content-wrapper {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
<div>
<div class="at-tab-wrapper">
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #1</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #2</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #3</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-content-wrapper">
<div class="at-content__item">
<p>Tab Content dfdfd</p>
</div>
<div class="at-content__item">
<p>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.</p>
</div>
<div class="at-content__item">
<p>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.</p>
</div>
</div>
</div>
hi i fixed your click issue
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var tab_item = $(this).find('.at-tab__item');
var tab_item_title = $(this).find('.at-title__text');
var tab_content = $(this).find('.at-content__item');
tab_content.hide();
//adding data attribute
tab_item_title.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$(tab_item[0], tab_item_title[0]).addClass('current');
$(tab_content[0]).show();
console.log('test');
//Display current tab content
$('.at-tab__item').click(function(ele) {
//debugger;
$('.at-tab__item').removeClass('current');
$(this).addClass('current');
$(this).find('.at-title__text').addClass('current');
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.at-tab__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tab-wrapper {
display: flex;
padding: 28px 0px;
}
.at-title__text {
text-decoration: none;
font-size: 18px;
color: black;
}
.current .at-title__text {
color: #fff;
}
.at-tab__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-content-wrapper {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
<div>
<div class="at-tab-wrapper">
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #1</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #2</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #3</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-content-wrapper">
<div class="at-content__item">
<p>Tab Content dfdfd</p>
</div>
<div class="at-content__item">
<p>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.</p>
</div>
<div class="at-content__item">
<p>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.</p>
</div>
</div>
</div>
Related
I have a window that can be opened by clicking a button using javascript. The window cannot be closed by clicking on the inside of the window, and the window can only be closed by clicking on the outside of the window. At present, I always grab e.target.className to judge whether the clicked element should close the window, but if there are hundreds of elements in a window, this method does not seem to be a good way. I would like to ask if there is a formal What's a good way to handle this need?
$('.click').on('click',function(e){
$('.dialog').toggle()
$(document).on('click',function(e){
if(e.target.className == 'confirm' || e.target.className == 'item' || e.target.className == 'text' || e.target.className == 'dialog_wrap' || e.target.className == 'dialog' || e.target.className == 'head' || e.target.className == 'title'){
$('.dialog').css('display','inline-block');
}
})
})
.click {
position: relative;
}
.click .dialog {
display: none;
width: 300px;
position: absolute;
background-color: yellow;
border: 1px solid #ccc;
}
.click .dialog li {
text-align: left;
}
.click .dialog .confirm {
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="click">click
<div class="dialog">
<header class="head">
<h1 class="title">my is title</h1>
</header>
<ul class='dialog_wrap'>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<input type="button" value="confirm" class="confirm">
</ul>
</div>
</button>
Find whether the click was inside the .dialog with .closest. If it returns a .dialog element, the click was inside, so do nothing; otherwise, the click was outside or on the button, so you can close the dialog.
Also, you almost certainly don't want to add another click listener to the document every time .click is clicked; better to only add the listener once.
const dialog = $('.dialog');
$('.click').on('click', function(e) {
if (!e.target.closest('.dialog')) {
dialog.toggle();
}
e.stopPropagation();
});
$(document).on('click', function(e) {
dialog.hide();
});
.click {
position: relative;
}
.click .dialog {
display: none;
width: 300px;
position: absolute;
background-color: yellow;
border: 1px solid #ccc;
}
.click .dialog li {
text-align: left;
}
.click .dialog .confirm {
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="click">click
<div class="dialog">
<header class="head">
<h1 class="title">my is title</h1>
</header>
<ul class='dialog_wrap'>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<li class='item'>
<p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
<span class='time'>2022-12-23</span>
</li>
<input type="button" value="confirm" class="confirm">
</ul>
</div>
</button>
You can assign a body id when the click starts, and you can close the form when you click anywhere on the body.
I've recently gotten back into coding, and continuing off where I left, trying to create a mobile-first site for a hypothetical apartment website.
With that being said, I've noticed that bottom border of a different , with the class ".description_section", is visible through the one containing the element.
The is within the tag with the id "sidebar". Not the most aesthecally-pleasing side nav (as fonts is my weak point).
Picture
HTML:
<div class="container">
<div id="sidebar">
<ul>
<li>Home</li>
<li>Amenities</li>
<li>Floor Plans</li>
<li>About Us</li>
</ul>
</div><!--close #sidebar-->
<div class="row" id="big_picture">
<div class="row" id="social_media">
<div class="col-4" id="facebook">
<img src="images/fb.svg">
</div><!-- close .social_media_icon-->
<div class="col-4" id="twitter">
<img src="images/twitter.svg">
</div><!-- close .social_media_icon-->
<div class="col-4" id="google_plus">
<img src="images/google_plus.svg">
</div><!-- close .social_media_icon-->
</div><!--close #social_media-->
</div><!--close #big_picture-->
<div class="row description_section">
<hr>
<h2>Directions</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur tristique tortor feugiat dictum. Duis placerat orci vel massa interdum dapibus eu id risus. Curabitur tempor placerat congue. Curabitur ut augue sit amet arcu volutpat rutrum ut sit amet turpis.</p>
<div class="desc_image" id="one"></div><!--close .desc_image-->
</div><!--.description_section-->
CSS:
#sidebar {
left: 0px;
width: 50%;
border-top-right-radius: 1.5em;
border-bottom-right-radius: 1.5em;
background-color: black;
color: white;
/*border: 1px solid white;*/
text-align: center;
position: absolute;
display: none;
}
#big_picture {
height: 13.4em;
background: url("../images/apt_lobby.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.description_section {
background-color: #1d2f5c;
color: white;
}
.description_section h2 {
padding-top: 0;
padding-bottom: 2%;
text-align: center;
font-style: bold;
}
.description_section p {
font-size: 0.8em;
padding: 1% 5% 5% 5%;
}
jQuery:
$("#hamburger_menu").click(function() {
$("#sidebar").toggle(1000);
});
If people would like more code snippets, including the one with id of the whose borders is bleeding through, please let me know!
My guess is that it's because of the
position: absolute
Try playing around with this and also height of the sidebar.
try to make the ul higher z-index
ul {
position: absolute;
z-index:9;
}
So, how the code was supposed to run: if you just load the example, and click on "menu" on the bottom left, a new div cover the entire page, with another menu, sliding from the top. If you click the button again, same animation in reverse. Works fine!
But if you scroll the main page to the bottom, and then click on the menu again, it works, but when you click the menu button again, there is no animation. The menu div simply disappears. How can I fix that?
menu();
function menu(nm_pagina) {
var scroll;
$("#menu01").click(function() {
if ($(".menu_aberto").css("display") == 'none') {
$(".menu_aberto").slideDown(300);
scroll = $(window).scrollTop();
$(".miolo_relacionamentos").hide();
} else {
$(".menu_aberto").slideUp(300);
$('.' + nm_pagina).height('auto');
$(".miolo_relacionamentos").fadeIn(100);
$("html").scrollTop(scroll);
};
});
};
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
max-width: 800px;
margin: 0 auto;
}
#ft_menu_botoes {
max-width: 800px;
position: fixed;
bottom: 0px;
width: 100%;
display: block;
background-color: #162F67;
height: 60px;
z-index: 10;
}
#ft_menu_botoes #menu01 {
float: left;
width: 25%;
font-size: 13px;
text-align: center;
padding: 10px 0 0 0;
color: white;
height: 100%;
transition: background-color 0.3s;
}
#ft_menu_botoes #menu01 .ico_menu {
color: white;
font-size: 30px;
}
#ft_menu_botoes #menu01:active {
background-color: #2855bb;
}
.menu_aberto {
z-index: 9;
max-width: 800px;
position: absolute;
margin: auto;
left: 0;
bottom: 0;
right: 0;
top: 0;
display: none;
background: #162F67;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(#2855bb, #162F67);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#2855bb, #162F67);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#2855bb, #162F67);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#2855bb, #162F67);
/* Standard syntax */
width: 100%;
height: 100%;
overflow: auto;
display: none;
}
.menu_aberto #fecha_menu {
float: left;
border: 0;
background-color: transparent;
margin-top: 17px;
color: white;
width: 22%;
height: 100%;
}
.lista_rel {
margin: 10px auto 0 auto;
width: 100%;
border: 1px solid #162F67;
position: relative;
overflow: auto;
transition: opacity 0.3s;
}
.lista_rel:first {
margin-left: 20px;
}
.lista_rel .nome_empresa {
width: 100%;
background-color: #162F67;
margin: 0;
font-size: 14px;
font-weight: normal;
color: white;
padding: 5px 20px;
}
.lista_rel .nome_mae {
width: 100%;
background-color: #e3e5e7;
margin: 0;
font-size: 13px;
font-weight: normal;
padding: 5px 20px;
color: #525860;
}
.lista_rel .posicao_empresa {
width: 40px;
height: 44px;
float: left;
display: block;
position: relative;
}
.lista_rel .textos {
float: left;
width: calc(100% - 100px);
}
.lista_rel .textos .cnpj {
color: #162F67;
margin: 5px 5px 0 0;
font-size: 11px;
}
.lista_rel .textos .cnpj span {
font-size: 13px;
}
.lista_rel .textos .num_documentos {
color: #525860;
margin: 5px 10px 5px 20px;
text-align: right;
font-size: 12px;
}
.lista_rel .box_numero {
width: 60px;
height: 44px;
background-color: #1f4291;
float: right;
display: block;
}
.lista_rel .box_numero p {
color: white;
font-weight: bold;
font-size: 22px;
text-align: center;
margin-top: 10px;
margin-bottom: 0;
}
.header_mob_01 {
margin: 0;
background-color: #162F67;
display: block;
height: 50px;
position: fixed;
top: 0;
width: 100%;
max-width: 800px;
z-index: 5;
}
.rlc {
background-color: white;
height: auto;
padding: 0;
}
.miolo_relacionamentos {
width: 90%;
margin: 0 auto;
padding-top: 60px;
padding-bottom: 100px;
overflow: hidden;
}
/*# sourceMappingURL=fake_code.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <link rel="stylesheet" href="./css/relacionamentos.css"> -->
<link rel="stylesheet" href="./css/fake_code.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="vertical"></div>
<div class="rlc">
<div class="header_mob_01"></div>
<div class="menu_aberto"></div>
<div class="miolo_relacionamentos">
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
</div>
<div id="ft_menu_botoes">
<div id="menu01"> <span class="icon-menu ico_menu"></span> <br> Menu </div>
</div>
</div>
<script>
</script>
</body>
</html>
PS: sorry for the clumsy job in the html/css. Just copied the original and started deleting things which do not matter here.
I'm trying to implement vertical tabs in my bootstrap website.
Here is the code:
HTML:
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-5">
<div class="tabs-left">
<ul class="nav nav-tabs">
<li class="active"><span class="glyphicon glyphicon-heart"></span></li>
<li><span class="glyphicon glyphicon-star"></span></li>
<li><span class="glyphicon glyphicon-headphones"></span></li>
<li><span class="glyphicon glyphicon-time"></span></li>
<li><span class="glyphicon glyphicon-calendar"></span></li>
<li><span class="glyphicon glyphicon-cog"></span></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">
<h3>Who do you Love?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Jen <span class="badge pull-right">100%</span></h4>
</li>
<li class="list-group-item">
<h4>Dezi <span class="badge pull-right">100%</span></h4>
</li>
<li class="list-group-item">
<h4>Eli <span class="badge pull-right">100%</span></h4>
</li>
<li class="list-group-item">
<h4>Mojo <span class="badge pull-right">83%</span></h4>
</li>
<li class="list-group-item">
<h4>Myself <span class="badge pull-right">100%</span></h4>
</li>
</ul>
</div>
<div class="tab-pane" id="b">
<h3>What's your Favorite?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Crystals <span class="badge pull-right">100%</span></h4>
</li>
<li class="list-group-item">
<h4>Healing <span class="badge pull-right">90%</span></h4>
</li>
<li class="list-group-item">
<h4>Exploring <span class="badge pull-right">78%</span></h4>
</li>
<li class="list-group-item">
<h4>QiGong <span class="badge pull-right">83%</span></h4>
</li>
<li class="list-group-item">
<h4>Myself <span class="badge pull-right">100%</span>
</h4></li>
</ul>
</div>
<div class="tab-pane" id="c">CCCCThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="d">DDDDDSecondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.</div>
<div class="tab-pane" id="e">EEEEEThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="f">FFFFFFThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
</div><!-- /tab-content -->
</div><!-- /tabbable -->
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
CSS
body {
background-color: #ddd;
}
h3 {
margin-top: 0;
}
.badge {
background-color: #777;
}
.tabs-left { margin-top: 3rem; }
.nav-tabs {
float: left;
border-bottom: 0;
li {
float: none;
margin: 0;
a {
margin-right: 0;
border: 0;
background-color: #333;
&:hover {
background-color: #444;
}
}
}
.glyphicon {
color: #fff;
}
.active .glyphicon {
color: #333;
}
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
border:0;
}
.tab-content {
margin-left: 45px;
.tab-pane {
display: none;
background-color: #fff;
padding: 1.6rem;
overflow-y: auto;
}
.active { display: block; }
}
.list-group {
width: 100%;
.list-group-item {
height: 50px;
h4, span {
line-height: 11px;
}
}
}
Javascript:
var tabsFn = (function() {
function init() {
setHeight();
}
function setHeight() {
var $tabPane = $('.tab-pane'),
tabsHeight = $('.nav-tabs').height();
$tabPane.css({
height: tabsHeight
});
}
$(init);
})();
Its implementation is as in this link.
But when I try it in my website, I get a weird result like this:
Why is it happening?
I am using owl carousel 2 to create a simple sliding carousel. At the minute I am just using images however I would like to be able to use html files instead of . These html files have multiple divs in which images can be loaded into and instead of the whole image sliding away only the would change. Any suggestions as to how I could go about doing this?
Current HTML file:
<div id="carousel" class="owl-carousel">
<div class="item"><img src="Images/1.jpg" alt="img1" /></div>
<div class="item"><img src="Images/2.jpg" alt="img2" /></div>
<div class="item"><img src="Images/3.jpg" alt="img3" /></div>
<div class="item"><img src="Images/4.jpg" alt="img4" /></div>
</div>
<script src="Scripts/jquery-1.9.0.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/owl.carousel.js"></script>
<script src="Scripts/app.js"></script>
If you are Saying about HTML Elements . Then I have a solution for you.
So Let me tell u how to Create a Client Testimonials area with Owl Carousel and Bootstrap.
Make sure you have connected owl.carousel.css, owl.theme.default.min.css and owlcarousel.js.
HTML Code
<section id="clients-reviews" >
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="owl-client-reviews" class="owl-carousel owl-theme">
<div class="review">
<p>
"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
</p>
<br>
<h4><span class="name">Salam mohd |</span> <span class="post">web designer</span> </h4>
</div>
<div class="review">
<p>
"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
</p>
<br>
<h4><span class="name">Salam mohd |</span> <span class="post">web designer</span> </h4>
</div>
<div class="review">
<p>
"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
</p>
<br>
<h4><span class="name">Salam mohd |</span> <span class="post">web designer</span> </h4>
</div>
</div>
</div>
</div>
</div>
</section>
CSS goes like This
#clients-reviews .review p{
font-family: 'PT Serif Caption', serif;
color: #ffffff;
font-size: 18px;
}
#clients-reviews .review span.name{
color:#fed136;
}
#clients-reviews .review span.post{
font-family: 'PT Serif Caption', serif;
font-weight: 300;
font-size: 14px;
color: #fed136;
text-transform: none;
}
#clients-reviews .owl-theme .owl-controls .owl-nav [class*=owl-] {
background: transparent;
color: #ffffff;
bborder: 2px solid #fed136;
font-size: 14px;
padding: 0 10px;
line-height: 14px;
}
Your JS file will be
$("#owl-client-reviews").owlCarousel({
items:1,
loop:true,
autoplay:true,
autoHeight: false,
autoHeightClass: 'owl-height',
dots:false,
nav:true,
navText:[
"<i class='fa fa-angle-left fa-2x'></i>",
"<i class='fa fa-angle-right fa-2x'></i>"
]
});
Note*
I have used Fontawesome Icons for next and pre.
If you want increase the items then use the items property.
Thankss :)