NEWER
So the scrolling is working now... But it's fixed to the top of the page. I need it to be in the correct position (next to the content) and then start scrolling with at it's current position with the content.
I'm trying to get my sidebar to scroll like this one here -> http://getbootstrap.com/2.3.2/components.html
The website is http://www.katyasarmiento.zzl.org (a free hosted site for now)
OLDER
I'm having a really hard time with this. I've looked up everything I could and I still can't figure it out. I got it to work for a while with a tutorial I found, but it didn't work well with ScrollSpy. So I'm trying to use Bootstrap's Affix.
I'm new to javascript / jquery so if anyone could look over my website and check to see what I'm doing wrong.
The ScrollSpy is working right now I think, I just can't get the sidebar to scroll with the page.
ALRIGHT I got it to work!
What I did was change the following...
<div class="bs-docs-sidebar span3">
<ul class="nav nav-list bs-docs-sidenav affix-top">
To...
<div class="bs-docs-sidebar span3">
<ul class="nav nav-list bs-docs-sidenav affix" data-spy="affix" data-offset-top="255" data-offset-bottom="200">
So I put the data-spy and data-offset on the "bs-docs-sidenav" class, changed the script to that class also instead of the "bs-docs-sidebar" class.
Then I edited the css of "affix-top", "affix", and "affix-bottom" and it works very well :)
My original problem was referring to the sidebar class instead of the sidenav class, because that's what my affix CSS was working on.
Hope this helps anyone that was having a similar issue to mine :)
What helped me with this were these tutorials.
In ul element on your page you have written-
<ul class="nav nav-list bs-docs-sidenav">
Where you have used nav nav-list bs-docs-sidenav classes add one more class affix-top. Then it will be -
<ul class="nav nav-list bs-docs-sidenav affix-top">
And remove the class affix-top from this line, which is the parent node of your ul element-
<div class="bs-docs-sidebar span3 affix-top" data-offset-top="50" data-spy="affix">
And write this line like-
<div class="bs-docs-sidebar span3">
Related
I am trying to close the nav dropdown menu on scroll but I don't think I am targeting the class on the button correctly with jQuery as it is not working.
I am trying to target the .nav-menu-list class.
main.js and index.html
$(window).on('scroll', function() {
$('.nav-menu-list').prev().dropdown("toggle");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header" class="navbar-toggleable-md sticky clearfix fixed ">
<header id="topNav">
<div class="container">
<div class="row">
<nav>
<ul class="desktop-nav-links ">
<li class="list-group-item" >
Home
</li>
<li class="list-group-item">
<button class="dropdown-toggle nav-menu-list" type="button" id="" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu " aria-labelledby="content"> Content </div>
</li>
</ul>
At first I tried using $('.dropdown-toggle').prev().dropdown("toggle"); which worked and closed the menu on scroll. The issue this gave me though was that it also targeted all of the dropdown-toggles on the page causing things to break.
Any suggestions will be really appreciated, thank you.
Update
After trying a few different ways of targeting the open dropdown menu to close on scroll, I found the best way for me was to explicitly target the class when the menu dropdown is open using -
$('li.show .nav-menu-list').dropdown("toggle");
So it is going to target the dropdown that is open.
Thank you everyone for helping me with this issue.
To target a class in jQuery, you must specify a class selector:
$('.nav-menu-list').prev().dropdown("toggle");
Note the leading . in front of nav-menu-list, which you were missing.
Thank you everyone for helping me with this issue.
After trying a few different ways of targeting the open dropdown menu to close on scroll, I found the best way for me was to explicitly target the class when the menu dropdown is open with
$('li.show .nav-menu-list').dropdown("toggle");
So it is only going to be on the dropdown that is open.
I will add as an update to my question.
I hope this may also help anyone else with similar issues
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 having an issue which i would like to solve. i have created a menu for an ecommerce site. The menu works fine. Unfortunately i cannot copy the whole code here cos it is too much but i made a short version and a picture to present the structure of the menu.
The main concept is when a button is clicked on the main nav a dropdown menu opens which has 2 columns. The left site has further buttons and the right side is where the div containers will be shown depending on the active list item on the left side. That is where the issue occours.
Because the container opens by hovering on the list item not by clicking it. When the mouse is over the li it gets highlighted but when the mouse is out the highlight color disappears.
I would like to keep the active li item highlighted until the mouse hovers on another li item.
Somehow i should get the row(item) which is hovered, change the css class for highlighted and keep until another row gets hovered. Then remove the css class and do the same with the new active list.
Hope i mad it clear. :-)
here are the html codes and the structure.
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="button1"> </a>
<div class="dropdown-menu">
<div class="col-sm-3">
<ul class="submenu-list">
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div class="col-sm-9" id="submenubox1">
<h3>Subbox Title</h3>
<div>Content</div>
</div>
<div class="col-sm-9" id="submenubox2">
<h3>Subbox Title</h3>
<div>Content</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
The code im trying is the following using the menu.aim javascript:
<script src="jquery.menu-aim.js" type="text/javascript"></script>
<script>
var $menu = $(".dropdown-menu");
$menu.menuAim({
activate: activateSubmenu,
deactivate: deactivateSubmenu
});
function activateSubmenu(row) {
var $row = $(row);
// Keep the currently activated row's highlighted look
$row.find("a").addClass("maintainHover");
}
function deactivateSubmenu(row) {
//remove the row's highlighted look
$row.find("a").removeClass("maintainHover");
}
</script>
however this code is not working. Im am not sure if this would be the right way to solve this thought.
Also i have tried to use to css code:
ul.class li:hover{
background-color: red !important;
}
But this is not working either.
Here is a similar example what iam trying to achieve.
https://rawgit.com/kamens/jQuery-menu-aim/master/example/example.html
Any help would be appropriated.
Thank you!
Use jQuery to add an active class to the hovered item -
$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(this).parent().find('.submenu-list-item.active').removeClass('active');
$(this).addClass('active');
});
This will add active class only when hovered over items of the same parent i.e. same submenu
Somewhat I can understand your question. I have tried this plugin. It may satisfy your need.
Bootstrap Submenu
Thanx for all replies.
With the help of Rohit answer I made it work.
However I had to change a line.
$(this).parent().find('.submenu-list-item.active').removeClass('active');
this line was not working for me unfortunatelly.
It did not remove the highlighted item once another got hovered on. Instead of this I removed the class from all items(a) in the ul.
$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(".submenu-list a").removeClass();
$(this).addClass('active');
});
Anyway thanks for the bootstrap answer as well. I will learn some new stuffs from there.
This carousel that I am using stops working, one could drag / swipe a new slide into view by dragging / swiping the previous slide out, once I add an tag inside one of the slides.
The css, html, and js that make up the carousel is as follows:
EDIT: I could not replicate the problem in JSFiddle so here are links to a working version without the html content in one slide and the non-working version with.
Working: https://dl.dropbox.com/u/270523/help/carousel/carousel.html
Non-Working: https://dl.dropbox.com/u/270523/help/carousel/carousel2.html
Here is the non-working html:
<body>
<div id="carousel">
<ul>
<li class="pane1"><h2>Swipe...</h2><object data="http://stackoverflow.com"><iframe src="http://stackoverflow.com" /></object></li>
<li class="pane2"><h2>...or drag...</h2></li>
<li class="pane3"><h2>...or swipe...</h2></li>
<li class="pane4"><h2>...or drag...</h2></li>
<li class="pane5"><h2>...or swipe...</h2></li>
</ul>
</div>
</body>
The working html just has text in the first slide instead of the object tag.
Console error: "Load denied by X-Frame-Options: stackoverflow.com does not permit cross-origin framing."
I'm guessing that that's breaking the plugin altogether.
I've got a page with a three column layout (main nav on the left, center console in the middle and specific page options/navigation on the right). Until now I've been using jQuery UI's Tabs widget in the center console area for one of my pages.
What I'd like to do is separate the tabs (putting them in the right hand column) whilst maintaining the contents position in the middle. Like this:
<div id="center_console">
<div class="tabs_container" id="pets"></div>
<div class="tabs_container" id="family"></div>
<div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
<div id="tabs">
<ul>
<li>Pets</li>
<li>Family</li>
<li>Bio</li>
</ul>
</div>
</div>
So far however I've been unable to find a way to use jQuery UI to do this (it seems to require that tabs and content be placed within the same container).
I think what you need to do is use the 'select' method
So you would bind your links to the tab you want to click
<div id="center_console">
<div class="tabs_container" id="pets"></div>
<div class="tabs_container" id="family"></div>
<div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
<div id="tabs">
<ul>
<li id="pets">Pets</li>
<li id="family">Family</li>
<li id="bio">Bio</li>
</ul>
</div>
</div>
$(function(){
//set-up your tabs as normal first
$('#bio').click(function(){
$('#center_console').tabs("select", '#bio');
});
});
You may need to have some links set-up as tabs in the center_console as well, but you could use CSS to hide these. I'm not 100% sure on how tabs() works under the hood. I managed to get this working by hacking around the jqueryui demo with firebug, but for some reason I couldn't get the tabs to work in jsfiddle. If you can set-up an example in that I'm happy to edit it to show you what I did
Thanks to a useful comment below, I realised that I'm not following best practice here. I've set-up a fiddle that should achive what you want ( all be it you will need to style it correctly). It can be found here http://jsfiddle.net/GKNC9/1/
thanks