Winnipeg Web Design
a winnipeg website design company.
a winnipeg website design company.
Friday, March 25th, 2011
Tags: css, html, jquery, mysql, PHP
Posted in portfolio | Comments Off
Friday, March 25th, 2011
Tags: css, html, jquery, magento
Posted in portfolio | Comments Off
Monday, December 8th, 2008
Do you ever get frustrated with creating columns of equal size using CSS? If you are, you have the same feeling as many of us developers. Creating faux columns is one option, but may I suggest using JQuery to make this process a synch. In the following tutorial we will be creating a JQuery Plug-in that will allow us to use a single line to make our divs equal heights.
Note: Please visit, CSSNewbie to get another similar approach. I have taken some ideas from this post, but have implemented it as a plug-in unlike his example.
Below shows the problem:
First of all, shuffle over to JQuery.com like always and download the latest JQuery version. Place this file in a folder called “js”. Now let’s build our structure and presentation:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal Heights using JQuery:: Brenelz.com</title>
<style style="text/css">
body { font: 0.75em Arial, Helvetica, sans-serif; background-color: white; }
#wrapper { width: 760px;margin: 0 auto; }
.column {float: left; padding: 10px; }
#col1 { width: 110px;margin-right: 10px;background-color: #E2DDC4; }
#col2 {width: 200px;margin-right: 10px;background-color: #B5C9DA; }
#col3 {width: 210px;background-color: #E87C5E; }
</style>
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Equal Heights Using JQuery</h1>
<div class="column" id="col1">
<p>This three-column design features three columns with significantly varying quantities of content.</p>
</div>
<div class="column" id="col2">
<p>Normally these divs would all be different heights but using JQuery we can make them all the same heights. No faux columns, or other repeating background tricks are needed!</p>
<p>They're simply individual divs sharing the same class name, which we can use in our JQuery.</p>
</div>
<div class="column" id="col3">
<p>And this can be done using a custom plug-in and 1 line of JavaScript!</p>
</div>
</div>
</body>
</html>
Nothing too complicated here. I am going to assume you have basic knowledge of HTML and CSS, so we can focus on the JQuery. Let’s add a touch more JavaScript to our head that will represent what we want to do.
<script type="text/javascript">
$(function(){
$('.column').equalHeight();
});
</script>
This won’t work yet obviously because equalHeight() is not a function that JQuery comes with by default. I will now show you how to make a custom plug-in.
<script type="text/javascript" src="js/jquery.equalHeight.js"></script>
Now that the files are all linked up lets edit our jquery.equalHeight.js:
// make sure the $ is pointing to JQuery and not some other library
(function($){
// add a new method to JQuery
$.fn.equalHeight = function() {
// find the tallest height in the collection
// that was passed in (.column)
tallest = 0;
this.each(function(){
thisHeight = $(this).height();
if( thisHeight > tallest)
tallest = thisHeight;
});
// set each items height to use the tallest value found
this.each(function(){
$(this).height(tallest);
});
}
})(jQuery);
Save this file and open it up. You should now see that each DIV has the same height.
I hope you have learnt the basics of JQuery, along with learning how to extend JQuery for your future projects.  Please download the JQuery Equal Height Tutorial Files, and feel free to fiddle around with the code.
Tags: JavaScript, jquery
Posted in Web Programming | 11 Comments »
Tuesday, December 2nd, 2008
JQuery has quickly become my preferred framework. It has a relatively small footprint and offers a lot of functionality with little code. Today we will be using this library to create a simple accordion which you can use on your website, or blog.
Download my JQuery Accordion example here or View the JQuery Accordion Screencast
First of all, please visit JQuery’s site and download the production code. Then proceed to include this into your HTML file, using something similar to the below in the <head> section:
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
Now let’s begin to create our simple mark-up for our accordion.
<div class="accordion">
<h3>Heading One</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>Heading Two</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>Heading Three</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
</div>
We are just using H3 tags for our headings and a paragraph tag which would contain your actual content. This is not looking too pleasing yet. Add the below CSS and then view the HTML file once again.
<style type="text/css">
body {
margin: 10px auto;
width: 570px;
font-size: 0.75em;
font-family: Arial, Helvetica, sans-serif;
}
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background-color: #e9e7e7;
padding: 7px 15px;
margin: 0;
font-size: 1.2em;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #DFD1D1;
}
.accordion h3.active {
background-color: #D1D1DF;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
display: none;
}
</style>
Most of the above is pretty self explanatory and mostly has visual meaning. The most important aspect to see is that we have set “display:none” to each accordion paragraph. If you have seen an accordion you know that the content is not shown until a heading is clicked.
Another selector that you might not see point in at the current moment is the class “active”. This will be assigned to whichever heading has been clicked, as to provide the user with a visible clue as to which content they are seeing.
Enough of the XHTML / CSS work…. you came here for the JQuery right? Let’s pseudo code out what we want our JavaScript to do. The following corresponds to the line numbers in the below code.
Now let’s write out the JQuery to accomplish each of these tasks:
$(function(){
$(".accordion h3").eq(2).addClass("active");
$(".accordion p").eq(2).show();
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
Now test this out in a browser and be wowed as how simple it was to create a neat accordion with 10 lines of code!
If you enjoyed this JQuery tutorial, make sure to comment and let me know what other JQuery tutorials you are looking for.
Tags: JavaScript, jquery
Posted in Web Programming | 5 Comments »
Twitter
Follow me on Twitter to keep up to date!
RSS Feed
Keep up with all of our updates by subscribing to our RSS feed!
FaceBook
Join our group on Facebook and become a fan of us!