Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sidebar plus Dock help please

    Please I really need help with doing these two little things, for those who know how to do this please help me out I really need help to do it please.

    Hi I am using this theme here for my site : http://www.ndesign-studio.com/demo/wordpress/

    Now I need help editing two things:

    1- As you can see at the bottom of the theme it has a dock, I need to know how to put this in(and when you scroll over it it gets bigger), see the attached pic of what I mean.



    Here is the footer code if someone could add to it to help me please:
    ------------------------------------------------
    <hr class="hidden" />

    </div><!--/wrapper -->




    </div><!--/page -->

    <?php wp_footer(); ?>
    </body>
    </html>


    -----------------------------------------------------
    2. This is most important, I need to get rid of the sidemenu that they are like now, and have the sidemenus like the one on apples site here, http://www.apple.com/support/ , where when your mouse scrolls over it it moves to the next menu, see the attached pic of what I mean.



    Here is the sidebar code:
    --------------------------------------
    PHP Code:
    <div class="dbx-group" id="sidebar">

    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

    <!--sidebox start -->
    <div id="categories" class="dbx-box">
    <h3 class="dbx-handle"><?php _e('Categories'); ?></h3>
    <div class="dbx-content">
    <ul>
    <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
    </ul>
    </div>
    </div>
    <!--sidebox end -->

    <!--sidebox start -->
    <div id="archives" class="dbx-box">
    <h3 class="dbx-handle"><?php _e('Archives'); ?></h3>
    <div class="dbx-content">
    <ul>
    <?php wp_get_archives('type=monthly'); ?>
    </ul>
    </div>
    </div>
    <!--sidebox end -->

    <!--sidebox start -->
    <div id="links" class="dbx-box">
    <h3 class="dbx-handle"><?php _e('Links'); ?></h3>
    <div class="dbx-content">
    <ul>
    <?php get_links('-1', '<li>', '</li>', '<br />', FALSE, 'id', FALSE, FALSE, -1, FALSE); ?>
    </ul>
    </div>
    </div>
    <!--sidebox end -->

    <!--sidebox start -->
    <div id="meta" class="dbx-box">
    <h3 class="dbx-handle">Meta</h3>
    <div class="dbx-content">
    <ul>
    <li class="rss"><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a></li>
    <li class="rss"><a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a></li>
    <li class="wordpress"><a href="http://www.wordpress.org" title="Powered by WordPress">WordPress</a></li>
    <li class="login"><?php wp_loginout(); ?></li>
    </ul>
    </div>
    </div>
    <!--sidebox end -->

    <?php endif; ?>

    </div><!--/sidebar -->


    ------------------------------------------------------
    Please I really need help on how to do these things, please if anyone could help me it would be very appreciated, thanks in advance.

  • #2
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    1. to achieve this i would perhaps have a JS toggler that when you you hold your mouse over the the dock it hides the existing dock and replaces it with a bigger one. Then if you want the individual items to increase in size possibly use an image swap function or something. All of which can be achieved with Java Script. I don't know the exact effect you are trying to achieve but i think JS would be your best bet.

    2. This kind of thing can be achieved with CSS. Google for expandable menus. drop down menus etc. You also achieve this effect with a toggler.

    The problem is both methods may rely on JS and you need to make alternatives for users who don't have JS.
    You can not say you know how to do something, until you can teach it to someone else.

  • #3
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Try this for your image resizing question:

    http://www.nsftools.com/tips/ImageResize.htm

    For your sidebar issue you have a lot of work to do. Apple uses a javascript called drawers.js that is not annotated with instructions, nor is it available in the public domain.

    You could likely copy it and modify it for your needs if you are familiar with javascript programming (I am not), or you could scour the many script sites out there for an experienced programmer to assist you with it.

    Use Firefox and the free add-ons Firebug, JSView, and Web Developer Toolbar to dissect the sites you find with interesting effects, then practice at home.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •