When I put a script in my html file, the font changes to default and no styling can be applied:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<ul class="topnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<script>
function myFunction() {
}
</script>
</body>
</html>
CSS file looks like this:
ul.topnav li a {
font-size: 20;
}
If I take out the script the font size changes to 20.
Why does this happen?
You don't set 'px'.
Change to:
ul.topnav li a {
font-size: 20px;
}
Your font-size doesn't have a measurement.
font-size: 20;
Please try giving this an 'em' or 'px' and tell us the results.
ul.topnav li a {
font-size: 20px;
}
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");
});
});
.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;
}
});
when the mouse is entering on the link or hover over the link, the link will get in a bold state and when the mouse is leaving the link it goes back to its normal state, but this is not happening as the toggleClass is not working
Here is the html code
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.bold{
font-weight: bold;
}
.normal{
font-weight: normal;
}
</style>
</head>
<body>
Link
<script src="jquery-3.2.1.js"></script>
<script src="Bind.js"></script>
</body>
</html>
Here is the JS code
$(document).ready(function() {
$('a').bind('mouseenter mouseleave',function(){
$(this).toggleClass('bold');
});
});
$("a").hover(
function() {
$( this ).addClass("bold").removeClass("normal");
}, function() {
$( this ).addClass("normal").removeClass("bold");
}
);
If it is just bold on hover you want to achieve JS is quite overkill just use plain old CSS
a:hover {
font-weight: bold;
}
Looks like works fine:
$(document).ready(function() {
$('a').bind('mouseenter mouseleave',function() {
$(this).toggleClass('bold');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.bold{
font-weight: bold;
}
.normal{
font-weight: normal;
}
</style>
</head>
<body>
Link
<script src="jquery-3.2.1.js"></script>
<script src="Bind.js"></script>
</body>
</html>
But #Maantje is right, if you just want to apply bold on hover, you better just use CSS.
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.
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>