FaraJoomla Web Design and Development » CSS http://www.farajoomla.com FaraJoomla Web Design and Development Sat, 29 Oct 2011 17:49:38 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Cross-browser transparency http://www.farajoomla.com/2010/06/cross-browser-transparency-via-css/ http://www.farajoomla.com/2010/06/cross-browser-transparency-via-css/#comments Mon, 14 Jun 2010 17:42:02 +0000 Faramarz http://www.farajoomla.com/?p=365 How to do it? You can make any element transparent by using “opacity” property and a value the only thing is, this declration is treated totally differently in all browsers. With four separate declrations, you can cover all browsers and fortunately they don’t interfere with each other. In this example I’ve used 70% transparency:

.transparent_element {
	-moz-opacity: 0.7;
	opacity: 0.7;
	-khtml-opacity: 0.7;
	filter:alpha(opacity=70);
}

Here is what each of these properties is for:

-moz-opacity: 0.7;
This one is used to support old versions of the Mozilla browsers like Netscape.

opacity: 0.7;
This is the current standard in CSS. It works for all browsers supportting current standards such as most versions of Firefox, Safari, and Opera.

-khtml-opacity: 0.7;
This is for very old versions of Safari (1.x).

filter:alpha(opacity=70);
And you need this one for our dear stupid IE.

]]> http://www.farajoomla.com/2010/06/cross-browser-transparency-via-css/feed/ 1 Accordion with jQuery and CSS http://www.farajoomla.com/2010/05/accordion-with-jquery-and-css/ http://www.farajoomla.com/2010/05/accordion-with-jquery-and-css/#comments Mon, 24 May 2010 15:30:47 +0000 Faramarz http://www.farajoomla.com/?p=359 The jQuery accordion plugin works with nested lists or just nested divs. There are also some options available to specify the structure, the active element (to display at first) and to customize animation.

This plugin will come in handy when you are dealing with orgonizing a good chuck of content.

HTML Markup

In this markup I’m using nested divs, an <h3> is the heading of accordion items and a nested <div class="container_accordion"> to show the content of each item.

<h3 class="click_accordion"><a href="#">Web Design</a></h3>
<div class="container_accordion">
  <div class="content_accordion">
    <h2>Custom Website Designs</h2>
    <p>If your looking for a fresh eye-catching custom website design then we can develop a professional high quality website for you which is designed to your exact specifications.</p>
    <p>Great websites do not need to cost an arm and a leg. Our process is that of getting to know your business and proposing the best fit for you in terms of features and budget, while never compromising on quality. We simply enjoy creating beautiful websites. Find out more about our services.</p>
    <p>Do you require a world class corporate site, a friendly welcoming community site, or even something just plain funky? Whatever your design requirements, our design and development team caters for all audiences and markets. We have a wide range of designers at our disposal all from a variety of different design backgrounds, offering you a unique and beautifully designed website. </p>
    </div>
</div>

CSS

h3.click_accordion {
	padding: 0;
	margin: 0 0 5px 0;
	background: url(../images/h2-bg.png) no-repeat;
	height: 46px;	line-height: 46px;
	width: 500px;
	font-size: 2em;
	font-weight: bold;
	float: left;
}

h3.click_accordion a {
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 0 0 0 35px;
}

h3.click_accordion a:hover {
	background: url(../images/h2-bg.png) no-repeat;
	background-position: 0 -46px;
}

h3.active {
	background-position: 0 -92px;
}

.container_accordion {
	margin: 0 0 5px;
	padding: 0;
	overflow: hidden;
	font-size: 1.2em;
	width: 498px;
	clear: both;
	background: #f0f0f0;
	border: 1px solid #d6d6d6;
	-webkit-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-moz-border-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}
.container_accordion .content_accordion {
	padding: 20px;
}

Setting up jQuery

You can download jQuery from the jQuery site, or you can use the hosted one on Google.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Directly after you called your jQuery, start a new <script> tag and start your code by using the $(document).ready event.

<script type="text/javascript">
$(document).ready(function(){

//open/close settings -- set default
$('.container_accordion').hide(); //Hiding and closing the containers
$('.click_accordion:first').addClass('active').next().show(); //Add "active" class to first item, then show/open next container

//On/Click
$('.click_accordion').click(function(){
	if( $(this).next().is(':hidden') ) {
		$('.click_accordion').removeClass('active').next().slideUp();
		$(this).toggleClass('active').next().slideDown();
	}
	return false;
});

});
</script>

View Demo

]]> http://www.farajoomla.com/2010/05/accordion-with-jquery-and-css/feed/ 0 Dropdown with jQuery and CSS http://www.farajoomla.com/2010/05/dropdown-mwith-jquery-and-css/ http://www.farajoomla.com/2010/05/dropdown-mwith-jquery-and-css/#comments Sun, 16 May 2010 21:42:37 +0000 Faramarz http://www.farajoomla.com/?p=352 Here is a solution for a very simple drop down menu system. All you need is jQuery and these below few lines of JavaScript and CSS.

The features of this menu system are:

  • Unordered list as menu structure
  • Absence of mouse events within html
  • Timeout effect
  • Cross-browser compatible (even IE 6)
  • Multi-level and retains “trail”
  • Easy to adopt styling
  • Minimal JavaScript

How to do it

First thing you do is to include jQuery library (before </head>)

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>

I am using the jQuery library hosted on google codes, but you can download your own copy of jQuery and link it to your page.

Next step is to include the simple drop-down menu plugin. You can either include the code before </head>, or save the code as an external JavaScript fine and include a link to it in your web page.

<script type="text/javascript">
$(function(){

    $("ul.dropdown li").hover(function(){

        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');

    }, function(){

        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');

    });

    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &amp;amp;amp;raquo; ");

});
</script>

Note: if you are using as an external file, then you don’t need to enclose the code in <script type="text/javascript"> and </script>.

Here is the HTML markup:

<div id="page-wrap">
        <ul class="dropdown">
        	<li><a href="#">Business News</a>
        		<ul class="sub_menu">
        			 <li><a href="#">Companies</a></li>
        			 <li>
        				<a href="#">Economy</a>
        				<ul>
        					<li><a href="#">International</a></li>
        					<li><a href="#">The Buzz</a></li>
                            <li><a href="#">International</a></li>
        					<li><a href="#">The Buzz</a></li>
                            <li><a href="#">International</a></li>
        					<li><a href="#">The Buzz</a></li>
        				</ul>
        			 </li>
        			 <li><a href="#">Street Sweep</a></li>
        			 <li><a href="#">Corrections</a></li>
                     <li><a href="#">Street Sweep</a></li>
        			 <li><a href="#">Corrections</a></li>
					 <li>
        				<a href="#">Economy</a>
        				<ul>
        					<li><a href="#">International</a></li>
        					<li><a href="#">The Buzz</a></li>
                            <li><a href="#">International</a></li>
        					<li><a href="#">The Buzz</a></li>
                            <li><a href="#">International</a></li>
        					<li><a href="#">The Buzz</a></li>
        				</ul>
        			 </li>
        		</ul>
        	</li>
        	<li><a href="#">Markets</a>
        		<ul class="sub_menu">
        			<li><a href="#">Pre-Market Training</a></li>
        			<li><a href="#">After Hours Training</a></li>
        			<li><a href="#">US Stocks</a></li>
        			 <li>
        				<a href="#">Currencies</a>
        				<ul>
        					<li><a href="#">Euro</a></li>
        					<li><a href="#">US Dollar</a></li>
        					<li><a href="#">British Pound</a></li>
        				</ul>
        			 </li>
        			 <li><a href="#">Pre-Market Training</a></li>
        			<li><a href="#">After Hours Training</a></li>
        			<li><a href="#">US Stocks</a></li>
        			 <li>
        				<a href="#">Currencies</a>
        				<ul>
        					<li><a href="#">Euro</a></li>
        					<li><a href="#">US Dollar</a></li>
        					<li><a href="#">British Pound</a></li>
        				</ul>
        			 </li>
        		</ul>
        	</li>
        	<li><a href="#">Personal Finance</a>
        		<ul class="sub_menu">
        			 <li>
        				<a href="#">Money Magazine</a></li>
        			 <li>
        				<a href="#">Real Estate</a>
        				<ul>
        					<li><a href="#">Jobs</a></li>
        					<li><a href="#">Taxes</a></li>
        					<li><a href="#">Autos</a></li>
        					<li><a href="#">Jobs</a></li>
        					<li><a href="#">Taxes</a></li>
        					<li><a href="#">Autos</a></li>
        				</ul>
        			 </li>
        			 <li>
        				<a href="#">Loan Center</a></li>
        			 <li>
        				<a href="#">Best Places to Live</a>
        				<ul>
        					<li><a href="#">Paris</a></li>
        					<li><a href="#">Sweeden</a></li>
        					<li><a href="#">Ireland</a></li>
        				</ul>
        			 </li>
					 <li>
        				<a href="#">Money Magazine</a></li>
        			 <li>
        				<a href="#">Real Estate</a>
        				<ul>
        					<li><a href="#">Jobs</a></li>
        					<li><a href="#">Taxes</a></li>
        					<li><a href="#">Autos</a></li>
        					<li><a href="#">Jobs</a></li>
        					<li><a href="#">Taxes</a></li>
        					<li><a href="#">Autos</a></li>
        				</ul>
        			 </li>
        			 <li>
        				<a href="#">Loan Center</a></li>
        			 <li>
        				<a href="#">Best Places to Live</a>
        				<ul>
        					<li><a href="#">Paris</a></li>
        					<li><a href="#">Sweeden</a></li>
        					<li><a href="#">Ireland</a></li>
        				</ul>
        			 </li>

        		</ul>
        	</li>
        	<li><a href="#">Technology</a>
        		<ul class="sub_menu">
        			 <li><a href="#">Apple</a></li>
        			 <li><a href="#">Google</a>
						 <ul>
						 	<li><a href="#">Gchat</a></li>
							<li><a href="#">Ad Server</a></li>
							<li><a href="#">Analytics</a></li>
						 </ul>
					 </li>
        			 <li><a href="#">Techmate</a></li>
        			 <li><a href="#">TechTalk</a></li>
        		</ul>
        	</li>
        	<li><a href="#">Preferences</a>
        		<ul class="sub_menu">
        			 <li><a href="#">Login</a></li>
        			 <li><a href="#">Register</a></li>
        			 <li><a href="#">Account</a></li>
        		</ul>
        	</li>
        </ul>
</div>

And here is the CSS:

* 									{ margin: 0; padding: 0; }
#page-wrap							{ width: 100%; margin: 25px auto; }
a									{ text-decoration: none; }
ul									{ list-style: none; }
p                                   { margin: 15px 0; }
ul.dropdown                         { position: relative; }
ul.dropdown li                      { font-weight: bold; float: left; zoom: 1; background: #ccc; }
ul.dropdown a:hover		            { color: #000; }
ul.dropdown a:active                { color: #ffa500; }
ul.dropdown li a                    { display: block; padding: 4px 8px; border-right: 1px solid #333;
	 								  color: #222; }
ul.dropdown li:last-child a         { border-right: none; }
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #F4B737; color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }
ul.dropdown ul 						{ width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li 					{ font-weight: normal; background: #f6f6f6; color: #000;
									  border-bottom: 1px solid #ccc; float: none; }
ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; }
ul.dropdown ul ul 					{ left: 100%; top: 0; }
ul.dropdown li:hover > ul 			{ visibility: visible; }

That’s it.

View Demo

]]> http://www.farajoomla.com/2010/05/dropdown-mwith-jquery-and-css/feed/ 0 Conditional Stylesheets for IE http://www.farajoomla.com/2010/05/conditional-stylesheets-for-ie/ http://www.farajoomla.com/2010/05/conditional-stylesheets-for-ie/#comments Fri, 14 May 2010 02:32:52 +0000 Faramarz http://www.farajoomla.com/?p=329 We all have dealt with IE issues and bugs but you don’t have to keep banging your head against the wall when you can fight with IE problems with conditional stylesheet. This way you can code hack-free and you don’t have to worry about how dangerous hacks will behave in future, you also get to keep your main stylesheet clean and valid.

You can also use conditional tags for loading JavaScript and HTML or any other content or message in IE.

Conditional tags structure is the same as an HTML comment (<!– –>) and all other browsers will see them as normal comments and will ignore them entirely but explorer Windows, has been programmed to recognize the special <!–[if IE]> syntax, resolves the if and parses the content of the conditional comment as if it were normal page content, bingo!

Note: since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files. You’d have preferred to put the special styles in the CSS file, but that’s impossible. You can also put an entire new <link> tag in the conditional comment referring to an extra style sheet.

How it works?

The code should go in the <head> section with all the other regular CSS <link> CSS files. Below are examples of different codes for different IE versions.

Everytthing except IE

<!--[if !IE]><!-->
	<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->

Only IE 7

<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Only IE 6

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Only IE 5

<!--[if IE 5]>
	<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

Only IE 5.5

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

Only IE 6 and lower

<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

IE 7 and lower

<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

<!--[if lte IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

IE 8 and lower

<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

<!--[if lte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

IE and higher

<!--[if gt IE 5.5]>
	<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

<!--[if gte IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

IE 7 and higher

<!--[if gt IE 6]>
	<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

<!--[if gte IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

IE 8 and higher

<!--[if gt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

<!--[if gte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

ALL versions of IE

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
]]> http://www.farajoomla.com/2010/05/conditional-stylesheets-for-ie/feed/ 1