please tell me how to make tabs inside tabs in this code?
$('.tabs-box').each(function(){
$(this).find('.tabs-sel span:first').addClass('current');
$(this).find('.tabs-b:first').addClass('visible');
});
$('.tabs-sel').delegate('span:not(.current)', 'click', function() {
$(this).addClass('current').siblings().removeClass('current')
.parents('.tabs-box').find('.tabs-b').hide().eq($(this).index()).fadeIn(400);
});
.tabs-b {display:none;}
.tabs-b.visible {display:block;}
.tabs-sel {padding:20px 0 0 20px;}
.tabs-sel span {display:inline-block; padding:10px 20px; vertical-align:top; cursor:pointer;}
.tabs-sel span.current {background-color:#4e647a;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs-box">
<div class="tabs-sel"><span class="current">1</span><span>2</span><span>3</span></div>
<div class="tabs-b visible">12</div>
<div class="tabs-b">13</div>
<div class="tabs-b">14</div>
</div>
https://codepen.io/senopsisder/pen/zaEpBV
Try something like this in one of the sub tabs:
<div class="tabs-b visible">
<div class="tabs-sel">
<span class="current">12</span>
</div>
</div>
Related
I have DIV wrapper which I want to toogle class using children element. However the DOM three isn't the best:
<div class="wrapper-I-want-to-toogle-class">
<div class="other-class">
<div class="other-class">
<span class="element-I-want-to-triggle-toogle-class">X</span>
</div>
</div>
</div>
How to do that?
I have alredy tried to use:
$(this).parents(".wrapper").classList.toogle('active');
However wordpress does not really allow to use functions like that.
Can You help me?
Something like this should work, its important to select the correct class name of the parent, and the child used to toggle the parent
jQuery(function(){
jQuery('.target').click(function(){
jQuery(this).parents(".wrapper").toggleClass('active');
})
})
.wrapper{
display:block;
height:20px;
background:#CCC;
}
.wrapper.active{
height:150px;
}
.target {
float:right;
display:flex;
background:#EEE;
color:#666;
border:1px solid #aaa;
width:20px;
height:20px;
justify-content:center;
align-content:middel;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="other-class">
<div class="other-class">
<span class="target">X</span>
</div>
</div>
</div>
If I have a DOM structure like the following:
$(function() {
$(".child-a").click(function() {
// change `.child-b` to green
// I can go higher into the chain
$(this).parents(".parent").css({
"background-color": "black"
});
// I can use css to get `.child-b` to blue
$(".parent .sub-parent-b .child-b").css({
"background-color": "blue"
});
});
});
div div div {
width: 100px;
height:100px;
background-color: red;
border:1px black dashed;
}
.child-a {
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="sub-parent-a">
<div class="child-a"></div>
</div>
<div class="sub-parent-b">
<div class="child-b"></div>
</div>
</div>
I could technically use normal css, but it is not flexible enough.
$(function() {
$(".child-a").click(function() {
// change `.child-b` to green
// I can go higher into the chain
$(this).parents(".parent").css({
"background-color": "black"
});
// I can use css to get `.child-b` to blue
$(".parent .sub-parent-b .child-b").css({
"background-color": "blue"
});
/*
In this case, my first aproach of using `parent` made sure that the change only apeared on that specific css, or in #a, but not on #b
While the use of css could only get me to change things in both #a and #b
So how could I manage to do something like:
#a .sub-parent-a .child-a is clicked, so only #a .sub-parent-b .child-b changes, and not #b .sub-parent-b .child-b.
*/
});
});
div div div {
width: 100px;
height:100px;
background-color: red;
border:1px black dashed;
}
.child-a {
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" id="a">
<div class="sub-parent-a">
<div class="child-a"></div>
</div>
<div class="sub-parent-b">
<div class="child-b"></div>
</div>
</div>
<div class="parent" id="b">
<div class="sub-parent-a">
<div class="child-a"></div>
</div>
<div class="sub-parent-b">
<div class="child-b"></div>
</div>
</div>
In this case, my first aproach of using parent made sure that the change only apeared on that specific css, or in #a, but not on #b
While the use of css could only get me to change things in both #a and #b
So how could I manage to do something like:
#a .sub-parent-a .child-a is clicked, so only #a .sub-parent-b .child-b changes, and not #b .sub-parent-b .child-b.
You can go up the chain, and you can also go back down the chain. This way the selectors stay within the "this" element.
$(function() {
$(".child-a").click(function() {
// change `.child-b` to green
// I can go higher into the chain
$(this).parents(".parent").css({
"background-color": "black"
});
// I can use css to get `.child-b` to blue
$(this).parents(".parent").find('.child-b').css({
"background-color": "blue"
});
/*
In this case, my first aproach of using `parent` made sure that the change only apeared on that specific css, or in #a, but not on #b
While the use of css could only get me to change things in both #a and #b
So how could I manage to do something like:
#a .sub-parent-a .child-a is clicked, so only #a .sub-parent-b .child-b changes, and not #b .sub-parent-b .child-b.
*/
});
});
div div div {
width: 100px;
height:100px;
background-color: red;
border:1px black dashed;
}
.child-a {
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" id="a">
<div class="sub-parent-a">
<div class="child-a"></div>
</div>
<div class="sub-parent-b">
<div class="child-b"></div>
</div>
</div>
<div class="parent" id="b">
<div class="sub-parent-a">
<div class="child-a"></div>
</div>
<div class="sub-parent-b">
<div class="child-b"></div>
</div>
</div>
IMO you have way to much jQuery and aren't using any of the power of css.
$(function() {
$(".child").click(function() {
// reset
$('.parents .selected').removeClass('selected');
var $child = $(this);
var $subParent = $(this).closest('.sub-parent');
$child.addClass('selected');
$subParent.addClass('selected');
});
});
div{
padding: 5px;
}
.sub-parent.selected {
background-color: red;
}
.child{
cursor: pointer;
}
.child.selected {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parents">Parents
<div class="parent">- Parent
<div class="sub-parent">- - Sub Parent
<div class="child">- - - Child</div>
</div>
<div class="sub-parent">- - Sub Parent
<div class="child">- - - Child</div>
</div>
</div>
<div class="parent">- Sub Parent
<div class="sub-parent">- - Sub Parent
<div class="child">- - - Child</div>
</div>
<div class="sub-parent">- - Sub Parent
<div class="child">- - - Child</div>
</div>
</div>
</div>
Please check my coding ! i want to activate only one item which one will be coming from bottom. but when i running this code it's activating all div .
$(window).scroll(function() {
$('.parallax').each(function(e) {
if($(window).scrollTop()<=120){
$(this).addClass('active');
}
});
});
<div id="home" class="parallax" style="height:600px; width:400%; display:block; border:1px solid #F00;">
</div>
<div id="features" class="parallax" style="height:600px; display:block; border:1px solid #F00;">
</div>
<div id="newsletter" class="parallax" style="height:600px; display:block; border:1px solid #F00;">
</div>
If you look at following codes:
$('.parallax').each(function(e) {
if($(window).scrollTop()<=120){
$(this).addClass('active');
}
}
which actually mean if the window top is lower than 120, then all '.parallax' will be set to style active.
I would like to add a next and previous button to my image slider, but I don't know how to do.
Plz help. I have a basic structure..?
Here is my code..
HTML
<div class="large-photo">
<img src="images/large-photo/photo1.jpg" class="active">
<img src="images/large-photo/photo2.jpg">
</div>
<div class="small-photo">
<img src="images/small-photo/photo1.jpg" class="thumb selected">
<img src="images/small-photo/photo2.jpg" class="thumb">
</div>
<div class="arrow">
<div class="left-arrow"></div>
<div class="right-arrow"></div>
</div>
CSS
.large-photo img {
display: none;
}
.large-photo img.active {
display:block;
}
.small-photo img.selected {
border: 3px solid red;
}
JAVASCRIPT
function loadPhoto() {
$('.small-photo img').click(function() {
$('.selected').removeClass('selected');
var index = $(this).index();
$('.large-photo img.active').removeClass('active');
$('.large-photo img').eq(index).addClass('active');
$(this).addClass('selected');
});
it was some difficult for me to understand what you want as preer according to your code but however you will under stand how this sytem works and also how to use it differently. CODE:
<style type="text/css">
#container{
width: 266px ;
height:128px ;
overflow: hidden;
}
</style>
<script type="text/javascript" src="jquery-2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#left-arrow").click(function(){
$(".small-photo").fadeIn();
$(".large-photo").fadeOut();
});
$("#right-arrow").click(function(){
$(".small-photo").fadeOut();
$(".large-photo").fadeIn(1000);
});
});
</script>
<div id="container">
<div class="large-photo">
<img src="images/1395924816_personal-information.png">
<img src="images/1395938204_lock.png">
</div>
<div class="small-photo">
<img src="images/1395939936_application-pgp-signature.png" >
<img src="images/1396010974_button-cross_basic_red.png" >
</div>
</div>
<div class="arrow">
<-
->
</div>
and yes i had to do some of the major chages such as removing CSS but you can add but for my convinence i removed it just to show you how to do what you want i also change some of the class to id.. etc and also change pictures and you replace all thos pictures to your pictures..
working demo
Hello I have 3 fields and every field have different tooltip. How can I get right tooltip to right field? :) Without making 3 others scripts to each other field.
My code looking like that:
this is my javascript:
$(document).ready(function (){
$(".mybox").hover(function(){
$(".tooltip").css("display", "block");},
function(){
$(".tooltip").css("display", "none");
});
$(document).mousemove(function(event){
var mx = event.pageX+15;
var my = event.pageY+15;
$(".tooltip").css("left", mx+"px").css("top", my+"px");
});
});
this is my css:
.mybox {
margin-left:auto;
margin-right:auto;
magrgin-top: 100px;
width:250px;
background-color: grey;
padding: 10px;
text-align: center
}
.tooltip {
position:absolute;
z-index:2;
width 300px;
padding: 5px;
background-color: orange;
border-radius: 5px;
display:none;
}
and my html look like that code:
<body>
<div>
<div class="mybox">
aaa
</div>
<div class="tooltip">
ddd
</div>
</div>
<div>
<div class="mybox">
bbb
</div>
<div class="tooltip">
eee
</div>
</div>
<div>
<div class="mybox">
ccc
</div>
<div class="tooltip">
fff
</div>
</div>
</body>
Some ideas? :)
You cannot have multiple elements on the page with the same ID.
Perhaps something like this would work: Note, you have to change your CSS associations to classes rather than IDs
HTML:
<div>
<div class="mybox">
bbb
</div>
<div class="tooltip">
ccc
</div>
</div>
JS:
$(".mybox").mouseover(function() {
$(this).next('.tooltip').show();
}).mouseout(function() {
$(this).next('.tooltip').hide();
});