These are chrome-like tabs. In this when i click on first tab i.e. facebook tab it shows facebook content and when i click on second tab i.e. on twitter tab it shows first tab's content and while clicking on third fourth and fifth tabs it shows their own content, there is no noissue with third fourth and fifth tabs.
And when clicking second time on first tab it shows no content. same is the issue with second tab.
HTML
<div class="box box-primary">
<div class="row">
<div class="col-md-12">
<div class="tabs">
<div class="tab fb-icon-color active" id="#tab1">
<a href="#tab1">
<div class="tab-box">
<h3 style="text-align: center;margin-top: 15px;" class="facebook">
<i class="fa fa-facebook" title="Facebook"></i>
</h3>
</div>
</a>
</div>
<div class="tab twitter-icon-color">
<a href="#tab2">
<div class="tab-box">
<h3 style="text-align: center;margin-top: 15px;"><i class="fa fa-twitter" title="Twitter"></i></h3>
</div>
</a>
</div>
<div class="tab google-plus-icon-color">
<a href="#tab3">
<div class="tab-box">
<h3 style="text-align: center;margin-top: 15px;"><i class="fa fa-google-plus" title="Google+"></i></h3>
</div>
</a>
</div>
<div class="tab crawl-icon-color">
<a href="#tab4">
<div class="tab-box">
<h3 style="text-align: center;margin-top: 15px;"><i class="fa fa-bug" aria-hidden="true" title="Crawling"></i>
</div>
</a>
</div>
<div class="tab video-icon-color">
<a href="#tab5">
<div class="tab-box">
<h3 style="text-align: center;margin-top: 15px;"><i class="fa fa-video-camera" title="Youtube"></i></h3>
</div>
</a>
</div>
</div>
<div class="tabs-content pane">
<!-- first Pane -->
<div id="tab1" >
<%= render :partial =>"fb_tab"%>
</div>
<div id="tab2" style="display: none;">
<%= render :partial =>"twitter_tab"%>
</div>
<div id="tab3" style="display: none;">
<%= render :partial =>"gplus_tab"%>
</div>
<div id="tab4" style="display: none;">
<%= render :partial =>"crawled_tab"%>
</div>
<div id="tab5" style="display: none;">
<h1> youtube</h1>
</div>
</div>
</div>
</div>
JAVASCRIPT
<script>
$(document).ready(function (){
$('.tab').click(function(){
$('.tab').removeClass('active');
$(this).addClass('active');
$(".tabs a").click(function() {
$(".pane div").hide();
$($(this).attr("href")).show();
});
});
});
</script>
CSS
.tabs {
height:45px;
padding: 1px 0 0 0;
overflow:visible;
}
.tab {
width:246px;
height:45px;
overflow:hidden;
float:left;
margin:0 -15px 0 0;
}
.tab-box {
height:50px;
background: rgba(60, 141, 188, 0.87);
border-radius: 4px;
border:1px solid #ccc;
margin:0 13px 0;
box-shadow: 0 0 2px #fff inset;
-webkit-transform: perspective(100px) rotateX(30deg);
-moz-transform: perspective(100px) rotateX(30deg);
}
.tab.active {
z-index:40;
position:relative;
padding-bottom:1px;
}
.tab.active .tab-box{
background-color: #ECF0F5;
#include background-image(linear-gradient(top, #ccc , #ddd 3%, rgba(#eee, 0.5) ));
box-shadow: 0 0 2px 0 #fff inset;
}
.tabs-content.pane {
z-index:1;
padding:15px;
border:1px solid #ccc;
background:#ECF0F5;
}
The problem is that you have nested click handlers, please try this:
$(document).ready(function() {
$(".tabs a").click(function(event) {
event.preventDefault();
$('.tab').removeClass('active');
$(this).parent().addClass('active');
$(".pane div").hide();
$($(this).attr("href")).show();
});
});
Related
Trying to implement a show/hide description box.
If the user clicks on the first showDesc link it opens it's description box.
Then if the user clicks the second showDesc link it opens it's description box and should close all the others which are opened.
it below :
Below is my code:
$(".showDesc").click(function () {
$(".descContainer").toggleClass("show");
});
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0,0,0,.08);
display: none;
line-height: 24px;
background-color: #fdfdfd;
}
.descContainer.show {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0,0,0,.08);
display: block;
line-height: 24px;
background-color: #fdfdfd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<section>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
</section>
</main>
Your issue is because you're changing the class on all the .descContainer elements at once, not just the one related to the clicked .showDesc.
To fix this you need to use DOM traversal to get the closest('.feedContainer) then next() to get the element you want to toggle, like this:
$(".showDesc").click(function() {
var $target = $(this).closest('.feedContainer').next(".descContainer").toggleClass("show");
$(".descContainer").not($target).removeClass('show'); // hide other open elements
});
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0, 0, 0, .08);
display: none;
line-height: 24px;
background-color: #fdfdfd;
}
.descContainer.show {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0, 0, 0, .08);
display: block;
line-height: 24px;
background-color: #fdfdfd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<section>
<article class="feedBox mainSmooth">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer"></div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
<article class="feedBox mainSmooth">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer"></div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
</section>
</main>
You don't need jQuery for that, you don't even need javascript for that. Setting ids and internals links on your HTML + using the :target CSS pseudo-class will do.
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0,0,0,.08);
line-height: 24px;
display:none;
}
.descContainer:target {
display:block;
}
<main>
<section>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc" href="#1">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer" id="1">
<div>Description Text</div>
</div>
</article>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc" href="#2">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer" id="2">
<div>Description Text</div>
</div>
</article>
</section>
</main>
I'm trying to create a hover on MENU2,3 and submenu's like the hover on MENU 1&2.
I can only get the hover on the title class. I'm trying to get hover on .ui .accordion .item when the title class below does not have .active class is this possible?
$(".ui.accordion").accordion();
/*
.ui.accordion.item:hover {
background: rgba(255,255,255,.1);
color: #ffffff;
}
*/
.ui.menu .active.item:hover, .ui.vertical.menu .active.item:hover {
background-color: transparent;
}
.ui.inverted.menu .active.item {
background-color: transparent;
}
.ui.accordion.item > .title:NOT(.active):hover {
background: rgba(255,255,255,.1);
color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.js"></script>
<div class="pusher">
<div class="container">
<div class="ui left fixed vertical inverted menu">
<div class="item">
<form method="POST" action="#">
<div class="ui fluid inverted transparent icon input">
<input type="text" name="search">
<i class="search icon"></i>
</div>
<input type="submit" value="Submit" style="display:none;">
</form>
</div>
<a class="item" href="#">MENU 1</a>
<a class="item" href="#">MENU 2</a>
<div class="ui accordion item inverted">
<div class="title item" style="padding: 0px;">
<i class="dropdown icon"></i> MENU 3
</div>
<div class="content">
<a class="item" href="#">SUBMENU 1</a>
<a class="item" href="#">SUBMENU 2</a>
</div>
</div>
<div class="ui accordion item inverted">
<div class="title item" style="padding: 0px;">
<i class="dropdown icon"></i> MENU 4
</div>
<div class="content">
<a class="item" href="#">SUBMENU 1</a>
<a class="item" href="#">SUBMENU 2</a>
</div>
</div>
</div>
</div>
http://jsfiddle.net/4mpb7cfx/303/
Try to override hover to default style when .active set
.ui.accordion.item > .title.active:hover {
//set default
}
.ui.accordion.item > .title:hover {
background: rgba(255,255,255,.1);
color: #ffffff;
}
I solved my own question
http://jsfiddle.net/4mpb7cfx/306/
.ui.accordion.item {
padding:0px;
}
.ui.accordion.item > .title {
padding: .78571em .95em;
}
.ui.menu .active.item:hover, .ui.vertical.menu .active.item:hover {
background-color: transparent;
}
.ui.inverted.menu .active.item {
background-color: transparent;
}
.ui.accordion.item > .title:NOT(.active):hover {
background: rgba(255,255,255,.1);
color: #ffffff;
}
.ui.accordion.item > .content > .item {
padding-left: 1.2em;
}
I am trying to build an expanding preview like http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/.
But I need to customize it based on my requirement.
Please check this fiddle.
Problems I am facing are:
The pointer does not point to the image properly. (it points but hides behind the box)
When clicking on first image, all the elements to the right shifts down.
Along with that I would also like to ask, can we fit all the 8 circular div in a single row?
Thank you.
jQuery(document).ready(function() {
$(".mn").click(function() {
var activeTab = $(this).attr("href"); //Find the target via the href
if ($(activeTab).is(':visible')) {
$(activeTab).slideUp();
$(this).removeClass("active");
} else {
$(".mn").removeClass("active"); //Remove any "active" class
$(this).addClass("active")
$('.tab').hide();
$(activeTab).fadeIn();
}
return false;
});
});
.wrap {
max-width: 100%;
margin: auto;
}
.mn.active:after {
content: "";
position: absolute;
left: 50%;
bottom: -12px;
margin: 0 0 0 -6px;
/*width: 0;*/
/*height: 0;*/
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid red;
}
.img-circle {
border-radius: 50%;
}
.img-circle {
border-radius: 0;
}
.ratio {
background-position: center center;
background-repeat: no-repeat;
background-size: auto;
height: 0;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.img-circle {
border-radius: 50%;
}
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
.mn.active,
.mn:focus {
background: #f9f9f9;
outline: none
}
.tab {
display: none;
clear: both;
margin: 0 2% 10px 0;
background: red;
min-height: 100px;
width: 100%;
padding: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="wrap">
<div class="col-sm-2">
<a href="#tab1" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">1</div>
</a>
</div>
<div id="tab1" class="tab">Tab 1</div>
<div class="col-sm-2">
<a href="#tab2" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">2</div>
</a>
</div>
<div id="tab2" class="tab">Tab 2</div>
<div class="col-sm-2">
<a href="#tab3" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">3</div>
</a>
</div>
<div id="tab3" class="tab">Tab 3</div>
<div class="col-sm-2">
<a href="#tab4" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">4</div>
</a>
</div>
<div id="tab4" class="tab">Tab 4</div>
<div class="col-sm-2">
<a href="#tab5" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">5</div>
</a>
</div>
<div id="tab5" class="tab">Tab 5</div>
<div class="col-sm-2">
<a href="#tab6" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">6</div>
</a>
</div>
<div id="tab6" class="tab">Tab 6</div>
<div class="col-sm-2">
<a href="#tab7" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">7</div>
</a>
</div>
<div id="tab7" class="tab">Tab 7</div>
<div class="col-sm-2">
<a href="#tab8" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">8</div>
</a>
</div>
<div id="tab8" class="tab">Tab 8</div>
</div>
Please check this fiddle: https://jsfiddle.net/LyL8vkmr/4/
I put each col-sm-2 inside a <div class="row"></div> and I put all the tabs in a separate <div class="row"></div>. Now when you click a circle, it opens a tab in the row underneath it and pushes all the circles in the next row. However it still doesn't work perfectly because when you resize it to small size and click on a circle, the tab opens up at the very bottom of the row and you can't see it easily.
Also note I changed col-sm-2 to col-sm-1 since you said you wanted 8 divs in a row. The only problem with this is that it doesn't stretch 100% across. If you want 8 columns to stretch all the way across then you need to use a custom version of bootstrap. Just go here and enter 8 for the #grid-columns field.
Guys I'm doing a jQuery accordion kind of a thing using slide function. It works fine but i'm using this for a project which requires me to move the selected one to up or to first one.
Here's my HTML and jQuery
<ul class="inneraccordion">
<li>
<a href="#" class="open">
<div class="acc_head row">
<div class="col-md-1 col-sm-1 col-xs-2 icon-divider"><div class="icon-l_offers"></div></div>
<div class="col-md-11 col-sm-11 col-xs-10 acc_head_text">Offers (3)</div>
</div>
</a>
<div class="inneraccordionbox">
Content
</div>
</li>
<li>
<a href="#" class="open">
<div class="acc_head row">
<div class="col-md-1 col-sm-1 col-xs-2 icon-divider"><div class="icon-l_play"></div></div>
<div class="col-md-11 col-sm-11 col-xs-10 acc_head_text">Set Top Box</div>
</div>
</a>
<div class="inneraccordionbox">
Content
</div>
</li>
<li>
<a href="#" class="open">
<div class="acc_head row">
<div class="col-md-1 col-sm-1 col-xs-2 icon-divider"><div class="icon-l_sim"></div></div>
<div class="col-md-11 col-sm-11 col-xs-10 acc_head_text">Sim Cards</div>
</div>
</a>
<div class="inneraccordionbox">
Content
</div>
</li>
<li>
<a href="#" class="open">
<div class="acc_head row">
<div class="col-md-1 col-sm-1 col-xs-2 icon-divider"><div class="icon-l_voucher"></div></div>
<div class="col-md-11 col-sm-11 col-xs-10 acc_head_text">Vouchers</div>
</div>
</a>
<div class="inneraccordionbox">
Content
</div>
</li>
<li>
<a href="#" class="open">
<div class="acc_head row">
<div class="col-md-1 col-sm-1 col-xs-2 icon-divider"><div class="icon-l_pin"></div></div>
<div class="col-md-11 col-sm-11 col-xs-10 acc_head_text">E-Pins</div>
</div>
</a>
<div class="inneraccordionbox">
Content
</div>
</li>
<li>
<a href="#" class="open">
<div class="acc_head row">
<div class="col-md-1 col-sm-1 col-xs-2 icon-divider"><div class="icon-layers"></div></div>
<div class="col-md-11 col-sm-11 col-xs-10 acc_head_text">Bundles</div>
</div>
</a>
<div class="inneraccordionbox">
Content
</div>
</li>
</ul>
jQuery -
jQuery(document).ready(function($) {
var open = $('.open'),
a = $('ul').find('a');
console.log(a.hasClass('active'));
open.click(function(e){
e.preventDefault();
var $this = $(this),
speed = 500;
if($this.hasClass('active') === true) {
$this.removeClass('active').next('.inneraccordionbox').slideUp(speed);
} else if(a.hasClass('active') === false) {
$this.addClass('active').next('.inneraccordionbox').slideDown(speed);
} else {
a.removeClass('active').next('.inneraccordionbox').slideUp(speed);
$this.addClass('active').next('.inneraccordionbox').delay(speed).slideDown(speed);
}
});
});
CSS incase if you need -
/* inner accordion */
.acc_head {
height: 90px;
border-bottom: 1px solid #e1e9ec;
}
.icon-divider, .acc_head_text {
display: flex;
align-items: center;
height: 90px;
padding:0 20px;
}
.icon-divider {
border-right: 1px solid #ececec;
}
.icon-divider div {
margin: 0 auto;
}
.icon-divider div::before {
font-size: 44px;
color:#3fb3ec;
}
.acc_head_text {
background: url('../images/plus.png') no-repeat 97% 35px !important;
-webkit-transition: 0.5s;
color:#444444;
font-family: "Gotham Medium", Arial, Helvetica, sans-serif !important;
font-size: 20px;
}
a.active .acc_head_text {
background: url('../images/cross.png') no-repeat 97% 35px !important;
-webkit-transition: 0.5s;
}
.inneraccordionbox {
height:300px;
position:relative;
display:none;
padding: 0px;
}
.inneraccordion li {
background: #fff;
display:block;
padding-right:10px;
list-style:none;
border: 1px solid #e1e9ec;
border-bottom: none;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0px 3px 1px 0px rgba(221,222,224,1);
-moz-box-shadow: 0px 3px 1px 0px rgba(221,222,224,1);
box-shadow: 0px 3px 1px 0px rgba(221,222,224,1);
margin-bottom: 10px;
}
.inneraccordion li:last-child {
margin-bottom: 0;
}
Any idea how to achieve that?
I've added following code inside this - else if(a.hasClass('active') === false) condition. It moves the selected element 1 position upwards.
li = $(this).parent();
li.insertBefore(li.prev(li));
li.slideUp(500, function(){
//callback
}).slideDown(500);
To move the selected element to the top of your list, change li.insertBefore(li.prev(li)); to li.insertBefore(li.siblings(":eq(0)"));
Here is a Fiddle
I've positioned the header of my page to be always at the top by using
position:fixed;
This works perfectly fine, but not on Chrome on my android devices. The header get's pushed away by something and is placed where it shouldn't be: a few 100 pixels from the top instead of 0 pixels from the top.
My guess is that it's caused because of some javascript i'm using. The first piece of javascript is when a user presses an icon a menu shows up, this is the code:
<script type="text/javascript">
$(document).ready(function() {
$('#toggle').click(function(){
$('div.showhide').toggle();
});
});
</script>
The second code is when a user scrolls away from the header the header closes:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(window).scroll(function() { $('.showhide').fadeOut("fast");
});
});//]]>
</script>
This is my page code:
<div class="showhide">
<div class="menubg">
<div class="menu">
<div class="container">
<div class="item">
<div class="img">
<a href="conv.cfm" style="color: white; text-decoration: none;"><img style="margin-top: 8px;" src="img/conversations.png" alt="conversations" />
</div>
<p>Gesprekken</a></p>
</div>
<div class="item">
<div class="img">
<a href="home.cfm" style="color: white; text-decoration: none;"> <img src="img/high_res.png" alt="notifications" style="height: 38px; margin-left: 23px;" class="nav left" />
</div>
<p>Vrienden</a></p>
</div>
<div class="item">
<div class="img">
<a href="profile.cfm" style="color: white; text-decoration: none;"><img src="img/hoofd.png" alt="me" />
</div>
<p>Ik</a></p>
</div>
<div class="clear"></div>
<div class="item">
<div class="img">
<img src="img/HC.gif" alt="reception" />
</div>
<p>Receptie</p>
</div>
<div class="item">
<div class="img">
<a href="settings.cfm" style="color: white; text-decoration: none;"><img src="img/wrench.gif" alt="settings" />
</div>
<p>Instellingen</p></a>
</div>
</div>
</div>
</div>
</div>
<div class="headbg">
<div class="header">
<a href="#">
<img src="img/conversations.png" alt="conversations" class="nav left" />
</a>
<a href="#">
<img src="img/high_res.png" alt="notifications" style="height: 38px; margin-top: -1px;" class="nav left" />
</a>
<a href="#">
<img src="img/habbobtn.png" alt="habbologo" class="nav right" id="toggle" />
</a>
</div>
</div>
<div class="content">
</div>
// Page continues after this but it isn't causing the problem
Forgot to add it, but this is my css code:
.menubg {
width: 100%;
background-color: #201d19;
}
.menu {
width: 320px;
height: 190px;
margin: 0 auto;
overflow: hidden;
}
.showhide {
display: none;
}
.container {
width: 290px;
height: 160px;
background-color: #201c18;
border: 1px solid #282420;
border-radius: 5px;
position: absolute;
padding: 5px;
margin: 10px;
}
// This is not all the css, if it's needed i'll add it
If anyone could help me out with this problem i would appreciate it!
I've created a sample fiddle with header and content div.
#header
{
position:fixed;
...
top:0;
left:0;
}
#content
{
margin-top:set your header height;
}