I have a simple static HTML site with a header.html file I'd like to reuse on each of the pages. I followed the suggestion from how to load header and footer before the content using jquery.load() which appeared to work but caused the drop-down on hover no longer function (must be clicked). The top is the navbar using jQuery.load, the bottom is identical code placed inline within my index.html. My css and js files are all included in my index.html file, not in the header.html file. Any thoughts on why this is occurring?
In my header, I have the code below:
<script>
$(document).ready(function() {
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
..and to include the header/footer I have:
<div id="header"></div>
Contents of my current header.html file:
<section class="header-uper">
<div class="container clearfix">
<div class="logo">
<figure>
<a href="index.html">
<img src="images/logo.png" alt="" width="250em">
</a>
</figure>
</div>
<div class="right-side header-padding">
<ul class="contact-info">
<li class="item">
<div class="icon-box">
<i class="fa fa-envelope-o spacer"></i>
</div>
<strong>Email</strong>
<br>
<a href="#">
<span>customer email</span>
</a>
</li>
<li class="item">
<div class="icon-box">
<i class="fa fa-phone spacer"></i>
</div>
<strong>Call Now</strong>
<br>
<span>customer #</span>
</li>
</ul>
</div>
</div>
</section>
<header class="navbar navbar-default">
<div class="container">
<div class="HeaderRow">
<div class="col-md-12">
<!-- header-right start -->
<!-- ================ -->
<div class="header-right clearfix">
<!-- main-navigation start -->
<!-- ================ -->
<div class="main-navigation animated">
<!-- navbar start -->
<!-- ================ -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar">
<li class="active">Home</li>
<li class="dropdown">
Our Practice <span class="caret"></span>
<ul class="dropdown-menu">
<li>About Dr. Eaton</li>
<li>Staff</li>
<li>Our Office</li>
<li>Services</li>
</ul>
</li>
<li class="dropdown">
Education <span class="caret"></span>
<ul class="dropdown-menu">
<li>Eye Education</li>
<li>Covid 19 Safety Plan</li>
</ul>
</li>
<li>Optical</li>
<li>Insurances</li>
<li>Forms & Contact Us</li>
</ul>
</div>
</div>
</nav>
<!-- navbar end -->
</div>
<!-- main-navigation end -->
</div>
<!-- header-right end -->
</div>
</div>
</div>
</header>
Reposting as an answer for that lucrative reputation...
You state that you are loading content into here:
<div id="header"></div>
It sounds like this is adding a new element into the DOM, which may break your CSS selector specifications if you're not ready for a div#header to appear in the middle of them. I'd look here first.
The other issue is that the DOM is going to be ready and the <header> will not have been loaded yet. You're then using jQuery to load new elements into the DOM, and those elements may still need to be initialized once the DOM has finished loading the new HTML.
I am stuck with a problem with my nav bar. While clicking on the MENU option, nothing happens but if I right click on them and open them in a new tab they work fantastically. The thing is it's working in Mozilla but not in Chrome
What should I do?
Here's the HTML:
<div class="navbar navbar-fixed-top custom-navbar" role="navigation">
<div class="container">
<!-- navbar header -->
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
New Event
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li> Intro</li>
<li> Overview</li>
<li> Speakers</li>
<li> Programs</li>
<li> Register</li>
<li> Venue</li>
<li> Sponsors</li>
<li> Contact</li>
</ul>
</div>
</div>
</div>
<!-- =========================
INTRO SECTION
============================== -->
<section id="intro" class="parallax-section">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<h3 class="wow bounceIn" data-wow-delay="0.9s">July 22 - 26 in San Francisco, CA</h3>
<h1 class="wow fadeInUp" data-wow-delay="1.6s">Web Design Conference</h1>
LEARN MORE
REGISTER NOW
</div>
</div>
</div>
</section>
I'll just take a wild guess and assume you're using Bootstrap.
Make sure to include the bootstrap.js and jquery.js in the correct order:
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
Make sure to include jquery before your bootstrap.js file, this should do it.
For me, it's working in this fiddle.
Within js/smoothscroll.js, you have two dependencies:
jQuery.scrollTo
jQuery.localScroll
The issue seems to be with these plugins (possibly outdated?). localScroll calls e.preventDefault, however jQuery.scrollTo is not properly scrolling to the element with the corresponding hash (the code is minified, and I can't find the source for those versions).
After updating the dependencies, I verified scrolling worked as intended (at least in Chrome).
Steps to resolve:
Replace jQuery.scrollTo with:
https://raw.githubusercontent.com/flesler/jquery.scrollTo/master/jquery.scrollTo.min.js
And replace jQuery.localScroll with:
https://raw.githubusercontent.com/flesler/jquery.localScroll/master/jquery.localScroll.min.js
My website is here: blackdeath1098.github.io
As you see at the top, the navbar isn't at the top and the picture isn't underneath it.
What can I do to achieve this?
Something like this: https://www.devonstank.com
See how the top has it's navbar transparent while over the picture?
Basically that.
After looking at your website's code, you currently have your Navbar place under your image, just move
<nav class="navbar navbar-default navbar-static-top transparent" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About Me</a>
</li>
<li>
<a class="page-scroll" href="#projects">Projects</a>
</li>
<li>
<a class="page-scroll" href="#cocaine">Cocaine Cowboys</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact Me</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Above the image instead of bellow.
Just wrap your nav tag with nav-wrapper and apply the mention style in CSS below.
I hope it helps
HTML:
<div class="nav-wrapper">
<nav role="navigation" class="navbar navbar-default navbar-static-top transparent">
<----navigation stuff---->
</nav>
</div>
CSS:
.nav-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 20;
}
Enjoy :)
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 175) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
$(".navbar-fixed-top").removeClass("transparent");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
$(".navbar-fixed-top").addClass("transparent");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<link href="https://blackdeath1098.github.io/CSS.css" rel="stylesheet" />
<style>
.navbar-default {
position: absolute;
top: 0;
width: 100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="scale-image">
<img src="https://blackdeath1098.github.io/synthwave3.jpg" class="scale-image">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top transparent" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About Me</a>
</li>
<li>
<a class="page-scroll" href="#projects">Projects</a>
</li>
<li>
<a class="page-scroll" href="#cocaine">Cocaine Cowboys</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact Me</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="image-wrapper">
<br>
</div>
</div>
<section id="heading" class="heading">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="image">Simon's official webpage</h1>
</div>
</div>
</div>
</section>
<section id="top" class="top-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
</section>
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Hello and welcome to my website</h1>
<p class="first">A little about this site</p>
<br>
<p class="body">I have put up many personal websites in my lifetime, mostly because I could not be satisfied by the way they looked or turned out. However, I have decided to put my mind and body to this challenge and created from scratch, yet another, more official
personal website. All work done from now on will be on this site only. Unless I need some serious overhaul or facelift, this is the website that I will constantly update. The code is viewable on github here:</p>
<br>
<a href="https://github.com/blackdeath1098/blackdeath1098.github.io" target="blank" class="btn btn-default" role="button">
<i class="fa fa-github fa-lg"></i> Source Code
</a>
<br>
<br>
<br>
<br>
<br>
<hr>
<p class="first">A little about me</p>
<p class="body">My name is Simon Zhang. I am currently a freshman at Bergen County Technical Schools in Teterboro (at time of writing it is 2016). It has been a long way since I have first started programming. I first began with Python, but at the time I was
quite young and didn't make much sense of it. I returned to it after learning HTML, CSS, Bootstrap, and other front end development. I then focused on Python and learned how to use it for scripting purposes. I am now working on learning backend
with Flask (I absolutely abhor PHP). Other plans will come later, as the creator of Github, Chris Wanstrath, has said not to have too defined plans for the future. However, I do have at least some loosely defined plans of what to do next, and
those include Javascript (JQuery and Angular), Flask, some updates to the websites (RSS feed?), and Cocaine Cowboys. Past that I will probably want to learn C++. I have a few projects I am working on, and many more will come. My projects can
be seen in my "Projects" tab.
<br>
<br>
</p>
<p class="body">Currently however, I am looking for a job. My language skills include:</p>
<ul class="body">
<li class="body">English (Native)</li>
<li class="body">Chinese (Conversational)</li>
<li class="body">French (Basic)</li>
</ul>
<br>
<p class="body">My programming language skills include:</p>
<ul class="body">
<li class="body">HTML</li>
<ul class="dashed">
<li>Bootstrap</li>
<li>Material Design Lite</li>
<li>Skeleton</li>
</ul>
<li class="body">CSS</li>
<li class="body">JavaScript</li>
<ul class="dashed">
<li>JQuery (Almost finished learning)</li>
<li>AngularJS (Learning)</li>
<li>RevealJS</li>
</ul>
<li class="body">Python</li>
<ul class="dashed">
<li>Flask</li>
</ul>
<li class="body">Miscellaneous</li>
<ul class="dashed">
<li>Material Design by Google</li>
</ul>
</ul>
<br>
<p class="body">If you wish to hire me, or even just want me to work with you in a project, Feel free to contact me in the Contact Me section.</p>
</div>
</div>
</div>
</section>
<section id="projects" class="projects-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Projects</h1>
<div class="container">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="icon-prog-js02 div-overlay">
<a href="#Javascript-projects">
<div class="overlay">
<span class="plus">
Javascript Projects
</span>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="icon-html5-01 div-overlay">
<div class="overlay">
<span class="plus">
HTML/CSS projects
</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="icon-github-01 div-overlay">
<a href="#other-projects">
<div class="overlay">
<span class="plus">
Other Projects
</span>
</div>
</a>
</div>
</div>
</div>
<h3>Javascript</h3>
<ul class="body">
<li>A mad lib about summer camp</li>
<li>The lyrics to Ode to Viceroy, by Mac Demarco (I only did this because it was a school assignment)</li>
<li>A calculator for Heron's formula (The form boxes are off, yes I am well aware. I have no intention of ever fixing them, I'm too lazy)</li>
</ul>
<h3>HTML/CSS</h3>
<ul class="body">
<li>My First Ever Published Website (warning, may cause PTSD, turn down volume)</li>
<li>My Second Website, copy and pasted from a Bootstrap Theme</li>
<li>My Second Website (Using MDL)</li>
<li>This Website</li>
</ul>
<h3>Upcoming Projects</h3>
<p class="body">I have many more projects coming. You should check regularly to see if I have added more projects here. I am also open to job offerings or collaborations</p>
<ul class="body">
<li>Cocaine Cowboys, a Hotline Miami mod (I will create a seperate website for this)</li>
<li>An HTTPS server so that I may host my own web server with backend</li>
<li>Something with Clay Allen, probably another website</li>
</ul>
</div>
</div>
</div>
</section>
<section id="cocaine" class="cocaine-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Cocaine Cowboys</h1>
<p class="first">Every bullet comes a choice</p>
<p class="body">Cocaine Cowboys is a mod of the famous top down blood-splattering, drug fueled rampage of Hotline Miami. The game will be set before the events of the first game, and will revolve around the character Daniels from Beard's unit. The story focuses
on Daniel's upbringings and life as a drug dealer, school teacher and finally, a soldier. Cocaine Cowboys will have a strong focus on drugs. New gameplay mechanics include taking drugs before missions, and receiving benefits and drawbacks based
on what you took. For example, by snorting cocaine, you will move and fire your revolver much faster, but have slower reload speeds due to your nervousness and fidgeting. Acids and other hallocinogens will slow down time, but will make you see
enemies that aren't there. A (tentative) release date is hopefully by the end of summer, 2017.</p>
<br>
<p class="body">I will create a new, separate website for this game as more artwork and music is produced.</p>
</div>
</div>
</div>
</section>
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact Me!</h1>
<p class="body">Perhaps the section we've all been looking for, the contact me section. Well, because I can't use any backend on Github, these forms will not work. Instead, just send me an email at simzha19#bergen.org</p>
</div>
</div>
</div>
</section>
like this? I've added
<style>
.navbar-default {
position: absolute;
top: 0;
width: 100%;
}
</style>
I am using Twitter Bootstrap 3 to create this site www.peoplespropertyshop.co.uk as you can see the navigation on larger screens has a jquery effect to drop the boxes down.
My problem was that this was occuring on the small screen too and looked awful. I have create to different nav sections and hidden the animated one through media queries and hidden the other other nav from all other devices.
However for the life of me i cant see why when you click the icon in small screen view it doesn't animate anymore but the list is not appearing either.
<link href="css/styles.css" rel="stylesheet" media="screen">
<link href='http://fonts.googleapis.com/css?family=Carrois+Gothic|Cinzel' rel='stylesheet' type='text/css'>
<link href="css/menu.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/Logo.png" alt="People's Property Shop Logo"></a>
</div>
<!-- Small Screens Nav Bar -->
<div class="navbar-collapse collapse hidden-sm hidden-md hidden-lg smallscreennav visible-xs">
<ul class="nav nav-pills navbar-right hidden-xs">
<li>Home</li>
<li>Who We Are</li>
<li>What We Do</li>
<li>Who We Help</li>
<li>News/Events</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
<!-- Larger Screens Nav Bar -->
<div class="navbar-collapse collapse">
<ul class="nav nav-pills navbar-right hidden-xs">
<li class="blue">
Home
<p class="subtext"><img src="images/Home_img.png" alt="home image" style="margin-top: -10%;"></p>
</li>
<li class="blue">
Who We Are
<p class="subtext"><img src="images/whoweare_img.png" alt="who we are image" style="margin-top: -10%;"></p>
</li>
<li class="blue">
What We Do
<p class="subtext"><img src="images/whatwedo_img.png" alt="what we do image" style="margin-top: -8%;"></p>
</li>
<li class="blue">
Who We Help
<p class="subtext"><img src="images/whowehelp_img.png" alt="who we help image" style="margin-top: -10%;"></p>
</li>
<li class="blue">
News/Events
<p class="subtext"><img src="images/new_img.png" alt="news image" style="margin-top: -10%;"></p>
</li>
<li class="blue">
Contact
<p class="subtext"><img src="images/contact_img.png" alt="contact image" style="margin-top: -8%;"></p>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
In my opinion you don't need an extra div, you can change your div with mediaqueries
#divMenu{
/* do something when it is normal */
max-width:1000px;
}
#media all and (min-width: 333px) and (max-width: 960px){
#divMenu{
/* do something when it's too small */
max-width:800px;
}
}
I am just learning the new bootstrap grid system however it is very different from 2.x and I can't seem to get it to contain anything, it just flows on out.
Screenshot: http://i.imgur.com/aBVgNVr.png
Code: http://pastie.org/8272634
<!DOCTYPE html>
<html>
<head>
<title>ICG - Home</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/over.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="blue" href="#">iCanGame</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Community</li>
<li>All Games</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
<li>Register</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div id="navend"></div>
<div class="container">
<div class="row">
<div class="col-xs-10">left</div>
<div class="col-xs-2"><div class="wrap">sdsafdsafdsafdsafdsafdsajlsdhakfhdksahlfdsahkfldsakfhkdsakfdkjslahfdskhaflhdksaklfhdsaklfdkhsa</div></div>
</div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>
Well the text has been overflowing because your sample text is a single word you have not included any space between those...
Please find code below..
<div class="row">
<div class="col-xs-10"><p>left</p></div>
<div class="col-xs-2"><div class="wrap"><p>
sdsafds dhakfhdks ahlfdsahkf ldsakfhk dsakfdkj slahfd skhafl hdksaklfhds aklfdkhsa</p> </div></div>
</div>
You are using two .col-md-12, shouldn't you be using only two .col-md-6 classes, since the .col-md-12 are width:100% divs?
Because you are giving a no-space-contain word.
Ex:
string like adfjklsdjfaksdjfsakldjfsakl;fjsakl;djf won't work.
instead, string like asdfkljsd;lf asdfkjds asdkfjklj will work
And the grid system will not cut single word into two line.
By the way, give testing paragraph by typing will not be a great idea.
Try Something like paragraph generator
to generate random paragraph.