Fat Pudding Blog: jquery

Showing posts with label jquery. Show all posts

Monday, April 23, 2012

responsive slide menu

Here is a nice way to do a responsive menu that kind of emulates the facebook iphone menu instead of the usual responsive stacking menu.

PageSlide Responsive Demo

Thursday, September 08, 2011

Very nice 3D carousel

The Slicebox carousel is really very lovely when viewed in chrome or safari, having lovely 3d effects and importantly working like a normal carousel when in other browsers.

Monday, April 04, 2011

Learning Javascript and JQuery

There are many good places on the internet where to learn javascript or jquery from basics. Some sites have nice tutorials others with informative videos or slideshows.
Here are a couple of nice sites to begin:

Wednesday, February 16, 2011

Slide Panel

Space is a premium on most sites so that I why I like the sliding effect of text behind images using jquery. The code is very simple and it allows the user to rollover an image and see info about it. Of course you can go the otherway and have text on top of the image but this is a nice alternative.

view demo

Tuesday, February 01, 2011

JQuery 1.5 Release

The latest version on Jquery has just been released. The biggest change according to their website is a complete rewrite of the Ajax module.

Pull it on the google CDN at

https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js

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

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>