Results 1 to 7 of 7

Thread: Omni Slide Menu with Frames

  1. #1
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Omni Slide Menu with Frames

    Basically, I have a frameset with 5 frames. One frame ("topFrame") contains the navigation (horizontal) and I am trying to use Omni Slide Menu in that frame to change the contents in another frame ("mainFrame").

    I have changed the menu list (in menuItems.js) to include the following line.

    ["TEST", "xfrm_main.html", "_new"]

    I have two problems and would appreciate some help please.

    First, the drop down menu is hidden behind the frame underneath. Can I change the code so that the drop down menu is on the top of the frame underneath?

    Secondly, how can I change the line above to ensure that the page "xfrm_main.html" is loaded into a nominated frame ("mainFrame") rather than a new window?

    Thanks.

  2. #2
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    For your first question, try adjusting the z-index css property to put the lower frame behind the upper frame.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  3. #3
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you bernie 1227. Yes, I am aware of z-index. However, I am totally ignorant about CSS (shame on me!!). So where do I put the lines

    Code:
    #warning {
      position: absolute;
      z-index: 1;
    }
    and in which file. menuitem.js or mmenu.js?

    Sorry for such a simple question.

    I have resolved how to load the page into a another frame. I simply replaced "_new" with the name of the targeted frame (e.g "mainFrame")
    Last edited by keyboard; 10-18-2012 at 09:43 AM. Reason: Format: Code Tags ([code][/code])

  4. #4
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Please use bbcode (ie [code]) tags to make your posts more readable.
    As for the question, for example
    Code:
    #topframe {
        z-index: 50;
    }
    To place the topframe above the rest of the frames.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  5. #5
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for your help bernie1227. I'm obviously struggling to grasp the basics of css. Let me try to explain my ignorance.

    I have a frameset called qdemo.html and this contains two frames leftFrame (containing omni.html) and subFrame (containing (qfrm_sub.html).

    The code for qdemo.html is:

    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    
       #leftFrame, #subFrame {
        position: absolute; /* absolute positioning */
       } 
    
    #leftFrame {
    	
        z-index: 50;
    }
    #subFrame {
    	
        z-index: 10;
    }
    
    </style>
    
    </head>
    
    <frameset rows="80,*" frameborder="NO" border="0" framespacing="0"> 
      <frame name="leftFrame" scrolling="NO" noresize src="omni.html" >
      <frame name="subFrame" src="qfrm_sub.html">
    </frameset>
    <noframes><body bgcolor="#FFFFFF">
    
    </body></noframes>
    </html>

    and that for qfrm_sub.html is:

    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    
       #leftFrame, #subFrame {
        position: absolute; /* absolute positioning */
       } 
    
    #leftFrame {
    	
        z-index: 50;
    }
    #subFrame {
    	
        z-index: 10;
    }
    
    </style>
    
    </head>
    
    <body bgcolor="#FFFFFF">
    temp frame
    </body>
    </html>
    The file omni.html contains the drop down menus and the start of the file is...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>Dynamic Drive DHTML Scripts- Omni Slide Menu demo</title>
    <style type="text/css">
                                /*Menu Links*/
    
       #leftFrame, #subFrame {
        position: absolute; /* absolute positioning */
       } 
    
    
    
    #leftFrame {
    	
        z-index: 50;
    }
    #subFrame {
    	
        z-index: 10;
    }
    
    /*NOTE: anything not specified for the #(menu id's) a selector and its pseudo classes
    may be inherited in some browsers from other 'a' element styles (if any) on the page*/
    
    #menu1 a {color:black;background-color:white;text-decoration:none;text-indent:1ex;}
    #menu1 a:active {color:black;text-decoration:none;}
    #menu1 a:hover {color:black;background-color:#FFFF99}
    #menu1 a:visited {color:black;text-decoration:none;}
    All, fairly simple stuff but I am clearly not grasping where/how to use css. Can you help please?

  6. #6
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Ok, so find the css for specifically the frame that contains the menu which drops down, and put something along the lines of:
    Code:
    z-index: 100;
    In there. The idea of that, is to place the frame above the levels of the other frames so the menu will not slide behind the lower frame.
    Edit:
    It should be in leftFrame
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  7. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,837
    Thanks
    49
    Thanked 246 Times in 238 Posts
    Blog Entries
    56

    Default

    Quote Originally Posted by bernie1227 View Post
    Ok, so find the css for specifically the frame that contains the menu which drops down, and put something along the lines of:
    Code:
    z-index: 100;
    In there. The idea of that, is to place the frame above the levels of the other frames so the menu will not slide behind the lower frame.
    Edit:
    It should be in leftFrame
    You can't just have elements (like the items of a menu) from one frame of a frameset go over another frame of the set. The reason is that frames (of a frameset) are windowed elements that don't obey zIndex rules. There's some sort of a solution, though. I wrote this about it a long time ago, so it's not up to date anymore. But it still works, except for the Google link.
    Arie.

Similar Threads

  1. Omni Slide Menu does not slide out on smart phone
    By paulzab in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-01-2012, 06:16 AM
  2. Omni Slide Menu
    By DJCyrus81 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-03-2010, 08:21 AM
  3. I need help on the Omni Slide Menu!!!!
    By Zapboy27 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-01-2007, 05:13 AM
  4. omni slide menu?
    By gomzi in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 04-13-2007, 04:10 AM
  5. Help for Omni Slide Menu
    By lodge 778 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-02-2007, 02:33 AM

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
  •