madbytes

Thanks!

Thanks andyl, that worked. Could you explain a bit more on how should I approach something like this next time? I'm still learning jQuery, so would be good to know.

Hello, I am having a bit of jQuery problems. I'm not too sure how to construct my jQuery to apply different style to each navigation item on page scroll. The code I have right now & what it does: function setActiveNavigation() { //store location of each div var $home = $('#front-page').offset().top - $(window).scrollTop() - 80; var $about = $('#aboutme').offset().top - $(window).scrollTop() - 80; var $work = $('#projects').offset().top - $(window).scrollTop() - 80; var $contact = $('#contactme').offset().top - $(window).scrollTop() - 80; //set active to none var $active = '#none'; //set active to id once scrolled up/down to it if($home < 100) $active = '#front-page'; if($about < 100) $active = '#aboutme'; if($work < 100) $active = '#projects'; if($contact < 100) $active = '#contactme'; //remove current nav item $('#main-nav li').removeClass('home-current'); //add current nav item to active id $('#main-nav a[href=' + $active + ']').parent().addClass('home-current'); } //activate current nav on scroll setActiveNavigation(); $(window).scroll(function() { setActiveNavigation(); }); So what it does, it adds and removes .home-current class on page scroll without problems. However, I would like to add different classes depending on div i.e. for #front-page it would have .home-current, #aboutme would have .aboutme-current class ect... Could someone help me change this? Because each time I try my whole navigation just goes berserk. I tried to store different classes for each div in an array but surprise, surprise it didn't work haha. *edit* just to make it a bit more clear, this code works if .current (that is .home-current) is styled to be the same for all navigation items. But, for this navigation bar, each navigation item has it's own current class.

Thanks, I expected an answer like this :/

Hello all, I am trying to see what's the best way to use <button> in this case. I am using jQuery to scroll down to a certain bit of my page like this: <a rel="goto" href="#test">Test</a> // Go to Function function goTo(id){ $('html,body').animate({scrollTop: ($(id).offset().top - 91)}, 2000, 'easeOutBack'); } $('a[rel="goto"]').live('click', function() { var target = $(this).attr('href'); goTo(target); return false }); What I would like to do is apply the same functionality to a <button class="button">Test</button> . How could I do this? Cheers.

Thanks, that was easier then i thought haha.

Hi, I am trying to create a button that would stretch out on hover. When the button is static it would look like this: On hover, I would like my button to look like this: Does anyone know to achieve this using jQuery, where on hover it would actually stretch out rather then jump between two images?

I would use unordered list like this: <footer> <ul> <li>Copyright</li> <li>Links</li> <li>Ect</li> <li>Back to top</li> </ul> </footer> footer ul li { float:left; } .

If you want some variation in your reading list while keeping it all relevant, I would suggest this book: Narrative as Virtual Reality by Marie-Laure Ryan. This book is more about immersion & interactive storytelling (which is what we should aim to achieve when designing for web). Just generally, an interesting book that focus on principles & theories rather than technology. Worth to read if you looking into designing interactive media (such as websites).

Also, make sure to put 301 redirect on your old domain. I know it's quite simple if you are using godaddy. Plus if you are using google webmaster tools, you should do it there too (Change of address).

Thanks, it seems that I am en route to wordpress.

Hello, I was wondering if any of you could recommend me a simple blog framework? Originally, I was planning to use wordpress, but it feels too bulky for my needs. What I need is to have control over the visual appearance and an ability to implement "latest" posts into a home page of the portfolio. Another thought: or would it be more appropriate to use wordpress and re-implement my current portfolio as wordpress powered?

He could also use css sprite technique on the unordered list. It's quite ok way of doing it, with downside of having to off-set the actual text behind the frame. http://www.alistapart.com/articles/sprites2 This could be one way of doing it, Kirk.

Their website is using facebox plugin. Download it and refer to alfredapp's application.js to see how they implement it. *edit If you can't figure it out, i can compile a quick example.

<li> <a href="#section-two"> <img alt="" src="/images/tabbed-content/quickwebsearch-tab.jpg"> </a> </li> Eight boxes has an anchor link to content (#section-two in this example). This website uses jQuery to switch on display:none; css style on each list elements + fade in effect. <li id="section-two" style="padding-top: 390px; display: none;"> <h4>Quick web search</h4> <p>Search or launch your favourite websites: Google Maps, Amazon, eBay, Wikipedia and more. Get quick access to your bookmarks too!</p> </li> If you look into the source code it looks quite simple.

Check out 960.gs website. You can download Photoshop template that has basic grid and is set for 960px width.

I am sure slice tool is great but that's not the way I do it. My process usually ends up being keyboard shortcuts (M) rec. marquee tool, (Z) zoom tool and good old shift+cmd+C to copy merged. That is basically it, I just zoom in, select with rec. marquee tool and copy merged. Then cmd+N to open new file and cmd+V to paste. Then save for web, and back again. Probably not the best process but it works for me, which I am fast and precise in. Maybe this would work for you too?

To be honest, there is no "good" way to fix these errors. In some cases, if you want to use browser specific CSS3, you should be ready for your code not to validate 100%. But if you really want to target specific browsers and specify what css to load, you could use something like this: http://www.quirksmode.org/js/detect.html

Thanks, but I am pretty much set on my font selection. I want my logo to look quite condensed. On another note, I fixed the kerning of quite few letters. There was also few weight errors on M,B,E,S letters. Looks quite more decent now. Still, I am going to polish it off with few adjustments on actual logo icon ect. But for now, thanks a lot for feedback. It really helped.

You are quite right, T(-1px)E(-2px)S. Thank you for that. edit* ended up a little bit different then that.

Thanks for your feedback. You are right – it does seem a bit thicker, by a pixel or two. I made it in illustrator, maybe when I converted the font to outlines it vectorized inaccurately. Shouldn't be hard to fix, I'll post revised version later in the evening.

Hi, I've been working on my portfolio site for the last couple of weeks. I am trying to come up with a new logo concept and would appreciate some feeback.

Hey, I am so confused by this sort of coding but have you tried something like this? <label for="tab1"> <div class="align-center"> <img id="imageninmuebles" src="imagenes/inmuebles128.png"> Primera </div> </label> CSS: .align-center { text-align:center; }

If your html & css files are in the Website folder, then C:/Documents//Bob/Website/styles.css should be /styles.css Remove the bit that says C:/Documents//Bob/Website

Would it work if you used position relative? From top of my head something like this: HTML <div class="header"> <div class="navigation"> <ul> <li>home</li> </ul> </div> </div> <div class="wrapper"> <div class="content">example content</div> </div> CSS .header { position: fixed; top: 0; left: 0; z-index: 9999; } .navigation { width:58.75em; margin:0 auto; } .wrapper { width:58.75em; margin:0 auto; k} .content { }