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.
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>
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>
I have a parent div and 2 child divs (child-left and child-right). child-right div will contain 1 or 2 icons depending on dynamic page requirement. The child-left div contains the title and also used as a handle to drag operation. I do not want to set a width px or % (like the 90% I have below). How do I set the child-left div to take the rest of available space after what is occupied by child-right.
<div id="parent">
<div id="child-left" style="width:90%">
This is my title
</div>
<div id="child-right">
<i class="fa fa-cog"></i>
</div>
</div>
Thanks!
The following should help you:
HTML:
<div id="parent">
<div id="child-right">Hey</div>
<div id="child-left">This is my title</div>
</div>
CSS:
#child-left {
border: 3px solid gray;
background-color:blue;
margin-left:0px;
overflow:hidden;
}
#child-right {
float:right;
border-style:solid;
}
#parent {
overflow:hidden;
}
DEMO JSFiddle
Consider this JSFiddle
When I mouseenter on Span1 , a blue bar should appear below the Span1 (same for Span2 and Span3)
But even I mouseenter on Span1 or Span2 or Span3 , blue bar appears only under Span2.
CSS
div.demo {
display:table;
width:100%;
}
div.demo div {
display:table-cell;
text-align:center;
}
.under {
width:100px;
height:2px;
background-color:blue;
margin:0px auto;
display:block;
}
HTML
<div class="demo">
<div id='span1'>Span 1</div>
<div id='span2'>Span 2</div>
<div id='span3'>Span 3</div>
</div>
<div class="demo">
<div><span id='Span1'></span></div>
<div><span id='Span2'></span></div>
<div><span id='Span3'></span></div>
</div>
JS
$(document).ready(function(){
$('#span1').mouseenter(function(){
$('#Span1').addClass('under');
});
$('#span2').mouseenter(function(){
$('#Span2').addClass('under');
});
$('#span3').mouseenter(function(){
$('#Span3').addClass('under');
});
$('#span1').mouseleave(function(){
$('#Span1').removeClass('under');
});
$('#span2').mouseleave(function(){
$('#Span2').removeClass('under');
});
$('#span3').mouseleave(function(){
$('#Span3').removeClass('under');
});
});
You have no width on the cells before the hover
Working JSFiddle here: http://jsfiddle.net/F2smc/5/
div.demo div {
display:table-cell;
text-align:center;
width: 33%; // <<< Added this
}
Basically the other 2 cells are zero width so the second row collapses to something very narrow in the middle so it looks like it is only under option 2.
Better example: http://jsfiddle.net/F2smc/29/
You can get the same effect, without specifying an exact % width, by simply adding this CSS instead for the spans (so they do not collapse within their parent divs):
div.demo span
{
width:100%;
}
If you put unique colors on the divs it will become really obvious what is going on. 100% on the div does not mean the divs will use it like in a table. Basically any change that applies a width to the underlining divs/spans will work. Suggest you use Chrome in F12 debug mode to view this type of work as it clearly shows the original elements were all 0 width.
PS. Is really is a bad idea to use ids that vary only in case
On a separate note:
You would not normally hardwire events for each different id in JQuery when they all do roughly the same thing. If you change your ids to be really unique (not just by case) you can do something like:
$(document).ready(function () {
$('.menu').hover(function () {
$('#' + this.id + '-l').addClass('under');
}, function () {
$('span').removeClass('under');
});
});
Which takes the id of the current hovered item, appends something unique then updates the matching item by id.
Working demo: http://jsfiddle.net/F2smc/30/
That should clean things up while retaining your original structure.
For testing i have given text-decoration,you replace that with background-color..
HTML
<div class="demo">
<div id='one' class="hover">Span 1</div>
<div id='two' class="hover">Span 2</div>
<div id='three' class="hover">Span 3</div>
</div>
<div class="demo">
<div><span id='Span1'></span></div>
<div><span id='Span2'></span></div>
<div><span id='Span3'></span></div>
</div>
CSS
div.demo {
display:table;
width:100%;
}
div.demo div {
display:table-cell;
text-align:center;
}
.under {
width:auto;
height:1px;
text-decoration:underline;
margin:0px auto;
display:block;
}
JQuery
$(document).ready(function(){
$('.hover').hover(function(){
var id=$(this).attr("id");
$('#'+id).addClass('under');
},function(){
$('.hover').removeClass('under');
});
});
Working DEMO
Try this
I have editted your html and css
<div class="demo">
<div id='span1'>Span 1</div>
<div id='span2'>Span 2</div>
<div id='span3'>Span 3</div>
</div>
<div class="demo">
<span id='Span1'></span>
<span id='Span2'></span>
<span id='Span3'></span>
</div>
and add this to your css
div.demo span {
display:table-cell;
width:100px;
}
or
Try this
Working DEMO
without changing any html and css
just add width:100px; to
div.demo div {
display:table-cell;
text-align:center;
width:100px;
}
Hope this helps,thank you
HTML:
<div class="container" style="width:200px; height: 200px; border: 10px solid #ccc">
contents..
</div>
JQUERY:
$('.container').hover(function() {
console.log('in');
},
function() {
console.log('out');
});
It makes console.log when hover occurs both on border and div.
Objectives:
1> Want to make a `hover` event only for `div`, but not for `border`.
2> Fire another `hover` event on `border`, but not for `div`
Are the possible? if, then I want your cordial help..
A pragmatic solution would be to:
<div class="container" style="width:200px; height: 200px; border: 10px solid #ccc">
<div class="inner" style="height: 200px;">
contents..
</div>
</div>
and
$('.container .inner').hover(function() {
console.log('in');
},
function() {
console.log('out');
});
Cleanest option imo. a javascript solution would be more complex and simply not worth it.
The border IS the div, at least in part.
There's no event for specifically hovering over a border that I know of.
What you can do is have a nested div (within another div) and have a 10px padding on the internal one. This will give you 2 divs to work with and apply hover events to as well as looking the way you require.
Working example: http://jsfiddle.net/jssSA/
HTML
<div id="outer">
<div id="inner">Some content</div>
</div>
CSS
#outer,#inner{width:300px; height:300px;}
#outer{
background-color:#000;
padding:10px;
}
#inner{
background-color:#ccc;
}
jQuery
$('#outer').hover(function(){
console.log("outer in")},
function(){console.log("outer out")});
$('#inner').hover(function(){
console.log("inner in")},
function(){console.log("inner out")});