|
Using JQuery to alter CSS properties of page elements using a checkbox form field |
||||||||
I was recently writing a form where I needed to control the visibility of a div element based on a user selection. If a user checked the checkbox, then a div was to appear with related options in it. This article deals with using JQuery to alter CSS properties on the fly.
|
Creating a pop up floating div with JQuery |
||||||||
2
3<a href="javascript:void(0);" id="help">Pop me up</a>
4<div>stuff</div>
2 $(function() {
3 $("#help").live('click', function(event) {
4 $(this).addClass("selected").parent().append('<div class="messagepop pop">Content<p><a class="close" href="/">Cancel</a></p></div>');
5 $(".pop").slideFadeToggle()
6 return false;
7 });
8
9 $(".close").live('click', function() {
10 $(".pop").slideFadeToggle();
11 $("#contact").removeClass("selected");
12 return false;
13 });
14 });
15
16 $.fn.slideFadeToggle = function(easing, callback) {
17 return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
18 };
19</script>
2a.selected {
3 background-color:#1F75CC;
4 color:white;
5 z-index:100;
6}
7
8.messagepop {
9 background-color:#FFFFFF;
10 border:1px solid #999999;
11 cursor:default;
12 display:none;
13 margin-top: 15px;
14 position:absolute;
15 text-align:left;
16 width:394px;
17 z-index:50;
18 padding: 25px 25px 20px;
19 top: 0px;
20 left: 0px;
21}
22}
23
24label {
25 display: block;
26 margin-bottom: 3px;
27 padding-left: 15px;
28 text-indent: -15px;
29}
30
31.messagepop p, .messagepop.div {
32 border-bottom: 1px solid #EFEFEF;
33 margin: 8px 0;
34 padding-bottom: 8px;
35}
36</style>
|
NoScript alternatives for Javascript content using CSS visibilty |
||||||||
2.interactiveMap {visibility: hidden;}
2 // show the map
3 document.getElementById('interactiveMap').style.visibility = "visible";
4</s/cript>
2<p></p>
3
4<!--- get the regions list --->
5<cfset variables.regions = getRegions()>
6
7<ul>
8<cfloop query="variables.regions">
9<li><a href="region.cfm?region=#variables.regions. regionid#">#variables.regionName#</a></li>
10</cfloop>
11
12</ul>
13</noscript>
|
Creating a CSS only cross browser drop down menu |
||||||||
I'll say this up front, I'm not a CSS guru. I like CSS, but it can be incredibly frustrating. One of the clients I am currently producing work for requires a high level of Accessibility. High enough that we need to avoid using JavaScript unless any script has a "Non" JavaScript equivalent.
The site navigation is through a top level horizontal menu, but what if we also want a drop down menu? Can we do it in CSS only, and it still be Firefox, Internet Explorer 6,7 and 8 compatible?
Yes, we can, but it's a lot of code, and it's not pretty. The basic concept behind most CSS menus is to use a list, and transform each list item to suit your styling. So we will create a div, with a class of menu. Then create a list inside it.
2 <ul>
3 <li><a href="">Top menu option
4 <!--[if IE 7]><!--></a><!--<![endif]-->
5 <!--[if lte IE 6]><table><tr><td><![endif]-->
6
7 <ul>
8 <li><a href="">Link 1</a></li>
9 <li><a href="">Link 2</a></li>
10 <li><a href="">Link 3</a></li>
11 <li><a href="">Link 4</a></li>
12 <li><a href="">Link 5</a></li>
13 <li><a href="">Link 6</a></li>
14 </ul>
15
16 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
17 </li>
18
19 </ul>
20
21 </div>
Notice that there are some specific if statements relating to different versions of Internet Explorer. these basically make the functionality the same for each version, they are compensating for the differences in code handling between IE versions.
Next create a set of CSS styles to alter the appearance of the list. I am not going to go into the CSS line by line, as it is commented, but I'll explain the methodology behind it.
The top level menu item is always displayed, but the list is hidden using "visibility:hidden". When the user mouse's over the menu div the CSS applies a:hover ul{visibility:visible;. This makes the list visible.
2
3.menu {width:149px; height:32px; position:relative; z-index:100;border-right:1px solid #000; font-family:arial, sans-serif;}
4
5/* hack to correct IE5.5 faulty box model */
6* html .menu {width:149px; w\idth:149px;}
7
8/* remove all the bullets, borders and padding from the default list styling */
9.menu ul {padding:0;margin:0;list-style-type:none;}
10.menu ul ul {width:149px;}
11
12/* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */
13.menu li {float:left;width:149px;position:relative;}
14
15/* style the links for the top level */
16.menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color:#fff; width:138px; height:30px; border:1px solid #000; border-width:1px 0 1px 1px; background:#c0c0c0; padding-left:10px; line-height:29px; font-weight:bold;}
17
18/* a hack so that IE5.5 faulty box model is corrected */
19* html .menu a, * html .menu a:visited {width:149px; w\idth:138px;}
20
21/* style the second level background */
22.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#c0c0cc url(arrow.gif) no-repeat 130px center;}
23
24/* style the second level hover */
25.menu ul ul a.drop:hover{background:#c0c0cc url(arrow.gif) no-repeat 130px center;}
26.menu ul ul :hover > a.drop {background:#c0c0cc url(arrow.gif) no-repeat 130px center;}
27
28/* hide the sub levels and give them a positon absolute so that they take up no room */
29.menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:149px;border-top:1px solid #000;}
30
31/* another hack for IE5.5 */
32* html .menu ul ul {top:30px;t\op:31px;}
33
34/* style the table so that it takes no part in the layout - required for IE to work */
35.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}
36
37/* style the second level links */
38.menu ul ul a, .menu ul ul a:visited {background: ghostwhite; color:#000; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;}
39
40/* yet another hack for IE5.5 */
41* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}
42
43/* style the top level hover */
44.menu a:hover, .menu ul ul a:hover{color:#000; background:#c0c0cc;}
45.menu :hover > a, .menu ul ul :hover > a {color:#000; background:#c0c0cc;}
46
47/* make the second level visible when hover on first level list OR link */
48.menu ul li:hover ul,
49.menu ul a:hover ul{visibility:visible;}
There are also a lot of other browser specific hacks present, as the aim was to get the menu working in every Internet Explorer version, and be Accessible.
There is a demo of this here: CSS menu demo
