I have a simple nav-bar designed with flexbox like this :
<div id="nav-bar">
<div class="nav-left">
<div class="logo-contain">
<img class="red visible" src="image01">
<img class="white transparent" src="image02">
</div>
</div>
<div class="nav-center">
<ul>
<li class="color01">01</li>
<li class="color02">02</li>
<li class="color03">...</li>
</ul>
</div>
<div class="nav-right">
<div class="box-panier"></div>
</div>
</div>
I made a pretty simple script that change the color of my nav-bar when scrolling and it's working fine. The problem is that when that script is called, the nav-bar does change like it's supposed to do but the img element move to the wrong place. It's supposed to be centered in the nav-left block but it's jumping to the right of the block. But if I open the chrome devtools and just change anything in the css like unchecking/cheking any css propretie, my img element is updating and go back in the right place, centered. So it looks like chrome isn't updating css well when my script is called.
Here is the exact same code in jsfiddle, exept it's working well here. I really don't know what's wrong because with the exact same code on my site is not working well.
> JSfiddle code
Related
I am trying to use JS Affix to keep 2 blocks in a sidebar column staying fixed on the page.
Upon scrolling, the width of the sidebar is expanded a bit and the expanded portion overlaps the main body column.
I have tried manually setting div widths and using percentages, but all changes I make end up having same behavior.
Here is the relevant code:
<div class="menu block tile-default" id=sidebarmenu" data-spy="affix" data-offset-top="195" data-offset-bottom="300" style="border:0px;">
<img src="/img/sidebar-top.png" class="img-responsive" alt="sidebar image">
<div class="pad">
<ul class="nav nav-pills nav-stacked">
#include('partials/menu')
</ul>
</div>
<div style="background-color: white; height: 10px; border:0px"></div>
<div class="pad" style="border: 4px solid orange; background-color: #1d6899; color: ghostwhite">
<a href="https://zoom.us/webinar/register/Pt9LgDTBR828OXIHOfTLPQ" class="thumbnail" target="_blank">
<img class = "img-responsive" src="/img/img.png" alt="...">
<div class="caption">
<h5 class="text-center">Some Caption</h5>
</div>
</a>
</div>
</div>
You can see what I am talking about here:
https://guitar-dreams.com/guitar-lesson/triad-arpeggios-2-strings/20
There it might be easier to follow the CSS as well.
Notice how when you scroll down, the navigation menu and the block below it expand to the right a bit and overlap the main body. This problem only manifested after I added the 2nd block below the menu.
I have read a lot about strange affix behavior so maybe this is just instance where affix is not ideal solution. In any case, wondering if there is some glaring problem causing this that is readily fixed. Me being a guitarist trying to do some basic coding I am sure I am overlooking something obvious!
Thanks!
Brian
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 writing a phonegap application using Angular's ngRoute as an MVC. This all works beautifully, except for my top bar which includes the trigger button for the slide out menu. as it sits now, the top bar has the same title for every page, so to fix this I moved the top bar inside of the route view, which now stops my slide out menu from working.
How can i get the javascript trigger to actually run properly inside a route view (i understand this has to do with the page, and all of its JS, rendering before the route view is actually loaded) and I also would LIKE to execute other JS in a route view as well. for example, one of the views handles GPS location and NFC chip reading and i would love to only execute those scripts when that view is active rather than all the time, which chews up battery listening for NFC chips and GeoData even when that view is not in use.
if this isnt possible or is a serious pain then id just as soon go back to conventional page changes instead of views, im just hoping that there is a way to do this.
Here is the relevant code illustrating the issue:
index.html:
<script type="text/javascript">
$(window).load(function() {
$('#menutoggle').toggle(function() {
$('#right').animate({
left: 200
});
}, function() {
$('#right').animate({
left: 0
});
});
});
</script>
<div id="menu">
<span class="logo-bar"></span>
<ul id="sidenav">
<li>
<a href="#/Checkin">
<img src="img/home.png">Check In
</a>
</li>
<li>
<a href="#/logout">
<img src="img/logout.png">Logout</a>
</li>
</ul>
</div>
<div class="content view-animate-container">
<div id="contentcontroller" ng-view class="view-animate wrapper">
</div>
</div>
CheckIn.html
<div id="right">
<div id="menubar">
<div id="menutoggle">
</div>
<div class="title">
Check In
</div>
</div>
</div>
Now the toggle button works fine on whatever view is initially loaded, however as soon as a page change occurs the menu toggle simply stops.
is there any way to remedy this?
I have a pretty average jQuery Mobile app. On the bottom there is a navbar with icons and text.
This is how it should look
but when I tap/click on the page it toggles to this
To save myself some repetition, I've been appending the same footer to each page using this basic script.
$(function ()
{
$("div[data-role='page']").append($("#footer").html());
$("body").trigger('create');
});
And here's the HTML.
<div class="hidden" id="footer">
<div data-role="footer" data-position="fixed" data-id="footer">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Maps</li>
<li>Rules</li>
<li>Schedule</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
I believe this script is the cause of this issue. Any ideas for how to fix this behavior?
EDIT: In inspecting the DOM I found that a class called "ui-fixed-hidden" is being toggled on the data-role="footer" div when I click.
It turns out that just because my template footer div was nested in another div with "display: none" doesn't mean that jQuery Mobile wasn't using that element. As such, I had multiple footers which created weird behaviors.
I resolved this by moving my template footer to a seperate html file and then loading it in on page start.
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