I have the following html that toggles the navbar.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="vendors/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="vendors/fontawesome/css/all.css">
<link rel="stylesheet" href="vendors/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" href="vendors/selectFX/css/cs-skin-elastic.css">
<link rel="stylesheet" href="assets/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body>
<!-- Left Panel -->
<aside id="left-panel" class="left-panel">
<nav class="navbar navbar-expand-sm navbar-default">
<div class="navbar-header">
<a id="menuToggle" class="navbar-brand"><img src="images/pfcnowhite.png" alt="PFC"></a>
<a id="menuToggle" class="navbar-brand hidden"><img src="images/pfcp.jpg" alt="PFC"></a>
</div>
</nav>
</aside>
<!-- /#left-panel -->
<div id="right-panel" class="right-panel">
</div>
<script src="vendors/jquery/dist/jquery.min.js"></script>
<script src="vendors/popper.js/dist/umd/popper.min.js"></script>
<script src="vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
Now, I know my css and js won't work if someone tries to implement it because those are locally stored on my dev environment hopefully that won't be an issue with my question.
As it is right now, if I load the page it shows me the navbar-brand image just fine and when I click it the left panel does toggle as expected and then it shows me the navbar-brand hidden image as it should but when I click the hidden image it doesn't toggle back.
I'm trying to make it work without the 'normal' fa-bars on the side, any help or advise is greatly appreciated
Related
for some reason I my index.html does not read the style.css. It is linked though. what is the issue ? I added the type, I did add the right path I think.
thank you
<!DOCTYPE html>
<html lang="en">
<head>
<title> </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font-awesome.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--Main Start-->
<div class='main'>
<!--Home Section Start-->
<section class='home-section'>
<div class='container'>
< div class ='row'>
<div class='home-text'>
<p> </p>
<h1> </h1>
<h2></h2>
</div>
<div class='home-img'></div>
</div>
</div>
</section>
<!-- Home Section End-->
</div>
<!--Main End-->
<script src="js/script.js"></script>
</body>
</html>
Issue solved, it was that I forgot one root variable.
Just Try :
<html>
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font-awesome.css">
<!-- Here Head Content-->
</head>
<body>
<!-- Here Body Content-->
</body>
<html>
But also after you added screenshot for your CSS File you said in previous
answer that it the problem was from the CSS File not the linking (That mean if
there is something wrong with your CSS File the whole file not work)
One possible cause of such problems are browser cache.
If you are on windows, try running ctrl+f5 to reload the page.
Every thing is correct whith you, the only thing that may be wrong is that the css file is not in the same folder with the index, for no reason, also try removing type="text/css",it may work.
I have looked around but still can't get my code to load my html file. From my index.html file I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>David Anderson, Georgia Tech Professor</title>
<link rel="stylesheet" href="Assets/Stylesheets/default.css">
<link rel="stylesheet" href="Assets/Stylesheets/header.css">
<link rel="stylesheet" href="Assets/Stylesheets/body.css">
<link rel="stylesheet" href="Assets/Stylesheets/footer.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#header').load('header.html');
alert("Does this load!!!??")
</script>
</head>
<body>
<div id="header"></div>
<section class="section_2 index_section">
...
</section>
...
</body>
</html>
And such.
I included the alert for debugging purposes and it works fine, but it never loads my header.html file. I have included both files in the same directory and level.
My header.html includes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="Assets/Stylesheets/default.css">
<link rel="stylesheet" href="Assets/Stylesheets/header.css">
<link rel="stylesheet" href="Assets/Stylesheets/body.css">
<link rel="stylesheet" href="Assets/Stylesheets/footer.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<!------------
- Header -
------------->
<header class="section_1" id="header">
<img src="Images/David's_typical_Profile_Picture.jpg" alt="David Anderson" id="prof_pic">
<h1 id="name_plate">
<a class="name_plate" href="about.html">David Anderson</a>
</h1>
<h2 id="institution_name">
Georgia Institute of Technology
</h2>
<nav id="main_nav">
<ul class="semantic_list">
<li>Home</li>
<li>Courses
<ul>
<li>ECE 6254</li>
<li>ECE 6271</li>
</ul>
</li>
<li>Lab</li>
<li>Consulting</li>
<li>About</li>
</ul>
</nav>
</header>
</html>
I have looked around everywhere, including Adding jQuery to sublime text 2, Why does jQuery or a DOM method such as getElementById not find the element?, https://learn.jquery.com/using-jquery-core/document-ready/ as well as websites about writing/including javascript: https://www.sitepoint.com/community/t/multiple-pages-without-repeating-the-site-structure/8251/3, https://www.sitepoint.com/community/t/calling-multiple-htmls-into-single-html-file/216583/2, but I still run into the same problem, where it simply doesn't load header.html. Ever.
I am loading it on safari using a local path, not a website.
If anyone has a solution/or answer I'd be very grateful.
Thanks!
I have followed the instructions in installing semantic from Semantic-ui.com. I successfully installed semantic in my project folder and build using gulp
and I have my files in semantic/dist folder
I have the code in index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Semantic UI</title>
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>
</head>
<body>
<header>Semantic ui</header>
<div class="ui sidebar vertical left inverted menu">
Monday
Tuesday
Wednesday
Thursday
Friday
</div>
<div class="ui basic icon top fixed menu">
<a id="toggle" class="item">
<i class="sidebar icon"></i>
Menu
</a>
</div>
<div class="pusher">
jflkjf f lekjflke fsdf s;lfks; kf;skvm ;sl;lfsdk g;ldkgl;ksd
</div>
<script>
$("#toggle").click(function(){
$(".ui.sidebar").toggle();
});
</script>
</body>
</html>
When I open index.html in my browser, I see the styling fine on my page but when I click on my menu I don't see anything firing. The dates don't show up. Can anybody tell me what I am missing?
just include jquery before semantic css
I have this VERY simple line of code. I am just starting in doing some Javascript coding but I cannot make this work. Can you please tell me why?
<html>
<head>
<script src="bootstrap.min.js"></script>
<title>My Website</title>
</head>
<body>
<p>This is an example of a paragraph.</p>
<button type="button" class="btn btn-danger">Danger daw!</button>
</body>
</html>
The bootstrap is not appearing on the page.
Bootsrap has Javascript, CSS and an optional theme. From the Getting Started link on the bootstrap site you have the following code which will include them all for you.
If you are hosting the files yourself, just update the paths to the files.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Add this beetween your head tags:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
You should include css file path, here i used BootstrapCDN. And try to learn about bootstrap from here . I hope this is helpful.
<html>
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<title>My Website</title>
</head>
<body>
<p>This is an example of a paragraph.</p>
<button type="button" class="btn btn-danger">Danger daw!</button>
</body>
</html>
U miss incldue CSS.
<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>
Bootstrap requires jquery as a dependency.
Use the following code as suggested by rdn87
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap</h1>
<p>Text goes here</p>
</div>
</body>
</html>
I am now writing a web page using a bootstrap 3 template. When I include a jquery plugin (jquery-frontier-calendar) in my page, I found that it does not work. I guess the problem is due to overlapping of javascript library.
For example, if I use the code below, the calendar works well but dropdown menu in my page not work.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="image/pageLogo.jpg">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/homepage/navbar-static-top.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/calendar/frontierCalendar/jquery-frontier-cal-1.3.2.css" />
<link rel="stylesheet" type="text/css" href="css/calendar/jquery-ui/smoothness/jquery-ui-1.8.1.custom.css" />
<script type="text/javascript" src="js/calendar/jquery-core/jquery-1.4.2-ie-fix.min.js"></script>
<script type="text/javascript" src="js/calendar/jquery-ui/smoothness/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="js/calendar/lib/jshashtable-2.1.js"></script>
<script type="text/javascript" src="js/calendar/frontierCalendar/jquery-frontier-cal-1.3.2.min.js"></script>
<script type="text/javascript" src="js/calendar/calendar.js"></script>
<script src="js/calendar.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
</head>
Dropdown menu:
<li class="dropdown">
About us<b class="caret"></b>
<ul class="dropdown-menu">
<li>Company information</li>
<li>Contact</li>
</ul>
</li>
However, if I add the below in the code, the dropdown menu work well but calendar cannot be displayed.
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
Could anyone help to fix this problem?????
Try - jQuery.noConflict();
Check the usages in jQuery website