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" %>');
Related
I am developing a tizen web application using html, js, tau and jquery.
I need a context menu when user click on a specific position.
Is it possible to do that ?
I tried,
$("#myContextMenu").popup('open');
it shows
TypeError: $(...).popupwindow is not a function
Any help will be appreciated.
You need to add TAU library. TAU has different types of Context menu.
Try like this,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css">
<meta name="description" content="Tizen Mobile Application"/>
<title>Hello Tizen</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/main.js"></script>
<script type="text/javascript" src="./lib/tau/mobile/js/tau.js"></script>
</head>
<body>
<div class="ui-page" id="list-styles-page">
<div class="ui-header" data-position="fixed">
<h1>Home</h1>
</div>
<div class="ui-content">
<ul class="ui-listview">
<li class="ui-group-index">Horizontal Style</li>
<li class="ui-li-anchor">Horizontal Basic</li>
<li class="ui-li-anchor">Horizontal Scroll</li>
<li class="ui-li-anchor">Horizontal 2line</li>
<li class="ui-group-index">Vertical Style</li>
<li class="ui-li-anchor">Vertical Basic</li>
</ul>
<div id="ctxpopup_horizontal_basic" class="horizontal-ctxpopup ui-popup" data-overlay="false">
<ul class="ui-listview">
<li class="ui-li-anchor">Copy</li>
<li class="ui-li-anchor">Cut</li>
<li class="ui-li-anchor">Paste</li>
</ul>
</div>
<div id="ctxpopup_horizontal_scroll" class="horizontal-ctxpopup ui-popup" data-overlay="false">
<ul class="ui-listview">
<li class="ui-li-anchor">Copy</li>
<li class="ui-li-anchor">Cut</li>
<li class="ui-li-anchor">Paste</li>
<li class="ui-li-anchor">Clipboard</li>
<li class="ui-li-anchor">Close</li>
</ul>
</div>
<div id="ctxpopup_horizontal_2line" class="horizontal-ctxpopup ui-popup" data-overlay="false">
<ul class="ui-listview">
<li class="ui-li-anchor">Select All</li>
<li class="ui-li-anchor">Cut</li>
<li class="ui-li-anchor">Copy</li>
<li class="ui-li-anchor">Paste</li>
</ul>
<ul class="ui-listview">
<li class="ui-li-anchor">Clipboard</li>
<li class="ui-li-anchor">Dictionary</li>
<li class="ui-li-anchor">Translate</li>
<li class="ui-li-anchor">Share via</li>
</ul>
</div>
<div id="ctxpopup_vertical_basic" class="ui-popup" data-overlay="false">
<ul class="ui-listview">
<li class="ui-li-anchor">Copy</li>
<li class="ui-li-anchor">Cut</li>
<li class="ui-li-anchor">Paste</li>
<li class="ui-li-anchor">Clipboard</li>
</ul>
</div>
</div>
</div>
</html>
here is a demo of vertical style (basic)
Please see Tizen Online Sample 'TAUUIComponents' for TAU examples
This question already has answers here:
top nav bar blocking top content of the page
(20 answers)
Closed 6 years ago.
I have a problem using Bootstrap's grid system, what's happening is that my nav bar is seemingly covering up the other content, which is intended to be underneath it!
I'm using ASP.NET MVC in this Project, so all I've done is set up a Layout page like this;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>You Hire it Ltd</title>
<script src="~/scripts/jquery-2.2.4.js"></script>
<script src="~/scripts/bootstrap.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/style.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="col-md-8">
<div class="navbar-header">
<a class="navbar-brand" href="#">
You Hire It
</a>
</div>
<ul class="nav nav-pills">
<li class="active">#Html.ActionLink("Home", "Index")</li>
<li>#Html.ActionLink("About", "About")</li>
<li>#Html.ActionLink("T&Cs", "Legal")</li>
<li>#Html.ActionLink("Contact us", "Contact")</li>
</ul>
</div>
<div class="col-md-offset-2"></div>
<div class="col-md-2 pull-right">
<div class="container-fluid">
<div class="ButtonWrapper">
<button class="btn btn-success">Sign up/Login</button>
</div>
</div>
</div>
</nav>
</header>
</div>
</div>
#RenderBody()
</body>
</html>
and the page in question is like this;
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h1>Hello</h1>
</div>
</div>
</div>
I'm not entirely sure what's causing this behavior, any pointers would be greatly appreciated.
Thanks guys :)
You need to add padding to the top. From the Bootstrap docs:
The fixed navbar will overlay your other content, unless you add padding to the top of the body.
So in your style.css you need..
body {
padding-top:70px;
}
I'm using twitter bootstrap package in my application for my app layout.
I mostly use _BootstrapLayout.basic.cshtml as my default layout.
#using System.Web.Optimization
#using BootstrapSupport
#using NavigationRoutes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="#Styles.Url("~/content/css")" rel="stylesheet"/>
#RenderSection("head", required: false)
#RenderSection("jtable", required:false)
#Html.Partial("_html5shiv")
#* favicons and touch icons go here *#
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#" title="change in _bootstrapLayout.basic.cshtml">Sorama</a>
<div class="nav-collapse collapse">
<ul class="nav">
#Html.Navigation()
</ul>
</div>
</div>
</div>
</div>
<div class="container">
#Html.Partial("_alerts")
#Html.Partial("_validationSummary")
#RenderBody()
<hr>
<footer>
<p>© Sorama #System.DateTime.Now.ToString("yyyy")</p>
</footer>
</div>
#Scripts.Render("~/js")
#RenderSection("Scripts", required: false)
</body>
</html>
this gives me a page with nav bar
How can i show the Welcome message to the logged in User on the right corner of the nav bar? Something like Welcome ABC! and some log off option on side?
The only thing I know is i can get name of current user from User.Identity.Name but I don't know how to make it appear on menu bar.
I couldn't find something that could help me so I thought may be I could get it here.
Edit: After #User.Identity.Name being added in view
I added above mentioned code after <ul> tag with #html.navigation
and this is what I get
I get the Welcome Demo on menu bar(next to profile, difficult to see) but it is nothing like I expected.
Could something be done in DefaultRouteConfig provided by Bootstrap?
public class LayoutsRouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.MapNavigationRoute<ModuleController>("Module", c => c.Index());
routes.MapNavigationRoute<AccountController>("Hardware", c => c.Login());
routes.MapNavigationRoute<LayoutsController>("Profile", c => c.Starter())
.AddChildRoute<LayoutsController>("Change Password", c => c.Marketing())
.AddChildRoute<AccountController>("Add User", c => c.Register())
.AddChildRoute<LayoutsController>("Logout", c => c.SignIn())
;
}
}
After the div element that contains the nav, just add another div element and put the username in there.
Something like:
<div>#User.Identity.Name</div>
ul tag is styled for Bootstrap navigation so creating a
<li> #User.Identity.Name</li>
should look ok and you can use action link to user management instead of #
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>
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!