This is my HTML and the nav is not working.
This is new to me, the only thing I am doing different this time is using Angular. When I click in any nav button the address bar goes like
http://localhost:8018/#/WebDev
insted of
http://localhost:8018/#WebDev
What am I doing wrong here?
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>DevMash</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400|Roboto+Mono" rel="stylesheet">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
<!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script type="text/javascript" src="js\jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js\angular.min.js"></script>
</head>
<body>
<nav>
<ul>
<li>
WebDev
</li>
<li>
Android
</li>
<li>
Python
</li>
<li>
FAQs
</li>
</ul>
</nav>
<div id="WeDev"><ng-include src="'WebDev.html'"></ng-include></div>
<div id="Android" ng-include="'android.html'"></div>
<div id="Python" ng-include="'python.html'"></div>
<div id="faq" ng-include="'faq.html'"></div>
</body>
</html>
Update: I just want it to work as it does normally in HTML,ie, when tag is clicked, the page should be directed to the target div.
You are supposed to do it in AngularJs Way if you are in an AngularJs environment. if you want to do it in a native way, then remove angularJs from your script.
For more detail, please see https://docs.angularjs.org/api/ng/service/$anchorScroll
I replaced from href="#target" to href="##target". Seems to work.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Start Meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Beorx - Creative Agency HTML5 Template" />
<meta name="author" content="ThemeOri">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title of Site -->
<title>Protonix</title>
<!-- Favicons -->
<link rel="icon" type="image/png" href="assets/img/favicon.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- fontawesome -->
<link rel="stylesheet" href="assets/css/fontawesome.min.css">
<!-- Animate CSS -->
<link rel="stylesheet" href="assets/css/animate.css">
<!-- Swiper -->
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
<!-- Magnific -->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!-- Nice Select -->
<link rel="stylesheet" href="assets/css/nice-select.css">
<!-- Mean menu -->
<link rel="stylesheet" href="assets/css/meanmenu.min.css">
<!-- Flaticon -->
<link rel="stylesheet" href="assets/fonts/flaticon.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="assets/sass/style.css">
<!--#include file="header.shtml"-->
</head>
above is the code of my html plesk panel file I copied data of header.shtml from the same file and then removed that data from source file while keeping those in header.shtml without making any change but issue is the file header.shtml is not getting called any solution for it?
So I am new to html coding and am trying to just make a simple portfolio and I want it to look nice so I have been looking at tutorial websites online however I did something weird and I don't know what I did. If anyone could help me with this issue that would be great.
Screenshot:
The Code Is Below (https://pastebin.com/GDCW2jsu):
<!DOCTYPE html>
<html>
<head>
<title>Ryan Cole Home</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Page Wrapper -->
<div id="page-wrapper">
<!-- Header -->
<header id="header">
<h1><a href="index.html"><border>Ryan Cole Home</border>
</a></h1>
<nav>
About Me
Portfolio
Contact Me
</nav>
</header>
<!-- Welcome To The Homepage -->
<footer>
<p>Welcome To The Homepage</p>
</footer>
</body>
</html>
<!-- Scripts -->
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js">
</script><![endif]-->
<script src="assets/js/main.js"></script>
</div>
</body>
</html>
How do I convert this to cshtml with razor tags?
<head>
<!-- Basic -->
<meta charset="UTF-8">
<title>Modals | SHARED ON THEMELOCK.COM</title>
<meta name="keywords" content="HTML5 Admin Template" />
<meta name="description" content="Porto Admin - Responsive HTML5 Template">
<meta name="author" content="okler.net">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Web Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Vendor CSS -->
<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="assets/vendor/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="assets/vendor/magnific-popup/magnific-popup.css" />
<link rel="stylesheet" href="assets/vendor/bootstrap-datepicker/css/datepicker3.css" />
<!-- Specific Page Vendor CSS -->
<link rel="stylesheet" href="assets/vendor/pnotify/pnotify.custom.css" />
<!-- Theme CSS -->
<link rel="stylesheet" href="assets/stylesheets/theme.css" />
<!-- Skin CSS -->
<link rel="stylesheet" href="assets/stylesheets/skins/default.css" />
<!-- Theme Custom CSS -->
<link rel="stylesheet" href="assets/stylesheets/theme-custom.css">
<!-- Head Libs -->
<script src="assets/vendor/modernizr/modernizr.js"></script>
</head>
Lets start a journey:
Open HTML document
Click CTRL+A
Click CTRL+C
Enter to your solution directory
Create new empty *.cshtml file
Click CTRL+V
That's all - it will be work. (In future add in tags what version of .Net are you using and what exactly need because my answer is correct to your question. For more information about Razor read this)
Create a new cshtml file. and paste your code
I am using a main template with a {{> yield}} statement to render my Meteor JS pages. This is how it looks like:
<template name="main">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="author" href="humans.txt">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/spacers.css">
</head>
<body>
<div class="container">
{{> yield}}
</div>
<!-- Bootstrap JS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</template>
And with it, I render my actual pages e.q.:
<template name="home">
HOME
</template>
This all is functional because I use Iron Router like so:
Router.configure({
layoutTemplate: "main",
notFoundTemplate: "404"
});
Router.route("/", function() {
this.render("home");
});
The problem I face is that the page title isn't being rendered. I would expect the page title to be "Title" because I have defined <head> -> <title> to be "Title" (as you can see in my main template).
The weird thing here is that all the CSS does load, which indicates that the <head> section is - at least partially - rendered.
The head is rendered in a special process. Let's call it bundling for the lack of a better word. In that bundling-process the contents of all body and head elements are put into the HTML that will be served first. iron-router appends the contents of your template to the body after meteor is loaded on the client. These elements are only being searched for on the root level. The link tags are loaded, because most browsers (more or less) don't care where they occur.
I'd do something like this:
client/main.html
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="author" href="humans.txt">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/spacers.css">
</head>
<body>
<!-- Bootstrap JS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
client/templates/main.html
<template name="main">
<div class="container">
{{> yield}}
</div>
</template>
using a windows 7 and just a few days back i downloaded the bootstrap 3.3.1 dist file..... but i don't know how to install it.... i also don't know what to put for my href="???" in the link ....
this code is a mixture of my own writing and some copy/paste of the scripts from the bootstrap site... i'm totally messed up...someone please help......
<!DOCTYPE html>
<html lang="en">
<head>
<title>Edwin's School of Music</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="theme.css" rel="stylesheet">
<link rel="stylesheet" href="../../dist/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>C:\Users\user\Desktop\bootstrap-3.3.1-dist\dist\css\bootstrap.min.css
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>About</li>
<li>Materials</li>
</ul>
<ul class="pull-right">
<li>Sign Up</li>
<li>Log In</li>
</ul>
</div>
</div>
<div class="jumbotron">
<h2>Welcome to...</h2>
<h1><strong>Edwin's School Of Music</strong></h1>
<h2>Make your DREAMS come true ...</h2>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
</body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
This will work & no need to install things
However, this will only work if you have an internet connection as they are being fetched from a server, rather than a local file on your machine.