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
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>
Im trying to right align the Title on top of the last Div. As per the below image , the text should be on top of "Hello 5 / 4 / 3". When we resize the window button will float which is working and the text should be always be on top of the last button.
Unsure why the wrapper div is adding extra space to the right of the button and not aligning to the edge of the right most div. Extra space is coming even if the Title is not there , any insights about Div width calculation would be great.
I tried calculating the number of buttons in the top row using javascript and added offset to the title , but it seems tedious and not aligning at certain resolution.
http://jsbin.com/nonexegiqa/embed?html,css,console,output
HTML
<div class="wrapper">
<div class="title">Title</div>
<div class="clear"/>
<div class="btn">Hello 1</div>
<div class="btn">Hello 2</div>
<div class="btn">Hello 3</div>
<div class="btn">Hello 4</div>
<div class="btn">Hello 5</div>
<div class="btn">Hello 6</div>
<div class="clear"/>
</div>
CSS
.wrapper{
border:solid gray 1px;
}
.btn{
width:96px;
height:46px;
float:left;
border:solid gray 1px;
margin-left : 11px;
margin-bottom : 11px;
text-align:center;
}
.title{
float:right;
}
.clear{
clear:both;
}
You need to find count of .btn in first row when page resizing, Then set position of .title to last .btn in first row.
$(window).on("resize", function(){
var parWidth = $(".wrapper").innerWidth();
var chiWidth = $(".wrapper .btn").first().outerWidth(true);
var childCount = 0;
while(parWidth >= chiWidth){
parWidth -= chiWidth;
childCount ++;
}
var left = $(".btn:eq("+(childCount-1)+")").position().left;
$(".title").css("margin-left", left);
});
To better understanding, i create demo but because you can't change demo page size in here, i create it in JSFiddle.
yes, display:flex may be very helpful. As a work around you could set the width of the .wrapper to 70vw, or something similar. The .wrapper div width is creating the "extra space."
I want to change the background image of one div when the mouse is over a different div, using jQuery.
jQuery(function() {
jQuery('.linktomouseover').mouseover(function() {
$(.linktomouseover2).css('background-image', "url('test.jpg')");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="linktomouseover">
<a class="nthn">link1</a>
</div>
<div class="linktomouseover2">
<a class="test">link2</a>
</div>
So when mouse is over div with class linktomouseover it will actually change the background of div with class linktomouseover2
this does not seem to work. please help?
You're missing quotes in the code jQuery(.linktomouseover)
This is the correct code
jQuery(function() {
jQuery(".linktomouseover").mouseover(function() {
jQuery(".linktomouseover2").css('background-image', "url('test.jpg')");
});
});
DEMO
this is a mistake on your code.
jQuery:
jQuery('.linktomouseover2').mouseover(function() {
$('.linktomouseover').css('background-image', "url('http://cdn.androidpolice.com/wp-content/uploads/2012/11/nexusae0_wallpaper_01.jpg')");
});
HTML:
<div class="linktomouseover">
<a class="nthn">link1</a>
</div>
<div class="linktomouseover2">
<a class="test">link2</a>
</div>
CSS:
.linktomouseover{
position:relative;
display:block;
width:100%;
background:#e7e7e7;
height:200px;
}
.linktomouseover2{
position:relative;
display:block;
width:100%;
background:#d7d7d7;
height:200px;
}
Live Demo On JSFiddle
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
Can you please tell me how to rotate div and set the color of div .By default red is in top so it print red.But when user rotate clockwise or anticlock wise it print the name of color on top . I think I have to mouse over and mouse out event can you please help me making a demo . http://jsfiddle.net/cdZ73/1/
<label style="display:inline-block">color Name:</label>
<label>red</label>
<div id="full">
<div class="red"></div>
<div class="pink"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
how to get touch start event so that they change position ? change label text ?
I'm not sure I understand what you mean by "rotate". Assuming that what you want is changing the color of the boxes, I made some changes in your HTML and CSS, and then made the classes of the boxes change when clicked.
HTML:
<label style="display:inline-block">color Name:</label>
<label class="colorName">red</label>
<div id="full">
<div id="top" class="red"></div>
<div id="left" class="pink"></div>
<div id="bottom" class="blue"></div>
<div id="right" class="green"></div>
</div>
CSS:
#full > div {
width:100px;
height:100px;
position: absolute;
}
#top { top:10px; left:200px; }
#left { top:120px; left:20px; }
#bottom { top:220px; left:200px; }
#right { top:120px; left:350px; }
.red { background:red; }
.pink { background:pink; }
.blue { background:blue; }
.green { background:green; }
JavaScript:
var arr = ["red","pink","blue","green"];
$('#full').on('click', 'div', function() {
$('.colorName').text($(this).attr('class'));
var sel = arr.indexOf($(this).attr('class'));
$(this).closest('#full').find('div')
.first().removeClass().addClass(arr[sel])
.next().removeClass().addClass(arr[(sel+1)%4])
.next().removeClass().addClass(arr[(sel+2)%4])
.next().removeClass().addClass(arr[(sel+3)%4]);
});
Here's the jsFiddle to test it.
A few things to notice:
I assigned an id for each square to be able to separate position and color in the CSS, so we can change the color of a square just by changing its class.
In the javascript, the colors in the array are in the same order than in the classes of the squares (counter-clockwise in this case).
When a square is clicked, we get the index of its color and use it to replace the class of each square with the new one.
If you uncomment the alerts in the fiddle, it will show you the html of the squares before and after the class changes.
I know the code could be cleaner or better in some ways, that was just a quick try.
Hope it helps!