I was hoping to pick your brains about why my right-side menu won’t open. It used to but after I’ve been fiddling about adding scrolling lightboxes it’s not any more. I am unable to identify if this is a html / css / js problem as have tried to revert to previously used html / css and js when the menu does pop-up and this hasn't resolved. I have also tried cleaning up the HTML and CSS and neither has worked so I have reverted back to what I find tidier working with.
This particular site is for fun and is adapted from HTML5UP's examples, for which this particular site is available here: HTML5 UP Phantom with a working menu - which is how mine was prior to adding in the lightboxes.
I will attempt to include my code and css and would be very grateful for any ideas about what has gone wrong. I have tried to include a JSFiddle but cannot see how to add multiple different javascripts in - but would be happy to if someone can let me know how to do this! I am wondering if this is a problem of the new JS scripts I've added conflicting with those that the menu would use.
<!-- Header -->
<header id="header">
<div class="inner">
<!-- Logo -->
<a href="index.dwt" class="logo">
<span class="symbol"><img src="../images/logo1.jpg" alt="" /></span><span class="title">Single in Brisbane</span>
</a>
<!-- Nav -->
<nav>
<ul>
<li>Menu</li>
</ul>
</nav>
</div>
</header>
<!-- Menu -->
<nav id="menu">
<h2>Menu</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Subscribe</li>
<li>Giveaways</li>
<li>Advertise</li>
<li>Contact</li>
</ul>
</nav>
Thank you kindly.
Related
I recently bought a template to start pulling an application I am building into it. The navigation will have a lot of dynamic menus based on the user's roles so I would like to keep it in a separate file and pull it in versus putting it on every page and updating each one. When I do use ng-include, it seems like Jquery breaks or bootstrap.min.js doesn't recognize the menus.
<div ng-include="'/partials/structure/navigation.html'"></div>
When I do the above it pulls in the navigation, just the mobile menu of it's not clickable. No errors in the console either. On a full view, the menus are there and all the dropdowns work. When I don't use ng-include both full menu and mobile menu function as you would expect. So it seems like something with jQuery, but I am stumped where to look for this and Google didn't yield much to go off of.
<div class="menu-extras topbar-custom">
<ul class="list-inline float-right mb-0">
<li class="menu-item list-inline-item">
<!-- Mobile menu toggle-->
<a class="navbar-toggle nav-link">
<div class="lines">
<span></span>
<span></span>
<span></span>
</div>
</a>
<!-- End mobile menu toggle-->
</li>
<!-- Removed code to shorten things for you guys -->
</ul>
</div>
<!-- end menu-extras -->
Shortening this up as well.
<div class="navbar-custom">
<div class="container-fluid">
<div id="navigation">
<!-- Navigation Menu-->
<ul class="navigation-menu">
<li class="has-submenu">
<i class="ti-home"></i>Dashboard
</li>
<li class="has-submenu">
<i class="ti-paint-bucket"></i>UI Kit
<ul class="submenu">
<li>Buttons</li>
<li>Cards</li>
<li>Portlets</li>
<li>Checkboxs-Radios</li>
<li>Tabs & Accordions</li>
<li>Modals</li>
<li>Progress Bars</li>
<li>Notification</li>
<li>BS Elements</li>
<li>Typography</li>
</ul>
</li>
</ul>
</div>
Here is how I include everything before the tag.
<!-- jQuery -->
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script><!-- Popper for Bootstrap --><!-- Tether for Bootstrap -->
<script src="../js/waves.js"></script>
<script src="../js/jquery.slimscroll.js"></script>
<script src="../js/jquery.scrollTo.min.js"></script>
<!-- App js -->
<script src="../js/jquery.core.js"></script>
<script src="../js/jquery.app.js"></script>
<!-- Angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<!-- Controllers -->
<script src="../js/controllers/main.js"></script>
<!-- Bootstrap Javascript -->
<script src="../js/bootstrap.min.js"></script>
If you include ng-include it means after only the Angular application initialization directive will render the HTML content into the DOM. After that only the bootstrap.min.js can see the rendered menu HTML inside DOM. Therefore you need to add bootstrap.min.js after the angular code. Otherwise it won't see the HTML.
Therefore make sure you include js in following order
jquery.js
angular.js
angular application js code
bootstrap.min.js
I am enjoying learning to code but have a frustrating issue I know little about.
I used the following code to support the site including a scrolling nav bar:
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
.........
<div class="container navbar-container">
<h2>Scroll to a specific <br>restaurant:</h2>
<nav class="navbar navbar-default">
<ul class="nav nav-pills nav-stacked">
<li>2 WEST</li>
<li>13 NORTH</li>
<li>15 CHURCH</li>
<li><h5>BAILEY'S CAFE-$Deal!</h5></li>
<li>THE BARRELHOUSE</li>
<li><h5>BEEKMAN BAR & EATERY-$Deal!</h5></li>
.....
</ul>
</nav>
</div>
</body>
</div>
Then, to add popup box I added:
...
Hours
<div data-role="popup" id="westhours">
<h2>Monday-Thursday 11:00am - 11:00pm<br>
Friday & Saturday 11:00am - 12:00am<br>
Sunday 10:30am - 10:00pm<br>
Please note: Kitchen closes 1 hour prior to closing.</h2>
</div>
</li>
</ul>
With both code segments, the scrolling nav bar doesn't link to sections.
If I delete the nav bar code, the popup box works.
If I delete the original section, the popbox doesn't work.
I know I must have conflicting source and script code, but I can't find the right ones to delete so both the popup box and navbar function!
Please help!
take this working code from author of pluggin. Then add new tabs, rename them.
<ul style="font-family:'Ralway', Serif;" class="nav navbar-nav">
<li>HOME</li>
<li>ABOUT</li>
<li>EVENTS</li>
<li>SURRENDER STORIES</li>
<li><a href="http://www.reachoutcelebration.com/#globalstrategy" >GLOBAL STRATEGY</a></li>
<li>CONTACT</li>
<li>DONATE</li>
</ul>
I want to click on "donate" or "contact" links that are from the reachoutcelebration.com/tommy-barnett page and go to the "donate" or "contact" section of this webpage: http://www.reachoutcelebration.com. PLEASE ONLY CLICK THE CONTACT AND DONATE BUTTONS. I have verified they do not work. Clicking donate and contact it seemed to throw me in the middle of the http://www.reachoutcelebration.com site no matter where I but the anchor tags or the id attributes. The above code is revised.
The code on the reachoutcelebration.com page reads as follows:
<!-- Section Header -->
<div class="section-header container-fluid"><a name="donate"></a><!-- SEE ANCHOR HERE -->
<h3>GRAND TOTAL : $521,000</h3>
<div class="section-separator"><i class="fa fa-stop"></i></div>
<p style="text-align:center;">"Multiply" begins with you.</br>Own a piece of the ROC and join us in reaching our city, our region, and our world.</p>
</div><!-- Section Header /- -->
I already tried Expression Engine Stack over flow:
https://expressionengine.stackexchange.com/questions/38480/expression-engine-and-anchor-tags/38481#38481
Any ideas as to why it not working?
I think all you have to do is match names and URL's for <a name="donate"></a> and <a name="contact"></a> respectively:
<li>CONTACT</li>
<li>DONATE</li>
After much stress and tinkering, the anchors work, but I have to put them in ackward positions at the bottom of the viewport to "kinda" "sorta" go where I want them to go. It works, but it's cumbersome. Not sure what else to do here. guess we can close this.
FYI, the anchor tags I used just have the name in it, hence <a name="donate"> or <a name="contactus">
Add id attr to the div and test and it should work. I saw that anchor tag for donate has the href pointing to #donate but I think there's no div or section on the page with id donate.
<!-- donate id added to this div -->
<div class="section-header container-fluid" id="donate"><a name="donate"></a><!-- SEE ANCHOR HERE -->
<h3>GRAND TOTAL : $521,000</h3>
<div class="section-separator"><i class="fa fa-stop"></i></div>
<p style="text-align:center;">"Multiply" begins with you.</br>Own a piece of the ROC and join us in reaching our city, our region, and our world.</p>
</div><!-- Section Header /- -->
I recently updated the css/js files of the Materializecss design in my project from v0.97.5 to v0.97.8.
I thought it wouldn't make much of a difference but my SideNav is not working right anymore. When I click on the menu, it does slide out but the dark overlay is on the entire screen and I cannot click anything. This is what it looks like:
It looks like the 'sidenav-overlay' div with the opacity is above the sideNav. Also, I cannot click on any menu inside this sideNav.
The implementation of this is basically similar to what is mentioned in the documentation. I'm not sure what changed over here.
EDIT1:
My code -
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper light-blue lighten-1">
<ul id="slide-out" class="side-nav hide-on-med-and-down print-hidden">
<li>Upload<i class="material-icons right">cloud_upload</i></li>
<li class="divider"></li>
<li class="div-title">Admin</li>
<li>Users</li>
<li>Roles</li>
</ul>
<i class="material-icons">view_headline</i>
LOGO
</div>
</nav>
</div>
What fixed this was that my side-nav ul list was inside the navbar-fixed div. This wasn't an issue in the previous version but for some reason, this broke in the current 0.97.8 version.
Just moving the side-nav outside the navbar section fixed this for me. Hopefully this helps someone else in the same situation.
I am green in this area and I am trying to learn while I build a virtual resume for a website I can use to advertise my programming services (my strength lies more with C#, Java and similar languages :')
Something I think would look pretty cool, is if when you click on a link in my side-bar, the content on the page slides out and is replaced with the content on the new page that slides in, in the previous page' place.
I am a bit lost on how to achieve this though and if I have to do a per-page thing, or if I can make one general method in Javascript to take care of it. I am using jQuery and bootstrap.
var main;
main = function () {
$(".sidebar-nav a").click(function() {
<!-- Not sure what to do here -->
<!-- Pseudo Code -->
<!-- find out what element was pressed
slide out content on current page using animate();
slide in content from the element that was pressed using animate(); -->
})
}
$("document").ready(main);
The HTML:
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<h1>Brand</h1>
</li>
<li>
<a href="#">
Index
</a>
</li>
<li>
<a href="#">
About Me
</a>
</li>
<li>
<a href="#">
Resume
</a>
</li>
<li>
<a href="#">
Contact
</a>
</li>
</ul>
</div>
<!-- Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
Toggle Menu
</div>
</div>
</div>
</div>
</div>
Let me know if you need the CSS.
You should use an AJAX technology to seamlessly load another page's HTML contents inline into the document.
The best choice (in my opinion) for this situation is the jQuery function load(), due to it's simplicity and pure convenience. You can also send a callback function, it's easy to implement.
You could then easily implement a CSS animation using the animation attribute.