javascript - Jquery mobile, creating a bar down side of page (photo's) -

-

i trying create sort of thin bar running down edge of page mobile app, based on jquery mobile. it's purpose alert people presence of side panel can pull out. have attached images explain point better

enter image description here

since jqm uses page content footer system, unclear me how this. have heard of creating sidebar content-secodary seems on kill , i've heard behaves differently on phone opposed tablets.

intro

i made few months ago, difference pull button don't have height set 100%.

this solution tested on:

  • desktop chrome
  • desktop firefox
  • mobile android chrome

only thing need change button height.

working example

jsfiddle example can found here: http://jsfiddle.net/gajotres/qgdst/

code

html

<!doctype html> <html>     <head>         <title>jqm complex demo</title>         <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densitydpi=device-dpi"/>         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />         <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>         </head>     <body>         <div data-role="page" id="index">             <div data-theme="b" data-role="header">                               <h1>index page</h1>             </div>              <div data-role="content">              </div>              <div data-role="panel" id="left-panel" data-display="overlay" data-position="left" data-theme="c">                 <img src="small_image_as_button" /><!-- click here open panel -->                 <nav id="indice">                     <!-- content here -->                 </nav>                 <div data-role="button" id="tick-button">>></a>                             </div>                     </div>         </body> </html>

javascript

$(document).on('pagebeforeshow', '#index', function(){      $(document).on('click tap', '#tick-button', function(){          $("#left-panel").panel( "open");            });       });

css:

.ui-panel-closed {     visibility: visible !important;       width: 100px !important;      left: 160px !important;     overflow: visible !important; }  .ui-content {     padding: 0 15px 15px 15px !important; }  #tick-button {     position: absolute;     top: 100px;     right: -27px;         width: 25px;     height: 100px;     margin: 0 0 !important;     border-radius: 0 1em 1em 0; }  #tick-button .ui-btn-inner {     padding: 0 0 !important;     height: 100% !important;     font:10px 'courier new', 'verdana',serif;          line-height: 100px;     color: #555;     text-shadow: 1px 1px #fff;    }

Comments

Post a Comment

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

-
everything work fine on code below fetch user logs: js: <script> $(document).ready(function () { var table =$('#systemlogs').datatable({ responsive: true, processing: true, serverside: true, "language": { "url": "/datatables/media/plug-in/persian.json" }, ajax: '{!! url('/admin/systemlogs/data/systemlogsdatatable') !!}', columns: [ { data: 'name', name: 'name' }, { data: 'message_text', name: 'message_text' }, { data: 'remote_addr', name: 'remote_addr' }, { data: 'log_created_at', name: 'management_logs.created_at' }, { data: 'log_updated_at', name: 'management_logs.updated_at' }, ] }); }); </script> routes: route::get('/systemlogs/data/systemlogsdatatable','systemlogscontrolle...
Read more

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

-
i getting error when run spring application: exception in thread "main" org.springframework.context.applicationcontextexception: unable start embedded container; nested exception org.springframework.context.applicationcontextexception: unable start embeddedwebapplicationcontext due missing embeddedservletcontainerfactory bean. @ org.springframework.boot.context.embedded.embeddedwebapplicationcontext.onrefresh(embeddedwebapplicationcontext.java:124) @ org.springframework.context.support.abstractapplicationcontext.refresh(abstractapplicationcontext.java:476) @ org.springframework.boot.context.embedded.embeddedwebapplicationcontext.refresh(embeddedwebapplicationcontext.java:109) @ org.springframework.boot.springapplication.refresh(springapplication.java:691) @ org.springframework.boot.springapplication.run(springapplication.java:320) @ org.springframework.boot.springapplication.run(springapplication.java:952) @ org.springframework.boot.springa...
Read more

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -

-
msg 245, level 16, state 1, line 1 conversion failed when converting varchar value '8:45 am' data type int. script declare @specimenid bigint = 0, @script varchar(max); declare @starttime int = (select convert(int,substring(start_time,0,charindex(':', start_time)) - 12) appt appt._id=112601) --select @starttime set @script = 'select distinct ptlast_name + '', '' + pt.first_name patient_name, dbo.formatdate(pt.dob,''mm/dd/yyyy'') dob, (convert(varchar, (datediff(yy, dob, appt_date) - case when (month(dob) > month(appt_date)) or (month(dob) = month(appt_date) , day(dob) > day(appt_date)) 1 else 0 end)) + ''/'' + convert(varchar, (datediff(m, dateadd(yy, (datediff(yy, dob, appt_date) - case when (month(dob) > month(appt_date)) or (month(dob) = month(appt_date) , day(dob) > day(appt_date)) 1 else 0 end), d...
Read more