Jamie Goodwin

Much neater fix, very nice. I'll definitely be interested in this plugin if you're putting it up anywhere. J

I see you've already done what I suggested above, should have looked before I posted! A less elegant solution is of course to set the ".next" and ".prev" buttons to display none while it's animating. Obviously this isn't the perfect solution because it means the buttons disappear, I suppose you could create a <p> or <div>, with the text inside it, then put an absolute 100% by 100% <a> inside that and only have the <a> disappear, leaving the text visible in the <div>? I've just tried that and it works pretty well, you can still see the next and the previous as it animates, but the actual link to animate is not there until the animation has finished. I'll upload it here just in case you need it (let me know when you're done and I'll pull it back down again).

Wow man that is a fantastic little script. One thing I can think of, and obviously this might be wildly ridiculous, I'm fairly new to jQuery but, what about creating a variable such as a simple boolean called something like activateClick, and for each next/previous click event the variable is checked prior to the event, if it's true then run the event, if not then cancel. This way you can have it so that a click itself sets the variable to false, then once the animation is complete run a chained function to reset it to true? Hope this helps, sorry if it's totally useless! Jamie Goodwin

I'm no expert mate, I've been self teaching for about six months now and have only done a few websites, mine isn't even up and running yet but my first impression, it doesn't look very professional. Not in the sense that it looks bad, but it looks a little slim, there isn't much on there, it seems hollow. Also many of the animations are indeed a little rough, very good, I certainly couldn't animate anything like as well as you can but some of them seem a little pixelated, perhaps you should remove those and replace them with high quality ones. I've just been talking to a friend about this, who also had a look, I think perhaps you're trying too much to show off what you know and not focusing on making it useable and pretty and nice. It's hard to describe, but I know what they mean, "rough around the edges" does do it justice unfortunately. My advice would be to take a look at some other sites, a variety of sites, hit http://www.webdesignerwall.com and have a look, he's also got links to his own site and a 100 best sites page. Also a nice one is lukelarsen.com. Google something like "best websites" or "pretty websites" and see if you can get a feel for various different themes and styles. Perhaps contact this company you are applying to and find out what sort of sites they design, or look at theirs? I don't mean to blow my own trumpet but there is one website I have made which I feel is quite nice, it's certainly my personal favourite, ( http://clira.co.uk ) , it's clean and simple but also effective, keeping all the content that my client wanted. It pretty much secured a place for me on a web design internship. Maybe this clean simple style is what your company are looking for? Check out this article ( http://alistapart.com/articles/whitespace ) . It might give insight as to what you need. I certainly find it very interesting! I hope you don't find my comments to unhelpful! Good luck in your job hunt. Sincerely, Jamie Goodwin udwebdesign.co.uk(in progress)/newwordoftheday.co.uk

Ok this is not the best solution however it works, in your boxheadertext, set line-height to 55px. .boxheadertext{ font-family: Tahoma, Arial; font-size: 15px; color: #FFFFFF; text-align: center; vertical-align: middle; margin: auto; text-decoration: none; padding:0; line-height: 55px; } That solves problem number one. I'm working on the rest. Edit: I'm not sure what your problem is with your big_text not taking effect "as per your css". The css class big text does indeed control that block of text.

Thanks fatrabbit, yea well what is supposed to happen is onMouseOver, slide up, then onMouseOut, slide down again, however I thought that the setting for slide was to toggle, I'm not sure of the specific function names built into jQuery. I will try it with slideIn and Out. Thanks again, Jamie P.S. Just tried setting up two functions, slideIn and slideOut, both calling the same jQuery function "slideToggle". No joy.

I have a small problem, I have a menu, tab style going across the top of my content. What I want is, using the jQuery accordion effect, to have each tab slide up to reveal a picture. At the moment everything is positioned perfectly, the tabs slide up when you hover over them but instead of staying up whilst hovering over them they kind of bounce and do funny things. It would be great if they would stay up onMouseOver and go down onMouseOut. This is a link to a *working* example on the internet http://udwebdesign.co.uk/index2.html ----HERE IS THE CSS--- body {color:black; width:100%; height:auto; padding:0; margin-top: 75px; font:75%/120% 'lucida grande',tahoma,trebuchet; text-align:center;} .header {background:; width:800px; height:25px; margin:auto; z-index:0; color: #777777;} div.title {position:relative; height:100%; width: 200px; left:-10px;} div.menu {position:relative; height:105px; width: 300px; top:-93px; left:480px; vertical-align:bottom;} .footer {width:900px; height:35px; margin:auto; z-index:0; color:orange; text-align:right;} #panel {position:relative; background:url('images/default/contentbg.png') 0 0 no-repeat; width:800px; height:600px; margin:auto;} .tab {position:relative; width:75px; height:105px; margin:auto; display:table-cell; text-align:center; vertical-align:bottom;} .ptab {background:url(images/default/menutab.png) 0 100% no-repeat; position:relative; height:30px; vertical-align:top; margin:auto;} a {text-decoration:none; color:inherit;} .slide {position:relative; height:75px; width:75px; bottom:0; margin:0; background:url('images/default/menuslide.png') 0 0 no-repeat;} #one {display:none;} #two {display:none;} #three {display:none;} #four {display:none;} -----AND HERE IS THE HTML----- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Untethered Dog web design. A new age in website construction. Unleashed soon."> <meta name="keywords" content="website design, website construction, website building, web design, web, design, construction, building, html, css, javascript, flash, php, asp, ftp, server, domain, domain name, build websites, web site, site"> <link rel="stylesheet" href="ud2.css" /> <link rel="shortcut icon" href="http://udwebdesign.co.uk/favicon.ico"'>http://udwebdesign.co.uk/favicon.ico" type="image/vnd.microsoft.icon" /> <link rel="icon" href="http://udwebdesign.co.uk/favicon.ico" type="image/x-icon" /> <title>untethered:dog</title> <script type="text/javascript" src="javascript/jquery.js"></script> <script type="text/javascript" src="javascript/secure.js"></script> <script type="text/javascript" language="javascript"> function slide(x){ $(x).slideToggle("slow"); $(this).toggleClass("active"); return false; } </script> </head> <body> <!--Preload images--> <!--End preload images--> <div class="header"> <div class="title"><img src="images/udtitle.png" alt="image" width="200" height="40" /></div> <!--Nav--> <div class="menu"> <div class="tab" onMouseOver="slide('#one')" onMouseOut="slide('#one')"><a href="portfolio.html"><p class="ptab">portfolio</p></a><div class="slide" id="one"></div></div> <div class="tab" onMouseOver="slide('#two')" onMouseOut="slide('#two')"><a href="index.html"><p class="ptab">homepage</p></a><div class="slide" id="two"></div></div> <div class="tab" onMouseOver="slide('#three')" onMouseOut="slide('#three')"><a href="geekery.html"><p class="ptab">geekery</p></a><div class="slide" id="three"></div></div> <div class="tab" onMouseOver="slide('#four')" onMouseOut="slide('#four')"><a href="about.html"><p class="ptab">about</p></a><div class="slide" id="four"></div></div> </div> <!--Nav--> </div> <div id="panel"> <!--Main Page Content (within slide box) Goes Below Here--> <p class="test"> HOME </p> <!--Main Page Content (within slide box) Goes Above Here--> </div> <div class="footer"> <div>All rights reserved.</div> </div> </body> </html>

Hi guys, I'm another newbie to the forum. Love designing websites because of the code/design mix aspect! Been designing websites for about a year with a friend of mine. We've recently started our own company "Untethered Dog" because we've made about three websites for people, and realised we didn't even have our own website! Anyways that's kind of the reason I've joined the forum, I'm going through millions of different styles for Untethered Dog and a couple of them are giving me some trouble! I'l whack up a post to see if anyone can help! P.S. I'm attending Manchester Metropolitan University in England, studying Business and IT. I had to design a website for a project in my first year and I got top marks in the year!!! Which also spurred me into doing some web design. Jamie