DarkxPunk

Even though I have played with the font-weight with no results I have even made the text on the beta page to be wrapped in an anchor tag like it is on the non beta page. As you can see even with that, and the addition of font-weight: normal; the appearance is the same as the h2, but not the same as the non beta one. Thanks for the help though.

Hey everyone, So here are two sites: http://www.beta.sunburstrarediamonds.com http://www.sunburstrarediamonds.com Now the specific issue lies where you see "1-844-RAREGEM". The beta one displays thicker than the non beta one, they are styled exactly the same (beyond their colour), but they do not display the same. I can't figure out why... Hope someone has an idea, Thanks.

I did that and it changed nothing...

Here is the CSS: Now how come the border does not appear? Thanks for any pointer. If you need the HTML let me know.

Really no ideas, pointers?

Hey Guys, I am looking to build a drop down menu that is touch friendly, the only stipulation is to make it only use CSS… Through my research I have not found any, but maybe someone here has some clues. For the most part standard drop downs using hover works fine for iOS, but Android and Windows Phone/Windows 8 seem to lag behind in making it feasible for use. Any ideas are welcomed! Thanks!

I have been using a CSS trick to make divs focus-able by adding tabindex="-1". But when you click away from the div it stays focused.

I can't seem to figure out how to make an element lose focus when clicking away from an element. Maybe this can't be done in CSS as my massive searching has given me very little. Thanks for any ideas.

Can you post your exact code so we can see maybe where you went wrong?

JQuery is great once you have a broad understanding of javascript. The problem I see now in days is a lot of people who can write JQuery but not Javascript (crazy right?). I black list it cause I don't wanna be babied until I understand where it comes from. This tool i am making is a learning experience and a tool for people like myself. Simple as that.

I am sorry did you look at the code examples I linked to? It explains it all, and style though used for styling elements still has to be written as CSS. Otherwise you link external CSS files.

Originally I put the button behind cause it was causing issues with Chrome and Opera (I can't get the issue to repeat now, I am so confused) anyway I need to make this code slimmer and it must be possible. Whether we have to do some oddities or not, my goal is to make this clean, and simple. To clarify this is my goal and again reinforcing why I did not include HTML originally. All I want is a toggle switch that can be added by linking to one JS file, one CSS file, and as minimal lines of html as possible. Below will be the bare minimum html required: /* Backup for older IE's when JS is turned off */<!--[if lte IE 9]><noscript><style>.hideShowLabel {display: none;}.hideShowContent {display: block;}</style></noscript><![endif]-->/* The Actual Button */<div class="hideShowToggle"><input type="checkbox" id="hideShowInput2" class="hideShowInput"/><label for="hideShowInput2" class="hideShowLabel" onclick="hideShowToggle(this)"><!----><input type="button" class="hideShowButton show" value="Show"/><!----><input type="button" class="hideShowButton hide" value="Hide"/><!----></label>/* Can be any element */<div class="hideShowContent">Stuff</div></div> With this added around an element the user would like to hide it will do so without the need of JS by adding class="hideShowContent" to the following element. The CSS trick required for this to work is as follows: .hideShowInput { width: 0; height: 0; display: none; position: absolute; } .hideShowLabel,.hideShowButton { margin: 0; border: 0; width: 200px; padding: 8px 0; font-size: 100%; position: relative; cursor: pointer; } .hideShowButton { background: red; } .hideShowButton:focus { outline: 0; } .hideShowLabel:hover .hideShowButton { background: blue; color: #ffffff; } .show { display: inline-block; } .hide,.hideShowContent { display: none; } .hideShowInput:checked > .hideShowLabel ~ .show { display: none; } .hideShowInput:checked > .hideShowLabel ~ .hide { display: inline-block; } .hideShowInput:checked ~ .hideShowContent { display: block; } But obviously that does not work in IE 9 and under so we need a JS alternative. But I need it simple. The solution which does work is as follows: function hideShowToggle(e) { var btn = e.childNodes[1]; var aftClk = e.childNodes[3].value; var bfrClk = e.childNodes[5].value; var nS = e.nextSibling; btn.value = btn.value == aftClk ? bfrClk : aftClk; while(nS.nodeType != '1') { nS = nS.nextSibling; break; } nS.style.display = nS.style.display == 'block' ? 'none' : 'block';} Now since this all works and I have tested it across browsers I will stick with this and maybe play with it as I go. Any additions or further simplification is welcomed. I just don't wanna grow this any bigger... Thanks for all the inputs.

http://codepen.io/anon/pen/yGDCA - Check it. http://jsbin.com/jupeseho - Pick your poison.

Sorry for the miscommunication about DIVs, I should have been more clear. Also not to sound rude or anything but my goal (and reason for not showing html) is because it should be nearly irrelevant. To make it easier though I will attach it here: <style> * { font-family: Helvetica,Arial; } html,body { margin: 0; padding: 0; } .hideShowInput { width: 0; height: 0; display: none; position: absolute; } .hideShowLabel,.hideShowButton { margin: 0; border: 0; width: 200px; padding: 8px 0; font-size: 100%; position: relative; cursor: pointer; } .hideShowButton { background: red; z-index: -1; } .hideShowLabel:hover .hideShowButton { background: blue; color: #ffffff; } .show { display: inline-block; } .hide,.hideShowContent { display: none; }</style><script type="text/javascript">//<!-- window.onload = init; function init(){ var inputs = document.getElementsByClassName('hideShowLabel'); for(i=0 ; i<inputs.length ; i++){ if (inputs[i].className == 'hideShowLabel') { var nS = inputs[i].nextSibling; while(nS.nodeType != '1') { nS = nS.nextSibling; break; } nS.className = 'hideShowContent'; } } } function hideShowToggle(e) { var btn = e.childNodes[1]; var aftClk = e.childNodes[3].value; var bfrClk = e.childNodes[5].value; var nS = e.nextSibling; btn.value = btn.value == aftClk ? bfrClk : aftClk; while(nS.nodeType != '1') { nS = nS.nextSibling; break; } nS.style.display = nS.style.display == 'block' ? 'none' : 'block'; }//--></script> <!--[if lte IE 9]> <noscript> <style> .hideShowLabel { display: none; } .hideShowContent { display: block; } </style> </noscript> <style> .hideShowButton { z-index: 1; } </style> <![endif]--> <input type="checkbox" id="hideShowInput1" class="hideShowInput"/> <label for="hideShowInput1" class="hideShowLabel" onclick="hideShowToggle(this)"><!-- --><input type="button" class="hideShowButton show" value="Show"/><!-- --><input type="button" class="hideShowButton hide" value="Hide"/><!-- --><input type="hidden" class="hideShowButton show" value="Show"/><!-- --></label> <div>Stuff</div> <br/> <input type="checkbox" id="hideShowInput2" class="hideShowInput"/> <label for="hideShowInput2" class="hideShowLabel" onclick="hideShowToggle(this)"><!-- --><input type="button" class="hideShowButton show" value="Show"/><!-- --><input type="button" class="hideShowButton hide" value="Hide"/><!-- --><input type="hidden" class="hideShowButton show" value="Show"/><!-- --></label> <a href="#">RANDOM LINK</a> <br/> <input type="checkbox" id="hideShowInput3" class="hideShowInput"/> <label for="hideShowInput3" class="hideShowLabel" onclick="hideShowToggle(this)"><!-- --><input type="button" class="hideShowButton show" value="Show"/><!-- --><input type="button" class="hideShowButton hide" value="Hide"/><!-- --><input type="hidden" class="hideShowButton show" value="Show"/><!-- --></label> <p>BIG GIANT TEXT IN A PARAGRAPH AREA</p> I have tested this working in all browsers (other than aforementioned adding of the init which causes them to cascade on when first clicking. Thanks for any input.

Your whole system makes sense but way to much code than is needed and it focuses on divs only. If you read my previous post that does everything I am expecting, but the whole hide show cascading from the start for what reason, I don't know...

I need to get some sleep so maybe someone has an idea what is going on while I sleep... window.onload = init;function init(){ var inputs = document.getElementsByClassName('hideShowLabel'); for(i=0 ; i<inputs.length ; i++){ if (inputs[i].className == 'hideShowLabel') { var nS = inputs[i].nextSibling; while(nS.nodeType != '1') { nS = nS.nextSibling; break; } nS.className = 'hideShowContent'; } }}function hideShowToggle(e) { var btn = e.childNodes[1]; var aftClk = e.childNodes[3].value; var bfrClk = e.childNodes[5].value; var nS = e.nextSibling; btn.value = btn.value == aftClk ? bfrClk : aftClk; while(nS.nodeType != '1') { nS = nS.nextSibling; break; } nS.style.display = nS.style.display == 'block' ? 'none' : 'block';} Saying I have two hide show buttons, when I click the first one the first time it shows both, but if I click to hide the 2nd and click the first twice it has no effect on the 2nd. Why does it effect both on first click? If I click the 2nd it has no effect on the first no matter what. Also note this was not happening until after I added the init function. Thanks for any input...

Just to preface a few goals. No jquery, as simple as possible, no ids. I want something that can be implemented anywhere quickly like a little module that has no pre-req but works in all browsers. So simple I want a hide/show toggle on an adjacent div. He links to one css file, and one js file and puts the one line of html which is the hide show button. I have not seen it done anywhere and I wanna make this work. I will keep playing myself and posting code, but please keep throwing back ideas.

That is sadly true. No matter how hard I have tried to build a proper database table with CSS, ugh it is a pain in the ######. In those cases (and I bet there are others) tables can seem like the only option. But ###### there must be a way to evolve completely from tables! Also more support for davej, never use them for page layout...

We'll keep posting on here if you need ideas or help and we all be glad to point you in the right direction.

Yeah he has a standalone on there.

Well the reason in my head that is should work (guess I should have included this) is element = l.nextSibling... Saying that I have tried while(element.tagName != 'div') { element.nextSibling } but no real luck... I still can't get basic javascript logic wrapped around my head

Just my two cents… Personally I find closing ALL TAGS is consistent, while being picky because they are standalone is just well inconsistent. Does it matter? No. Is it valid? Either or. Now think about how we get into habits. If you close all your tags you will for sure never forget to close all your tags, if you get selective based upon standalone, well then after a few years when you forget this discussion you will start doubting yourself again. Conclusion - Close all your tags… Just me.

I use the following: http://www.fastsecurecontactform.com Has an admin backend thats easy to configure. Hope this helps.

Well that is the thing… I have attempted to test the elements, but every time I do that it results in two things. One it simply just says "undefined" or it goes into an infinite loop. Just to make sure I am not crazy but should it not be: while(element.tagName != 'div') { l.nextSibling } Maybe I am crazy...

So I resolved the issue unintentionally… This code works: function hideShowToggle(l) { var element = l.nextSibling.nextSibling; element.style.display = element.style.display == 'block' ? 'none' : 'block'; var input = l.childNodes[1]; input.value = input.value == 'Hide' ? 'Show' : 'Hide';} Now obviously this does have issue with the text nodes existing, but not only were the text nodes breaking the JS, but it was also breaking the styling. So the obvious solution, comment out the text nodes. It is not pretty, but it is what needed to be done. Now I am fine. If you do figure out a way to improve this thought, let me know.