Member Avatar for solomon_13000

I can't seem to make my menu work.

test.htm

<html>
<head><head>
<link rel="stylesheet" href="slicknav.css" />
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.slicknav.js"></script>
<script src="initialize.js"></script>
<title></title>
<body>

<ul id="menu2">
    <li>Parent 1
        <ul>
            <li><a href="#">item 3</a></li>
            <li>Parent 3
                <ul>
                    <li><a href="#">item 8</a></li>
                    <li><a href="#">item 9</a></li>
                    <li><a href="#">item 10</a></li>
                </ul>
            </li>
            <li><a href="#">item 4</a></li>
        </ul>
    </li>
    <li><a href="#">item 1</a></li>
    <li>non-link item</li>
    <li>Parent 2
        <ul>
            <li><a href="#">item 5</a></li>
            <li><a href="#">item 6</a></li>
            <li><a href="#">item 7</a></li>
        </ul>
    </li>
</ul>

</body>
</html>

initialize.js

$(document).ready(function() {
    $(window).load(function() {
        $('#menu2').slicknav({
            label: '',
            duration: 1000,
            easingOpen: "easeOutBounce", //available with jQuery UI
            prependTo:'#demo2'
        });
    });
});

Did I missed out something? Your help is kindly appreciated.

Thank You.

  • 4 Contributors
  • 24 Replies
  • 1K Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by KoniKodes

Recommended Answers

All 24 Replies

Member Avatar for pritaeas

Not sure why you use load inside the ready function. It's usually one or the other. What exactly is not working?

Member Avatar for solomon_13000

The menu doesn't appear in the way it should appear.

Member Avatar for pritaeas

Perhaps you know how it should appear, I certainly don't. Without you explaining it it'll be hard to find an issue.

Member Avatar for solomon_13000

Click Here Advanced Demo Section

Edited by solomon_13000
Member Avatar for pritaeas

prependTo:'#demo2'

I don't see a tag with id demo2

Member Avatar for solomon_13000

I solved the problem and will post the solution later in the day :)

Member Avatar for KoniKodes

What is the solution? I am getting a Firefox message that TypeError: $(...).slicknav is not a function.

Member Avatar for diafol

Show your js code in full. Sounds like you haven't included/linked to the slicknav js file.

Member Avatar for KoniKodes

I fixed that one, yes I did need to link to the slicknav js code.
Now I've found that my problem is that I'm also using accordion-ui and appear to have a js conflict.
I'm still learning the forum, should I post to jsfiddle and show the link? Or post directly here?

Member Avatar for diafol

As long as you just show the relevant snippets (not ALL your code, heh heh) - post away, great. If you have a link to a fiddle, include that too - it will save people a lot of time.

Member Avatar for KoniKodes

Thank you.
When I resize to 750px, I receive an error message from Chrome that says: Uncaught TypeError: $(...).accord is not a function

My code is here: Click Here

Member Avatar for diafol

Bit confused here. This thread is about slickNav. But I see no slickNav references or binding in your fiddle.

Member Avatar for KoniKodes

slickNav is in the html, #menu - and js <script>. I think it is working only because the accord is the second call.

Member Avatar for KoniKodes

Fiddle won't let me post my html headers.

here are the style and script links that I'm using:
<link href="css/slicknav.css" rel="stylesheet" type="text/css">
<link href="css/faqaccord.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script type="text/javascript" src="js/slicknav.min.js"></script>
<script type="text/javascript" src="js/accord.js"></script>

The js at fiddle is from accord

Member Avatar for KoniKodes

Firefox says: TypeError: $(...).accord is not a function accord.js:2:3
The accord.js is the one on jsFiddle.

I think it's in conflict with slicknav, but I don't know how to fix it.

Member Avatar for KoniKodes

This is below the other scripts, and above </head>

<script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>

<script type="text/javascript">
 $(function () {
  $('#menu').slicknav();
  });
</script>
</head>

Is that what you were missing?

Member Avatar for diafol

Seeing as you have not posted any code, just provided a link to the fiddle - the fiddle is all we have to go on.

Your fiddle is missing a head area - so there are no scripts included, other than the js code you include in the panel.

Therefore we have no way of testing your page.

Sorry but I'm not going to download all these various scripts in order to test them.

Member Avatar for KoniKodes 
<!DOCTYPE HTML>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>Hawaii Medical College: Admission Procedures | Enroll now  to prepare for your new career in healthcare</title>
<meta name="keywords" content="college, healthcare, enrollment, admissions department" />
<meta name="Description" content="The Hawaii Medical College Admissions Department will help you choose your career path programs" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<meta charset="utf-8"/>
<link href="css/slicknav.css" rel="stylesheet" type="text/css">
<link href="css/faqaccord.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script type="text/javascript" src="js/slicknav.min.js"></script>
<script type="text/javascript" src="js/accord.js"></script>


<style type="text/css">
@import url(http://cdn.tectite.com/formdesigneruser-v9.css);
</style>
<script type="text/javascript">window.jQuery || document.write('\x3Cscript src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"\x3E\x3C/script\x3E')</script><script type="text/javascript">window.jQuery || document.write('\x3Cscript src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"\x3E\x3C/script\x3E')</script><script type="text/javascript">window.jQuery || document.write('\x3Cscript src="http://cdn.tectite.com/jquery-1.7.2.min.js"\x3E\x3C/script\x3E')</script>
<script type="text/javascript">var tectite_form_environ = {img_url:"http://cdn.tectite.com/images/"};</script>
<script type="text/javascript" src="http://cdn.tectite.com/formval-v12.js"></script>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>

<script type="text/javascript">
 $(function () {
  $('#menu').slicknav();
  });
</script>
</head>
<body> 
<!-- Header  -->
<div id="hwrap">
<div id="logo"><a href="index.html">
<img class="biglog" src="img/hmclogo.png" alt="HMC Logo"></a>
</div> <!-- close Logo -->
<div class="title">Hawaii Medical College</div><!-- close title -->
<div class="tag">
Providing Qualified Professionals <br/>for the Healthcare Industry Workplace</div><!-- close tag -->
<div class="phone">(808) 237-5140</div><!-- close phone --><br/> 
</div><!-- close hwrap -->    

<div id="navwrap"><div class="nav">
<ul id="menu">
<li><a href="index.html"><strong> Home </strong> </a>
<li><a href="javascript:void(0);"><strong> About HMC <span class="arrow1">&#8659;</span></strong> </a>
          <ul>
         <li class="submenu"><a href="http://www.konikodes.com/beta/about/accredit.html">Accreditation</a></li>
         <li class="submenu"><a href="http://www.konikodes.com/beta/about/policies.html">Policies</a></li>
         <li class="submenu"><a href="http://www.konikodes.com/beta/about/disc.html">Disclosures</a></li></ul>

    <li><a href="javascript:void(0);"><strong> Programs <span class="arrow1">&#8659;</span></strong> </a>
        <ul>
         <li class="submenu"><a href="http://www.konikodes.com/beta/prog/habc.html">
            Healthcare Administration,<br/>Billing and Coding</a></li>
         <li class="submenu"><a href="http://www.konikodes.com/beta/prog/pharm.html">
            Pharmacy Technician</a></li>
         <li class="submenu"><a href="http://www.konikodes.com/beta/prog/cma.html">
            Clinical Medical Assistant</a></li>
         <li class="submenu"><a href="http://www.konikodes.com/beta/prog/cal.html">Academic Calendar</a></li>
        </ul>


    <li><a href="javascript:void(0);"><strong> Departments <span class="arrow1">&#8659;</span></strong> </a>
        <ul>
         <li class="submenu"><a href="http://www.konikodes.com/beta/enrollnow.html">Admissions</a></li>         
         <li class="submenu"><a href="http://www.konikodes.com/beta/finance.html">Financial Aid</a></li>    
         <li class="submenu"><a href="http://www.konikodes.com/beta/careers.html">Career Services</a></li>
         </ul>

    <li><a href="http://www.konikodes.com/beta/team/hmcteam.html"><strong >HMC Team </strong></a></li>
    <li><a href="http://www.konikodes.com/beta/faq.html"><strong> FAQ </strong></a></li>      
    <li><a href="http://www.konikodes.com/beta/news.html"><strong> News </strong> </a></li>
    <li><a href="http://www.konikodes.com/beta/dept/contact.html"><strong> Contact Us </strong></a></li>      
</ul>
</div><!-- close menu -->
</div>
<div id="container">
<div id="wrapLeft"><h1>Admissions Department</h1>
<p>At Hawaii Medical College, we are passionate about the transformation of our students into health care professionals that health care providers 
    desire to employ, retain and promote in Hawaii, or wherever our graduates call home. </p>
<p>
We provide a caring and supportive learning environment which allows students to develop the confidence and skills necessary to pursue rewarding careers.</p>

<div id="accordion">
<h3>Enrollment and Admission Process</h3>
<div><h4>Enrollment Requirements</h4>
<div><p style="color:black">Hawaii Medical College requires that all students:<br/>
<p>Have a high school diploma</p>
<p>Pass the Wonderlic Basic Skills Test</p>
<p>Provide current TB and MMR test results</p></div>



<h4>Hawaii Medical College Admission Procedures</h4>
<div><p style="color:black">
Visit Hawaii Medical College and tour our facilities</p>
<p style="padding-left:2em">Meet with your Career Counselor to discuss your career desires, and the educational programs that will help you to achieve your goals</p>
<p style="padding-left:2em">Complete an Application for Admission</p>
<p style="padding-left:2em">Submit a non-refundable $50 application fee </p>
</div></div>

<h3>Admission Requirements</h3>
<div>
<h4>Fulfill all Admission Requirements</h4>
<div><p style="color:black">Schedule a Wonderlic Basic Skills Test</p>
<p style="padding-left:2em">Submit your resume</p>
<p style="padding-left:2em">Provide High School Transcripts</p>
<p style="padding-left:2em">Submit TB and MMR test results</p>
<p style="padding-left:2em">Meet with the Financial Aid Advisor to make arrangements for tuition</p></div></div>

<h3>Acceptance</h3>
<div><h4>Acceptance Procedures</h4>
<p>Upon completion of all admission requirements the application will be forwarded to the Admissions Committee for consideration.</p>

<p>All applicants will be notified of the acceptance decision at least five business days in advance of the first day of class.</p>
  </div>


<h3>For More information</h3><div>
<h4>
Visit our <a href="faq.html">Frequently Asked Questions</a> page. </h4>
<h4>  
Contact the Admissions Department to discuss which program is best for you and to <a href="campus.html">Schedule A Campus Tour</a></h4>
    <p></p></div></div>
    </div>
  <div id="wrapRight">
 <div id="schedule"> 

Schedule a Private Tour of our Campus
<form id="hmc_tour" name="hmc_tour" method="post" enctype="multipart/form-data" action="formmail.php">
<input type="hidden" name="subject" value="Tour Request from HMC Mobile Website" />
<input type="hidden" name="good_url" value="thanks.html" />


<label for="field1">First and Last Name</label><input type="text" id="field1" name="FullName"  /><br/>


<label for="field2">Email Address</label><input type="text" id="field2" name="EmailAddr"  /><br/>

<label for="field3">Best Phone Number</label><input type="text" id="field3" name="phone"  /><br/>
<br/>How did you hear about us? <select name='leadsource'> 
<option value='HMI Student/Employee'>HMC Student/Employee</option>
<option value='Friend/Family'>Friend/Family</option>   
<option value='Google Search'>Google Search</option>
<option value='Social Media'>Social Media</option>
<option value='Job Fair'>Job Fair</option>     
<option value='MWR'>MWR</option>  
<option value='Voc Rehab'>Voc Rehab</option>      
<option value='Bus'>Bus Ad</option>
<option value='Radio'>Radio Commercial</option>
<option value='Television'>Television Commercial</option>  
<option value='-other-'>Other</option>   
</select><br/>
<br/>
What are you interested in? <select name='interest'>
<option value='Clinical Medical Assisting'>Clinical Medical Assisting</option>
<option value='EKG'>EKG</option>
<option value='Phlebotomy'>Phlebotomy</option>
<option value='Medical Coding'>Medical Billing and Coding</option>
<option value='Medical Office Assistant'>Medical Office Assistant</option>
<option value='Pharmacy Technician'>Pharmacy Technician</option>   
<option value='Not Sure'>Not Sure</option>    
 </select><br/>
<br/>Best Time to Call <select name='callme'>  
<option value='morning'>Mornings: 8:00 - 11:00 AM</option>
<option value='afternoon'>Afternoons: 12:00 - 4:00 PM</option>  
<option value='evenings'>Evenings: 5:00 - 7:00 PM</option>
<option value='via_email'>I prefer contact by email</option> 
</select><br/>
<br/><label for="appt">Preferred time and date for your Campus Tour</label><input type="text" id="appt" name="appt"><br/>


<div class="g-recaptcha" data-sitekey="6LeZQQcTAAAAAEWcmhw6bZIeMo_R7KAkNAlkKzis" data-theme="light" data-type="image" data-callback="g-recaptcha-response">
</div>
<input type="hidden" name="derive_fields" value="realname = FullName,email = EmailAddr,imgverify = g-recaptcha-response,arverify = imgverify" /> 
<input type="hidden" name="recipients" value="ashortsleeve6AfNyAhmi.edu" /><br/>


<input type="submit" id="field7" value="Send Now" name="submit" />

<!-- NOTE: do not remove the following links if you are using our Hosted Forms on a Free Plan.
     Removing the links will cause your form to be disabled! You can upgrade to a paid plan
     and then safely remove the links.
     If you are using your own copy of FormMail, you can remove the links without an issue,
     though we would appreciate it if you left them here.
-->
<a id="PoweredByLink" class="PoweredByFormMail" href="http://www.tectite.com/" target="_blank"><img id="PoweredByImg" src="http://www.tectite.com/images/FormMail_rnd_blue.png" alt="Badge for Tectite supplied feedback form" title="Use Tectite FormMail for your web form" /></a>
</form>
</div> <!-- close schedule -->

     <div  class="social">    <p> <a href="https://twitter.com/HiMedicalColleg" title="Follow us on Twitter">
<img src="img/twitter.png" alt="Follow us on Twitter" title="Follow us on Twitter" /></a>
&nbsp; &nbsp;
<a href="https://www.facebook.com/pages/Hawaii-Medical-College/115114908527783" title="Visit our Facebook Page">
<img src="img/facebook.png" alt="Like us on Facebook" />
</a>&nbsp; &nbsp;<a href="https://instagram.com/himedcollege/" title="Follow us on Instagram"><img src="img/instagram.png" alt="Follow us on Instagram"></a>&nbsp; &nbsp;
<a href="http://www.bbb.org/hawaii/business-reviews/schools-business-and-vocational/hawaii-medical-institute-inc-in-honolulu-hi-53003551/" title="Our Rating is A+">
<img src="img/bbb.png" alt="Our Better Business Bureau Rating is A+" /></a></p>
</div></div>

</body>
</html>
Member Avatar for KoniKodes 
 if (window.matchMedia("(max-width: 799px)").matches) {     
   $('.accord').accord({heightStyle: 'content', collapsible: true, active: false});
    'use strict';
    var parentDivs = $('.accord div'),
        childDivs = $('.accord h3').siblings('div'),
        grandDivs = $('.accord h4').siblings('div');

    'use strict';
    $('accord h2').click(function(){
        parentDivs.slideUp();
        if($(this).next().is(':hidden')){
            $(this).next().slideDown();
        }else{
            $(this).next().slideUp();
        }
    });
    $('.accord h3').click(function(){
        childDivs.slideUp();
        if($(this).next().is(':hidden')){
            $(this).next().slideDown();
        }else{
            $(this).next().slideUp();
        }
    });
        $('.accord h4').click(function(){
        grandDivs.slideUp();
        if($(this).next().is(':hidden')){
            $(this).next().slideDown();
        }else{
            $(this).next().slideUp();
        }
    });
 };
Member Avatar for KoniKodes

Is this what you needed?

Member Avatar for KoniKodes

forgot css:

@media screen and (max-width: 799px) {
    #menu {
    display:none;
}
.slicknav_menu {
    display:block;
}
.arrow1{
    display:none;
}

#wrapRight {
    clear:both;
    float:none;
    width:100%;
    margin:0 0 1em 0;
}

#wrapLeft {
    clear:both;
    float:none;
    width:100%;
    margin:0 0 1em 0;
}

figure{
    display: block;
    width:100%;
    text-align:center;
    margin:0 auto;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}

img {
    margin: 0 auto;
}

#schedule {
    display:none;
}

.social {
    margin: 0 auto;
    padding:2em 0 0 0;
    font-size:.9em;
    line-height:3em;
    color: #007d8b;
    font-weight: normal;
    text-align:center;
}
#accord {
    width: 100%;
    margin:0;
    padding:0;
    display:block;
}

#accord h2, #accord h3, #accord div, #accord p {
 /* reset styles for accord */
    margin: 0;
    padding: 0;
    font-weight: normal;
    width:100%;
}

#accord div {
    display:block;
    color: #555;
    overflow: auto;
}

#accord h2 {
    cursor: pointer;
    color: #fff;
    font-size: 1.1em;
    line-height:1.2em;
    font-family: Ariel, sans-serif;
    font-variant: small-caps;
    font-weight:bold;
    margin-top: 1px;
    padding-left:1.5em;
    border-bottom:1px solid #94bbff;
    background-color: #ccc;
}

#accord h2 a {
    text-decoration:none;
}

#accord h3:nth-of-type(odd) {
    cursor: pointer;
    color: #fff;
    font-size: 1.1em;
    font-family: Ariel, sans-serif;
    padding: 5px;
    margin-top: 5px;
    background-color:#94bbff;
    display:block;
    transition: all .6s .2s ease;
}

#accord h3:nth-of-type(odd) {
     cursor: pointer;
     color: #d1f0f3;
     font-size: 1em;
     font-family: Ariel, sans-serif;
     line-height:1.2em;
     padding: 5px;
     margin-top: 5px;
     margin-bottom: 5px;
     background-color: #b38e0f;
     display:block;
}

#accord p {
     font-family: Ariel, sans-serif;
     color:#000000;
     background-color: #F5F5F5;
     padding: 5px 5px 5px 30px;
     font-size: 1em;
     display:block;
}

#accord p a {
     text-decoration:underline;
}
}
Member Avatar for KoniKodes

Do these help?

Member Avatar for KoniKodes

Thank you for taking the time to try to help me. I found the answers!
I must remember to keep it simple....

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.