Display a Partial only if user is on a specific page - html

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>

Related

Good HTML5page designing for cross platform mobile webView(s)

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>

Keeping footer at the bottom of the page using Google MDL

As far as I can tell this isn't a duplicate question because it's a bit different than the other questions on this topic.
I'm using Google's Material Design Lite and the footer will not stay at the bottom of the page properly.
I've seen the different fixes using this trick
<div class="content">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
and I've tried using this method
#footer {
bottom: 0;
width: 100%;
position: absolute; (or fixed)
}
The first option doesn't work because Material Design Lite actually uses the footer tag. And to be honest I don't really want to do that anyway because it seems kind of sloppy to me.
The CSS method for the footer almost works but there are a few problems. When using position: absolute; it doesn't always keep the footer on the bottom of the page and it will sometimes cover content. When I try fixed the footer is always kept at the bottom of the page but when there is enough content for the page to scroll it stays at the bottom of the screen and covers content. Both fixed and absolute will keep the footer at the bottom of the screen not the page, which means that when there is enough content to scroll the footer covers content at the edge of the screen.
The behavior for fixed can be reproduced 100% of the time, but for absolute I haven't figured out what causes it to work sometimes and not others.
This is the code I have for the footer
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<button class="mdl-mini-footer--social-btn social-btn social-btn__twitter">
<span class="visuallyhidden">Twitter</span>
</button>
<button class="mdl-mini-footer--social-btn social-btn social-btn__blogger">
<span class="visuallyhidden">Facebook</span>
</button>
<button class="mdl-mini-footer--social-btn social-btn social-btn__gplus">
<span class="visuallyhidden">Google Plus</span>
</button>
</div>
<div class="mdl-mini-footer--right-section">
<button class="mdl-mini-footer--social-btn social-btn__share">
<i class="material-icons" role="presentation">share</i>
<span class="visuallyhidden">share</span>
</button>
</div>
</footer>`
Has anyone else had this issue or have any ideas on a solution?
Edit to add more information:
The issue isn't with the height of the body or html they are both at 100%.
Full Layout Code
<body>
<div class="site mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<div class="mdl-layout__header-row">
<!-- Header Content Here -->
</div>
</header>
<div class="mdl-layout__drawer">
<!-- Drawer Content -->
</div>
<main class="mdl-layout__content">
<!-- View Content Here -->
</main>
<footer class="mdl-mini-footer">
<!-- Footer Content -->
</footer>
<div class="mdl-layout__obfuscator"></div>
</div>
</body>
I managed to do that by:
1. Without waterfall header
Moving the footer element outside the main element
Set the style of the .mdl-layout__content element to"flex: 1 0 auto"
Example:
<body>
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header">
...
</header>
<main class="mdl-layout__content" style="flex: 1 0 auto;">
...
</main>
<footer class="mdl-mega-footer">
...
</footer>
</div>
</body>
2. With waterfall header
Just by moving the footer element outside the main element
Example:
<body>
<div class="site mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<div class="mdl-layout__header-row">
<!-- Header Content Here -->
</div>
</header>
<div class="mdl-layout__drawer">
<!-- Drawer Content -->
</div>
<main class="mdl-layout__content">
<!-- Main Content -->
</main>
<footer class="mdl-mini-footer">
<!-- Footer Content -->
</footer>
</div>
</body>
Tests:
Short content: http://codepen.io/kabudahab/pen/vGdVQM
Long content: http://codepen.io/kabudahab/pen/JXpmpv
I was having the same problem, where a mdl-mini-footer was overlapping with my mdl-layout__content.
My solution was to keep the tags separate, i.e.
<main class="mdl-layout__content">
...
</main>
<footer class="mdl-mini-footer">
...
</footer>
and modify the classes as follows (taking inspiration from #K.A.D's first solution above)
.mdl-layout__content {
flex: 1 0 auto;
}
.mdl-mini-footer {
flex: 0 0 auto;
}
The modification of the footer class was necessary to stop the footer growing into spaces I didn't want it to (the first 0 in 0 0 auto).
Try This
<main class="mdl-layout__content">
<div class="page-content">
</div>
<div class="mdl-layout-spacer"></div>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">Title</div>
<ul class="mdl-mini-footer__link-list">
<li>Help</li>
<li>Privacy & Terms</li>
</ul>
</div>
</footer>
</main>
Just Add:
<div class="mdl-layout-spacer"></div>
After:
<div class="page-content"></div>
I faced the same issue as you. After browsing through many tutorials and 2 questions like this, I had a peek at one of the templates provided by MDL and noticed that the footer is included within the main section. I find it higly counter-intuitive but the footer element should be specified just before the closing tag, NOT after it.
See the screenshot of the markup which is now working fine. I'm working on the website of TEDx GEC.Visit the tedx GEC website to see the footer in action.(changes will be uploaded by 20-07-2016, anyone visiting before that will notice that the footer overlaps the content. Here's the screenshot:Notice the closing main tag is after the footer.

Reference html tag from template

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

Same class names for different sections

Im writing a markup for Corpora - A Business Theme
And have divided it into main sections in this way:
<header>
<div class="roof"></div>
<nav></nav>
<div class="slides"></div>
</header>
<div class="content">
<div class="roof"></div>
<aside></aside>
<div class="main"></div>
</div>
<footer>
<div class="roof"></div>
<div class="credit"></div>
</footer>
Is that okay to name different sections of the page with the same class name .roof?
[Edit]
So, considering my .roof's have different styling I have to write
<header>
<div class="roofHeader"></div>
<nav></nav>
<div class="slides"></div>
</header>
<div class="content">
<div class="roofContent"></div>
<aside></aside>
<div class="main"></div>
</div>
<footer>
<div class="roofFooter"></div>
<div class="credit"></div>
</footer>
?
No issues naming different section with same Name like in your example(roof) until you want them to style them the same way or make them look the same way .
for example
<header>
<div class="roof"></div>
<nav></nav>
<div class="slides"></div>
</header>
<div class="content">
<div class="roof"></div>
<aside></aside>
<div class="main"></div>
IN the above code the div in the header section will look exactly the same as a div in the content section .
To add more into this - If you are writing a markup for a theme - The best practice would be to -
write global style classes
section specific style classes
for example :-
Section specific styling
.header{
width:100%;
font-family:Ariel;
font-size:12px;
}
Global styling
.float-right{
float:right;
}
Now the .header class will be used specific for the header section .And it will provide us with maximun control to change anything in there and wont effect other section until and unless we use it somewhere else in our markup .
The .float-right class can be used anywhere in the html divs or section which you want to floated to the right side .
Semantically it's totally fine.
For 2 or more sections, if you want to apply same Style sheets, then all the sections can have the same class name and style sheets can be defined for that particular class.
For example
.className{ property:value; }

Can I re-write this layout better?

I feel like I am not writing this correctly and this is my first layout in this nature.
I have a site that has several backgrounds that go across the whole screen. The inner containers are 960 pixels and then centered.
The only problem is every section with a different background needs its own outer and inner div.
Dabblet
http://dabblet.com/gist/2920465
Foo
<section class="hero">
<div class="hero-container">
Hero content
</div>
</section>
<section class="popular">
<div class="popular-container">
Header content
</div>
</section>
<div class="main">
<div class="main-container">
Main content
</div>
</div>
<footer>
<div class="footer-container">
Footer content
</div>
</footer>
So far the code looks ok. It's too simple to go wrong. Only thing for now i would change is the 5 classes
.header-container,
.hero-container,
.popular-container,
.main-container,
.footer-container
merge into one class inner-section-container and apply this class to the corresponding elemnts instead, as for now you do for all this classes the same thing.