Threadbare Canvas Productions » JQuery

Write a Bouncing Accordian with JQuery

Siriquelle — Sun, 15 Nov 2009 19:40:05 +0000

The following example is of a bouncing accordian. The idea behind a bouncing accordian is to use ajax to pull content for a number of pages and populate a central div with that data. The content area on the main page will fade out resize to 0px and then rsize again back to a new height with the new content displayed. The following is the result of the labour.

Source Demo

So, now that you’ve had a peek at it working you can look over the code. The first thing is folder structure. I like base folder > assets > and then folders for each asset like > ajax for the pages of content and css for css and so on. The following is the HTML and JQUERY all on one page as its fairly simple to put together.





	
		
			Bouncing Accordian
		
		
		
		
		
	
	
		

			

				
					
						Home
						About
						Contact
					
				

				
					
						
					
				

				
				© Threadbare Canvas Productions & James Hogan

That was easy, a couple of lines of jquery and youve got a neat effect. Add some CSS for Style.

body{margin:0; padding:0px; background-color: #bdbdbd;}
a{text-decoration:inherit; color: inherit;}
.aligncenter{margin-left:auto;margin-right:auto;}

#main{
background-color:#dedede;
font-family:arial;
}

#container{
width:480px;
background-color:#dedede;
}

#nav{
border:5px #efefef solid;
-moz-border-radius:15px;
}
#nav #nav_list{
width:355px;
}

#nav #nav_list li{
display:inline;
margin-left:30px;
padding:5px;
border:1px #ccc outset;
background-color:#cdcdcd;
color:#fefefe;
-moz-border-radius:10px;
font-weight:bold;
cursor:pointer;
}

#content{
-moz-border-radius:15px;
min-height:0px;
padding:5px;
border-left: 5px #efefef solid;
border-right: 5px #efefef solid;
}
#content h1{
font-size:18px;
}
#content p{
font-size:14px;
}

#footer{
-moz-border-radius:15px;
border: 5px #efefef solid;
padding:5px;
text-align:center;
font-size:12px;
}

Also there are three other pages those are the ajax pages that will be dragged in to fill the content area.. So I created three files page1, page2, page3 .html and put them in an ajax folder then I gave an id of page1, page2, page3 to each of the buttons that i wanted to activate the ajax request for the content. The following is the sample content I had in those files.

Home

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis

et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci

velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea

commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate

velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

And there you have it a few simple files and a few lines of jquery can create a really nice effect for a website. Even if it looks fuggley :). PEACE!!

Write a simple Bingo Card with Javascript and Jquery

Siriquelle — Mon, 12 Oct 2009 20:07:59 +0000

Writing a bingo card couldn’t be easier with tools such as JQuery and a brain. There are some simple techniques that you need to put into place to get it all up and running. There are three files included in this tutorial. index.html, style.css and script.js

Now, you should end up with something like this:

Source Demo

If you want to glance through the source code you can do so here: index.html



    
        
        Bingo - Card
        
        

        
        
    
    

        
            Free Bingo Card
            
                
                     nbsp;
                     nbsp;
                     nbsp;
                     nbsp;
                     nbsp;
                
                
                     nbsp;
                     nbsp;
                     nbsp;
                     nbsp;
                     nbsp;
                
                
                     nbsp;
                     nbsp;
                    Free
                     nbsp;
                     nbsp;
                
                
                     nbsp;
                     nbsp;
                     nbsp;
                     nbsp;
                     nbsp;
                
                
                     nbsp;
                     nbsp;
                     nbsp;
                     nbsp;
                     nbsp;
                
            
            Click me for a new card

The following is the source of the CSS: style.css

#page{
    width:455px;
    margin:0 auto;
}

td{
    font-family:arial;
    color:#333;
    padding:10px;
    width:50px;
    height:50px;
    text-align:center;
    border:10px solid #ddc;
    background-color:#eee;
}

.bingohead{
    border:10px solid #c2324c;
}

h1, h3, h3 a{
    font-family:arial;
    text-align:center;
    padding:3px;
    color:#211111;
    background-color:#EEEEEE;
    border:2px solid #DDDDCC;
}

td{
    cursor:pointer;
}

#free{
    background-color:#fff;
    color:#eee;
    cursor:default;
}

And finally all of that JavaScript goodness: script.js

$(document).ready(function(){

    var usedArray = new Array(76);
    var baseArray = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
    var number = 0;
    var base = 0;

    init();

    function init(){
        for(var i = 0; i<24; i++){
            fillCard(i);
        }
    }

    function fillCard(i){
        base = baseArray[i] * 15;
        number = base + Math.floor(Math.random()*15)+1;

        if(usedArray[number] != true){
            $('#cell'+i).html(number);
            usedArray[number] = true;
        }else{
            fillCard(i);
        }
    }

    function resetUsedNumbersArray(){
        for(var j = 0; j < usedArray.length; j++){
            usedArray[j] = false;
        }
    }

    $('#newCard').click(function(){
        resetUsedNumbersArray();
        init();
    });

    $('td').click(function(){

        var toggle = this.style;
        toggle.backgroundColor = toggle.backgroundColor? "":"#333";
        toggle.color = toggle.color? "":"#fff";
    });

});

Something to read while eating your sandwich and drinking your tea, yummie! Extreme programming!!

Creating a Content Slider with JQuery

Siriquelle — Thu, 16 Jul 2009 14:36:37 +0000

Content sliders add very nice interactivity to your website. In this tutorial I will show you how to use jQuery to create a simple content slider. Of course you can change the styles look and feel of the product your self but for now I’m keeping it simple. The final product will look like this:

Source Demo

First thing you should do is get your folder structure in order so in the root folder of your project create a folder called ‘assets’ and in that folder create three more folders called ‘js’, ’style’ and ‘img’ to contain your JavaScript your css and your images. I am using ‘io’ as my root folder but you can use whatever you like, somehting liek ‘Content_Slider’ comes to mind. The end folder structure should will look like this:

In the project root folder create a new html file and name it index.html and past the following code inside:



  
    
    
    JQuery Content Slider
  
  
    
      
      
        
          
            Hello
            
              Hello
            
          
          
            Hello
            
              Hello
            
          
          
            Hello
            
              Hello

Now that the html file is set up you’ll need to create another file called style.css to contain all of your styles. Copy and past this code into the style.css file and stick it into the css folder:

* {
    margin: 0;
    padding: 0;

}
body {
    font: 71%/1.5 Verdana, Sans-Serif;
    background: #eee;

}

/* */
#content{
    margin:100px auto;
    padding:5px;
    width:688px;
    display:table;
}

/* */
#leftArrow, #rightArrow, #viewport{
    float:left;
}
#leftArrow, #rightArrow{
    width:100px;
    height:100px;
    margin:50px auto;
    cursor:pointer;
}
#leftArrow{
    background:transparent url(../img/nav.png) no-repeat 0px 0px;
}

#rightArrow{
    clear:right;
    background:transparent url(../img/nav.png) no-repeat 0px -100px;
}

/* */
#viewport{
    width:482px;
    height:200px;
    overflow:hidden;
    border:1px #333 solid;
}

/* */
#conveyor{
    position:relative;
    left:0px;
    width:1452px;
    height:200px;
}

#conveyor .item{
    float:left;
    width:482px;
    height:200px;
}

#conveyor .item .lastItem{
    clear:right;
}

/**/
.news{
    min-height:60px;
    width:476px;
    margin:3px auto;
    position:relative;
    top:100%;
    border:1px #444 solid;
}
/* */
.no1{background-color:aqua;}
.no2{background-color:blue;}
.no3{background-color:green;}

.item, .news, #viewport{
    -moz-border-radius:10px;
}

p{
    padding:15px;
    font-size:24px;
    font-weight:bold;
}

Now you should have a page with a look but no interactivity to it so create a new javascript file and call is JavaScript.js and copy and past the following code into it and stick it into your js folder:

$(document).ready(function() {

    /* */
    var conveyor = $("#conveyor");
    var conveyorPos = conveyor.position();

    var leftArrow = $("#leftArrow");
    var rightArrow = $("#rightArrow");

    var item = $(".item");
    var dist = item.width();

    /* */
    leftArrow.click(function(){
        updateConveyorPos();
        if(conveyorPos.left < 0){             conveyor.animate({                 "left": "+="+dist+"px"             }, "slow");         }     });     rightArrow.click(function(){         updateConveyorPos();         if(conveyorPos.left > -567){
            conveyor.animate({
                "left": "-="+dist+"px"
            }, "slow");
        }
    });

    /* */
    item.mouseenter(function(){
        $(".news").animate({
            "top": "61px"
        }, "slow");

    });

    item.mouseleave(function(){
        $(".news").animate({
            "top": "100%"
        }, "slow");

    });

    /* */
    function updateConveyorPos(){
        conveyorPos = conveyor.position();
        //alert("left: " + conveyorPos.left + "/ dist: " + dist);
    }
});

Luckily the folks at JQuery offer free hosting for their latest release so we don’t need to store it in our own file system. But that’s it, you should now have a JQuery content slider that you can play with yippiee!!.

nbsp;	nbsp;	nbsp;	nbsp;	nbsp;
nbsp;	nbsp;	nbsp;	nbsp;	nbsp;
nbsp;	nbsp;	Free	nbsp;	nbsp;
nbsp;	nbsp;	nbsp;	nbsp;	nbsp;
nbsp;	nbsp;	nbsp;	nbsp;	nbsp;