In Chrome everything works perfectly on a website page, the relevant part of whose source code I've copied below. However, in IE9 or Firefox (I have not checked Opera or Safari) the top and left-side navigation links do not work. The nonworking links, two of which have drop-down menus, rapidly flicker between two link texts when the mouse hovers over them. The links also toggle between link texts when you click on them in IE9 and Firefox. They do not link to other pages in those browsers. Oddly, the similarly formatted footer navigation links on the same page (also below) DO work correctly in all three browsers. After researching possible fixes I don't think this is a CSS, style tag, DOCTYPE or javascript issue, but I'm not positive. Can anyone suggest a fix?
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>The Animal Union - Home</title>
<link href="css/mainstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="navi">
<strong>
<ul >
<li>Home</li>
<li>About
<ul></strong>
<li>History</li>
<li>Activities</li>
<li>Board</li>
</ul>
<li> <strong>
Donate </strong>
<ul>
<li>Noncash Gifts</li>
<li>Matching Gifts</li>
<li>Estate Planning</li>
</ul>
<li><strong>Volunteer</li>
<li>Shop</li>
<li>Contact </li>
<li>Links</strong></li>
</ul>
</div>
</div>
</div>
<div id="wrapper">
<div class="wrapper_leftpanel">
<div id="navi_drop">
<ul >
<li>HOME</li>
<li>ABOUT</li>
<li>DONATE</li>
<li>VOLUNTEER</li>
<li>SHOP</li>
<li>CONTACT</li>
<li>LINKS</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<div class="footer">
<ul style="text-align:right;">
<li>Home</li>
<li>About</li>
<li>Donate</li>
<li>Volunteer</li>
<li>Shop</li>
<li>Contact</li>
<li>Links</li>
</ul>
</div>
</body>
</html>
Related
https://jsfiddle.net/7xwrxkrd/
Initially Tab One is set with ui-btn-active and ui-state-persist styles - if you click the burger icon the panel overlay is revealed and if you click away Tab One is still active.
But if you select Tab Two and then click the burger icon to show the panel overlay the Tab Two loses its active state.
Is there a way I can keep the Tabs Active while using the panel overlay?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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="page">
<div data-role="header" data-position="fixed" data-fullscreen="false">
Menu
<h1>Demo</h1>
</div>
<div data-role="tabs" id="tabs" style="padding:0px;">
<div data-role="navbar">
<ul>
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
</ul>
</div>
<div id="one" class="ui-content" date-role="content">
<p>First tab Content</p>
</div>
<div id="two" class="ui-content" date-role="content">
<p>Second tab contentnt</p>
</div>
<div id="three" class="ui-content" date-role="content">
<p>Thrid tab contentnt</p>
</div>
</div>
<div data-role="panel" id="panel-overlay" data-display="overlay">
<ul data-role="listview">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
</div>
</body>
</html>
Here is a generic fix for this issue:
$(document).on("panelbeforeopen", "div[data-role='panel']", function(e,ui) {
$.mobile.activeClickedLink = null;
});
If you have already somewhere in your code the panelbeforeopen callback, simply put the hotfix $.mobile.activeClickedLink = null; inside your function.
So after a couple of days of trawling various forums, tutorials etc - I'm still no closer to doing what is seemingly something straightforward - namely, have links on a Navbar populate a named yield with the contents of a partial. I'm probably missing something fundamental, but hey! I've asked this before, but I don't think I worded the question too well, so hopefully this time I'll do better!
My view:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<title>Software Dev Tools Web UI</title>
</head>
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
</button>
<a class="navbar-brand" href="#">MARS Web UI</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
XXXXXXXXX
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Logout</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div>
</div>
<body>
<div class="container">
<%= yield :mainbody %>
</div>
</body>
<script>
$(".nav li").on("click", function() {
$(".nav li").removeClass("active");
$(this).addClass("active");
});
</script>
</html>
Where I have inserted XXXXXXX above, I have tried:
<li>P4</li>
<li>P4 Output</li>
This simply rendered both "perforce" and "p4_output" partials one below the other, and clicking the navbar options had no effect.
So then I figured maybe something more like this was required:
<li class="active"><%= link_to "Perforce", {:action => 'renderp4'}, :remote => true %></li>
<li class="active"><%= link_to "Perforce", {:action => 'renderp4_output'}, :remote => true %></li>
But at this point I came to a grinding halt, not knowing how what would be needed in my "renderp4" and "renderp4_output" actions so as to return HTML to my mainbody yield - if it is even possible?!?
Hopefully what I am trying to achieve is obvious - while I appreciate and acknowledge I am probably rather wide of the mark with my solution currently, any guidance would be appreciated. As I say, I've hunted around, but just hit a brick wall!
Thanks :)
Create a renderp4.js.erb file
$('.container').replaceWith('<%= escape_javascript render "authentication/perforce" %>');
I have just started looking into jquerymobile, done simple samples using jquery.mobile-1.0a1.
I have home.html, auboutus.html pages. In home page, i have a listview with a external link to aboutus.html. It is working fine, by clicking on about us link, about us page is loading with head navigation bar with "Back" button.
Now by using jquery.mobile-1.0a2, in about us page, the header navigation bar got disappeared.
Here is my sample code:
home.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Home</h1>
</div>
<div data-role="content">
<div id="banner">
<h2></h2>
</div>
<ul data-role="listview">
<li><a href="aboutus.html" >About Us</a>
</li></ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
aboutus.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>About Us</h1>
</div>
<div data-role="content">
<div id="banner">
<h2>About Us</h2>
</div>
<p>about us about us about us about us </p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
You should think about using the page design JQuery mobile prefers. You can find it here, you dont need to define different .html files, you can simple add multiple 'pages' with different id's to one html file. The refering is then simple. Check out this link: http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-navmodel.html#../../docs/pages/docs-pages.html
For your link if you want to refer to external, try this: Link
I have just started using jquery mobile and got a weird thing happening. When I click the navigation bar quickly(on different item each time) my footer disappears on one of these pages.
Here is my code (that's the main file but all other files are identical with the exception of ui-active class on the nav bar item)
<!DOCTYPE html>
<html>
<head>
<title>Page Title in head</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="js/lib/jquery.mobile-1.0b1.css" />
<script type="text/javascript" src="js/lib/jquery-1.6.1.js"></script>
<script type="text/javascript" src="js/lib/jquery.mobile-1.0b1.js"></script>
<script>
$.mobile.defaultPageTransition='none';
//$.mobile.useFastClick='false';
</script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f" data-position="fixed">
<h1>Friends</h1>
Home
</div>
<div data-role="content">
<p>
This is the test
</p>
<ul data-role="listview" data-dividertheme="d" style="margin-top: 0;">
<li data-role="list-divider">
A
</li>
<li>
Adam Kinkaid
</li>
<li data-role="list-divider">
B
</li>
<li>
Bob Cabot
</li>
<li data-role="list-divider">
C
</li>
<li>
Caleb Booth
</li>
</ul>
</div><!-- /content -->
<div data-role="footer" data-id="footer" data-position="fixed">
<h1>Footer</h1>
</div><!-- /footer -->
<div data-role="navbar">
<ul>
<li>
First
</li>
<li>
Second
</li>
<li>
Third
</li>
</ul>
</div><!-- /navbar -->
</div><!-- /page -->
</body>
</html>
Should I just stop using jquerymobile footers or does anyone know a workaround?
Thank you!
I am running jquery-mobile alpha 1 and I am creating a list with a fixed header. When I view the page the header is on top of the first list item. The only solution I have found so far is to put a hidden list item with enough space at the top for the header to cover. Is there any other solution?
Here is an initial example:
<!DOCTYPE HTML>
<html>
<head>
<title>JQuery Mobile List test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" data-fullscreen="true" id="list">
<div data-role="header" data-position="fixed">
<h1>This is a header</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li> <div>Item 1</div> </li>
<li> <div>Item 2</div> </li>
<li> <div>Item 3</div> </li>
<li> <div>Item 4</div> </li>
<li> <div>Item 5</div> </li>
<li> <div>Item 6</div> </li>
<li> <div>Item 7</div> </li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
For the record the problem was that the header had 'data-fullscreen="true".
<header data-fullscreen="true>
After removing this attribute the list is placed below the header.