Creating Inline Style Sheet With Javascript

Question

Hihi. I'm trying to create an inline style sheet at the beginning of the page which reacts to what i'm GETTING from the url. Im doing this so I can have the navbutton of the page that im on highlighted. Kind of like here, www.myeg.net , but they have a static site and it is much easier.

<script type="text/javascript">
function parseUrl( url ) {
    var a = document.createElement('a');
    a.href = url;
    return a;
}

var page=parseUrl('').search

function getSecondPart(str) {
    return str.split('=')[1];
}

var site=getSecondPart(page);

var style = document.createElement("style");
style.innerHTML = ".nav_" + page + " { background-image:url('images/gradients/transparent_gradient.png');}";
document.body.appendChild(style);


}
</script>
</head>
<body>
<center><div><img width="960px" height="187.5" src="images/fullbanner.png"></div></center>
<div id="wrapper">
<div id="navbar">
<ul>
<li class="nav_index"><a href="index.php">Home</a></li>
<li class="nav_archive"><a href="index.php?site=news&action=archive">News</a></li>
<li class="nav_squads"><a href="index.php?site=squads">Roster</a></li>
<li class="nav_forum"><a href="index.php?site=forum">Forums</a></li>
<li class="nav_about"><a href="index.php?site=about">Contact</a></li>
</ul>

I'm pretty noob at javascript so sorry ;;;

Answer 1

Try this:

<style type="text/css">
#banner{text-align:center;}
#banner>img{width:960px;height:187.5px;}
#nav>.selected{background-image:url('images/gradients/transparent_gradient.png');}
</style>
</head>
<body>
<div id="banner"><img src="images/fullbanner.png"></div>
<div id="wrapper">
<div id="navbar">
<ul id="nav">
<li id="nav_index"><a href="index.php">Home</a></li>
<li id="nav_archive"><a href="index.php?site=news&action=archive">News</a></li>
<li id="nav_squads"><a href="index.php?site=squads">Roster</a></li>
<li id="nav_forum"><a href="index.php?site=forum">Forums</a></li>
<li id="nav_about"><a href="index.php?site=about">Contact</a></li>
</ul> 
<script type="text/javascript">
document.getElementById('nav_'+window.location.href.split('=')[1]).className='selected';
</script>

You shouldn't use <center> , it's deprecated!

Instead of writing a style sheet with javascript in order to match an element, you should match a class and then only add that class to your element with javascript.

And I don't understand very well your code:

function parseUrl( url ) {
    var a = document.createElement('a');
    a.href = url;
    return a;
}

var page=parseUrl('').search

It gives "" to me, but I have never seen .search on an anchor... If you want to get the current URL, you can do window.location.href .

And another point: if you use var outside functions (in global scope) you are creating a global variable, which won't be deleted and uses memory. Then, you can remove it when you don't want to use it anymore ( var a="dagjhdjgailghkagh";/*code*/;a=null; ), or use a self-execute function (closure) which contains your code.

Edit:

Sorry, instead of #nav>selected I meant #nav>.selected .

You can see a demo here: http://jsfiddle.net/VhWHp/

(But the url doesn't have = , so I replace it manually to 'archive'. In your site, remove that line)

And yes, it loads CSS first and then the nav. But that's the true power of CSS and javascript: if you set a class to an element after it has been loaded, that element will have the styles applied to that class.

Edit 2:

The problem is that if you do split('=')[1] , the result will be something like "news&action" instead of "news" .

Then, you could use a function I wrote some time ago:

function sQuery(arg) {
  if(window.location.search){
    var que = window.location.search.substring(1);
    if(arg=='string'){return que;}
    que = que.split("&");
    if(!arg||arg=='array'){return que;}
    for(var i=0;i<que.length;i++){
      var qvar = que[i].split("=");
      if(qvar[0]==arg){
        return qvar[1];
      }
    }
  }
  return false;
}

Then, call the function like this: sQuery('site')

document.getElementById('nav_'+(sQuery('site')||'index')).className='selected';

You can also call sQuery('array') or just sQuery() if you want to get ["site=news","action=archive"] , and sQuery('string') if you want "site=news&action=archive" . If you won't use that, you can simplify the function:

function sQuery(arg) {
  if(window.location.search){
    var que = window.location.search.substring(1).split("&");
    for(var i=0;i<que.length;i++){
      var qvar = que[i].split("=");
      if(qvar[0]==arg){
        return qvar[1];
      }
    }
  }
  return false;
}

Creating Inline Style Sheet With Javascript

Question

1 answers

solution1
0 2012-08-31 23:16:29

Creating Inline Style Sheet With Javascript

Question

1 answers

solution1 0 2012-08-31 23:16:29

solution1
0 2012-08-31 23:16:29