all elements in class show as even - html

On my webpage there are DIV's that are created dynamically with the class of jOUT.
I want to change the color of every other iteration of the class.
I'm trying to do it this way:
.jOUT:nth-child(even){
background:#eeefff;
}
.jOUT:nth-child(odd){
background:#cccffe;
}
My HTML is as follows:
<div id="outData">
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT isOpaque">
<!-- ... -->
</div>
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT isOpaque">
<!-- ... -->
</div>
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT">
<!-- ... -->
</div>
</div>
Full HTML here
But it's not working. What's really weird is that using the console in Chrome, when I select each jOUT, it shows ALL of them as having the "even" attribute.
I thought for sure that I had invalid CSS or HTML but I can't find it. It has to be something I'm doing, but what? I guess what I'm asking for is an idea for a place to start looking for the problem. I've verified the CSS using w3c CSS verification, and the HTML using HTML Tidy.

Your current CSS is working as it should, because you're targeting ALL children (including input); which means, in this scenario, all your div.jOUT are even - you should rather use :nth-of-type, which will only target instances of div.jOUT ...
.jOUT:nth-of-type(even){
background:#eeefff;
}
.jOUT:nth-of-type(odd){
background:#cccffe;
}
DEMO fiddle

This would work here:
.jOUT:nth-child(4n){
background:#eeefff;
}
More on that
This is somewhat fragile, though. A better approach is to add an alternative style class on those elements, possibly via your server-side app.

Your input[name="outDivider"] elements are in the way, thus making every jOUT element even. Here's a working pen where I took them out and made the selector work properly. I also changed the colors, so it's easier to see.
Edit: #isherwood beat me to it, but if this input[name="outDivider"] elements are absolutely necessary, his solution works best!

Related

How to show/hide nested divs using *only* CSS

I want to show/hide a specific div on-click, but there are some serious caveats. I should also mention I fundamentally know how to do this, using answers gleaned from similar questions here (eg., http://jsfiddle.net/6W7XD/1/), but this is more for the specific situation.
I have a CMS which will not allow me to edit the HTML at all outside of specific modules. Additionally, the CMS is one of those which disables id selectors, so I cannot use those, either.
I understand that the JSFiddle example I provided hinges on specific sibling/child selectors, but I'm wondering if there's a selector which would work for this situation. I can only edit the html in the first module (for simplicity's sake, I'll call it .module-1), but I want to show/hide .module-4
The arrangement of the code in the CMS, however, is a little bit byzantine.
This is a parred down version of what I'm working with (this is for a sidebar, by the way, housed under the beta id). I cannot edit any of the fundamental structure, except in the place marked:
<div id="beta-inner" class="pkg">
<div class="module-1 module">
<div class="module-inner">
<div class="module-content">
<!-- I can edit this area only, so this is where I would place my show/hide link. If the jsfiddle method I posted is appropriate in this situation, I'm assuming it would show/hide after clicking on links placed here. -->
<span class="span3" tabindex="0">Hide Module-4</span>
<span class="span2" tabindex="0">Show Module-4</span>
</div>
</div>
</div>
<div class="module-4 module">
<!-- this is the module I want to show/hide -->
<div class="module-inner">
<div class="module-content">
</div>
</div>
</div>
</div>
</div>
I can edit the CSS as much as I want, provided I don't use id (which has been made inaccessible to prevent people messing up the CMS? I think that's the rationale offered), and I believe that precludes the checkbox hack entirely.
I cannot use JQuery/JS/anything of that nature, since they're disabled. I know this would be a quick thing with jquery, but unfortunately, there's nothing I can do about that.
So... if this is possible... how would I go about doing it?

selecting deep elements in d3

So for my question you can refer to udacity.com main page.
Im trying to access this text -"The Udacity Difference" somewhere on the middle of the page.
I tried this :
d3.select("div.banner-content.h2.h-slim")
d3.select("div.banner-content.h-slim")
None of the above is working. So I tried looking in dev-tools element section for this page.
Then I could hover and see that :
div.banner-content has further
{div.container
{div.row
{div.col-xs-12 text-center
{h2.h-slim}}}}
Then I thought ok I shoud try if I can get the "container" atleast, but then even this
d3.select("div.banner-content.div.container")
OR
d3.select("div.banner-content.container")
doesnt work !!!!
Wheres the fault in logic ?
You can find nested elements using d3's chained syntax as shown below.
HTML:
<div class="banner-content">
<div class="container">
<h2 class="h-slim">Header</h2>
</div>
</div>
Code:
d3.select("div.banner-content").select("div.container").select("h2.h-slim")
EDIT: No need to type such long syntax. Just need to separate the selectors using a space.
d3.select("div.banner-content div.container h2.h-slim")
Code below will also give you the same results in this case. You can specifically add tags if necessary.
d3.select("div.banner-content .container .h-slim")

Storing hidden HTML on a page?

I need to store some hidden HTML for each li element. What's the best way to do this?
I've tried storing it as data on each li element but the hidden HTML tags screw up the li element.
I've managed to do it by storing the data in a hidden text area for each li.
Is this the best way to do it? Or is there a better way.
I'm storing around 200 chars.
Put your hidden HTML in a div / span with a CSS class that has:
display: none;
See the display property.
You can put a hidden field at each li to put the data! I think that hidden fields will work well, and theres no limit for the amount of data.
<input type="hidden" id="myId" value="value here pls..." />
Hopes this help you!
<input type="hidden" value="your hidden stuff here" />
Is your data HTML or is it content? Do you need it for programatic reasons? If it's just a matter of hiding content, as you would for a screen reader when using image-swap, for example, use css:
#my_content {
text-indent: -9999px;
}
Beyond that you could use hidden form fields, or simply use CSS to hide the element entirely.
try this
<div style="display:none;">your html here.....</div>
One way I've recently learned to do this is to use <script> tags. You can add an ID to the script tag, and reference in javascript using that ID to fetch the content and do something with it. I use this for inline templates.
http://www.bennadel.com/blog/2411-Using-Underscore-js-Templates-To-Render-HTML-Partials.htm
<script id="foo" type="text/template">
<p>your text here</p>
</script>
now in real javascript:
<script type="text/javascript">
<!-- assume jquery for the sake of assuming something -->
$(function() {
fooTemplate = $("#foo").clone();
$("#target").append(fooTemplate);
});
</script>
I created a fiddle, but I had to use a div in the HTML area because fiddle doesn't like having an extra script node... The principle is the same -- just change to script in your html in your page.
If your <li> are children of an <ol> element and values you want to store are integers, then you can store them as
<li value="11">DISPLAY ITEM</li>
another approach:
if you want your extra HTML DATA to be present, but you don't want to render it at all (i assume this because you said that you tried to hide them inside a textarea -and thats why im posting this answer) then why not just put it inside comments?
<li> your code....
<!--
<div>my hidden html code of this li, of course i won't have nested comments in here!!!</div>
-->
</li>
Of course this is tricky, and not easy to get this data, but if you need this just for debug it will be ok.
Otherwise i'm in favor of display:none in a wrapped div.
Captain Obvious.
Here are two methods not mentioned in other answers.
The advantage of both methods is that, when you're working in your HTML programming environment, you get normal syntax coloring and error-checking.
Method 1
<template>
<div>Here's my hidden HTML.</div>
</template>
Method 2
<span hidden>
<div>Here's my hidden HTML.</div>
</span>

Stop CSS styles to be applied in particular sections of the code

This question may sound a bit weird/novice/stupid. Please bear with me.
The below code is a small portion of a webpage I have created using CSS,
HTML and coldfusion.
<head>
---------------------Part 1--------------------------------------
<CFIF CompareNoCase('#aid#', 0)>
<cfinclude template="show.cfm">
<cfabort>
</CFIF>
-----------------------------------------------------------------
<link rel="stylesheet" href="styles/style.css?1322665623">
</head>
---------------------------PART 2------------------------------------
<body id="wp-home">
<div id="wrapper">
<div class="header left">
<h1>Name Of Client</h1>
<div class="tagline">
<span class="left blair">home</span>
<span class="headerline"></span>
<span class="right blair">antiques</span>
</div>
</div>
--------------------------------------------------------------------
As you see, I have included a css file, style.css which contains all the style classes required to display PART 2 correctly.
Problem is, whenever part 1 is active ( is true), the same
css is applied to elements in file SHOW.CFM also. This totally messes up the page's original display.
For the time being I have placed a tag below the link to stop page from processing and the css file being loaded.
I have checked show.css multiple times and can confirm that no class from styles.css is used in it.
Hence, my question is if I can stop the styles from style.css to be applied on elements loaded from SHOW.CFM
Pardon me if the question is insanely stupid ;)
If a selector matches then a rule will apply until overridden by a rule (which sets the same property) further down the cascade.
You can either change your selectors to stop them matching the elements you don't want them to match, or you can override all your rules in that section.
HTML5 allows scoped stylesheets, but only Firefox supports it so far. There is also a polyfill JavaScript.
Therefore, you'll have to adapt your markup and styles so that it only matches part2, and not part1. In a pinch, you can precede every selector with #wrapper. For example, if a rule says a{color:red}, substitute that with #wrapper a {color:red;}.
By the way, part1 should probably be a child of <body> instead of <head>.
Use the pseudo-class :not():
.myStyle:not(.classWhereYouDontWantToApplyTheStyle) {
...
}
What about using if else instead of just if to determine which css file you should include? In other words, include styles.css only when part 2 displays. That way, you avoid inheritance and scoping issues altogether.

CSS Form Frameworks?

I have been looking at a couple html/css form frameworks like Uni-Form and Formy. They provide easier management of html forms. I was wondering if anyone knows similar ones. I am not looking for css grid frameworks nor Yahoo's YUI.
blueprintCSS has a form plugin (I don't know if it can be used alone, I haven't tried to do that). http://www.blueprintcss.org/
http://www.blueprintcss.org/tests/parts/forms.html
Baseline CSS also has a form system. I haven't personally used it.
just tried formy and uniform..
i want something styled a bit simpler, just to look clean so i can do the rest..
Formalize is another one, quite simple, worth a look.. looked at uniform and jformer and they're both too comprehensive, if that could be used as a reason to ignore them
Formalize
Uniform (different from Uni-Form)
There is also Tacit.
It's a "class-less" CSS framework were you only need a single <link> statement in your HTML and the web page will have a complete look. In particular, for forms, you get a more finished appearance out of the box, just by including the CSS file, and you don't need to attribute specific classes to your form elements. It also guarantees your form will work visually fine both in Desktop and in Mobile.
You can get an overall idea from the demo page.
Here are also a few examples of pages that use Tacit, and the only work put into was including the CSS file: http://filfreire.com/, http://www.jare.io/, https://socatar.com/,
I think uniform is the best solution for forms.
Html is good and understandable, it has a bunch of tricky form examples solved very nicely ad it pays attention to usability much more than other frameworks.
Other seem to insist more on a vertical typographic rythm than common sense and usability. :)
There is also: Formy http://code.google.com/p/formy-css-framework/
I have developer a single class CSS framework just for forms. The class "form" can be added to any form input to style it properly. You can see the examples on the documentation: https://form.js.org
Here an example of mailing list form:
form {
margin: 1rem;
}
<link href="https://cdn.jsdelivr.net/npm/#codolog/form#1.0.0/dist/form.min.css" rel="stylesheet"/>
<form>
<div>
<div>
<input type="email" class="form" placeholder="Enter your email">
</div>
<div>
<button type="button" class="form full">Subscribe</button>
</div>
</div>
<form>