My project has a sidebar that has four different options. (Schedule, progress, add course, drop course).
I want users to be able to click on these options (after expanding the side bar) and display the information from which ever of the four they clicked. 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.
Note: I don't have any data for these 4 pages now - I just want to set it up so they function.
To keep it short: 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>
I am a beginner.
Related
Okay, so I made an overlay menu in Bootstrap. Problem is, I'm trying to replace the .ion-drag class with .ion-close when the modal is open, and have it go back to .ion-drag when the modal is closed. How do I do that in jQuery? Every solution on the internet doesn't work so far.
My website: https://filthdemo.myshopify.com
Try this, keep only .ion-drag before opening modal
$('.boxed a').toggleClass('ion-drag is-closed')
add these lines in <head>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script>
$('#toggle').click(function() {
$(this).toggleClass('toggle-active');
$('#overlay').toggleClass('nav-active');
});
</script>
and change your <header> as
<header>
<div class="navbar-header">
<div class="toggle-button" id="toggle">
<span class="bar top"></span>
<span class="bar middle"></span>
<span class="bar bottom"></span>
</div>
</div>
<nav class="overlay" id="overlay">
<ul>
<li>Our Story</li>
<li>Events</li>
<li>Information</li>
<li>ARTICLES</li>
<li>HELP</li>
</ul>
</nav>
</header>
Found something that i cant understood.
Had a side menu with semantic ui, the dropdown menu from the side menu is not working when i host the file locally, but it is working fine if i put it in jsfiddle
Here is the working jsfiddle https://jsfiddle.net/7rcrx8c4/
index.html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
</head>
<body>
<div id="main" class="ui container">
<div class="ui top attached menu">
<a class="item" id="menu"><i class="sidebar icon"></i>Menu</a>
<div class="right menu">
<a class="item"><i class="user icon"></i>Welcome : Foo</a>
</div>
</div>
<br />
</div>
<div class="ui left vertical sidebar menu">
<div class="item">
<i class="grid layout icon"></i>Menu
</div>
<!-- Master menu -->
<div class="ui dropdown item">
<span class="text"><i class="book icon"></i></span>
<i class="dropdown icon"></i>Master
<div class="menu">
<a class="item">a</a>
<a class="item">b</a>
</div>
</div>
<!-- End master -->
</div>
<script>
$('.ui .dropdown').dropdown({
on: 'hover'
});
$('.ui.left.sidebar').sidebar({
transition: 'overlay'
});
$('.ui.left.sidebar')
.sidebar('attach events', '#menu');
</script>
</body>
</html>
style.css
.ui.sidebar {
overflow: visible !important;
}
Can some one point me where i make a mistake?
Found out the reason,
style.css should be loaded after semantic.css
Thanks all for the time
Alright, I followed all the instructions on the page, or so I thought, but I still can't get the Off Canvas to work in my Foundation?
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<script>
$(document).foundation();
</script>
That's how I'm instructed to put it in, as per the website. http://foundation.zurb.com/docs/components/offcanvas.html
Or so I thought? Also
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>The Psychohistorians</li>
<li>...</li>
</ul>
</aside>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Users</label></li>
<li>Hari Seldon</li>
<li>...</li>
</ul>
</aside>
<section class="main-section">
<!-- content goes here -->
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
That's all done as per instructed?
What I end up with is the menu showing, but when I click on the button for the off canvas to pop, it doesn't pop?
EDIT
Alright, so I tried what you suggested, and it did pop. BUUUT rather than pop out from the side, it popped, shoving everything DOWN, and made this tiny scroll bar?
Alright, this was what it looked like, upon entering your code. THen...
When I clicked it, this happened...
See all that white space? The heading Welcome to Foundation is one mouse scroll down. See the little bitty scroll bar next to the popped menu? =/
Ok i got it.
Move $(document).foundation(); to onload in the body tag. Or at least put it last inside body tags. You can leave the .js references inside head tags. I did this way:
<html>
<head>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<link rel="stylesheet" href="css/foundation.css">
</head>
<body onload="$(document).foundation();">
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>The Psychohistorians</li>
<li>...</li>
</ul>
</aside>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Users</label></li>
<li>Hari Seldon</li>
<li>...</li>
</ul>
</aside>
<section class="main-section">
<!-- content goes here -->
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
</body>
I hope it works!
PD: It's really frustrating that i had 2 comments trying to correct my mistake, and zero answers trying to solve the question.
I would suggest copy and pasting all the following code into a brand new html page and checking it. Then you can either just build off it or figure out what the problem is on your old code.
Make sure that all the linked files (css and js) are getting loaded. You might need to change the paths on the example. It is absolutely essential to make sure they are getting accessed. Use your web browser inspector to see if your getting any 404 (not found) errors.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="css/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>The Psychohistorians</li>
<li>...</li>
</ul>
</aside>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Users</label></li>
<li>Hari Seldon</li>
<li>...</li>
</ul>
</aside>
<a class="exit-off-canvas"></a>
<div class="row">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="panel">
<h3>We’re stoked you want to try Foundation! </h3>
<p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
<p>Once you've exhausted the fun in this document, you should check out:</p>
<div class="row">
<div class="large-4 medium-4 columns">
<p>Foundation Documentation<br />Everything you need to know about using the framework.</p>
</div>
<div class="large-4 medium-4 columns">
<p>Foundation on Github<br />Latest code, issue reports, feature requests and more.</p>
</div>
<div class="large-4 medium-4 columns">
<p>#foundationzurb<br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
just add this CSS code:
.inner-wrap {
min-height: 100vh;
}
I'm experiencing issues with the drawer in my asp.net mvc mobile application. After a lot of hassle (and possibly a few bugs in the asp.net mvc helpers) I decided to roll back to a javascript layout for my app.
The only problem I have is that I've implemented a drawer-menu that does not seem to work properly.
For some reason, Kendo generates a # in the middle of my url, causing the drawer to not show.
This is the url when it doesn't work:
http://localhost:55683/#/UnitDetails/Index/2
And here it is when it works:
http://localhost:55683/UnitDetails/Index/2#/
Here's my markup in my shared _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="#Url.Content("~/Content/kendo/2013.2.716/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2013.2.716/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/kendo/2013.2.716/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/2013.2.716/kendo.mobile.min.js"></script>
<link href="#Url.Content("~/Content/kendo/2013.2.716/kendo.dataviz.flat.min.css")" rel="stylesheet" type="text/css" />
</head>
<body>
#RenderBody()
<!--Main Layout -->
<div data-role="layout" data-id="mainLayout">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<div data-role="footer">
<div data-role="tabstrip">
<a data-icon="action" href="~/Logout">Logout</a>
</div>
</div>
</div>
</body>
</html>
And here's the Index.cshtml of my UnitDetails-view:
<!-- Drawer layout -->
<div data-role="layout" data-id="drawer-layout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<span data-role="view-title"></span>
#*<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>*#
<a data-align="right" data-role="backbutton">Back</a>
</div>
</header>
</div>
<div id="drawer-home" data-role="view" data-layout="drawer-layout" data-title="Unit Details">
<!-- Content removed for readability -->
<div data-role="footer">
</div>
</div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['drawer-home']">
<ul data-role="listview" data-type="group">
<li>Mailbox
<ul>
<li data-icon="inbox">Inbox</li>
</ul>
</li>
</div>
<script>
window.app = new kendo.mobile.Application(document.body, {
layout: "drawer-layout",
transition: "fade",
skin: "flat",
hideAddressBar: true
});
</script>
There was a bug with the kendo mobile drawer 2013.2.918 and was fixed with a later internal build. Try some debugging by removing the data-views attribute from the drawer. But this will cause the drawer to be displayed in all views via swipe.
i'm trying to configure a slide-panel jqm 1.3.1. I always created "one page-jqm"-Pages
one index.html and several
Now im trying to get the slide panel to work but when i add a second page, the page stuck in loading screen.
My code will explain what i mean:
<!DOCTYPE html>
<html lang="de">
<head>
...
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<!-- jQuery and jQuery Mobile -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<!-- Page 1 -->
<div data-role="page" id="page1">
<div id="header" data-theme="c" data-role="header">
<a id="men" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
</a>
<h3>Body Change</h3>
</div>
<div id="content" data-role="content">
Test123
</div>
<div id ="footer" data-role="footer">
footer
</div>
<div data-role="panel" id="menue" data-display="push" data-theme="a">
<div data-role="controlgroup">
<h2>Menü</h2>
Home
Erlaubte Lebensmittel
Verbotene Lebensmittel
Frühstück
</div>
</div>
<div>
<!-- Page 2 -->
<div data-role="page" id="page2">
<div id="header" data-theme="c" data-role="header">
<a id="men" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
</a>
<h3>Body Change</h3>
</div>
<div id="content" data-role="content">
Test123
</div>
<div id ="footer" data-role="footer">
footer
</div>
<div data-role="panel" id="menue" data-display="push" data-theme="a">
<div data-role="controlgroup">
<h2>Menü</h2>
Home
Erlaubte Lebensmittel
Verbotene Lebensmittel
Frühstück
</div>
</div>
<div>
I thank you all for your help in advance
cracker182
EDIT: browser console shows :
Uncaught TypeError: Cannot read property 'options' of undefined
EDIT2: I forgot to Close the page Divs, thank you very much Omar
I stripped your footer menu blocks and if you look at this structure it will probably help you out to why your page is not navigating to the next page... Be sure to take a look at the naming conventions as well pertaining to the anchor tags...
<!DOCTYPE html>
<html lang="de">
<head>
...
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<!-- jQuery and jQuery Mobile -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<!-- Page 1 -->
<section id="firstpage" data-role="page">
<div id="header" data-theme="c" data-role="header">
<a id="menu" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info"></a>
<h3>Body Change</h3>
</div>
<div id="content" data-role="content">
<p>This is page 1</p>
<p>Go to second page</p>
</div>
<div id ="footer" data-role="footer">
footer
</div>
<div>
</section>
<!-- Page 2 -->
<div data-role="page" id="secondpage">
<div id="header" data-theme="c" data-role="header">
<a id="menu" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
</a>
<h3>Body Change</h3>
</div>
<div id="content" data-role="content">
this is page 2
<p>Go to first page</p>
</div>
<div id ="footer" data-role="footer">
footer
</div>
<div>