:)
I'm using Material Design Lite in my first React app, the layout are basically this:
http://codepen.io/anon/pen/PqBJPW
<html>
<head>
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<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>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content"><!-- Your content goes here --></div>
</main>
</div>
</body>
</html>
My components in react are like this:
Inside menu and header I have a "Title", this is to set page title (like document.title). But, how I can set this?
My structures of components are:
Header+Menu
Page components
But every "Page components" has unique title. Can I set state in children (Page content) components and read em parent component (header+menu)?
I suggest following the structure of your template html:
One top level "page" component which renders the mdl block:
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
With 3 child components corresponding with __header, __drawer, and __content elements, plus child components therein as necessary.
That way "page" state such as the current menu item, the corresponding page title + heading, and the body content to render, can be tracked in a component which is concerned with the page as a whole, and the details are passed as props to the children.
Related
I have an ejs sidebar partial
<div class="col-3 flex-nowrap">
<nav id="sidebar">
<!-- Sidebar Header -->
<div class="sidebar-header text-center">
<h1 id="notification">Notification</h1>
</div>
<!-- Sidebar Links -->
<ul class="nav-list">
<li class="active">Edit Profile</li>
<li>Privacy & Security</li>
<li>Payment Setting</li>
<li>Transaction History</li>
<li>Trust & Verfication</li>
<li>My Education Blog</li>
<li>Promotions</li>
</ul>
<ul id="cancel"><a><strong>Cancel Account</strong></a></ul>
</nav>
and in my notifcation.ejs I include that partial this way
<%-include("./partials/sidebar.ejs")%>
Since I want to reuse my sidebar partial I want the header in that sidebar to be distinct on every page.
ex: in the notification.ejs page it is already set to have notification in that sidebar header. But in promotions.ejs I want that header to say promotions instead.
How do I specify in each link of the sidebar which sidebar header to use?
What you are trying to archive is to pass variables inside partial.
Here is a link to documentation, in Includes section you can find the info about this case.
For example your partial can look like
<!-- Sidebar Header -->
<div class="sidebar-header text-center">
<h1 id="notification"><%= title %></h1>
</div>
And when you are using your partial, you can define it with variable
<%-include("./partials/sidebar.ejs", { title: title })%>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">SITE NAME</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
Hi i am trying to figure out how I get this menu to ALWAYS (unless mobile) lock inside the users view, and for the site grid to resize. but one step at a time how do I get this to lock (so users can't close or open)
Please check the below code. Dictation of fixed drawer should be in a div class above the drawer. It was taken from the MDL page, https://getmdl.io/components/index.html#layout-section/layout
and look under fixed header, there is also a code pen available.
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<!-- Your content goes here -->
</div>
</main>
</div>
I am using a free html5 theme to build on for a website and need a bit of help with the Navbar Hover function. To view the original html5 theme go to" http://www.templatemo.com/free-website-templates/430-robotic
The theme is a onepage theme however I am converting into a multipage theme. Originally in the theme you would click a menu item and it would scroll down the page to that content but I want it to open the new page in same window for that content. The way a normal site would do so. Below is a HTML and CSS.
HMTL
<div class="templatemo_menu">
<div class="templatemo_socialmedia">
<div class="templatemo_social">
<a href="http://www.Facebook.com/GreenHouseEffectUSA">
<img src="images/facebook.png" alt="templatemo facebook">
</a>
</div>
<div class="templatemo_social">
<a href="https://twitter.com/greenhouse_usa">
<img src="images/twitter.png" alt="templatemo twitter">
</a>
</div>
<div class="templatemo_social">
<a href="#">
<img src="images/youtube.png" alt="templatemo youtube">
</a>
</div>
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="top-menu">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" wp-nav-menu="Primary" wp-nav-menu-type="bootstrap">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
DONATE
</li>
<li>
VOLUNTEER
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Try moving the classes to the div rather than the ul
I'm developing a website using Bootstrap framework v2.0.1.
When my website is browsed on devices like iPhone, iPad, other tablets, smartphones, etc. the horizontal menu that appears in browser on PC or laptop gets collapsed to an icon. This icon is placed at top right corner of the screen of device.
When user touches this icon the menu gets expanded. If user touches any of the menu items from this expanded menu the menu gets collapse(closed) and the respective page linked with that menu gets open.
Till now everything works fine for me. But I want to collapse(close) the expanded(opened) menu when user touches anywhere on the surface of the screen that appears below the expanded(opened) menu.
I tried to achieve this but couldn't succeed in my attempt so asking for your help.
For your reference I'm putting below the HTML and jQuery code that I tried:
The HTML code that I have:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<link href="bootstrap.css" rel="stylesheet">
<link href="example-fixed-layout.css" rel="stylesheet">
<link href="bootstrap-responsive.css" rel="stylesheet">
<link href="bootstrap-modal.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse" style="position:fixed">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="band" href="index.php"><img src="logo.png"/></a>
<div class="nav-collapse"><!-- This is the menu that I want to toggle -->
<ul class="nav pull-right navbar-fixed-bottom" style="font-size:11px">
<li><i class="icon-user icon-black"></i>LOGIN</li>
<li><i class="icon-pencil icon-black"></i>REGISTER</li>
<li><i class="icon-edit icon-black"></i>MY REQUESTS</li>
<li><i class="icon-edit icon-black"></i>STATUS</li>
<li><i class="icon-envelope icon-black"></i>CONTACT</li>
<li><i class="icon-user icon-black"></i>MY ACCOUNT</li>
<li><i class="icon-map-marker icon-black"></i> LOCATE HERE</li>
<li><i class="icon-user icon-black"></i>LOG OUT</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container" style="padding-top: 125px;">
Some HTML code
---------------------------------------------------
---------------------------------------------------
---------------------------------------------------
</div>
<div class="container">
Some HTML code
---------------------------------------------------
---------------------------------------------------
---------------------------------------------------
</div>
<div class="container" style="margin-bottom:70px;">
Some HTML code
---------------------------------------------------
---------------------------------------------------
---------------------------------------------------
</div>
<footer style="background-color:#000" id="footer">
<div class="container">
Some HTML code
---------------------------------------------------
---------------------------------------------------
---------------------------------------------------
</div>
</footer>
<script src="jquery.js"></script>
<script src="bootstrap-tooltip.js"></script>
<script src="bootstrap-alert.js"></script>
<script src="bootstrap-button.js"></script>
<script src="bootstrap-carousel.js"></script>
<script src="bootstrap-collapse.js"></script>
<script src="bootstrap-dropdown.js"></script>
<script src="bootstrap-modal.js"></script>
<script src="bootstrap-popover.js"></script>
<script src="bootstrap-scrollspy.js"></script>
<script src="bootstrap-tab.js"></script>
<script src="bootstrap-transition.js"></script>
<script src="bootstrap-typeahead.js"></script>
<script src="bootstrap-modalmanager.js"></script>
</body>
</html>
The jQuery code I tried but it didn't work out:
$(document).ready(function(){
$("div.container").click(function(e){ // When user touches anywhere on any of the div present with class "container" we detect what element we are clicking.
if ($(!e.target).hasClass(".nav-collapse")){ //if the element is not our menu, we use the inbuilt bootstrap method to collapse back(close) this expanded(opened) menu i.e. <div class="nav-collapse">-----</div>
$('.nav-collapse').collapse('hide');
};
});
});
In short I want to collapse back(close) the expanded(opened) menu when user touches anywhere at any part on any of the . Also the original functionality of collapsing(closing) the menu upon selection of any of the menu item should remain as it is. It shouldn't get affect in any way.
How should I achieve this?
Thanks in advance.
If I understand correctly, your requirement is to close the menu if it is open when clicked on any one of the div.containers outside the menu bar. You can do it as:
$("div.container").click(function(e) { // When any `div.container` is clicked
if (!$(this).parents().hasClass("navbar")) { // to check if it's not the menu links that are clicked
if ($('.nav-collapse').hasClass('in')) { //if the navbar is open (we only want to close it when it is open or else it causes a glitch when you first click outside)
$('.nav-collapse').collapse('hide'); //hide the navbar
}
}
});
Demo here
I'm currently developing jquery custom mobile template. I need to know can we use data-role="header" tag more than once in a page ? Because in my page as per the header and footer I've couple of in the middle also. For example headings should be wrapped with background color and even though I used will it be validate http://validator.w3.org/mobile/. Also I tried applying following jquerymobile class to a div class="ui-bar" but it's not working as I expected eg :(not reading the background color).
Alternatively I can define a custom class but I need to know have jquery already defined a class something similar to my requirement.
FYI: here is my HTML example
<div data-role="page" data-theme="a">
<header data-role="header">
<div>Main Heading</div>
</header>
<!-- logo -->
<hr/>
<div class="ui-grid-b">
<div class="ui-block-a">
<a href="#">
<div class="h_bag"></div>
BAG (0)
</a>
</div>
<div class="ui-block-b">
<a href="#">
<div class="lust_list"></div>
LUST LIST
</a>
</div>
<div class="ui-block-c">
<a href="#">
<div class="search_size"></div>
SEARCH SIZE
</a>
</div>
</div>
<!-- header options -->
<div class="ui-bar">
<h1>This Sub heading should to wrapped with background colour</h1>
</div>
</div>
You can easily use more the one header in jQuery Mobile, and here's an example:
http://jsfiddle.net/Gajotres/UGVwW/
Background color of every element can also be easily achieved but you will need to fore it with !important:
#second-header {
background: red !important;
}
Here's an HTML example:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-theme="a" data-role="header" id="second-header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
Test button
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>