Top navigation Horizontal Menu appears below the content when using Nice Menus with Zen layout - Drupal
March 13, 2009 by MK
Filed under CSS, Software Development, web development
While working with a client hosting a VOIP based solutions web site on Drupal. The top navigation menu was hiding underneath the content DIV. We were using the Nice Menus along with the Zen layout.
BUG - The top navigation menu was moving underneath the content DIV.
And this was happening only for IE7 and IE6, Firefox was working fine. So I used bit of a CSS hack for IE browsers and made following changes to colmask class in layout.css. This made the menus show up fine.
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
*z-index:-1; /* Adding this is the key */
}
Also on another note Nice Menus will not render the hover effect in IE6. IE6 only works with hover for anchor tags and since Nice Menus is using lists, hover on lists will not work in IE6.
To fix this issue you can use csshover.htc, you just need to add this to behavior of the body like following in the CSS file and you will be good to go.
body { behavior:url("csshover.htc"); }
Remember - csshover.htc needs to be copied to the document root of your web application AND not to relative root of CSS.
What is .htc extension?
Its a Jscript file (csshover.htc) and is added to the page via a Microsoft proprietary "behavior" rule in the CSS file. Another way of adding this to the page is
<head>
…title element, meta tags, etc…
<style type="text/css">
/* some ordinary CSS rules… */
</style>
<!– The line below starts the conditional comment –>
<!–[if IE]>
<style type="text/css">
body {behavior: url(csshover.htc);}
</style>
<![endif]–> <!– This ends the conditional comment –>
</head>
We don’t want our CSS to fail validation, so a conditional comment is created to contain a separate style sheet to hold our behavior rule.
csshover.htc file can be downloaded from here - http://www.xs4all.nl/~peterned/csshover.html
Right Flyout for Nice menus (Drupal) not showing for IE6
February 9, 2009 by MK
Filed under CSS, Javascript, web development
There seems to be a bug with Zen 3 column layout for Drupal and using it with Nice Menus created by jakeg.
I am using a Zen 3 column layout for one of my clients. While the layout was working okay, I was experiencing problem with Nice Menu not appearing on hovering over parent nodes in IE6. Nice Menus were working as expected both for IE7 and FF though.
Nice Menus does provide a JavaScript file to make the menus work with IE6. Though the JavaScript file was working okay, I was still not able to get the hover menu.
After wrestling with CSS that came along with Nice Menus and by stripping the page off with all the unnecessary DOM, I concluded that there is nothing wrong with Nice manus but the page layout itself might have a CSS bug.
That is after I started debugging layout.css that I found the real culprit. I am pasting the solution here just in case any of our developer friends is having the same problem.
In layout.css file comment position:relative; attribute as follows -
#sidebar-left
{
float:left;
float:right;
width:170px;
/*position:relative;*/
right:15px;
padding: 0;
}
And that will do the trick. Please leave comments about other issues with Drupal and what you did to get rid of them, or email me if you need any help and I will try my best. Happy Coding.
Show / Display icons and text by default on page load for - I Love Social Bookmarking plugin (Wordpress Social Bookmarking)
August 24, 2008 by MK
Filed under CSS, Javascript, Wordpress
Most of the Social Bookmarking plugins show only icons and/or text and you need to click on that icon and/or text to display the complete options. e.g. here is a screenshot of ShareThis, this plugins shows only text that you need to click (on ShareThis) to see the bookmarking sites list.
And then some just show icons e.g.
I completely understand this was done to save some real estate on the page as there are a lot of social bookmarking sites and the number is increasing edveryday. But I personally just wanted to list a selected few on my website and I wanted them to be visible to the user with both icons and text and I want the user to undersatnd that if they are clicking on the icon / text, that means they are adding the article to there favorites on those sites.
My problem was that there are not a lot of social bookmarking plugins available which show up by default on page load without any kind of user action and show both text and ions, some plugins available show like ShareThis (user needs to click) and some show just icons (novice/new users will not understand icons).
I liked - I Love Social Bookmarking plugin because it shows both icons / text and when you hover over each list item individually, this plugins ask the user to Add to Digg or Add to Technorati etc. This is necessary as most of novice users will not be able to understand the purpose of just icons saying nothing.
But there was one problem with this plugin - By default this plugin shows only TEXT asking for users to add bookmarks that you can change in plugins settings, you need to hover over the text to see the full list.
e.g. in this screenshot you need to hover over Share the Love to see the list. You can change the text [Share the Love] in plugins settings.
I dont want my users to hover over text to see the list and I wanted that list to be present by default. Now this is what this post is about, how to show the social bookmarking list by default on page load?
I Love Social Bookmarking plugin can be downloaded from - http://www.milienzo.com/downloads/ilsb.zip
This plugin was developed by Aaron Russell but is licensed under OpenGPL and henceforth I have suggested following changes to show the list as default. I am using the same plugin on my website with the following code changes that I implemented.
Now following can only be implemented if you have FTP or file level access to your wordpress hosting. After you download the plugin you need to extract or copy the unzipped files to wp-content/plugins folder of your wordpress installation. Following files will be included when you download it.
includes folder
ilsb.php
Inside the includes folder there will be a javascript file called ilsb.js. Please change the content of this file to following, you can delete the existing content and paste the following js code -
———————From here———————————–
// JavaScript Document
jQuery(document).ready(function()
{
/* jQuery(”.ilsb-parent”).hover(
function()
{
jQuery(”.ilsb-child”).show();
},
function()
{
jQuery(”.ilsb-child”).hide();
}
); */
jQuery(”.ilsb-parent > a”).click(function()
{
return false;
});
});
———————-Till here————————————
and then in the same folder there is a CSS stylesheet named - style.css
In that file change the style from
div.ilsb-child {position:absolute; display:none; margin:0px; padding:0px 0px 6px 0px;}
TO
div.ilsb-child {position:relative; display:block; margin:0px; padding:0px 0px 6px 0px;}
and then go to your plugin settings and leave the List Title field blank. Make sure you select the List style as Horizontal.
And that is it you are good to go with both text and icons available for social bookmarking of your wordpress articles.
Building a Javascript Ad Rotator / Slideshow (with 123 buttons, play, pause and stop options)
August 22, 2008 by MK
Filed under CSS, Javascript
This script work in all major browsers - IE6, IE7, Firefox 3.0. You can even rotate images and flash objects as everything within DIV’s will be rotating.
Example of Banner Rotation using this script -
These are real banners rotating using this script. You can click on 1 2 3 buttons to see a particular banner or play / pause the rotation. Banners sequence will change randomly everytime you refresh the page
The idea is to pick up all the DIV’s within the main DIV container and rotate them randomly.
Here is an example of the Ad Rotator / Slideshow with some CSS thrown in and play/pause, 123 buttons. Please feel free to use the CSS and code. Leaving the reference back to my site (http://www.coolwebdeveloper.com) in the comments will be much appreciated though.
We will be using a set of open source scripts in addition to my own code to build this javascript adrotator/slideshow.
Please scroll to the bottom of the article to download the zipped files package that we are going to use for this project.
You will find a number of methods inside slideshow.js to control the slideshow. At the top level is a javascript class used to initiate the slideshow object from the HTML file.
Some of the options that can be set are - duration - sets the total duration of transitioning per image Following functions are used to control the behavior of the slide show - forward()
seconds_per_slide - sets the time per image/div is shown
pause_on_mouseover - whether the rotation will be paused when mouse over happens
onChange: function() {} - You can define here, any javascript code that you want to run when the image changes
backward()
jumpToSlide()
start()
pausePlay()
stop()
rndm()
transition()
Class can be initiated by using following code - You can pass any available number of property values when defining the rotation class
var slideshow = new MDSK.Slideshow(”slideMainDiv”, “.slideDiv”, {
seconds_per_slide: 5.0
});
The random() function is used to change the rotation pattern every tine the page is refreshed, as a result the images contained within the object are displayed randomly.
/**********************************/
rndm : function(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
},
/**********************************/
and then we will call this function every time the class object is instantiated
/**********************************/
this.slides.sort(function(a,b){
return me.rndm(-1,1);
});
/**********************************/
Please fill in the following information to receive the Javascript Adrotator code with fully working example via email and to subscribe to FREE Newsletter and email feed.
Your email address will also be used to provide any important updates and new versions for Adrotator script in near future.
All the scripts are pretty self explanatory but if you have any questions please dont hesitate to contact me by leaving a message in the comments section.
There is a lot of room for improvement in this code and lot of inline CSS can be moved to CSS file. Also, I am working on a wordpress adrotator plugin (enhancing this code) and will be releasing soon. So keep checking this site.
Space between DIV elements in IE6 and IE7
This particular bug has troubled me for some time today. I was putting a curved border around one of the Javascript slideshows and was using three div’s with float:left attribute.
Both IE6 and IE7 were inserting a blank space of about 5px right inside the parent DIV at the bottom and that was resulting in blank space between the borders.
After some troubleshooting I found out that IE was inserting a space for the font size regardless of the height mentioned in CSS.
So the fix is to define a font-family and font-size attribute lesser then the total height of DIV.
e.g.
#left
{
background-image:url(”imageURL”);
background-repeat:no-repeat;
width:3px;
float:left;
margin:0px;
padding:0px;
height:3px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:2px;
}
