Results 1 to 3 of 3

Thread: two images for slide menu

  1. #1
    Join Date
    Mar 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation two images for slide menu

    Hi there,

    i was wondering if how to put two slide menu in a single page without using the code twice..

    this is the script im talking about:
    http://www.dynamicdrive.com/dynamici...lideinmenu.htm

    Im using a single image rather than a group of menu in order to slide each line rather than the whole group.

    thanks.

  2. #2
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    why!!! As the viewers cannot see whats on the menu, why split it up in seperate slides... I think it will be very frustrating for the viewers of your web site if you do it that way. Just a comment.. also it will make you page rather a large size due to all the seperate scripts etc...
    Last edited by simonf; 03-30-2006 at 02:26 PM.
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,497
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, I agree with simonf about the individual items each being a slide out, unless there is something on their 'always visible' portion that gives at least a clue as to what they are. Also, using images is never a good idea if styled text can be made to do. However, I am in the midst of learning this OOP stuff, which is one way of making scripts work more than once on a page. So, it is in that spirit that I have come up with the following mod of this script.

    You will notice that the main script now goes in the head of the page and is still where you define your arrays. But, there is a small script that goes in the body to define each slide menu's array used, width, etc. There were a few bugs in the original script that I've also ironed out. The vibrating menu in Mozilla and the menu that disappears when the mouse leaves the browser headed left in IE both are fixed to my satisfaction for the time being:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style>
    <!--
    .slidemenu {
    position:absolute;
    border:1px solid black;
    background-color:#F2F2F2;
    font:bold 12px Verdana;
    line-height:20px;
    padding:3px;
    }
    -->
    </style>
    <script type="text/javascript">
    /***********************************************
    * Sliding Menu Bars Script-  Dynamic Drive (www.dynamicdrive.com)
    * Visit http://www.dynamicdrive.com/ for full source code
    * This notice must stay intact for use
    * Modified for Multiple Use and minor bug fixes by jscheuer1 in
    * http://www.dynamicdrive.com/forums 3/30/2006
    ***********************************************/
    
    ///////////Edit below/////////////////////////////////
    
    var sitems=new Array()
    //siteitems[x]=['Item Text', 'Optional URL associated with text']
    sitems[0]=['<span style="padding-left:33px;color:red;font:bold 150% arial">Site Menu</span>', '']
    sitems[1]=['Menus And Navigation', 'http://www.dynamicdrive.com/dynamicindex1/']
    sitems[2]=['Document Effects', 'http://www.dynamicdrive.com/dynamicindex3/']
    sitems[3]=['Scrollers', 'http://www.dynamicdrive.com/dynamicindex2/']
    sitems[4]=['Image Effects', 'http://www.dynamicdrive.com/dynamicindex4/']
    sitems[5]=['Links And Buttons', 'http://www.dynamicdrive.com/dynamicindex5/']
    sitems[6]=['Dynamic Clocks & Dates', 'http://www.dynamicdrive.com/dynamicindex6/']
    sitems[7]=['Text Animations', 'http://www.dynamicdrive.com/dynamicindex10/']
    sitems[8]=['Browser Window', 'http://www.dynamicdrive.com/dynamicindex8/']
    sitems[9]=['User System Information', 'http://www.dynamicdrive.com/dynamicindex9/']
    sitems[10]=['Other', 'http://www.dynamicdrive.com/dynamicindex11/']
    
    var sitems2=new Array()
    //siteitems[x]=['Item Text', 'Optional URL associated with text']
    sitems2[0]=['<span style="padding-left:28px;color:red;font:bold 150% arial">Links</span>', '']
    sitems2[1]=['JavaScriptKit', 'http://www.javascriptkit.com/']
    sitems2[2]=['CodingForums', 'http://www.codingforums.com/']
    sitems2[3]=['Google', 'http://www.google.com/']
    
    
    //////////////////////////Stop Editing///////////////////
    
    
    var slidemenus=new Array();
    var ns4=document.layers?1:0
    var ie4=document.all
    var ns6=document.getElementById&&!document.all?1:0
    
    function slidemenu(sitemsar, slidemenu_width, slidemenu_reveal, slidemenu_top, target) {
    if (!ie4&&!ns6)
    return;
    this.target=typeof target!=='undefined'? target : ''
    this.slidemenu_array=sitemsar
    this.slidemenu_width=slidemenu_width
    this.slidemenu_reveal=slidemenu_reveal
    this.slidemenu_top=slidemenu_top
    this.slidemenuId=slidemenus.length
    this.rightboundary=0
    this.leftboundary=(slidemenu_width-slidemenu_reveal)*-1
    slidemenus[slidemenus.length]=this
    
    document.write('<div class="slidemenu" id="slidebar'+this.slidemenuId+'" style="left:'+[(this.slidemenu_width-this.slidemenu_reveal)*-1]+'px; top:'+slidemenu_top+'px; width:'+slidemenu_width+'px" onMouseover="pull('+this.slidemenuId+')" onMouseout="draw('+this.slidemenuId+')">')
    
    for (var i=0;i<this.slidemenu_array.length;i++){
    if (this.slidemenu_array[i][1]!=='')
    document.write('<a href="'+this.slidemenu_array[i][1]+'" target="'+this.target+'">')
    document.write(this.slidemenu_array[i][0])
    if (this.slidemenu_array[i][1]!=='')
    document.write('</a>')
    document.write('<br>\n')
    }
    document.write('</div>')
    
    this.themenu=(ns6)? document.getElementById("slidebar"+this.slidemenuId).style : document.all["slidebar"+this.slidemenuId].style
    
    }
    
    function pull(id){
    if (window.event)
    for (var i_tem = 0; i_tem < slidemenus.length; i_tem++)
    if (i_tem!=id)
    draw(i_tem)
    var obj=slidemenus[id]
    if (obj.drawit)
    clearInterval(obj.drawit)
    if (obj.pullit)
    clearInterval(obj.pullit)
    obj.pullit=setInterval("pullengine("+id+")",10)
    }
    function draw(id){
    if(window.event&&window.event.clientX<2)
    return;
    var obj=slidemenus[id]
    clearInterval(obj.pullit)
    if (obj.drawit)
    clearInterval(obj.drawit)
    obj.drawit=setInterval("drawengine("+id+")",10)
    }
    function pullengine(id){
    var obj=slidemenus[id]
    if (parseInt(obj.themenu.left)<obj.rightboundary-10)
    obj.themenu.left=parseInt(obj.themenu.left)+10+"px"
    else if (obj.pullit){
    obj.themenu.left=0
    clearInterval(obj.pullit)
    }
    }
    
    function drawengine(id){
    var obj=slidemenus[id]
    if (parseInt(obj.themenu.left)>obj.leftboundary+10)
    obj.themenu.left=parseInt(obj.themenu.left)-10+"px"
    else if (obj.drawit){
    obj.themenu.left=obj.leftboundary+'px'
    clearInterval(obj.drawit)
    }
    }
    
    document.onmousemove=function(){
    if(window.event) {
    var x=event.clientX,
    y=event.clientY
    for (var i_tem = 0; i_tem < slidemenus.length; i_tem++){
    if((x-1<=(parseInt(ie4['slidebar'+i_tem].style.left)+ie4['slidebar'+i_tem].offsetWidth))&&(y>=slidemenus[i_tem].slidemenu_top&&y-1<=(slidemenus[i_tem].slidemenu_top+ie4['slidebar'+i_tem].offsetHeight)))
    return;
    }
    for (i_tem = 0; i_tem < slidemenus.length; i_tem++)
    draw(i_tem)
    }
    }
    </script>
    </head>
    <body>
    <script type="text/javascript">
    //Usage Example:
    //new slidemenu(itemsArrayName, menuWidth, initialReveal, topOffset, optionalLinksTarget)
    new slidemenu(sitems, 165, 12, 40)
    new slidemenu(sitems2, 120, 12, 293, '_new')
    </script>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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