I'm sure the answer is really simple, but I can't figure this out :
http://jsfiddle.net/VfQAH/
I have a bunch of divs in a table style layout like so :
<div class="row">
<div class="col boxname">Box Name</div>
<div class="col length">Length</div>
<div class="col width">Width</div>
<div class="col height">Height</div>
</div>
<div class="row">
<div class="col boxname">A</div>
<div class="col length">1</div>
<div class="col width">2</div>
<div class="col height">3</div>
</div>
<div class="row">
<div class="col boxname">B</div>
<div class="col length">1</div>
<div class="col width">2</div>
<div class="col height">3</div>
</div>
I want rows to change color on hover, for that I have :
.row :hover{
background: #003366;
}
But the background changes only on the hovered cell, instead of the whole row.
Do I have to use JS to make it happen like I want, or is there a simple CSS trick that I don't know?
You'd use .row:hover instead of .row :hover to highlight the whole row.
.row:hover{
background: #003366;
}
Your original selector, .row hover, selects all hovered elements which descend from .row, instead of .row itself.
jsFiddle here.
You need to remove the space
.row:hover{
background: #003366;
}
Otherwise it is interpreted as
.row *:hover{
background: #003366;
}
jsFiddle
Related
How do I make:
document.getElementsByClassName("first")[1].getElementsByClassName("second")[2];
but with querySelector?
My guess would be:
document.querySelector(".first[1] > .second[2]");
But that doesn't work.
In your original selection you're grabbing the second element with the class of .first and the third element with the class of .second that is also the child of the former. With this in mind you could use the nth-of-type pseudo selector for both classes and count up accordingly. The only difference with this method in comparison to the JS you have now is that it doesn't use the zero-index.
// document.getElementsByClassName("first")[1].getElementsByClassName("second")[2];
document.querySelector('.first:nth-of-type(2) .second:nth-of-type(3)').style = 'border: 1px solid red;'
.first {
border: 1px solid black;
padding: 10px;
}
.first:nth-of-type(2) {
margin-top: 10px;
}
<div class="first">
<div class="second">Second (1)</div>
<div class="second">Second (2)</div>
<div class="second">Second (3)</div>
</div>
<div class="first">
<div class="second">Second (1)</div>
<div class="second">Second (2)</div>
<div class="second">Second (3)</div>
</div>
document.querySelector(".first:nth-of-type(2) .second:nth-of-type(3)").style.color = "red"
<div class="first">
<div class="second">second1</div>
<div class="second">second2</div>
<div class="second">second3</div>
<div class="second">second4</div>
</div>
<div class="first">
<div class="second">second1</div>
<div class="second">second2</div>
<div class="second">second3</div>
<div class="second">second4</div>
</div>
You don't need the > operator of the querySelector, you could use the following syntax:
document.querySelector('.first:nth-child(1) .second:nth-child(2)');
Within this HTML code:
var test = document.querySelector('.first:nth-child(1) .second:nth-child(2)').innerText;
console.log(test);
<div class="first">
<div class="second"></div>
<div class="second">Hello, I'm your selected div!</div>
<div class="second"></div>
</div>
<div class="first">
</div>
The JS code will produce the output:
Hello, I'm your selected div!
Keep in mind that CSS pseudoselectors start counting from 1, not from 0, so to achieve the example you posted, you'd need to set :nth-child(2) and :nth-child(3).
Also, if you have a different structure, it might as well be worth taking a look at the :nth-of-type selector, as the :nth-child will require to be the nth child of a parent, in an absolute sense. Differently, :nth-of-type will look for the nth (typeof) child of a parent.
So I have a few items on my front page, which shows a few anime. What I am looking to do is when you hover over say the first show, "Hunter X Hunter", I want everything else on the page excluding the one that is being hovered over to be blurred.
I have looked around and seen a few examples, but I feel my situation is a bit different. All the items on the front page are just being echo'ed out from the database.
$fetch = mysqli_query($conn, "SELECT * FROM shows");
while($row = mysqli_fetch_array($fetch)){
$ID = $row['ID'];
$ShowName = $row['ShowName'];
$ShowID = $row['ShowID'];
$Updated = $row['Date'];
$Poster = $row['Poster'];
$Description = $row['Description'];
echo '
<div class="col s2 m2 2">
<div class="card large">
<div class="card-image">
<img src="'.$Poster.'">
<span class="card-title" style="color:white; text-shadow: 0 1px black;background:rgba(0,0,0,0.18);padding: 4px 8px;"><strong>'.$ShowName.'</strong></span>
</div>
<div class="card-content">
<p>'.$Description.'</p>
</div>
<div class="card-action">
<center>Watch Now!</center>
</div>
</div>
</div>
';
}
Can anyone point the way to start? I'm kind of stuck on this.
There are a couple of approaches. The easiest one could be utilizing :hover and :not(:hover) selectors, which will blur everything when you hover your mouse inside of the parent container <div class="col s2 m2 2">, in your case, but the child element that is being hovered (<div class="card large"> in your case) will remain non-blurred.
.container {
display: flex;
}
.card {
margin: 1rem;
}
.container:hover > .card:not(:hover) {
filter: blur(4px);
}
<div class="container">
<div class="card">
<img src="http://placekitten.com/120/120">
</div>
<div class="card">
<img src="http://placekitten.com/120/120">
</div>
<div class="card">
<img src="http://placekitten.com/120/120">
</div>
<div class="card">
<img src="http://placekitten.com/120/120">
</div>
</div>
You could also do that with JS in multiple ways, for example, by attaching an onmouseover event to add a class.
This is doable, see below:
HTML
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<ul>
CSS
body:hover li:not(:hover) {
filter: blur(2px);
}
Live example can be found on codepen here: https://codepen.io/anon/pen/eXpmZL?editors=1100
How this works is we do not want to blur any list items unless the user has a mouse hovering over the body of the page. This prevents items from blurring when say the mouse pointer is hover over the browser chrome or scrollbar. Then the CSS statement reads blur all li components but not the one currently being hovered over.
I'm trying to design a page where there is a task list on the left and many boxes (one for each employee) on the right so I can dispatch all the tasks quickly.
I don't know if it is relevant, but I use Bootstrap. Here is my list's markup :
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">Tasks</div>
</div>
<div class="panel-body panel-body-table">
<div id="Unassigned_1" style="margin-left:0px">Task 1</div>
<div id="Unassigned_4" style="margin-left:10px">Task 1.1</div>
<div id="Unassigned_8" style="margin-left:20px">Task 1.1.1 Some long name so I can test</div>
<div id="Unassigned_9" style="margin-left:20px">Task 1.1.2</div>
<div id="Unassigned_5" style="margin-left:10px">Task 1.2</div>
<div id="Unassigned_8" style="margin-left:20px">Task 1.2.1</div>
<div id="Unassigned_9" style="margin-left:20px">Task 1.2.2</div>
<div id="Unassigned_2" style="margin-left:0px">Task 2</div>
<div id="Unassigned_3" style="margin-left:0px">Task 3</div>
<div id="Unassigned_6" style="margin-left:10px">Task 3.1</div>
<div id="Unassigned_7" style="margin-left:10px">Task 3.2</div>
</div>
</div>
</div>
And here's the javascript (I'm just begining this page, so the 'drop' code is not there yet)
<script>
$(document).ready(function() {
$('div[id^="Unassigned_"]').draggable({ helper: 'clone', containment: '.page-content-wrap' });
});
</script>
For some reason I don't know, if I drag any task (such as the one with the long name) to the right, the text wraps when it "hits" the right border of the panel, then when I pass the border with the cursor, the item follows, but it is still wrapped.
Does anyone know why it does that? Is there a way to fix it?
Thanks a lot
You can fix a width of the dragging element using classes .ui-draggable.ui-draggable-dragging
.ui-draggable.ui-draggable-dragging {
width: 100%;
border: 1px solid #eee;
padding: 5px;
color: #888;
}
Fiddle demo
I've got the following div structure which I created using bootstrap. The html markup is as following.
<section class='content-wrapper order-summary-wrapper'>
<div class="container">
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 order-summary-details">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div>
<h4>Delbetalning Engångskostnad</h4>
<p>150kr/mån</p>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<h4>Abonnemang</h4>
<p>199kr/mån</p>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class='price-container-wrapper'>
<div class='price-container'>
<h4>Månadskostnad</h4>
<p>199kr</p>
</div>
<div class='clearfix'></div>
<div class='price-container price-container-padding'>
<h4>Bindingstid</h4>
<p>0 mån</p>
</div>
<div class='clearfix'></div>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class='price-container'>
<h4>Månadskostnad</h4>
<p>199kr</p>
</div>
<div class='clearfix'></div>
<div class='price-container price-container-padding'>
<h4>Bindingstid</h4>
<p>0 mån</p>
</div>
</div>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Rensa
Beställ
</div>
</div>
</div>
</section>
And I've styled it to look like in the following mockup.
Now what I've to do is when I click on each arrow icon the respective box should expand as below.
The height of each container is dependent on the content inside. I've tried making the container position:absolute and then using jQuery slideDown,slideUp methods. But this doesn't work as expected since when I make a container position:absolute the other neighboring containers stack on the left. How can I achive this effect using css + jquery. Or is it possible with CSS only?
will provide the current CSS of the containers if necessary.
following is the fiddle of the container. I've added the entire css since couldn't filter out the exact css needed for this bit of elements.
fiddle
If I get you right, you can do it with bootstrap:
http://getbootstrap.com/components/#navbar
I apologize but I don't have time to realize the all think.
I can quickly show you a way it can be done, you will have to adapt it and make it better.
Try add this to your fiddle:
CSS:
.col-xs-3{
border:2px solid black;
overflow:hidden;
max-height:50px;
-webkit-transition:max-height 0.4s ease 0s;
-moz-transition:max-height 0.4s ease 0s;
transition:max-height 0.4s ease 0s;
}
/*
.col-xs-3:hover{
max-height:400px;
}
*/
JS: (this is vanilla js no-jquery)
-- make sure you select "no wrap - in < head > "-- top/left in fiddle
window.addEventListener("load",function(e){
var m = document.getElementsByClassName("col-xs-3");
for(var i=0; i<m.length; i++){
m[i].isOpen = false;
m[i].addEventListener("click",function(e){
if(this.isOpen){ this.style.maxHeight = "60px"; this.isOpen = false; }
else{ this.style.maxHeight = "400px"; this.isOpen = true; }
},false);
};
},false);
I wan to know if it's possible to re-order vertical columns on Bootstrap 3.
.col-xs-8 {
background: magenta;
}
.col-xs-4 {
background: cyan;
}
.col-xs-12 {
background: yellow;
}
<div class="container">
<div class="row">
<div class="col-xs-8">Content</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12 col-xs-push-12">A</div>
<div class="col-xs-12">B</div>
<div class="col-xs-12">C</div>
<div class="col-xs-12">D</div>
</div>
</div>
</div>
</div>
JSFiddle
What I want it's to move the items on the sidebar from ABCD to BCAD
What you want to achieve can not be done for responsive layout.....but assuming you have static content then, it can be done using margins :
Here is a demo
Wrap your ordering divs in some parent div and apply responsive layout to it....in the demo, i have dome that through abcd class ( its not responsive though since its in pixels)
HTML
<div class="abcd">
<div class="col-xs-12 " style="margin-top:-110px;color:#000">A</div>
<div class="col-xs-12" style="margin-top:-150px;color:#000">B</div>
<div class="col-xs-12" style="margin-top:-130px;color:#000">C</div>
<div class="col-xs-12" style="margin-top:-90px;color:#000">D</div>
<div>
EDIT :
demo with percentage value
In %ge, you can vreate something like :
<div class="abcd">
<div class="col-xs-12" style="margin-top:-13%;color:#000;">A</div>
<div class="col-xs-12" style="margin-top:-33%;color:#000">B</div>
<div class="col-xs-12" style="margin-top:-23%;color:#000">C</div>
<div class="col-xs-12" style="margin-top:-3%;color:#000">D</div>
<div>
CSS
.abcd {
margin-top:33%;/* keep this equal to margin of B, but with opposite sign */
}
Assuming you have to insert first child just before the last child.
You can do it with jquery. See Demo
$( ".flexbox div:first" ).append().insertBefore( ".flexbox div:last" );