Winnipeg Web Design
a winnipeg website design company.
a winnipeg website design company.
Wednesday, November 30th, 2011
Well it has been awhile since I have posted on this blog. I would love to be posting more, but my hectic work schedule isn’t allowing me much time at all.
Well enough of that. Today I am going to help you figure out how to fix an annoying little ie bug. If you haven’t already checked out my ie z-index bug page, do it now.
Most of you by now I am guessing have started to implement CSS3 gradients in your projects instead of repeating background images. If not, I suggest you check out this handy css3 generator that converts an image into its very own CSS3 gradient.
Now in my example, I have a navigation bar that is using a CSS3 gradient, and then I also have an active state for a link that expands outside of the navigation’s boundaries. See below:
The following is the HTML code I used:
<div id="global-nav">
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
and the import CSS relevant to our issue:
#global-nav ul {
background: #d2d6da; /* Old browsers */
background: -moz-linear-gradient(top, #d2d6da 0%, #c9ccd1 21%, #a1a3a7 75%, #95979a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2d6da), color-stop(21%,#c9ccd1), color-stop(75%,#a1a3a7), color-stop(100%,#95979a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d2d6da 0%,#c9ccd1 21%,#a1a3a7 75%,#95979a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d2d6da 0%,#c9ccd1 21%,#a1a3a7 75%,#95979a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d2d6da 0%,#c9ccd1 21%,#a1a3a7 75%,#95979a 100%); /* IE10+ */
background: linear-gradient(top, #d2d6da 0%,#c9ccd1 21%,#a1a3a7 75%,#95979a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d6da', endColorstr='#95979a',GradientType=0 );
height:54px;
line-height:54px;
}
#global-nav li {
display: inline;
float:left;
}
#global-nav a.active {
margin-top: -12px;
background: url(../images/active-bg.png) no-repeat;
}
So in this case everything would look great except IE. Here is what would show up in IE:
As you can see our nice overlapping feature is cut-off. To me I thought I must have assigned “overflow:hidden” to the ul as that is what it looks like. Turns out that is not the issue.
All you have to do to fix this error is remove the following line of CSS:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d6da', endColorstr='#95979a',GradientType=0 );
Now the problem is that you will not have your nice CSS3 gradient in IE, but in some cases the overlapping if more crucial to the design. Don’t ask me to explain why filter does this. Filter works great until you have to push out of the boundaries.
If you have any better solutions/fix for this issue, please let me know in the comments.
Posted in Web Programming | No Comments »
Thursday, October 28th, 2010
Syntax highlighting can make a huge difference when it comes to showing code snippets. We have all seen it, but how many of us have actually stopped to consider how it works.
There are a handful of good options that I am aware of. Some are easier to use and others offer additional features, such as copy, show code, etc. All projects I will mention are JavaScript based. There should be very few issues with cross-compatibility.
One of the most popular ones, and the one I am going to highlight (no pun intended) is called SyntaxHighlighter.
SyntaxHighlighter includes support for 25 different programming languages (referred to as brushes in this project) with additional brushes available for download. One thing I really like about SyntaxHighlighter is that each brush is an individual JavaScript file.
To use; download the latest version and upload it to a directory on your server. Include the core JavaScript and CSS file as well as only the brush(s) needed. This limits the size of the JavaScript files, which would increase load time. The only downside here is that if multiple languages are needed on a single page, we will have to call each brush file individually. This will increase the number of HTTP requests, but the files’ sizes are all small, so there will be a negligible reduction in load time for the multiple requests.
We then call the script using "SyntaxHighlighter.all()."
<script type="text/javascript" src="scripts/shCore.js"></script> <script type="text/javascript" src="scripts/shBrushJScript.js"></script> <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/> <script type="text/javascript">SyntaxHighlighter.all();</script>
After the core and brush files are called, we simply wrap our code in a <pre /> tag with a class set stating which brush the following code is to use.
<pre class="brush: html;">
<html>
<head>
<title>Example of the Greatest Code Ever</title>
...
</pre>
There are a few variations of Syntax Highlighter as a WordPress plugin. This simplifies installation a lot. Make sure to pay attention to the documentation of the version you install. Some follow the project standard of wrapping your code with the <pre /> tags where others use [sourcecode language=”php”] [/sourcecode].
That is pretty much it. If the target site is using a template, why not just include the files in the header, or, create a separate file and call it only when needed.
<?php
include "header.php";
include "SyntaxHilighter.php"';
....
?>
Here are two other projects that could be worth checking out:
Posted in Web Programming, WordPress | No Comments »
Wednesday, August 4th, 2010
In this tutorial we are going to create sleek calendar using php with a good looking UI and a navigation. Let’s get started !!
First of all create the project folder on your server and inside it create a php file.
(more…)
Posted in PHP, Software, Web Programming | 3 Comments »
Wednesday, July 7th, 2010
You’ve undoubtedly heard of HTML5 multiple times in the past. It was started in June 2004 and is currently in the ‘Working Draft’ state. Ian Hickson (a Google Inc. employee) is the editor of HTML5, and he estimates that HTML5 will become a Candidate Recommendation in 2012, and a W3C Recommendation in 2022. Seems like I’ll be old and gray by the time it’s the norm!
The great thing is that despite the fact that HTML5 will not be a W3C Recommendation until 2022, you can use many of the elements of it today! The website caniuse.com reports that this percentage of features in HTML5 are currently supported:
I’ll be using Safari 5.0 as it currently has the highest percentage and seems to run the best in my current setup. Let’s dive right in, shall we?
Geolocation is already being used all over the web today. Many websites will ask for your current location to display information like weather or local news. Some or all of your information including your IP address, RFID, MAC addresses, GSM/CDMA information will be used to determine your information. It can only be used if the user gives permission.
Try it here.
One of the main reasons why Apple is not supporting Flash on any iOS devices is because they believe so strongly in the HTML5 Video element. It couldn’t get any simpler than this markup:
<video src='movie.mp4' autoplay controls></video>
Provided the feature is fully supported, video plays smoothly, fullscreen works great, and it doesn’t eat up your CPU cycles like some HD flash players can.
Try it here.
Creating simple graphics for the web in Photoshop then saving and inserting them in the correct place in your web page can be a complete time waster, especially if you get it wrong and have to go through the whole process again. That’s where the Canvas element comes in.
Take the simple ‘loading’ image. Instead of searching high and low for the perfect looking image, you can create exactly what you want with a canvas element. Here’s an example: link.
@font-face is really more of a CSS feature, but it ties in directly with HTML5. Inserting custom fonts into web pages is always a pain. My tool of choice is Cufón, for its sole use of JavaScript. There are others that get more complicated like sIFR using Flash all to get a font on a web page. No more! Custom Web Fonts are now as easy as uploading the .ttf or .otf file to your server, linking it into your CSS file and creating a font-family, and displaying your text! Typography lovers unite!
@font-face {
font-family: 'LeagueGothic';
src: url(LeagueGothic.otf);
}
header {
font-family: 'LeagueGothic';
}
Try it here.
All of the demo links included in this post are courtesy of Google, Inc. Check out the rest of html5rocks.com for some great resources!
These four features are just a taste of what HTML5 really can do. I look forward to what the world’s web developers will be making in the years to come!
Posted in Web Programming | 4 Comments »
Monday, May 10th, 2010
I am going to show how to build a simple way to add a “star” rating at the bottom of a post using WordPress’ Custom Fields. The custom fields are a great way of adding extra bits of information such as paragraphs, images or content which you want to be displayed differently.
When adding a new post we want to scroll down to the area called “Custom Fields” and then add a new one. Its good to give this field a useful name as once you have added the custom field you can select it from the drop down box. Next in the value field add what your rating will be. So a value of “3/5″ is what I used.
WordPress has a useful documentation showing how to get started with the custom fields. For this custom field we want to add the following code inside the post loop.
<?php if( get_post_meta(get_the_ID(), 'rating') ){
$rating = get_post_meta(get_the_ID(), 'rating');
$rating = explode("/", $rating[0]);
$good = round($rating[0]);
$total = round($rating[1]);
echo "<h2>This was rated:</h2><p class='rating'>";
if(!empty($good) && !empty($total) && ($good <= $total) && is_numeric($good) && is_numeric($total) ){
$i=0;
while($i < $good){
echo "<img src='http://localhost/wordpress/wp-content/themes/default/images/stars/star_on.png' border='0' />";
$i++;
}
$i = 0;
while($i < ($total - $good)){
echo "<img src='http://localhost/wordpress/wp-content/themes/default/images/stars/star_off.png' border='0' />";
$i++;
}
}else{
echo "Invalid input for the rating.";
}
echo "</p>";
};
?>
To get the meta data we need to use get_post_meta(); which uses 2 (optional 3rd) values. The first is the post ID, next the key/name of the field and the last optional value is either “true” or “false” to say if you want the information returned as a string.
That script will use the post ID to check if there is any information “rating” that has been set. Next, if it has we assign it to a variable and explode it at the “/”, this means we have the two numbers for the light star and the dark star. After splitting up the rating we run a few checks to make sure that it is valid before we loop through them.
Next we run the two loops that will produce the stars by using the split data and a while loop. And then its done!
As you can see, its very easy to add extra bits of data to your post. This is just one example of how to use the custom fields.
Posted in Web Programming | 2 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!