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>
Related
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.
I am having troubles with Isotope on Navbar. I would like the content to be switched when selecting different Navbar items.
Not sure what do I have to do, this is simplified version of what I have for now.
I guess I need some Javascript that will handle the switching from navbar's href's to isotope's classes? Is this possible like this?
HTML Navbar
<nav class="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
</div>
<div class="collapse navbar-collapse navbar-main-collapse" id="#options">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
</div>
</nav>
HTML Content
<section class="main-content">
<div class="isotope-elements-grid" id="isotope-elements-grid">
<div class="isotope-element home">
<p>Some random text on Home</p>
</div>
<div class="isotope-element about">
<p>Some random text on About</p>
</div>
</div>
</section>
Javascript
$('.isotope-elements-grid').isotope({
// options
itemSelector: '.isotope-element',
layoutMode: 'fitRows'
});
I try to use this on my web app http://tympanus.net/codrops/2014/09/02/tab-styles-inspiration/comment-page-1/#comments it works fine, but now what I need is to load a new page and select the fine tab.
So instead of this dynamic stuff:
<section>
<div class="tabs tabs-style-topline">
<nav>
<ul>
<li><span>Home</span></li>
<li><span>Deals</span></li>
<li><span>Upload</span></li>
<li><span>Work</span></li>
<li><span>Settings</span></li>
</ul>
</nav>
<div class="content-wrap">
<section id="section-topline-1"><p>1</p></section>
<section id="section-topline-2"><p>2</p></section>
<section id="section-topline-3"><p>3</p></section>
<section id="section-topline-4"><p>4</p></section>
<section id="section-topline-5"><p>5</p></section>
</div><!-- /content -->
</div><!-- /tabs -->
</section>
I'd like to have
<section>
<div class="tabs tabs-style-topline">
<nav>
<ul>
<li><span>Home</span></li>
<li><span>Deals</span></li>
<li><span>Upload</span></li>
<li><span>Work</span></li>
<li><span>Settings</span></li>
</ul>
</nav>
<div class="content-wrap">
<div layout:fragment="content">
</div>
</div>
<!-- /content -->
</div>
<!-- /tabs -->
</section>
I want this to reload my page and select the tab I clicked. I think it's not a big deal to do but I'm not verry powerful in web stuff.
Thank's
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 am trying to use the metro UI css library but I can't figure out why my navbar css is not working.
Here's my html file code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>TelePrint Blog</title>
<link rel="stylesheet" href="http://localhost/teleprintblog/assets/css/metro-bootstrap.css">
<script src="http://localhost/teleprintblog/assets/js/jquery.js"></script>
<script src="http://localhost/teleprintblog/assets/js/metro.min.js"></script>
</head>
<body>
<nav class="navigation-bar dark fixed">
<nav class="navigation-bar-content">
<div class="element">
<a class="dropdown-toggle" href="#">METRO UI CSS</a>
<ul class="dropdown-menu" data-role="dropdown">
<li>Main</li>
<li>File Open</li>
<li class="divider"></li>
<li>Print...</li>
<li class="divider"></li>
<li>Exit</li>
</ul>
</div>
<span class="element-divider"></span>
<a class="element brand" href="#"><span class="icon-spin"></span></a>
<a class="element brand" href="#"><span class="icon-printer"></span></a>
<span class="element-divider"></span>
<div class="element input-element">
<form>
<div class="input-control text">
<input type="text" placeholder="Search...">
<button class="btn-search"></button>
</div>
</form>
</div>
<div class="element place-right">
<a class="dropdown-toggle" href="#">
<span class="icon-cog"></span>
</a>
<ul class="dropdown-menu place-right" data-role="dropdown">
<li>Products</li>
<li>Download</li>
<li>Support</li>
<li>Buy Now</li>
</ul>
</div>
<span class="element-divider place-right"></span>
<a class="element place-right" href="#"><span class="icon-locked-2"></span></a>
<span class="element-divider place-right"></span>
<button class="element image-button image-left place-right">
Sergey Pimenov
<img src="images/211858_100001930891748_287895609_q.jpg"/>
</button>
</nav>
</nav>
<header class="headerr row">
<div class="col-md-6" style="border:3px solid #F00;">
<img src="http://localhost/teleprintblog/assets/img/logo.png"
class="img-responsive" alt="logo"/>
</div>
<div class="col-md-6" style="border:3px solid #F00;">
</div>
</header>
<section class="row">
<div class="col-md-1 col-xs-offset-1"
style="border:3px solid #00F;z-index:3;position:relative;">
asdasda
</div>
</section>
</body>
</html>
The UI is not appearing properly for the nav-bar although I've loaded the required files.What is causing the problem ?
I've copied the navbar code from here.
Change:
<nav class="navigation-bar dark fixed">
To:
<nav class="navigation-bar dark fixed-top"> <!-- Or fixed-bottom -->
As stated in the documentation:
You can create fixed (top or bottom) navigation bar with built in subclasses `.fixed-top, .fixed-bottom.
The issue with Metro Bootstrap UI CSS aka http://metroui.org.ua/ is this:
You load the theme to localhost, or mabe into a MCV framework, and the dropdown doesnt work! Right?
Okay so look for this line in the html file
<script src="js/load-metro.js"></script>
This is where the problem is.
You can open this file and see the contents - its best to use a full url to include the JS files. I myself removed this line from my files:
<script src="js/load-metro.js"></script>
And I replaced it with the contents:
<script type="text/javascript">
$(function(){
if ((document.location.host.indexOf('.dev') > -1) || (document.location.host.indexOf('modernui') > -1) ) {
$("<script/>").attr('src', '<?=base_url('adminstyle')?>/js/metro/metro-loader.js').appendTo($('head'));
} else {
$("<script/>").attr('src', '<?=base_url('adminstyle')?>/js/metro.min.js').appendTo($('head'));
}
})
</script>
now you will notice I use base_url() - this is for my case only. Replace that with your full url and walla the dropdown should be working.