EDIT: My temporary solution is to turn off all transitions and use different id for each header. You then get the persistent toolbar, but without transitions.
working example without transitions
I am using a persistent fixed navbar in my header in JQuery Mobile.
I'm navigating between 3 html files, and on the first(main) page there is no problem, but on the second and third page the navbar covers some of the content.
example of broken navbar code for the navbar and header:
<div data-role="header" data-id="header" data-position="fixed">
<h1>Page 1</h1>
Options
<div data-role="navbar">
<ul>
<li><a href="#page1" data-icon="home" data-iconpos="top"class="ui-btn-active ui-state-persist" >Page1</a></li>
<li><a href="#page2" data-icon="info" data-iconpos="top" >Page2</a></li>
<li><a href="#page3" data-icon="gear" data-iconpos="top" >Page3</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
I have uploaded an example of the problem here(with pages in one html file instead of three html files) : broken navbar
here's the updated one:
http://jsfiddle.net/LvuUX/2/
You had same data-id="header" for all three pages, as you are using multi-page template so you can't have same id for multiple elements
EDIT: http://jsfiddle.net/LvuUX/3/
looks like jQuery is not using the correct padding-top when page loads. To fix this issue you can just use a fix padding-top for your data-role="content"
<style type="text/css">
.ui-page-header-fixed { padding-top: 5.9em; }
</style>
I think what you're trying to do is similar to the problem I had. I had a fixed positioned navbar but my page content was being hidden underneath it. I solved the problem by applying a top margin to my content div equal to the height of the navbar. (ie. My margin-top of my content div was 50px as that was the height of my navbar.)
Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.
I hope I interpreted your question correctly. I've only been learning html&css 3 months but when I saw your question I thought this might help.
Related
I have navbar like this :
<ul class="dropdown-menu" role="menu">
<li>People</li>
<li>Main Page</li>
</ul>
but when I click on "People" link, it will not position correctly, because I am loading some charts on that page. I have many section with unique id and content is loaded from JavaScript (charts).
<section id="top_something">
<div class= "container">
<h2 class="blue-headings text-center"><b>Top People</b></h2>
<div id="div_something"></div>
</div>
<br>
</section>
The content of a div id="div_something" I am making in JavaScript ...
I have a 10 div's like this on that main_page with unique id. I can see that when I click on a a href="/main_page#top_something" on navbar it will paste me on that section , but as soon as it loads JavaScript it will move me upper
thanks in advance
If your main_page is a directory (which it probably is) then you need to simply include a slash before the anchor name.
People
If you have JavaScript injecting content after the page loads then you will be brought to the appropriate anchor but the page may move because the additional content added by JS will push the anchor down the page. You might consider repositioning the screen to the appropriate anchor using JS after its done injecting content.
I have a pretty average jQuery Mobile app. On the bottom there is a navbar with icons and text.
This is how it should look
but when I tap/click on the page it toggles to this
To save myself some repetition, I've been appending the same footer to each page using this basic script.
$(function ()
{
$("div[data-role='page']").append($("#footer").html());
$("body").trigger('create');
});
And here's the HTML.
<div class="hidden" id="footer">
<div data-role="footer" data-position="fixed" data-id="footer">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Maps</li>
<li>Rules</li>
<li>Schedule</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
I believe this script is the cause of this issue. Any ideas for how to fix this behavior?
EDIT: In inspecting the DOM I found that a class called "ui-fixed-hidden" is being toggled on the data-role="footer" div when I click.
It turns out that just because my template footer div was nested in another div with "display: none" doesn't mean that jQuery Mobile wasn't using that element. As such, I had multiple footers which created weird behaviors.
I resolved this by moving my template footer to a seperate html file and then loading it in on page start.
Semantic-UI forewarns on its sidebar page that "Fixed position content may have issues changing its position when a sidebar appears." It then provides two possible solutions to the problem.
Surprisingly, on that very same page and throughout the site, Semantic-UI's website uses a fixed top menu that adjusts just fine when the left sidebar is triggered.
I want to simply create a fixed top menu like the one Semantic-UI's site uses that adjusts properly when the sidebar is opened. However, this is proving frustratingly difficult, as neither of the two proposed solutions work. I've inspected the markup, css, and javascript but can't figure out how he went from the code Semantic-UI provides to a working fixed top menu that adjusts properly when the sidebar is opened.
Any thoughts or direction? Using Semantic-UI how do you create a fixed top menu that adjusts properly when a sidebar is opened?
From the docs:
Using Fixed Content Any fixed position content that should move with
page content when your sidebar is visible, should receive the class
name fixed and exist as a sibling element to your sidebar.
Fixed content that is not included adjacent to your pusher will lose
its positioning when a sidebar is shown.
<div class="ui left vertical inverted labeled icon sidebar menu">
</div>
<div class="ui fixed inverted main menu">
</div>
<!-- Left Sidebar -->
<div class="ui visible inverted left vertical sidebar menu">
<a class="item">Home </a>
<a class="item">Page 1</a>
<a class="item">Page 2</a>
</div>
<!-- Top Fixed Menu -->
<div class="ui top fixed menu">
<a class="item menu-trigger">Menu</a>
<a class="item">Page 1</a>
<a class="item">Page 2</a>
</div>
<div class="pusher">
<!-- Page Content Here-->
<div class="ui basic segment">
<h3 class="ui header">Hello there</h3>
</div>
</div>
Don't forget to put the code above inside the "body" tag and including the css & js files.
Use the 'exclusive' setting to display multiple sidebars that play nicely with each other.
$('.your-shared-sidebar-class').sidebar('setting','exclusive',false).sidebar('show');
Using bootstrap's navbar, I am trying to figure out how to make it not to hide the top of the body section.
Actually, it is very well solved using what is recommended here:
Twitter Bootstrap - top nav bar blocking top content of the page
But there is still something that is not working: when you have a link like this:
<li>Go to Section 1</li>
<li>Go to Section 2</li>
<li>Go to Section 3</li>
<li>Go to Section 4</li>
And
<h4 id="Section 1">Section 1</h4>
<p>Content of Section 1</p>
<p>Back to Top</p>
<h4 id="Section 2">Section 2</h4>
<p>Content of Section 2</p>
<p>Back to Top</p>
<h4 id="Section 3">Section 3</h4>
<p>Content of Section 3</p>
<p>Back to Top</p>
<h4 id="Section 4">Section 4</h4>
<p>Content of Section 4</p>
<p>Back to Top</p>
In this case, when you click on, for example, Section 2 direct link (or shortcut), the page properly scrolls-down until the section 2, but it hides the beginning of it behind the bootstrap navbar.
Any clue about how can this be fixed?
By adding the :target psuedo-selector to a linked CSS you can apply a defined padding to your selected link (as long as it displays in your browser as: www.example.com#link1).
I spent the last 2 hours trying to search the web trying to find Jquery or JS to apply padding to the target div and after modifying my Google search terms found this
There might be a way to fool proof this with older browsers, but for the time being, this makes me a happy camper.
Put some top padding on your <h4>'s to account for your navbar's height. I.e. put this in your CSS:
h4 {
padding-top: 30px;
}
Of course, change 30px to you actual navbar height.
I've had the same problem and haven't found a real solution, but just more workarounds (like the "padding-top" work-around itself, that seems very hackish to me). It looks like the topbar issue is still unsolved, people just hack around it somehow.
One non-invasive work-around that works for me (as good as it can) is to add the following JavaScript to the page (apart from the "padding-top" hack):
var shiftWindow = function() { scrollBy(0, -50) };
if (location.hash) shiftWindow();
window.addEventListener("hashchange", shiftWindow);
I found this in a comment to a bootstrap GitHub issue. However, the function isn't executed in all necessary occasions (e.g. when going to the same anchor again).
A more reliable work-around is moving the anchor positions using CSS relative positioning (found in this StackOverflow answer:
a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}
However, this is more invasive because you have to give your anchors a class (to distinguish it from links). So you have to update all your anchor HTML code (which might not always be possible, e.g. when you are dealing with a rigid CMS that generates your anchors):
<a class="anchor" id="top"></a>
I am using jquery ui. But the page is taking a lot of time to load. Also I am using tabs function for on LI elements of UL tag. But for a split second the list is shown as it is and after that the Tabs effect takes place. I have written the javascript for calling the tabs in the same html file. How I can reduce the loading time and also the the abrupt view that is shown for a split sec.
If you are truely using the load event, then you probably want to switch to the domReady event.
instead of doing
<head>
<script>
$(document).load(eventHandler);
</script>
</head>
do
<head>
<script>
$(document).ready(eventHandler);
</script>
</head>
or simply
<head>
<script>
$(eventHandler);
</script>
</head>
which is a shortcut for the same thing
This will trigger as soon as the DOM is ready to be manipulated, but before images are loaded, and generally before the browser renders the page for the first time, tho that depends on how your have built your page.
You can set your UL tag to display:none
#dilip
For loading times you can install Firebug with Firefox and see where the loading times go.
If you are using PHP to generate your page, you can also use http://www.xdebug.org/ to see where PHP takes the most time per script file.
For the menu I would say, do not let the JavaScript kick in to render the Tabs effect when the DOM has fully loaded. jQuery can detect that easily :)
Background:
There are a few little optimization you can do for smoother loading of the tabs. But it's basically trade-off to easy-to use. You add some css classes into your html already and don't wait till jQuery puts it for you. This avoids all the funny movements in the page when jQuery takes over, coz the elements will be already in place.
Explained steps:
1) div containing all the tabs:
You add class ui-tabs which in combination with step2 will suppress the original list and puts the navigation already in place.
You add class ui-widget which fixes the font-size and the position of the first tab against navigation.
2) ul containing the nav items:
You add class ui-tabs-nav which completes the list repositioning.
3) Each particular div containing tab panel, which is not active:
You add style="display:none;". This is what jQuery does anyway. So you don't have to remove style after the tabs are ready. jQuery does it for you. It also more fine-tuned than crudely hiding all content of tabs.
4) Is also good idea to put tabs constructor call in document ready:
$(document).ready(function(){$( "#tabs" ).tabs();}
Result:
So you change your html from original
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>tabs-1 content</p>
</div>
<div id="tabs-2">
<p>tabs-2 content</p>
</div>
<div id="tabs-3">
<p>tabs-3 content</p>
</div>
</div>
to:
<div id="tabs" class="ui-tabs ui-widget">
<ul class="ui-tabs-nav">
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>tabs-1 content</p>
</div>
<div id="tabs-2" style="display:none;"><!-- display:none is later reverted by jQuery.tabs -->
<p>tabs-2 content</p>
</div>
<div id="tabs-3" style="display:none;">
<p>tabs-3 content</p>
</div>
</div>
Conclusion:
You are just using jQuery styles.
You tabs navigation and tab panels are already in place before jQuery starts rendering.
No need any clean-up (E.g.: remove display:none from ul) after tabs are rendered.