So I am trying to autoload images on a page via JS. I want the page to essentially be a blank page that can act as many pages.
Structure:
Homepage with projects > Click on project > Project page
However, I cannot figure out how to get the images to load into my bootstrap columns as .img-responsive images.
I will attach snippets to both pages and JS.
NOTE: Images are currently all the same, plan to change later...
Thanks!
HOMEPAGE -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Philesq</title>
<!-- external CSS link -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:100,100italic,300,300italic,500,500italic,700,700italic, 800">
</head>
<body>
<nav 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="#main-navbar" aria-expanded="false">
<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="./index.html">Philesq</a>
</div>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="nav navbar-nav navbar-right">
<li name="works">works</li>
<li name="about">about</li>
<li>contact</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
<a href="./projects.html?page=praxis">
<img src="./images/praxis.png" class="img-responsive">
<h6>praxis studio</h6>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
<a href="./projects.html?page=#woodbury">
<img src="./images/woodbury.jpg" class="img-responsive">
<h6>woodbury school or architecture</h6>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
<a href="./projects.html?page=#mmr">
<img src="./images/mmr.gif" class="img-responsive">
<h6>miracle manor retreat</h6>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
<a href="./projects.html?page=#felix">
<img src="./images/felix.gif" class="img-responsive">
<h6>félix beltrán</h6>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
<a href="./projects.html?page=#wtmf">
<img src="./images/wtmf.png" class="img-responsive">
<h6>within the magnetic field</h6>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 column text-center">
<a href="./projects.html?page=#cargo">
<img src="./images/cargo.gif" class="img-responsive">
<h6>cargo typeface</h6>
</a>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>
Project Page-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Philesq</title>
<!-- external CSS link -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:100,100italic,300,300italic,500,500italic,700,700italic, 800">
</head>
<body>
<nav 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="#main-navbar" aria-expanded="false">
<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="./index.html">Philesq</a>
</div>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="nav navbar-nav navbar-right">
<li name="works">works</li>
<li name="about">about</li>
<li>contact</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 column text-center">
<div id="imageContainer" class="img-responsive">
</div>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>
Java Script
$(function(){
var projects = ['praxis','woodbury','mmr','felix','wtmf','cargo'];
var pages = {
'praxis': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
'woodbury': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
'mmr': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
'felix': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
'wtmf': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
'cargo': ['images/woodbury.jpg','images/woodbury2.jpg','images/woodbury3.jpg','images/woodbury4.jpg'],
}
var page = window.location.hash.substring(1);
page = (page) ? page:'praxis';
console.log(page);
for(var i = 0; i < pages[page].length; i++)
{
var imagePath = pages[page][i];
console.log(imagePath);
$('#imageContainer').append('<img src="./' + imagePath + '">');
}
});
Just create them with img-responsive class:
$('#imageContainer').append('<img src="./' + imagePath + '" class="img-responsive">');
img-responsive is a class defined in Bootstrap. If you want the appended images to be img-responsive, you just need to include this class in the class list while appending.
Just change
$('#imageContainer').append('<img src="./' + imagePath + '">');
To
$('#imageContainer').append('<img src="./' + imagePath + '" class="img-responsive">');
You can also do this with vanilla JS, in case you didn't want to bother with jQuery.
var element = document.createElement('img');
element.className = "img-responsive";
// Or
element.classList.add("img-responsive");
var container = document.getElementById('yourContainer');
container.appendChild(element);
Related
I'm not able to get my jquery code to work with my Bootstrap 4. div.
My goal is to have two divs (fluid bootstrap containers) in the banner section, however one showing upon loading the page for about 5sec. and then gradually fading out while the next div gradually fades in.
I'd appreciate your help and if possible an explanation why my second block of code won't work.
PS: I know that the 2nd code block does not represent my goal, but it should also work and does not.
This works:
setTimeout(
function() {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').show();
},
4000
);
But this doesn't work:
setTimeout(function(){
$("#div-a").fadeOut("slow", function () {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').show();
});
}, 2000);
In my CSS file I have the following:
#div-b {
display: none;
}
In my HTML file I have the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>TEXATREK</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-expand-lg navbar-light bg-light" id="navi">
<a class="navbar-brand" href="">
<img class="brand-logo" src="images/logos/Trexatek_Logo_AND_Name_Gold-Orange.png" alt="">
</a>
<!--HAMBURGER Toggler Icon-->
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu" >
<span class="navbar-toggler-icon"></span>
</button>
<!-- NAVBAR -> div BELLOW -->
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ml-auto mr-5 ">
<li class="nav-item mr-5"><a class="nav-link" href="">Users</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="">Products</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="">Items</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="">Pigis</a></li>
<li class="nav-item mr-5"><a class="nav-link" href="">Rolls</a></li>
</ul>
</div>
</nav>
<!-- SECTION 1 -->
<!--WELLCOME PAGE SECTION-->
<div id="div-a" class=" mt-2 px-0 pt-05 container-fluid">
<div class="row">
<div class="hex-container mx-0 px-0 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<img class="hex-banner img-fluid" src="images/Banner/Hexagon-Banner/Hexagon_Photo_Grid_with_logo_in_middle 1915x615.png" alt="">
</div>
</div>
</div>
<!--REPLACEMENT AFTER 5 SECONDS -- START-->
<div id="div-b" class=" mt-2 px-0 pt-05 container-fluid">
<div class="row">
<div class="hex-container mx-0 px-0 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h1>SIGN UP NOW BITCHES</h1>
</div>
</div>
</div>
<!--REPLACEMENT AFTER 5 SECONDS -- END-->
<!-- SECTION 2 -->
<!--INFORMATION ABOUT TEXATREK 1. US 2.OUR STRENGTH 3. WHY TEXATREK-->
<div class="container-fluid pt-5">
<div class="row">
<div class="mx-0 px-0 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<!--WHAT WE DO info section-->
<div class="texatrek-info what-we-do">
<h2>WHAT WE DO</h2>
<h3>Our company specializes in sourcing precision components that are manufactured in India by our network of carefully selected, high quality suppliers, all of which are ISO 9001 certified. Our goal is to ensure reliable supplies at competitive costs and with zero defects.</h3>
</div>
<!--OUR STRENGTHS info section-->
<div class="texatrek-info our-strengths">
<h2>OUR STRENGTH IS YOUR ADVANTAGE</h2>
<h3> We manage and expand our carefully selected Indian supplier base to meet the ever-growing demand of our customers. By offering a broad selection of manufacturing technologies we are able to support you to meet the challenges you are facing in terms of design and supply chain, that is optimized for manufacturing and thus resulting in reduced unit cost. </h3>
</div>
<!--BACKGROUND IMAGE HEXAGONS-->
<div class="product-background">
<img class="img-fluid product-background-img" src="images/Background/Background-info_cropped.png" alt="">
</div>-
</div>
</div>
</div>
<!-- SECTION 3 -->
<!--PRODUCTS AND SERVICES SECTION-->
<div class="container-fluid pt-5">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
<img id="products-services" class="img-fluid"src="images\Info_Graphics\Products and Services.png" alt="">
</div>
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="solutions-container">
<!--THE BLACK IN THE BLUE BLOCK (div)-->
<div class="solutions-inside">
<h3 class="solutions text-left">SOLUTIONS SOLUTIONS SOLUTIONS THAT FIT</h3>
<h5 class="solutions-para text-left">paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</h5>
</div>
</div>
</div>
</div>
</div>
<!-- SECTION 4 -->
<div class="container-fluid pt-5">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
</div>
<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="TrexatekNavbar_V3_Bootstrap.css">
<script>
$('#div-a').fadeOut('slow').promise().done(function() {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').fadeIn('slow');
});
/*
setTimeout(function(){
$("#div-a").fadeOut("slow", function () {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').show();
});
}, 2000);
setTimeout(
function() {
$('#div-a').replaceWith($('#div-b'));
$('#div-b').show();
},
4000
);
*/
</script>
</body>
</html>
When i click on a element(MMA)in my left navigation bar i want it show up on the page and when i click on a other element(boxing) in my navigation i want that to be shown instead, like tabs.
I have tried but cannot get it to work, heres my code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Startsida</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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="jquery.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<!-- header -->
<div class="jumbotron">
<h1>Top five facts about different martial arts</h1>
</div>
<!-- Top navigation -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
</div>
<ul class="nav navbar-nav">
<li >Start</li>
<li class="active">Martial arts</li>
</ul>
</div>
</nav>
<!-- side navigation -->
<div class="row" id="row">
<div class="col-sm-3" "col-lg-2" id="menu" >
<div class="sidebar-nav" "list-group">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1 class="head">Martial arts:</h1>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<h3 class="side">Martial arts:</h3>
<ul class="nav navbar-nav" id="ul">
MMA
Boxing
Muay thai
Kickboxing
Takwando
Karate
Braziliansk jijutsu
Wrestling
</ul>
</div>
</div>
</div>
</div>
<!-- Main content -->
<div class=" col-sm-9 menu-tab">
<div class="menu-tab-content ">
<h1>Top 5 fact about MMA</h1>
</div>
<div class="menu-tab-content active">
<h1>Top 5 fact about Boxing</h1>
</div>
</div>
</body>
</html>
jquery:
$(document).ready(function() {
$("div#menu>div.sidebar-nav>a").click(function(e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
var index = $(this).index();
$("div.menu-tab>div.menu-tab-content").removeClass("active");
$("div.menu-tab>div.menu-tab-content").eq(index).addClass("active");
});
});
Your selector is wrong. div#menu>div.sidebar-nav>a looks for an a that's an immediate child of div.sidebar-nav. But in your HTML, the a is nested several levels below that, so it should be div#menu>div.sidebar-nav a
$(document).ready(function() {
$("div#menu>div.sidebar-nav a").click(function(e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
var index = $(this).index();
$("div.menu-tab>div.menu-tab-content").removeClass("active");
$("div.menu-tab>div.menu-tab-content").eq(index).addClass("active");
});
});
.active {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
v
<!-- header -->
<div class="jumbotron">
<h1>Top five facts about different martial arts</h1>
</div>
<!-- Top navigation -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
</div>
<ul class="nav navbar-nav">
<li>Start</li>
<li class="active">Martial arts</li>
</ul>
</div>
</nav>
<!-- side navigation -->
<div class="row" id="row">
<div class="col-sm-3" "col-lg-2" id="menu">
<div class="sidebar-nav" "list-group">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1 class="head">Martial arts:</h1>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<h3 class="side">Martial arts:</h3>
<ul class="nav navbar-nav" id="ul">
MMA
Boxing
Muay thai
Kickboxing
Takwando
Karate
Braziliansk jijutsu
Wrestling
</ul>
</div>
</div>
</div>
</div>
<!-- Main content -->
<div class=" col-sm-9 menu-tab">
<div class="menu-tab-content ">
<h1>Top 5 fact about MMA</h1>
</div>
<div class="menu-tab-content active">
<h1>Top 5 fact about Boxing</h1>
</div>
</div>
I'm trying to use AngularJS mainly for seamless routing of an already functioning webpage. The idea is simple: / stands for the root (index.html), /detail stands for a detailed view (detail_zerohouse.html). However, even with the app and both controllers defined, all I can get is a weirdly layed out index.html and I can't even get to the detail view, all I get is an 404 Not Found. Here's my code:
----------------- main.js ----------------------------
var architectApp = angular.module("architectApp");
architectApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'index.html',
controller: 'indexCtrl'
}).
when('/detail', {
templateUrl: 'detail_zerohouse.html',
controller: 'detailCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
-------------- indexCtrl.js ----------------------------
architectApp.controller('indexCtrl', function($scope){
});
-------------- detailCtrl.js --------------------------
architectApp.controller('detailCtrl', function($scope){
});
-------------------------- root.html ---------------------
<!DOCTYPE html>
<html lang="en" ng-app="architectApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>AngularJS Root</title>
<!-- AngularJS-->
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="js/main.js"></script>
<script src="js/indexCtrl.js"></script>
<script src="js/detailCtrl.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Google Roboto Font-->
<link href='https://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>
<!-- Main user stylesheet-->
<link rel="stylesheet" href="css/style.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<!-- Media helper Fancybox-->
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<!-- Thumbs helper Fancybox-->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- SmoothScroll JS-->
<script src="js/smooth-scroll.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// initialize SmoothScroll
smoothScroll.init();
// set Fancybox properties
$(".fancybox").fancybox({
// fitToView : false, opens the image already in fullscreen
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
closeClick : true,
hideOnOverlayClick : true,
helpers : {
title : { type : 'inside' },
buttons : {}
}
});
});
</script>
</head>
<body class="container-fluid" ng-view>
</body>
</html>
------------------------ index.html ------------------------
<nav class="nav navbar-default" id="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Peter Danko</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
architektúra <span class="caret"></span>
<ul class="dropdown-menu">
<li>budova</li>
<li>budova</li>
<li>budova</li>
<li>budova</li>
<li>budova</li>
</ul>
</li>
<li>interiér</li>
<li>o mne</li>
</ul>
</div>
</div>
</nav> <!-- end nav -->
<!--<div id="mainWrap" class="container-fluid">-->
<div class="row tileRow" id="firstRow" style="margin-top: 5px;">
<a href="detail.html">
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
</a>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
</div> <!-- row end -->
<div class="row tileRow">
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
</div> <!-- row end -->
----------------------- detail.html ------------------------------
<nav class="nav navbar-default navbar-top-offset" id="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Peter Danko</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
architektúra <span class="caret"></span>
<ul class="dropdown-menu">
<li>budova</li>
<li>budova</li>
<li>budova</li>
<li>budova</li>
<li>budova</li>
</ul>
</li>
<li>interiér</li>
<li>o mne</li>
</ul>
</div>
</div>
</nav> <!-- end nav -->
<!--<div id="mainWrap" class="container-fluid">-->
<div class="row tileRow" id="firstRow" style="margin-top: 5px;">
<a href="index.html#navigation">
<div class="col-md-2 tile logoTile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
</a>
<div class="col-md-6 doubleTile">
<img src="img/zerohouse/7thumb.png" class="img-responsive" id="">
</div>
<div class="col-md-2 tile">
<img src="img/zerohouse/8text.png" class="img-responsive" id="">
</div>
<div class="col-md-2 tile">
<img src="img/zerohouse/8plan.png" class="img-responsive" id="">
</div>
</div> <!-- row end -->
<div class="row tileRow">
<div class="col-md-2 tile">
<img src="img/zerohouse/11thumb.png" class="img-responsive" id="">
</div>
<div class="col-md-2 tile">
<img src="img/zerohouse/12thumb.png" class="img-responsive" id="">
</div>
<div class="col-md-2 tile">
<img src="img/zerohouse/10thumb.png" class="img-responsive" id="">
</div>
<div class="col-md-6 doubleTile">
<img src="img/zerohouse/9thumb.png" class="img-responsive" id="">
</div>
</div> <!-- row end -->
Thanks for any help, I've tried everything I could think of but got nowhere.
/
-/css
-/fancybox
-/helpers
-/img
-/js
-detailCtrl.js
-indexCtrl.js
-main.js
-detail_zerohouse.html
-index.html
-root.html
All .html files are directly in the root folder
I think that you forgot the ngRoute dependency:
var architectApp = angular.module("architectApp",['ngRoute']);
Also to go to detail you should use
<a href="#/detail">
instead of
<a href="detail.html">
Also what you need to rename your file: root.html should be renamed index.html and index.html to root.html.
You need to have the index.html as your landing main page.
got it working, the links now work like '/#/detail'. Can somebody help where to link the fancybox.js? It does not work now. Missing [ ] braces
I am building a static web site with bootstrap. Working on local the layout looks fine, when deployed to the web, Safari OK, but Chrome and Firefox seem like if they dont support several bootstrap CSS rules or I am doing something wrong.
Safari OK
Chrome KO
Live code: (make sure to accept the certificate)
https://canales.paperplane.io/
Code (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canales Auty</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<!-- #Header -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10"><img src="img/header.png"></div>
<div class="col-md-1"></div>
</div>
<!--Navbar-->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="navbar navbar-default">
<div class="container">
<div class= "navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>ABOUT THE FIRM</li>
<li>PROFESSIONALS</li>
<li>PRACTICE AREAS</li>
<li>NEWS ROOM</li>
<li>CAREERS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
<!--Mosiaco -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-4">
<img id="d1" src="img/mosaico_1.png">
<div class="contenthover container">
<h3>Lut</h3>
<p>Hola soy Lut!</p>
<p>Lorem ipsum</p>
</div>
</div>
<div class="col-md-3">
<img id="d2" src="img/mosaico_2.png">
<div class="contenthover container">
<h3>Lut</h3>
<p>Hola soy 2!</p>
<p>Lorem ipsum</p>
</div>
<img src="img/mosaico_3.png">
</div>
<div class="col-md-3"><img src="img/mosaico_4.png"><img src="img/mosaico_5.png"><img src="img/mosaico_6.png"></div>
<div class="col-md-1"></div>
</div>
<div class="row">
<div class="col-md-12 footer">
<p>hola</p>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/contentHover.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$('#myTootTip').tooltip();
$('#myPopOver').popover();
$('#d1').contenthover({
overlay_background:'#000',
overlay_opacity:0.8
});
$('#d2').contenthover({
overlay_background:'#000',
overlay_opacity:0.8
});
});
</script>
</body>
</html>
Chrome won't load non-SSL scripts over a webpage open with https://.
The best way to reference your external scripts is to not specify the protocol.
As in:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
...
<script src="//code.jquery.com/jquery.js"></script>
with //
Because your jQuery etc. is not loading, the site is breaking. Note: you will need to verify that your CDN will serve the files over https.
I finally started playing around with twitter bootstrap a little but. Im trying to center some text in the middle of the page, however the Navbar is covering part of it. Can somebody help? Im still new to bootstrap and web design in general.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<style type="text/css">
.container{
width: 700px ;
margin-left: auto ;
margin-right: auto ;
vertical-align:text-bottom;
}
.starter-template{
}
</style>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Me</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
When using .navbar-fixed-top, you have to add padding to the top of the body.
body {
padding-top: 50px;
}
One solution is just to center the text.
text-align:center
Another solution is to center the block.
<!--Stack the columns on mobile by making one full-width and the other half-width-->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop-->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>