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.
Related
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 try to load different pages using an ajax call. But the pages are not appearing on the main page.
This is the file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News Headlines</title>
<script src="Scripts/jquery.min.js"></script>
<link href="Content/site.css" rel="stylesheet">
<style>
#newslinks li {
display: inline-block;
margin-right: 20px;
}
#newslinks li a {
padding: 5px 10px;
background-color: white;
color: black !important;
text-decoration: none;
}
#newslinks li a:hover {
background-color: rgb(110,138,195);
color: white !important;
}
#headlines #newsItem {
margin-top: 10px;
padding: 20px;
border: 1px solid white;
}
</style>
<script>
$(document).ready(function() {
$('#newslinks a').click(function () {
var url = $(this).attr('href');
$('#healines').load(url + ' #newsItem');
//evt.pr.preventDefault();
return false;
});
}); // end ready
</script>
</head>
<body>
<div class="wrapper">
<header>
JAVASCRIPT <span class="amp">&</span> jQUERY: THE MISSING MANUAL
</header>
<div class="content">
<div class="main">
<h1>News Headlines</h1>
<ul id="newslinks">
<li>Today’s News</li>
<li>Yesterday’s News</li>
<li>Last Week’s News</li>
</ul>
<div id="headlines"></div>
</div>
</div>
<footer>
<p>JavaScript & jQuery: The Missing Manual, 3rd Edition, by David McFarland. Published by O'Reilly Media, Inc.</p>
</footer>
</div>
</body>
</html>
So you see three links. But if you click on one of the links nothing happens. I am using IIS. And yes it is enabled.
Thank you
Misspelled headlines in $('#healines').load(url + ' #newsItem');.
How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over it? I tride to do this with jquery but i didn't really work.
Here's My HTML and CSS:
<DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="LunchWebsiteCSS.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(
{
previousTop: 0
},
function () {
var currentTop = $(window).scrollTop();
if (currentTop < this.previousTop) {
//$(".sidebar em").text("Up"); /* optional for demo */
$(".nav").css({ opacity: 0.5 });
} else {
//$(".sidebar em").text("Down");
$(".nav").css({ opacity: 0 });
}
this.previousTop = currentTop;
});
});
</script>
<script src="js/jjquery.js"></script>
</head>
<body>
<div class="nav">
<ul>
<div class="btn-group">
<li>Browse
</li>
<li>Sign Up
</li>
<li>BHS Lunch</li>
<li>Log In
</li>
<li>Help
</li>
</div>
</ul>
</div>
</body>
.nav {
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
width: 100%;
/*border: 1px solid black;*/
/*background-color: #AA3C39;*/
background-color: #AA3C39;
/*opacity: 0.7;*/
position: fixed;
}
This is how you can do it.
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>100)
$(".nav").css({"background-color" : "rgba(0,0,0,.5)"});
else
$(".nav").css({"background-color" : "rgba(0,0,0,1)"});
});
});
Use CSS to see it back on hover
.nav:hover
{
background-color:rgba(0,0,0,1);
}
Here's the JSfiddle: http://jsfiddle.net/mostthingsweb/cRayJ/1/
I'll include my code and then explain what's wrong
Here's my HTML header to show that everything should be linked:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='test.css'/>
<script src='test.js'></script>
</head>
Here's the CSS:
.draggable {
width: 80px;
height: 80px;
float: left;
margin: 0 10px 10px 0;
font-size: .9em;
}
.ui-widget-header p, .ui-widget-content p {
margin: 0;
}
#snaptarget {
height: 140px;
}
body, html {
background: url('http://i.imgur.com/FBs3b.png') repeat;
}
Here's the JS:
$(document).ready(function() {
$("#draggable5").draggable({
grid: [80, 80]
});
});
So the grid will launch and the paragraph will be there, however if I try to drag it, it won't work. When I inspect the page it gives me an error saying: "Uncaught TypeError: undefined is not a function" that points to line 2 of my JS code. What am I doing wrong?
Here's the whole HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='test.css'/>
<script src='test.js'></script>
</head>
<body>
<div class="demo">
<div id="draggable5" class="draggable ui-widget-content">
<p>I snap to a 80 x 80 grid</p>
</div>
</div>
</body>
</html>
I pasted the code you've submitted into a local HTML file and it works fine for me (I did not add the test.js but pasted the code in script tags just before the closing body tag.
Here's the entire file (tested in Chrome only)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='test.css'/>
<style type="text/css">
.draggable {
width: 80px;
height: 80px;
float: left;
margin: 0 10px 10px 0;
font-size: .9em;
}
.ui-widget-header p, .ui-widget-content p {
margin: 0;
}
#snaptarget {
height: 140px;
}
body, html {
background: url('http://i.imgur.com/FBs3b.png') repeat;
}
</style>
</head>
<body>
<div class="demo">
<div id="draggable5" class="draggable ui-widget-content">
<p>I snap to a 80 x 80 grid</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#draggable5").draggable({
grid: [80, 80]
});
});
</script>
</body>
I think the problem might be that you're loading jquery and your js files in the head of your code. When it reads your js, it's looking for $(#draggable5), but draggable5 hasn't loaded yet, so it's an empty selector. Try moving your scripts to just before the close of your body element.
I'm a newbie to web development. And so, I've just created a sample webpage. It contains an html page, a css file and a JavaScript file. But whenever this JavaScript is linked to the html page, the css formattings are removed. This happens only after linking the JS file. If the same link is removed, css works fine. could u tell me the problem. i'm using windows xp sp3 and google chrome latest. is it the problem with the browser.
Here are my codes
HTML
<!doctype html>
<html>
<head>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" type="text/css" href="Style.css" media="all">
</head>
<body
<div>
<ul id="nav">
<li id="click" Contact</li>
<li Blog</li>
<li Work</li>
<li About</li>
<li Home</li>
</ul>
</div>
</body>
</html>
JS
var list = document.getElementById("nav")
list.addEventListener("click", function(event) {
switch(event.target.id) {
case "click":
document.title="I changed the document title";
break;
}, false);
CSS
body {
margin: 0;
}
#nav {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li {
width: 20%;
float: left;
text-align: center;
display: inline;
}
#nav li a {
line-height: 40px;
display: block;
padding: 0.5em 5px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
-webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
}
#nav a:link, #nav a:visited {
background-color: #071726;
}
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
}
First of all you are not closing your link tag, it should be:
<link rel="stylesheet" type="text/css" href="Style.css" media="all" />
Now regarding your issue. I think you have a problem with the your JavaScript source. Ensure in development tools that your <script type="text/javascript" src="JavaScript.js"></script> actually returns a script - ensure that srs points to the correct location of the script
Made this an answer, since after testing in JSFiddle and comparing it to a fixed version, I suspect it's the source of your problems:
I'd recommend fixing your <body> and <li> opening tags - currently they are being shown as <body and <li respectively, missing their ending braces (>).
This is what your HTML should look like after you fix the problem:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" type="text/css" href="Style.css" media="all">
</head>
<body>
<div>
<ul id="nav">
<li id="click">Contact</li>
<li>Blog</li>
<li>Work</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
</body>
</html>