I've tried to render a page index.ssp in my scalatra controller, but it shows me an error:
ssp("index")
//Error : Template file extension missing. Cannot determine which template processor to use.
My Servlet extends ScalatraServlet with ScalateSupport and my file is in WEB-INF directory. i've left the extension because the document stated .ssp is implicit and not required.
Is there anything else i need to do other than this?directory.
When rendering your views Scalate will look for a layout in the following folder:
/WEB-INF/layouts/default.ssp (or default.scaml but lets consider ssp).
So, create this file and add the following: (this snippet is taken from the book Scalatra in Action)
<%# val body:String %>
<html>
<head>
<title>Scalatra CMS</title>
<!-- Bootstrap -->
<link href="/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style type="text/css">
body {
padding-top: 60px;
}
</style>
</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>
<ul class="nav">
<li>
<a class="brand" href="/" id="server">
Scalatra CMS
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<%= unescape(body) %>
</div> <!-- /container -->
</body>
</html>
Then add an page, say bla.ssp to /WEB-INF/templates/views/pages.
The bla.ssp will contain your html content, e.g.:
<div class="row">
<h2>everyone </h2>
<p class="lead">hello </p>
</div>
In the servlet add the following:
layoutTemplate("/WEB-INF/templates/views/pages/bla.ssp")
This should work.
With scalatra 2.5.1 i was given a different default folder structure:
webapp\WEB-INF\templates\layout\default.jade
webapp\WEB-INF\templates\views
were i added:
webapp\WEB-INF\templates\views\index.ssp
, then in the controller i have:
contentType="text/html"
jade("/templates/views/index.ssp", "layout" -> "WEB-INF/templates/layouts/default.jade",
"title" -> <title>,
... -> ...)
Related
iframe in bootstrap card scales with width but not height how do I make the height responsive as well?
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row no-gutters">
<div class="col-12">
<div class="card mt-4" style="width: 100%;">
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM" style: width="100%" height="100%" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
From the bootstrap documentation: (https://getbootstrap.com/docs/5.2/helpers/ratio/#example)
Wrap any embed, like an <iframe>, in a parent element with .ratio and an aspect ratio class. The immediate child element is automatically sized thanks to our universal selector .ratio > *.
I also removed the unneeded (hardcoded) width/height attributes.
See sample code below:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-12">
<div class="card mt-4">
<!-- changes made from here -->
<div class="ratio ratio-16x9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM" allowfullscreen></iframe>
</div>
<!-- to here -->
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
I am new at django and I have an app in django project. My base.html has navigation bar through which you can redirect to "about", 'contact us', 'home'.
The first page when app starts (after loging in) is home.
<!DOCTYPE html>
<html lang="en">
<head>
{%load staticfiles%}
<meta charset="utf-8">
<title>Ekyam: India's First Entrepreneurial Ecosystem</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900" rel="stylesheet">
<!-- Bootstrap CSS File -->
<link href="{% static "visit/lib/bootstrap/css/bootstrap.min.css" %}" rel="stylesheet">
<!-- Libraries CSS Files -->
<link href="{% static "visit/lib/font-awesome/css/font-awesome.min.css"%}" rel="stylesheet">
<link href="{% static "visit/lib/owlcarousel/owl.carousel.min.css" %}" rel="stylesheet">
<link href="{% static "visit/lib/owlcarousel/owl.theme.min.css"%}" rel="stylesheet">
<link href="{% static "visit/lib/owlcarousel/owl.transitions.min.css" %}" rel="stylesheet">
<!-- Main Stylesheet File -->
<link href="{%static "visit/css/style.css"%}" rel="stylesheet">
<!--Your custom colour override - predefined colours are: colour-blue.css, colour-green.css, colour-lavander.css, orange is default-->
<link href="#" id="colour-blue" rel="stylesheet">
</head>
<body class="page-index has-hero">
<!--Change the background class to alter background image, options are: benches, boots, buildings, city, metro -->
<div id="background-wrapper" class="city" data-stellar-background-ratio="0.1">
<!-- ======== #Region: #navigation ======== -->
<div id="navigation" class="wrapper">
<!--Hidden Header Region-->
<div class="header-hidden collapse">
<div class="header-hidden-inner container">
<div class="row">
<div class="col-md-3">
<h3>
About Us
</h3>
<p>Ekyam is dedicated to support and nourish Startups and accelaration</p>
<i class="fa fa-plus"></i> Learn more
</div>
<div class="col-md-3">
<!--#todo: replace with company contact details-->
<h3>
Contact Us
</h3>
<address>
<strong>EKYAM</strong>
<abbr title="Address"><i class="fa fa-pushpin"></i></abbr>
MMMDU, Mullana, Ambala- Haryana
<br>
<abbr title="Phone"><i class="fa fa-phone"></i></abbr>
8219984448
<br>
<abbr title="Email"><i class="fa fa-envelope-alt"></i></abbr>
info#ekyam.com
</address>
</div>
<div class="col-md-6">
<!--Colour & Background Switch for demo - #todo: remove in production-->
<h3>
Theme Variations
</h3>
<div class="switcher">
<div class="cols">
Backgrounds:
<br>
Benches Boots Buildings
City Metro
</div>
<div class="cols">
Colours:
<br>
Orange Green Blue <a href="#lavender" class="colour lavender "
title="Lavender">Lavender</a>
</div>
</div>
<p>
<small>Selection is not persistent.</small>
</p>
</div>
</div>
</div>
</div>
<!--Header & navbar-branding region-->
<div class="header">
<div class="header-inner container">
<div class="row">
<div class="col-md-8">
<!--navbar-branding/logo - hidden image tag & site name so things like Facebook to pick up, actual logo set via CSS for flexibility -->
<a class="navbar-brand" title="Home" href = "{% url "visit:index"%}">
<h1 class="hidden">
<h1>EKYAM</h1>
</h1>
</a>
<br/>
<div class="navbar-slogan">
Hub Of StartUp
<br> By The Brogrammers
</div>
</div>
<!--header rightside-->
<div class="col-md-4">
<!--user menu-->
<ul class="list-inline user-menu pull-right">
</ul>
<ul class="list-inline user-menu pull-right">
<li class="user-register"><i class="fa fa-edit text-primary "></i> Register</li>
<li class="user-login"><i class="fa fa-sign-in text-primary"></i> Login</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="navbar navbar-default">
<!--mobile collapse menu button-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<!--everything within this div is collapsed on mobile-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="main-menu">
<li class="icon-link">
<i class="fa fa-home"></i>
</li>
<li class="dropdown">
Comunity<b class="caret"></b>
<!-- Dropdown Menu -->
<ul class="dropdown-menu">
<li class="dropdown-header"> </li>
<li>Services</li>
<li>About Us</li>
<li>Login</li>
<li>Sign-Up</li>
<li class="dropdown-footer">Connect</li>
</ul>
</li>
<li>Join Us</li>
<li class="dropdown dropdown-mm">
Mega Menu<b class="caret"></b>
<!-- Dropdown Menu -->
<ul class="dropdown-menu dropdown-menu-mm dropdown-menu-persist">
<li class="row">
<ul class="col-md-6">
<li class="dropdown-header">Websites and Apps</li>
<li>Analysis and Planning</li>
<li>User Experience / Information Architecture</li>
<li>User Interface Design / UI Design</li>
<li>Code & Development / Implementation & Support</li>
</ul>
<ul class="col-md-6">
<li class="dropdown-header">Enterprise solutions</li>
<li>Business Analysis</li>
<li>Custom UX Consulting</li>
<li>Quality Assurance</li>
</ul>
</li>
<li class="dropdown-footer">
<div class="row">
<div class="col-md-7">Like the lite version? <strong>Get the extended version of Flexor.</strong></div>
<div class="col-md-5">
<i class="fa fa-cloud-download"></i> Get It Now
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</div>
</div>
<div class="hero" id="highlighted">
<div class="inner">
<!--Slideshow-->
<div id="highlighted-slider" class="container">
<div class="item-slider" data-toggle="owlcarousel" data-owlcarousel-settings='{"singleItem":true, "navigation":true, "transitionStyle":"fadeUp"}'>
<!--Slideshow content-->
<!--Slide 1-->
{%block content%}
{%endblock%}
</div>
<div class="col-md-6 hidden-xs">
<img src="img/slides/slide2.png" alt="Slide 2" class="center-block img-responsive">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer id="footer" class="block block-bg-grey-dark" data-block-bg-img="img/bg_footer-map.png" data-stellar-background-ratio="0.4">
<div class="container">
<div class="row" id="contact">
<div class="col-md-3">
<address>
<strong>JunityMe Inc</strong>
<br>
<i class="fa fa-map-pin fa-fw text-primary"></i> Maharishi Markendeshver Engineering College
<br>
<i class="fa fa-phone fa-fw text-primary"></i> 8219984448
<br>
<i class="fa fa-envelope-o fa-fw text-primary"></i> info#junity.com
<br>
</address>
</div>
Top
</div>
</footer>
The problem is, only this template is getting rendered. When I click on the other options on the navigation bar, the url changer(/incubator/) but the template remains the same.
urls.py:
from django.conf.urls import url
from . import views
app_name = 'main'
urlpatterns = [
url(r'^', views.home, name='home'),
url(r'incubators/', views.incubators, name='incubators'),
url(r'about/', views.about, name='about'),
]
I don't see any kinds of error. Somehow I think my urls are unable to connect to views.py.
views.py:
from django.shortcuts import render
from django.http import HttpResponse
def home(request):
return render(request, 'main/home.html')
def incubators(request):
return render(request, 'main/incubators.html')
def about(request):
return HttpResponse("dsfsddsf")
Please suggest edits if I can make it as simple as possible.
The problem is
url(r'^', views.home, name='home'),
The ^ sign means start of url so that matches all urls that have a start, i.e every url. So any URL will be rendered by views.home.
move that one to the bottom of the list, Then it will only match anything when all the other URLs have tried and it will do what you want.
If you really want to match only / then add
url(r'^$', views.home, name='home'),
$ means the end of an url, so that matches where there is nothing at all between the start and the end, i.e a empty url path
I'm creating app in crystal-lang with kemal the web framework.
How can I use style.css or Bootstrap files in the app template in kemal?
myapp.cr location = src/myapp.cr
bootstrap located = src/public/css/bootstrap.css
layout file = src/views/layout/standard.ecr
I also tried the full path but this did not work, too. No style will be loaded.
Here is my standard.ecr (layout file)
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title><%= title %> | Crystal Website</title>
<!-- Bootstrap -->
<link href="../public/css/bootstrap.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Crystal Website</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li
<% if env.request.path == "/" %>class="active"
<% end %>>Home</li>
<li
<% if env.request.path == "/about" %>class="active"
<% end %>>About</li>
<li
<% if env.request.path == "/contact" %>class="active"
<% end %>> Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<%= content %>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/js/bootstrap.js"></script>
</body>
</html>
By default your public folder should be in /public path and not in /src/public.
Here's the folder structure
- public
- css
- bootstrap.css
- src
- myapp.cr
- views
- layout
- standard.ecr
Why I can't thing a view like part of a module?.
In .NET you have the view and the code behind. Sometimes we need to do somehing that match with this logic like grid with a widget inside each cell. Usually a widget have a little nice box with a title and the content, with a little logic, how I can include a partial like that to another view like that.
#extends('jarvis.admin._layouts.default')
#section('title')
Dashboard
#stop
#section('main')
<div class="row-fluid">
<div class="span4">
#yield('first')
<div class="jarviswidget" id="widget-id-00">
<header>
<h2>{{ $widget['title'] }}</h2>
</header>
<div>
<div class="jarviswidget-editbox">
<div>
<label>{{ ucfirst(Lang::get('strings.title')) }}:</label>
<input type="text">
</div>
<div>
<label>{{ ucfirst(Lang::get('strings.style')) }}</label>
<span data-widget-setstyle="red" class="red-btn"></span>
<span data-widget-setstyle="green" class="green-btn"></span>
<span data-widget-setstyle="purple" class="purple-btn"></span>
<span data-widget-setstyle="black" class="black-btn"></span>
<span data-widget-setstyle="darkgrey" class="darkgrey-btn"></span>
</div>
</div>
<div class="jarviswidget-timestamp"></div>
<div class="inner-spacer">
<!-- content goes here -->
#yield('wg_content')
Content
</div>
</div>
</div>
</div>
<div class="span4">
#yield('second')
<div class="jarviswidget" id="widget-id-00">
<header>
<h2>{{ $widget['title'] }}</h2>
</header>
<div>
<div class="jarviswidget-editbox">
<div>
<label>{{ ucfirst(Lang::get('strings.title')) }}:</label>
<input type="text">
</div>
<div>
<label>{{ ucfirst(Lang::get('strings.style')) }}</label>
<span data-widget-setstyle="red" class="red-btn"></span>
<span data-widget-setstyle="green" class="green-btn"></span>
<span data-widget-setstyle="purple" class="purple-btn"></span>
<span data-widget-setstyle="black" class="black-btn"></span>
<span data-widget-setstyle="darkgrey" class="darkgrey-btn"></span>
</div>
</div>
<div class="jarviswidget-timestamp"></div>
<div class="inner-spacer">
<!-- content goes here -->
#yield('wg_content')
Content
</div>
</div>
</div>
</div>
<div class="span4">
#yield('third')
<div class="jarviswidget" id="widget-id-00">
<header>
<h2>{{ $widget['title'] }}</h2>
</header>
<div>
<div class="jarviswidget-editbox">
<div>
<label>{{ ucfirst(Lang::get('strings.title')) }}:</label>
<input type="text">
</div>
<div>
<label>{{ ucfirst(Lang::get('strings.style')) }}</label>
<span data-widget-setstyle="red" class="red-btn"></span>
<span data-widget-setstyle="green" class="green-btn"></span>
<span data-widget-setstyle="purple" class="purple-btn"></span>
<span data-widget-setstyle="black" class="black-btn"></span>
<span data-widget-setstyle="darkgrey" class="darkgrey-btn"></span>
</div>
</div>
<div class="jarviswidget-timestamp"></div>
<div class="inner-spacer">
<!-- content goes here -->
#yield('wg_content')
Content
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
</div>
</div>
#stop
Where each #yield will load a small widget processing the little logic or even another template with another nested views.
For example #yield('first') will load a box that is another template with a yield inside, and a variable as title. This nested yield will have another yield or the content... then the same box we use for the box will be used another time to render #yield('second') with another title and another content, that maybe use the same as the first yield.
I don't understand how to make this cascade with blade template system. Is there a way to do something similar?
I know is complicated but if you ever used .net, you could understand what I mean.
Thanks and sorry for my english.
Do that have similarities with the HMVC model, but is not the same.
I found the solution...
Is a little complicated to explain here but I'm going to do my best.
Try this:
default template (default.blade.php)
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div class="fluid-container">
#yield('main')
</div>
</body>
</html>
default content template (mypage.blade.php)
#extends('_layouts.default')
#section('main')
<div id="widget-grid">
<div class="row-fluid">
<article class="span12">
#include('_modules.mymodule')
</article>
</div>
</div>
#stop
module template (mymodule.blade.php)
We send some variables to the shared template widget
#extends('admin._partials.widget', array('widget' => array('title' => 'title', 'id' => 'some_id', 'style' => 'your: style')))
#section('wg_content')
<!-- Your widget content goes here -->
#overwrite
shared template (widget.blade.php)
Your title $widget['title']
Your id $widget['id']
Your style $widget['style']
<!-- content -->
#yield('wg_content')
The views directory tree would be:
views
_layouts
default.blade.php
_partials
widget.blade.php
_modules
mymodule.blade.php
page
mypage.blade.php
Now when you make the view from the controller you should call mypage.
The magic directive is #overwrite in the bottom of module template.
Now when you call the module, the system get the widget template and wrap mymodule, then add this to the page and finally wrap everything within default which is the main template.
This help you to share a template with others. I know you have question, ASK! XD
My navbar is supposed to collapse to a select-list when the screen is resized below threshold. It works for my home page, but not for the others, i.e. on other pages besides home page, when the screen is resized until the sites collapsed, the navbar disappears completely (the select-list element that's supposed to be there is not there). I have a submenu below my navbar, and it collapses just fine. I wonder what's the problem? Could it be scripts conflict (but collapse is bootstrap css right)?
My navbar is of class navbar, with a logo of tag at the left and for the link buttons.
I use jQuery and django alongside bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<!--
<link rel="stylesheet" type="text/css" href="/static/global.css">
-->
<link rel="stylesheet" type="text/css" href="/static/smoothness/jquery-ui-1.10.0.custom.min.css">
<link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css">
<!--[if ie]><meta content='IE=8' http-equiv='X-UA-Compatible'/><![endif]-->
<link href="/static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!--link href="/static/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"-->
<link href="/static/bootstrap/css/paralax.css" rel="stylesheet" type="text/css">
<link href="/static/bootstrap/css/main.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<link href="css/ie.css" rel="stylesheet"/>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
<script src="/static/bootstrap/js/modernizr.custom.js"></script>
<script src="/static/js/jquery-1.9.0.js"></script>
<script src="/static/js/jquery-ui-1.10.0.custom.min.js"></script>
<script src="/static/bootstrap/js/jquery.scrolltotop.js"></script>
<script src="/static/bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="/static/highcharts-3/js/highcharts.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/bootstrap/js/superfish.js"></script>
<title>CoAssets Platform (BETA)</title>
</head>
<body>
<!--div class="container-fluid"-->
<div class="row-fluid">
<div class="span12" id="topmenu">
{% block topmenu %}{% endblock %}
</div>
</div>
<div class="row-fluid" style="background-color:#ffad37">
<div class="span12" id="submenu" style="padding-top:2px; padding bottom:2px">
<ul class="nav nav-pills">
{% block submenu %}{% endblock %}
<li class="pull-right"><a class="btn" href="/account/logout" style="font-size: 16px; font-family: 'PT Sans', sans-serif; text-align: center;">Logout</a>
<li class="pull-right">Account</li>
</ul>
</div>
</div>
<!--/div-->
<!--div class="container-fluid"-->
<div class="row-fluid">
<div class="span12" id="main">
{% block main_body %}{% endblock %}
</div>
</div>
<!--/div-->
</br>
<div class="container-fluid" id="copyright">
<div class="row-fluid">
<div class="span4">
<p>Legalise</p>
<p>Contact Us</p>
</div>
<div class="span4">
<p>Partners</p>
<p>FAQ</p>
<p>Definitions</p>
</div>
<div class="span4">
<p>Admin</p>
</div>
</div>
<div class="row-fluid" id="copyright">
<div class="span12" id="footer">
<p>Copyright of CoAssets.com © 2013</p>
</div>
</div>
</div>
<script>
//script conflicts with some other jQuery scripts, so need to handle this script
jQuery.noConflict();
$(document).ready(function($){
$('.nav li').each(function() {
var currentPath = window.location.pathname;
var thisPath = $(this).children().attr('href');
//alert("sub menu currentPath= "+currentPath+" thisPath= "+thisPath);
$(this).removeClass('active');
if (thisPath == currentPath && !$(this).hasClass('active')) {
$(this).addClass('active');
};
});
$('#menu li').each(function() {
var currentPath = window.location.pathname;
var thisPath = $(this).children().attr('href');
var len = thisPath.length;
//alert("top menu currentPath= "+currentPath+" thisPath= "+thisPath);
$(this).removeClass('active');
if (thisPath != '/' && thisPath == currentPath.substring(0,len)
&& !$(this).hasClass('active')) {
$(this).addClass('active');
} else if (thisPath=='/' && currentPath == '/')
{
$(this).addClass('active');
};
});
});
</script>
</body>
</html>
{% extends "base.html" %}
{% block topbar %}
{% endblock %}
{% block topmenu %}
<section class="navbar">
<div class="navbar-inner main-menu">
<div class="row-fluid">
<div class="span2">
<img src="/public_media/index_01 edited4.png" alt="">
</div>
<div class="span10">
<nav id="menu" class="pull-right" >
<ul>
<li class="active">Home<br/><span>CoAssets</span></li>
<li>News</li>
<li>Portfolio</li>
<li>Opportunities</li>
<li>New Opportunities</li>
<li>Transaction</li>
<li>Research</li>
<!--li>Account</li-->
<!--li>Admin</li-->
</ul>
</nav>
</div>
</div>
</div>
</section>
{%comment%}
<div class="label label-warning offset2">
<p>CoAssets Beta</p>
</div>
{%endcomment%}
{% endblock %}
Using bootstrap 3.0, navbar-inner is no longer a class, and in my case, when experiencing this issue, removing that class resulted in the correct behavior.
<nav class="navbar" role="navigation">
<div class="container">
<div class="navbar navbar-inverse ">
<!-- Brand and toggle get grouped for better mobile display -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsing-nav">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="collapsing-nav">
<ul class="nav navbar-nav">
<!-- dropdown items go here -->
</ul>
</div>
</div><!--/.navbar -->
</div><!-- /.container -->
</nav>
alternatively, you could add the following into your style declarations to self-support this
.navbar-inner {
min-height: 50px;
}
The issue is cause by a combination of things:
no text in navbar when in collapsed mode (most common is navbar-brand item)
this leaves on floated elements in the layout
removal of navbar-inner class from the bootstrap library
the dev team fixed this here, however there are a lot of example pieces of code out there where users who needed to use a nav inside of a .container, and recommended using .navbar-inner... which no longer exists.
The use of that non-existent class throws off your css because bootstrap compiles the css from less, and that property is assigned to the .navbar property, but not .navbar-inner, so basically the min-height property does not wind up being assigned assigned to your navbar, and you're left with no height on the nav, no text to give the element a calculated height, and only floating elements that are outside of the flow and don't get calculated in height computations.
I had a similar problem , but just I added "position:fixed " for container and it works. Try , maybe it works for you.