.nav > li > a:hover,
.nav > li > a:focus,
.navbar-header > a:hover,
.navbar-header > a:focus {
background-color: #7F613F;
}
.icon-color {
color: #282828;
}
.nav {
display: flex;
}
#media (max-width: 768px) {
.nav > li {
float: left;
}
}
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top" style="background-color: #b39369; max-height: 50px;">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="navbar-header">
<ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px; padding-left: 15px;">
<li><a class="icon-change" href="#" style="padding: 15px;"><i class="glyphicon glyphicon-comment icon-color"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
What i want is that if element has class icon-change, that class can get effect something like my css effects.
In other words, What i want to know is how can i change that element's background color when mouse is on that element, or when mouse over that element.
For more example,
when mouse is in the class icon-change, i want icon-change's background color be 'red'.
when mouse is over the class icon-change, i want icon-change's color be 'blue'.
when i mouse click on the class icon-change, i want icon-change's color be 'pink', and it's last until i re-click the class icon-change. In this re-clicked moment, re-clicked class icon-change is returned to fist status like there's nothing happened yet.
How can i do this through jQuery?
You can use .on() see reference here to attach an event handler function
then use mouseenter - use when mouse enter the object
mouseeleave - use when mouse leave the object
click- use when click on the object
$('.icon-change').on('mouseenter',function(){
$('.icon-change').css("background-color","red");
});
$('.icon-change').on('mouseleave',function(){
$('.icon-change').css("background-color","blue");
})
$('.icon-change').on('click',function(){
$('.icon-change').css("background-color","pink");
});
.nav > li > a:hover,
.nav > li > a:focus,
.navbar-header > a:hover,
.navbar-header > a:focus {
background-color: #7F613F;
}
.icon-color {
color: #282828;
}
.nav {
display: flex;
}
#media (max-width: 768px) {
.nav > li {
float: left;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top" style="background-color: #b39369; max-height: 50px;">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="navbar-header">
<ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px; padding-left: 15px;">
<li><a class="icon-change" href="#" style="padding: 15px;"><i class="glyphicon glyphicon-comment icon-color"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
keep using css, just add a class like 'selected' with background-color: pink and toggle it on click
$('.icon-change').click((e) => { e.target.toggleClass('selected'); }
you can handle mouse effect via jquery.
$(selector).on('mouseover mouseleave', function(e){
console.log(e.type)
})
check the console.
you use this methods to achieve
$(".icon-change").mouseover(function(){
$(this).css("background-color","red")
});
similarly you can use other methods.
Try this :
var flag = true;
$(".icon-change").mouseover(function(){
if(flag) {
$(".icon-color").css("color", "blue");
}
});
$(".icon-change").mouseleave(function(){
if(flag) {
$(".icon-color").css("color", "#282828");
}
});
$(".icon-change").click(function(){
if(flag) {
$(".icon-color").css("color", "pink");
flag = false;
} else {
$(".icon-color").css("color", "#282828");
flag = true;
}
});
Related
I want to use jQuery hover()+toggle() for my "mega menu"
there are my basic structure
I feel the toggle to hidden too fast?
because I can't click the google like in the demo "A content"
**
$(function() {
$(".sub_menu").hide();
$("#menuA").hover(function() {
$("#menuA_submenu").toggle();
});
});
.menu{
display:flex;
list-style:none;
}
.menu li {
flex:1;
background:#f35;
padding: 1rem;
margin:1rem;
}
.content{
display:none;
background:#fcc;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul class="menu">
<li id="menuA">A</li>
<li id="menuB">B</li>
<li id="menuC">C</li>
</ul>
<div class="content" id="menuA_submenu">A content
<hr>
google</div>
<div class="content" id="menuB_submenu">B content</div>
<div class="content" id="menuB_submenu">C content</div>
</body>
</html>
**
What is your ultimate goal? How do you hope to present the picture?
Hover $("#menuA") than $("#menuA_submenu") will be displayed.
The cursor has left $("#menuA") before entering $("#menuA_submenu"), so it is no longer hovered.
Suggest a few solutions:
Submenu must be seamless with the menu item.
$(function() {
$(".sub_menu").hide();
$("#menuA, #menuA_submenu").hover(function() {
$("#menuA_submenu").toggle();
});
});
.menu{
display:flex;
list-style:none;
margin-bottom: 0; /*new*/
}
.menu li {
flex:1;
background:#f35;
padding: 1rem;
margin:1rem;
margin-bottom: 0; /*new*/
}
.content{
display:none;
background:#fcc;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<ul class="menu">
<li id="menuA">A</li>
<li id="menuB">B</li>
<li id="menuC">C</li>
</ul>
<div class="content" id="menuA_submenu">A content
<hr>
google
</div>
<div class="content" id="menuB_submenu">B content</div>
<div class="content" id="menuB_submenu">C content</div>
</body>
</html>
Change hover to click trigger.
$(function() {
$(".sub_menu").hide();
$("#menuA").click(function() {
$("#menuA_submenu").toggle();
});
});
When hover, display the corresponding submenu until hover to other buttons. (Each hover behavior can be merged into one.)
$(function() {
$(".sub_menu").hide();
$("#menuA").mouseenter(function() {
$(".content").hide();
$("#menuA_submenu").show();
});
$("#menuB").mouseenter(function() {
$(".content").hide();
$("#menuB_submenu").show();
});
});
Maybe try add param to toggle function
$("#menuA_submenu").toggle(1000);
You can simply use this :
$(function() {
$(".sub_menu").hide();
$("#menuA , .content").hover(function() {
$("#menuA_submenu").toggle();
});
});
.menu{
display:flex;
list-style:none;
}
.menu li {
flex:1;
background:#f35;
padding: 1rem;
margin:1rem;
}
.content{
display:none;
background:#fcc;
margin-top:-32px
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul class="menu">
<li id="menuA">A</li>
<li id="menuB">B</li>
<li id="menuC">C</li>
</ul>
<div class="content" id="menuA_submenu">A content
<hr>
google</div>
<div class="content" id="menuB_submenu">B content</div>
<div class="content" id="menuB_submenu">C content</div>
</body>
</html>
use slideToggle('slow') like this,
$(function() {
$(".sub_menu").hide();
$("#menuA").hover(function() {
$("#menuA_submenu").slideToggle('slow');
});
});
.menu{
display:flex;
list-style:none;
}
.menu li {
flex:1;
background:#f35;
padding: 1rem;
margin:1rem;
}
.content{
display:none;
background:#fcc;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul class="menu">
<li id="menuA">A</li>
<li id="menuB">B</li>
<li id="menuC">C</li>
</ul>
<div class="content" id="menuA_submenu">A content
<hr>
google</div>
<div class="content" id="menuB_submenu">B content</div>
<div class="content" id="menuB_submenu">C content</div>
</body>
</html>
$(document).ready(function() {
var thetimeout;
$('#menuA,.content').mouseover(function() {
clearTimeout(thetimeout);
$('#menuA_submenu').slideDown();
});
$('#menuA,.content').mouseleave(function() {
thetimeout = setTimeout(function() {
$('#menuA_submenu').slideUp();
}, 1000);
});
});
.menu {
display: flex;
list-style: none;
}
.menu li {
flex: 1;
background: #f35;
padding: 1rem;
margin: 1rem;
}
.content {
display: none;
background: #fcc;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul class="menu">
<li id="menuA">A</li>
<li id="menuB">B</li>
<li id="menuC">C</li>
</ul>
<div class="content" id="menuA_submenu">A content
<hr>
google
</div>
<div class="content" id="menuB_submenu">B content</div>
<div class="content" id="menuB_submenu">C content</div>
</body>
</html>
i'm trying to change the active class to the selected item but i could not did it right i've searched on google and here on stack overflow as well and i found the toggle() method so i give it a go on my code but i think i didn't use it right
here is my code:
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<nav class="main-nav">
<div class="logo">
<p class="text">company logo</p>
</div>
<ul class="main-nav-items">
<li class="main-nav-item active" onclick="active()">home</li>
<li class="main-nav-item active" onclick="active()">contact</li>
<li class="main-nav-item active" onclick="active()">about</li>
</ul>
</nav>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
CSS
.main-nav{
display: flex;
align-items: center;
}
.main-nav-items{
display: flex;
width: 1200px;
list-style-type: none;
justify-content: flex-end;
align-items: center;
font-size: 18px;
padding: 10px;
}
.main-nav-item{
font-size: 18px;
padding: 10px;
border-radius: 10px;
}
.main-nav li.active{
background-color: #542188;
padding: 10px;
border-radius: 10px;
color: white;
}
.main-nav-item:hover{
background-color: #ddd;
color: white;
}
JS:
function active(){
var items=document.getElementsByClassName("main-nav-item");
for(var i=0;i<items.length;i++){
items[i].classList=items[i].classList.replace("active","")
}
document.querySelector(".main-nav-item").classList.toggle("active");
}
thank you in advance
first add Jquery to your html doc like this
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<nav class="main-nav">
<div class="logo">
<p class="text">company logo</p>
</div>
<ul class="main-nav-items">
<li class="main-nav-item" onclick="active(1)" id="1">home</li>
<li class="main-nav-item" onclick="active(2)" id="2">contact</li>
<li class="main-nav-item" onclick="active(3)" id="3">about</li>
</ul>
</nav>
<script src="script.js" charset="utf-8"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- here is jquery plugin -->
<script>
function active(id){
$("#"+id).on("click",function(){
$(this).toggleClass("active");
});
}
</script>
</body>
</html>
<li class="main-nav-item active" onclick="active(this)">home</li>
<li class="main-nav-item active" onclick="active(this)">contact</li>
<li class="main-nav-item active" onclick="active(this)">about</li>
you need to pass the element that was clicked, to get a reference on which element would remain to be active.
function active(target){
/* this block is to remove all the active class on all main-nav-item
* [if this scenario is the one you really needed to do
* else remove this part]
*/
var items=document.getElementsByClassName("main-nav-item");
for(var i=0;i<items.length;i++){
items[i].classList.remove("active");
}
/* use the parameter "target" on which you passed using the html code
* "onclick(this)" and toggle the class "active"
*/
target.classList.toggle("active");
}
PS.
if all your main-nav-item has the same flow,
you could use, "querySelectorAll" to get all the main-nav-item and from there, add an event listener for click, and you remove all the "onclick" on your HTML
<ul class="main-nav-items">
<li class="main-nav-item active">home</li>
<li class="main-nav-item active">contact</li>
<li class="main-nav-item active">about</li>
</ul>
var mainNavItems = document.querySelectorAll(".main-nav-item");
Array.forEach(mainNavItems, function( navItem ) {
navItem.addEventListener("click", function(){
/* again, you could remove this block of codes, if you
* just intend to toggle the active class */
var items=document.getElementsByClassName("main-nav-item");
for(var i=0;i<items.length;i++){
items[i].classList.remove("active");
}
this.classList.toggle("active");
});
});
I am currently working on an app. I have a navigation menu that I can open and close using a button, but whenever I load the app the menu is open. I have tried <div id="navigation" style="display:none;"> but that just stops it from opening. I would prefer that this be in HTML, JavaScript, and/or simple CSS, but no jQuery. Also I would like to change the text in the button (span TogNavTxt) to open or close depending on weather the button would open the menu or close the menu. I tried document.getElementById(TogNavTxt).innerHTML = Close; but it didn't work.
index.html:
<!DOCTYPE html>
<html>
<style>
.btn-group button {
background-color: #3333ff;
width: 100%;
border: 1px solid Black;
color: white;
padding: 2px 10px;
cursor: pointer;
float: left;
}
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none;
}
.btn-group button:hover {
background-color: #0000b3;
}
</style>
<head>
<link rel="stylesheet" type="text/css" href="Home.css">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes, width=device-width">
<title>ZcoolUnity</title>
</head>
<body>
<button onclick="ToggleNav('navigation');">Open</button>
<div id="navigation">
<div class="btn-group">
<button><b>Home</b></button>
<button>ZU Games</button>
<button>Community Games</button>
<button>Announcments</button>
<button>Staff</button>
<button>Contact Me</button>
<button>Assets</button>
</div>
</div>
<script type="text/javascript" src="Home.js"></script>
</body>
</html>
Home.js:
function ToggleNav(navigation) {
var e = document.getElementById(navigation);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
Even though you've already accepted an answer, I'm posting this for completeness — it gets rid of the inline styles and inline event handlers, as I mentioned in my comment, and separates the html, css, and javascript (Separation of Concerns — "SoC")
Semantic markup uses classes that describe what something is and/or the state of something, so this describes the navigation block as being either open or closed. What is meant by open or closed is then left up to the style-sheet.
I also changed the <div id="navigation"> to <nav id="navigation"> ... if you're using HTML5 you ought to use the new semantic tags that are available.
I've commented out the <link rel="stylesheet" ...> and the <script src="Home.js"> because a "Stack-snippet" automatically includes them as part of the snippet. Also note that type="text/javascript" is no longer needed in HTML5.
(Stack Snippets! jsfiddles no longer needed!)
function ToggleNav(event) {
let nav = document.getElementById('navigation');
console.log('click triggered');
let navClasses = nav.classList;
if (nav.classList.contains('closed')) {
nav.classList.remove('closed');
nav.classList.add('open');
}
else {
nav.classList.remove('open');
nav.classList.add('closed');
}
}
document.getElementById('toggle-nav')
.addEventListener('click', ToggleNav);
#navigation, #navigation.open {
display: block;
}
#navigation.closed {
display: none;
}
.btn-group button {
background-color: #3333ff;
width: 100%;
border: 1px solid Black;
color: white;
padding: 2px 10px;
cursor: pointer;
float: left;
}
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none;
}
.btn-group button:hover {
background-color: #0000b3;
}
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="Home.css"> -->
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes, width=device-width">
<title>ZcoolUnity</title>
</head>
<body>
<button id="toggle-nav">Open</button>
<nav id="navigation" class="closed">
<div class="btn-group">
<button><b>Home</b></button>
<button>ZU Games</button>
<button>Community Games</button>
<button>Announcments</button>
<button>Staff</button>
<button>Contact Me</button>
<button>Assets</button>
</div>
</nav>
<!-- <script src="Home.js"></script> -->
</body>
</html>
Basically your JS misses some " around the "navigation".
To have it closed on start, add display:none and set the new Button text via innerHTML on a element. On an input-tag with type="button", set the value instead.
HTML:
<div id="navigation" style="display: none;">
<div class="btn-group">
<button><b>Home</b></button>
<button>ZU Games</button>
<button>Community Games</button>
<button>Announcments</button>
<button>Staff</button>
<button>Contact Me</button>
<button>Assets</button>
</div>
</div>
<button id="togglebtn" onclick="toggleNav();">Open</button>
<input id="toggleinput" onclick="toggleNav();" value="Open" type="button">
JS:
function toggleNav(){
var e = document.getElementById("navigation");
if(e.style.display == 'none'){
e.style.display = 'block';
document.getElementById("togglebtn").innerHTML = "Close";
document.getElementById("toggleinput").value = "Close";
} else{
e.style.display = 'none';
document.getElementById("togglebtn").innerHTML = "Open";
document.getElementById("toggleinput").value = "Open";
}
}
Watch in action here:
https://codepen.io/anon/pen/BVwVrg
Just add the following css:
#navigation {
display: none;
}
That hides the menu by default.
Here's a jsfiddle with some other changes (not a lot) that works:
https://jsfiddle.net/md8njv2y/8/
On responsive menu bar I have close and open menu when page is less than 1120px. When I click on the close width of the primary-nav turn to 0 px.
and not coming to its previous size on page resizing.
The html and css code are as given below.
.primary-nav li a{
color:black;
font-size:15px;
font-family:sans-serif;
}
.primary-nav .clickhere a{
font-weight:bold;
color:red;
}
header a img{
padding:10px;
}
.opennav{
display:none;
}
.primary-nav{
width:80%;
}
#media only screen and (max-width: 1100px) {
.primary-nav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 5px;
right: -0%;
background-color: #111;
overflow-x: hidden;
transition: .5s;
}
.primary-nav li .closenav{
color:white;
width:250px;
text-align:right;
padding-right:40px;
margin-top:10px;
cursor: default;
}
.primary-nav li a{
width:220px;
color:wheat;
}
.opennav{
display:block;
position:fixed;
left:91.3%;
top:-1%;
}
}
<!doctype html>
<html>
<head>
<title>bloodropes</title>
<!--[if IE]><script src="jquery-1.7.2.min.js"></script><![endif]-->
<meta name="title" content="Bloodropes | Homepage" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="/stylesheet/home.css" rel="stylesheet" type="text/css">
<script>
function openNav() {
document.getElementById("primary-nav").style.width = "250px";
}
function closeNav() {
document.getElementById("primary-nav").style.width = "0px";
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<header>
<a href="/">
<img src="https://www.google.co.in/logos/doodles/2017/indias-independence-day-2017-6586914957164544-s.png" alt="bloodropes">
</a>
</header>
</div>
<div class="col-md-10">
<h1 onclick="openNav()" class="opennav">☰</h1>
<nav class="navbar">
<ul class="nav navbar-nav primary-nav " id="primary-nav" >
<li>
<h1 onclick="closeNav()" class="closenav">☰</h1>
</li>
<li>
Giving blood
</li>
<li>
about blood
</li>
<li>
Amazing stories
</li>
<li>
News
</li>
<li>
Contact us
</li>
<li>
About us
</li>
<li class="clickhere">
click here to give Blood
</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
I want to change to width of primary as it was before the click on close.
You could look at using jQuery, and using the resize function to check if the browser is below 1120px, something similar to...
$(document).ready(function(){
$(window).on("load resize",function(e){
docWidth = $( document ).width();
if(docWidth >= 1120) {
$( "#primary-nav").removeClass("mobile").addClass("desktop"); //set some CSS to 'desktop' class which controls desktop style
}
else {
$( "#primary-nav").removeClass("desktop").addClass("mobile"); //set some CSS to 'mobile' class which controls mobile style
}
});
});
I am creating a website on github pages using bootstrap, but the drop-down does not seem to be working on the nav bar (sometimes works, sometimes not). I am using $("#nav").load("url");
to load the nav bar so I can change it and have the changes apply to many pages. The drop-downs work on the page that I am loading if I go there directly. The web page is http://scratchos.github.io/index2.html
/resorces/navbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--main.css, i do not know if it is used on the page, i think not-->
<link rel="stylesheet" href="http://scratchos.github.io/stylesheets/main2.css">
<!--meta-->
<meta charset="utf-8">
<!--get url parameters for adding classes to set items to make it applicable to all pages-->
<script>
function getParameter(theParameter) {
var params = window.location.search.substr(1).split('&');
for (var i = 0; i < params.length; i++) {
var p=params[i].split('=');
if (p[0] == theParameter) {
return decodeURIComponent(p[1]);
}
}
return false;
}
</script>
<!--bootstrap dropdown code-->
<script>
$(document).ready = function () {
$('.dropdown-toggle').dropdown();
};
</script>
</head>
<body>
<!--bootstrap nav bar-->
<div class="nav nav-tabs">
<li id="home">Home</li>
<li id="projects">My Projects</li>
<li id="hfb">
<!--JQuery-->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Hungry-For-Blocks<span class="caret"></span></button>
<ul class="dropdown-menu">
<li id="hfb-home">Home</li>
<li id="hfb-about">About</li>
<li id="hfb-doc">Documentation</li>
<li id="hfb-ins">Instalation</li>
</ul>
</div>
</li>
<li id="tut">Tutorials</li>
</div>
<!--script to apply the classes based on url params once page has loaded; it is done in this way because github does not support php:(-->
<script>
window.onload = function () {
$("#" + getParameter("active")).addClass("active");
if (getParameter("dis") !== false) {
$("#" + getParameter("dis")).addClass("disabled");
};
};
</script>
</body>
</html>
/stylesheets/main2.css
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
height: 500px;
background-repeat: no-repeat;
background-size: cover;
color: #ff6600;
}
.jumbotron .container {
position: relative;
top: 100px;
}
.jumbotron h1 {
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotronm p {
font-size: 20px;
}
.learn-more {
background-color: #f7f7f7;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00b0ff;
}
.forum {
padding: 20px;
}
/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--rendering script in css and jquery for the site, not relevent i think?-->
<link rel="stylesheet" href="//scratchos.github.io/ScratchBlocks/scratchblocks2.css">
<script src="//scratchos.github.io/ScratchBlocks/scratchblocks2.js"></script>
<script>
$(document).ready(function() {
scratchblocks2.parse();
});
</script>
<!--bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--main.css custom page css i don't think it is needed in this, because everything it formats has been omitted from this code?-->
<link rel="stylesheet" href="http://scratchos.github.io/stylesheets/main2.css">
<!--set jubmotron background, probably an inefficient way of doing it?-->
<style>.jumbotron{background-image:url('https://scratchos.github.io/images/jumbotron.png');}</style>
<!--bootstrap metas-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--title-->
<title>-ScratchOs|Home</title>
<!--loading the nav bar-->
<script>
$(function(){
$("#nav").load("http://scratchos.github.io/resorces/navbar.html");
});
</script>
<!--bootstrap dropdown code-->
<script>
$('#hfb a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>
</head>
<body>
<!--nav bar-->
<div id="nav"></div>
<!--the rest of the page is not included-->
</body>
</html>
If you can fix the dropdowns it would be excellent. Thanks :)
I would consider using a script.js file instead of embedding it. If you go to http://scratchos.github.io/resorces/navbar.html it works just fine, the problem is that you're defaulting to your index.html (as you should), but it's not getting the code that you put straight into your navbar.html. Making a script file that both pages reference should fix your issue.
Just remove the plugins that are common in both the pages and that will fix it.