I would like to use Handlebars with Parcel, but without importing handlerbars partials, but having them in a script tag in html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Autocomplete!</title>
<link rel="stylesheet" href="./public/stylesheets/whitespace-reset.css">
<link rel="stylesheet" href="./public/stylesheets/gallery.css">
<script type="module" src="./public/typescript/gallery.ts"></script>
</head>
<body>
<main>
<h1>Amanda Rose's Photos</h1>
<div id="slideshow">
<div id="slides">
<figure data-id="1">
<img src="https://via.placeholder.com/1280x1024" />
<figcaption>
Some text.
</figcaption>
</figure>
<figure data-id="2">
<img src="https://via.placeholder.com/1280x1024/ffffff/0066cc" />
<figcaption>
Some text.
</figcaption>
</figure>
<figure data-id="3">
<img src="https://via.placeholder.com/1280x1024/0066cc/ffffff" />
<figcaption>
Some text.
</figcaption>
</figure>
</div>
<ul>
<li><a class="prev" href="#">Prev</a></li>
<li><a class="next" href="#">Next</a></li>
</ul>
</div>
<section>
<header>
<h2>City Lights</h2>
<p><time>Taken on 3/31/15</time></p>
<div class="actions">
<a href="/api/photos/like" data-id="1" data-property="likes" class="button like">
♡ 5 Likes
</a>
<a href="/api/photos/favorite" data-id="1" data-property="favorites" class="button favorite">
☆ 2 Favorites
</a>
</div>
</header>
<!-- code omitted -->
</section>
</main>
<script id="photos" type="text/x-handlebars">
{{#each photos}}
<figure data-id="{{id}}">
<img src="{{src}}" />
<figcaption>{{caption}}</figcaption>
</figure>
{{/each}}
</script>
<!-- code omitted -->
</body>
</html>
The issue that I have is that Parcel is saying that I am missing transformers for handlebars. Since these partials are not in a separate file adding
"transformers": {
"*.hbs": [
"parcel-transformer-handlebars"
]
}
to my .parcelrc file won't do a thing even when I install parcel-plugin-handlebars.
Does anyone have an idea how to change this? I have tried changing transformers to plugin-transformers-handlebars for html files but this messes up everything else.
Related
i have a probleme with my css in jsp project
the probleme is that the css doesn't apply on page
i've tried to change the path of css files but it doesn't work
i've also to change
by : <%#include file="../assets2/css/bulma.css" %> but it Caused more errors related to jsp compilation ...
on network tap (inspect elements) :
network tabmy project files
the code on my .jsp file :
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# page import="entities.Dossier" %>
<%# page import="entities.Responsable" %>
<%# page import="entities.Tache" %>
<%#page import="java.util.ArrayList"%>
<%#page import="java.util.List"%>
<%#page import="web.TrackingServlet"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>tAccueil</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Premium Bootstrap 4 Landing Page Template" />
<meta name="keywords" content="bootstrap 4, premium, marketing, multipurpose" />
<meta content="Themesdesign" name="author" />
<!-- favicon -->
<link rel="shortcut icon" href="images/favicon.ico">
<!-- google font -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
<!--Slider-->
<link rel="stylesheet"type="text/css" href="css3/owl.carousel.css" />
<link rel="stylesheet"type="text/css" href="css3/owl.theme.css" />
<link rel="stylesheet"type="text/css" href="css3/owl.transitions.css" />
<!-- Magnific-popup -->
<link rel="stylesheet" type="text/css" href="css3/magnific-popup.css">
<!-- css -->
<link href="css3/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css3/icons.css" rel="stylesheet" type="text/css" />
<link href="css3/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--Navbar Start-->
<nav class="navbar navbar-expand-lg fixed-top navbar-custom sticky sticky-light" id="navbar">
<div class="container">
<!-- LOGO -->
<a href="http://localhost:8080/Tracking/Acceuil" class="logo-sticky">
<img src="img/logogo.png" alt="" class="logo-dark" height="32" />
<img src="img/logogo.png" alt="" class="logo-light" height="32" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<i class="remixicon-menu-fill"></i>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mx-auto navbar-center" id="mySidenav">
</ul>
<ul class="navbar-nav">
<li class="nav-item active">
Startseite
</li>
<c:if test="${session == null }">
<li class="nav-item">
Anmelden
</li>
</c:if>
<c:if test="${session != null }">
<li class="nav-item">
Mein Raum
</li>
<li class="nav-item">
Abmelden
</li>
</c:if>
</ul>
</div>
</div>
</nav>
<!-- Navbar End -->
<!-- HERO START -->
<section class="hero-4-bg position-relative bg-gradient" id="home">
<div class="container">
<div class="row align-items-center hero-4-content">
<div class="col-lg-5">
<h1 class="text-white hero-4-title font-weight-medium mb-4 line-height-1_4">Verfolgen Sie Ihre Datei</h1>
<p class="text-white-50 mb-5">WEBTRACK bietet den schnellsten und genauesten Verfolgungsdienst auf der Grundlage einer intelligenten Datenanalyse..</p>
<div class="text-center subcribe-form mt-4">
<form action="progression" method="post">
<c:if test="${id_doc != null }">
<input type="text" value="${id_doc }" name="tracking">
</c:if>
<c:if test="${id_doc == null }">
<input type="text" placeholder="Geben Sie die Tracking-Nummer ein..." name="tracking">
</c:if>
<button type="submit" class="btn rounded-pill btn-purple">Verfolgen </button>
</form>
</div>
</div>
<div class="col-lg-6 offset-lg-1">
<div class="hero-4-img mt-5 mt-lg-0">
<img src="images/hero-4-img.png" alt="" class="img-fluid mx-auto d-block">
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="home-bottom-shape">
<img src="images/home-4-bottom-shape.png" alt="" class="img-fluid mx-auto d-block">
</div>
</div>
</div>
</section>
<!-- HERO END -->
<!-- FOOTER END -->
<!-- javascript -->
<script src="js2/jquery.min.js"></script>
<script src="js2/bootstrap.bundle.min.js"></script>
<script src="js2/scrollspy.min.js"></script>
<script src="js2/jquery.easing.min.js"></script>
<!-- COUNTER -->
<script src="js2/counter.int.js"></script>
<!-- carousel -->
<script src="js2/owl.carousel.min.js"></script>
<!-- Magnific Popup -->
<script src="js2/jquery.magnific-popup.min.js"></script>
<script src="js2//magnificpopup-int.js"></script>
<!-- Main Js -->
<script src="js2/app.js"></script>
</body>
</html>
I think you want to include a .css file to jsp. try this
<jsp:include page="../css3/index.css"/>
or
<%#include file="/WEB-INF/include/header.jsp"%>
For the given below webpage,
<!DOCTYPE html>
<html lang="en">
<head>
<title>xyz</title>
<meta charset="utf-8" />
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
<style type="text/css">
html,
body {
height:100%
}
</style>
</head>
<body class="body" style="background-color:#f6f6f6">
<div class="container-fluid" style="min-height:95%; ">
<div class="row">
<div class="col-sm-2">
<br>
<center>
<img src="{% static 'personal/img/profile.jpg' %}" class="responsive-img" style='max-height:100px;' alt="face">
</center>
</div>
<div class="col-sm-10">
<br>
<center>
<h3>My blog</h3>
</center>
</div>
</div><hr>
<div class="row">
<div class="col-sm-2">
<br>
<br>
<!-- Great, til you resize. -->
<!--<div class="well bs-sidebar affix" id="sidebar" style="background-color:#fff">-->
<div class="well bs-sidebar" id="sidebar" style="background-color:#fff">
<ul class="nav nav-pills nav-stacked">
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</div> <!--well bs-sidebar affix-->
</div> <!--col-sm-2-->
<div class="col-sm-10">
<div class='container-fluid'>
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid" style='margin-left:15px'>
<p>Contact | LinkedIn | Twitter | Google+</p>
</div>
</footer>
</body>
</html>
<img src="{% static 'personal/img/profile.jpg' %}" class="responsive-img" style='max-height:100px;' alt="face"> is loaded using Django templating.
Above page uses bootstrap css framework, for responsive design
Image size/resolution impacts utilisation of network bandwidth.
Appropriate image size helps in creating responsive UI design.
In real time, we get images from client(customer) based on the size/resolution that we request to client(customer). Images can be IP property of client, until the website goes in production.
Question:
Amidst development process, for requesting to client(customer), How to decide the final size/resolution of an image to embed in web page, for any given layout of web page?
One way to do this is to put images of a different size in the template and then make sure that browser renders the appropriate image. You can use picture html tag for this:
<picture class="responsive-img" style='max-height:100px;' alt="face">
<!-- low-res, default -->
<source src="{% static 'personal/img/profile.jpg' %}">
<!-- med-res -->
<source src="{% static 'personal/img/profile.medium.jpg' %}"
media="(min-width: 400px)">
<!-- high-res -->
<source src="{% static 'personal/img/profile.large.jpg' %}"
media="(min-width: 800px)">
<!-- Fallback content -->
<img src="{% static 'personal/img/profile.jpg' %}" alt="face">
</picture>
I am building a SPA with AngularJS, everything is working as I hoped except that I am running into issues regarding its appearance on mobile (I am using twitter bootstrap 3). The two issues in particular are:
Vertical scrolling on mobile is very jerky and sometimes gets stuck
On some pages the users mobile screen automatically zooms in on an input field, which is fine. However, I want to undo this zoom when they change partial; because otherwise when the user gets to the next partial everything is too zoomed.
I have had a look around and can't see an answer to these. I haven't put code in here, as it pretty much effects the whole site :) However, for a demonstration of the issue you can see on the site itself: www.objectivemoney.co.za.
Any help would be much appreciated!
UPDATE TO INCLUDE CODE
Index.html
<!DOCTYPE html>
<html lang="en-us" ng-app="omApp">
<head>
<title>OM</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Find your perfect planner | Quickly search for and compare verified, customer reviewed planners in your area with OM">
<meta name="keywords" content="search,financial,planner,compare,verified,planners">
<!-- load bootstrap and fontawesome via CDN -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="Font-Awesome-master/css/font-awesome.min.css" />
<link href='//fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Merriweather:700' rel='stylesheet' type='text/css'>
<link href='toaster/toaster.css' rel='stylesheet' type='text/css'>
<!-- load CSS files locally -->
<link rel="stylesheet" href="style-min.css" />
<link rel="stylesheet" href="angular-slider-master/slider.css" />
<link rel="stylesheet" href="animate.min.css" />
<!-- sharethis -->
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="https://ws.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "XXXXXXXXXXXXX", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-X', { 'cookieDomain': 'none' });
</script>
</head>
<body>
<!-- create a navbar that is collapsable in a mobile view -->
<nav id="navbar-example" class="navbar navbar-inverse navbar-static" role="navigation" ng-controller="searchController">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
<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" href="#/"> <img id="navbarlogo" src="./img/logo/logo-white.png"></a>
</div>
<div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Search</li>
<li>Resources</li>
<li>Planner Registration</li>
</ul>
</ul>
<!-- create a logout sign that shows when a user is logged in, position this on the right of the navbar -->
<ul ng-show="authenticated === true" class="nav navbar-nav pull-right logoutlink ng-cloak">
<ul class="nav navbar-nav navbar-right">
<li><a ng-controller="searchController" ng-click="logout(); changeAuth()">Logout</a></li>
</ul>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Create container for app views -->
<div class="wrapper">
<!-- set empty div for views, autoscroll means that page scrolls to top when user clicks through -->
<div ng-view autoscroll="true"></div>
<div class="push"></div>
</div>
<div class="footer">
<footer>
<div>
<div id="footershare" class="col-sm-6">
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_googleplus_large' displayText='Google +'></span>
<span class='st_email_large' displayText='Email'></span>
</div>
<div id="footercontact" class="col-sm-6">
<p>Contact: xxx#xxx.co.za | Copyright ©</p>
</div>
</div>
</footer>
</div>
<div class="ng-cloak" ng-controller="searchController">
<div ng-show="showBar" class="signupBox">
<p id ="signupBox-text"><span ng-click="setCloseBar();setShowBar()" class="signupBox-close pull-right"><b>×</b></span><a id ="signupBox-text" href="#/mailinglist" ng-click="setCloseBar();setShowBar()">Join Our Mailing List To Stay Up To Date With The Latest Planning Advise And News.</a></p>
</div>
</div>
<!-- load angular and additional precompiled services -->
<script src="//code.angularjs.org/1.4.0-rc.2/angular.min.js"></script>
<script src="//code.angularjs.org/1.4.0-rc.2/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.4.1/angular-animate.min.js"></script>
<script src="//code.angularjs.org/1.4.0-rc.2/angular-messages.min.js"></script>
<script src="//code.angularjs.org/1.4.0/angular-resource.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="vs-google-autocomplete.min.js"></script>
<script src="angulartics.min.js"></script>
<script src="angulartics-ga.min.js"></script>
<script src="toaster/toaster.js"></script>
<script src="ui-bootstrap-0.13.0.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="angular-slider-master/slider.js"></script>
<script src="bower_components/ng-optimizely/ng-optimizely.js"></script>
<!-- load angular app -->
<script src="modules/omApp.js"></script>
<!-- load custom services -->
<script src="services/services.min.js"></script>
<script src="services/data.min.js"></script>
<!-- load angular controllers -->
<script src="controllers/minified/searchController.js"></script>
<script src="controllers/minified/resourcesController.js"></script>
<script src="controllers/minified/plannerRegController.js"></script>
<!-- directives -->
<script src="directives/directive.min.js"></script>
</body>
<!-- toaster-container that shows when a user log ins and log out [CURRENTLY THE TOASTER SHOWS FOR TOO LONG AND TIME OUT FUNCTION DOES NOT CHANGE TOASTER DISPLAY TIME] -->
<toaster-container toaster-options="{'time-out': 2000}"></toaster-container>
</html>
Home Partial
<div class="jumbotron">
<div class="container">
<div class="homepage-jumbo-info col-sm-offset-7 col-sm-5">
<div class="homepage-jumbo-info-header">
<h1>We'll help you find a <br><b> planner</b>, hassle-free</h1>
</div>
<div class="homepage-jumbo-info-box">
<h2 class="homepage-jumbo-info-boxheader"><b>Compare verified planners</b> in your area</h2>
<input vs-google-autocomplete="options"
ng-model="searchquery.address.name"
vs-street-number="searchquery.address.streetNumber"
vs-street="searchquery.address.street"
vs-city="searchquery.address.city"
vs-state="searchquery.address.state"
vs-country-short="searchquery.address.countryCode"
vs-country="searchquery.address.country"
vs-latitude="searchquery.lat"
vs-longitude="searchquery.long"
type="text"
name="address"
id="address"
class="form-control homepage-jumbo-info-boxinput"
placeholder="In which city / suburb do you live?">
</div>
<div class="form-group homepage-searchbutton homepage-jumbo-info-boxbutton">
<p id="homepage-searchbutton-text">SEARCH NOW <i class="fa fa-search"></i></p>
</div>
</div>
</div>
</div>
<div class="container-fluid homepage-body-steps">
<div class="col-sm-12 homepage-body-header">
<h2><b>Find The Right Planner With 3 Simple Steps</b></h2>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons" src="img/icons/search.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>SEARCH</b></h3>
<p class="homepage-body-icons-text">Search for independently verified planners in your local area that can meet your requirements.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons" src="img/icons/compare.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>COMPARE</b></h3>
<p class="homepage-body-icons-text">Compare planners based on their offerings, qualifications and actual customer reviews.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons" src="img/icons/schedule.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>SCHEDULE</b></h3>
<p class="homepage-body-icons-text">Click to automatically schedule a meeting with your chosen planner at a time that suits you.</p>
</div>
</div>
<div class="row homepage-body-carousel-header">
<div class="col-sm-12 homepage-body-header">
<h2><b>Our Planners Partner With The Biggest Companies In South Africa</b></h2>
</div>
</div>
<div class="row homepage-body-carousel">
<carousel interval="myInterval" disable-animation="true">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="img/sitephotos/{{slide.image}}.png" alt="{{slide.image}}" style="margin:auto;">
</slide>
</carousel>
</div>
<div class="container-fluid homepage-body-video">
<p class="homepage-body-video-text">Watch our short video to see how it works in more detail</p>
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/-rsr45s2mws" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="container-fluid homepage-body-steps">
<div class="col-sm-12 homepage-body-header">
<h2><b>How OM Helps You</b></h2>
</div>
<div class="row">
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/independent.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>INDEPENDENT</b></h3>
<p class="homepage-body-icons-text">All of our advisers have been independently verified, helping you to avoid any sharks.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/user-review.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>USER REVIEWED</b></h3>
<p class="homepage-body-icons-text">All of our advisers are reviewed by genuine users, helping you make sure that the adviser is the right match for you.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/tailored.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>TAILORED</b></h3>
<p class="homepage-body-icons-text">Search functionality lets you specify your ideal adviser.</p>
</div>
</div>
<div class="row">
<div class="col-sm-offset-2 col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/quick.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>QUICK</b></h3>
<p class="homepage-body-icons-text">No need for lengthy internet research, enquiry calls or getting hold of friends and family to help you.</p>
</div>
<div class="col-sm-offset-right-2 col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/free-2.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>FREE</b></h3>
<p class="homepage-body-icons-text">Our service is entirely free of charge.</p>
</div>
</div>
</div>
Jack
I am trying t make an asp.net website, and am using notepad++ so do not have auto setup options eg from visual studio.
I am using a master page which I am trying to use throughout the site.
I am having lots of problems but have finally got a page to display with no errors, but it now does not display any content from the master page.
I am including all the code I have in the hope someone can explain to me why my content from the masterpage is not displaying. I feel I am close but have not found a decent tutorial to show me what I need to do.
Masterpage:
<asp:ContentPlaceHolder ID="CPH1" runat="server">
<HTML>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Style/main_Style.css">
<link rel="stylesheet" type="text/css" href="Style/Responsive-Style.css">
<link rel="stylesheet" href="Style/style.css">
<link rel="stylesheet" href="Style/slicknav.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<link rel="stylesheet" href="Style/flexslider.css" type="text/css" media="screen" />
<script src="Javascript/modernizr.js"></script>
</head>
<body>
<div class="headerOutline">
<div class="logo">
<img class="omTechLogo" src="images/mainLogo.png"></img>
</div>
<div class="headerMenu">
<ul id="menu">
<li class="headerMenuItem"><a class="menuText" href="Home.HTML">Home</a></li>
<li class="headerMenuItem"><a class="menuText" href="About.HTML">About</a></li>
<li class="headerMenuItem"><a class="menuText" href="Services.HTML">Services</a></li>
<li class="headerMenuItem"><a class="menuText" href="Portfolio.HTML">Portfolio</a></li>
<li class="headerMenuItem" id="headerMenuItem_last"><a class="menuText" href="Contact.HTML">Contact</a></li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="JQuery/jquery.slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu').slicknav();
});
</script>
</div>
</div>
<div class="bodyOutline">
<div class="flexslider" style="height:auto; min-height:150px;">
<ul class="slides">
<li>
<img src="images/SliderImage1.jpg" />
</li>
<li>
<img src="images/SliderImage2.png" />
</li>
<li>
<img src="images/SliderImage3.jpg" />
</li>
<li>
<img src="images/SliderImage4.jpg" />
</li>
</ul>
</div>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
<script defer src="JQuery/jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
<div class="homepageBody">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="CPH2" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="CPH3" runat="server">
</div>
</div>
<div class="footerOutline">
<div class="footerInfo">
<a class="footerList" href="Home.HTML">Home</a>
<a class="footerList" href="About.HTML">About</a>
<a class="footerList" href="Services.HTML">Services</a>
<a class="footerList_Last" href="Portfolio.HTML">Portfolio</a>
<a class="footerList_Last" href="Contact.HTML">Contact</a>
<div class="socialMedia">
<div class="socialMediaText">
<img src="images/li.png"></img>
<img src="images/tw.png"></img>
<img src="images/yt.png"></img>
<img src="images/fb.png"></img>
</div>
</div>
</div>
</body>
</HTML>
</asp:ContentPlaceHolder>
and home page:
<%# Page Language="C#" MasterPageFile="~/MasterPage/MasterPage.master" Title="Content Page"%>
<asp:Content ContentPlaceHolderId="CPH1" runat="server">
</asp:Content>
<asp:Content ContentPlaceHolderId="CPH2" runat="server">
TExt teX teXt
</asp:Content>
<asp:Content ContentPlaceHolderId="CPH3" runat="server">
</asp:Content>
I want the content from CPH1 and CPH3 to display on all pages, and the content from CPH2 to change with each page
You have html markup within your content placeholder ID=CPH3. When your page inflates, it will render it's content inside of that component replacing what is already there. In your case, it will render the empty contents of your page with contentplaceholderid=CPH3.
This is your problem:
<asp:ContentPlaceHolder ID="CPH3" runat="server">
</div>
</div>
<div class="footerOutline">
<div class="footerInfo">
<a class="footerList" href="Home.HTML">Home</a>
<a class="footerList" href="About.HTML">About</a>
<a class="footerList" href="Services.HTML">Services</a>
<a class="footerList_Last" href="Portfolio.HTML">Portfolio</a>
<a class="footerList_Last" href="Contact.HTML">Contact</a>
<div class="socialMedia">
<div class="socialMediaText">
<img src="images/li.png"></img>
<img src="images/tw.png"></img>
<img src="images/yt.png"></img>
<img src="images/fb.png"></img>
</div>
</div>
</div>
</body>
</HTML>
</asp:ContentPlaceHolder>
You are basically killing the closing body and html tag along with your footer. Maybe you were trying to do this:?
<div>
<asp:ContentPlaceHolder ID="CPH3" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="footerOutline">
<div class="footerInfo">
<a class="footerList" href="Home.HTML">Home</a>
<a class="footerList" href="About.HTML">About</a>
<a class="footerList" href="Services.HTML">Services</a>
<a class="footerList_Last" href="Portfolio.HTML">Portfolio</a>
<a class="footerList_Last" href="Contact.HTML">Contact</a>
<div class="socialMedia">
<div class="socialMediaText">
<img src="images/li.png"></img>
<img src="images/tw.png"></img>
<img src="images/yt.png"></img>
<img src="images/fb.png"></img>
</div>
</div>
</div>
</body>
I have used bootstrap framework and a template from a book to finally make the master page the way I want.
When I use google chrome, or IE, and I resize the browsers, the page is resized and the menu is converted to a vertical menu.
However, I just tried on the iphone and it shows "like" a big browser, instead of showing the vertical menu.
I wish I could paste the code but the bootstrap code is way too long to copy here.
I will show my website:
https://levalencia-public.sharepoint.com/
And I will paste the html of my masterpage.
<?xml version="1.0" encoding="utf-8"?><!--SPG:
This HTML file has been associated with a SharePoint Master Page (.master file) carrying the same name. While the files remain associated, you will not be allowed to edit the .master file, and any rename, move, or deletion operations will be reciprocated.
To build the master page directly from this HTML file, simply edit the page as you normally would. Use the Snippet Generator at https://levalencia-public.sharepoint.com/_layouts/15/ComponentHome.aspx?Url=https%3A%2F%2Flevalencia%2Dpublic%2Esharepoint%2Ecom%2F%5Fcatalogs%2Fmasterpage%2Flv%2Emaster to create and customize useful SharePoint entities, then copy and paste them as HTML snippets into your HTML code. All updates to this file will automatically sync to the associated Master Page.
-->
<!DOCTYPE html[]>
<html class="no-js" lang="en" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<!--CS: Start Page Head Contents Snippet-->
<!--SPM:<%#Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--SPM:<%#Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--SID:00 -->
<meta name="GENERATOR" content="Microsoft SharePoint" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0" />
<!--MS:<SharePoint:RobotsMetaTag runat="server">-->
<!--ME:</SharePoint:RobotsMetaTag>-->
<!--MS:<SharePoint:PageTitle runat="server">-->
<!--MS:<asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">-->
<!--MS:<SharePoint:ProjectProperty Property="Title" runat="server">-->
<!--ME:</SharePoint:ProjectProperty>-->
<!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:PageTitle>-->
<!--MS:<SharePoint:StartScript runat="server">-->
<!--ME:</SharePoint:StartScript>-->
<!--MS:<SharePoint:CssLink runat="server" Version="15">-->
<!--ME:</SharePoint:CssLink>-->
<!--MS:<SharePoint:CacheManifestLink runat="server">-->
<!--ME:</SharePoint:CacheManifestLink>-->
<!--MS:<SharePoint:PageRenderMode runat="server" RenderModeType="Standard">-->
<!--ME:</SharePoint:PageRenderMode>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:CustomJSUrl runat="server">-->
<!--ME:</SharePoint:CustomJSUrl>-->
<!--MS:<SharePoint:SoapDiscoveryLink runat="server">-->
<!--ME:</SharePoint:SoapDiscoveryLink>-->
<!--MS:<SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">-->
<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
<!--ME:</asp:ContentPlaceHolder>-->
<!--MS:<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true">-->
<!--ME:</SharePoint:DelegateControl>-->
<!--MS:<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server">-->
<!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--MS:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server">-->
<!--ME:</SharePoint:CssRegistration>-->
<!--MS:<SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">-->
<!--MS:<WebPartPages:SPWebPartManager runat="server">-->
<!--ME:</WebPartPages:SPWebPartManager>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--CE: End Page Head Contents Snippet-->
<meta charset="utf-8" />
<!--DC:Specter Group - Blog Bootstrap Version-->
<meta name="description" content="" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/superfish.css" />
<link rel="stylesheet" href="css/nivo-slider.css" />
<link rel="stylesheet" href="css/isotope.css" />
<link rel="stylesheet" href="css/elements.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/custom.css" />
<!-- Modernizr enables HTML5 elements & feature detects for optimal performance.
Include html5shiv 3.6. Our version is a custom build.
Create your own custom Modernizr build: www.modernizr.com/download/ -->
<script src="js/modernizr-2.6.2.custom.js">//<![CDATA[//]]>
</script>
<!--Grab Microsofts CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<!--place in head in case need to access jquery inline in SP page layout-->
<script src="js/jquery-1.9.1.min.js">//<![CDATA[//]]>
</script>
<script>//<![CDATA[window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js">//<![CDATA[<\/script>')//]]>
</script>
<!--used to help make old scripts work with jquery 1.9-->
<script src="js/jquery-migrate-1.1.0.min.js">//<![CDATA[//]]>
</script>
<!--js libraries-->
<script src="js/jquery-ui-1.8.9.custom.min.js">//<![CDATA[//]]>
</script>
<script src="js/hoverIntent.js">//<![CDATA[//]]>
</script>
<script src="js/superfish-1.4.8/superfish.js">//<![CDATA[//]]>
</script>
<script src="js/superfish-1.4.8/supersubs.js">//<![CDATA[//]]>
</script>
<script src="js/jquery.nivo.slider.js">//<![CDATA[//]]>
</script>
<script src="js/jquery.isotope.min.js">//<![CDATA[//]]>
</script>
<script src="js/jquery.tweet.js">//<![CDATA[//]]>
</script>
<script src="js/jquery.tabs.js">//<![CDATA[//]]>
</script>
<script src="js/poshytip-1.1/jquery.poshytip.min.js">//<![CDATA[//]]>
</script>
<script src="js/bootstrap.js">//<![CDATA[//]]>
</script>
<!--custom scripts-->
<script src="js/jquery-custom.js">//<![CDATA[//]]>
</script>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:HtmlDesignFromMaster msdt:dt="string"></mso:HtmlDesignFromMaster>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">https://levalencia-public.sharepoint.com/_catalogs/masterpage/lv.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
<mso:ContentTypeId msdt:dt="string">0x0101000F1C8B9E0EB4BE489F09807B2C53288F0054AD6EF48B9F7B45A142F8173F171BD10003D357F861E29844953D5CAA1D4D8A3A00A9586E0672297E4794AD6E170F2BEB51</mso:ContentTypeId>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<!--CS: Start Ribbon Snippet-->
<!--SPM:<%#Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--SPM:<%#Register Tagprefix="wssucw" TagName="Welcome" Src="~/_controltemplates/15/Welcome.ascx"%>-->
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" HideFromSearchCrawler="true" EmitDiv="true">-->
<div id="TurnOnAccessibility" style="display:none" class="s4-notdlg noindex">
<a id="linkTurnOnAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(true);UpdateAccessibilityUI();document.getElementById('linkTurnOffAcc').focus();return false;">
<!--MS:<SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,master_turnonaccessibility%>" EncodeMethod="HtmlEncode">-->
<!--ME:</SharePoint:EncodedLiteral>-->
</a>
</div>
<div id="TurnOffAccessibility" style="display:none" class="s4-notdlg noindex">
<a id="linkTurnOffAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(false);UpdateAccessibilityUI();document.getElementById('linkTurnOnAcc').focus();return false;">
<!--MS:<SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,master_turnoffaccessibility%>" EncodeMethod="HtmlEncode">-->
<!--ME:</SharePoint:EncodedLiteral>-->
</a>
</div>
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
<div id="ms-designer-ribbon">
<!--SID:02 {Ribbon}-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify) --><div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">The SharePoint ribbon will be here when your file is either previewed on or applied to your site.</div><!--PE: End of READ-ONLY PREVIEW -->
</div>
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AnonymousUsersOnly">-->
<!--MS:<wssucw:Welcome runat="server" EnableViewState="false">-->
<!--ME:</wssucw:Welcome>-->
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
<!--CE: End Ribbon Snippet-->
<div id="s4-workspace">
<div id="s4-bodyContainer">
<!-- HEADER -->
<header>
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
<div id="logo">
<!--logo snippet-->
<div data-name="SiteLogo"><!--CS: Start Site Logo Snippet--><!--SPM:<%#Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SharePoint:AjaxDelta BlockElement="true" runat="server">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--MS:<SharePoint:SPSimpleSiteLink CssClass="ms-siteicon-a" runat="server" ID="x8b0737e1232643da88f7b4721567d1e8">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--MS:<SharePoint:SiteLogoImage CssClass="ms-siteicon-img" name="onetidHeadbnnr0" ID="x596f04b7f65943cb9ad23b9fd9ac5744" LogoImageUrl="/_layouts/15/images/siteIcon.png" runat="server">--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><img id="ctl00_x596f04b7f65943cb9ad23b9fd9ac5744" class="ms-siteicon-img" name="onetidHeadbnnr0" Src="/SiteAssets/logosharepointazul.PNG" alt="Luis Valencia - Sharepoint Architect" /><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SharePoint:SiteLogoImage>--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SharePoint:SPSimpleSiteLink>--><!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW--><!--ME:</SharePoint:AjaxDelta>--><!--CE: End Site Logo Snippet-->
</div>
</div>
<div class="tagline">
<h2>
<span>Luis
</span>
Valencia </h2>
<h2>
<span>Sharepoint
</span>
Architect </h2>
</div>
</div>
<div class="social cf">
<ul class="cf">
<li>
<a href="https://www.facebook.com/pages/Sharepoint-Architects-Blog/259727274196140" target="_blank">
<img src="img/social/Facebook.png" alt="Facebook" />
</a>
</li>
<li>
<a href="https://twitter.com/levalencia" target="_blank">
<img src="img/social/Twitter.png" alt="Twitter" />
</a>
</li>
<li>
<a href="https://plus.google.com/115487123900000828421/posts" target="_blank">
<img src="img/social/Google+.png" alt="Google+" />
</a>
</li>
<li>
<a href="http://www.linkedin.com/profile/view?id=55314636&trk=nav_responsive_tab_profile" target="_blank">
<img src="img/social/LinkedIn.png" alt="Linked In" />
</a>
</li>
<li>
<a href="#">
<img src="img/social/RSS.png" alt="Blog" />
</a>
</li>
</ul>
<a class="social-toggle" title="Follow Us">Toggle
</a>
</div>
</div>
</div>
</header>
<!-- ENDS HEADER -->
<!-- nav -->
<!-- nav -->
<nav id="topnav">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav nav-collapse collapse">
<!--nav snippet-->
<ul class="root">
<li class="current-menu-item">HOME</li>
<li>ABOUT ME</li>
<li>BLOG</li>
<li>ARTICLES</li>
<li>CONTACT</li>
</ul>
<!--end nav snippet-->
</div> <!--end class nav-->
</div> <!--end container-->
</div>
</div>
</div> <!--end span 12-->
</div> <!--end row-->
</div> <!--end fluid container-->
</nav>
<!-- ends nav -->
<!-- MAIN -->
<div role="main" id="main">
<div class="container-fluid">
<!--main content placerholder, use the following html as sample content for content placeholder-->
<div class="row-fluid">
<div data-name="ContentPlaceHolderMain">
<!--CS: Start PlaceHolderMain Snippet-->
<!--SPM:<%#Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">-->
<!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
<div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.
</div>
<!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--CE: End PlaceHolderMain Snippet-->
</div>
</div>
<!--end content placerholder-->
</div>
</div>
<!-- ENDS MAIN -->
<footer>
<!-- bottom footer-->
<div class="footer-bottom">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6 copyright">
<p><b>Copyright © 2014 Luis Valencia - All Rights Reverved</b>
</p>
</div>
</div>
</div>
</div>
<!--end bottom footer-->
</footer>
</div>
</div>
</body>
</html>
You are missing
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Check;
Bootstrap 3 responsive not working on mobile
good luck!
You are missing the viewport meta tag. Add this within your <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
What this does is essentially instructs the device that 'width' should be considered the device's width. The device can then use that to compare against your media-queries and decide how to display the page.