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
Related
As the title says, I have a navbar which point to different paths.
When hovered over, chrome shows the correct path.
but when I click on the button, it points to C:/index.html and I really don't get why.
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scripi Andrei | Front End Developer with a passion for coding and designing to make internet a better place.</title>
<meta name="description" content="Front End Developer with a passion for coding and designing to make internet a better place.">
<meta name="robots" content="noodp, index, follow">
<meta name="keywords" content="web developer, webdev, webdevelopment, web developer portfolio">
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<meta property="og:title" content="Scripi Andrei | Romanian Front End Developer">
<meta property="og:description" content="Front End Developer with a passion for coding and designing to make internet a better place.">
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/fonts.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700" rel="stylesheet">
</head>
<body>
<div id="use-portrait">
<h6>To use this website you must use a portrait orientation!</h6>
<h6>If you are using a computer and encountering this error, make the window bigger.</h6>
</div>
<div id="container">
<header id="header" style="display:none;">
<div id="bara-wrap">
<img src="img/logo.png" alt="LOGO" class="logo" />
<nav id="social">
<ul class="social">
<li class="x1"><i class="fab fa-facebook-f"></i></li>
<li class="x1 x2 x3"><i class="far fa-envelope"></i></li>
</ul>
</nav>
<nav id="bara">
<ul class="butoane">
<li class="btn">home</li>
<li class="btn">about</li>
<li class="btn">skills</li>
<li class="btn">contact</li>
</ul>
</nav>
</div>
</header>
<div id="central">
<div id="intro-wrap">
<h1 id="intro" style="display:none;">hi</h1>
<h6 class="intro" style="display:none;">This is a small step to achieve one of my dreams. A small place on the internet where people get to know me. Creative and functional, built with passion and hard work.</h6>
<div id="button-wrap">
<button type="button" id="more" style="display:none;">Learn more</button>
</div>
</div>
</div>
<div id="hr" style="display: none;">
<hr />
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/loader.js"></script>
</body>
</html>
I've also tried doing it like this:
<ul class="butoane">
<li class="btn">home</li>
<li class="btn">about</li>
<li class="btn">skills</li>
<li class="btn">contact</li>
</ul>
Can you tell me what's going on? I really don't understand why it doesn't work. Thanks.
is there any JavaScript files called ?
Links can changed via JavaScript
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);
I want to make a blog on my own website without using a service like Wordpress, Joomla, etc that takes content from text files in a seperate directory and displays them on the webpage. This is what I have so far:
HTML
<html>
<head>
<title>doggo.info</title>
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="http://doggo.info/stylesheet.css">
<style type="text/css">
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://doggo.info/navbar.js"></script>
</head>
<body>
<header>
<img src="/images/navicon.png" onclick="openNav()" width="40" height="48" alt="Open Menu">
<em>doggo.info</em>
</header>
<div id="sidenav">
<a id="current">curlink</a>
otherlink
</div>
<div id="load" style="display:none;"></div>
<div class="content">
<div class="container text-center">
<div class="textbox">
<p id="posttitle"></p>
<p id="postdate"></p>
<p id="postcontent"></p>
</div>
</div>
</div>
<footer>
<p class="footer">doggo.info</p>
</footer>
</body>
<script>
$('#load').load("posts/post0.txt");
$('#posttitle').html($('#load').find('#title').html());
$('#postdate').html($('#load').find('#date').html());
$('#postcontent').html($('#load').find('#content').html());
</script>
</html>
0.TXT
<div id="title">Title of post</div>
<div id="date">1/1/1990</div>
<div id="content">
hi, i am blog.
<br>
<em>indeed</em>, it is true
<br>
what is <strong>life</strong>?
</div>
If there's a better way to formatting my txt files, I'm open to changing them.
I want to be able to have multiple files in the posts folder and have the site load them in decending order (99.txt, 98.txt, 97.txt ... 0.txt) into the page inside of textbox divs. I would also like it into pages with 10 or so posts a page.
I'm pretty much stumped, so any help would be appreciated. You can view what I've gotten so far here.
Use JSONs and AJAX to access the information that u want to display.
JavaScriptObjectNotation or JSON is a way you can format your files and access information that you want.
[
{
"Title": "Title of post",
"Date" : "1/1/1990",
"Content": "h, i am blog"
}
]
The file is saved as a ".json" and its contents are organised as objects.
This video is very helpful if you are new to JSON
JSON and AJAX YouTube
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;">
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.