Wordpress and Webdesign Forum go41 » WordPress Code Snippets

  1. you work on a site using jdGallery (myGallery) or any Dynamic Content Gallery your drop down menu might not display. I looks like it's behind the gallery.
    The dropdown menu is working, however it goes behind your featured content gallery!

    Using the suckerfish menu or one of which is working this way you have to add z-index and position properties to the styles.css

    You should try to add
    position:relative;
    and
    z-index:10;
    to the 'li li' entry of your menu bar.

    like this:
    #pagemenu li li {
    position: relative;
    z-index: 10;
    }

    In arthemia this could look like:

    #page-bar li li {
    float:left;
    margin:0;
    padding:0;
    text-transform:none;
    width:122px;
    position:relative;
    z-index:10;
    }

    the menu bar is called page bar here..

    try it and be happy to see full drop down menues

    Posted 2 years ago #
  2. Annie
    Member

    Hi Joern!

    I have this problem. The first 5 lines work, after that it goes "behind".
    I have tryed to do what you recomend here, but it dosn´t help.
    You see my drop-down menu on style.css here, what should I do?

    Best regards Annie

    /* Dropdown Menus */
    #page-bar li {
    z-index: 9999;
    float: left;
    margin: 0px;
    padding: 0px;
    }

    #page-bar li li {
    z-index: 9999;
    float: left;
    margin: 0px;
    padding: 0px;
    width: 132px;
    text-transform:none;
    }

    #page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
    z-index: 9999;
    width: 122px;
    float: none;
    margin: 0px;
    padding: 4px 10px 4px 10px;
    background: #5b5b5b url(images/dots_nav.gif) repeat-x top;
    }

    #page-bar li li a:hover, #page-bar li li a:active {
    z-index: 9999;
    background: #909090;
    padding: 4px 10px 4px 10px;
    }

    #page-bar li ul {
    z-index: 9999;
    position: absolute;
    width: 10em;
    left: -999em;
    }

    #page-bar li ul ul {
    margin:-22px 0 0 154px;
    }

    #page-bar li:hover ul {
    z-index: 9999;
    left: auto;
    display: block;
    }

    #page-bar li:hover ul, #page-bar li.sfhover ul {
    z-index: 9999;
    left: auto;
    }

    Posted 4 months ago #
  3. Annie, I can't see your site, get redirected to login..

    Anyway, I had a look at colorlabs arthemia-premium demo. There they have these #page-bar .. entries in style.css, but the menu on top is not in a div page-bar so the site doesn't make use of these styles.

    On the demo site the menu bar is in a div id="madmenu" and the formatting is taken from a stylesheet in css folder (arthemia-premium/css/madmenu.css)

    If your site has this kind of menu bar, you might have to make changes in madmenu.css

    Additionally it depends on the z-index of the part below which shows always on top..

    In case it is an embedded flash (Video/Animation) covering your drop down, you should change the video embedding code to use param name="wmode" value="opaque"

    Beeing able to see your site would help a lot...

    Posted 4 months ago #
  4. Annie
    Member

    sorry, now you see it here: http://www.familjan.fo

    Posted 4 months ago #
  5. very difficult, it's late now, maybe it helps to change in madmenu.css this entry:

    #madmenu li ul ul {
    margin: -26px 0 0 154px;
    }

    to

    #madmenu li ul ul {
    margin: -26px 0 0 154px;
    width: 154px;
    }

    somehow the sooperfish.js writes after loading a width for this which it shouldn't do

    just try it

    ADDED 25.09.11

    you could also try to edit the file wp-content/themes/arthemia-premium/includes/js/jquery.sooperfish.js
    in here you find some settings like:

    sf.defaults = {
    multiColumn : true,
    dualColumn : 6, //if a submenu has at least this many items it will be divided in 2 columns
    tripleColumn : 12, //if a submenu has at least this many items it will be divided in 3 columns
    .....

    add sooperfishWidth : 180, in this list to look like:

    sf.defaults = {
    multiColumn : true,
    dualColumn : 6, //if a submenu has at least this many items it will be divided in 2 columns
    tripleColumn : 12, //if a submenu has at least this many items it will be divided in 3 columns
    hoverClass : 'sfHover',
    delay : 500, //make sure menus only disappear when intended, 500ms is advised by Jacob Nielsen
    animationShow : {height:'show'},
    speedShow : 600,
    easingShow : sooperEasingShow,
    animationHide : {height:'hide',opacity:'hide'},
    speedHide : 200,
    sooperfishWidth : 154, // THIS IS NEW
    easingHide : sooperEasingHide,
    autoArrows : true, //Adds span elements to parent li elements, projecting arrow images on these items to indicate submenus. I added an alternative image file with white arrows.
    onShow : function(){}, //callback after showing menu
    onHide : function(){} //callback after hiding menu
    };

    Posted 4 months ago #
  6. Annie
    Member

    Hi Joern!
    Neither worked :(
    Thanks anyway!
    :)
    Annie

    Posted 4 months ago #
  7. I hope you refreshed the browser nore than once only, the browser might cache css or .js files and values.

    two more things you might try

    1. in jquery.sooperfish.js

    change:
    dualColumn : 6, //if a submenu has at least this many items it will be divided in 2 columns
    tripleColumn : 12, //if a submenu has at least this many items it will be divided in 3 columns
    ...

    to higher values like

    dualColumn : 12,
    tripleColumn : 18,
    ...

    2. in madmenu.css

    add to

    #madmenu li li li a {
    padding:5px 14px;
    background: #909090;
    }

    the width like this

    #madmenu li li li a {
    padding:5px 14px;
    background: #909090;
    width: 154px;
    }

    or change the number/order of pages and subpages in that menu

    Posted 4 months ago #
  8. Hi Joern,

    Having similar issues.

    My site: http://nu-phoria.com/

    Im currently using Twenty Eleven theme and have got the WP Featured Content Slider below the navigation menu. If you look at the category "DJ Sets", the last sub-category is going behind the Slider. I tried to edit the z-index as you mentioned above but doesn't seem to do anything.

    Here is the menu coding which i edited from style.css
    [/code]

    #access ul {
    font-size: 13px;
    list-style: none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;
    }
    #access li {
    float: left;
    position: relative;
    z-index: +30[u];
    }
    #access a {
    color: #eee;
    display: block;
    line-height: 3.333em;
    padding: 0 1.2125em;
    text-decoration: none;
    }
    #access ul ul {
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    top: 3.333em;
    left: 0;
    width: 188px;
    z-index: 99999;
    }
    #access ul ul ul {
    left: 100%;
    top: 0;
    }
    #access ul ul a {
    background: #f9f9f9;
    border-bottom: 1px dotted #ddd;
    color: #444;
    font-size: 13px;
    font-weight: normal;
    height: auto;
    line-height: 1.4em;
    padding: 10px 10px;
    width: 168px;
    }
    #access li:hover > a,
    #access ul ul :hover > a,
    #access a:focus {
    background: #efefef;
    }
    #access li:hover > a,
    #access a:focus {
    background: #f9f9f9; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
    background: -o-linear-gradient(#f9f9f9, #e5e5e5);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
    background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
    color: #373737;
    }
    #access ul li:hover > ul {
    display: block;
    }
    #access .current_page_item > a,
    #access .current_page_ancestor > a {
    font-weight: bold;
    }

    Posted 4 months ago #
  9. Hi, it looks like you moved the slider up above the menu bar.

    that's a solution, but now the slider covers your header (title and description) , which is still loading but not to see.

    you should not put that code into head --- /head (source code looks like you did this?)

    any code you want to display should go at least in the body tag below the line

    <body <?php body_class(); ?>>

    better even below

    <div id="page" class="hfeed">

    to be inside the 'page'

    I would put that slider (in header.php) above the line

    <nav id="access" role="navigation">

    to be above the navigation menu and below the site title.

    The stuff above the slider will be visible again so you could remove it or display it in one line with smaller font, done by style.css

    Posted 4 months ago #
  10. Hi,

    Thanks for having a look at the site. I have used the third option n posted it below the site title. However i still have one problem (a little off topic): when the site is loading, the content of the slider are shown one below the other, which is overlapping the whole blog. Once its loaded its all normal. Is there any fix for this?

    Here is the code for the slider:

    <?php
    /*
    Plugin Name: WP Featured Content Slider
    Plugin URI: http://www.iwebix.de/featured-content-slider-wordpress-plugin/
    Description: This Plugin is used to show your featured Posts/Pages with thumbnails in a nice slider.
    Version: 2.1
    Author: Dennis Nissle, IWEBIX
    Author URI: http://www.iwebix.de/
    */

    /* options page */

    $options_page = get_option('siteurl') . '/wp-admin/admin.php?page=wp-featured-content-slider/options.php';

    function slider_options_page() {
    add_options_page('Featured Content Slider Options', 'Featured Content Slider', 10, 'wp-featured-content-slider/options.php');
    }

    add_action('admin_menu', 'slider_options_page');

    function add_feat_scripts() {
    if ( !is_admin() ) {
    wp_register_script('jquery.cycle', get_bloginfo('url') . '/wp-content/plugins/wp-featured-content-slider/scripts/jquery.cycle.all.2.72.js', array('jquery'), '1.3' );
    wp_enqueue_script('jquery.cycle');
    }
    }

    add_action('wp_enqueue_scripts', 'add_feat_scripts');

    function cut_text_feat($text, $chars, $points = "...") {
    $length = strlen($text);
    if($length <= $chars) {
    return $text;
    } else {
    return substr($text, 0, $chars)." ".$points;
    }
    }

    add_action("admin_init", "feat_init");
    add_action('save_post', 'save_feat');

    function feat_init(){
    add_meta_box("feat_slider", "Featured Content Slider Options", "feat_meta", "post", "normal", "high");
    add_meta_box("feat_slider", "Featured Content Slider Options", "feat_meta", "page", "normal", "high");
    }

    function feat_meta(){
    global $post;
    $custom = get_post_custom($post->ID);
    $feat_slider = $custom["feat_slider"][0];
    ?>
    <div class="inside">
    <table class="form-table">
    <tr>
    <th><label for="feat_slider">Feature in Featured Content Slider?</label></th>
    <td><input type="checkbox" name="feat_slider" value="1" <?php if($feat_slider == 1) { echo "checked='checked'";} ?></td>
    </tr>
    </table>
    </div>
    <?php
    }

    function save_feat(){
    if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
    return $post_id;
    global $post;
    if($post->post_type == "post" || $post->post_type == "page") {
    update_post_meta($post->ID, "feat_slider", $_POST["feat_slider"]);
    }
    }

    function insert_feat($atts, $content = null) {
    include (ABSPATH . '/wp-content/plugins/wp-featured-content-slider/content-slider.php');
    }
    add_shortcode("featslider", "insert_feat");

    $img_width = get_option('img_width');

    if(empty($img_width)) {
    $img_width = 320;
    }

    $img_height = get_option('img_height');

    if(empty($img_height)) {
    $img_height = 200;
    }

    if (function_exists('add_image_size')) {
    add_image_size( 'feat_slider', $img_width, $img_height, true );
    }

    function get_wp_generated_thumb($position) {
    $thumb = get_the_post_thumbnail($post_id, $position);
    $thumb = explode("\"", $thumb);
    return $thumb[5];
    }

    //Check for Post Thumbnail Support

    add_theme_support( 'post-thumbnails' );

    ?>

    Posted 4 months ago #
  11. I realized that. Looking on the source-code of your site I see that the css for #featured_slider is loading very late. Actually jquery expects to get the styles before it can modify it.
    So by using jQuery to modify CSS, you should load your CSS styles before you load jQuery.
    Maybe with this plugin you can't do that, but you could try to hide stuff flowing out of the div id="featured_slider"
    Somehow you have to change the style the plugin loads, you see that in your source code of your page:

    <style>
    
    #featured_slider {
    position: relative;
    margin: 20px;
    margin-left:auto;
    margin-right:auto;
    .....

    there is an entry:

    #featured_slider ul, #featured_slider ul li {
    list-style: none !important;
    border: none !important;
    float: left;
    margin: 10px;
    width: 1000px;
    height: 210px;
    }

    where the height is set to 210px
    add here overflow:hidden; to hide stuff showing outside like this

    #featured_slider ul, #featured_slider ul li {
    list-style: none !important;
    border: none !important;
    float: left;
    margin: 10px;
    width: 1000px;
    height: 210px;
    overflow:hidden;
    }

    There are more ways to hide this sliding images, you need to google for:
    jquery flash of unstyle content
    hide slider no flash
    function load() .css("visibility","visible")

    refresh the browser more than once after changes to check

    Posted 4 months ago #
  12. Hi Joern,

    Thanks for your prompt reply. I used the overflow:hidden command and it works like a peach. Thanks alot! I'm new to these sort of coding, so your help is really appreciated.

    Are you able to assist with Facebook plugins? If you can , i'll create a new thread in the forum as i'm having difficulties with the Facebook like and comments plugins.

    Posted 4 months ago #
  13. I got no idea about facebook plugins ..

    did you get how dead-slow your site is loading? One reason is this likebox plugin.
    (Caching will not help with scripts loading lot's of stuff externally)
    With a plugin like this you transfer your traffic to facebook - but because search engines do not read the content of a script it will not rise traffic coming to you.

    Just a 'Like' button and a link to your profile is enough - I think.

    Same applies to most 'Rating' plugins, much better would be comments with (text)content readable by search engines.

    Just my opinion - one of many different opinions I guess ..

    Posted 4 months ago #

RSS feed for this topic

Reply

You must log in to post.

Join us! or log in (lost password?):