Fat Pudding Blog: January 2011

Sunday, January 23, 2011

Jamie Woon Website

Just finished the second stage of the Jamie Woon website.
www.jamiewoon.com. New slide up footer added with the twitter, facebook and echonest feed, plus now it works better on a mobile.

Wednesday, January 19, 2011

Add class to first link or third link

The below add a class to the first link. Can also be used for any number using nth


<p id="list">

<a href="#" class="item">Item One</a> - <a href="#" class="item">Item Two</a> - <a href="#" class="item">Item Three</a>

 </p>

<script>$("p#list a").first().addClass('highlight');</script>

So to add a class to every third item


<ul id="List">
 <li>number 1</li>
    <li>number 2</li>
    <li>number 3</li>
    <li>number 4</li>
    <li>number 5</li>
    <li>number 6</li>
    <li>number 7</li>
    <li>number 8</li>
    <li>number 9</li>
    <li>number 10</li>
    <li>number 11</li>
    <li>number 12</li>
</ul>

<script type="text/javascript">
$(document).ready(function(){ 
 $("ul#List li:nth-child(3n)").addClass("third")
});
</script>

Tuesday, January 18, 2011

wedding invitation

I designed and created the stationary for my sister's wedding, which included invitations, menus, place settings and order of service. They all had swarovski heat stuck on for extra glamour.

Simple way to add class on hover with jQuery

If you need to add a class on hover the best way to do it is with jQuery


<html xmlns="http://www.w3.org/1999/xhtml">

<head>



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function() {

       $('.myDiv').hover(function() {

    $(this).addClass('newClass');

  }, function() {

    $(this).removeClass('newClass');

  });

    });  

</script>



</head>



<body>

 <div class="myDiv">This is my new Div</div>

</body>

</html>

Numbered List with Jquery

Obviously you can use an ordered list to create the number in front of a list, however this is often hard to style and cumbersome. Instead jQuery can create a simple numbered list:


<script type="text/javascript">

$(document).ready(function(){

 

 $("#List li").each(function (i) {

  i = i+1;

  $(this).prepend('<span class="commentnumber"> '+i+'. </span>');

   });

});

</script>

with the html


<ul id="List">

    <li>first list item</li>

    <li>second list item</li>

    <li>third list item</li>

</ul>

With the imminent deminse of delicious I have been going through my bookmarks and have discovered my old blog that I half-hartedly started a few years back and then forgot about. Well time to start a new interest in it!!

As a belated new years resolution, I will try and keep the blog updated once more