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?
Related
JSFiddle here.
I have an HTML page where the body consists of a <header> element followed by a <main> element. The problem is that there is a gap/empty-horizontal-space between the <header> and <main> elements, which is neither any padding nor any margin.
I need to get rid of this gap. How do I do that?
body {
background-color: black
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
<header class="light-blue darken-4">
<div class="row section">
<div class="col s12">
<i class="material-icons">menu</i>
<span class="container">
Logo
</span>
</div>
<!-- .col -->
</div>
<!-- .row -->
<ul id="side-drawer-container" class="side-nav ">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
<div class="row">
<div class="col s12">
<ul class="tabs tabs-transparent center">
<li class="tab">All</li>
<li class="tab">ONE</li>
<li class="tab">TWO</li>
<li class="tab">THREE</li>
</ul>
</div>
</div>
</header>
<main>
<div class="row">
<div class="col s12">
<section id="all"></section>
<section id="One">
<div class="row hoverable lime lighten-3">
<div class="col s12">
<ul class="tabs tabs-transparent center lime lighten-3">
<li class="tab">Amy</li>
<li class="tab">Bob</li>
<li class="tab">Anna</li>
<li class="tab">Liv</li>
</ul>
</div>
<!-- .col -->
</div>
<!-- .row -->
<div id="amy">Amy amy</div>
<!-- #amy -->
<div id="bob">Bob bob</div>
<!-- #bob -->
<div id="anna">Anna anna</div>
<!-- #anna -->
<div id="liv">Liv liv</div>
<!-- #liv -->
</section>
<section id="Two">2
</section>
<section id="Three">3
</section>
</div>
</div>
</main>
It's the margin-bottom: 20px on .row creating that gap. It's the result of "margin collapse" because that .row is the last child of header and has a margin that is collapsing outside of header
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
You can either just remove that, or add overflow: hidden to header if you want the margin to show up inside of header instead of outside of it.
I have about 14 related products for each parent product and want the Owl-Carousel slider to function so visitors can scroll thru seeing 4 at a time.
The related products I have set up are rendering nicely except they are listed down the page vertical and not inside the carousel slider.
There is another owl-carousel Slider on this same site on the home page (index.html) which works fine.
The Difference?
This one gets each product detail form Business Catalyst module rendered as:
<ul class="productfeaturelist">
<li id="catProdTd_9568921" class="productItem">
the id is different for each product of course.
Here is link if you want to View page source - starts on LINE 289
Link to product parent detail page
To see the module result - Here is some code from ONE product inside the owl-carousel
What can I add to this to make each block of product detail render horizontal?
<section class="section wow fadeInUp">
<h3 class="section-title">Accessories and Related Products</h3>
<div class="owl-carousel home-owl-carousel custom-carousel owl-theme outer-top-xs">
<div class="item item-carousel">
<div class="products">
<div class="product">
<ul class="productfeaturelist">
<li id="catProdTd_9568921" class="productItem">
<!-- product detail -->
<div class="product-image">
<div class="image"> <a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only"><img id="catsproduct_9568921" src="/assets/images/products-sm/FF400-2.jpg?bc_t=jVmrpgtTMrRukibgVCEGpA" alt="Fibre-Metal Headgear-Headgear" border="0" /></a> </div>
<!-- /.image -->
</div>
<!-- /.product-image -->
<div class="product-info text-left">
<h4 class="name"> <a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only">Fibre-Metal Headgear-Headgear</a> </h4>
<div class="description"></div>
<div class="product-price"> <strong>$19.50</strong> discountcryo price</div>
<!-- /.product-price -->
</div>
<!-- /.product-info -->
<div class="cart clearfix animate-effect">
<div class="action">
<h4>
<div class="action"><a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only">SEE DETAIL</a></div>
</h4>
</div>
<!-- /.action -->
</div>
<!-- /.cart clearfix -->
<div class="padd-bottom-20"></div>
<!--/ END product detail -->
</li></ul> </div>
<!-- /.product -->
</div>
<!-- /.products -->
</div>
<!-- /.item item carousel -->
</div>
<!-- /.home-owl-carousel -->
</section>
<!-- /.section -->
Hope this is better to understand?
Thank You
Willz
Problem solved
The trouble was with the Business Catalyst Module productfeaturelist
- here is the module as edited to function correctly in owl-carousel:
{module_productfeaturelist tag="{tag_name}" render="collection" rowCount="99" sortType="Weight" template="/Layouts/OnlineShop/prodFeature.tpl"}
{% comment %} /* OLD */ {module_productfeaturelist,{tag_name},99,weight,_self,true } {% endcomment %}
Try Using:
display: inline-block;
Also have a look Here for tips on creating a grid.
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
I want to stick a div on top when scrolling the window.
Looks like Magellan of Foundation provides similar behavior. But I want to stick my custom elements(the div with attribute data-magellan-expedition="fixed") on top instead of Sub-Nav in Magellan's example.
<body>
<!-- Header and Nav -->
<nav id="nav" class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
<a href="#">
Foundation Magellan
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Sitemap</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="divider"></li>
<li class="active" >Item1</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li>Login</li>
</ul>
</section>
</nav>
<!-- End Header and Nav -->
<!-- Main Feed -->
<div data-magellan-expedition="fixed" >
<div id="calendar" class="row">
<dl id="calendar-per-day" class="sub-nav">
<script>
someCodeToCreateCalendar();
</script>
</dl>
<hr>
</div>
<div class="row">
<div class="large-12 columns">
<div id="baidumap"
style="height:300px; overflow: hidden; margin: 0;"></div>
</div>
</div>
</div>
<div class="row">
<div class="large-9 columns">
<p>
very long content can be scrolled............
</p>
</div>
<div class="large-3 columns">
<div class="row">
<div class="large-11 large-centered columns">
<h4>Right side content</h4>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer" class="row">
<div class="large-12 columns">
<hr />
<div class="row">
<div class="large-5 columns">
<p>© 2013 All Rights Reserved</p>
</div>
<div class="large-7 columns">
<ul class="inline-list right">
<li>About</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
There is full my code to try my thought. I want the calendar and map always stick on top when scrolling the window. But it does not work at all. Does anybody know how to do it?
Use CSS
.div-to-stick {
postion:fixed;
}
This will stick it to the top of the page on scroll.
VERY new to js but here it goes.
I want to be able to click on one of the images in the Portfolio section and have it change the text of the h3 in the Text section with a fade transition as well as select the corresponding slide in the slider.
Code:
<!-- 960 Container -->
<div class="container">
<!-- Description -->
<div class="sixteen columns">
<!-- Text -->
<h3 class="page_headline">Why Do You Need Manage+ For Your Business?</h3>
<div class="flexslider">
<ul class="slides">
<li>
<div id="details">Tier-1 Tech Support</div>
</li>
<li>
<div id="details">Off-site Backups</div>
</li>
<li>
<div id="details">Loaner Computer</div>
</li>
</ul>
</div>
</div><!-- End Description-->
<!-- Portfolio Content -->
<div id="portfolio-wrapper">
<!-- 1/4 Column -->
<div class="four columns portfolio-item">
<div class="item-img"><a href="support.html"><img src="img/support.jpg" alt=""/>
<div class="overlay link"></div></a></div>
<div class="portfolio-item-meta">
<h4>Tier-1 Tech Support</h4>
</div>
</div>
<!-- 1/4 Column -->
<div class="four columns portfolio-item">
<div class="item-img"><a href="backup.html"><img src="img/backup.jpg" alt=""/>
<div class="overlay link"></div></a></div>
<div class="portfolio-item-meta">
<h4>Off-site Backups</h4>
</div>
</div>
<!-- 1/4 Column -->
<div class="four columns portfolio-item">
<div class="item-img"><a href="loaner.html"><img src="img/loaner.jpg" alt=""/>
<div class="overlay link"></div></a></div>
<div class="portfolio-item-meta">
<h4>Loaner Computer</h4>
</div>
</div>
</div><!-- End Portfolio Content -->
</div><!-- End 960 Container -->
all you need is plane javascript or for lesser code, jquery.
just place your img and your div in the markup and bind the click event of the img to function in which you toggle your division display
you can have multiple images, referring to multiple containers(or same containers), which are hidden by default, but as you click on the relative image, it would appear.
see the code below
create your markup like:
<div class="wrapper">
<div class="image">
<img src='../images/actions_button_ok.png' data-target="one" />
<img src='../images/actions_button_ok.png' data-target="two" />
<img src='../images/actions_button_ok.png' data-target="three" />
</div>
<div class="target" id="one" >
this is text A
</div>
<div class="target" id="two" >
this is text B
</div>
<div class="target" id="three" >
this is text C
</div>
</div>
and your jquery code as:
$(document).ready(function(){
$('img').on("click",function(){
$('.target').hide();
$('#'+$(this).data('target')).toggle(1000);
});
});
basically, your html structure can be of your choice, but that's how you should go about it.
explore more about jquery.
see this fiddle.
instead of binding click to img, you can bind it to your li aswell.