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.
Related
I wanted all of my reveal.js slides to start at the top, so I modified the center option in the config to false. However, I'd like a particular slide to have that configuration re-enabled. Is there something I can add to the <section> brackets to modify this? Something like this (which doesn't work):
<section id="questions" data-markdown data-center="true">
<script type="text/template">
#Questions?
</script>
</section>
Similar to the question of Hide slide number on title page
You can do this with data-state:
<section data-state="centerText" data-markdown>
# Questions?
</section>
Then at the end of the <script> (after Reveal.initialize()) add the following:
Reveal.addEventListener( 'centerText', function() {
Reveal.configure({center: true});
}, false );
This will center the text only in those slides with data-state="centerText".
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.
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'm trying to learn jquery mobile and have been playing around with it for the past few days and things are going alright, but I'm not so sure if I'm taking the proper approach.
I tried making a site with a similar UI as the facebook app. On the top right and left corners of the page's header are buttons that causes the page to slide out like a drawer.
The top left button will slide the page out to the right to reveal a menu, while the top right button will slide out to the left to reveal a form to fill out.
What I did was create divs outside the page and used javascript to slide out the active page, to reveal the menu or form depending on which button is pressed:
<body>
<div id="my-menu">
<ul>
<li>Menu Item 1</li>
</ul>
</div> <!-- end of my-menu -->
<div id="my-form">
<form method="post" action="form-action.php">
<!-- form elements -->
</form>
</div> <!-- end of my-form -->
<div data-role="page" id="home">
<div data-role="header">
</div>
<div data-role="content">
</div>
</div> <!-- end of home -->
</body>
I used my own CSS to style the menu, but I also noticed my theme wasn't applied to "my-form", but everything in the page "home" had all elements properly styled.
I can't put the form inside the page "home" because I will not be able to do sliding drawer effect that I've done with the menu.
Am I suppose to have my own styling applied to the form outside the page or is there a way to apply the jquery mobile theme to elements outside the page?
Would this be the best approach to implement this kind of user interface or is there a better way using what's available in jquery mobile?
Since this will be my UI for the application does that mean I will just copy the same code to all the pages? Or is there a better way to do this?
I'd like to use the best practice for this use case so please offer any advice!
Thanks in advance for the help!
BTW I did the slide menu based on this blog post:
http://blog.aldomatic.com/facebook-style-slide-out-menu-in-jquery-mobile/
Solution 1:
As I told you in comments, jQM style can not be applied outside of page container but that should not prevent you from using its css.
If you are using firefox, use firebug plugin and take a look at every jQM page element, copy its structure and css. Use it to create styling outside page container.
One more thing, new elements are going to be styled but they will not have functionality, you will need to redo it by yourself.
Solution2:
Have your content inside a data-role="page" div at page-load, let jQuery Mobile style the page, and then move your content div out of the data-role="page" div to be a child of the body tag.
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.