So I'm making a portfolio site and my layout is fairly simple. Header, nav, content. Every time a user clicks a link I need JUST the contents within the contentDiv to change according to the link. I want to avoid page refreshing, which is why I'm doing it this way.Fyi I'm using Dreamweaver + jQuery. However the space for the content div is very specific i.e: #content { float:right; height: 624px; width: 994px; background-color: #FFF; overflow:auto; } How can this be done using CSS/Jquery?
Well, if you weren't pissing away clean code, semantics and efficiency with garbage like Dreamweaver and jQuery, you probably wouldn't need to be pissing away accessibility with the 'pageloads are evil' nonsense. I'd have to see the page in question, but if pageloads are an 'issue' and you really want to destroy accessibility, functionality, and usability by AJAX-loading your content section (which is basically what you are saying), there's probably something wrong with the site. In other words, I would advise against what you are asking for on accessibility grounds ALONE -- and would instead advise that you pre-cache sub-page appearance in the CSS as much as you can, use minimalist markup, get anything static out of the markup that you can, and back away from fat bloated library BS like jQuery and any associated 'onload' crap that slows down your page loads. But I'm the guy who says if you have more than 6k on a sub-page load for markup and unique CSS/JS (not counting a page's content) you probably need to throw the entire site away and start over from scratch.
In general, there are few sane reasons for doing what you're asking. The browser caches all supplementary files, unless you had a massive brain fart and told it not to. So all those images, scripts and stylesheets are only downloaded once, and the 'new' page consists of only the html, which is plain text and of small file size. Exceptions to the general rule are web applications such as Google maps, where the objective is to make the world scrollable in a seamless manner by asynchronously GETting adjoining map segments in the background as needed instead of having a single humongous image file.
Thinking about it. I believe I'm making this 100 times more complicated than it needs to be. So should I just copy paste the code that is already going to be on the page and fill in the content div with all the new content? I'm not telling the browser to NOT cache so page loading wouldn't even to big of an issue if I properly resample my images for web use.
Better than cut/paste to each file, would be to use a server side include / server side language to handle it. If you are on Apache you could use SHTML, on Windows there's ASP, and PHP is available just about anywhere. For example using PHP, if you had header.php: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> <?= $pageTitle ?> - Site Title </title> </head><body> <div id="pageWrapper"> <h1> Site Title <span><!-- image replacement --></span> </h1> <ul id="mainMenu"> <li><a href="home">Home</a></li> </ul> <div id="content"> Code (markup): and a footer.php <!-- #content --></div> <hr /><!-- remove if footer starts with numbered heading --> <div id="footer"> Footer Content Here <!-- #footer --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): your index.php (home page) code would read: <?php $pageTitle = 'Home'; include('header.php'); ?> <h2>Section Title</h2> <p> Your page content would go here </p> <?php include('footer.php'); ?> Code (markup): $pageTitle being a variable you can change, changing the value inside <title></title> as appropriate. You can then make all your separate pages on the site using that simple variable set and two includes with the content in-between the ?> and <?php That way you can make changes to the template (like adding or removing menu items, adding a sidebar common to all pages, etc, etc) without touching each page's content.
Wow, so is my code complete bullocks? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Portfolio + Blog of Derrick Alexander</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="jquery-1.10.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document) .ready(function() { $('#nav img').animate({ opacity:1 }); $('#nav img').hover(function(){ $(this).stop().animate({opacity:.5}, "fast"); }, function(){ $(this).stop().animate({opacity:1}, "fast"); }); }); </script> </head> <body> <div id="container"> <div id="content"> <img src="Dalexphotosite/images/content img/Korean clouds.jpg" width="900" height="294" style="padding:5px; padding-left:25px;"/> <img src="Dalexphotosite/images/content img/BWD2BLOG.jpg" width="900" height="294" style="padding:5px; padding-left:25px;"/> <img src="Dalexphotosite/images/content img/yakiniku.jpg" width="900" height="294" style="padding:5px; padding-left:25px;"/> <img src="Dalexphotosite/images/content img/arielpinktumblr.jpg" width="900" height="294" style="padding:5px; padding-left:25px;"/> </div> <div id="logo"><img src="Dalexphotosite/images/GoodHouseLogo.jpg" width="274" height="374" style="padding-left:10px;"/></div> <div id="nav"> <a href="about.html"><img src="Dalexphotosite/images/Buttons/About.jpg" width="274" height="50" style="padding-left:10px;"/></a> <a href="Blog.html"><img src="Dalexphotosite/images/Buttons/BLOG.jpg" alt="Blog" width="274" height="50 " style="padding-left:10px;"/></a> <a href="street.html"><img src="Dalexphotosite/images/Buttons/Street.jpg" width="274" height="50" style="padding-left:10px;"/></a> <a href="music.html"><img src="Dalexphotosite/images/Buttons/Music.jpg" width="274" height="50" style="padding-left:10px;"/></a> <a href="contact"><img src="Dalexphotosite/images/Buttons/Contact.jpg" width="274" height="50" style="padding-left:10px;"/></a> </div> </div> </body> </html> Code (markup): #container { height: 624px; width: 1268px; } #logo { float:left; height: 374px; width: 274px; background-color: #FFF; } #nav { float:left; height: 250px; width: 274px; background-color: #FFF; } #content { float:right; height: 624px; width: 994px; background-color: #FFF; overflow:auto; } Code (markup): Image of the main page
I wouldn't say complete, but there are a number of failings. 1) Transitional document, which is basically proudly proclaiming the code is in transition from 1997 to 1998 coding practices. Tranny is for supporting the 'new' tags of 4 in 3.2 documents, NOT for building new websites. I would suggest switching to STRICT, the latest recommendation. 2) No media stack on the style LINK. 3) jQuery for nothing. (what little of it you are using appears to be CSS' job!) 4) non-semantic markup 5) Presentational images in the markup. 6) Static style in the markup. (I still say STYLE should be obsolete as a tag, deprecated as an attribute). 7) fixed height outer wrapper 8) design elements that can only work as a fixed width layout -- resulting in a "accessibility, what's that?" layout. The biggest of these is the non-semantic markup, and generally speaking a lack of logical document structure. DIV, SPAN and even A do not change or apply meaning to what they wrap -- they are considered 'semantically neutral' -- you should be using tags with actual meanings and actual text on the page if you care about people actually using it. You can get around that if you REALLY want the goofy fonts stored in images using image replacement methods, the best of which is called 'Gilder-levin'. You position a empty span over the text, then apply the image as a background to that span covering up the image -- that way images off/unavailable the page still works. (like say, for screen readers, search engines, or people on narrow bandwidth/metered connections who turn them off on purpose!) Your screencap raises a lot of worries -- those massive fixed height images are the antithesis of accessible design... and generally speaking a waste of space. Turns it into little more than a 'splash page' -- something that is on every 'common mistakes' list of the past decade. I'd swing an axe at that, and probably make the about page the home page instead so there something to tell people what the devil they are even looking at. In general you seem to be thinking appearance before content -- a back-assward approach since what you see is almost certainly NOT what everyone else gets. With the plethora of font renderers, screen sizes, and the NEED in modern design for responsive layout, massive images as content or links is the road to /FAIL/ no matter how pretty it is. Semantic markup of the content (or a reasonable facsimile) first, then you bend it to your will with the CSS to make your layoutS -- yes, plural... since one single screen width is NOT accessible, no matter what the sleazy lazy re-re's who see nothing wrong with fixed width designs might try and tell you. Just to give you an idea what I mean, not counting the content my markup for that would go something like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> Portfolio + Blog of Derrick Alexander </title> </head><body> <div id="pageWrapper"> <div id="top"> <h1> Good House <span>-</span> <small>Portfolio + Blog</small> </h1> <!-- empty span below are image replacement sandbags, do not remove --> <ul id="mainMenu"> <li class="about"><a href="about.html">About<span></span></a></li> <li class="blog"><a href="blog.php">Blog</span></span></a></li> <li class="street"><a href="street.php">Street</span></span></a></li> <li class="music"><a href="music.php">Music</span></span></a></li> <li class="contact"><a href="contact.php">Contact</span></span></a></li> </ul> <!-- #top --></div> <div id="content"> <!-- page content here --> <!-- #content --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): Pretty much everything else would belong in the screen.css for screen layout(s) again, plural via media queries for different screen sizes)...and print.css for print layout, and of course with semantic markup you have a non-CSS baseline for screen readers, people browsing with images or CSS disabled, and search engines.
Hmm ok I think I understand. I was actually going for a particular style/layout which is why I have a fixed width and height and leave all the scrolling to the content div. Also the fact that I wanted to concentrate on my content primarily, which is why I have images as opposed to importing those specific fonts(less work). I don't know if I'm in over my head in terms of making this site on my own but I wanted a specfic style/layout that I couldn't get with a CMS.
Yo know I'm going to clean up my code but I'm sticking to having the sidebar and header being fixed because quite frankly it seems that every site that is out there looks like a shoddy blog template or feels incomplete because you scroll down the rest of the page and all your nav is gone and you just see an array of images. The point of my site is to make my art look good in the context of the design. I'm not concerned about someone looking at my portfolio on an iphone because they're not. I'm not worried about accessibility because if they can't operate a simple nav & scroll bar, they shouldn't be using the internet anway.
Which is a broken design since what height are you making that DIV? If you can make it 100% height then you are fine, but if you make it a fixed height like you are, it's not using enough of the screen on machines like my desktop, is inaccessible trash on things like a netbook or tablet... etc, etc... Let body and the normal scrollbar do it's job, instead of using overflow:auto on inner elements. In other words letting people use the entire screen for what they came to your site for -- THE CONTENT. Fixing a header in particular is annoying crap the smaller the display. ... and how did you determine that? This is the Internet, the only thing you can predict about who will visit your website on what devices is that you cannot predict who will visit your website on what devices.
A fixed Nav bar is ideal for a site with a lot of images because having the ability to choose what gallery or content you want to look at, at ANY time without having to scroll all the way back up the page is great for accessibility. Look at this site for example. http://www.philtetu.com/project/beach-fossils-live-in-bangkok I might fix the header if I end up putting my nav in the header. Which I most likely won't because I'm not a fan of that layout. If I give someone an address to a photography portfolio page, who in there right mind is going to look at that on a low res mobile screen? Ideally people looking at the site are not going to be doing it from there mobile.
"Ideally" and the web seem to only cross paths by accident. While the visitor may use a larger screen to do some seriousl looking, he may very well give the site a quick once over using his phone or tablet while relaxing at Starbucks. If you fail to make a positive impression, he'll never bother with the large screen. It may not always be easy to make things easy for your visitor to do what he wants to do on your site, but there is no reason on god's green earth to make things hard.
Yeah, as for me, I wouldn’t underestimate the power of mobiles these days. Phones are getting bigger so it would make sense that way.