This is a peculiar thing. The last button is always mis-aligned vertically.
http://jsfiddle.net/5u38gf00/
<div data-role="navbar">
<ul>
<li>one
</li>
<li>two
</li>
<li>three
</li>
</ul>
</div>
The code is straight forward from the jqm website. I've checked the css properties and it looks fine.
I am using notepad++, and picked up that the spaces were actual spaces within the document - that I used to indent the tags. I changed over to tabs and that sorted the misalignment of the last button.
Can you just try this http://jsfiddle.net/5u38gf00/1/
I just change the onLoad event to onDomReady event, then it seems work fine
[EDIT]
This will be the simple test code to display desired output in .html page. (Tested local)
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Page Two</li>
<li>Search</li>
</ul>
</div>
</body>
</html>
OutPut:-
I had exactly the same problem (some extra "invisibles" caracters). I have done a copy/paste from the official jquery mobile demo sample, so i think it's a "bug"in this doc ...
I've just removed the white space before the UL and LI tags, and now it works fine
Related
I am creating a site with foundation 5. I have a page in which I would like a secondary navigation bar to scroll with the page until it reaches the bottom of the primary navigation, then snap into place and 'stick' while the user scrolls, effectively adding 'fixed' to the top-bar when it reaches that point. This functionality is described AND demonstrated exactly in the foundation documentation in the sticky top-bar section (see following link).
http://foundation.zurb.com/docs/components/topbar.html
PROBLEM: I am unable to implement this behavior in my site, even if I copy and paste the sticky top-bar code directly from the working example in the above link. All other elements of top-bar are functioning and the console shows no errors. I have demonstrated the issue in a plunkr:
http://embed.plnkr.co/cRdYV5tobUZsd6q2NQxT/preview
please help me understand the issue. Thank you in advance.
Specifications:
Foundation version: 5.5.0
jQuery: 2.1.0
//TOP-BAR CODE, SAME CODE AS IN PLUNKR
<div class="large-12 columns">
<div class="sticky">
<nav class="top-bar" data-topbar="" role="navigation">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>Sticky Top Bar</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider hide-for-small"></li>
<li>Main Item 1</li>
</ul>
</section>
</nav>
</div>
</div>
UPDATE
Updated plunkr with proper links: http://plnkr.co/edit/8OPKh2sbSn6iq5aN6HF0
My issue was where I was calling
$(document).foundation()
as this is an Angular application, I ended up calling it in
app.run
which worked.
Add this script at the bottom of your page ;)
<script>
$(document).foundation();
</script>
There is a problem with your plunkr site. When the page is loaded the top-bar.js file is not loaded, so this example will never work.
The browser console shows the error - Failed to load resource: the server responded with a status of 404 (Not Found) http://run.plnkr.co/plunks/cRdYV5tobUZsd6q2NQxT/top-bar.js
You need to update the link to ensure the top-bar.js file is loaded.
The foundation website says Just add foundation.topbar.js AFTER the
foundation.js file. Your markup should look something like this:
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<!-- Other JS plugins can be included here -->
<script>
$(document).foundation();
</script>
Few stuff to corrected
make sure tag or the div that wrap your navigation is direct child
of body tag (this important)!
make sure the direct parent; (body) has no overflow property on it
The rest is normal
if you are using bootsrap 4 :-add sticky-top as usual or you can use
separate javascript tooo will work !!
I am trying to use the ul and ol tags to create two seperate lists on a page, but everytime I try to validate the page I get "document type does not allow element "ul" here. I have tried moving the tags around and ive checked every tag that I have opened to ensure they are all closed. I also tried moving just that section of code to a new page and it throws the same error in the validation. I'm out of ideas, any help you can offer is greatly appreciated. It displays correctly, but I need it to pass validation.
<ol>
<li>USA</li>
<li>Canada</li>
<li>Sweden</li>
</ol>
</h2>
<hr/>
<h3>List Example (Order NOT important)</h3>
<h2> Things to Pick Up</h2>
<h3>
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Bread</li>
<li>Cheese</li>
</ul>
You can't have a list inside a heading. You are trying to put one inside a sub-sub-heading (<h3>). (You probably have one inside a sub-heading (<h2>) too, but the start tag is missing from that.
Put the lists after the headings.
See the spec under "Contexts in which this element can be used" for other places that you are allowed to place lists.
I did some tests with your code and tryed to validate with W3C validator.
Here are my observations about your piece of code with the proper corrections applied.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Ryan's solution</title>
</head>
<body>
<ol>
<li>USA</li>
<li>Canada</li>
<li>Sweden</li>
</ol>
<h2> <!--This oppening tag was added by me--> Hello World!</h2> <!--Why are you closing what was not oppened?-->
<hr/>
<h3>List Example (Order NOT important)</h3>
<h2> Things to Pick Up</h2>
<h3> <!--Where is the closing for this tag?--> Hello World!</h3><!--The closing tag was added by me-->
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Bread</li>
<li>Cheese</li>
</ul>
</body>
</html>
This corretions have been aproved by W3c validator.The explanation for the errors I found are in the comments.
I'm sorry if this answer is not fully clear and elegant. This is my first answer here, and i'm learning how to help people :)
Good luck with your coding !
My bootstrap subnav does not look the same as the one on the demo site. Here's my markup:
<div class="subnav">
<ul class="nav nav-pills">
<li>Modal</li>
<li>Tabs</li>
<li>Accordion</li>
<li>Other</li>
</ul>
</div>
and an image of what I am seeing:
and here is what I am trying to replicate:
I tried copying the markup exactly, but to no avail. I wondered if maybe it had something to do with the parent elements being different.. so I moved mine into a "container-fluid" classed div, but that didn't help. Maybe someone here can spot something my eye missed..
This is because the style is not included in bootstrap. You can grab the docs.css from their markup and reference that. That seems to be the CSS that is giving the sub-nav the styling you are looking for.
i.e.
I have the following tabbed navigation setup in my master page.
<nav class="grid_12">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
When I click on the Portfolio tab, for example, I'd like the Portfolio tab to remain highlighted when I land on the portfolio page.
What is the recommended way to accomplish this?
I have checked some other posts, but the most relevant of those uses divs in the example as opposed to separate pages.
Assuming the "selected" class name you have has the styling for the highlight you're talking about. After the user clicks on one of those links, with jquery you can add "selected" class to the clicked anchor tag. put this at the bottom of your page right before the closing body tag or in your main JavaScript file.
<script type="text/javascript">
$(document).ready(function () {
$(".grid_12 ul li a").click(function() {
$(".grid_12 ul li a ").removeClass("selected");
$(this).addClass("selected")
})
})
</script>
The code above will only work if there is no page refresh and only content refresh, however if your page will refresh and go to a new page I would do something like this:
<nav class="grid_12">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
and add the styling for specific pages. For example when you're on www.mySite.com/portfolio in the css for portfolio ONLY add:
a.nav_portfolio{
background-color:orage;
...
}
This way you don't even have to do any javascript.
I wrote an application using ASP.NET MVC, in this application I have an Index view which renders multiple partial views. The application works fine in both IE and Google chrome but does not seem to work in Firefox. Does Firefox have any issues when rendering partial views or is there something extra that I have to add to my code? This is my code:
<div id="tabs">
<ul class = "ui-tabs-nav">
<li>Some stuff 1</li>
<li>Some stuff 2</li>
<li>Some stuff 3</li>
</ul>
<div id="tabs-1">
<% Html.RenderPartial("PartialView1"); %>
</div>
<div id="tabs-2">
<% Html.RenderPartial("PartialView2"); %>
</div>
<div id="tabs-3">
<% Html.RenderPartial("PartialView3"); %>
</div>
</div>
A partial view is not 'rendered' by the browser at all. It's stuffed into the output stream of the server at the right point as the page is generated.
Most likely you have some malformed HTML (elements crossed or not closed), and so you're seeing different things on different browsers.
Update: I can't, at a glance, see anything wrong with that sample you've just added, but you need to look at the source for the whole page (at the browser), not just a fragment.
Check your HTML
may be you wrote the script tag like this
<script type="text/javascript" />
it should always be written like this:
<script type="text/javascript"></script>
Could be some issue with jQuery-ui css file or the javascript-file not being properly referenced. Maybe you can post that code as well ?
Ha, I finally solved it! Silly me set the script type to jscript instead of javascript:
<script type ="text/jscript">
instead of
<script type ="text/javascript">