What HTML5 tags best suited to build this mobile web app which needs to runs inside webViews of various smartphone platforms "iOS, Android, Window, ..." ?
The title in the middle of the header will change, The label and number of buttons on the footer will change, the content in the middle will have many data input controls (textfields, radio groups,...) so needs to scroll vertically but with the header and footer fixed. The side navigator shows up at initial start and can slide out with a swipe gesture or by hitting the top left☰ menu button.
Thank you
Is something like this best suited?
<body>
<section id="firstpage" data-role="page">
<div data-role="header">
<h1>Activity</h1>
</div>
<div class="ui-content">
<p>This is the content on page 1</p>
<!-- put some kind of a table with cells here -->
</div>
<div data-role="footer">
<!-- Buttons go here -->
</div>
</section>
</body>
Yes that is a good representation of it:
<body>
<section id="firstpage" data-role="page">
<div data-role="header">
<h1>Activity</h1>
</div>
<div class="ui-content">
<p>This is the content on page 1</p>
<!-- put some kind of a table with cells here -->
</div>
<div data-role="footer">
<!-- Buttons go here -->
</div>
</section>
<section id="secondpage" data-role="page">
<div data-role="header">
<h1>label2</h1>
</div>
<div class="ui-content">
<p>This is the content on page 1</p>
<!-- put some kind of a table with cells here -->
</div>
<div data-role="footer">
<!-- Buttons go here -->
</div>
</section>
</body>
Related
From getmdl.io/components/index.html#layout-section
I opened link to
https://codepen.io/anon/pen/MEoBqG
When I saved html code and opened it in few browsers locally. I see that menu button is mispositioned.
<html>
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Simple header with scrollable tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-4">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-5">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-6">
<div class="page-content"><!-- Your content goes here --></div>
</section>
</main>
</div>
</body>
</html>
How I can fix the misposition of menu icon? Why it looks good on codepen but not locally?
screenshot with mispositioned icon
The only difference between Codepen code and your code is the the missing <!DOCTYPE html>. At first, you might wonder, so what? sure the browser can handle it, right?. The truth is that, omitting <!DOCTYPE html> forces your browser to render your page in Quirks Mode.
So, what can go wrong in quirks mode? A lot of things can go wrong in quirks mode. I suspect that flexbox does not work as intended in your case (I will look into it and come back later).
Some useful info:
MDN: Quirks Mode and Standards Mode
MDN: Mozilla Quirks Mode Behavior
How to tell if a browser is in “quirks” mode?
Why does my div height 100% work only when DOCTYPE is removed?
I have a main layout page with a menu bar on the left displaying links to other pages. I'm trying to include a partial under that menubar on the left ONLY when the user is on a specific page within that layout.
Here is another question that is asking for pretty much the same thing.
The problem with that question is the answers are over five years old, and the outdated <% %> syntax isn't working in my website.
Is there a way to do the same thing while still using the regular #Html.Partial syntax?
In your page layout, where you want to include your side bar:
<div id="header">
</div>
#RenderSection("Sidebar", false)
<div id="content">
#RenderBody()
</div>
<div id="footer">
</div>
false means it is not a required section, so pages that don't need don't need to include it.
now to display the section, simply add it to the bottom of the page that needs it displayed, other pages within the same layout will not display this section:
<h2>This is a page</h2>
#section Sidebar {
<div id="sidebar">
your sidebar....
</div>
}
Your full html will display something like this with a sidebar:
<div id="header">
</div>
<div id="sidebar">
your sidebar....
</div>
<div id="content">
<h2>This is a page</h2>
</div>
<div id="footer">
</div>
and other pages will simply be:
<div id="header">
</div>
<div id="content">
<h2>This is another page</h2>
</div>
<div id="footer">
</div>
I am wanting to access a div tag from the template and add html underneath that tab for a certain page for my website. So assuming that this was my script
<!-- Page Content -->
<div class="span8 page-content" id="page-content">
<div>
</div>
</div>
<!-- /Page Content -->
<!-- Right Rail -->
<div class="span4 right-rail" id="right-rail">
<div class="first-col">
</div>
<div class="second-col">
</div>
</div>
<!-- /Right Rail -->
is there anyway I could access
<div class="span8 page-content" id="page-content">
from another script and add html underneath it? I need that part of the template to stay the same except for on this page. So the final script would be something akin to
<div class="span8 page-content" id="page-content">
<div>
<div>
</div>
</div
</div>
Use jquery to append HTML to the DOM.
Or
Use Javascript to find the element by id and add to it.
document.getElementByid ect
Is there any easy solutions to get parallax effect up and running really easy?
I just want a simple and neat effect on my header. This is my page: www.arcanova.no/bolig
I want the header text "Bolig" to scroll faster than the picture behind it.
Here is my html code:
<section class="band banner">
<div class="container">
<div class="row">
<div class="columns sixteen">
<div class="duk"><p></p> </div>
<div class="overskrift_firma">
<h2>Bolig</h2>
</div>
</div> <!--/columns sixteen banner-->
</div><!--/ row-->
</div> <!-- / container-->
</section> <!-- / band -->
The picture is the background of the band banner section class.
See this fiddle
$(window).scroll(function(){
$('#back').css({'top':''+(-($(this).scrollTop()*0.05))+'px'});
});
Hope from above you will get an idea of how parallax works
I am trying to create a very simple chat page on jquery mobile, with the following page schema:
<div data-role="header" data-position="fixed">
<h1>Chat with...</h1>
</div><!-- /header -->
<div data-role="content">
<div id="chatcontents"></div><input type="text" />
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
Footer
</div><!-- /footer -->
with the div "chatcontents" to contain all the messages, and the input text to be at the bottom.
The problem is that jquery mobile sort of overrides my css settings, so it does not work out to be textbox at the bottom (considering the footer) and "chatcontents" to occupy the rest of the screen with the text starting from the bottom.
Anybody already tried this already?
Thanks in advance.