I have a navbar in which I can't really see the .active color as I am using a 3rd party theme that I really like, but however I have one problem with the theme. I can't properly see which of my navbar items that is currently active. Therefore I want to add a background color to the .active element.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<!-- MOBILE FIRST -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- THEMES -->
<!-- <link href="css/theme_black.min.css" rel="stylesheet"> -->
<!-- <link href="css/theme_white.min.css" rel="stylesheet"> -->
<!-- HOMEMADE - these files are local -->
<!-- <script src="js/functions.js"></script> -->
<!-- <link href="css/custom_style.css" rel="stylesheet"> -->
</head>
<body>
<header id="header" class="header clearfix no-padding">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Test</a>
</div>
<div class="collapse navbar-collapse no-padding">
<ul class="nav navbar-nav pull-right" id="navigator">
<li id="home"><a class="border" href="#">Home</a></li>
<li id="about"><a class="border" href="#">About</a></li>
<li id="cv"><a class="border" href="#">CV</a></li>
<li id="contact"><a class="border" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
I am using the following code in my javascript to change the .active item
functions.js
$('#nav li a').click(function() {
$('#nav li').removeClass();
$($(this).attr('href')).addClass('active');
});
I do however want to change the background of the active item, and I have tried a couple of different solutions in my css, but none of them work as intended.
custom_style.css
.no-margin {
margin: 0;
}
.no-padding {
padding: 0;
}
//some sort of .active {
// background-color: blue;
//}
EDIT:
Now with a fiddle: https://jsfiddle.net/819qbftg/2/
To achieve what you want, you have to do two things, make sure you address the right item with JavaScript and override the default styling that's been set by the Bootstrap CSS.
JavaScript (jQuery)
var selector = '.nav li';
$(selector).on('click', function(){
$(selector).removeClass('active');
$(this).addClass('active');
});
You were addressing the #nav, but in your HTML, there was only a class with nav, no ID. Also, don't add the class to the href attribute.
This JS code will first remove .active from all selectors (.nav li) before setting it again on the item that's clicked.
Styling added
.navbar-default .navbar-nav>.active> a,
.navbar-default .navbar-nav>.active> a:focus,
.navbar-default .navbar-nav>.active> a:hover {
background: red; /* Anything you want */
}
See this JSFiddle for a demo.
Override these styles...
<style>
.navbar-default .navbar-nav>li>a:focus { color: #DD0000; }
.navbar-default .navbar-brand:focus { color: #DD0000; }
</style>
I took your file above and put this style tag at the bottom of the <head>. Seems to do what you're asking. I usually do this in a separate CSS for the site that is included last in your CSS links.
Related
My current way of bringing a RSS into form as list looks like this:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="wrapper">
<div class="slider">
<span class="left-arrow">
<i class="material-icons">keyboard_arrow_left</i>
</span>
<span class="right-arrow">
<i class="material-icons">keyboard_arrow_right</i>
</span>
<div class="feed">
<h3>Latest news</h3>
<ul class="list">
</ul>
</div>
</div>
<div class="description">
</p>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://storage.googleapis.com/feednami-static/js/feednami-client-v1.0.1.js'></script><script src="./script.js"></script>
</body>
</html>
<script>
var slideCount,slideWidth,slideHeight,sliderUlWidth;function moveLeft(){$(".carousel").animate({left:+slideWidth},200,function(){$(".carousel li:last-child").prependTo(".carousel"),$(".carousel").css("left","")})}function moveRight(){$(".carousel").animate({left:-slideWidth},200,function(){$(".carousel li:first-child").appendTo(".carousel"),$(".carousel").css("left","")})}function getRssFeed(e,i){return feednami.loadGoogleFormat(encodeURI(e),i)}function mapFeed(e){e.error?console.log(e.error):(createCarouselList(e.feed.entries.slice(0,5)),createFeedList(e.feed.entries.slice(0,20)))}function createCarouselList(e){var i=[];$(e).each(function(e,t){i.push("<li><h3><a target=_blank href='"+t.link+"'>"+t.title+"</a></h3><p>"+new Date(t.publishedDate).toLocaleDateString("pt-BR")+"</p><span class='carousel-footer'>"+(e+1)+" out of 5</span></li>")}),$(".carousel").append(i)}function createFeedList(e){var i=[];$(e).each(function(e,t){i.push("<li><a target=_blank href='"+t.link+"'>"+t.title+"</a></li>")}),$(".list").append(i),returnCarouselList()}function returnCarouselList(){slideCount=$(".carousel li").length,slideWidth=$(".carousel li").width(),slideHeight=$(".carousel li").height(),sliderUlWidth=slideCount*slideWidth,$(".slider").css({width:slideWidth,height:slideHeight}),$(".carousel").css({width:sliderUlWidth,marginLeft:-slideWidth}),$(".carousel li:last-child").prependTo(".carousel")}$(function(){getRssFeed("https://www.youtube.com/feeds/videos.xml?channel_id=UCn-K7GIs62ENvdQe6ZZk9-w",mapFeed),$(".left-arrow").on("click",function(){moveLeft()}),$(".right-arrow").on("click",function(){moveRight()}),$(window).on("resize",function(){returnCarouselList()})});
</script>
<style>
.slider,.slider .carousel li a,.slider .carousel li h3,.slider .carousel li p{color:#fbfbfb}.feed li a,a{color:#fd084a}body,html{background-color:transparent;font-family:Roboto}a{text-decoration:none}p{color:#fff}.description{margin-top:50px}span.left-arrow,span.right-arrow{color:#fbfbfb;cursor:pointer;display:block;font-size:1em;height:auto;padding:1em;position:absolute;top:80%;transition:.3s;width:auto;z-index:999}span.left-arrow:hover,span.right-arrow:hover{background-color:#e40743}.left-arrow{right:60px}.right-arrow{right:0}.slider{overflow:hidden;position:relative}.slider .carousel{height:200px;list-style:none;margin:0;padding:0;position:relative}.slider .carousel .carousel-footer{color:#e40743;bottom:-80px;position:relative}.slider .carousel li{background-color:#fd084a;display:block;float:left;height:300px;margin:0;padding:70px 0;position:relative;text-align:center}.feed{background-color:#fbfbfb;margin:auto}.feed ul{width:100%;margin:0;padding:0}.feed h3{color:#424242;padding:0 .8em}.feed li{align-items:center;display:flex;justify-content:flex-start;list-style:none;transition:background-color .3s;width:100%}.feed li a{margin:0;padding:1em}.feed li:hover{background-color:rgba(253,8,74,.31)}#media only screen and (min-width:780px){.feed,.slider .carousel li{width:700px}}#media only screen and (min-width:680px) and (max-width:779px){.feed,.slider .carousel li{width:600px}}#media only screen and (min-width:480px) and (max-width:679px){.feed,.slider .carousel li{width:400px}}#media only screen and (min-width:320px) and (max-width:479px){.feed,.slider .carousel li{width:300px}}#media only screen and (max-width:319px){.feed,.slider .carousel li{width:200px}}.wrapper{align-items:center;display:flex;flex-direction:column;margin:auto}
</style>
This renders the "title" and "link rel" perfectly fin in list,
however I'd like to add the xml's star count
<media:starRating count="2" average="5.00" min="1" max="5"/>
Right next to the names on this list
(xml example: https://www.youtube.com/feeds/videos.xml?channel_id=UCn-K7GIs62ENvdQe6ZZk9-w)
This is sadly different to the other two elements, so I'm not entirely sure how to do it..
The Following Code is what I tried to execute to to change the content without refreshing the page. I'm unable to execute the home.html and other pages into the main page while I'm trying to call. Can anyone help me out, I'm a beginner in this. Thanks in Advance !
$(document).ready(function(){
$('#content').load('home.html');
})
ul #nav {
list-style:none;
padding:0;
margin: 0 0 10px 0;
}
ul #nav li {
display:inlne;
margin-right:10px;
}
<!Doctype html>
<html>
<head>
<title>Website Name</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- Nav -->
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<!-- Content which would change without refreshing the page -->
<div id="content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="simple.js">
</script>
</body>
</html>
<!-- home.html-->
<h1>Home</h1>
<p>Simple Text</p>
<!-- about.html-->
<h1>About Us</h1>
<p>Simple Text</p>
<!-- contact.html-->
<h1>Contact</h1>
<p>Simple Text</p>
Assuming
$(document).ready(function(){
$('#content').load('home.html');
})
is the the content of simple.js then change the hrefs to actual URLS like home.html and make your code look something like this:
$(function() {
$("#nav").on("click","a",function(e) {
e.preventDefault(); // cancel the link
$("#content").load(this.href); // load the href
});
})
Currently my navbar is about 50px high. I want it to be around 150px. I tried creating adding onto Bootstrap's navbar class by writing my own in the CSS file, but changing the height of navbar, nav, or anything else doesn't seem to affect the layout. How do I change the navbar height? also, the font color?
.navbar-inverse {
background-color: #337ab7;
border-color:#337ab7;
border-radius: 0px;
height:100px;
width:100%;
position: fixed;
}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {
color: #fff;
background-color: #0e364c;
}
.navbar-inverse .navbar-nav>li>a {
color:#ffffff;font-family:
'Open Sans', sans-serif;
}
.navbar-inverse .navbar-brand {
color:#ffffff;
}
.menu {
display:none;
}
#media all and (max-width:768px){
/*login register*/
#import url(http://fonts.googleapis.com/css?family=Roboto);
<head>
{% load static %}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css"
<link type = "text/css" rel = "stylesheet" href= "{% static 'polls/stylesheet.css' %}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<nav class="navbar navbar-inverse" id ="bar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-flag" aria-hidden="true"></span> The Transparency Project</a>
</div><!--navbar-header close-->
<div class="collapse navbar-collapse drop_menu" id="content_details">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span> Home</li>
<li><span class="glyphicon glyphicon-search"></span> Opinions and Analysis</li>
<li><span class="glyphicon glyphicon-phone"></span> Contact</li>
</ul><!--nav navbar-nav close-->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul><!--navbar-right close-->
</div><!--collapse navbar-collapse drop_menu close-->
</div><!--container-fluid close-->
</nav><!--navbar navbar-inverse close-->
<br>
<div class="container">
<div class="jumbotron">
<h1>sign up & login forms Tutorial</h1>
<p> click on login or sign up menu in header</p>
</div>
</div><!--container close-->
First you need to rearrange your stylesheets. Bootstrap needs to be first and your custom css file must come after Bootstrap in order to override it.
Here is the correct order:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link type = "text/css" rel = "stylesheet" href= "{% static 'polls/stylesheet.css' %}" />
Now, in order to override the height of the navbar, in your custom stylesheet change the min-height of the .navbar class
.navbar {
min-height: 150px;
}
and for the color you need the following override:
.navbar-inverse .navbar-nav > li > a {
color: red; /* here goes the color of your choice */
}
You can edit it the way that you have, you just have to make sure your css files are loaded after the bootstrap file. Not before, which is what it looks like is happening.
This is based on the assumpation that this is your css file:
<link type = "text/css" rel = "stylesheet" href= "{% static 'polls/stylesheet.css' %}" />
If you swap these two it should override bootstraps settings:
<link type = "text/css" rel = "stylesheet" href= "{% static 'polls/stylesheet.css' %}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
If bootstrap overriding your CSS property then you have to specify !important to your defined CSS Properties like,
.navbar{
height:150px !important;
}
For custom height you have to use !important in defining your height.
.navbar {
min-height: 150px !important;
}
When I incorporate CKEditor 4.0 with an HTML page without any styles or stylesheet associated, the editor looks fine when it comes to exhibiting bullets and numbers.
However, when I apply the template's stylesheet/CSS, the integrated CKEditor component starts not displaying bullets and numbers properly. I meant it displays the site's stylesheet's bullets which is totally not designated for that context. For e.g. the bullets shows up as a small picture at the right side of each text entry. Or nothing shows up for 1, 2, 3, etc.
How can I make the CKEditor not use the site's stylesheet, but use its own instead. The code snippet looks like below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>FAQ</title>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="~/Content/themes/construct/stylesheets/style.css">
<link rel="stylesheet" href="~/Content/themes/construct/stylesheets/responsive.css">
<script src="~/Content/themes/construct/scripts/jquery.min.js"></script>
<script src="~/Content/themes/construct/scripts/jquery.simpleFAQ-0.7.min.js"></script>
<script src="~/Content/themes/construct/scripts/js_func.js"></script>
<script src="~/ckeditor/ckeditor.js"></script>
<script>
$(function () {
$('#faq').simpleFAQ();
});
</script>
</head>
<body>
<div class="wraper">
<header class="header">
</header>
</div>
<!-- /top_title -->
<!-- /faq_list -->
<div class="faq_list">
<ul class="filter">
<li class="active all">All</li>
<li class="business">Business</li>
<li class="technical">Technical</li>
<li class="miscellaneous">Miscellaneous</li>
</ul>
<ul id="faq">
#foreach (var entry in Model.MyList)
{
<li class="all business">
<p class="question">
#entry.Question
</p>
#foreach (var newEntry in entry.List2)
{
<div class="answer" id="editable" contenteditable="true">
<h1>#newEntry.Header</h1>
<p>#newEntry.Answer</p>
</div>
}
</li>
}
</ul>
</div>
</body>
</html>
Thanks for the help.
Arash
The best way to overwrite the style sheet are..
Copy the same classes into a new file and link this file after the default site. Ex.
default:
.class1 {font: normal 12px Arial;}
overwrite
.class1 {font: bold 12px Arial;}
2.. Follow the previous process and mark attributes as !important. Ex..
default:
.class1 {font: normal 12px Arial;padding:10px;}
overwrite:
.class1 {font: normal 12px Arial;padding-left:10px !important;}
I'm tying to implement Twitter-Bootstrap Scrollspy on a menu so that when the user scrolls to a section of the page the css class is changed. This proven to be beyond frustrating. I'm already using the affix code from the code which works great.
So from my code below when a user scrolls to the LI element of #ScrollSpyContent I want to change the class of .product_submenu_image to .product_submenu_active.
How can I do this?
(I'm using jsp's in java so their might be some java code in here. I tried to strip out most of it.)
Thanks.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/bootstrap.css"/>
<link rel="stylesheet" href="/css/bootstrap-responsive.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</head>
<body>
<header></header>
<div class="row-fluid product_submenu">
<nav class="span10 offset1">
<ul class="productmenus">
<li><div class="product_submenu_image"><img src="../img/product_computer.png" alt=""/> Product Features</div></li>
<li><div class="product_submenu_image product_submenu_border"><img src="../img/product_people.png" alt=""/> Getting Started</div></li>
<li><div class="product_submenu_image product_submenu_border"><img src="../img/product_phone.png" alt=""/> Product Support</div></li>
</ul>
</nav>
</div>
<div class="container-fluid">
<nav class="row-fluid" >
<ul class="span10 offset1" data-spy="scroll">
<li class="row-fluid" id="product_features"></li> <!-- End Product Features -->
<li class="row-fluid" id="gettingstarted"></li> <!-- End Getting Started -->
<li class="row-fluid" id="product_support"></li><!-- End Product support -->
</ul>
</nav>
</div>
<footer></footer>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="/js/bootstrap.js"></script>
<script>
$(function() {
var $spy = $('.productmenus');
$spy.scrollspy({offset: 20});
$spy.bind("activate", function(e) {
//e.target is the current <li> element
var header = $(e.target).find(".product_submenu_image");
$(header).addClass('active');
});
});
</script>
</body>
</html>
CSS:
.product_submenu_image
{
background: url('../img/product_tab_default.gif');
max-height: 100%;
padding: 18% 0 18% 0;
border: none;
}
.product_submenu_image.active
{
background: blue;
/*background: url('../img/product_tab_selected.gif');*/
}
So you need to use the scroll spy activate event described here:
http://twitter.github.com/bootstrap/javascript.html#scrollspy
Basically you need some code like so:
$(function() {
var $spy = $('.nav.nav-pills');
$spy.scrollspy({offset: 20});
$spy.bind("activate", function(e) {
// do stuff here when a new section is in view
});
});
Here is a working example:
http://jsfiddle.net/hajpoj/f2z6u/3/
please ignore the fact that it starts at the bottom... not sure if that a unrelated or related bug, but the main point is you can see how the activate event works