javascript - Offseting the content in Angular -

-

is there way have offcanvas offset content without putting entirety of content inside it?

what mean is, in order of offcanvas offset main content has inside offcanvas inner-wrap div, however, angular, difficult implement.

i'd rather not implement indexcontroller inside offcanvascontroller , every other single piece of content.

is there way offcanvas push main content right do, without need include said content inside offcanvas?

i have index.html, header.html , offcanvas.html, follows:

header.html:

<div data-ng-include="'/public/system/views/offcanvas.html'"></div> <!-- offcanvas included, before 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">                         <a href="">{{global.user.name}}</a>                         <ul class="dropdown">                             <li><a href="/logout">logout</a></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><a href="#">left sidebar</a></li>                 <li><a href="#">left sidebar</a></li>                 <li><a href="#">left sidebar</a></li>         </ul>     </aside>          <section class="main-section">             <div class="small-12 columns">                 <h1>how use</h1>                 <p>just use standard layout offcanvas page documented in <a href="http://foundation.zurb.com/docs/components/offcanvas.html">foundation docs</a></p>                 <p>as long include mm.foundation.offcanvas should 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 , 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">                         <a href="#" class="button postfix main-search-button">search</a>                 </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 called in first line of header.html via ng-include , header.html called ng-include attribute of nav element (which in index.html on server side).

it works wonderfully, except that, in order offcanvas push content right, need include content inside this. i'd rather not that, there other way?


Comments

Post a Comment

Popular posts from this blog

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

-
i read alot other solution still confused should mine... #include <opencv2/objdetect/objdetect.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <iostream> #include <stdio.h> using namespace std; using namespace cv; int main(int argc, const char** argv) { //create cascade classifier object used face detection cascadeclassifier face_cascade; //use haarcascade_frontalface_alt.xml library face_cascade.load("haarcascade_frontalface_alt.xml"); //setup video capture device , link first capture device videocapture capturedevice; capturedevice.open(0); //setup image files used in capture process mat captureframe; mat grayscaleframe; //create window present results namedwindow("outputcapture", 1); //create loop capture , find faces while (true) { //capture new image frame capturedevice >> captureframe; ...
Read more

php - render data via PDO::FETCH_FUNC vs loop -

-
i've been using 2 methods render data. the first one: function name($id,$name){ return '<div id="'.$id.'">'.$name.'</div>'; } echo implode($pdo->query("select id,name user")->fetchall(pdo::fetch_func,'name')); the second one: $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); foreach($users $user){ echo name($user->id,$user->name); } i don't understand how pdo::fetch_func works. tried figure out. however, not well-documented. could please explain fetch mode? , also, 1 performs better? thank you. both methods wrong , have learn how use templates , how separate business logic presentation logic. $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); tpl::assign('users', $users); is code business logic part. then in template <?php foreach $users $row): ?> <div id="<?=$...
Read more

The canvas has been tainted by cross-origin data in chrome only -

-
uncaught securityerror: failed execute 'getimagedata' on 'canvasrenderingcontext2d': canvas has been tainted cross-origin data i getting above error in chrome. code(following) works fine in mozilla. have not corss domain issue. why above error in chrome? var wheel_canvas, wheel_context, can_w, can_h, wheel_grd; var large_radius = 160; var small_radius = 120; var wheel_canvas = document.getelementbyid('wheel_canvas'); var wheel_context = wheel_canvas.getcontext('2d'); var can_w = $(wheel_canvas).width(); var can_h = $(wheel_canvas).height(); var centerx = can_w / 2, centery = can_h / 2; var wheel_grd = null; test('#ff0000'); function test(hex) { $('#clrpicker').css({'left': 210, 'top': 210 }); inverted = hexbw(hex); $('#color_val_show').val(hex); current_color_hex_val_selected = hex; $('#color_val_show').css({'color':inverted,'background':hex}); fillgradient...
Read more