I'm learning how to make web pages with AngularJS (in fact, I have the exam tomorrow), and I have a problem.
I used codeCademy as the learning course, but my exam allows external (printed) files to help you, so I made the exercises offline on my computer too.
The first chapter, (no directives, just setting up your app and using controllers) is no problem. The server from ajax googleapis for angularJS is working perfect. So three weeks ago, I finished the course (always using the server from ajax googleapis), and everything worked fluently.
Today, I'm just remaking the exercises, and when I'm making the first exercise from Directives, I'm getting a bunch of errors (these exercises worked perfectly 3 weeks ago). When I'm loading the old exercises I made 3 weeks ago, they don't work either.
So I'm not getting why these errors show up now, and not 3 weeks ago.
The code:
index.html
<!doctype html>
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Oxygen:300,400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
</head>
<body ng-app="BoltNetworkApp">
<div class="header">
<div class="container">
<img src="img/logo.svg" width="180" height="34">
</div>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<div class="content">
<div class="row">
<div class="col-md-3" class="series_img">
<img ng-src="{{ program.series_img }}">
</div>
<div class="col-md-6">
<h1 class="series">{{ program.series }}</h1>
<h2 class="episode">{{ program.episode }}</h2>
<p class="description">{{ program.description }}</p>
</div>
<div class="col-md-3">
<ul class="list-group">
<li class="list-group-item"><span>Date:</span>{{ program.datetime | date:'mediumDate' }}</li>
<li class="list-group-item"><span>On air:</span>{{ program.datetime | date:'EEEE' }}</li>
<li class="list-group-item"><span>Time:</span>{{ program.datetime | date:'shortTime' }}</li>
<li class="list-group-item"><span>Season:</span>{{ program.season }}</li>
<li class="list-group-item"><span>Genre:</span>{{ program.genre }}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-3">
<h3>Bolt</h3>
<ul>
<li>Careers</li>
<li>Terms</li>
<li>Help</li>
</ul>
</div>
<div class="col-md-3">
<h3>More Bolt</h3>
<ul>
<li>Gift Cards</li>
<li>Trailers</li>
</ul>
</div>
<div class="col-md-3">
<h3>News</h3>
<ul>
<li>Blog</li>
<li>Twitter</li>
<li>YouTube</li>
<li>Google+</li>
<li>Facebook</li>
</ul>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
I think there something changed with the ajax servers online, because this worked perfect 3 weeks ago.
Does anyone has a solution for this (please don't say local webserver, because it worked just fine with a server online, I wanna know how to fix this with the online server).
Thanks!
Nevermind, I fixed it. For some (dumb) reason I don't know, this doesn't work in Chrome. I loaded it in Firefox and it works perfectly.
Related
I'm new to Laravel and i'm not quite sure yet how everything works. I'm trying to break appart code into various sections by including the begining of the page, and then create a hero section followed by some html in that page.
Everything shows but the html code that is on the page is rendering on top of everything else.
This thread looked like it could be things not being closed but as i see it everything is working as it should
Including header in wrong place Laravel 4
#include('blocks/scripts')
#extends('blocks/hero')
#section('title')
text here
#stop
#section('subtitle')
another text
#stop
<div class="container">
<div class="row">
<div class="col-12">
more text
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
</div>
</div>
#include('blocks/footer')
This is the file. The HTML block is being rendered right after the "scripts", followed by "footer" and then it shows the "hero".
The order should be scripts->hero->html->footer
#include('blocks/scripts') just has html code
#extends('blocks/hero') has #yield('title') and #yield('subtitle')
#include('blocks/footer') just text
I changed the names of some templates because it is difficult to understand the code what you put in the comments. But I think it can help you to organize your code.
The template where you have the html, head and body tags, is not a template to be included, but to extend other templates from it, and make use of a yield. For example #yield ('main-content'):
blocks/main.blade.php:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
#yield('main-content')
</body>
</html>
blocks/hero.blade.php
This is a template that you could extends from the main one and adding content to the #yield('main-content') with #section('main-content'):
#extends('blocks/main')
#section('main-content')
<div class="container-fuid mx-0 wlgx_hero">
<div class="row">
<div class="col-12">
#include('blocks/header')
<section id="hero_text">
<h1 class="text-center text-white py-5">
#yield('title')
</h1>
<hr class="purple_line pb-3">
<section id="subtitle">
<p class="text-center">
#yield('subtitle')
</p>
</section>
</section>
</div>
</div>
</div>
#yield('hero-content')
#endsection('main-content')
The blade in your question (I don't know the name) can, in turn, extends from hero, and fill their yields:
#extends('blocks/hero')
#section('title')
text here
#stop
#section('subtitle')
another text
#stop
#section('hero-content')
<div class="container">
<div class="row">
<div class="col-12">
more text
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
</div>
</div>
#stop
The last one is the view that you have to return from a route or controller, so that everything works.
Hope it's help
In blade files, every direct HTML outside of #section('something') will be rendered at the top of the file.
You need to put #yield('something') in the extended file then wrap your HTML code with #section('something') and #endsection('something') like what you do with title and subtitle.
I am building a simple static website. I am using Spring Boot, Thymeleaf Layout Dailect and Bootstrap 4. In my layout.html I have a row in which I have a content and a sidebar. I have 2 photos in my sidebar, in all of views they appear on the right side. However when I try to embed an iframe with a google map or with a facebook page the sidebar gets pushed down. I tried a few different things like changing the size of iframe to minimum etc. but I am unable to keep my sidebar on the right side. Please can anyone suggest a solution?
Below is my layout.html:
<body>
<div class="container-fluid" th:replace="fragments/navigation :: navigation"></div>
<div class="container-fluid" id="mainContent">
<div class="row">
<div class="col-md-8">
<div layout:fragment="content"></div>
</div>
<div class="col-md-4">
<div th:replace="fragments/sidebar :: sidebar"></div>
</div>
</div>
</div>
<div class="container-fluid" th:replace="fragments/footer :: footer"></div>
Below is my sidebar.html:
<body>
<div th:fragment="sidebar">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">
<img src="/img/ai-ki-do.png" alt="Logo" style="width: 330px;"></img>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<img src="/img/ueshiba-laughter.jpg" alt="Logo"
style="width: 330px;" ></img>
</div>
</div>
</div>
</div>
</body>
Below is my content:
<body>
<div layout:fragment="content">
<p>Thank you for your interest in Seishinkan. Please get in touch via our Facebook page. We look forward to hearing from you.</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FSeishinkan-Aikido-Dojo-389984175129276%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" data-adapt-container-width="true"></iframe>
</div>
</body>
Normal sidebar's behaviour - a white picture 'Ai Ki Do' and a dark picture on the right side :
The sidebar pushed down after embedding the iframe:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="row">
<iframe src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
<div>
another one
</div>
</div>
For some reason when I remove the col classes from the divs and keep them in a row, the two pieces don't go below each other
Have you tried inspecting the element and editing your css classes in the browser while in developer mode?
I had the same problem before and all I did was mess around with the code in the console until it eventually moved the way I wanted it to.
Placing a new row and column within:
<div layout:fragment="content"></div>
worked for me.
<div layout:fragment="content">
<div class="row">
<div id="dojo-page" class="col-md-12">
<div id="fb-frame" class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="600" height="450"
frameborder="0" style="border: 0"
src="path-for-google-map-location"
allowfullscreen></iframe>
</div>
</div>
</div>
I'm doing Spring project use Spring Boot, Spring MVC, Spring Data. Now I have a problem maybe with thymeleaf
This is my index page
Logo Bonfire and room picture is image and save in folder src/main/resource/static/images in eclipse .
When I use Search function, it will display Search page like this picture
I don't know why it's not display logo image and room image although I use one template for my index page and search page... And it's still happened with detail page too, images is not displayed. Only index page displayed images
I think the problem is not by code... I don't know why
This is my room.html (index page and search page)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="Header :: head">
</head>
<body>
<div th:replace="Header :: header" class="header"></div>
<div class="container">
<div class="products">
<h2 class=" products-in">AVAILABLE ROOM</h2>
<div class=" top-products">
<span th:each="room,iterStat : ${room}">
<div class="col-md-3 md-col">
<div class="col-md">
<a th:href="#{/room/{id}/detail(id=${room.id})}" class="compare-in"><img th:src="#{'images/'+${room.image}}" alt="" />
</a>
<div class="top-content">
<h5><a th:href="#{/room/{id}/detail(id=${room.id})}"><tr th:text="${room.name}"></a></h5>
<div class="white">
<a th:href="#{/room/{id}/book(id=${room.id})}" class="hvr-shutter-in-vertical hvr-shutter-in-vertical2">BOOK</a>
<p class="dollar"><span class="in-dollar">$</span><span>2</span><span>0</span></p>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</span>
<div class="clearfix"></div>
</div>
</div>
</div>
<div th:replace="Header :: footer" class="footer"></div>
</body>
</html>
Pleased help me
Use this approach to set the image :--
<div th:style="'background-image:url('+ ${room.image}+');'"></div>
Use something like this.
<img th:src="${'images/'+ room.image}" />
I'm working in Laravel 5.5 which is bundled with Bootstrap and I have my main JS file running appropriately (i.e. laravel mix compiling with all the all the js files loaded with it appropriately). However, bootstrap 3.3.7's carousel is not working at all. The transitions (slide actions) don't work and the buttons dont work at all. here's my code below
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
require('./animations');
window.Vue = require('vue');
// *
// * Next, we will create a fresh Vue application instance and attach it to
// * the page. Then, you may begin adding components to this application
// * or customize the JavaScript scaffolding to fit your unique needs.
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '.content'
});
<script type="text/javascript" src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>
<!-- Styles -->
<link href="{{ asset('css/main.css') }}" rel="stylesheet"> . .. ...
<div class="container-fluid content">
<div class="carousel slide" id="features">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#features" data-slide-to="0" class="active"></li>
<li data-target="#features" data-slide-to="1"></li>
<li data-target="#features" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="/images/niceview.jpg">
<div class="carousel-caption">
<h4 class="carousel-header">Lorem Ipsum</h4>
<p class="carousel-text">Some Lorem ipsum.</p>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="item">
<img src="/images/rear.jpg">
<div class="carousel-caption">
<h4 class="carousel-header">Dreams</h4>
<p class="carousel-text">Lorem ipsum</p>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="item">
<img src="/images/view.jpg">
<div class="carousel-caption">
<h4 class="carousel-header">Dreams</h4>
<p class="carousel-text">Lorem ipsum</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#features" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#features" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
That's my js file which compiles successfully by mix and my html file. And right now I don't get any errors in the console so I have no clue as to what is wrong.
Please help :(
Bootstrap carousal in the blade file.
add this to your filename.blade.php
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="{{ asset('public/images/1.jpg')}}" alt="" style="width:100%;">
</div>
<div class="item">
<img src="{{ asset('public/images/2.jpg')}}" alt="" style="width:100%;">
</div>
<div class="item">
<img src="{{ asset('public/images/3.jpg')}}" alt="" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
add this css file like this
<link href="{{ asset('public/css/bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
and add js like this
<script type="text/javascript" src="{{ asset('public/js/jQuery-2.1.4.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('public/js/bootstrap.min.js') }}"></script>
using this following step carousal is work.
i hope this will help you to solve your problem
I've been messing around with my website for a while now and can't seem to get the dropdown on my navigation to actually drop down. I've read a few questions regarding this and couldn't find something that was this specific.
I have my .js file installed and everything is linked up (as far as I know)
<script src="/js/bootstrap.js" type="text/javascript"></script>
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<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>
<a class="brand" href="bootstrapindex.html">Student Food</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
**<li>About</li>
<li class="dropdown">
Recipes<b class="caret"></b>
<ul class="dropdown-menu">
<li>Featured</li>
<li>Latest</li>
<li>Something else here</li>**
</ul>
</li>
</ul>
Can't seem to see why this won't work. If anyone could help that would be amazing.
You're including the Bootstrap JavaScript twice.
Remove one of the following lines:
<script src="/js/bootstrap.js" type="text/javascript"></script>
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
bootstrap.min.js is just a minified version of bootstrap.js; it's the same code.
Try to remove wrapping div <div class="nav-collapse collapse">. I think, dropdown could be hidden by overflow (it was hidden, when I copy-pasted your code snippet).