Archive | CSS RSS feed for this section

Using Fancybox for a PopUp

22 Jan

I know, I know, a pop up is evil… and I agree. So let’s come up with a simple unobtrusive way of showing a pop up, but without actually making one. The answer… Fancybox.

If you don’t know fancybox is a jquery highlight box that allows you to display images, ajax, video, html, flash..etc.

Recently I had a client who’s site is a bit dated; wanting to put a flyer on the home page and have it pop up on load. Well, Fancybox is a perfect way to do this without using ancient ideas.

Here’s How:

1. Download the latest version of jquery (1.3.2 @ the time of this writing)

2. Download Fancybox.

3. Add this to the head of your html page:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.2.6.js"></script>

I use easing as well.. this makes the transition a bit smoother and bit cooler!

4. In your HTML, you’ll need to create a div that is set to display none… in that div, you will want to create an a href tag like this:

<div style="display: none;">
     <a class="fancybox" href="mypath/myimage.jpg?phpMyAdmin=a95c4b835d3ft271e87f8"></a>
</div>

5. Now, you’ll need to call the document ready class to make this world go round’. Do that by add this under the last JS call in step 3:

<script type="text/javascript">
     $(document).ready(function() {
          $("a.fancybox").fancybox({
               'overlayOpacity'	:	0.8,
		'overlayColor'		:	'black',
		'overlayShow'		:	true
          })
     });
</script>

You’ll notice, I added a few extra parameters, if you check here, you’ll see more on all the options you have.

6. Ok, last but not least, we need to make this load every time the page loads.. so to do so, we just add the onload function to the body tag. Like this:

<body onload='$("a.fancybox").trigger("click");'>

So that’s it! You now have a cool pop up that’s clean, and smooth, and you’ll never have to worry about it not showing up because a user has “pop-up’s” disabled.

L

Popularity: 58%

New Blog Theme Kills White code

18 Sep

So, I just decided that the blog needed a face lift.  I found a really cool theme, and over the next few days I’m going to customize the artwork, and even hook up my twitter account!

For now, please bare with me.  Some of the previous posts have code with “white” text, making it hard to read.  I promise I will take care of this ASAP.

L

Popularity: 9%

IE PNG Fix — THAT WORKS

15 May

So, I’ve been doing a lot of work in Liferay recently, and had come across a road block that was driving me nuts. My issue was IE6 was not showing .png files like they are meant to be seen. Even the Liferay “core” images were all jacked up. Liferay claims to have a fix and from what I understand it only fixes actual images within the .vm files. In other words you can’t have background images in your CSS and use their png hack. – all that being said — I have yet to see it work, and believe me… I’ve tested.

So, I was searching around for a Liferay IE6 PNG fix, when I thought about a fix I used at a previous job back in the day (when IE6 was new’er). I went to a site I had developed there, luckily I’ll always remember the name of this site. Sure enough the code was still there, Although the design was gone (and i hope they didn’t pay for the new one — and Lilly Jane — if you did, please contact me, I’d love to redesign your site!! <– shameless plug)

So I decided that instead of going through each post on google (and most likely they would all suck) and pulling my hair out (what’s left of it), I figured that I should give the old school code a try.

Here is what I did:

**Note**
Keep in mind this is within liferay’s template files which are .vm files. However, this will work in any .html page (or any other for that matter).

In the “portal_normal.vm” file you’ll want to create a space to add some CSS within your <head> element… like so:

<style type=”text/css”>

/* ———- IE6 PNG image fix ———- */

</style>

It’s always a good idea to comment out what your doing, so 2 years down the line you will still get an understanding when you have to trump through the code.

Next we have to apply the next few lines for each .png image we have.  Like so:

<style type=”text/css”>

/* ———- IE6 PNG image fix ———- */

* html .pTop {
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src=$images_folder/cordys/cordys_wrapperTop.png);
}

</style>

A few things to keep in mind:

  1. “.pTop” is the name of my div class.  So you’ll need to replace this with your own.  It can also be an ID.
  2. “sizingMethod” -  You might have to change this to “scale” instead of “crop” — depending on if your image repeats or not.
  3. “src” - In liferay to access the images folder you have to specify it like so: $images_folder/ — So just remember to fix your path to fit your image needs.
  4. Thats it! Drink a beer.

At last a .png fix that actually works! IE6 sucks, we all know it, so why does this little bastard stick around, I have a theory on that however; I don’t think I will have time to voice that many opinons… so for now — thats my IE .png fix.

Lance

Popularity: 17%

Good CSS across the 3 Big Browsers

13 Jan

firefox

Lately I’ve noticed that IE has decided to still suck!  And really that’s no surprise, but with all the great things firefox does, you would think the folks at Microsoft would step up and release a new codex that would fix all the browser crap-o-la that IE spills out every time you open it.

I get a lot of  questions around applying CSS to different browsers, and I’ve found a way (that I’ve been using for years now), to achieve this in the big 3 browsers.

Note that the big 3 are:

  1. Firefox
  2. IE 6
  3. IE 7

Windows 7 was released yesterday I think, but as suckie as their last release of windows (vista), I think I’ll wait for others to try it out.  Plus, I use a mac 80% of the time anyway, so who cares.    I do hope the IE Browser is good, and it’s install rate is that of the flash player.

So, back to the task at hand.  There are several ways to attack css across multiple browsers, but really only 1 way is considered good practice  (that I know of).  It’s called conditional statements.  These are “if” statements within your html files that attack certain div tags.  There are several ways to use conditional statements, and you can even use a global tag that redirects the browser to a different CSS file for IE 6, and a different file for IE 7.  That’s great, and if you want to do it that way, more power to ya… but this is how I do it…

First, I build my site, CSS, etc..and constantly test in Firefox.  Once the site looks like it should, I open up the awesome IE 6 and see where I’ll need to add conditional statements.  99% of the time, I’ll need to add these where I have padding and margin.   For IE 6, I usually write my statements just under the div tag.  Like this…

<span style="color: #ffffff;">&lt;<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"header"</span>&gt;
<span class="comment">&lt;!--[if IE 6]&gt;&lt;style&gt;#</span><span class="attribute-value">header</span><span class="comment">{margin-left: 85px;}&lt;/style&gt;&lt;![endif]--&gt;</span></span>

Now, to explain, in my CSS file, my margin-left might be set at say 105px. But in IE 6 I need it to be a bit less in order for them to look correct across multiple browsers.

Once I’m done adding my IE 6 statements, I open up IE7, and repeat the process.  Those statements look like this…

<span style="color: #ffffff;">&lt;<span class="start-tag">div</span><span class="attribute-name"> id</span>=<span class="attribute-value">"header"</span>&gt;
<span class="comment">&lt;!--[if IE 7]&gt;&lt;style&gt;#</span><span class="attribute-value">header</span><span class="comment">{margin-left: 85px;}&lt;/style&gt;&lt;![endif]--&gt;</span></span>

I hope this helps you out, Be sure to google conditional statements, and you’ll no doubt find some really good info on different ways to apply this to your site building.

L

Popularity: 2%