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".
Related
How to add an offset to elements hash location so my navigation bar on the top of the window will not overlap my content?
<nav id="nav">
Home
About
Contact
</nav>
<main>
<section id="home">
<h2>Welcome to example.com</h2>
</section>
<section id="about">
<h1>About us</h1>
</section>
<section id="contact">
<h2>Contact us</h2>
</section>
</main>
The simplest solution I've found on the internet is to add some margin-top or padding-top to the targeted element section{ margin-top:100px }, but this will interfere with my design and I don't want to hack using hidden elements to fix this issue.
TL;DR
window.addEventListener("hashchange", function(e){
e.preventDefault()
const navHeight = document.getElementById("nav").offsetHeight
const target = document.getElementById(window.location.hash.substring(1))
window.scrollTo(0, target.offsetTop - navHeight)
})
I sadly don't know the jQuery solution to this.
Explanation
So how does this work, we add an event listener to the window that is looking for hash changes.
We want to prevent the default browser scroll and use our own "adjusted" scroll with an offset.
If you have a sticky navigation on the top of your page that is always showing, we need to know the height of the navigation element. const navHeight = doc.getElementById("nav").offsetHeight
As next we are getting the hash location, for example.com/about.html#team we want to get the hash location without the hash symbol window.location.hash.substring(1), returns "team"
Now we need to get the target element by passing the returned hash location to the document.getElementById(window.location.hash.substring(1))` that will return the target element.
Now we do some simple math to offset the navigation element so it won't overlap your valuable content.
target.offsetTop - navHeight
As the last step, we pass the new calculated offset to the windows scroll function.
window.scrollTo(0, target.offsetTop - navHeight)
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'm trying to create a 4-pane layout using the jQuery-Layout plugin.
Really basic stuff:
The layout (note that I use iframes):
<iframe class="ui-layout-center">Outer Center</iframe>
<iframe class="ui-layout-east">Outer East</iframe>
<div class="ui-layout-west ">
<iframe class="ui-layout-south">Middle South</iframe>
<div class="ui-layout-center ">
<iframe class="ui-layout-center">Inner Center</iframe>
</div>
</div>
The initialization:
$(document).ready(function () {
$('body').layout({
west__childOptions: {
center__childOptions: {
}
}
});
});
Here's a fiddle.
Updated, simpler fiddle.
All is well until I try to resize the panes. It kinda works, but is very rough. When dragging the pane resizer handles it looks like they lose contact with the mouse pointer and stop resizing.
If the panes are simple divs, everything works, but not if the panes are iframes (which is what I need).
Any idea on how I could debug this?
I have found the answer here
Basically, you need to mask each panel (and its parents, in case of nested panels) that contains an iframe.
Like this:
$('body').layout({
center__maskContents: true,
west__maskContents: true
});
Here's the working demo of the fiddle from the question: click
I'm using jQuery UI's tabs to divide content on my page. I have a 'link bar' I would like to have hang at the bottom of each tab. (The tab text will change but generally they will navigate the user left or right through tabs.)
Hosting the #linkBar div inside the first tab makes it 'look' right, inside Themeroller's border. Putting it just outside the 'parent tab' div places the links below the theme's border. I've tried creating a spacer div but it just pushes #linkBar down further.
Of course when the user switches to another tab, the link bar goes away. How is ownership of elements organized between tabs? Should I dynamically destroy the #linkBar div on the tab being navigated away from and rebuild it in the tab being navigated to? Or is there a better way to move it between them, or just manage visibility?
I would like to have the link bar follow the content on each tab as a footer, 'floating' one or two lines below the last content of each tab (rather than having it in a fixed position relative to the tab bar).
Ok ... It was simply adding the jQuery UI classes to the linkBar. Check out my working jsFiddle demo:
I moved the linkBar div out of the tabOne div and put it at the bottom of the tabs div:
<div id="container">
<div id="title">
<h1>title bar</h1>
</div>
<div id="tabs">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div id="tabone">
content goes here
<br><br><br><br>more stuff<br><br><br>more stuff<br><br>
</div>
<div id="tabtwo">
content goes here...
</div>
<div id="tabthree">
content goes here...
</div>
<div id="linkBar">
<span id="leftLink"><< left link</span>
<span id="rightLink">right link >></span>
</div>
</div>
</div>
I slightly altered the linkBar style by giving it a top and bottom margin as well as hiding it by default:
#linkBar {
display: none;
margin: 10px auto;
}
Then I simply added the jQuery UI classes to the $linkBar. I slightly altered the jQuery to be more readable:
$("#accordion").accordion({ header: "h3" });
var $tabs = $("#tabs"),
$linkBar = $("#linkBar");
$linkBar.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
$linkBar.show();
$tabs.tabs();
$('#title').click(function() {
$tabs.tabs('select', 0);
return false;
});
Note: You could just add class="ui-tabs-panel ui-widget-content ui-corner-bottom" to the linkBar div and be done with it. But, I think I like it better managed in the JS.
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.