I just need the focus to stay once the element is clicked. I can't get it to work. This code below is from my masterpage. The hover works ok, but after clicking one of the menu options, it does not stay focused and goes right back to the home button. Can someone possibly shed some light on why this isn't working?
<body>
<script type="text/javascript" src="wz_tooltip.js"></script>
<form id="form1" runat="server">
<br />
<br />
<center>
<!-- start header -->
<header>
<div class="container">
<div class="navbar navbar-static-top">
<div class="navigation">
<nav>
<ul class="nav topnav bold" >
<li class="dropdown active">
<a id="nav1" href="../default.aspx" runat="server">HOME </a>
</li>
<li class="dropdown">
<a id="nav2" href="../reverse_mortgages.aspx" runat="server" onclick="setNavagation();">REVERSE MORTGAGE FAQ</a>
</li>
<li class="dropdown">
<a id="nav3" href="../loan_process.aspx" runat="server">OUR PROCESS</a>
</li>
<li id="nav4" class="dropdown">
GET QUOTE
</li>
<li id="nav5" class="dropdown">
ABOUT
</li>
<li id="nav6" class="dropdown">
CONTACT
</li>
</ul>
</nav>
</div>
<!-- end navigation -->
</div>
</div>
</header>
</center>
<script type="text/javascript">
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
if (path.substring(1, path.length) === "") { // this was the home page loading already active
return;
}
$("li.active").removeClass("active"); // remove class 'active' all list items
$(".navigation a").each(function () {
var href = $(this).attr('href');
if (path.substring(1, path.length) === href) {
$(this).parent('li').addClass('active');
return;
}
});
}
</script>
<!-- end header -->
Related
Hello I am trying to layout my navigation bar with Bootstrap 4 but some reason no matter it is not calling it out. It works in my Google developer inspector but when I insert the same code in my text editor nothing happens. Can someone help me understand what I am doing wrong?
HTML code:
<body>
<!--TOP Navigation -->
<nav class="navbar navbar-default navbar-toggleable-md ">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Delvin McCray
<!-- Right Side of Navbar w/ Dropdown Fatures-->
<ul class="nav navbar-nav">
<li class="dropdown">Women <span class="caret"></span>
<!--Dropdown Menu-->
<ul class="dropdown-menu" role="menu">
<li>Shirts</li>
<li>Dresses</li>
<li>Shoes</li>
<li>Accessories</li>
</ul><!--end of dropdown menu-->
</li>
<li class="dropdown">Men <span class="caret"></span>
<!--Dropdown Menu-->
<ul class="dropdown-menu" role="menu">
<li>Shirts</li>
<li>Dresses</li>
<li>Shoes</li>
<li>Accessories</li>
</ul><!--end of dropdown menu-->
</li>
<li>Off the Rack</li>
<li>Fall 2017</li>
</ul><!--End of navbar-right-->
</div>
<!-- Right side Navbar -->
<div class="collapse navbar-collapse justify-content-end"
id="navbarCollapse">
<ul class="navbar-nav">
<li><a class="nav-link" href="#">My Account <i class="fa fa-sign-in" aria-
hidden="true"></i> </a></li>
<li><a class="nav-link" href="#">Shopping Cart <i class="fa fa-shopping-bag"
aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</nav>
</body>
<div class="jumbotron">
<div class="col-sm-8 mx-auto">
<h1>Navbar examples</h1>
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the top and fixed top examples.</p>
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
<p>
<a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs ยป</a>
</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
CSS styling:
body {
padding-top: 50px;
}
.dropdown, .dropup {
position: relative;
margin-right: 20px;
}
.nav li {
margin-right: 40px;
}
ul.nav.navbar-nav li {
margin-right: 40px;
}
I am creating a website using MVC5 (we do for all our websites here) and I am trying to integrate the FlexSlider (found here: https://woocommerce.com/flexslider/) into one of my pages.
I can't seem to get it working, the page just displays nothing, yet it appears in the 'Inspect Element' with each image as being 0x0 px.
HTML:
<div class="flexslider" data-controlnav="thumbnails">
<ul class="slides">
#if (Model.CDSContent != null)
{
foreach (var item in Model.CDSContent)
{
<li>
<a href="#">
<img src="#Html.Raw(item["newsimage"])" alt="Slide 2">
<div class="flex-caption">newstitle</div>
</a>
</li>
}
}
</ul>
</div>
I also have the JS and CSS linked:
<link rel="stylesheet" type="text/css" href="http://flexslider.woothemes.com/css/flexslider.css">
<link rel="stylesheet" type="text/css" href="http://lab.mattvarone.com/projects/jquery/totop/css/ui.totop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.easing.js"></script>
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.mousewheel.js"></script>
<script type='text/javascript' src="http://lab.mattvarone.com/projects/jquery/totop/js/jquery.ui.totop.js"></script>
Of course its a little bit difficult to say why your code is not working.
Have you checked what #Html.Raw(item["newsimage"]) returns ?
But...
You could use a carousel that runs on bootstrap.
The code below i made is to scan a folder for images and then i send them to the view with a viewbag.
--Controller code Start--
var GetSliderImaged = Directory.EnumerateFiles(Server.MapPath("~/Content/SlideShowIndexPage")).Select(fn => Path.GetFileName(fn));
ViewBag.Sliderimages = GetSliderImaged;
--Controller code End--
--View code Start--
<div id="myCarousel" class="carousel slide MTop10 BRadius10 unselectable" data-ride="carousel" data-interval="6000">
<ol class="carousel-indicators" style="margin-bottom: 0px;">
#{
var ii = 0;
foreach (var image in ViewBag.Sliderimages)
{
if (ii == 0)
{
<li data-target="#myCarousel" data-slide-to="#ii" class="active"></li>
}
else
{
<li data-target="#myCarousel" data-slide-to="#ii"></li>
}
ii++;
}
}
</ol>
<div class="carousel-inner " role="listbox">
#{
var i = 0;
foreach (var image in ViewBag.Sliderimages)
{
if (i == 0)
{
<div class="item active">
<img src="~/Content/SlideShowIndexPage/#image" alt="#image" title="#image" class="img-responsive AWIndexPageSlideImage" />
<div class="carousel-caption">
</div>
</div>
i++;
}
else
{
<div class="item">
<img src="~/Content/SlideShowIndexPage/#image" alt="#image" title="#image" class="img-responsive AWIndexPageSlideImage" />
<div class="carousel-caption">
</div>
</div>
}
}
}
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
--View code End--
Just so you know .. the code is not complete but its works for sure if there are images "It does not check if there are no images in the viewbag etc"
But for sure that will be easy to make it yourself.
I have a express handlebar application with main.hbs as the layout file.
//main.hbs
<html>
<head></head>
<body>
{{> header}}
{{{body}}}
<script src='/js/jquery-2.2.4.min.js'></script>
<script src='/js/bootstrap.min.js'></script>
</body>
</html>
When i click a link let's say "settings" in dashboard page then it redirects to settings page where i have sidebar and main content page.
This page also uses main.hbs as layout.
//settings.hbs
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Account<span class="sr-only">(current)</span></li>
<li>Views</li>
<li>Users</li>
<li>Sites</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<ol class="breadcrumb">
<li class="active">Settings</li>
</ol>
<div id="settingsContainer">
//Content should be rendered here just like the {{{body}}}
</div>
</div>
</div>
So how can i able to render the desired content inside the "settingsContainer".
As per my understanding in layout file {{{body}}} is used as a placeholder for where the main content should be rendered.
But this is a different page. Is there a way i can render the content based on the link clicked from sidebar.
Any help and pointer will be much appreciated!
i don't know much about handlebars but you can achieve the same with bootstrap tabs.
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<div class="tabbable">
<ul class="nav nav-sidebar">
<li class="active">Account<span class="sr-only">(current)</span></li>
<li class="">Views</li>
</ul>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<ol class="breadcrumb">
<li class="active">Settings</li>
</ol>
<hr>
<div id="settingsContainer">
<div class="tabbable">
<div class="tab-content">
<div class="tab-pane active" id="account">
//render partial for account
</div>
<div class="tab-pane" id="views">
//render partial for views
</div>
</div>
</div>
</div>
</div>
</div>
Hope this helps
I'm using node.js and flatiron plates for templating, and having trouble with scrambled output when using an array for data.
I would like to bind an array to list items with the ID "list"
JS:
var express = require('express');
var app = express.createServer();
var fs = require('fs');
var plates = require('plates');
var html = fs.readFileSync('plates.html', 'utf-8');
app.get('/', function(req, res) {
var data = {
list: [
"Alpha",
"Bravo",
"Charlie",
"Delta",
]
}
res.send(plates.bind(html, data))
})
app.listen(8080)
HTML:
<html>
<body>
<ul>
<li id="list">REPLACE</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Click the following button.</p>
<span>Go Back</span>
</div>
</body>
</html>
I would expect the output to look like this, where only the list items are repeated:
<body>
<ul>
<li id="list">Alpha</li>
<li id="list">Bravo</li>
<li id="list">Charlie</li>
<li id="list">Delta</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Click the following button.</p>
<span>Go Back</span>
</div>
</body>
</html>
However, I get this weird output and can't understand what the cause might be:
<html>
<body>
<ul>
<li id="list">Alpha</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li id="list">Bravo</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li id="list">Charlie</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li id="list">Delta</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic
</ul>
<div>
<h3>Hello World</h3>
<p>Click the following button.</p>
<span>Go Back</span>
</div>
</body>
</html>
Any ideas?
(P.S. I know HTML doesn't allow for repeated IDs, it's just an example and not the issue)
Updated Information
I ran the tests that pksankara pointed out successfully, but if I modify the tests to use my markup, I get failures:
Modified test-16.html:
<ul>
<li class="components"></li>
</ul>
<div>
<h3>Hello World</h3>
<p>Click the following button.</p>
<span>Go Back</span>
</div>
Output:
<ul>
<li class="components">Union</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li class="components">Director</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li class="components">Broadway</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li class="components">Plates</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li class="components">Resourceful</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic
</ul>
<div>
<h3>Hello World</h3>
<p>Click the following button.</p>
<span>Go Back</span>
</div>
The following is an example on how to do this from the plates repository
Plates Bind: https://github.com/flatiron/plates/blob/master/test/api-test.js#L172
JSON: https://github.com/flatiron/plates/blob/master/test/fixtures/test-16.json
HTML: https://github.com/flatiron/plates/blob/master/test/fixtures/test-16.html
OUTPUT: https://github.com/flatiron/plates/blob/master/test/fixtures/test-16.out
I expect that you can imitate it.
(EDIT: The only bug is https://github.com/flatiron/plates/issues/47)
We are developing an application with the layout near to the jqm examples here( table of contents on left and contents at right) but we want the same behavior as Sencha mobile, when it's in portrait, the table of contents collapses in a navigation button here
Is it possible to do with jqm?
I have created a sample jQuery Mobile application which works like this - When in portrait mode,a split view layout will be shown.When in landscape mode,navigation can be done via a button in the header.For illustrating this in a desktop browser,I have given the width to check as 500px.If width>500 px ,split view. If width <500px, button in header.
This is the source code:
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
function showNavList() {
$(".navdiv").toggle();
}
$(".page").live("pagebeforeshow", function() {
$(".navdiv").hide();
});
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<style>
.content-secondary{
margin: 0px !important;
padding:0px !important;
}
/*refer http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
/* Smartphones (landscape) ----------- */
#media all and (min-width: 501px){/*For demo in desktop browsers,gave 501.Should be 321px.Refer above link*/
.headerNav{
display:none !important;
}
.content-secondary{
display: block;
}
.navdiv{
display:none !important;
}
}
/* Smartphones (portrait) ----------- */
#media all and (max-width: 500px){/*320px*/
.headerNav{
display:block !important;
}
.content-secondary{
display: none;
}
}
</style>
</head>
<body>
<div data-role="page" class="page" id="page1">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li class="ui-btn-active" data-icon="false">
Page 1
</li>
<li data-icon="false">
Page 2
</li>
<li data-icon="false">
Page 3
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 1</h1>
Navigation
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content1
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li class="ui-btn-active" data-icon="false">
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="page" id="page2">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
Page 1
</li>
<li data-icon="false" class="ui-btn-active">
Page 2
</li>
<li data-icon="false">
Page 3
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 2</h1>
Navigation
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content2
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
Page 1
</li>
<li class="ui-btn-active" data-icon="false" >
Page 2
</li>
<li data-icon="false">
Page 3
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="page" id="page3">
<div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
<ul data-role="listview">
<ul data-role="listview" data-theme="c">
<li data-icon="false">
Page 1
</li>
<li data-icon="false">
Page 2
</li>
<li data-icon="false" class="ui-btn-active">
Page 3
</li>
</ul>
</ul>
</div>
<div data-role="header">
<h1>Page 3</h1>
Navigation
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
Content3
</div>
<div class="content-secondary">
<ul data-role="listview" data-theme="c">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li class="ui-btn-active">
Page 3
</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
This is not a foolproof application.But just a rough copy to illustrate how this feature can be done.There are still lot of things to be done to make this work perfectly.
To make it work I have used the concept of media queries.Using it you can selectively hide/show the layout depending on the browser width(orientation of device).
P.S. I have used jqm-docs.css for this example.This css has other media queries too targeting other widths.So there might be some weird layout issues when you test this code.Please modify that css to remove the unwanted media queries.
Let me know if it helps