Please cast an eye over my beginners javaScript
<p>I am working on <a href="http://andartmedia.com/un/squares" rel="nofollow" title="live demo">an interface</a> with four main parts:</p>

<ol>
<li>When a category link is hovered, the projects not in this category are darkened (this seems to be working ok)</li>
<li>When a category link is clicked, the projects not in this category are hidden (seems also to be ok)</li>
<li>The browser window size is detected and a style sheet is chosen to fit. I.e. for older screen or mobile. Go ahead and resize the browser window.</li>
<li><p>When the browser window is narrow there is an additional script to scroll down to the "main" div.</p>

<pre><code>&lt;div id="container"&gt;
&lt;div id="inner-container"&gt;
&lt;div id="tag-selector"&gt;
    &lt;ul&gt;
        &lt;li class="all"&gt;ALL PROJECTS&lt;/li&gt;
&lt;li class="graphic-design"&gt;graphic design&lt;/li&gt;
        &lt;li class="logo-design"&gt;logo design&lt;/li&gt;
        &lt;li class="photography"&gt;photography&lt;/li&gt;
        &lt;li class="web-development"&gt;web development&lt;/li&gt;
        &lt;li class="web-design"&gt;web design&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt; 
&lt;div id="main" role="main"&gt; 
&lt;p class="items"&gt;There are x items in this category&lt;/p&gt;
&lt;p class="selected"&gt;No category selected&lt;/p&gt;
&lt;p class="clicked"&gt;No category clicked&lt;/p&gt;
    &lt;section class="graphic-design"&gt;
        &lt;p&gt;graphic-design&lt;/p&gt;
    &lt;/section&gt;
    &lt;section class="logo-design graphic-design"&gt;
        &lt;p&gt;logo-design&lt;/p&gt;&lt;p&gt; graphic-design&lt;/p&gt;
    &lt;/section&gt;
    &lt;section class="logo-design graphic-design"&gt;&lt;p&gt;etc&lt;/p&gt;
    &lt;/section&gt;

&lt;/div&gt;
&lt;footer&gt; &lt;/footer&gt;
</code></pre>

<p>
</p></li>
</ol>

<p>then here's the javascript. Sorry if it's a bit long.  It should be easy enough to read I hope.</p>

<pre><code>    &lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;

    &lt;script&gt;
$(document).ready(function(){
    var xwidth =$(window).width();//get width of user window
    all_projects_showing_text="All projects showing. There are " + n + " projects, in " + t + " categories.";
    adjustStyle(xwidth);
    $("p.items").text(all_projects_showing_text + " Width=" + xwidth);
    $(".all").addClass("selected");
    tag="all"
});
&lt;/script&gt;

    &lt;script&gt;
var n = $("section").length;//number of section boxes on page
var t = $("#tag-selector li").length;//categories
t--;

 $("#tag-selector li").click(function() {//clicking section filter li
    $("#tag-selector li").removeClass("selected");//removes all filtered class
    $(this).addClass("selected");//then adds it to the chosen link (li), showing it as current
    tag=$(this).attr("class");//var tag is the class name of the chosen link, i.e. category
    var split = tag.split(' '); // this splits the class string and puts each item in an array
    tag = split[0];//this chooses the first item of the array, hence not including the hilite class
    var numItems = $('.'+tag).length
    var numItems=numItems-1;//correct for real number

    if (tag!="all"){//if the all link is not picked
    $("section").hide();// hide all the boxes
    $("#main ."+tag).fadeIn();//show all the boxes with the tag class
        if(tag=="graphic-design"){
          tag="Graphic design"
        }
        else if(tag=="logo-design"){
          tag="Logo design"
        }
        else if(tag=="photography"){
          tag="Photography"
        }
        else if(tag=="web-development"){
          tag="Web development"
        }
        else if(tag=="web-design"){
          tag="Web design"
        }

        $("p.items").text(numItems+" " +tag+ " projects");
        $("p.selected").text(tag +" selected.");
        $("p.clicked").text(tag +" selected.");
    }
    else{
      $("section").fadeIn();//else show all the boxes
      $("p.items").text(all_projects_showing_text);// all_projects_showing_text at onReady 
    }       
});
&lt;/script&gt;

    &lt;script&gt;
  $("#tag-selector li").hover(function () {

    hovered_link=$(this).attr("class");//get the class of the category being hovered
    var split = hovered_link.split(' '); // this returns an array
    hovered_link = split[0];//remove any other classes apart from the first i.e. remove hilite

    if (tag=="all"){// if All are shown
        if(hovered_link!="all"){
          $("section").not("."+hovered_link).addClass("section_darkened");//darken section which does not correspond with hovered category link
          $("section").not(".section_darkened").addClass("outerglow");//add glow to not darkened sections
        }
    }
    else{
    }
    if (tag==hovered_link){// if the projects are already filtered by this category, say so on hover
        $("p.selected").text(tag +" already selected.");
    }
    else{
        var numItems = $('.'+hovered_link).length
        var numItems=numItems-1;//correct for real number
        $("p.selected").text("Click to see only "+hovered_link+ " projects. (" +numItems+ " projects)" );
    }

    $(this).addClass("hilite");//hilite on hover over link
    }, function () {
      $(this).removeClass("hilite");
      $("p.selected").text("...");
      $("section").removeClass("section_darkened");//darken categories not in the selected category
      $("section").removeClass("outerglow");//give the selected category items a glow
    });
&lt;/script&gt;

&lt;script&gt;
$(function() {
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

function adjustStyle(width) {
    width = parseInt(width);
    if (width &lt; 600) {
        $("#tag-selector li").click(function() {// SCroll function for handhelds
        $('html,body').animate({
                scrollTop: $("#main").offset().top},
                'slow');
        });
        $("#size-stylesheet").attr("href", "css/nav-style-narrow.css");//style sheet for handhelds
    } else if ((width &gt;= 440)&amp;&amp;(width &lt; 1040)){
      $("#size-stylesheet").attr("href", "css/nav-style-med.css");
    } else {
      $("#size-stylesheet").attr("href", "css/nav-style-wide.css");
    }
}
&lt;/script&gt;
</code></pre>

<p>If you've gotten this far and had a look, thanks!</p>

<p>So my questions are;</p>

<ol>
<li><strike>Am I missing <code>break;</code> in my loops anywhere? Not too sure how to use break.</strike></li>
<li>When my CSS file is chosen, there is a flash of the first style before it changes. Is there a way to avoid this?</li>
<li>When the browser is at the narrowest style sheet, and I click on my link, I have problems scrolling back up again afterwards. help?! :-)</li>
<li>Any glaring mistakes or omissions that would make this easier?</li>
<li>I start to feel like I have a lot of script on my one page. Maybe I should put it in a separate file. Would that help?</li>
<li>Is it ok to post multiple questions like this or should they be individual?</li>
</ol>

<p>Thanks in advance for anyone who has a look.</p>
