jquery - Horizontal to off-canvas nav with splash screen, absolute positioning conflicts -

-

i'm working on same site previous question (and i'm css3 noob). site i'm working on has horizontal navigation menu switches off canvas menu. i'm turning classes on , off jquery , it's looking pretty good. html divided 2 divs, #drawer , #site-canvas. simplified, html looks this

<body> <nav id="drawer"> //ul menu stuff </nav> <div id="site-canvas">    <header> // header mobile version </header>    <div class="splash">//splash screen<div>    <div id="site-content">//lorem ipsum<div> </div> <!--end #site-canvas--> </body>

it's going feature splash screen image take 100% of viewport , stay centered.

/* splash page */ .splash {     background: url('//image') center center;      background-size: cover;      min-height: 100%;  }

so far good, in desktop styles (1000px+ width) have conflict nav div being outside site canvas causing fixed separate scroll bar (also splash screen arrow fixed , bottom of image isn't @ bottom of viewport). mobile version doesn't have these problems. http://codepen.io/stuffiestephie/pen/pjvkmv fixed problem

i can fix issues above absolute positioning, lose natural document flow , page context flows on screen.

.splash {     background: url('//someimage.jpg') center center;      background-size: cover;      min-height: 100%;      width: 100%;      text-align: center;      position:absolute;      top: 0;      left: 0;      z-index: 0; }

absolute positioning problem http://codepen.io/stuffiestephie/pen/oxdmby

any ideas on how fix this? i'm lost.

i have came solution here.

to fix arrow problem added position:relative; splash div make arrow, position:absolute; anchor div, instead of browser window.

to fix nav issue changed positioning fixed, , removed overflow:hidden; body, html , removed overflow-y: scroll; #site-canvas tag.

this makes nav fixed. think intended goal, , allows the rest of document flow naturally removing overflow style properties of wrapping elements.


Comments

Post a Comment

Popular posts from this blog

how to do line continuation in perl debugger for entering raw multi-line text (EOT)? -

-
i learning perl. trying in debugger define variable, here-document. not know how enter same code in perl script, in debugger. due new lines present inside eot, makes hard in interactive debugger. here small example. have script: >cat ex1.perl #!/usr/bin/perl -w $s =<<'eot'; first line second line eot print $s now run , gives expected output: >perl ex1.perl first line second line now want same in debugger. tried this: >perl -de0 loading db routines perl5db.pl version 1.39_10 db<1> $s =<<'eot';\ cont: first line\ cont: second line\ cont: eot can't find string terminator "eot" anywhere before eof @ (eval 6) [/usr/share/perl/5.18/perl5db.pl:732] line 2. @ (eval 6)[/usr/share/perl/5.18/perl5db.pl:732] line 2. eval 'no strict; ($@, $!, $^e, $,, $/, $\\, $^w) = @db::saved;package main; $^d = $^d | $db::db_stop; $s =<<\'eot\'; first line second line eot; ' called @ /usr/share/perl...
Read more

javascript - Create websocket without connecting -

-
is there way create websocket without connecting right away? far think var ws = new websocket("ws://ws.my.url.com"); creates , connects right away. i'd create socket, define callbacks, , connect once user clicks connect button. thanks no. creating websocket means you've created connection server (or started process of connecting). there no such thing creating websocket isn't connecting yet. you create object store configuration parameters , tell object connect when wanted to, though i'm not sure why that's better creating actual websocket when connect made. or create function setup work , call function later when user clicks connect button.
Read more

android - Linear layout children not scrolling -

-
i'm trying add image views linear layout @ runtime. <linearlayout android:id="@+id/llfolderlayout" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight=".65" android:orientation="horizontal" android:scrollbars="horizontal" > </linearlayout> linearlayout llfoldertabs = (linearlayout) myfolder.findviewbyid(r.id.llfolderlayout); imageview imgtab = new imageview(activity); imgtab.setid(i); imgtab.settag(i); imgtab.setimagedrawable( mcontext.getresources().getdrawable(r.drawable.icon_folder_inactive)); if (i == 0) { imgtab.setimagedrawable( mcontext.getresources().getdrawable(r.drawable.icon_folder_active)); // imgtab.setpadding(10, 0, 4, 0); linearlayout.layoutparams lp = new linearlayout.layoutparams( 74, layoutparams.match_parent); lp.setmargins(15, 0, 0, 0); imgtab.setlayoutparams(lp); } else { // imgtab....
Read more