In my mvc app I a have made one footer and embedded it like this
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
#Html.Action("Menu", "Site")
<aside class="main-section">
#RenderBody()
</aside>
#RenderPage("~/Views/Shared/DisplayTemplates/_footer.cshtml")
</div>
</div>
This code lies in my _layout.cshtml file, what I am trying to do here is to hide the footer on a certain page. Is it even possible to hide the footer on a particular page?
Looking forward for suggestions.
Add css to that page.cshtml that you want to hide the footer at.
footer {
visibility: collapse;
}
Yes, you can do that several ways, the first one using C# in Razor:
#if (myCondition)
{
#RenderPage(...);
}
or you can have JavaScript with jQuery do it:
<script>
$(function() {
if (myConditionInJavaScript) {
$("#myfooter").hide();
}
});
</script>
The JavaScript code above will be executed automatically once the entire page is loaded, thanks to the $(function() { ... }) jQuery functionality.
If you want to hide a footer for example from your layout, you can do like this:
In _layout:
#if (IsSectionDefined("hidefooter"))
{
#RenderSection("hidefooter", false)
}
else // Just regular footer from layout
{
<footer class="footer top30">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © ABC</p>
</div>
</div>
</div>
</footer>
}
In chtml file:
#section hidefooter {}
You have multiple options
User jquery code to hide the footer div on that particular page.
use $('#footerId').hide(); on that particular page.
Use can set a viewbag on particular actionresult and check on the layout page that viewbag is set than hide otherwise keep as it is.
ex.
#if(Viewbag.ShowFooter!="False")
{
#RenderPage("~/Views/Shared/DisplayTemplates/_footer.cshtml")
}
Since your condition will be in the page being rendered and not the layout you will either have to keep some global function which can be called after the page is loaded.
Something like
window.myfunction =function() {
if (myConditionInJavaScript) {
$("#myfooter").hide();
}
}
and call this function in your child page. by window.myfunction();
Also you can use Viewbag but you need to set the value of the ViewBag in each view when it is being rendered or updated.
Most efficent way according to me would be maintaining two separate layouts if you have just one section that has to be hidden. Because whichever way you choose at every page load the condition will be fired which may result in a degraded performance.
Related
I have a simple question and i want the best approach for it.
If header is a partial view and i want to render it on every page then i defined in _layout view page and it start showing on every page.What should i do now for a particular page like welcome Screen page where i don't want to show any header footer.
I want to restrict header and footer for only one page that is welcome screen page.It should not render on that page.
One way i have thought of is not to define header footer partial view in layout section. just define it on every page. but i think this approach is not good.There should be some solution,Please suggest me.
Please add below code in your page, which you don't want to show header and footer.
View
<script>
$(document).ready(function () {
$('header').empty();
$('footer').empty();
});
</script>
_Layout
<body>
<header>
test1
</header>
<footer>
test2
</footer>
</body>
OR
_Layout
<div class="HeaderFooter">Header text</div>
<div class="HeaderFooter">footer text</div>
View
<script>
$(document).ready(function () {
$('.HeaderFooter').empty();
});
</script>
Let me know if any concern.
I am developing website for music school. I want to set a background image for sign in page only. How can I do that?
#Html.ActionLink("EntryMode","EntryMode","Home")
#Html.ActionLink("Students","Index","Students")
#using (Html.BeginForm(new { #class = "form login-form" }))
{ ....
//form code here
}
If you want to have a different background in a view, you have to make appropriate changes in the markup of that view, not in the _Layout.cshtml file. This can be made by simply wrapping the content of that page, for example, in a
<body style="background-image:url('background.png');">
</body>
tag, but it depends on the markup you already have.
Provide your code, it will help giving more certain answer.
UPD :
Add this to the view
<style>
body { background-image: url("background.jpg"); }
</style>
If you're using a layout page you could add the name of the controller as class on the body. That way you can do lots of controllerdriven layout manipulation. At least that's how i'd do it.
Something along the lines of this: (untested, edit at will)
<body class="controller-#ViewContext.Controller.GetType().Name">
<div id="yourheaderimage">
<img .../>
</div>
</body>
combined with css
#yourheaderimage {
display: none;
}
controller-HomeController #yourheaderimage {
display: block;
}
I have a normal jquery page with header, content and a panel
<div id="myPage" data-role="page">
<nav id="myPanel" data-role="panel">...menu...</nav>
<div id="myHeader" data-role="header">...button...text...</div>
<div id="myContent" data-role="content">...welcome text...</div>
</div>
The page is initially loaded with a menu in the panel (with a custom ajax call) and a welcome text as content. Besides text, the header also contains a button to open the menu panel.
When a user taps on a menu item I only want to replace the content, not the entire page.
I've been trying with
$.mobile.changePage('my/valid/url', {
pageContainer : $('#myPage')
});
I can see in my network log that I get the correct content from the JQM ajax call. But when I look at the DOM, the only thing that happened is that an empty div is appended to #myPage, i.e. the content from ajax is not inserted. And the old content is still there. See below:
<div id="myPage" data-role="page">
<nav id="myPanel" data-role="panel">...menu...</nav>
<div id="myHeader" data-role="header">...button...text...</div>
<div id="myContent" data-role="content">...welcome text...</div>
<div data-role="content" data-url="my/valid/url">EMPTY</div>
</div>
One other thing is that the whole page, #myPage, is hidden (display="none"). It seems that JQM wants to show an entire new page instead of just allowing me to change the content of one div inside #myPage.
Is it possible to change just a part of a JQM-page using JQM?
I've done it with a custom ajax call and then appended the markup to the DOM myself. But then I need to do a lot of other stuff manually, like enhancing , showing/hiding the load indicator etc.
I have a page with several sections of significantly varying length within a jQuery UI Accordion. If I open a new section (which collapses one of the longer sections above), I'm left at the bottom of the page. Because the sections are of significantly different heights, I can't use the autoheight feature without it looking very strange. Is there any way to use something like scrollto to automatically go to the top of the section I've just expanded?
You can bind a function to the accordionchange event and use jQuery scrollTop():
JavaScript
$(function () {
$("#accordion").accordion({
autoHeight: false,
header: "h3"
});
$('#accordion').bind('accordionchange', function (event, ui) {
$(window).scrollTop(ui.newHeader.offset().top);
});
});
HTML
<div id="accordion">
<div id="accordion-one">
<h3>First</h3>
<div>Some lengthy text</div>
</div>
<div id="accordion-two">
<h3>Second</h3>
<div>Less lengthy text</div>
</div>
<div id="accordion-three">
<h3>Third</h3>
<div>Other text</div>
</div>
</div>
I tested this in FF8.
Links
Accordion change event
jQuery scrollTop()
Ive built a webpage with 'tabs' using rails. When a user clicks a tab, a new page loads. I want to format it so the tabs are always in the same place on the page as a user clicks them. This happens as long as the user has not scrolled down on the page. If a user has scrolled down, clicking on the tab will refresh the page and it is no longer scrolled down - which make clicking the tabs look bad. Is there a way to keep the spot on the page where the user has scrolled down, without using Javascript? If it must be done with Javascript, any suggestions?
T
alt text http://img.skitch.com/20100526-xtrn2ncbetj6bs1a2s4xwywfjh.png
Without Javascript, nope. If they were at an exact location, you would be good to go, using an anchor (example.html#anchor), but since you don't know the exact location, you're pretty much out of luck.
So sorry!
You can do it but you will need a small amount of Javascript and some CSS hiding.
Suppose these are your tabs:
<ul id="nav">
<li class="tab">Content 1</li>
<li class="tab">Content 2</li>
</ul>
And suppose this is your content:
<div id="content" class="content1">
<div id="content1">
<h1>Some content</h1>
<p>This is my content.</p>
</div>
<div id="content2">
<h1>More content</h1>
<p>This is my other content.</p>
</div>
</div>
What you would need to do then, and I am demonstrating using the Ext.Core library, is:
<script type="text/javascript">
Ext.onReady(function() {
Ext.select('.tab a').on('click', function(ev, el) {
ev.stopEvent();
var content_id = el.href.replace('#', '');
Ext.get('content').removeClass(['content1', 'content2', ...]).addClass(content_id);
});
});
</script>
You also need a little CSS like so:
#content.content2 #content1,
#content.content1 #content2 {
display:none;
}
This hides the other content we are not looking at. We set a class on the content container called contentN which is the href of the link for that tab. So if we have a tab with href="#content1" then we add a class to the content container called content1 and now that content is visible and other content is not.
The Ext.Core samples page has another way of doing it, and they have an example up showing it working. Their way is more involved than this.