I just started using foundations and frankly, its been a while since i built my last website. so please be pacient with me.
I deal with an issue with my menu (top-bar) now for over a day and can not find a clue what is going wrong.
The thing is, I really just need a basic menu, which is toggeling to the standard burger-menu on small screens, so far so good, it should work like demonstrated in the documentation right? But unfortunatly it does not and I cant figure out why.
I hope you can help me. I add my code without contents below. The file lies in a subdirectory, thats why all directory references are with ../ at the beginning.
Thanks a lot already!
Ina
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Inas | Ernährungs Coaching</title>
<link rel="stylesheet" href="../css/foundation.css" />
<link rel="stylesheet" href="../css/additionals.css" />
<script src="../js/vendor/modernizr.js"></script>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="row">
<div class="large-12 columns clearfix">
<!-- a header -->
</div>
</div>
<br>
<div class="row">
<div class="small-12 columns">
<!-- Navigation -->
<div class="contain-to-grid sticky">
<nav class="top-bar data-topbar" >
<ul class="title-area" >
<li class="name">
<h1></h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menü</span>
</li>
</ul>
<section class="top-bar-section">
<ul>
<li>Start</li>
<li class="divider"><li>
<li>Angebot</li>
<li class="divider"><li>
<li>Aktuelles</li>
<li class="divider"><li>
<li>Über Mich</li>
<li class="divider"><li>
<li>Kontakt</li>
</ul>
</section>
</nav>
</div><!-- /navigation -->
</div>
</div>
</div>
<div id="main">
<!-- some content -->
</div>
<div id="footer">
<!-- a footer -->
</div>
</div>
<script src="../js/vendor/jquery.js"></script>
<script src="../js/foundation.js"></script>
<script src="../js/foundation/foundation.topbar.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Compare your line of code:
<nav class="top-bar data-topbar" >
with the corresponding one from Foundation's documentation:
<nav class="top-bar" data-topbar role="navigation">
Your error should be pretty obvious now and can prevent Top Bar from functioning correctly.
Additional advice: Next time you want to use a predefined feature of Foundation, copy and paste the code and then apply your changes to it. It seems you have rewritten it and accidentally believed "data-topbar" to be a class.
Additonal: to stick navigation at the top in small screens (up to 640px range)
"sticky_on: [small]; scrolltop: false"
and show parent link in mobile view you will need
"mobile_show_parent_link: true;"
<nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: [small]; scrolltop: false; mobile_show_parent_link: true;">
Related
Hey guys I'm a beginner and currently my website is using this nav bar code on every page is there a way I can link this tag to other pages without repeating all this code on each page? There is a burger and a running sidebar popup. that hold their code in apps.js, currently every page of the project starts with this code, I would prefer to keep this code on index.html and import the to any new page I develop.
`<!DOCTYPE html>
<html lang="en">
<head>
<title>About us</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<div class="navigationHeader">
<nav>
<div class="logo">
<a href="index.html"><img src="images/BannerWhiteInvert.png" alt="2505 Marketing"
style="height:60px; width:auto;"></a>
</div>
<ul class="nav-links">
<br>
<li>Home</li>
<br>
<li>Pricing</li>
<br>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
<script src="apps.js"></script>
<div class="sidebar">
<div class="sideIcons"> <img src="images/youtubeLogo.png" alt="Youtube"></div>
<div class="sideIcons"> <img src="images/instagramLogo.png" alt="Instagram">
</div>
<div class="sideIcons"><a href="https://facebook.com"> <img src="images/facebookLogo.png" alt="Facebook"
style="width: 70%;"></a></div>
</div>
<div class="body-text">
<div class="banner">
<img class="logos" src="images/2505 banner clear.png" alt="logo">
</div>
</div>
<div class="body-text">
<div class="container">
</head>`
There are several Solutions for this Usecase.
To name a few:
Templating Methods: PHP, Pug/Jade, Handlebars
Static Site Generators (Like Hugo, Nuxt.js)
Single-Page Applications (Like
Vue.js, React, Angular)
without using any programming language you cannot use one component on multiple pages, I suggest, you should use React js which is a javascript library, that is very simple, where you can use one header or any one component in multiple pages, if you don't know about React js, reach me out I will help you
I've recently been playing around with Materialize-css trying to get use to building websites. However, I noticed that when I try to add JavaScript features it does not seem to work. I've double checked to make sure I have all the right folders in place - js, css, & fonts, and the correct script loading as well. Here is a sample of my jQuery & index.html file:
$('.parallax').parallax();
$('.dropdown-trigger').dropdown();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<ul id="dropdown1" class="dropdown-content">
<li>macOS</li>
<li>iOS</li>
<li class="divider"></li>
<li>Android</li>
</ul>
<!--<div class="navbar-fixed">-->
<nav>
<div class="nav-wrapper" style="background-color: #323643;">
Logo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li><a class="dropdown-trigger" href="#" data-target="dropdown1">Downloads<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<!--</div>-->
<div class="parallax-container">
<div class="parallax"><img src="images/oneway.jpg"></div>
</div>
<div class="section white">
<div class="row container">
<h2 class="header">Parallax</h2>
<p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="images/oneway.jpg"></div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
As you can see I'm trying to add a Parallax, and a drop down menu button to my website. In order to do this I've been instructed to add the jQuery '$('.parallax').parallax();', and '$('.dropdown-trigger').dropdown();', in the $(document).ready(function()) in the materialize.js file. See the documentation here: https://materializecss.com/parallax.html, & https://materializecss.com/dropdown.html.
Here is a picture of what I'm getting when I run this code:
The Downloads drop down button should be displaying one, two, three, etc., when I click it, and there should be a background image using the Parallax. Does anyone notice something I'm missing?
I think your library placing is wrong. Please check it with below changes. Now I am not getting any error
$(document).ready(function(){
$('.parallax').parallax();
$('.dropdown-trigger').dropdown();
});
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<!--Import Google Icon Font-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js'></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<ul id="dropdown1" class="dropdown-content">
<li>macOS</li>
<li>iOS</li>
<li class="divider"></li>
<li>Android</li>
</ul>
<!--<div class="navbar-fixed">-->
<nav>
<div class="nav-wrapper" style="background-color: #323643;">
Logo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li><a class="dropdown-trigger" href="#" data-target="dropdown1">Downloads<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<!--</div>-->
<div class="parallax-container">enter code here
<div class="parallax"><img src="images/oneway.jpg"></div>
</div>
<div class="section white">
<div class="row container">
<h2 class="header">Parallax</h2>
<p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="images/oneway.jpg"></div>
</div>
</body>
</html>
I figured it out.
Apparently the JQuery is supposed to be added to this function:
(function($){
$(function(){
$('.sidenav').sidenav();
$('.parallax').parallax();
}); // end of document ready
})(jQuery);
The code was working perfectly on local host with xampp. All I've done is upload it to a server and now it's not working.
I uploaded all the BS files as well. I also fixed the href links to be '..../js/bootstrap.min.js' etc. No images load and nor does bootstrap I do not think. The reason I think the problem comes from Bootstrap is because all the text/buttons still appear, they just aren't customised with the css/JS as BS does.
They are php files.
This is a link to the site: http://www.johnnythyroid.com.
I'm only new and this is just for learning so all advice is much appreciated.
This is the relevant code I think, I deleted a lot of the stupid text to make it shorter:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Jod</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel='stylesheet' type='text/css' href="johnnythyroidcom.ipage.com/css/custom icons.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="johnnythyroidcom.ipage.com/js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"> Navbar toggle </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="johnnythyroidcom.ipage.com/dansite1.php">Some Name</a>
</div>
<div class="navbar-collapse collapse" style="line-height:21px; height:140px;"> <!-- added this to prevent change of navbar height when switching between login/logout screens -->
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Account<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header"></li>
<li>Login</li>
<li>Create Account</li>
<!-- <li class="divider"></li>
<li class="dropdown-header">Portfolio</li>
<li>Portfolio 1</li>
<li>Portfolio 2</li> add divider to split up a drop down menu -->
</ul>
</li>
<li class="navbar-text pull-right signedin"> Welcome, Guest! </li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron text-center">
<h1> The </h1>
<p> A simgn </p>
Bg
ng
</div>
<div class="row-same-height">
<div class="col-md-4"> <!-- works on a 12 point grid system - columns need to add up to 12 in a row-->
<a href="johnnythyroidcom.ipage.com/rocket.php" class="thumbnail home-thumb">
<img src="johnnythyroidcom.ipage.com/Img/first rocket.jpg" style="max-height:250px" alt="First rocket theme"/>
</a>
<h3> Rjj </h3>
<p>sum dolor sit amet.</p>
</p>
View more
</div>
<div class="col-md-4"> <!-- works on a 12 point grid system - columns need to add up to 12 in a row-->
<a href="johnnythyroidcom.ipage.com/stars.php" class="thumbnail home-thumb">
<img src="johnnythyroidcom.ipage.com/Img/sky.jpg" style="max-height:250px" alt="sky theme"/>
</a>
<h3> Ss </h3>
<p>Lorenim.</p>
View more
</div>
<div class="col-md-4"> <!-- works on a 12 point grid system - columns need to add up to 12 in a row-->
<a href="johnnythyroidcom.ipage.com/sky.php" class="thumbnail home-thumb">
<img src="johnnythyroidcom.ipage.com/Img/stars.jpg" style="min-height:227px" alt = "Star theme"/>
</a>
<h3> y </h3>
<p>Lorenim.</p>
View more
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p> aaaaaa </p>
</div>
<div class="navbar-text pull-right">
<i class="fa fa-facebook-square fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-google-plus fa-2x"></i>
</div>
</div>
</div>
Try this
change
<img src="johnnythyroidcom.ipage.com/Img/first rocket.jpg" style="max-height:250px" alt="First rocket theme">
into
<img src="http://johnnythyroidcom.ipage.com/Img/first rocket.jpg" style="max-height:250px" alt="First rocket theme">
add http:// to your all images src
Check the console for errors.
It says, Bootstrap's JavaScript requires jQuery, As I could see, You have included it and it is loaded correctly. Include that file before including bootstrap.min.js
Also correct that path of images. Your request url becomes: http://www.johnnythyroid.com/johnnythyroidcom.ipage.com/Img/first%20rocket.jpg which is incorrect.
Note: Just a blind guess, Incorrect path could be because of .htaccess
when reffering 3rd party include css or jss
you have to use https if your server is using https
else use http
for example you are accessing your site http://yoursite.com or http://localhost
then http://getbootstrap.com/css/bootstrap.min.js or css will work
that is why it works on localhost
but if you use https for yoru site https://yoursidte.com
then http://getbootstrap.com/css/bootstrap.min.js or css will not work
you will have to user https
e.g https://getbootstrap.com/css/bootstrap.min.js or css
THIS WAS THE CASE WHY MY menu were wroking on localcomputer but not over https , after changing from http to https://getbootstrap.com/css/bootstrap.min.js or css now it is working ..
all these files can be in different locations
for example you may save bootstrap.min.css in your site folder in case you edited that file ..
I'm trying to make a really simple page using JQuery Mobile (it's my first time really playing with it). I can't seem to get the navbar to display properly. The code on the JQuery Mobile page looks dead simple and as best I can tell, I'm copying it verbatim. It displays like this though...
Here's my code (also, FYI, theme.css file is the default JQuery css file):
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/theme.css" />
<script src="../js/jquery-1.9.1.min.js"></script>
<script src="../js/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="../js/maptest.js"></script>
</head>
<body>
<div data-role="page" id="main">
<div data-role="header">
<div data-role="navbar">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
</div>
<div data-role="content">
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</liI>
</ul>
</div>
<div data-role="footer">
<p>footer</p>
</div>
</div>
</body>
</html>
Add the following to your page:
<code><meta http-equiv="X-UA-Compatible" content="chrome=1"></code>
It seems you're loading in IE. This page loads the Chrome frame activex in the IE page to render webkit stylesheet directives used by JQuery.
You should also seriously consider placing the navbar inside the content div.
I'm trying to implement the Twitter Bootstrap carousel, and so far I've been unsuccessful. I have the following page:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Fluxware: Play, learn and build games</title>
<meta name="description" content="Home page for Fluxware">
<meta name="author" content="Tim Butram">
<!-- CSS Stylesheets -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!--For shitty webbrowsers -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/sbn/trunk/html5.js></script>
<![endif]-->
<!-- Favicon -->
<link rel="favicon" href="images/favicon.ico">
</head>
<body>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Play</li>
<li>Learn</li>
<li>Build</li>
</ul>
</div>
</div>
</div>
<!-- Grid -->
<div class="container">
<div class="row">
<div class="span12">
<div class="hero-unit">
<div id="myCarousel" class="carousel">
<div class="carousel-inner">
<div class="active item"><img src="/images/1.png" /></div>
<div class="item"><img src="./images/2.png" /></div>
<div class="item"><img src="./images/3.png" /></div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="row">
<div class="span4">
<a class="btn btn-large">Play</a>
<p>Play games created with Fluxware.</p>
</div>
<div class="span4">
<a class="btn btn-large">Learn</a>
<p>Learn how to create games and game assets</p>
</div>
<div class="span4">
<a class="btn btn-large">Build</a>
<p>Use the Fluxware tools to create game.</p>
</div>
</div>
</div>
</div>
</div>
<script src="../bootstrap/js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap-carousel.js"></script>
<script src="../bootstrap/js/bootstrap-transition.js"></script>
</body>
</html>
And everything seems to render correctly, except for the carousel. From reading the Bootstrap page, it appears that I need to stick a
$('.myCarousel').carousel();
somewhere, but I have no clue as to where, how or why. In addition to that, in the Firefox error console, I get the two errors
$ is undefined
in bootstrap-carousel.js [line 125] and
$ is not a function
in bootstrap-transition.js [line 22]
Clearly jQuery wasn't loaded correctly.
Try loading the two scripts in the page <head>.
The code to run the carousel is
<script>
// Load this when the DOM is ready
$(function(){
// You used .myCarousel here.
// That's the class selector not the id selector,
// which is #myCarousel
$('#myCarousel').carousel();
});
</script>
You can put it either in the <head> after the two other scripts
or where the other scripts are now.
Had the same problem.
For me i had to use jQuery 1.7.1 , as 1.6.4 didn't work.
i had to include bootstrap-transition
Recently had the same problem, it seems in the current version of Bootstrap, you must also include a class called slide.
<div id="myCarousel" class="carousel slide span12">
You defined as id not a class , So you should start carousel by this code of jquery , so replace
$('#myCarousel').carousel();
instead of
$('.myCarousel').carousel();
I was using Django's JQuery (I don't know the version) and it was not working.
However, it works with Jquery 1.7.1.
If you're struggling getting a Bootstrap carousel slideshow to work --
Here's a template with positionable controls, and a progress navbar at the bottom that tracks the slides.
[http://codepen.io/TheNickelDime/][1]
<div class="Slideshow_carousel-wrapper container-fluid">
<span class="Slideshow-ctl-L" onclick="carousel_left()"></span>
<div class="carousel slide" data-ride="carousel" ... </div>
<span class="Slideshow-ctl-R" onclick="carousel_right()"></span>
</div>
<div class="container-fluid Slideshow_progress-bar">
<ul id="slideshow_progress" class="Slideshow_progress"></ul>
</div>