I am trying to add a navigation bar on top and because i will lots of separate html file, i want to keep the navigation in one file, so incase i make changes it changes in all the pages. If i enter the code in the page itself it works just fine but when its in an external file it gives a different view.
The Jquery snippet is:
var snippet = ' <div id="topMainNav">' +
' <ul>' +
' <li class="mainNav">' +
' <a href="" class="navlink">Find a Doctor</a>' +
' </li>' +
' <li class="mainNav">' +
' <a href="" class="navlink">Why Interfaith</a>' +
' <div class="dropdown" id="dropdown_one">' +
' <div class="subMainNav" style="padding: 10px;">History & Mission</div>' +
' <div class="subMainNav" style="padding: 10px;">Executive Director</div>' +
' <div class="subMainNav" style="padding: 10px;">Locations & Directions</div>' +
' <div class="subMainNav" style="padding: 10px;">Service Centers</div>' +
' <div class="subMainNav" style="padding: 10px;">Career Opportunities</div>' +
' <div class="subMainNav" style="padding: 10px;">News & Events</div>' +
' <div class="subMainNav" style="padding: 10px;">Parking</div>' +
' <div class="subMainNav" style="padding: 10px;">Places To Stay</div>' +
' </div>' +
' </li>' +
' <li class="mainNav">' +
' <a href="" class="navlink">Medical Services</a>' +
' <div class="dropdown" id="dropdown_two">' +
' <div class="subMainNav" style="padding: 10px;"><a href="#">Behavioral Health</a></div>' +
' <div class="subMainNav" style="padding: 10px;">Clinical Laboratory</div>' +
' <div class="subMainNav" style="padding: 10px;">Dentistry</div>' +
' <div class="subMainNav" style="padding: 10px;">Emergency</div>' +
' <div class="subMainNav" style="padding: 10px;">Gynecology</div>' +
' <div class="subMainNav" style="padding: 10px;">Medicine</div>' +
' <div class="subMainNav" style="padding: 10px;">Pastoral</div>' +
' <div class="subMainNav" style="padding: 10px;">Pediatrics</div>' +
' <div class="subMainNav" style="padding: 10px;">Physical Medicine & Rehab</div>' +
' <div class="subMainNav" style="padding: 10px;">Radiology</div>' +
' <div class="subMainNav" style="padding: 10px;">Surgery</div>' +
' <div class="subMainNav" style="padding: 10px;">Other Services</div>' +
' </div>' +
' </li>' +
' <li class="mainNav">' +
' <a href="" class="navlink">Medical Trainings</a>' +
' <div class="dropdown" id="dropdown_three">' +
' <div class="subMainNav" style="padding: 10px;">Medical Training</div>' +
' <div class="subMainNav" style="padding: 10px;">Behavioral Health</div>' +
' <div class="subMainNav" style="padding: 10px;">Predoctoral Externship</div>' +
' <div class="subMainNav" style="padding: 10px;">Podiatric Residency</div>' +
' <div class="subMainNav" style="padding: 10px;">Dental Residency</div>' +
' <div class="subMainNav" style="padding: 10px;">Pulmonary Residency</div>' +
' </div>' +
' </li>' +
' <li class="mainNav">' +
' <a href="" class="navlink">For Patients & Visitors</a>' +
' <div class="dropdown" id="dropdown_four">' +
' <p><a href="#">This is a Link</a></p>' +
' <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc.</p>' +
' </div>' +
' </li>' +
' <li class="mainNav">' +
' <a href="" class="navlink">Contact Us</a>' +
' </li>' +
' </ul>' +
'</div>';
$(function(){$('.writeNav').append (snippet);});
on my HTML page i have the following:
calling the external jscript file:
<script type="text/javascript" src="theScriptsStyles/miscScripts.js"></script>
and in the body of the html i have this:
<div class="writeNav"></div>
What its suppose to do is, have a pull down menu, so as i put my mouse over it has a slide down menu which is not working. Anyone can please tell me what i am doing wrong.
Thanks
I think ,your script is getting loaded even before the div is created. That is why it is not able to find and element with that Class./ Check if that is the case