jquery - Bootstrap Menu DropDown not working on a page with embedded header.html file -
jquery - Bootstrap Menu DropDown not working on a page with embedded header.html file -
i have created project jquery embedded mutual header.html file on pages (including index.html , etc.)
i added bootstrap in this. now, dropdown menu in header.html working fine; not on other pages (with included header.html)
also, menu toggle doesn't work fine (it doesn't go back). have tried way resolve this, nil beneficiary.
does dropdown in bootstrap menu not supported header files added jquery?
header.html:
<!doctype html> <html> <head> <title>the best, creative , affordable study , life skills training center - solupad</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="cache-control" content="max-age=600, public"> <link href="css/bootstrap.min.css" rel="stylesheet" /> <!-- <link href="data:text/css;charset=utf-8," data-href="css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet" /> --> <script src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <link type="text/css" rel="stylesheet" href="css/stylesheet.css" /> <script> $(window).scroll(function () { var y = $(this).scrolltop(); var x = $(this).scrollleft(); $('#blurry').css('background-position', parseint(-x) + 'px ' + parseint(-y) + 'px'); }); </script> <style> .inarow{ margin: 0 auto; } .logo{ width: 15%; height:140px; margin:1% auto; padding:0%; } </style> </head> <body> <!-- nav --> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- brand , toggle grouped improve mobile display --> <div class="navbar-header"> <br/> <!--header --> <div class="row"> <div class="col-lg-3"> <img alt="solupad logo" src="images/ss-training-center-solupad-white.png" > </div> <div class="col-lg-6" class="shadow"> <h1> <span style="color:green;font-weight:bold;">solupad</span> <span style="color:#053d63;font-weight:bold;">- finish solution pad your</span> <span style="color:#e00000;font-weight:bold;">problems</span> <span>!</span> </h1> </div> <div class="col-lg-3"> <img alt="solution pad" src="images/solupad-pad-logo-white.png"> </div> </div> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">menu</a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="index.html">home</a></li> <li><a href="what-we-do.html">what do</a></li> <li><a href="who-we-are.html">who are</a></li> <!-- <li><a href="see-my-work-here.html">my work</a></li> --> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">free stuffs</a> <ul class="dropdown-menu" role="menu"> <li tabindex="-1"><a href="study-problems-and-issues.html">study problems?</a></li> <li tabindex="-1"><a href="study-problems-and-issues.html">learning inabilities?</a></li> <li>study depression</li> <li>more stuffs coming soon! plz remain connected!</li> </ul> </li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">need help ?</a> <ul class="dropdown-menu" role="menu"> <li><a href="http://goo.gl/forms/ahr8r5ijh8">get trained</a></li> <li><a href="http://goo.gl/forms/mgx6h7wyan">provide feedback online</a></li> <li><a href="contact-us.html">contact us</a></li> <li><a href="docs/for-institutions.doc">download training request offline</a></li> <li><a href="docs/to-institutions.doc">download training quotation offline</a></li> <li><a href="docs/feedback-form.doc">download offline feedback form</a></li> <li><a href="training-modules.html">our training modules</a></li> <li><a href="solupad-flash.html">solupad-flash</a></li> <li><a href="solupad-youtube.html">solupad-youtube</a></li> <li><a href="mahavaani-hindi.html">mahavaani hindi</a></li> <li><a href="inspirational-quotes-english.html">inspirational quotes</a></li> <li><a href="motivational-speeches.html">motivational-speeches</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </body> </html> index.html
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="cache-control" content="max-age=600, public"> <link href="css/bootstrap.min.css" rel="stylesheet" /> <!-- <link href="data:text/css;charset=utf-8," data-href="css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet" /> --> <script src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <link type="text/css" rel="stylesheet" href="css/stylesheet.css" /> <style> #wrappad{ border-radius: 10px; border: solid thick #9f9f9f; border-left: outset; border-right: ridge; border-top: ridge; border-bottom: inset; background-color:#e6e6e6; /* or #efeded , #c1cdcd , ffe4c4 , #eeeeee , #c1cdc1 , #e6e6e6 , #cccccc , */ text-align: center; /* <shadow> = inset? && [ <length>{2,4} && color? ] */ box-shadow: 3px 30px 70px 5px #05f; /* shadows of right, bottom; glow of box, color of border of box */ padding: 3%; vertical-align:middle; } #wrapscreen{ background-color:#1f1f1f; text-align: center; /* <shadow> = inset? && [ <length>{2,4} && color? ] */ box-shadow: -1px -1px 1px 2px black; /* shadows of right, bottom; glow of box, color of border of box */ margin: 0 auto; padding:0%; } .icons{ border: none; /* list-style: none; margin:0 auto; float:left; */ } .contact{ text-align: center; } </style> <script> $(function(){ $("#includedcontent").load("header.html"); }); </script> <script> $(function(){ $("#footerdiv").load("footer.html"); }); </script> </head> <body> <div class="container"> <!-- nav --> <div id="includedcontent"></div> <br /> <div class="row"> <div class="row" id="wrappad"> <div id="wrapscreen" class="row" class="img-responsive"> <div class="col-lg-8 col-md-8"> <img src="images/pic01.jpg" alt="solution pad problems" title="solution pad problems" name="slide" style="border:0px;width:80%;height:70%;" /> </div> <div class="col-lg-4 col-md-4" class="headingimg"> <h2 id="headingimg">head of img descr</h2> <p id="textimg">text para</p> </div> </div> <br /> <div class="inarow" id="buttons3"> <a href="http://solupad.com/contact-us.html"> <div id="btnmain"> <div id="btnmainbtn"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </div> </div> </a> </div> </div> </div> </div> <br/> <div id="footerdiv"></div> <br/> </body> </html> one more html file code
<!doctype html> <html> <head> <title>solupad - page not available</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="cache-control" content="max-age=600, public"> <link href="css/bootstrap.min.css" rel="stylesheet" /> <!-- <link href="data:text/css;charset=utf-8," data-href="css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet" /> --> <script src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <link type="text/css" rel="stylesheet" href="css/stylesheet.css" /> <script> $(function(){ $("#includedcontent").load("header.html"); }); </script> </head> <body> <div class="container"> <!-- nav --> <div id="includedcontent"></div> <br /> <div class="row"> <div class="col-lg-12 col-md-12"> <h1>sorry, page visited not found!</h1> <br /> <h2>the possible causes of error see, may either of following:</h2> <p>the web page looking not available or misspelled!</p> <p>this site under maintenance now...!</p> <p>also, check net connection.</p> <h4> create sure, add together .html @ lastly of each page wish visit straight (via url)</h4> <h5> also, please utilize 'solupad.com/*' instead of 'www.solupad.com/*'</h5> <br /> </div> </div> <section> homecoming <a href="index.html">homepage</a> </section> </div> </body> </html>
i got issue resolved few months ago!
to resolve such issue, must maintain in mind these points:
as, header.html & footer.html added in index.html (or other page), don't add together (style, scripts) links 1 time again in header.html e.g. (add them 1 time in page & not in header.html again) add styles & scripts need in header.html only.and important; within each submenu item, create sure add together class="dropdown-menu" & role="menu" attributes below:
home<li id="phf"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">problems? ⇩</a> <ul class="dropdown-menu" role="menu" style="color:red"> <li><a href="study-problems-and-issues.html">study problems & non-interests</a></li> <li><a href="#">poor learning ability</a></li> <li><a href="why-my-memory-is-so-weak.html">is memory weak?</a></li> <li><a href="why-my-memory-is-so-weak.html">lack of concentration</a></li <li><a href="#">unable perform work well?</a></li> <li><a href="#">poor work performance</a></li> <li><a href="why-life-is-such-painful-depressed-lazy-joyless-and-unhappy.html">depressed or unhappy life</a></li> <li><a href="#">parenting failures</a></li> </ul> </li> jquery html5 twitter-bootstrap drop-down-menu
Comments
Post a Comment