My side-nav should be loading collapsed and also showing a modal as in this fiddle:
Relevant code:
HTML:
<header class="text-center">
</header>
<div class="main_container">
<nav class="indigo darken-4">
<div class="nav-wrapper">
<h1>code.partners near you</h1>
<ul id="slide-out" class="side-nav fixed">
<li class="bold">Login with Github</li>
<li class="bold">Create a New Marker</li>
<li class="bold">Logout</li>
<i class="mdi-navigation-menu"></i>
</ul>
</div>
</nav>
<main>
{{!-- <div class="container text-center"> --}}
<div id="map_container">
<div id="map"></div>
<div id="message_box">
<ul id="messages"></ul>
<div id="messageInputBox">
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</div>
</div>
</div>
</div>
{{!-- </div> --}}
</main>
and my Javascript:
$(document).ready(function(){
console.log("interactive is linked and ready");
// Initialize collapse button
$(".button-collapse").sideNav({
menuWidth: 240, // Default is 240
edge: 'left', // Choose the horizontal origin
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
});
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
//$('.collapsible').collapsible();
});//end document.ready
my Heroku page:
http://coding-partners.herokuapp.com/home
My fiddle: https://jsfiddle.net/clwarnock/h7md1q3u/8/
I'm trying to get my side-nav to act more as in the fiddle:
Start collapsed
Display a modal when open
Editing for Danny Buonocore
When the viewport is adjusted to a small device size, there's no hamburger menu to open it back up again. I think there's a conflict somewhere that I'm not seeing.
The sidebar is designed to automatically be expanded when the window is large enough. This is known as responsive web design. If you make your browser smaller, you will see that it won't be expanded on load.
Related
I'm using semantic-ui and i'm having a problem with the sticky component.
I can get it to work in a normal page but I can't get it to work in a modal window.
I'm using :
HTML:
<div class="ui modal">
<div class="header">Title</div>
<div class="scrolling content">
<div class="ui sticky">
... content I want to have stick ...
</div>
JS:
$('.ui.sticky')
.sticky('refresh')
;
$('.ui.sticky')
.sticky({
type: 'fixed',
offset: 200
})
;
You're initializing sticky behavior before the element is even visible yet, cause you're using modal , to prevent that from happening, use onVisible callback to start sticky behavior like the following :
[DEMO]
JS(jQuery)
$( document ).ready(function() {
$('.ui.modal').modal('show').modal({
onVisible:$('.ui.sticky').sticky({
type: 'fixed',
offset: 200
}).sticky('refresh')
});
});
HTML
<div class="ui modal">
<div class="header">Title</div>
<div class="scrolling content" style="min-height:1000px">
<div class="ui sticky"> ... content I want to have stick ... </div>
</div>
</div>
I am a beginner at this stuff, and right now I am working on a project. To keep it simple, my project right now has a sidebar that has four different options. (Schedule, progress, add course, drop course). I want users to be able to click on this options (after expanding the side bar) and display the information from which ever of the four they clicked on. I want this information to display on the same page, not link to another page. I have done this before by having invisible pages and using a showpage function. This time around though it is coded differently with classes, and I'm not sure how to go about this. Any help is appreciated!
Note: I don't have any data for these 4 pages right now - I just want to set it up so they function right now. To keep it short: I'm asking what code I need and where to display information (Ex: "Here is your schedule") on the same page when Schedule is clicked.
<!doctype html>
<html>
<head>
<title>STUDENT SCHEDULER APP</title>
<link rel="stylesheet" type="text/css" href="ssaStyles.css">
<script src="jquery-3.2.1.min.js"></script>
<script>
$(function() {
console.log("jQuery was loaded");
});
$(document).ready(function() {
function toggleSidebar() {
$(".button").toggleClass("active");
$("main").toggleClass("move-to-left");
$(".sidebar-item").toggleClass("active");
}
$(".button").on("click tap", function() {
toggleSidebar();
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
toggleSidebar();
}
});
});
</script>
</head>
<body>
<div id="header">
<h1>Welcome!</h1>
</div>
<div class="nav-right visible-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
<main>
<nav>
<div class="nav-right hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
</main>
<div class="sidebar">
<ul class="sidebar-list">
<li class="sidebar-item">Schedule
</li>
<li class="sidebar-item">Progress
</li>
<li class="sidebar-item">Add a course
</li>
<li class="sidebar-item"><a href="#" class="sidebar-anchor">Drop a
course</a></li>
</ul>
</div>
</body>
</html>
Its really simple all you have to do is create sections and these sections will be linked to your link, let me show you how.
<html>
<head>
<title>Example</title>
</head>
<body>
<!--create the links but add a # sign before you give them the section names-->
<div class="side-nav">
About
Contact
</div>
<!--Create an id with the same name as the link href source but leave out the # sign-->
<!--this is the about section-->
<div id="about">
<h1>Hello</h1>
</div>
<!--this is the contact section-->
<div id="contact">
<p> done</p>
</div>
</body>
</html>
the name you give your link should be the same as the div id name, and you will have to disable overflow in CSS if you want to....hope it made sense, if you need more help just ask.
I have three tabs on the page.
<!-- Tabs -->
<div class="mdl-layout__tab-bar">
Plots
Plots data
Report
</div>
I need to re-draw plots when Plots tab is selected. I've tried to onclick="redraw_plots();" to the Plots tab, but function is called too fast before tab is activated. Any way to get an event when this tab activates?
Thank you.
It's happen because element inline event are the first event to be executed.
To Execute after MDL tab event you can do like this:
With Javascript Vanilla:
First add an id on link
<a id="#plots-tab" href="#plots-tab" class="mdl-layout__tab is-active"">Plots</a>
Second add an event listener
document.getElementById("#plots-tab").addEventListener("click", function(){
redraw();
});
Or with Jquery:
Add on event listener on element
$('a[href="#plots-tab"]').on('click',function(){
redraw();
});
For me it was not enough to hook to the click event.
A timeout of at least 0 milliseconds was necessary otherwise the content display it will still be set to none (tested on Chrome) and any drawing of your own that requires width calculations might fail.
Check the attached snippet and verify that without setTimeout, on the click event the tab content display is set to none and not 'block'. MDL must play an animation for smooth transition that cause absolute position drawing issues.
$('.mdl-layout__tab-bar').children().each(function(){
$(this).on('click', function(){
var timeout = 0;
var targetContent = this.getAttribute('href');
setTimeout(function(){
if($(targetContent).css('display') == "block"){
console.info("tab content is now visible after a timeout of %s millisenconds", timeout);
}
else{
console.warn("increase timeout to make sure that content is visible");
}
}, timeout);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<!-- Simple header with scrollable tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
<div class="page-content">
Tab 1
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content">
Tab 2
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
<div class="page-content">
Tab 3
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-4">
<div class="page-content">
Tab 4
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-5">
<div class="page-content">
Tab 5
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-6">
<div class="page-content">
Tab 6
</div>
</section>
</main>
</div>
Another solution without adding anything special to the a tags would be
$("a.mdl-layout__tab").click(event => {
console.log("Tab switched!");
});
I am a newbie in meteor and also in jQuery.
I am trying to explore meteor with multi level push menu from http://tympanus.net/Development/MultiLevelPushMenu/ ..
The scenario is simple, so I have a navigation menu (ex: Home, About Me, etc) on the left side and a container in right side. When I click the navigation menu, I want to show a template in my container side.
Just an example if I click "Home" in my navigation menu, then the container side will display Home Template. Or, if I click "About Me" menu, then the container side will display AboutMe Template.
I want to make it with a reactive menu using meteor session.
I can't give all my code here because it's too long, so here is my essential code:
.html:
<template name="MainTemplate">
<div class="container">
<div class="mp-pusher" id="mp-pusher">
<h2 style="margin-left: 20px">Open/Close Menu</h2>
<!-- mp-menu -->
<nav id="mp-menu" class="mp-menu">
<div class="mp-level">
<ul>
<li><a class="icon icon-shop" href="/MainTemplate">Home</a></li>
<li><a class="icon icon-search" href="#" id="ViewGrid">View in Grid</a></li>
</ul>
</div>
</nav>
<!-- /mp-menu -->
{{>scroller}}
</div><!-- /pusher -->
</div><!-- /container -->
</template>
<template name="scroller">
<div class="scroller"><!-- this is for emulating position fixed of the nav -->
<div class="scroller-inner">
{{#if currentViewIs "GridHeroes"}}
{{>GridHeroes}}
{{else}}
{{>logo}}
{{/if}}
</div><!-- /scroller-inner -->
</div><!-- /scroller -->
</template>
<template name="logo">
<div>
<img src="../marveldc.jpg"/>
</div>
</template>
.js :
Template.scroller.currentViewIs = function(view) {
if(Session.get('currentView') == view)
return true;
return false;
};
Template.MainTemplate.events() ({
'click #ViewGrid':function(event, template){
alert('ab');
Session.set('currentView', 'GridHeroes');
}
});
My problem is when I click the link on navigation menu, it cannot render a new template in container side. Even my alert can't show too.
Any idea how to make it work?
I'm trying to have a one page solution with jQuery-One-Page-Nav for highlighting menu links when i reach some "sections" in the page (and click to scroll to respective sections).
Inside this sections i have some posts like the code
<body>
<nav>
<ul class="menuslides">
<li class="item-1">
<a href="#section-1" >One</a>
</li>
<li class="item-2">
<a href="#section-2" >Two</a>
</li>
...
</ul>
</nav>
<div id="wrapper">
<div id="wrap">
<section id="section-1">
<div class="post" id="item-slide-1">img</div>
<div class="post" id="item-slide-2">img</div>
</section>
<section id="section-2">
<div class="post" id="item-slide-3">img</div>
<div class="post" id="item-slide-4">img</div>
<div class="post" id="item-slide-5">img</div>
</section>
...
<section id="section-10">
<div class="post" id="item-slide-31">img</div>
...
</section>
</div>
<div id="buttons">
<div id="button" class="goto-prev">Prev</div>
<div id="button" class="goto-next">Next</div>
</div>
</div>
<script>
jQuery(document).ready(function() {
jQuery('.menuslides').onePageNav();
});
jQuery(function( $ ){
$('#wrapper').serialScroll({
target:'#wrap',
items:'.post',
prev:'div.goto-prev',
next:'div.goto-next',
axis:'y',
duration:700,
onBefore:function( e, elem, $pane, $items, pos ){
e.preventDefault();
if( this.blur )
this.blur();
},
onAfter:function( elem ){
}
});
});
</script>
</body>
I'm happy with the jQuery-One-Page-Nav, it works very well and i can navigate through "sections" with the nav menu.
But i need to add two button or two arrows that they work like a prev-next link scrolling the page through my posts class="post"
I'm using
https://github.com/davist11/jQuery-One-Page-Nav
and
https://github.com/flesler/jquery.serialScroll
with no weird changes to the code (only renamed ids and classes) but I can not get them coexist together: it works only one of them!
Is there any solution to make them co-exist, or is there a snippet of code that will enable me to have these two functions at the same time?