I've got a page with a repeater and a bunch of documents that should be hidden to start and then shown with a plus sign next to each.
My question is - do I have to assign unique ID to each document DIV to make it be able to toggle hidden and shown?
What's the most code-efficient way to handle this?
Here is a quick example:
http://jsfiddle.net/aaamU/
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
</head>
<body>
<div id="repeater">
<div class="document">
<div class="title">Document 1</div>
<div class="button">+</div>
</div>
<div class="document">
<div class="title">Document 2</div>
<div class="button">+</div>
</div>
<div class="document">
<div class="title">Document 3</div>
<div class="button">+</div>
</div>
</div>
</body>
</html>
CSS
#repeater .document
{
height: 20px;
border: 1px solid black;
width: 200px;
padding: 10px;
}
.document .title
{
float:left;
}
.document .button
{
float:right;
}
JS
$(document).ready(function(){
$(".title").hide();
$(".button a").click(function(event){
$(this).parents(".document").children(".title").toggle();
event.preventDefault;
});
});
Here is a Fork with the sliding version:
http://jsfiddle.net/W5QkY/1/
You don't have to assign an ID, you can use their position in the document to identify the correct element.
For example, you have something like this:
<div id="documents">
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
You can use jquery like so to trigger individual elements:
$('#documents > div').eq(0).show();
Where the number passed to the eq() method will return the div at that index.
no you dont have to assign them all a different Id. There are many ways to select multiple dom elements with one selector expression
you have a few options
1) you can assign them all the same class and then do $('.className').show()/.hide()
2) you can select them by a css selector related to the page's layout i.e $('#mainContent img').hide() will hide all images inside of a container (prob a div) with id mainContent
You could easily avoid unique id:s on the html tags by using jQuery's traversing capabilities:
<div class="frame">
[Document title] +
<div>[document contents, links or whatever go here]</div>
</div>
And the jQuery magic:
$(function() {
$('.frame a').click(function() {
var $t = $(this);
if ($t.html()=='+')
{
$t.html('-').next('div').show();
} else {
$t.html('+').next('div').hide();
}
});
});
You could obviously switch the .show()/.hide() calls to some animation of your choice.
Related
So I am building a website using Angular.
I then have some code that looks something like this:
<div class="main">
<div class="container">
<app-name>
<div class="app-child-div"></div>
</app-name>
</div>
</div>
And I am told that the app-name name can actually change when deployed. So I am not entirely sure that the name will remain the same. However, using SCSS, how can I target the app-child-div with CSS ?
Right now I am doing something like this:
.main {
.container {
app-step-0 {
.app-child-div {
background: green;
}
}
}
}
But that doesn't seem to do the trick. So is there anything I can do?
Add some attribute (e.g. class) that will identify your element.
E.g. add class for it:
<div class="main">
<div class="container">
<app-name class="app-name-wrapper">
<div class="app-child-div"></div>
</app-name>
</div>
</div>
Then use this .app-name-wrapper in CSS
I have frequent bundling together of css classes like this:
<div class="row z-depth-2 gradient-background">
... Blah
</div>
I have these three classes: row z-depth-2 gradient-background used together in more than 200 places. How can I introduce a single class for these three taken together?
I don't mind CSS or SASS. One other problem is that row and z-depth-2 are defined in materialize.css which I don't wanna touch. So I can't simply extend these classes in SASS like so:
.input-group {
#extend .row, .z-depth-2, .gradient-background
}
So I want to be able to do something like this:
<div class="input-group">
... Blah
</div>
Why not simply use the three classes as one selector like this .row.z-depth-2.gradient-background. It will allow you to select elements that have these 3 classes (it can have more of course) :
div {
margin:10px;
height: 20px;
background: blue;
}
.row.z-depth-2.gradient-background {/* pay attention as there is no spaces between the classes*/
background: red;
}
<div class="row z-depth-2 gradient-background">
<!-- Select this one -->
</div>
<div class="row gradient-background">
</div>
<div class="row z-depth-2">
</div>
<div class="row gradient-background z-depth-2 more-class">
<!-- Select this one -->
</div>
Usefull links to get more details :
https://css-tricks.com/multiple-class-id-selectors/
Using two CSS classes on one element
UPDATE
If you want to use a new class that will later be replaced with these 3 ones, you can use a small jQuery script in order to do what you need, like this :
//select all element with class input-group
$('.input-group').each(function() {
$(this).removeClass('input-group'); //remove input-group
$(this).addClass('row z-depth-2 gradient-background'); //add the other classes
})
div {
margin: 10px;
height: 20px;
background: blue;
}
.row.z-depth-2.gradient-background {
/* pay attention as there is no spaces between the classes*/
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
</div>
<div class="class">
</div>
I want to display .tel in #header only if it's exists in #switcher.
The basic situation:
<div id="switcher"><div class="tel"></div></div>
<div id="header"><div class="tel"></div></div>
But user in system can turn off displaying .tel in #switcher. After that the code is something like this:
<div id="switcher"></div>
<div id="header"><div class="tel"></div></div>
In that situation I want to hide .tel in #header .
I know how to do it with jquery, but can I do it just with css or scss ?
This solution depends on where <div id=switcher> needs to appear on the page, but... if you're crafty, you can re-order your markup something like this:
<header>
<div id="switcher">
<div class="tel"></div>
</div>
<div class="tel"></div>
</header>
and then use the following style rules:
header .tel {
display: none;
}
header #switcher .tel,
header #switcher ~ .tel {
display:block;
}
I'm in a situation where the number of elements showed is variable, and I need a strange solution which I'm not able to achieve, I even doubt if it's achievable only with css.
I need to select the last-child if my number of elements is odd, and the last 2 child if the number of elements is even.
I've been trying with nth-last-child, :not(:nth-last-child()), odd and even, but never got a good solution.
Anyone has any idea/advice about this issue a part of adding a class "odd" like on html tables?
Thanks a lot in advance!
Here is one way...
.wrap div:last-child,
.wrap div:nth-last-of-type(-n+2):not(:nth-child(even)) {
color: red;
}
<div class="wrap">
<div>Odd</div>
<div>Even</div>
<div>Odd</div>
<div>Even</div>
<div>Odd</div>
<div>Even</div>
</div>
<hr>
<div class="wrap">
<div>Odd</div>
<div>Even</div>
<div>Odd</div>
<div>Even</div>
<div>Odd</div>
</div>
You can use CSS like so:
li:last-child:nth-child(odd) {
/* Last child AND odd */
background: red;
}
li:nth-last-child(2):nth-child(odd),
li:last-child:nth-child(even) {
/* Before last child AND odd */
/* Last child AND even */
background: green;
}
Demo: https://jsfiddle.net/hw0ehrhy/
Absolutely it can be done, with pure CSS. See the complete code below (odd child, last child red; even childs, last 2 childs green)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#but1').click(function(){
var count = $('p').length;
if (count%2!=0) {$('div>p:last-child').css('background','red');}
else {$('div>p:last-child').css('background','green');alert(count);
$('div>p:nth-last-child(2)').css('background','green');
}
});
});
</script>
</head>
<body>
<button id=but1>Click</button>
<div>
<p>This is one. </p>
<p> This is two. </p>
<p> This is three. </p>
<p> This is four. </p>
<p> This is five. </p>
<p> This is six. </p>
</div>
</body>
</html>
Enjoy, the coding ;)
OK, what I need is fairly simple, though it's one of those things that I've never managed to get my head around when using CSS. So, here I am...
I'm using a custom template, built around Twitter Bootstrap.
This template features a section (declared as span6 row), containing small blocks (declared as span3). In the end, the sub-blocks form rows (2 blocks per row).
Here's a visual example :
The result is ok, though I'd still need one thing :
HOW do I make sure that 2 adjacent blocks have the exact same height? (e.g. The 1st block - "Some title here" - and the 2nd block - "Awesome work" - white rectangles being of the exact same height, no matter what the contents are... (much like the 2 last blocks)).
Any ideas?
P.S.
Please let me know, in case you need to know anything else about the "inner" structure.
I'm pretty sure it may have to do with "clear" fixes, etc - but to be honest I've never actually understood the... magic behind the trick... :(
Try the following:
1) Assigning parent div with "display:table" and child div's with "display:table-cell" like:
CSS:
.parent-div{
border: 1px solid grey;
display: table;
float: none;
}
.child div{
border: 1px solid grey;
min-height: 100%;
height: 100%;
display: table-cell;
float: none;
}
HTML:
<div class="span6 parent-div">
<div class="row">
<div class="span3 child-div">
......
</div>
<div class="span3 child-div">
......
</div>
</div>
2) You can also use "EqualHeights jQuery Plugin":
Include it your head by adding
<script language="javascript" type="text/javascript" src="jquery.equalheights.js"></script>
And call the function on your .parent-div as:
$('.parent-div').equalHeights();
For detailed usage and limitations, whether it is suitable for your website first read this and proceed.
<!-- ------------------------------------------
Bootstrap 2 : Markup
Credit : http://www.2scopedesign.co.uk/responsive-equal-height-columns-in-bootstrap/
------------------------------------------- -->
<div class="row">
<div class="span6">
<div class="content-box">
Content here
</div>
</div>
<div class="span6">
<div class="content-box">
Content here
</div>
</div>
</div>
<!-- ------------------------------------------
jQuery part
------------------------------------------- -->
<script>
//equal height plugin
$.fn.max = function(selector) {
return Math.max.apply(null, this.map(function(index, el) {return selector.apply(el);}).get() );
}
$(window).load(function(){
equalHeight();
});
$(window).resize(function(){
$('.content-box').css('height', '');
equalHeight();
});
function equalHeight(){
if ( $( window ).width() > 768 ) {
$('.content-box').height(function () {
var maxHeight = $(this).closest('.row').find('.content-box').max( function () {
return $(this).height();
});
return maxHeight;
});
}
else {
$('.content-box').css('height', '');
}
}
</script>
Set a min-width. So in your css have:
#whatevertheboxitscalled { min-width:100px; }
Obviously it doesn't have to be 100px, but whatever size fits best.