Code

Minnesota Web Developer

A little something about everything...

Change Style for Multiple Elements onClick: getElementById, getElementsByClassName, querySelectorAll oh my

With a bit of creative javascript and these Methods you can do some pretty neat stuff.

On this page I've create an example for multiple elements display block/none function based onclick function. You could also utilize checkbox.checked, onmouseover, or other such functions.

You can replace querySelectorAll with getElementsByClassName or getElementById for broader browser support or you can simply create a detector onload to look for an element on the page and hide it if the Method is supported with querySelector like this:

window.onload = function(){
 document.querySelector('#compat').style.display = 'none';
    }

The Code:

HTML

<div class="aa" style="display: block;">class: aa, no id</div>
<div class="aa" id="aa" style="display: block;">class: aa, id: aa</div>
<div class="bb" style="display: block;">class: bb, no id</div>
<div id="aa" style="display: block;">no class, id: aa</div>
<a onclick="showClass('.aa');" href="#">Looks for class: aa</a>
<a onclick="showClass('#aa, .bb');" href="#">Looks for class: bb, and id: aa</a>
<a onclick="showClass('.aa, .bb');" href="#">Looks for class: aa, bb</a>
<div id="compat" style="display:block;position:absolute;width:100%;height:100%;background-color:#fff;top:0;left:0;padding:50px; "><h1>Compatability Error!</h1>
<p>This page uses newer coding technologies. You should consider upgrading your browser.</p>
<p>for suggestions, please go <a href="http://outdatedbrowser.com/en">here</a>.</p>
<a href="#" onClick="document.getElementById('compat').style.display = 'none';">Continue Anyways</a>

Javascript

function showClass(s){
 var e = [];
 var e = document.querySelectorAll(s);
 for (var i = 0; i < e.length; i++){
    if(!e[i])return true;

    if(e[i].style.display=="none"){
       e[i].style.display="block"
    } else {
       e[i].style.display="none"
    }
 }
 return true;
}

Use your imagination and see what you can do with it.

Here is a working example:

class: aa, no id
class: aa, id: aa
class: bb, no id
no class, id: aa
Looks for class: aa Looks for class: bb, and id: aa Looks for class: aa, bb

Compatability Error!

This page uses newer coding technologies. You should consider upgrading your browser.

for suggestions, please go here.

Continue Anyways

How to target specific browsers within certain platforms, such as mozila & safari within mac for CSS design

You would first need to target the operating system which can be best accomplished by using javascript such as:

if(navigator.userAgent.indexOf('Mac') > 0) {

//code

}

Now in order to target the browser version you can use things such as if ie triggers for internet explorer

<!--[if (gt IE 6)&(lte IE 7)]>
<link href="/css/IE.css" rel="stylesheet" type="text/css">
<![endif]-->

or webkit for mozila or safari

@media screen and (-webkit-min-device-pixel-ratio:0) {
your css here
}

final code to target internet explorer on mac would look something like this:

if(navigator.userAgent.indexOf('Mac') > 0) {

<!--[if (gt IE 6)&(lte IE 7)]>
<link href="/css/IE.css" rel="stylesheet" type="text/css">
<![endif]-->


}

 

 

 

How to make google only look at lower case url for sites hosted on windows IIS Server, fixes duplicate title tags in Webmaster Tools error

This method can be used to fix duplicate content errors and make it so google only indexes one version of your urls, which will prevent you from getting a negative modifiers.

In order to do this you have two options.

  1. Use the proper canonical tags, for example place the following code at the top of your website:
  2. Use the following script to automate the process and only allow lower case urls to be viewed on your site, create a global.asax file and place it in your site's main directory. 

If you plan to use both methods be sure to use only lower case for your canonical tags or you will end up with problems.

How to target Safari only using CSS and Javascript while keeping your page W3 compliant and completely valid

Here is a neat little trick you can use to target Safari and make it behave while fixing cross browser layouts. This method will allow you to keep a page valid and it will allow you to only target Safari.

First thing you want to do is use javascript to inject a css file for all browsers that support webkit with this code: 

Now, like I stated above this will target all browsers that currently support webkit and add support for it in the future so you cannot rely on only this. So now you need to create the css file and add some code that is Safari specific by using the double # method. Some people will ask, why not just include the double # to begin with? And the simple answer is that it will cause your CSS not to validate.

Here is the example css code that will target only Safari

Enjoy!