for some reason bootstrap isnt making my website (https://dylantn.github.io/Dusic/) automatically mobile compatible because i checked this website on my phone and it is just a zoomed out version of the desktop version
some one pls help
im frustrated
and need help
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="ind.css">
<title>Dusic-The Free Music Player Worldwide.</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
<span class="sr-only"><font face="arial"></font>Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<font face="arial"><span class="navimg"><img src="dusic4.gif" width="80" length="80" alt=""></span></font>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li><font face="arial">About</font></li>
<li><font face="arial">Contact</font></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><font face="arial">Sign Up</font></li>
<li><font face="arial">Login</font></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1><b><img src="dusic4.gif" width="250" length="250"></b></h1>
<h3><b>The Best Collection of Music That Ain't Worldwide...... MAN</b></h3>
<hr>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h1>What is the purpose of Dusic?</h1>
<p>Our Society already has many music players, but i thought we need another one to clutter your life, plus it is Free!!</p>
<br><h3>IT IS FREE!! THAT IS THE ONLY COOL FEATURE ABOUT THIS THAT SEPERATES THIS FROM EVERYTHING ELSE<br>YIPEEEEE!</h3>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Try to add the following tag <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 user-scalable=no" charset="utf-8"> to you head section.
You can find more info about it here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Related
I am trying to implement simple ng-include but it is not working. Navbar is not showing in the index page.
All the css files and html file directory is correct and linked well.
I have also used server for it using: npm install -g http-server.
here's my index.html:
<html lang="en" ng-app='App'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Student Hub</title>
<link href="../vendor/css/bootstrap.min.css" rel="stylesheet">
<link href="../vendor/css/heroic-features.css" rel="stylesheet">
</head>
<body ng-view>
<ng-include src="'navbar.html'"></ng-include>
<ng-include src="'footer.html'"></ng-include>
navbar.html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!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 lined is used to make the webpage responsive -->
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Ristorante Con Fusion</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="header">
Ristorante Con Fusion
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-control="navbar"> navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Menu</li>
<li>Contents</li>
</ul>
</div>
</nav>
<header class="jumbotron row-header">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row ">
<div class="col-xs-12 col-sm-8">
<h1>Ristorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best
cuisines, and create a unique fusion experience. Our lipsmacking
creations will tickle your culinary senses!</p>
</div>
<div class="col-xs-12 col-sm-4">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row row-content ">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align="center">Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-xs12 col-sm-9 col-sm-pull-3">
<h2>Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and
Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes,
Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
<p>More »</p>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12 col-sm-3">
<p style="padding:20px;"></p>
<h3 align="center">This Month's Promotions</h3>
</div>
<div class="col-xs-12 col-sm-9">
<h2>Weekend Grand Buffet</h2>
<p>Featuring mouthwatering combinations with a choice of
five different salads, six enticing appetizers, six main entrees and
five choicest desserts. Free flowing bubbly and soft drinks. All for
just $19.99 per person </p>
<p>More »</p>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align="center">Meet our Culinary Specialists</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide
International experience having worked closely with whos-who in the
culinary world, he specializes in creating mouthwatering Indo-Italian
fusion experiences. </p>
<p>More »</p>
</div>
</div>
</div>
<footer class="row-footer">
<div class="container">
<div class="row ">
<div class="col-xm-6 col-xs-offset-1 col-sm-3 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div>
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div>
<div style="padding: 40px 10px;">
Google+
Facebook
LinkedIn
Twitter
YouTube
Mail
</div>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align="center">© Copyright 2015 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- jquery (necessery for bootstrap javascript plugin) -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body></html>
Can anyone tell me how Bootstrap recognize that span button code is for mobile or for desktop how program recognize that the nav bar only visible when it viewport is for desktop and run button code when viewport is for mobile .what the logic behind?
Please tell me how bootstrap recognize code to be run on desktop and for mobile .what is the logic behind recognition of code in bootstrap for mobile viewport and for desktop. This is my course project for Bootstrap but i am confused in logic how bootstrap recognized code even though i did't mention in code.
CSS3 Media Queries are how CSS in general (and Bootstrap in particular) display differently on different media/screen sizes. For example, the following lines in bootstrap.css
#media (min-width: 576px) {
.container {
width: 540px;
max-width: 100%;
}
}
say that on a screen size at least 576 pixels wide (Bootstrap's "small" device breakpoint), the .container style will have a width of 540 pixels.
So the flow is I visit / then the script load main.html which include header.html then inject to ng-view in index.html
Here is the detail
My index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Koupon - Index</title>
<!-- meta info -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="keywords" content="Koupon HTML5 Template" />
<meta name="description" content="Koupon - Premiun HTML5 Template for Coupons Website">
<meta name="author" content="Dark Cyber" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google fonts -->
<!-- <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600' rel='stylesheet' type='text/css'> -->
<!-- <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'> -->
<!-- Bootstrap styles -->
<link rel="stylesheet" href="css/boostrap.css">
<link rel="stylesheet" href="css/boostrap_responsive.css">
<!-- Font Awesome styles (icons) -->
<link rel="stylesheet" href="css/font_awesome.css">
<!-- Main Template styles -->
<link rel="stylesheet" href="css/styles.css">
<!-- IE 8 Fallback -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
<!-- Your custom styles (blank file) -->
<link rel="stylesheet" href="css/mystyles.css">
<!-- Backend Style -->
<!-- End Backend Style -->
</head>
<body ng-app="rentalkika">
<!-- //// START PAGE CONTENT -->
<div ng-view>
</div>
<!-- END PAGE CONTENT /// -->
<!-- Scripts queries -->
<script src="js/jquery.js"></script>
<script src="js/boostrap.min.js"></script>
<script src="js/nivo_slider.min.js"></script>
<script src="js/countdown.min.js"></script>
<script src="js/magnific.min.js"></script>
<script src="js/tweet.min.js"></script>
<!--
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="js/gmap3.min.js"></script>
-->
<script src="js/wilto_slider.min.js"></script>
<script src="js/mediaelement.min.js"></script>
<script src="js/fitvids.min.js"></script>
<script src="js/mail.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/ng-file-upload-shim.js"></script>
<script src="js/ng-file-upload.js"></script>
<script src="js/app.js"></script>
<script src="js/flexnav.min.js"></script>
<!-- Custom scripts -->
<script src="js/custom.js"></script>
<script type="text/javascript" >
if($('#something').length){
alert('something found');
//I want to init plugin with #something here
}else{
alert('something not found');
}
</script>
<!-- Backend JS -->
<!-- End Backend JS -->
</body>
</html>
app.js
$routeProvider
.when('/', {
templateUrl : 'pages/main.html',
title: "Home"
})
main.html
<div ng-include="'header.html'"></div>
<!-- TOP AREA -->
<div class="top-area">
<!-- START BOOTSTRAP CAROUSEL -->
<div id="my-carousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<img src="img/1200x480.png" alt="Image Alternative text" title="Old No7" />
<div class="carousel-caption countdown-caption">
<h3>Jack Daniels Huge Pack</h3>
<!-- COUNTDOWN -->
<div data-countdown="Aug 25, 2013 5:30:00" class="countdown"></div>Save 70%
</div>
</div>
<div class="item">
<img src="img/1200x480.png" alt="Image Alternative text" title="iPhone 5 iPad mini iPad 3" />
<div class="carousel-caption countdown-caption">
<h3>Apple Big Deal</h3>
<!-- COUNTDOWN -->
<div data-countdown="Aug 30, 2013 10:45:00" class="countdown"></div>Save 50%
</div>
</div>
<div class="item">
<img src="img/1200x480.png" alt="Image Alternative text" title="the best mode of transport here in maldives" />
<div class="carousel-caption countdown-caption">
<h3>Finshing in Maldives</h3>
<!-- COUNTDOWN -->
<div data-countdown="Sep 2, 2013 22:00:00" class="countdown"></div>Save 30%
</div>
</div>
</div>
<a class="carousel-control left" href="#my-carousel" data-slide="prev"></a>
<a class="carousel-control right" href="#my-carousel" data-slide="next"></a>
</div>
<!-- END BOOTSTRAP CAROUSEL -->
</div>
<!-- END TOP AREA -->
<div ng-include="'footer.html'"></div>
header.html
<!-- //////////////////////////////////
//////////////MAIN HEADER/////////////
////////////////////////////////////-->
<div id="something">
</div>
<header class="main">
<div class="container">
<div class="row">
<div class="span2">
<a href="index.html">
<img src="img/logo-small.png" alt="logo" title="logo" class="logo">
</a>
</div>
<div class="span8">
<!-- MAIN NAVIGATION -->
<div class="flexnav-menu-button" id="flexnav-menu-button">Menu</div>
<nav>
<ul class="nav nav-pills flexnav" id="flexnav" data-breakpoint="800">
<li class="active">Home
</li>
<li>Layanan
<ul>
<li>Sewa Mobil
</li>
<li>Shuttle
</li>
</ul>
</li>
<li>Paket Wisata
<ul>
<li>xxx</li>
<li>bbb</li>
</ul>
</li>
<li>Blog
</li>
<li>FAQ
</li>
<li>Tertarik menjadi mitra kami?</li>
<li>Contact
</li>
</ul>
</nav>
<!-- END MAIN NAVIGATION -->
</div>
<div class="span2">
<!-- LOGIN REGISTER LINKS -->
<ul class="login-register" ng-controller="LoginController">
<li ng-hide="loggedIn"><a class="popup-text" href="#login-dialog" data-effect="mfp-move-from-top"><i class="icon-signin"></i>Sign in</a>
</li>
<li ng-show="loggedIn"><i class="icon-signout"></i>Sign out
</li>
<li><i class="icon-edit"></i>Sign up
</li>
<!-- LOGIN REGISTER LINKS CONTENT -->
<div id="login-dialog" class="mfp-with-anim mfp-hide mfp-dialog clearfix">
<i class="icon-signin dialog-icon"></i>
<h3>Member Login</h3>
<h5>Welcome back, friend. Login to get started</h5>
<div class="row-fluid">
<form class="dialog-form" ng-submit="handleLogin()" >
<label>Username</label>
<input type="text" placeholder="yourUsername" ng-model="login.username" class="span12">
<label>Password</label>
<input type="password" placeholder="My secret password" ng-model="login.password" class="span12">
<label class="checkbox">
<input type="checkbox">Remember me
</label>
<div class="control-group error" ng-show="error">
<span class="error help-block">
{{ error }}
</span>
</div>
<input type="submit" value="Sign in" class="btn btn-primary">
<button ng-click="FBLogin()" class="btn btn-primary">Login with Facebook</button>
</form>
</div>
<!--
<ul class="dialog-alt-links">
<li><a class="popup-text" href="#register-dialog" data-effect="mfp-zoom-out">Not member yet</a>
</li>
<li><a class="popup-text" href="#password-recover-dialog" data-effect="mfp-zoom-out">Forgot password</a>
</li>
</ul>
-->
</div>
</ul>
</div>
</div>
</div>
</header>
<div id="password-recover-dialog" class="mfp-with-anim mfp-hide mfp-dialog clearfix">
<i class="icon-retweet dialog-icon"></i>
<h3>Password Recovery</h3>
<h5>Fortgot your password? Don't worry we can deal with it</h5>
<div class="row-fluid">
<form class="dialog-form">
<label>E-mail</label>
<input type="text" placeholder="email#domain.com" class="span12">
<input type="submit" value="Request new password" class="btn btn-primary">
</form>
</div>
</div>
<!-- END LOGIN REGISTER LINKS CONTENT -->
<!-- //////////////////////////////////
//////////////END MAIN HEADER//////////
////////////////////////////////////-->
The above script will alert something not found but if I put <div id="something"></div> directly to index.html the script will alert something found
What I need is <div id="something"></div> in header.html then I init plugin with #something in index.html
Is something wrong with my structure or code?
<div id="something" ng-controller="SomethingController">
</div>
then in your SomethingController
$("#something").initPlugin();
I am trying to use UI router but I can't get to open the view of the first page don't know why it won't show the template. It would only show the index.html element. Help would be appreciated I am new to Angular
<!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">
<title>Webstie Designing</title>
<!-- Angular Scripts -->
<script src="js/angular.min.js"></script>
<script src ="js/angular-resource.js"></script>
<script src="js/angular-mocks.js"></script>
<script src="js/angular-ui-router.js"></script>
<!-- Application Scripts-->
<script type="text/javascript">"app/app.js"</script>
</head>
<body id="page-top" ng-app="portfolio">
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#/">Web Designing</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<div ui-view></div>
</div>
(function(){
"use strict";
var app = angular.module("portfolio",["ui.router"]);
app.config(["$stateProvider","$urlRouterProvider",
function("$stateProvider","$urlRouterProvider"){
$urlRouterProvider.otherwise('/');
$stateProvider
.state("home",{
url:"/",
templateUrl:"app/Intro.html"
})
}]
);
}());
First thing you need to refer app.js script reference correctly to make portfolio module available for ng-app
<script type="text/javascript" src="app/app.js"></script>
instead of
<script type="text/javascript">"app/app.js"</script>
I am recently trying Angular UI Layout (https://github.com/angular-ui/ui-layout) which is pretty straightforward to use. However, I found the UI layout always overlaps with navbar of Bootstrap.
YOu can take a look at it here: http://plnkr.co/edit/r5veawwbgz98bZjLdr1B
<!DOCTYPE html>
<html ng-app="x">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>UI.Layout Issue</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://rawgithub.com/angular-ui/ui-layout/v1.0.5/ui-layout.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><i class="glyphicon glyphicon-envelope"></i><span>Website</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div ui-layout style="position:relative; height:500px">
<div ui-layout-container style="border-style: solid;"><h1>top</h1></div>
<div ui-layout-container>
<div ui-layout="{flow : 'column'}" >
<div ui-layout-container style="border-style: solid;" ><h1>left</h1></div>
<div ui-layout-container style="border-style: solid;" ><h1>right</h1></div>
</div>
</div>
<div ui-layout-container style="border-style: solid;"><h1>bottom</h1></div>
</div>
<!-- Le javascript -->
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script type="application/javascript" src="https://rawgithub.com/angular-ui/ui-layout/v1.0.5/ui-layout.min.js"></script>
<script>
angular.module('x', ['ui.layout']);
</script>
</body>
</html>
A further investigation shows it is caused by the absolute positioning of UI layout. If I add a sytle:
<div ui-layout style="position:relative; height:500px">.
UI layout will not overlap with navbar anymore.
However, another issue arises, if the screen size changes, I have to manually change the height property of style.
So I am wondering whether there is any easy way to handle this.
Thanks
Derek
maybe it's too late, but i have the same problem and this is my solution :
simply add a fake div with size and max-size with value of your navbar's height to your ui-layout and make your navbar fix on top !
<nav class="navbar navbar-default navbar-fixed-top">
<div ui-layout>
<div ui-layout-container size="40px" max-size="40px" style="border-style: solid;">
<h1>fake</h1></div>
<div ui-layout-container style="border-style: solid;">
<h1>top</h1></div>
<div ui-layout-container>
<div ui-layout="{flow : 'column'}">
<div ui-layout-container style="border-style: solid;">
<h1>left</h1></div>
<div ui-layout-container style="border-style: solid;">
<h1>right</h1></div>
</div>
</div>
<div ui-layout-container style="border-style: solid;">
<h1>bottom</h1></div>
this is your plunker updated
You may wrap your UI-Layout to container with styles to prevent overlap:
.wrap {
position: absolute;
top: 50px;
left:0;
bottom:0;
right:0;
}
http://plnkr.co/edit/nRW2qbiwadyO1ICdgbQq