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;
}
Related
I got a site form my html teacher, he asked me to check it and fix any problems if they are there. While I fixted some, there is still one big one that I can't figure out. It takes a long time (around 30 seconds) to load the site completly. Everything loads correctly, exapt the navigation menu and a youtube video. I found the source of the problem, it has something to do with the JavaScript code. I don't understand JavaScripy, so I can't figure out the problem. When I delete the JavaScript code, the site loads, but the navigation menu and the video don't, not at all to be exact. There is another JavaScript file, but I don't think it has anything to do with this, and it's to long to post here, so you can download the file here. Here is the css file.
The last 10 lines of JavaScript code is the problem.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Magic-Fire® by Safretti - Home - Safretti Magic-Fire</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="shortcut icon" type="image/png" href="./assets/images/favicon.png">
<link rel="stylesheet" href="./assets/css/style.css?v=1501504031">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o) [0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1301951-24', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="viewport">
<div class="page" id="page-18027">
<header class="block-4-1 v-0" data-sticky="sticky"><div class="container">
<div class="row">
<div class="col">
<div class="middle">
<div class="logo">
<a class="media-1" href="./index.html"><img src="./assets/images/safretti-magicfire-fireplaces-logo-white.svg"></a>
</div>
<div class="menu">
<a class="handler" href="#">
<div></div>
<div></div>
<div></div>
</a>
<div class="mobile-menu block-4-1-mobile-menu v-0">
<div class="outer">
<div class="inner">
<div class="menu-1 menu-menu-1"><ul> <li class="active">Home</li><li>Magic-Fire?</li><li class="">Mistero<ul class="" style="height: 179px;"><li>Mistero 500</li><li>Mistero 1000</li><li>Mistero 1500</li><li>Mistero 2000</li><li>Mistero customized</li></ul> </li><li class="">Incanto<ul class="" style="height: 179px;"><li>Incanto 1000</li><li>Incanto 1500</li><li>Incanto 2000</li><li>Incanto 2500</li><li>Incanto customized</li></ul></li><li>Customized</li><li>References</li><li>About Safretti</li><li>Contact</li></ul></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></header>
<section id="block-39-848428" class="v-35">
<div class="media-4" data-size="1920x0"><iframe src="//www.youtube.com/embed/U5RHhah4poI?enablejsapi=1&wmode=transparent" allowfullscreen></iframe>
<div class="container">
<div class="row">
<div class="col">
<div class="box">
</div>
</div>
</div>
</div>
</section>
<section id="block-51-848431" class="v-35">
<div class="media-4" data-size="1920x0"><iframe src="https://www.youtube.com/embed/U5RHhah4poI?rel=0&autoplay=1&controls=0&showinfo=0" allowfullscreen></iframe>
</div>
<div class="container">
<div class="row">
<div class="col">
<div class="box">
</div>
</div>
</div>
</div>
</section>
<section id="block-76-206454" class="v-35">
<div class="container">
<div class="row">
<div class="col">
<div class="box">
<h1 class="heading-2">The greatest contrast in the world brought together by state of the art technique.</h1>
</div>
</div>
</div>
</div>
</section>
<section id="block-36-219665" class="v-0">
<div class="container">
<div class="row equalize">
<div class="col col-md-6">
<a class="media-2" data-size="480x0" href="./what-is-magic-fire-/incanto-old/index.html">
<img src="./assets/images/home-1c.480x0.jpg">
</a>
<h3 class="heading-3">INCANTO</h3>
<div class="text-2"><p>Incanto is the Magic-Fire Mistero (see description Mistero) provided with a housing so it can be easily integrated in several projects.
</p></div>
<a class="button-2" href="./incanto/index.html">more info ></a>
</div>
<div class="col col-md-6">
<a class="media-2" data-size="480x0" data-position="center-middle" href="./what-is-magic-fire-/mistero-old/index.html">
<img src="./assets/images/home-1b.480x0.jpg">
</a>
<h3 class="heading-3">MISTERO</h3>
<div class="text-2">
<p>Mistero is an electrical fire. The Magic-Fires are equipped with water reservoirs. An evapor<span style="color: #999999;">ator turns t</span>he water into fine water mist. By illuminating the mist you will get a truly realistic and lively smoke / flame effect.</p>
</div>
<a class="button-2" href="./mistero/index.html">Available in the following sizes</a>
</div>
</div>
</div>
</section>
<section id="block-76-956792" class="v-35">
<div class="container">
<div class="row">
<div class="col">
<div class="box">
<h2 class="heading-2">
<span style="font-family: raleway-thin; color: #ffffff;">ON DEMAND - CUSTOM MADE</span>
</h2>
<div class="text-2">
<p><span style="font-family: raleway-regular; color: #ffffff; font-size: 12px;"><span style="color: #999999;">The Magic-Fire firespaces are also available in on demand custom made solutions. Specialy for you as furniture or interior designer or architect if you want something unique for your project. Interested? </span><br /><span style="color: #999999;">Please</span><span style="font-family: raleway-bold;"><strong><span style="color: #ffffff;"> click here</span></strong></span><span style="color: #999999;"> for more information or</span> <strong><span style="font-family: raleway-bold;"><span style="color: #ffffff;">contact</span></span></strong> <span style="color: #999999;">us for more information.</span></span></p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="block-8-2 v-0">
<div class="container">
<div class="row">
<div class="col">
<h3 class="heading-3">Safretti BV - Metaalstraat 3a/3c - 7483 PD Haaksbergen - The Netherlands - ICC nr.: 08130256 - VAT nr.: NL8138.45.245.B01</h3>
</div>
</div>
</div>
</section>
<section class="block-55-1 v-0">
<div class="container">
<div class="row">
<div class="col">
<div class="middle">
<div>
<div>
<div class="media-1">
<img src="./assets/images/icon-phone.svg">
</div>
<div class="text-6"><p>0031 (0)53 574 2554
</p></div>
</div>
<div>
<div class="media-1">
<img src="./assets/images/icon-email.svg">
</div>
<div class="text-6"><p><u>info#safretti.com</u>
</p></div>
</div>
</div>
<div>
<div>
<a class="media-1" href="http://www.facebook.com/safretti" target="_blank">
<img src="./assets/images/icon-facebook.svg">
</a>
<a class="media-1" href="http://nl.linkedin.com/in/safretti-bv-23172931" target="_blank">
<img src="./assets/images/icon-linkedin.svg">
</a>
<a class="media-1" href="http://nl.pinterest.com/safretti/" target="_blank">
<img src="./assets/images/icon-pinterest.svg">
</a>
<a class="media-1" href="http://www.youtube.com/channel/UCkN0NWaLeQts786gy6XkSkQ" target="_blank">
<img src="./assets/images/icon-youtube.svg">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<script src="./assets/js/script.js?v=1501504031"></script>
<script src="//maps.googleapis.com/maps/api/js? key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
<script>$(window).on('load', function() {
new Menu({selector: '#page-18027 .block-4-1 .menu, [data-page_id="page- 18027"] .block-4-1 .menu'});
new Cover({selector: '#page-18027 #block-51-848431 .media-4, [data- page_id="page-18027"] #block-51-848431 .media-4'});
new Sticky({selector: '#page-18027 [data-sticky], [data-page_id="page- 18027"] [data-sticky]'});
new Scale({selector: '#page-18027 [class*="heading-"], [data-page_id="page-18027"] [class*="heading-"], #page-18027 [class*="text-"], [data-page_id="page-18027"] [class*="text-"]'});
new Anchor({selector: '#page-18027 a[href^="#"], [data-page_id="page-18027"] a[href^="#"]'});
new Popup({selector: '#page-18027 .block-55-1 a[href][target="popup"], [data-page_id="page-18027"] .block-55-1 a[href][target="popup"]'});
new Equalize({selector: '#page-18027 #block-36-219665 .equalize, [data- page_id="page-18027"] #block-36-219665 .equalize'});
new Video({selector: '#page-18027 #block-51-848431 video, [data- page_id="page-18027"] #block-51-848431 video, #page-18027 #block-51-848431 iframe, [data-page_id="page-18027"] #block-51-848431 iframe'});
});
</script>
</body>
Check your style.css if you have many imports. That is something that can cause long loading times. Otherwise if your hosting it localy try to move it to somewhere else. Or check if you have many animations (js).
Edit: Actually the pageloaded very fast on my side. I mean I hadnt the CSS but it lokks like its not the html/js code. Could you post the CSS code too inside your question?
get rid of the large space in the URL in this line.
<script src="//maps.googleapis.com/maps/api/js? key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
change to
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
it is best practice to not have spaces in URL
see Google Maps API Best Practices
I have a testimonial Slider that did slide beautifully a week ago and seems to have stopped working without my changing anything. The control-indicators are also not functioning. The carousel is stuck on the first item.
I've checked a million examples and validated the HTML and am going insane. Note that one carousel is inside another rather static carousel. When I separate them, the testimonials disappear. Any help would be appreciated.
Here's the HTML, the CSS is merely formatting and positioning and I have not altered the bootstrap.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wylie For Weight Loss</title>
<!-- Custom stylesheet -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom stylesheet -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<!-- ====== Header Section ====== -->
<header>
<!-- ====== Menu Section ====== -->
<div id="main-nav1" class="navbar navbar-default navbar-fixed-top navbar-fixed-carousel nav-bar-scroll" role="navigation">
<div class="navbar-collapse collapse navbar-right">
<ul id="ulnav" class="nav navbar-nav target-changer">
<li>For MedSpas</li>
<li><span style="color: #FFB718;">For WeightLoss Clinics</span></li>
</ul>
</div>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/logo-dark.png" class="img-responsive" id="nav-img"></a>
<!-- end .navbar-header -->
</div>
<div class="navbar-collapse collapse navbar-right">
<ul id="ulnav" class="nav navbar-nav">
<li>Home</li>
<li>The System</li>
<li>Pricing</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
<!-- end .navbar-collapse -->
</div>
<!-- end .container -->
</div>
<!-- end #main-nav -->
<!-- ====== End Menu Section ====== -->
</header>
<!-- ====== End Header Section ====== -->
<div id="top">
<div id="myCarousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" style="background: url('images/5.jpg') 50% 0 no-repeat fixed;">
<div class="center-container">
<div class="container" style="text-align:center;">
<div class="slider-content">
<h2 class="fadeInUp animated delayTwo" style="margin-bottom:0px;">Wylie Business System</h2>
<p class="fadeInUp animated delayThree">The only business management system your weight loss clinic will need.</p>
<form class="form-inline" action="weightloss_form-to-email.php" method="post" enctype="multipart/form-data">
<div class="col-md-6">
<input name="name" type="text" id="name" class="sm-form-control required" placeholder="Your name">
</div>
<div class="col-md-6">
<input name="email" type="text" id="email" class="required email sm-form-control" placeholder="Your email address">
</div>
<div style="text-align:center;">
<input type="submit" name="Send" value="Get a Demo" class="button button-orange" style="margin:0px; font-weight:bold;">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- end .top> .container -->
<div id="testimonialSlider" class="carousel slide" data-ride="carousel" style="margin-top: 0px;">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>I was so happy to come across Will McKinty and Wylie Systems. The POS integrates so well into our clinic and any requested customizations have been implemented with ease. Once we transitioned our existing merchant account to one that
directly interfaces with Wylie POS, we were even able to save money on our credit transactions. Wylie always promptly responds to any communications which is also a big plus for me!</p>
<div class="testi-meta">
JASON SCHNEIDER
<span>Weight Loss Couture, St. Louis, Missouri</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>I love how your POS has made our lives at our multiple locations easier to manage. It is user friendly for those that are not as technically inclined (like me). We love that we can do most record keeping and transactions in one place.
Prior to using your POS, we had to use many different types of software and applications. Now everything is more streamlined. As easy as it is to use, there are still some instances where I need a bit of advice on how to navigate or
improve upon our day to day record keeping, and you have demonstrated exemplary service by always responding to any 'emergencies' I may have in a friendly, quick and efficient manner!</p>
<div class="testi-meta">
JENNIVINE LEE
<span>Lumina Skin, San Francisco, CA</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>We purchased WyliePOS for our weight loss clinic here in Wyoming. The system has been a huge help in the operation of the business. Not only has it dramatically simplified things at the point of sale, the ‘back-end’ functionality has
made it easy to track inventories and financials (used to use QuickBooks). Also, ‘Wylie’ has added some very helpful custom features to the system, most notably a patient reporting tool, which tracks patient progress and enables automated
reporting to referring physicians.</p>
<div class="testi-meta">
SCOTT POPP
<span>Owner - Popp Chiropractic and Rehabilitation</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>Wylie’s Point of Sale system has been great for our business! They made sure we got up and going as quickly as possible and continue to have stellar after-service support. We also like that on an on-going basis they optimize the product
(recently added the ability to manage employee discounting)</p>
<div class="testi-meta">
TAMARA HAWK MPT
<span>Director of Therapies, Cardiac Rehab – Wyoming Medical Center</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>I am glad that I connected with Wylie Systems, I think what I like most is their availability to help solve any concerns immediately– they have never let us down. In addition they have provided a constant stream of improvements to an
already great product. The POS is great – it really helps me keep track of and analyse sales without being tied to the office. Going back to the traditional cash register – or even the most modern version – would be a nightmare!</p>
<div class="testi-meta">
JOHN LESTER
<span>Point de Depart, Gatineau, Quebec</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>Wylie Systems Inc. has done several projects for Karrys to help us at the point of sale. The quality of their work and customer support following completion has been excellent.</p>
<div class="testi-meta">
PETER KERR
<span>VP Sales at Karrys Bros. Limited</span>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="col-md-12 text-center">
<div class="testi-content">
<p>I was so happy to come across Will McKinty and Wylie Systems. The POS integrates so well into our clinic and any requested customizations have been implemented with ease. Once we transitioned our existing merchant account to one that
directly interfaces with Wylie POS, we were even able to save money on our credit transactions. Wylie always promptly responds to any communications which is also a big plus for me!</p>
</div>
</div>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#testimonialSlider" data-slide-to="0" class="active"></li>
<li data-target="#testimonialSlider" data-slide-to="1"></li>
<li data-target="#testimonialSlider" data-slide-to="2"></li>
<li data-target="#testimonialSlider" data-slide-to="3"></li>
<li data-target="#testimonialSlider" data-slide-to="4"></li>
<li data-target="#testimonialSlider" data-slide-to="5"></li>
<li data-target="#testimonialSlider" data-slide-to="6"></li>
</ol>
</div>
</div>
</div>
<!-- ====== End Footer ====== -->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Bootstrap 3.2.0 js -->
<script src="js/bootstrap.js"></script>
<!-- jQuery Parallax plugin -->
<script src="js/jquery.parallax-1.1.3.js"></script>
<!-- jQuery One Page Nav Plugin -->
<script src="js/jquery.nav.js"></script>
<script src="js/jquery.viewportchecker.js"></script>
<!-- Custom JS -->
<script src="js/site.min.js"></script>
</body>
</html>
Try to put this:
$(document).ready(function(){
$('#myCarousel').carousel({
interval: 3000
});
});
replaced local copies of boostrap.css and bootstrap.js source with:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
and
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
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
Is there a way to have the offcanvas offset my content without actually putting the entirety of my content inside it?
What I mean is, in order of the offcanvas to offset the main content this has to be inside the offcanvas inner-wrap div, however, with angular, this could be difficult to implement.
I'd rather not implement my IndexController inside the OffCanvasController and every other single piece of content.
Is there a way to get the Offcanvas to push the main content to the right as it would normally do, without the need to include said content inside the offcanvas?
I currently have an index.html, a header.html and an offcanvas.html, as follows:
header.html:
<div data-ng-include="'/public/system/views/offcanvas.html'"></div> <!-- This is where the offcanvas is included, before the main navigation -->
<div class="page-header" data-ng-controller="HeaderController">
<div class="desktop">
<ul class="title-area">
<li class="name">
<h1><a ui-sref="home" mean-token="'site-title'">SOL::S</a></h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li data-ng-repeat="item in menus.main" ui-route="/{{item.link}}" ng-class="{active: $uiRoute}">
<a mean-token="item.link" ui-sref='{{item.link}}'>{{item.title}}</a>
</li>
</ul>
<div class="account">
<div class="text-edit">
<div data-ng-show="global.authenticated" mean-token-editable></div>
</div>
<ul class="right" data-ng-hide="global.authenticated">
<li><a ui-sref='auth.register'>Register</a></li>
<li><a ui-sref='auth.login'>Login</a></li>
</ul>
<ul class="right" data-ng-show="global.authenticated">
<li class="has-dropdown">
{{global.user.name}}
<ul class="dropdown">
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</section>
</div>
</div>
offcanvas.html
<div class="off-canvas-wrap mobile" data-ng-controller="offCanvasCtrl">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">SOL ::</h1>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>Left Sidebar</li>
<li>Left Sidebar</li>
<li>Left Sidebar</li>
</ul>
</aside>
<section class="main-section">
<div class="small-12 columns">
<h1>How to use</h1>
<p>Just use the standard layout for an offcanvas page as documented in the foundation docs</p>
<p>As long as you include mm.foundation.offcanvas it should simply work</p>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
And finally, index.html
<div class="container content" data-ng-controller="IndexController"> <!-- Main container and IndexController -->
<section> <!-- Site tag section -->
<div class="row"> <!-- Site tag row -->
<div class="small-12 columns">
<h1 mean-token="'home-default'">SOL :: Search</h1>
</div>
</div> <!-- End site tag row -->
</section> <!-- End site tag section -->
<section> <!-- Logo section -->
<div class="row"> <!-- Logo row -->
<div class="small-10 columns text-center logo-container small-offset-1"> <!-- Logo column -->
<a ui-sref="about" title="SOL"><img ng-src="{{logo}}" alt="SOL Logo"></a>
</div> <!-- End logo column -->
</div> <!-- End logo row -->
</section> <!-- End logo section -->
<section> <!-- Search input section -->
<div class="row"> <!-- Search row -->
<div class="small-8 columns small-offset-2"> <!-- Search column -->
<form>
<div class="row collapse"> <!-- Input group -->
<div class="large-9 columns">
<input type="text" placeholder="" class="form-control main-search-input">
</div>
<div class="small-3 columns">
Search
</div>
</div>
</form>
</div><!-- End input group -->
</div><!-- End search column -->
</div><!-- End search row -->
</section> <!-- End search input section -->
</div> <!-- End IndexController -->
The offcanvas.html is called in the first line of the header.html via a ng-include and the header.html itself is also called with a ng-include as an attribute of the nav element (which is in the index.html on the server side).
It all works wonderfully, except that, in order for the offcanvas to push the content to the right, I would need to include all the content inside this. I'd rather not do that, is there any other way?
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.