Advanced Search

Results 1 to 9 of 9

Thread: Help !! Glossy Accordion Menu with responsive headers

  1. #1
    Join Date
    Apr 2008
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Help !! Glossy Accordion Menu with responsive headers

    1) Script Title: Accordion Menu script (v1.3)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ordionmenu.htm

    3) Describe problem: Menu Links not opening within the iFrame

    Hi,

    Im pretty new to HTML coding and would like some help on trying to get the menu links to open within the iFrame also.

    At the moment all what is happening is when you click on the Submenu heading the URL is brought up in the iFrame but I want this to happen to all the links. So when you click on any link it appears in the iFrame.

    I am currently working on Windows Sharepoint Services and using the Portal which only supports content editor webparts for using HTML code. So its pretty basic in terms of editing.

    As you can see on the below image I have both scripts in working order however it just needs the final touches...... i.e. all linkages working within the iFrame, also I would like the homepage URL to be set as the defualt page that is shown in the iFrame when the page is opened.



    The script itself is below:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
    <head>
    
    <script type="text/javascript" src="http://hrportal.intranet.point/sites/MyHR/Tree%20Script/jquery-1.2.2.pack.js"></script>
    
    <script type="text/javascript" src="http://hrportal.intranet.point/sites/MyHR/Tree%20Script/ddaccordion.js">
    
    /***********************************************
    * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    
    </script>
    
    
    <script type="text/javascript">
    
    
    ddaccordion.init({
    	headerclass: "submenuheader", //Shared CSS class name of headers group
    	contentclass: "submenu", //Shared CSS class name of contents group
    	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
    	defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
    	animatedefault: false, //Should contents open by default be animated into view?
    	persiststate: true, //persist state of opened contents within browser session?
    	toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["suffix", "<img src='http://hrportal.intranet.point/sites/MyHR/Tree%20Script/plus.gif' class='statusicon' />", "<img src='http://hrportal.intranet.point/sites/MyHR/Tree%20Script/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    	animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
    	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
    		myiframe=window.frames["myiframe"]
    		if (expandedindices.length>0) //if there are 1 or more expanded headers
    			myiframe.location.replace(headers[expandedindices.pop()].getAttribute('href')) //Get "href" attribute of final expanded header to load into IFRAME
    	},
    	onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed
    		if (state=="block" && isclicked==true){ //if header is expanded and as the result of the user clicking on it
    			myiframe.location.replace(header.getAttribute('href'))
    		}
    	}
    })
    
    
    </script>
    
    
    <style type="text/css">
    
    .glossymenu{
    margin: 5px 0;
    padding: 0;
    width: 170px; /*width of menu*/
    border: 1px solid #9A9A9A;
    border-bottom-width: 0;
    }
    
    .glossymenu a.menuitem{
    background: black url(http://hrportal.intranet.point/sites...glossyback.gif) repeat-x bottom left;
    font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    color: white;
    display: block;
    position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
    width: auto;
    padding: 4px 0;
    padding-left: 10px;
    text-decoration: none;
    }
    
    
    .glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
    color: white;
    }
    
    .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
    position: absolute;
    top: 5px;
    right: 5px;
    border: none;
    }
    
    .glossymenu a.menuitem:hover{
    background-image: url(http://hrportal.intranet.point/sites...ssyback2.gif);
    }
    
    .glossymenu div.submenu{ /*DIV that contains each sub menu*/
    background: white;
    }
    
    .glossymenu div.submenu ul{ /*UL of each sub menu*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    
    .glossymenu div.submenu ul li{
    border-bottom: 1px solid blue;
    }
    
    .glossymenu div.submenu ul li a{
    display: block;
    font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    color: black;
    text-decoration: none;
    padding: 2px 0;
    padding-left: 10px;
    }
    
    .glossymenu div.submenu ul li a:hover{
    background: #DFDCCB;
    colorz: white;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div class="glossymenu">
    <a class="menuitem" href="http://www.dynamicdrive.com/">Homepage</a>
    <a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/">Absence & Attendance</a>
    <div class="submenu">
    	<ul>
    	<li><a href="http://www.google.co.uk">Sick Absence</a></li>
    	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Unauthorised Absence</a></li>
    	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Family Friendly</a></li>
    	</ul>
    </div>
    
    <a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/">Managing Employees</a>
    <div class="submenu">
            <ul>	
            <li><a href="http://www.javascriptkit.com/jsref/">Bullying and Harassment</a></li>
            <li><a href="http://www.javascriptkit.com/domref/">Conduct</a></li>
            <li><a href="http://www.cssdrive.com">Grievance</a></li>
            </ul>
    </div>
    
    <a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/">Document Library</a>
    <div class="submenu">
            <ul>	
            <li><a href="http://www.javascriptkit.com/jsref/">Absence & Attendance</a></li>
            <li><a href="http://www.javascriptkit.com/domref/">Managing Employees</a></li>
            </ul>
    </div>
    
    <a class="menuitem" href="http://www.dynamicdrive.com/">Ask MyHR</a>	
    <a class="menuitem" href="http://www.dynamicdrive.com/">MyHR Advice Line</a>
    <a class="menuitem" href="http://www.dynamicdrive.com/">User Guide</a>	
    <a class="menuitem" href="http://www.dynamicdrive.com/">MyHR Case Viewer</a>
    <a class="menuitem" href="http://www.dynamicdrive.com/">Management Information</a>
    </div>
    
    </body>
    </html>
    I have tried to the best of my knowledge in changing the script but have failed misserably. Can someone please provide support into my query.

    Kind Regards

    Thomas
    Last edited by ddadmin; 04-17-2008 at 06:40 PM.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Here:
    Change:
    Code:
    <div class="glossymenu">
    <a class="menuitem" href="http://www.dynamicdrive.com/">Homepage</a>
    <a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/">Absence & Attendance</a>
    <div class="submenu">
    <ul>
    <li><a href="http://www.google.co.uk">Sick Absence</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Unauthorised Absence</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Family Friendly</a></li>
    </ul>
    </div>
    
    <a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/">Managing Employees</a>
    <div class="submenu">
    <ul>
    <li><a href="http://www.javascriptkit.com/jsref/">Bullying and Harassment</a></li>
    <li><a href="http://www.javascriptkit.com/domref/">Conduct</a></li>
    <li><a href="http://www.cssdrive.com">Grievance</a></li>
    </ul>
    </div>
    
    <a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/">Document Library</a>
    <div class="submenu">
    <ul>
    <li><a href="http://www.javascriptkit.com/jsref/">Absence & Attendance</a></li>
    <li><a href="http://www.javascriptkit.com/domref/">Managing Employees</a></li>
    </ul>
    </div>
    
    <a class="menuitem" href="http://www.dynamicdrive.com/">Ask MyHR</a>
    <a class="menuitem" href="http://www.dynamicdrive.com/">MyHR Advice Line</a>
    <a class="menuitem" href="http://www.dynamicdrive.com/">User Guide</a>
    <a class="menuitem" href="http://www.dynamicdrive.com/">MyHR Case Viewer</a>
    <a class="menuitem" href="http://www.dynamicdrive.com/">Management Information</a>
    </div>
    To:
    Code:
    <div class="glossymenu">
    <a class="menuitem" href="http://www.dynamicdrive.com/" target="iframe_name">Homepage</a>
    <a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/" target="iframe_name">Absence & Attendance</a>
    <div class="submenu">
    <ul>
    <li><a href="http://www.google.co.uk" target="iframe_name">Sick Absence</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/" target="iframe_name">Unauthorised Absence</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/" target="iframe_name">Family Friendly</a></li>
    </ul>
    </div>
    
    <a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/" target="iframe_name">Managing Employees</a>
    <div class="submenu">
    <ul>
    <li><a href="http://www.javascriptkit.com/jsref/" target="iframe_name">Bullying and Harassment</a></li>
    <li><a href="http://www.javascriptkit.com/domref/" target="iframe_name">Conduct</a></li>
    <li><a href="http://www.cssdrive.com" target="iframe_name">Grievance</a></li>
    </ul>
    </div>
    
    <a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/" target="iframe_name">Document Library</a>
    <div class="submenu">
    <ul>
    <li><a href="http://www.javascriptkit.com/jsref/" target="iframe_name">Absence & Attendance</a></li>
    <li><a href="http://www.javascriptkit.com/domref/" target="iframe_name">Managing Employees</a></li>
    </ul>
    </div>
    
    <a class="menuitem" href="http://www.dynamicdrive.com/" target="iframe_name">Ask MyHR</a>
    <a class="menuitem" href="http://www.dynamicdrive.com/" target="iframe_name">MyHR Advice Line</a>
    <a class="menuitem" href="http://www.dynamicdrive.com/" target="iframe_name">User Guide</a>
    <a class="menuitem" href="http://www.dynamicdrive.com/" target="iframe_name">MyHR Case Viewer</a>
    <a class="menuitem" href="http://www.dynamicdrive.com/" target="iframe_name">Management Information</a>
    </div>
    Your iframe should have a name, example:
    Code:
    <iframe src="" name="name"></iframe>
    So, now replace all the highlighted above with the name of your iframe.
    Hope this Helps,
    Nile
    Jeremy | jfein.net

  3. The Following User Says Thank You to Nile For This Useful Post:

    tbellamy08 (04-18-2008)

  4. #3
    Join Date
    Apr 2008
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Really appreciate your help there, thank you very much.

    Is there anywhere to make donations? as I will probably be needing further help for my project.

  5. #4
    Join Date
    Apr 2008
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Is it possible to make the homepage link the default page to come up as soon as the site is opened?

  6. #5
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Nile seems not online yet, anyway, set the url in the iframe source:
    Code:
    <iframe src="http://www.dynamicdrive.com/forums" name="name"></iframe>
    See if it helps
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  7. The Following User Says Thank You to rangana For This Useful Post:

    tbellamy08 (04-18-2008)

  8. #6
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Yes, then you can also set a height a width a border with CSS. So if you need anymore just post.
    Jeremy | jfein.net

  9. The Following User Says Thank You to Nile For This Useful Post:

    tbellamy08 (04-18-2008)

  10. #7
    Join Date
    Apr 2008
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Thankyou Nile and Rangana

  11. #8
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    We're happy to help any day.
    Jeremy | jfein.net

  12. #9
    Join Date
    Apr 2008
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default iFrame Help

    I have the following iFrame code below
    Code:
    <iframe iframe src="http://hrportal.intranet.point/sites/MHR/Pages/Welcome%20to%20MyHR.aspx?PageView=Shared" name="myiframe" scrolling="no" frameborder="0" width=800 height=1000></iframe>
    However some of the pages I have built hold FAQ sections that hold over 50 questions. But with the iFrame having a set size it dosent allow the whole text to be shown unless you click and hold whilst dragging down the page. Now I dont want to enable the scroll bar as the main page already has a scroller on it and having 2 on a page will look rather dull. Is there any coding that can assign the iframe to suit the pages size automatically? So when a new page is opened and has the size of 800x2000 compared to the normal default size which is 800x1000 is will be displayed correctly.

    Hope you can help with this issue.

    Kind Regards

    Thomas

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
  •