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?
Related
Context
I am creating a component that displays important statistics that looks like this:
It will be used in a few contexts:
As part of a dashboard where there will be many of these components for different stats such as Twitter followers and Github stars.
It's also going to appear on its own within a blog post (which is about how this component is built).
Question
What would be the most appropriate HTML to make this component accessible? Do I need to use ARIA attributes at all?
My previous approach
I'm leaning towards using a figure element where the title, "Github followers" is the caption.
<figure>
<figcaption>Github followers</figcaption>
<span>10</span>
</figure>
My current approach
I've changed to using divs since I won't know all the contexts where this component is going to be used. Instead I've used the aria-labelledby attribute to associate the number with its label.
<div>
<div id="followers">Github followers</div>
<div aria-labelledby="followers">10</div>
</div>
Thanks to everyone who commented on this post. I'm going to try to answer this as best I can with the information I've gathered.
<div>
<div id="followers">Github followers</div>
<div aria-labelledby="followers">10</div>
</div>
This is part of a reusable React component, so I'm using divs instead of contextual/semantic HTML elements. To provide assistive technologies with useful information, I am using the ARIA labelledby attribute.
I've written about this in more detail on my blog if anyone is interested in the full solution I built: https://www.jamiedavenport.dev/blog/building-a-stat-card-component
So I'm pretty sure the answer to this is no, don't do this, but im curious if there is some special case where this might be useful.
I'v found in the past if I accidentally leave a <div> without a closing </div> and close the div's parent instead(if the parent is of a different type like a <td> for instance), when the page is rendered the DOM picks up the slack and closes the div for me. This is something I would expect a syntax highlighter to pick up but mine at least doesn't bark at me if something like this happens, which makes me think there might be a niche use for this, but I might be thinking too deeply into something that is just an example of bad code.
An example would be
<td id="table_cell">
<div class="tc_wrapper">
<div id="tc_content1"> ... </div>
<div id="tc_content2"> ... </div>
<div id="tc_content3"> ... </div>
<div id="tc_content4"> ... </div>
<!-- this is where u would normally close tc_wrapper
</div>
-->
</td>
Note: I'm dyslexic and have to depend pretty heavily on syntax highlighting to make sure heavily nested things are correctly closed and ordered which is why this scenario tends to happen...
No. Better to close everything off unless it's closing tag is itself such as <img />. It will improve debugging later down the line or if you need to improve your code.
First post here with something that is probably easy but escapes me.
On this site, which I wrote from scratch, the contact link does not jump to the div class "contact".
The site is www.whatyousaycounts.com. I am also open to any other feedback for improvements that you see are needed.
Hyperlinks can only refer to ids, you are trying to refer to a class though. Classes can be used several times, therefore, your link can't target anything.
All you have to do is add the id="contact" to your div and it will work properly.
Each of your other sections have something like:
<div class="videos" id="videos">
Whereas your Contact section is:
<div class="contact">
It needs the id to be set as well.
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!
What is the 'best' way to handle the html markup for partial views? (which are also refreshed using AJAX) The biggest issue I run into is where to place the 'container' div...
Consider having a masterpage and a partial view.
(class="" could be interchanged with id="" depending if the partial is guaranteed to be unique, however this isn't really important to the issue i think)
Masterpage:
<div id="place1" class="placeholder">
<!-- render partial -->
</div>
Partial:
<div id="partial1" class="partial">
<!-- content -->
</div>
I feel that something isn't being done right. However I cannot remove the div in the masterpage, because I need that to 'encapsulate' the response from AJAX partial updates. And also I cannot move the div in the partial to the masterpage, because that would require to move 'partial' info to the masterpage...
How do you handle this?
I would say that it terms of the semantic description of what is happening here, of providing good hooks for styling and scripting, and also in terms of general robustness against future uses and changes, that using both divs is the best way to go.