I am writing a simple HTML page using the Twitter Bootstrap.
But the navbar and links are rendered as normal HTML on the browser.
I have referred to multiple sites but the same steps are given everywhere. I am not sure where I am going wrong.
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel= "stylesheet" href= "css/bootstrap.css" type="text/css">
<title> Bootstrap example</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<h1>Hello, world!</h1>
<div class ="container">
<h1>Bootstrap Site</h1>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
You're using incorrect quotations (” instead of " or ') and missing a few equals (=) signs. Change:
<meta charset=”utf-8”>
<link rel ”stylesheet” href ”css/bootstrap.css” type=”text/css”>
...
<script src ”js/bootstrap.js”></script>
To:
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
...
<script src="js/bootstrap.js"></script>
You are not including bootstrap (probably wrong copy/paste from somewhere).
change
<link rel ”stylesheet” href ”css/bootstrap.css” type=”text/css”>
<script src ”js/bootstrap.js”></script>
to
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"></link>
<script src="js/bootstrap.js"></script>
Related
I am using jquery load() function to load content to a container of the index page. the page was loaded but the URI of content is not displaying in the address bar.
how can I get the URL of the content( home.html) in the address bar?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-grid.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/bootstrap-reboot.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/carousel.js"></script>
<script src="js/larelapa.js"></script>
<script
$(function() {
$("#home").click(function() {
$('#container').load('home.html');
});
});
$(function() {
$("#about").click(function() {
$('#container').load('about.html');
});
});
$(function() {
$("#contact").click(function() {
$('#container').load('contact.html');
});
});
$(function() {
$("#policy").click(function() {
$('#container').load('policy.html');
});
});
</script>
</head>
<body id="bg">
<a id="home" href="#" class="w3-bar-item w3-button w3-hover-white btn-block" onclick="w3_close()">Home</a>
</div>
<div style="position: absolute; bottom: 0;">
<li> <a id="about" href="#" onclick="w3_close()">About us</a></li>
<li><a id="contact" href="#" onclick="w3_close()">Contact Us</a></li>
<li> <a id="policy" href="#" onclick="w3_close()">Policy</a></li>
</div>
</nav>
<div id="container"></div>
</div>
</body>
</html>
home.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container-fluid row">
</div>
</div>
</body>
</html>
after clicking the home button the home.html loaded in the container of the index.html and URL shows http://localhost:63342/code/index.html# which I want to be http://localhost:63342/code/index.html?home that I can bookmark.
I am a newbie to javascript.
You need to use
history.pushState(stateObject, "title", URL);
it would look like this:
$(function() {
$("#home").click(function() {
$('#container').load('home.html');
window.history.pushState({url: "home.html"}, "", "home.html");
});
});
But instead of making one jquery event for every pages you should make it reusable so you only have one code to maintain.
https://jsfiddle.net/fJ9wq/
By the way, you opening script tag is not closed
I was trying to develop webix header and sidebar by using html which I have seen below. Currently it is developed in javascript.
http://docs.webix.com/samples/28_sidemenu/01_sidebar.html
I am changing from javascript to html
Header,icons,sidebar eveything appearing in the html, however the contents on the sidebar does not appear. I am not sure whats the mistake I have done. Below is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./codebase/webix.css" type="text/css"
media="screen" charset="utf-8">
<link rel="stylesheet" href="./codebase/sidebar.css" type="text/css"
media="screen" charset="utf-8">
<script src="./codebase/webix.js" type="text/javascript" charset="utf-8"></script>
<script src="./codebase/sidebar.js" type="text/javascript"
charset="utf-8"></script>
<script src="./codebase/data.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
webix.ready(function() {
webix.markup.init();
});
function toggle(){
$$("$sidebar1").toggle()
}
</script>
<div class="container" id="mainDiv"></div>
<div data-view="rows">
<div data-view="toolbar" data-padding="5">
<div data-view="button" data-type="icon" data-icon="bars"
data-width="37" data-align="left" data-css="app_button"
data-click="toggle()"></div>
<div data-view="label" data-label="My App"></div>
<div data-view="button" data-type="icon" data-icon="envelope-o"
data-width="45" data-css="app_button" data-badge="4"></div>
<div data-view="button" data-type="icon" data-icon="bell-o"
data-width="45" data-css="app_button" data-badge="10"></div>
</div>
</div>
<div data-view="cols">
<div data-view="sidebar" data-id="sidebar" data-data="menu_data"></div>
</div>
</body>
</html>
The images in list with .slider class are not being displayed in browser window using MaterializeCSS, but it can be seen in elements. Do sequence of .css and .js loading in head matter?
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Yellowtail' rel='stylesheet' type='text/css'>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="slider">
<ul class="slides">
<li>
<img src="416.jpg">
</li>
<li>
<img src="417.jpg">
</li>
</ul>
</div>
</body>
</html>
First of all, you are including two versions of jQuery, remove the <script> tag for jquery-2.1.1.min.js.
The images are not being displayed because you are not initializing the slider. Add the following jQuery code:
<script>
$(function(){
$('.slider').slider();
});
</script>
Remove opacity: 0 for .slider .slides li
Ive tried a number of ways of re-aranging my code in my js files, re-aranging by scripts and a number of other things that I found on here, but unfortunately it still isnt working. I have no clue what to do anymore.
<!DOCTYPE html>
<html lang="en"> <
head><title> Audi Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.css">
<!-- Slider
================================================== -->
<link href="css/owl.carousel.css" rel="stylesheet" media="screen">
<link href="css/owl.theme.css" rel="stylesheet" media="screen">
<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'>
<script tyupe="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.min.js"></script>
</head>
<body>
<!-- Loader -->
<!-- Navigation
==============================-->
<nav id="menu" class="navbar navbar-default navbar-fixed-top">
<img src="img/audi-logo3.jpg" class="img-responsive pull-right" style="margin- right: 15px">
<div clas="collapse navbar-collapse">
<div class="nav-container">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left" style="margin-top: 10px;">
<li>Home</li>
<li> Models</li>
<li>Owners & Customers </li>
<li>Shopping Tools</li>
<li>Global Inovation</li>
</ul>
</div>
</div>
</nav>
</div>
</nav>
<section style="margin-top: 85px;">
<div class="owl-carousel">
<div>
<img src="img/audi-r8.jpg">
</div>
<div>
<img src="img/audi-s8.jpg">
</div>
</div>
</section>
<!-- Script -->
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
My JS
(function(){
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
});
})
Remove the script tags from the head section, as they are already at the bottom of your body tag.
The problem is caused by the order you used there. If you need to use a library in your own code, you must declare that library first. That was not the case in your head section. It should be ok with what you have at the bottom of your body section.
Also, I don't see any script tag for jQuery, but you are using it. You need to include that first:
Just before </body>:
<!-- This script is hosted on a CDN, but you could host it too -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
First, I noticed a typo
<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'>
THIS ONE --> <script **tyupe**="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.min.js"></script>
</head>
Also, I see that you are script loading the same 2 scripts at the bottom of your HTML, but the non minified versions. You should delete what is not being used, and fix that typo.
If you would of HTML validate/check your files, you would of found that typo error. Might be worth doing as there may be other simple errors.
Do you need to load a jQuery file? Make sure it's loaded before your javascript files
I am having issues with the slick slider displaying on my webpage. I have searched for a solution for this issue, but I haven't found any solutions to why this does not work. I have looked at threads such as:
Responsive slick Slider
I can't get my Slick slider to work at all
and others, but I cannot figure out for the life of me what I am doing wrong. This is my first post, so if I didn't supply sufficient information, or if I didn't do something correctly, apologies in advance. Any help would be appreciated. Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Root Cellar</title>
<!-- google fonts -->
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- styles -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="slick/slick.css"/>
<link rel="stylesheet" href="slick/slick-theme.css"/>
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Project</h1>
<h2>Subtitle.</h2>
</a>
<nav>
<ul>
<li>Main</li>
<li>About</li>
<li>Contact</li>
<li>Test</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<img src="img/placeholder.jpg" alt="Placeholder" class="profile-photo">
<h3>About</h3>
<p>Hello, this is test text.</p>
</section>
<!-- code for slider -->
<div class="container" id="slider">
<div class="slides">
<div class="slide"><img src="img/web1.jpg"></div>
<div class="slide"><img src="img/web2.jpg"></div>
<div class="slide"><img src="img/web3.jpg"></div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slider').slick({
dots: true,
infinite: true,
speed: 700,
autoplay: true,
autoplaySpeed: 2000,
arrows:false,
slidesToShow: 1,
slidesToScroll: 1
});
});
</script>
</div>
<!-- end code for slider -->
<footer>
<p>© 2016 Taylor Reeves.</p>
</footer>
</div>
</body>
</html>
In your script you aren't selecting the div with all the img. You should use as selector $('.container') instead of $('.slider') as "slider" is the id.
Check this post I can't get my Slick slider to work at all and anyways, I recommend you to make work the Slick's example of usage (http://kenwheeler.github.io/slick/) first and add your HTML later.