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">
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 !
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
This is probably pretty simple but I'm having issues with my erb in ruby interfering with my bootstrap layout. I'm using a partial to render a simple comment form and depending on where I start/end my do block, it totally screws with my bootstrap layout. I was under the impression that the only thing affected is code within <%= %>. Heres what I have currently. I've been moving it around with little success.
<% #comments.each do |comment| %>
<ul id="comments" class="comments">
<li class="comment">
<div class="clearfix">
<h4 class="pull-left"><%= comment.name %></h4>
<p class="pull-right"><%= comment.created_at %></p>
</div>
<p>
</p>
</li>
</ul>
</div>
<% end %>
The above is currently pushing my right two columns underneath the comment form. If I surround only this
<em><%= comment.content %></em>
with my block it works fine. Anything beyond that as I have above screws it up. Any input would be appreciated as I've run into this before. Thanks.
I figured it out. Thanks to Anthony. Removing the div didn't help initially but it was the source of the problem. I needed to remove the div and THEN move my do block down to only include the affected markup.
I know questions about broken links get asked all the time, however my issue seems a bit different, and none of the solutions have worked.
Right now none of the links to other websites in my nav section worked when clicked. It registers that they are there, and if you right click it and select "open in new tab" it works, but otherwise, nada. A few relative links (if thats the term for the href="#xxx" link to content on the page) to modal popups work fine though.
My HTML Code is listed below, as well as a Pastebin link to the CSS (so that I don't clutter up the box).
Removing the class="navigation" from the list tag seems to fix the link issue. Leaving the class on the tag but removing all the relevant CSS from the stylesheet, however, does not eliminate the issue and just removes the styling. I can't figure out why this would be the case.
I've tried setting the z-indices of my background, menu and nav to 1,2,3 (and 3,2,1 just for the hell of it) respectively so that they don't interfere, as recommended in other questions here, but to no avail. Anyone have any ideas?
CSS: http://pastebin.com/1KVTdBvF
Site: http://www.magratheamedia.com/npo
<div class="menu">
<div class="container clearfix">
<div id="logo" class="fleft">
<img src="images/logo.png" />
</div>
<div id="nav" class="fright">
<ul class="navigation">
<li data-slide="1">Home</li>
<li>Forum</li>
<li>Wiki</li>
<li>Government</li>
<li>Charter</li>
<li>In-Game</li>
<li>Applicants</li>
<li>IRC</li>
<div class="clear"></div>
</ul>
</div>
</div>
Your problem isn't CSS, it's your jQuery. This, in particular:
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
When you find your links, like this:
var links = $('.navigation').find('li');
You have to somehow exclude the ones that go to external sites. Maybe by giving the modal links their own class name or something.