We Keep Coding

Adding a Class vs Removing a Class to Show Elements on a Web Page

Current Design
In a website I am designing I have a number of elements that initially will appear hidden, until the user needs to see them. For example they have scrolled to a desired height on the page.
Currently this works by JavaScript adding a class line.classList.add('show-header-line');
Which in CSS will be defined next to the main styling for the element. This show variant of the class will only contain attributes required to make the element visible opacity: 1. The main styling for the element will contain the opposite attributes required to hide the element initially opacity: 0.
The Alternative
Of course this could work the other way around. With a class designed to hide the element initially being set in the html, then to be removed when required by JavaScript.
HTML
<div class="header-line hide-header-line" />
JS
line.classList.remove('hide-header-line');
Note
Of course I could add and remove styles directly (without the need for extra classes) in the JavaScript, but this seems much worse. Regarding a lack of separation of concerns.
Question
My current approach means the resulting rendered DOM is littered with elements that have main style class and a show class. The alternative means my html file is littered with elements with a main style class and a hide class. Which is considered better practice? Is there another cleaner way I could be doing this?

I would strongly suggest against using opacity:0 for this, rather use display: none. The reason being that an element with opacity: 0 still occupies space in the markup, whereas display: none will add the element to the DOM, but it won't be rendered in the markup (if that makes sense).
Here is a more detailed explanation
Also, an example using the scroll pass certain point you said, this is how I would do it, note code is untested.
window.addEventListener('scroll', function(){
document.querySelector('#navigation').classList[this.scrollTop > 200 ? 'add' : 'remove']('fixed-nav');
});
css
.fixed-nav {
width: 100%;
position: fixed;
top: 0;
left: 0;
}

how to style class element?

I have a js library on my website which is creating popups for me.
Im trying to style the popups but nothing is working.
the html output is
<div class="lpopup zoom" style="opacity: 1; transform: translate(435px, 200px); bottom: -6px; left: -54px;">
All that I have been trying to is change the bottom and left position.
When I inspect with fire bug the css is
element.style {
bottom: -6px;
left: -54px;
opacity: 1;
transform: translate(435px, 200px);
}
I have tried manipulating the css by doing
.lpopup, .lpopup zoom, .lpopup.style, lpopup element.style {
bottom: 30px;
}
But none of them are working, I've tried as many variations as I can think of.
I have also tried with js
$(".lpopup zoom").css("bottom", "30px");
and other variations
nothing happening though
Im really struggling just trying to change the element style of a popup.
Thanks for any help

The content in the style attribute is more specific then any rule-set, so it will always come last in the cascade and be applied.
The clean solution is: Move the initial CSS out of the style attribute and into the stylesheet. Then write your rules while paying attention to specificity.
The hacky solution is: Use the !important flag
The really nasty solution is: Use JavaScript to change the style attribute (which is what you are trying, but you have the selector wrong).
.lpopup zoom will match: <anything class="lpopup"><zoom> This element </zoom></anything>
You want .lpopup.zoom which will match an element that is members of both classes.

You need .lolup.zoom { css here }.
Sorry, I didn't fully comprehend the question like Mr. Alien did. Yes, inline styles will always override external styles, so you either need to use !important (which I'd avoid), or remove the inline style if possible.

writing style in your own page wont works....
You just open your popup js library and change the style which are added throught the script...
It is very easy way to customize your popup design in js file....

.lpopup{//css here}
.zoom{//css here} should exist in your css file.

Relocating a div

I am trying to relocate a div - the expandable panel with the header 'Why Bother', so it appears where you see it now in the display (at the bottom). But in the HTML, I want it to appear at the top of the 8 panels.
(These panels are located all down the RH side of the content area. And I am doing this to retain the current sites SEO, which is where the guy who I am building this for makes 99% of his money).
http://dev.assessmentday.co.uk/index.htm
I have tried using bottom:0; but this will not work with the expandable panels. Is there a way to do this using CSS or JS?

If you you want it to appear at the top for SEO reasons, then you are going to have to move it to the top in your HTML code. Moving it after the DOM loads (with either JS or CSS) will have no effect on it's SEO, as the SEO spiders will read the DOM the way it appears in the original HTML.
Once you have moved it to the top, you can then move it to the bottom using javascript, so that it appears to be at the bottom.
Assuming it is the first div element in <div class="contentLeft" with the class dropdownPanel , You could use the following jQuery:
$(document).ready(function(){
$('div.dropdownPanel:first').appendTo('#content div.contentLeft');
});
Here is a working example:
http://jsbin.com/ezizix/1/edit
I noticed on your site you have the $ shortcut for jQuery disabled, so be sure to replace it with jQuery:
jQuery('div.dropdownPanel:first').appendTo('#content div.contentLeft');

You can achieve what you want with absolute positioning. I don't know if the dropdowns will work after this, but it is worth a try.
Add this to the existing contentLeft css rules
.contentLeft {
padding-bottom: 90px;
position: relative;
}
Add this to the "special" div
.specialdropdownPanel {
bottom: 20px;
position: absolute;
}

Use jQuery before to do this Example on fiddle
$(".contentLeft .dropdownPanel").eq(0).before($(".contentLeft .dropdownPanel").eq(7));​​​​

Is linking a <div> using javascript acceptable?

I want to link an entire <div>, but CSS2 does not support adding an href to a div (or span for that matter). My solution is to use the onClick property to add a link. Is this acceptable for modern browsers?
Example code:
<div class="frommage_box" id="about_frommage" onclick="location.href='#';">
<div class="frommage_textbox" id="ft_1"><p>who is Hawk Design?</p></div>
My test page is at http://www.designbyhawk.com/pixel. Updated daily.
Thanks for the help.

You don't need to do that. There's a perfectly simple and standards-compliant way to do this.
Block-level elements will by default take up the entire available width. a elements are not by default block-level, but you can make them so with display: block in CSS.
See this example (no Javascript!). You can click anywhere in the div to access the link, even though the link text doesn't take up the whole width. You just need to remove that p element and make it an a.

Attaching a click event handler to a <div> element will work for your users with JavaScript enabled.
If you're looking for a progressive enhancement solution, however, you'll want to stick with a <a> element.

It is acceptable, only it's not good for SEO.
Maybe you can make a <a> element act like a div? (settings it's style to display:block etc.)

It will work in every browser(even IE6). The only problem with this is that search engines probably won't fetch it since it's javascript. I see no other way to be able to make an entire div click-able though. Putting an "a" tag around it won't work in all browsers.

If all you're trying to achieve is a large clickable box, try setting the following CSS on an anchor:
a {
display: block;
padding: 10px;
width: 200px;
height: 50px;
}

HTML:
<div class='frommage_box'>
<a href='location.html'>CONTENT GOES HERE</a>
</div>
CSS:
.frommage_box a{
display:block;
height:100%;
}
By default block elements take up 100% width. We adjust the height to 100%. And this will allow spiders to crawl yoru page.

Ajax auto-complete, with bespoke popup location

I'm doing something that involves ajax auto-completion of phrases in a <textarea>. I've got this working well using the jquery autocomplete plugin; however, it is hard-coded into this to position the popup below the <textarea>.
For what I'm working on, the <textarea> is at the bottom of the page; I ideally want the options to appear above the <textarea>.
Is there a similar existing (and half-decent) autocomplete script that would allow this? My other options are:
try to reposition it after-the-fact using more jquery
hack the plugin code to pieces to reposition it
write something from scratch (sounds simple, but there are a few nuances in a decent autocomplete)
Suggestions?
For info, here's what I ended up with:
#known-parent .ac_results
{
position: fixed !important;
top: auto !important;
bottom: 80px !important;
}

It's not the cleanest solution in the world, but you can overwrite the style properties that the autocomplete plugin writes by using "!important" in your css.
Styles belong in CSS as much as possible anyways.
If I remember correctly, the plugin sets the "top" value in the "style" attribute of the autosuggest div.
In your css you should be able to just do:
#whatever_the_id_of_the_box_is {
position: absolute !important;
top: {{ whatever value you want here }} !important;
}

Can you change the CSS of the popup and assign negative values to margin-top? That should move the content to the top, but your results will look a little weird as the relevant values will be on the top.
Wouldn't it also be possible to edit the autocomplete plugin to edit the style of the container and move the location of the box? I don't think it would be too difficult, but I haven't seen that plugin in a while.
<div style="display: none; position: absolute; width: 151px; top: 21px; left: 91.65px;" class="ac_results"></div>
You'd need to adjust this in the plugin code.
Edit: I actually wouldn't recommend this. There should be a way to reverse the result order in the UI plugin. Do that, and change the style values, and you should have a clean looking result set. I'll add the exact code when I get a chance