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.