I need to highlight the current page in my left nav.
The nav has to be loaded externally via an .shtml include:
<!--#include file="leftnav-menu.inc"-->
My urls take the form of:
www.xxx.com/mission-critical.shtml
but sometimes just:
www.xxx.com/energy.shtml (eg one word no hyphen)
My nav lists it as 'Mission critical'
How can I highlight the ul li with "class=selected"? I've seen something like this:
$(function(){
var path = location.pathname.substring(1);
if ( path )
$('.leftmenuNav ul li a[#href$="' + path + '"]').attr('class', 'selected');
});
Can't quite get my head around the string splitting etc...
Sample nav bar:
<ul>
<li>Corporate responsibility</li>
<li>Overview</li>
<li>Governance</li>
<li>Our approach</li>
</ul>
Okay, the jQuery syntax was slightly wrong. This should work:
$.ready(function()
{
var path = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
if ( path )
$('.leftmenuNav ul li a[href="' + path + '"]').attr('class', 'selected');
});
Also, make sure the leftmenuNav is right (your code above doesn't show it)
Related
I have this code currently, :
doctype html
html
head
title= title
style.
body {
font-family: Verdana;
font-size: 13px;
background: #42f495
}
body
h1 Welcome!
h2 Please Wait
p= sq
I want to align paragraph to center but not getting how to do it using Pug.
First, you need to indent all of the tags to be further in than the body tag to make this all work properly.
To assign a style to a paragraph do this:
p(style="text-align:center;")
Here are two different ways to assign a css class to a paragraph (they will produce the exact same results):
style.
.cssClassExample { text-align:center; }
p.cssClassExample
p(class="cssClassExample")
If you want to assign a class based on a pug variable do this:
- var cssClassVariable = "myClass"
p(class= cssClassVariable)
I'm using http://www.brainjar.com/asp/dirlist/ ( example: http://www.brainjar.com/asp/dirlist/demo.asp ) to list a directory we use to upload some things clients need.
I would like to make it list the folders only and opening them with a click instead of showing everything off.
How can I do that ?
Use this CSS in your page:
ul ul {
display:none;
}
And add jQuery to your page and this script:
$(function(){
$('ul li b').on('click', function(){
$(this).next('ul').toggle()
})
})
How would I set an active tag to a class depending on the URL?
In the example below '/' (Home) is set to active.
.nav-collapse.collapse
ul.nav.top-2
li.active
a(href='/') Home
li
li
a(href='/about') About
li
li
a(href='/contact') Contact
li
Would it be better to inject something into the page to identify it as the active page?
Here's what I do, like hexacyanide's example,
res.render('/path', {
path: req.path
});
..and in layout.jade:
.nav-collapse.collapse
ul.nav.top-2
li(class=path=='/'?'active':undefined)
a(href='/') Home
li(class=path=='/about'?'active':undefined)
a(href='/about') About
li(class=path=='/contact'?'active':undefined)
a(href='/contact') Contact
You can also consider adding id to body tag, with will be telling you on what page you are. And then you can specify simple CSS rules dependent of that id. It's very popular scheme, for example provided by Wordpress.
For this id you can use Jade variable provided by render method.
In your express code:
res.render('/', { id : 'home' });
In template:
body##{id}
and later in ul.nav
li.home
a(href='/') Home
li
li.about
a(href='/about') About
li
li.contact
a(href='/contact') Contact
In CSS:
#home ul.nav li.home {
background: red;
}
#about ul.nav li.about {
background: red;
}
Take a look at Jade's conditionals, documented on GitHub. You would want to pass the path to the render in Express like so:
res.render('/path', {
path: req.path
});
Then in Jade, you would use a conditional like so:
if path == 'home'
//active styling
else
//not active
I'm trying to run a barely modified version of SlickGrid's example1-simple.html. I'm on Mac OS X Lion, seeing the same behavior with Chrome/Safari/Firefox. Once I have all of the CSS/JS dependencies in place I can directly load the example HTML page (and my slightly modified version) without any trouble. However when I try to serve basically the same page with node/express/jade (using res.render()), the header (column names) row loads, and looking through the rendered HTML I can see that the first row of my data loads but I don't see it in the browser (I'm trying to load 10 rows of data). All of the relevant CSS/JS files seem to be loading properly and I don't see any errors either in the browser console or my node console. I've copied the entirety of the grid-canvas div below.
<div class="grid-canvas" style="height: 250px; width: 240px; ">
<div class="ui-widget-content slick-row even" row="0" style="top:0px">
<div class="slick-cell l0 r0">Battery test #1.csv</div>
<div class="slick-cell l1 r1">1024</div>
<div class="slick-cell l2 r2">1335237255112</div>
</div>
</div>
I'm pretty sure the JavaScript is all right, as it pretty much exactly matches the example HTML page and runs fine when I substitute it in the example1-simple.html document and access it directly. Also when rendering the page with express I can set a breakpoint in my browser at the new Slick.Grid() call and see that the 10-item array of row data is being sent, just not ultimately rendered.
I have basic old-school debug skills (once upon a time I did a lot of Windows programming in VB) but I'm very open to suggestions as to relevant debug tools and techniques I could bring to bear on this type of problem.
Here is my layout.jade:
!!!
html
head
title= title
link(rel="stylesheet", href="/stylesheets/slick.grid.css", type="text/css")
link(rel="stylesheet", href="/stylesheets/css/smoothness/jquery-ui-1.8.19.custom.css", type="text/css")
body!= body
And the jade page with my test code:
#content
#fileGrid
script(src="/javascripts/lib/jquery-1.7.2.js")
script(src="/javascripts/lib/jquery.event.drag-2.0.min.js")
script(src="/javascripts/lib/slick.core.js")
script(src="/javascripts/lib/slick.grid.js")
script
var grid;
var columns = [
{id: "fileName", name: "File Name", field: "fileName"},
{id: "fileSize", name: "File Size", field: "fileSize"},
{id: "lastUpdate", name: "Last Updated", field: "lastUpdate"} // use mtime
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function() {
var timeStamp = new Date();
var numRows = 10;
var data = [];
for (var i = 1 ; i <= numRows ; i++) {
data[i-1] = {
fileName: "Battery test #" + i + ".csv",
fileSize: i * 1024,
lastUpdate: Date.now().toString()
}
};
grid = new Slick.Grid("#fileGrid", data, columns, options);
});
I figured it out. The problem was that I didn't specify a size for my #fileGrid div either in my jade/html or anywhere else in the css, and SlickGrids seemed to assume that the size was zero, and thus didn't render any rows. I changed the jade declaration to #fileGrid(style="width:500px; height:600px) and that fixed it. In retrospect that was really the only thing different between my jade page and the html example.
This looks fishy:
for (var i = 0 ; i <= numRows ; i++)
data[i-1] = {
fileName: "Battery test #" + i + ".csv",
fileSize: i * 1024,
lastUpdate: Date.now().toString(),
};
Why data[i-1] and i <= numRows? You're trying to assign to data[-1] up until data[numRows], where you should assign to data[0] until data[numRows - 1].
On a side note, I would wrap that for loop in braces, even though it's not strictly necessary. Also, the trailing comma (on the last row) will break in Internet Explorer:
for (var i = 0 ; i < numRows ; i++) {
data[i] = {
fileName: "Battery test #" + i + ".csv",
fileSize: i * 1024,
lastUpdate: Date.now().toString()
};
}
You also have a trailing comma in your columns assignment.
#BRValentine, you are right. Slickgrid grid container element must be given an height (width is optional - by default uses 100% available). If you do not provide an height to the container element, Slickgrid does not render the rows.
specifying the target grid div dimensions solved my problem. This is nowhere in instructions... I'm leaving it here so that others can find it.
<div id="classGrid" style="width:500px; height:600px;"></div>
My menu shows the active links when clicked on it except for the home link (http://www.obsia.com). It is never highlighted.
I tried playing around but I can't seem to figure it out. This is the jquery code I used to highlight the links?
$(function(){
var path = location.pathname.substring(1);
if ( path )
$('.nav a[href$="' + path + '"]').attr('class', 'active');
});
I also have another menu on the products pages where I would like to highlight the parents of the siblings and the our products on the global menu. This is the jquery code for the products menu:
$(function() {
var pathname = location.pathname;
var highlight;
//highlight home
if(pathname == "")
highlight = $('ul#accordion > li:first > a:first');
else {
var path = pathname.substring(1);
if (path)
highlight = $('ul#accordion a[href$="' + path + '"]');
}highlight.attr('class', 'active');
// hide 2nd, 3rd, ... level menus
$('ul#accordion ul').hide();
// show child menu on click
$('ul#accordion > li > a.product_menu').click(function() {
//minor improvement
$(this).siblings('ul').toggle("slow");
return false;
});
//open to current group (highlighted link) by show all parent ul's
$('a.active').parents('ul').show();
$('a.active').parents('h2 a').css({'color':'#ff8833'});
//if you only have a 2 level deep navigation you could
//use this instead
//$('a.selected').parents("ul").eq(0).show();
});
});
I tried adding this:
$(this).parents('ul').addClass('active');
but that does not seem to do the trick?
Does anybody have a simple way of accomplishing it?
Any help would be appreciated from you guys.
Kind Regards,
G
I debugged your Javascript. The home link does not highlight because, for the home page, location.pathname is evaluated to the string "/". The variable 'path' is therefore assigned the empty string. This means that the variable 'highlight' is not assigned to.
// path is assigned the empty string
var path = location.pathname.substring(1);
// evaluating to false
if (path) {
// we never get here
highlight = $('ul#accordion a[href$="' + path + '"]');
}
// getting a null pointer exception
highlight.attr('class', 'active');
In Firebug I get highlight is undefined on the line }highlight.attr('class', 'active'); looks like you might need to correct the brackets around the If statement above it?
I figured out how to get the home page link to highlight in the menu bar (That was the only link that would not highlight on the menu bar). Here is what I did:
$(function(){
var pathname = location.pathname;
var path = pathname.substring(1);
if(path == "")
$('.nav a:first').addClass('active');
else (path)
$('.nav a[href$="' + path + '"]').attr('class', 'active');
});