I'm using a lot of jQuery for my new site, and wonder ... How can I better compress my code, which seems very long.
If any kind souls could tip me off with some pointers, I'd be much, much, very much obliged. Olly the_guv guvnr.com The site is http://guvnr.com My jQ is (hopefully fairly self-explanatory) ... (html follows) ... jQuery.noConflict(); // *** POPUPS/SERVICE PANELS *** (this largest section of code controls my tab panels for the sections titled Web, Content, PC, Blog, Me and Content...) var popupOneStatus = 0; var popupTwoStatus = 0; var popupThreeStatus = 0; var popupFourStatus = 0; var popupFiveStatus = 0; var popupSixStatus = 0; //LOAD POPUP function loadPopupOne(){ if(popupOneStatus==0){ jQuery("#menu").hide(); jQuery("#popBox,#popBox1,#popBoxStrap1,#popBoxContent1").fadeIn ("500"); jQuery("#menuTop li a").fadeIn("500"); popupOneStatus = 1; }} function loadPopupTwo(){ if(popupTwoStatus==0){ jQuery("#menu").hide(); jQuery("#popBox,#popBox2,#popBoxStrap2,#popBoxContent2").fadeIn ("500"); jQuery("#menuTop li a").fadeIn("500"); popupTwoStatus = 1; }} function loadPopupThree(){ if(popupThreeStatus==0){ jQuery("#menu").hide(); jQuery("#popBox,#popBox3,#popBoxStrap3,#popBoxContent3").fadeIn ("500"); jQuery("#menuTop li a").fadeIn("500"); popupThreeStatus = 1; }} function loadPopupFour(){ if(popupFourStatus==0){ jQuery("#menu").hide(); jQuery("#popBox,#popBox4,#popBoxStrap4,#popBoxContent4").fadeIn ("500"); jQuery("#menuTop li a").fadeIn("500"); popupFourStatus = 1; }} function loadPopupFive(){ if(popupFiveStatus==0){ jQuery("#menu").hide(); jQuery("#popBox,#popBox5,#popBoxStrap5,#popBoxContent5").fadeIn ("500"); jQuery("#menuTop li a").fadeIn("500"); popupFiveStatus = 1; }} function loadPopupSix(){ if(popupSixStatus==0){ jQuery("#menu").hide(); jQuery("#popBox,#popBox6,#popBoxStrap6,#popBoxContent6").fadeIn ("500"); jQuery("#menuTop li a").fadeIn("500"); popupSixStatus = 1; }} //DISABLE POPUP function disablePopupOne(){ if(popupOneStatus==1){ jQuery("#popBox,#popBox1,#popBoxStrap1,#popBoxContent1").hide(); jQuery("#menu").fadeIn("500"); popupOneStatus = 0; }} function disablePopupTwo(){ if(popupTwoStatus==1){ jQuery("#popBox,#popBox2,#popBoxStrap2,#popBoxContent2").hide(); jQuery("#menu").fadeIn("500"); popupTwoStatus = 0; }} function disablePopupThree(){ if(popupThreeStatus==1){ jQuery("#popBox,#popBox3,#popBoxStrap3,#popBoxContent3").hide(); jQuery("#menu").fadeIn("500"); popupThreeStatus = 0; }} function disablePopupFour(){ if(popupFourStatus==1){ jQuery("#popBox,#popBox4,#popBoxStrap4,#popBoxContent4").hide(); jQuery("#menu").fadeIn("500"); popupFourStatus = 0; }} function disablePopupFive(){ if(popupFiveStatus==1){ jQuery("#popBox,#popBox5,#popBoxStrap5,#popBoxContent5").hide(); jQuery("#menu").fadeIn("500"); popupFiveStatus = 0; }} function disablePopupSix(){ if(popupSixStatus==1){ jQuery("#popBox,#popBox6,#popBoxStrap6,#popBoxContent6").hide(); jQuery("#menu").fadeIn("500"); popupSixStatus = 0; }} // HERE WE GO! jQuery(document).ready(function(){ //hide service panels and navbar for now jQuery ("#popBox,#popBox1,#popBox2,#popBox3,#popBox4,#popBox5,#popBox6,#menuTop li a").hide(); jQuery(".one").click(function(){ //load popup and disable others that may be open disablePopupTwo(); disablePopupThree(); disablePopupFour(); disablePopupFive(); disablePopupSix(); loadPopupOne(); }); jQuery(".two").click(function(){ disablePopupOne(); disablePopupThree(); disablePopupFour(); disablePopupFive(); disablePopupSix(); loadPopupTwo(); }); jQuery(".three").click(function(){ disablePopupOne(); disablePopupTwo(); disablePopupFour(); disablePopupFive(); disablePopupSix(); loadPopupThree(); }); jQuery(".four").click(function(){ disablePopupOne(); disablePopupThree(); disablePopupTwo(); disablePopupFive(); disablePopupSix(); loadPopupFour(); }); jQuery(".five").click(function(){ disablePopupOne(); disablePopupThree(); disablePopupFour(); disablePopupTwo(); disablePopupSix(); loadPopupFive(); }); jQuery(".six,#gotoContactPanel").click(function(){ disablePopupOne(); disablePopupThree(); disablePopupFour(); disablePopupFive(); disablePopupTwo(); loadPopupSix(); }); //CLOSE POPUP using close button jQuery(".popClose").click(function(){ jQuery("#popBox,#menuTop li a").hide(); jQuery("#menuLit li.one").removeClass("enable"); //does not work jQuery("#menu").fadeIn("500"); }); // *** END POPUPS/SERVICE PANELS *** // *** TAGS PANEL *** (this is for the Tag Cloud/Category popup box) jQuery(".tagButton").click(function(){ jQuery("#tagsPanel").fadeIn("500"); jQuery("this").toggleClass("active"); jQuery('#popBoxContent4,.popClose,.tagButton').fadeOut("slow"); return false; }); jQuery(".tagsClose").click(function(){ jQuery('#popBoxContent4,.popClose').fadeIn("500"); jQuery("this").toggleClass("active"); jQuery("#tagsPanel").fadeOut("slow"); return false; }); // *** ACCORDIAN *** (and the accordian I have used for the tab panels boxes Web, Content, PC, Blog and Me) // hide all ULs inside LI.drawer except the first one jQuery('#popBoxContent4 li.drawer div:not(:first)').slideUp(); // apply the open class jQuery('#popBoxContent4 li.drawer div:first').addClass('open'); jQuery('#popBoxContent4 h2.drawer-handle').click(function () { // hide the currently visible drawer contents jQuery('#popBoxContent4 li.drawer div:visible').slideUp(); // remove the open class from the currently open drawer jQuery('#popBoxContent4 h2.open').removeClass('open'); // show the associated drawer content to 'this' (this is the current H2 element) // since the drawer content is the next element after the clicked H2, we find // it and show it using this: jQuery(this).next().slideDown(); // set a class indicating on the H2 that the drawer is open jQuery(this).addClass('open'); }); }); // Use Prototype with $(...), etc. jQuery('someid').hide(); ... and the html ... <div id="navbar"> <!-- nav starts --> <ul id="menuTop"> <li class="one"><a href="web">web</a></li> <li class="two alt"><a href="content">content</a></li> <li class="three"><a href="pc">pc</a></li> <li class="four alt"><a href="blog">blog</a></li> <li class="five"><a href="me">olly</a></li> <li class="six alt"><a href="contact">contact</a></li> </ul> </div> <div id="content"> <ul id="menu"> <li class="one"><a href="web"></a></li> <li class="two alt"><a href="content"></a></li> <li class="three"><a href="pc"></a></li> <li class="four alt"><a href="blog"></a></li> <li class="five"><a href="me"></a></li> <li class="six alt"><a href="contact"></a></li> </ul> <!-- nav ends and service panels start --> <div id="popBox"> <div id="popBox1"><a class="popClose"></a> <div id="popBoxStrap1"> </div> <div id="popBoxContent1"> <ul class="drawers"> <li class="drawer"> <h2 class="drawer-handle open">Websites and blogs, standards and service</h2> <div class="extract"> <p>Want an eye-catching, user-friendly, future- proofed, fully functional and SEO-driven website or blog? </p> <p>Without paying a fortune?</p> <p>That's what I do...</p> </div> </li> <li class="drawer"> <h2 class="drawer-handle open">Planning</h2> <div class="extract"> <p>The most important <span class="strikethrough">bit</span> lot. </p> <ul> <li>creating a wish list</li> <li>researching online audience</li> <li>researching competitor sites</li> <li>determining levels of importance</li> <li>setting out a site plan</li> <li>designing mockups</li> <li>domain name research and setup</li> </ul> </div> </li> <li class="drawer"> <h2 class="drawer-handle open">Eye-catching</h2> <div class="extract"> <p>Without letting the frame get in the way of the picture.</p> <ul> <li>simple yet effective</li> <li>emphasising corporate identity</li> <li>making content stand out</li> </ul> </div> </li> <li class="drawer"> <h2 class="drawer-handle open">User-friendly</h2> <div class="extract"> <p>Easy to browse, easy to update.</p> <ul> <li>clear navigation</li> <li>fast-loading pages</li> <li>working across all modern browsers</li> <li>...and handheld devices, as required</li> <li>easily updated with new content</li> </ul> </div> </li> <li class="drawer"> <h2 class="drawer-handle open">Future-proofed</h2> <div class="extract"> <p>Many new websites use archaic code. Not good enough.</p> <ul> <li>coded to latest web standards</li> <li>with future specifications to mind</li> <li>benefitting online marketing (SEO)</li> </ul> </div> </li> <li class="drawer"> <h2 class="drawer-handle open">Fully-functional</h2> <div class="extract"> <p>As appropriate, not for the sake of it.</p> <ul> <li>database-driven</li> <li class="noBullet"> <ul> <li>syncronising with other business tools</ li> <li>automating tasks</li> <li>intelligent forms</li> </ul> </li> <li>content</li> <li class="noBullet"> <ul> <li>management systems</li> <li>chat, forums and blogs</li> <li>feeds</li> <li>syndication</li> <li>multimedia</li> <li>image galleries</li> </ul> </li> <li>revenue functions</li> <li class="noBullet"> <ul> <li>shopping carts</li> <li>merchant accounts</li> <li>Google Adsense</li> <li>...and similar affiliate setup</li> </ul> </li> </ul> </div> </li> <li class="drawer"> <h2 class="drawer-handle open">SEO-driven</h2> <div class="extract"> <p>SEO is marketing, the online way.</p> <p>Targetting your online market, the goal is to have your business as widely available as possible.</p> <ul> <li>websites written with SEO in mind, always</li> <li>complete advice on strategy</li> <li class="noBullet"> <ul> <li>search engine ranking</li> <li>keyword and competition analysis</li> <li>site-to-site linking do's and don'ts</li> <li>social media marketing (MySpace et al)</ li> </ul> </li> <li>ongoing SEO campaigns</li> </ul> </div> </li> <li class="drawer"> <h2 class="drawer-handle open">Website management and upgrades</h2> <div class="extract"> <p>Some sites need ongoing maintenance and new features.</p> <ul> <li>content updates, of all media types</li> <li>ad revenue administration</li> <li>website upgrades</li> <li>seamless website-to-blog and forum integration</li> </ul> </div> </li> <li class="drawer"> <h2 class="drawer-handle open">Written by hand</h2> <div class="extract"> <p>Sites coded to the lightest possible weight, using the following languages.</p> <ul> <li>XHTML</li> <li>PHP</li> <li>CSS</li> <li>MySQL</li> <li>javascript</li> <li>jQuery (javascript library)</li> </ul> </div> </li> <li class="drawer"> <h2 class="drawer-handle open">Hosting</h2> <div class="extract"> <p>Setup with your host or mine.</p> <p>Having thoroughly researched the ever-changing, hyper-competitive ISP market in 2008, I recommend mine, <a href="http://www.lunarpages.com/id/ollyc0";>Lunarpages</a>.</p> <p><a href="/web/hosting/" title="Lunarpages vs ...">I have set out a detailed crit of the market in this blog post</a>. If you aren't receiving the benefits listed below, and at a competitive rate, read that.</p> <div class="floatRight"><a href="http:// www.lunarpages.com/id/ollyc0" onMouseOver="window.status='http:// www.lunarpages.com';return true" onMouseOut="window.status='';return true" target="_blank"> <img src="http://www.lunarpages.com/banners/ images/winter/120x240.gif" alt="Lunarpages.com - full spec here" /></ a></div> <ul> <li>for $4.95 a month</li> <li class="noBullet"> <ul> <li>1 FREE domain name</li> <li>UNLIMITED storage <div class="new"></div> </li> <li>UNLIMITED Data Transfer <div class="new"></div> </li> <li>$775 Bonus Programs <div class="new"></div> </li> <li>24/7 Award Winning Support</li> <li>UNLIMITED Databases/Email/FTP</li> <li>Blog, Forum & Photo Gallery</li> <li>Fantastico (Over 35 Scripts)</li> <li>JSP/ASP Available</li> <li>Spam Protection- IMAP Support</li> <li>Microsoft® Frontpage® Compatible</ li> <li>Dreamweaver Compatible</li> <li>UNLIMITED Add-on Domains <div class="new"></div> </li> <li>Ruby on Rails, PostgreSQL</li> <li>MySQL 4+, PHP 4+</li> <li>MySQL 5 & PHP 5.2+ Available </li> <li>Free Web Design Templates</li> <li>Webmail (Horde & Squirrel)</li> </ul> </li> </ul> </div> </li> <li class="drawer"> <h2 class="drawer-handle open">Without paying a fortune?</h2> <div class="extract"> <p>We must establish, how long is this particular string?</p> <ol> <li>Tell me your approximate budget</li> <li>We discuss your requirements in detail</li> <li>I break down how long that will take, and why</ li> <li>We negotiate a precise budget</li> <li>I stick to your budget, deliver the product, and train your webmaster as required.</li> </ol> </div> </li> </ul> </div> </div> <div id="popBox2"><a class="popClose"></a> <div id="popBoxStrap2"> </div> <div id="popBoxContent2"> <ul class="drawers"> <li class="drawer"> <h2 class="drawer-handle open">Content produced, integrated, managed</h2> <div class="extract"> <p>Need content? Maybe web video, tutorials, podcasting set up, copy writing or a regular feed?</p> <p>Or perhaps you want to syndicate my blog for your PC magazine? Hey, let's talk!</p> <p>Here's what I do...</p> </div> </li> <li class="drawer"> <h2 class="drawer-handle open">Web content</h2> <div class="extract"> <p>As a broadcaster, I used to write copy and produce radio and TV. Online, I embed and produce.</p> <ul> <li>Audio and video production</li> <li class="noBullet"> <ul> <li>producing</li> <li>presenting/voice-overs</li> <li>video tutorials</li> <li>editing</li> <li>encoding</li> </ul> </li> </ul> </div> </li> <li class="drawer"> <h2 class="drawer-handle open">Copy writing</h2> <div class="extract"> <p>So you read and like my blog? Give me a credit, the content is yours to use. For free. That's the copy, the video tutorials, the images, the lot. Why? Marketing. You're a magazine, offline? Same applies.</p> <p>I write on the following subjects. Rarely seriously, but I may be persuaded...</p> <ul> <li><b>Web</b> <b class="asterisk">*</b> >From how-to's for inexperienced surfers to technical know-hows about computer mumbo-jumbo. Plus, plenty of screaming about Internet Explorer 6.</li> <li><b>Content</b> <b class="asterisk">*</b> Making it, marketing it, the best of it.</li> <li><b>PC</b> <b class="asterisk">*</b> Optimising your machine, tips, tricks and lots of tweaks.</li> <li><b>Politics.</b> Hey, don't get me started. OK, there's a satirical blog coming online in 2009, so if you're interested let me know and I'll send a link.</li> <li><b>Showbiz</b> <b class="asterisk">**</b> Er, politics is showbiz, no?</li> <li><b>Home improvement</b> <b class="asterisk">**</b> Call me diverse. <a href="http:// ollythebuilder.com" title="Olly's building site" target="_blank">I renovate property for fun.</a> Scratch that, it used to be fun.</li> </ul> <br/> <p><b class="asterisk">*</b> Featured on this site's blog, which also has video tutorials.</p> <p><b class="asterisk">**</b> For the BBC, Bloomberg TV, MTV and a bunch of radio stations in the US and UK.</p> <p><b class="asterisk">***</b> Featured on the ICI Dulux website, for instance.</p> </div> </li> <li class="drawer"> <h2 class="drawer-handle open">Content management systems</h2> <div class="extract"> <p>Systems implemented, seamlessly, to create, deliver and manage your website media.</p> <ul> <li>blogs</li> <li>feeds</li> <li>forums</li> <li>wikis</li> <li>chat</li> <li>multimedia</li> <li class="noBullet"> <ul> <li>podcast setup</li> <li>Youtube/Vimeo/Viddler video</li> <li class="noBullet"> <ul> <li>admin and encoding</li> </ul> </li> </ul> </li> <li>content updates</li> <li>ad revenue administration</li> </ul> </div> </li> </ul> </div> </div> <div id="popBox3"><a class="popClose"></a> <div id="popBoxStrap3"> </div> <div id="popBoxContent3"> <ul class="drawers"> <li class="drawer"> <h2 class="drawer-handle open">PC maintenance, networks & smart homes</h2> <div class="extract"> <p>Fed up with a sluggish machine but don't want a new one? Want to go wireless? Fancy a <em>smart home</em>?</p> <p>Geographical disclaimer! I live between London and Valencia, so if you don't, go local. Nonetheless, contact me with a query and I'll advise you as best I can.</p> <p>Here's the deal...</p> </div> </li> <li class="drawer"> <h2 class="drawer-handle open">PC care</h2> <div class="extract"> <p>From re-installations, faster than the original PC, to the ultimate bespoke-built dream machines.</p> <ul> <li>bespoke built to any spec</li> <li>upgrades and re-installations</li> <li class="noBullet"> <ul> <li>Windows XP/Vista</li> <li>Linux Ubuntu</li> <li>dual-boot systems</li> </ul> </li> <li>virus protection</li> <li>spam control</li> <li>software advice/best of opensource</li> <li>tweaks galore, tailored to requirement</li> </ul> </div> </li> <li class="drawer"> <h2 class="drawer-handle open">Networks</h2> <div class="extract"> <p>Small networks, 2 to 20 computers, linked up, for home or office</p> <ul> <li>home</li> <li>small office</li> <li>wireless</li> <li>ethernet</li> <li class="noBullet"> <ul> <li>cables run, hidden, walls/skirting re- decorated</li> </ul> </li> </ul> </div> </li> <li class="drawer"> <h2 class="drawer-handle open">Smart homes</h2> <div class="extract"> <p>With no trace of a cable, access media from any networked machine, in any room, or keep an eye, online from anywhere.</ p> <p>For example, control your home's:-</p> <ul> <li>security</li> <li>lighting</li> <li>home theatre</li> <li>phone systems</li> <li>thermostat</li> <li>whatever else, even the garden sprinkler</li> </ul> </div> </li> </ul> </div> </div> <div id="popBox4"> <a class="popClose"></a> <a class="tagButton"></a> <div id="popBoxStrap4"></div> <div id="popBoxContent4"> <ul class="drawers"> <li class="drawer"> <h2 class="drawer-handle open"> Video How-to: Add a Favicon </h2> <div class="extract"> <p class="date"> Friday, December 5th, 2008 </p> <p> <p> <img src="http://guvnr.com/wp-content/uploads/ 2008/20081205_favicon/fav.gif" class="thumbClass" alt="Video How-to: Add a Favicon" /> </p> <p>If I had a Big Mac for every favicon tutorial out there, I’d be dead. But hey, I needed a favicon, and I figured a video illustrating the process may come in handy for some folks, so here goes.</p> <p>What is a favicon, and what’s it for? I explain that here and in the [...]</p> </p> <div class="meta"> <a class="more" href="http:// guvnr.com/web/favicon/" title="Read Video How-to: Add a Favicon">More</ a> <div class="meta"> Tags: <a href="http:// guvnr.com/ tag/blogging/" rel="tag">blogging</a>, <a href="http://guvnr.com/tag/ content/" rel="tag">content</a>, <a href="http://guvnr.com/tag/html/"; rel="tag">html</a>, <a href="http://guvnr.com/tag/tutorial/"; rel="tag">tutorial</a>, <a href="http://guvnr.com/tag/video/"; rel="tag">video</a>, <a href="http://guvnr.com/tag/web-design/"; rel="tag">web design</a>, <a href="http://guvnr.com/tag/wordpress/"; rel="tag">wordpress</a><br /> Categories: <a href="http://guvnr.com/category/ web/" title="View all posts in web" rel="category tag">web</a> </div> </div> </div> </li> <li class="drawer"> <h2 class="drawer-handle open"> Windows “Authenticode” Nag Screen </h2> <div class="extract"> <p class="date"> Thursday, November 20th, 2008 </p> <p> <p> <img src="http://guvnr.com/wp-content/uploads/ 2008/20081120_authenticode/nagScreen.gif" class="thumbClass" alt="Windows “Authenticode” Nag Screen" /> </p> <p>Seen this nag screen? Or rather, this scare screen, from Microsoft? Let me answer that! If you install software from a vendor that hasn’t been “approved” by Microsoft, you have. “Approved”, one could argue, is another word for “conned.” And you and I, the software users, are left confused. Don’t [...]</p> </p> <div class="meta"> <a class="more" href="http:// guvnr.com/pc/windows-authenticode/" title="Read Windows “Authenticode” Nag Screen">More</a> <div class="meta"> Tags: <a href="http:// guvnr.com/ tag/pc-care/" rel="tag">pc care</a>, <a href="http://guvnr.com/tag/ windows/" rel="tag">windows</a><br /> Categories: <a href="http://guvnr.com/category/ pc/" title="View all posts in pc" rel="category tag">pc</a> </div> </div> </div> </li> <li class="drawer"> <h2 class="drawer-handle open"> Now Reselling Lunarpages Hosting, but why? </h2> <div class="extract"> <p class="date"> Wednesday, November 19th, 2008 </p> <p> <p> <img src="http://www.lunarpages.com/banners/ images/winter/125x125.gif" class="thumbClass" alt="Now Reselling Lunarpages Hosting, but why?" /> </p> <p>So you need an ISP, a server to host your website or blog? Else you’re paying too much at the moment, with no thrills or poor service. But where do you start to research your new host? Here at Guvnr, I’ve done the research for you, and me.<br /> Cheaper - and infinitely better<br /> Fact [...]</p> </p> <div class="meta"> <a class="more" href="http:// guvnr.com/web/hosting/" title="Read Now Reselling Lunarpages Hosting, but why?">More</a> <div class="meta"> Tags: <a href="http:// guvnr.com/ tag/hosting/" rel="tag">hosting</a>, <a href="http://guvnr.com/tag/ isp/" rel="tag">ISP</a><br /> Categories: <a href="http://guvnr.com/category/ web/" title="View all posts in web" rel="category tag">web</a> </div> </div> </div> </li> <li class="drawer"> <h2 class="drawer-handle open"> Video How-to: Subscribe to Content Feeds </h2> <div class="extract"> <p class="date"> Friday, November 14th, 2008 </p> <p> <p> <img src="http://guvnr.com/wp-content/uploads/ 2008/20081114_howtoFeed/rssIcons2.jpg" class="thumbClass" alt="Video How-to: Subscribe to Content Feeds" /> </p> <p>The best thing about the web is its role as an information resource. Need some help? - the web is where. But all that info gets daunting, and that’s where subscribing to RSS feeds comes in. This article, complete with illustrative video - my first guvUtorial - will get you started with feeds to improve [...]</p> </p> <div class="meta"> <a class="more" href="http:// guvnr.com/content/subscribe-to-feeds/" title="Read Video How-to: Subscribe to Content Feeds">More</a> <div class="meta"> Tags: <a href="http:// guvnr.com/ tag/feeds/" rel="tag">feeds</a>, <a href="http://guvnr.com/tag/rss/"; rel="tag">rss</a>, <a href="http://guvnr.com/tag/video/"; rel="tag">video</a><br /> Categories: <a href="http://guvnr.com/category/ content/" title="View all posts in content" rel="category tag">content</a> </div> </div> </div> </li> <li class="drawer"> <h2 class="drawer-handle open"> Web Design Spain </h2> <div class="extract"> <p class="date"> Thursday, November 6th, 2008 </p> <p> <p> <img src="http://guvnr.com/wp-content/uploads/ 2008/20081029_guvnr/web-design-spain.jpg" class="thumbClass" alt="Web Design Spain" /> </p> <p>Guvnr.com Goes Live<br /> Sites I like to surf are really uncluttered, with everything barely more than a click, or a mouse movement, away.<br /> That’s how I hope this site is. A really usable web design.<br /> The website requirement<br /> The kind of site I needed had to showcase </p> </p> <div class="meta"> <a class="more" href="http:// guvnr.com/webpages/web-design-spain/" title="Read Web Design Spain">More</a> <div class="meta"> Tags: <a href="http:// guvnr.com/ tag/blogging/" rel="tag">blogging</a>, <a href="http://guvnr.com/tag/ guvnr-sites/" rel="tag">guvnr sites</a>, <a href="http://guvnr.com/ tag/ web-design/" rel="tag">web design</a><br /> Categories: <a href="http://guvnr.com/category/ web/" title="View all posts in web" rel="category tag">web</a>, <a href="http://guvnr.com/category/webpages/"; title="View all posts in webpages" rel="category tag">webpages</a> </div> </div> </div> </li> <li class="drawer"> <h2 class="drawer-handle open"> Perfect Windows PC Install </h2> <div class="extract"> <p class="date"> Wednesday, November 5th, 2008 </p> <p> <p> <img src="http://guvnr.com/wp-content/uploads/ 2008/20081031_windows-installation/winsInstall.jpg" class="thumbClass" alt="Perfect Windows PC Install" /> </p> <p>Want a fast, cheap-as-chips, bullet-proof dream machine? Here’s how…<br /> The Perfect Windows PC Install may involve a bin, buying a Mac instead and using that. Else installing Linux. Then again, for many reasons a Windows PC is what you need, or rather what you want - ‘the devil you know’ and all that. OK, fair play. [...]</p> </p> <div class="meta"> <a class="more" href="http:// guvnr.com/pc/installing-windows/" title="Read Perfect Windows PC Install">More</a> <div class="meta"> Tags: <a href="http:// guvnr.com/ tag/tweaks/" rel="tag">tweaks</a>, <a href="http://guvnr.com/tag/ windows/" rel="tag">windows</a><br /> Categories: <a href="http://guvnr.com/category/ pc/" title="View all posts in pc" rel="category tag">pc</a> </div> </div> </div> </li> <li class="drawer"> <h2 class="drawer-handle open"> Website launch - www.ollythebuilder.com </h2> <div class="extract"> <p class="date"> Monday, November 3rd, 2008 </p> <p> <p> <img src="http://guvnr.com/wp-content/uploads/ 2008/20081029_ollythebuilder/ollythebuilder_gallery.jpg" class="thumbClass" alt="Website launch - www.ollythebuilder.com" /> </p> <p>Olly’s building site goes online<br /> They say things happen in three’s, so to keep up with tradition I’m launching three sites this week. As well as Guvnr.com and a namesake portal, ollyconnelly.com, I’ve scrubbed up my old building services site. In fact, I’ve fairly thrown the kitchen sink at it, css-stylee.</p> </p> <div class="meta"> <a class="more" href="http:// guvnr.com/webpages/ollythebuilder/" title="Read Website launch - www.ollythebuilder.com">More</a> <div class="meta"> Tags: <a href="http:// guvnr.com/ tag/guvnr-sites/" rel="tag">guvnr sites</a><br /> Categories: <a href="http://guvnr.com/category/ web/" title="View all posts in web" rel="category tag">web</a>, <a href="http://guvnr.com/category/webpages/"; title="View all posts in webpages" rel="category tag">webpages</a> </div> </div> </div> </li> <li class="drawer"> <h2 class="drawer-handle open"> Firefox ScribeFire Plugin for Remote Blogging </h2> <div class="extract"> <p class="date"> Sunday, November 2nd, 2008 </p> <p> <p> <img src="http://guvnr.com/wp-content/uploads/ 2008/20081102_scribefire/scribefire.jpg" class="thumbClass" alt="Firefox ScribeFire Plugin for Remote Blogging" /> </p> <p>So, if this works I’ll have published a new post to guvnr.com, remotely, using Firefox’s ScribeFire add- on.<br /> So, hey.<br /> Definitely use that more.</p> <p>Update: So I’ve been playing with the Firefox ScribeFire plugin and I’m a bit disappointed but, having said that, most </p> </p> <div class="meta"> <a class="more" href="http:// guvnr.com/web/blogging/scribefire/" title="Read Firefox ScribeFire Plugin for Remote Blogging">More</a> <div class="meta"> Tags: <a href="http:// guvnr.com/ tag/blogging/" rel="tag">blogging</a>, <a href="http://guvnr.com/tag/ cool-plugin/" rel="tag">cool plugin</a>, <a href="http://guvnr.com/ tag/ wordpress/" rel="tag">wordpress</a><br /> Categories: <a href="http://guvnr.com/category/ web/blogging/" title="View all posts in blogging" rel="category tag">blogging</a>, <a href="http://guvnr.com/category/content/"; title="View all posts in content" rel="category tag">content</a> </ div> </div> </div> </li> <li class="drawer"> <h2 class="drawer-handle open"> Guvnr.com and Web Standards </h2> <div class="extract"> <p class="date"> Sunday, November 2nd, 2008 </p> <p> <p>There’s a lot of talk about web standards. Here’s some more.<br /> What are web standards?<br /> Rules for producing well-coded, user-friendly websites, set down by a very important and useful group of gordo- geeks, collectively referred to as the World Wide Web Consortium, or the W3C for short.<br /> They sound lovely. But rules should be broken, no? <br /> 99% of the time, [...]</p> </p> <div class="meta"> <a class="more" href="http:// guvnr.com/web/web-standards/" title="Read Guvnr.com and Web Standards">More</a> <div class="meta"> Tags: <a href="http:// guvnr.com/ tag/guvnr-sites/" rel="tag">guvnr sites</a><br /> Categories: <a href="http://guvnr.com/category/ web/" title="View all posts in web" rel="category tag">web</a> </div> </div> </div> </li> <li class="drawer"> <h2 class="drawer-handle open"> Website launch - www.ollyconnelly.com </h2> <div class="extract"> <p class="date"> Saturday, November 1st, 2008 </p> <p> <p> <img src="http://guvnr.com/wp-content/uploads/ 2008/20081029_ollyconnelly/ollyconnelly.jpg" class="thumbClass" alt="Website launch - www.ollyconnelly.com" /> </p> <p>Olly’s portal page goes live<br /> Guvnr.com couldn’t launch alone, that just wouldn’t do, so I’ve knocked up a simple portal page for my namesake site, ollyconnelly.com.<br /> The purpose of this site is SEO; marketing. That is to say, when someone googles me, they will find the page, soon, at the top of </p> </p> <div class="meta"> <a class="more" href="http:// guvnr.com/webpages/ollyconnelly/" title="Read Website launch - www.ollyconnelly.com">More</a> <div class="meta"> Tags: <a href="http:// guvnr.com/ tag/guvnr-sites/" rel="tag">guvnr sites</a><br /> Categories: <a href="http://guvnr.com/category/ web/" title="View all posts in web" rel="category tag">web</a>, <a href="http://guvnr.com/category/webpages/"; title="View all posts in webpages" rel="category tag">webpages</a> </div> </div> </div> </li> </ul> <div class="navigation"> <div class="alignleft"> </div> <div class="alignright"> </div> </div> </div> <div id="tagsPanel"><a class="tagsClose"></a> <div id="tagsPanelTags"> <p>Choose a tag:-</p> <div id="cloud"> <a href='http://guvnr.com/tag/ blogging/' class='tag-link-37' title='3 topics' rel="tag" style='font- size: 18.6666666667pt;'>blogging</a> <a href='http://guvnr.com/tag/ content/' class='tag-link-44' title='3 topics' rel="tag" style='font- size: 18.6666666667pt;'>content</a> <a href='http://guvnr.com/tag/ cool- plugin/' class='tag-link-39' title='1 topic' rel="tag" style='font- size: 12pt;'>cool plugin</a> <a href='http://guvnr.com/tag/feeds/' class='tag-link-51' title='1 topic' rel="tag" style='font-size: 12pt;'>feeds</a> <a href='http://guvnr.com/tag/guvnr-sites/' class='tag-link-47' title='4 topics' rel="tag" style='font-size: 22pt;'>guvnr sites</a> <a href='http://guvnr.com/tag/hosting/' class='tag-link-54' title='1 topic' rel="tag" style='font-size: 12pt;'>hosting</a> <a href='http://guvnr.com/tag/html/' class='tag- link-23' title='1 topic' rel="tag" style='font-size: 12pt;'>html</a> <a href='http://guvnr.com/tag/isp/' class='tag-link-55' title='1 topic' rel="tag" style='font-size: 12pt;'>ISP</a> <a href='http:// guvnr.com/tag/all-about-content/' class='tag-link-22' title='1 topic' rel="tag" style='font-size: 12pt;'>media</a> <a href='http:// guvnr.com/ tag/pc-care/' class='tag-link-42' title='2 topics' rel="tag" style='font-size: 15.3333333333pt;'>pc care</a> <a href='http:// guvnr.com/tag/rss/' class='tag-link-52' title='1 topic' rel="tag" style='font-size: 12pt;'>rss</a> <a href='http://guvnr.com/tag/smart- homes/' class='tag-link-43' title='1 topic' rel="tag" style='font- size: 12pt;'>smart homes</a> <a href='http://guvnr.com/tag/tutorial/' class='tag-link-56' title='1 topic' rel="tag" style='font-size: 12pt;'>tutorial</a> <a href='http://guvnr.com/tag/tweaks/' class='tag- link-36' title='2 topics' rel="tag" style='font-size: 15.3333333333pt;'>tweaks</a> <a href='http://guvnr.com/tag/video/' class='tag-link-53' title='2 topics' rel="tag" style='font-size: 15.3333333333pt;'>video</a> <a href='http://guvnr.com/tag/web-design/' class='tag-link-7' title='3 topics' rel="tag" style='font-size: 18.6666666667pt;'>web design</a> <a href='http://guvnr.com/tag/ windows/' class='tag-link-34' title='3 topics' rel="tag" style='font- size: 18.6666666667pt;'>windows</a> <a href='http://guvnr.com/tag/ wordpress/' class='tag-link-48' title='2 topics' rel="tag" style='font- size: 15.3333333333pt;'>wordpress</a> </div> </div> <div id="tagsPanelCats"> <p>Choose a category:-</p> <div id="categories"> <li class="cat-item cat-item-44"><a href="http:// guvnr.com/category/content/" title="View all posts filed under content">content</a> </li> <li class="cat-item cat-item-49"><a href="http:// guvnr.com/category/pc/" title="View all posts filed under pc">pc</a> </ li> <li class="cat-item cat-item-50"><a href="http:// guvnr.com/category/web/" title="View all posts filed under web">web</ a> <ul class='children'> <li class="cat-item cat-item-37"><a href="http:// guvnr.com/category/web/blogging/" title="View all posts filed under blogging">blogging</a> </li> </ul> </li> <li class="cat-item cat-item-31"><a href="http:// guvnr.com/category/webpages/" title="View all posts filed under webpages">webpages</a> </li> </div> </div> <!-- <div id="tagsPanelTuts"><a href="#">List tips & tutorials</ a></div> --> </div> </div> <div id="popBox5"><a class="popClose"></a> <div id="popBoxStrap5"></div> <div id="popBoxContent5"> <ul class="drawers"> <p>Hi. My name's Olly Connelly. Welcome to Guvnr.</p> <br/> <li class="drawer"> <h2 class="drawer-handle open">About Guvnr.com</h2> <div class="extract"> <p>Guvnr launched in 2008 as a showcase for my Web, PC and Content services.</p> <p>It doubles as my blog, where I write about these areas, also posting video tutorials.</p> <p>"Why bother?" you may ask. Two reasons. 1. To market my services, building my online cyber-type community while helping to hoist this site up the search engine rankings. 2. As a thank you to all those geeky types who inspired me and taught me, well, everything I know about building websites. Pass it on.</p> <h3>The application</h3> <p>Guvnr.com is a good example of the kind of sites I like to surf; simple yet effective, and very powerful under the hood. I coded it using standards-compliant XHTML, PHP, CSS, jQuery and some regular javascript. The database is MySQL, and it's hosted on an Apache server. When I had everything working, I plugged the site into the superb Wordpress engine to give me the blogging platform.</p> </div> </li> <li class="drawer"> <h2 class="drawer-handle open">About me</h2> <div class="extract"> <p>My experience includes web production for the BBC, broadcasting for Bloomberg TV and MTV, plus a bunch of radio production. These days, when I'm not cranking code, creating content or fixing pc's, I <a href="http://ollythebuilder.com"; title="Olly's building site" target="_blank">renovate property</a> in Valencia, Spain. I also live in London, when it's not raining or I need a decent pint.</p> <p>Web-wise, and on and off over the last ten years, I manage, build and upgrade sites, advising on SEO, web video & blogs. As well as coding in a bunch of languages, I create some pretty basic graphics.</p> </div> </li> <li class="drawer"> <h2 class="drawer-handle open">About you</h2> <div class="extract"> <p id="gotoContactPanel">Let me know!</p> <p>Hey, don't go away empty handed. <a href="http:// feeds.feedburner.com/guvnr" target="_blank">Go</a> grab a feed from the blog.</p> </div> </li> <br/> <p>Thanks for visiting.</p> <p>Olly</p> <p>the_guv</p> </ul> </div> </div> <div id="popBox6"><a class="popClose"></a> <div id="popBoxStrap6"> </div> <div id="popBoxContent6"> <br/> <p><em>Please fill out the form, click "Go!" and Olly will be in touch.</em></p> <br/> <form action="http://guvnr.com/wp-content/themes/the_guv3/ FormToEmail.php" method="post" id="contactForm"> <p> <label for="name">Name:</label> <input name="name" type="text" id="name" size="32" tabindex="1" /> </p> <p> <label for="email">Email:</label> <input name="email" type="text" id="email" size="32" tabindex="2" /> </p> <p> <label for="email_confirm">Email:</label> <input name="email_confirm" type="text" id="email_confirm" value="Please confirm email" size="32" tabindex="3" /> </p> <p> <label for="phone">Phone:</label> <input name="phone" type="text" id="phone" size="32" tabindex="4" /> </p> <p> <label for="website">URI:</label> <input name="website" type="text" id="website" value="http://"; size="32" tabindex="5" /> </p> <p> <label for="detail">Detail:</label> <textarea name="detail" id="detail" cols="50" rows="4" tabindex="6"></textarea> </p> <p> <input type="image" value="Submit enquiry" tabindex="5" title="Submit enquiry" alt="Submit enquiry" id="submit" src="http://guvnr.com/wp-content/themes/the_guv3/images/go2.gif"; name="submit"/> </p> </form> </div> </div> </div> </div> <!-- service panels end --> and that's it. Many many thanks for taking a peek. -- guvnr.com - Web Design Spain inc. the_guv's Tips & Tutorials:- * web wise - producing, blogging & surfing * content - how-to's and highlights * pc care - hone IT, enjoy IT Just launched the new site, with weekly features planned, so share the love and come support it ... or just fix a feed.
![http://guvnr.com/wp-content/themes/the_guv3/images/go2.gif"](http://guvnr.com/wp-content/themes/the_guv3/images/go2.gif"){kind=link}