I have one button which should be remain contant or fixed in same position in all views .But when I added a view , its header comes down below the button
why ?
when I remove this <button>Add</button> it come in correct position (in middile of page).
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17" data-require="angular.js#1.2.17"></script>
<script src="http://code.angularjs.org/1.2.17/angular-route.js" data-semver="1.2.17" data-require="angular-route#1.2.17"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/foundation/5.0.0/css/foundation.min.css" />
<script src="script.js"></script>
<script src="logincontroller.js"></script>
</head>
<body>
<button>Add</button>
<div id="main">
<div ng-view></div>
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
</body>
</html>
Plunker
http://plnkr.co/edit/j4i7omuhNyEIzAaYgmhv?p=preview
Its because of <h1> and <div> when defined will be displayed as two rows unless otherwise you have overridden by using some css
Take a look at this
Working Demo
<div class="container">
<div class="div1">
<button>Add</button>
</div>
<div class="div2">
<div id="main">
<div ng-view></div>
</div>
</div>
</div>
Both h1- and button-elements have the css-property display block. Therefore they will be placed beneath each other. http://www.w3schools.com/cssref/pr_class_display.asp
Related
Here's My code!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="myHeader">
<a style="float:left" href="index.html">Index</a>
Page1
Page2
</div>
<h1>Index</h1>
</body>
</html>
I am building my web application with the same navigation bar on the top of it for every web page. Now if you click on page1 in the nav bar on my example, you will see on the Page.html two buttons with add Prev and add Ext.
If you click on add Prev a page will append itself in the nav bar before page1.
If you click on add Ext a page will append itself in the nav bar after page1.
How can I save the appended Element for example page1-ext/page-prev to localStorage, so that when I navigate to page 2 or refresh the page it stays seen or appended!
I am thankful for every tip or solution! Cheers!
Use window.localStorage.setItem to set item in localStorage. Also, I moved <script src="script.js"></script> at the end of body because otherwise I get strange behaviors.
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="myHeader">
Index
<a id="t1" href="page1.html">Page1</a>
<a id="t2" href="page2.html">Page2</a>
</div>
<h1>Index</h1>
<script src="script.js"></script>
</body>
</html>
page1.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="myHeader">
Menu
<a id="t1" href="page1.html">Page1</a>
<a id="t2" href="page2.html">Page2</a>
</div>
<h1>Page1</h1>
<button id="addPrev"> Add Prev </button>
<button id="addExt"> Add Ext </button>
<script src="script.js"></script>
</body>
</html>
page2.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="myHeader">
Menu
<a id="t1" href="page1.html">Page1</a>
<a id="t2" href="page2.html">Page2</a>
</div>
<h1>Page2</h1>
<script src="script.js"></script>
</body>
</html>
script.js: moved all events in here (in one place). On button click, add content and also set localStorage item. When this file is loaded, checks if localStorage item is set (in this case, == 1). If so, then automatically display menu item:
$("#addPrev").on("click", function() {
$('#1').after('Page1-Ext');
window.localStorage.setItem('previous', 1);
});
$("#addExt").on("click", function() {
$('#1').after('Page1-Ext');
window.localStorage.setItem('next', 1);
});
if (window.localStorage.getItem('previous') == 1) {
$('#t1').before('Page1-Prev');
}
if (window.localStorage.getItem('next') == 1) {
$('#t1').before('Page1-Prev');
}
However, one (negative) thing to note, you'll have to write <a id="t1" href="page1.html">Page1</a> and <a id="t2" href="page2.html">Page2</a> in every page to show these menu links, otherwise, you won't see them.
i'm trying in my app to include a template (already shown) that include other template.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tasks Overview</title>
<!-- Angular framework -->
<script src="assets/js/angular.min.js"></script>
<!-- Main module -->
<script src="app.js"></script>
<!-- Components -->
<!-- Services -->
<script src="app/components/logger/logger-service.js"></script>
<script src="app/components/resource/resource-service.js"></script>
<script src="app/components/integrity_check/integrity_check-service.js"></script>
<script src="app/components/date_utilities/month_translation_utility-service.js"></script>
<!-- History -->
<script src="app/components/history/history-controller.js"></script>
<!-- Period -->
<script src="app/components/period/period-controller.js"></script>
<script src="app/components/period/directives/year_picker/year_picker-directive.js"></script>
<script src="app/components/period/directives/month_picker/month_picker-directive.js"></script>
<!-- Shell -->
<script src="app/components/shell/shell-controller.js"></script>
<!-- Calendar -->
<script src="app/components/calendar/directives/day/day-directive.js"></script>
<script src="app/components/calendar/calendar-controller.js"></script>
<!-- UI libraries -->
<link rel="stylesheet" type="text/css" href="assets/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/system.css">
<script src="assets/js/jquery-3.1.0.min.js"></script>
<script src="assets/js/materialize.min.js"></script>
<!-- Task entities -->
<script src="app/components/task/task-controller.js"></script>
<script src="app/components/task/tasks-service.js"></script>
<!-- Main -->
<script src="app/components/main/main-controller.js"></script>
<!-- Google material icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- External libraries -->
<script src="assets/js/FileSystem.js"></script>
</head>
<body ng-app="wtd">
<!--History component-->
<div id="history" ng-include="'app/components/history/history_main-view.html'" ng-controller="historyController as vm"></div>
<!--Period component-->
<div id="period" ng-include="'app/components/period/period_main-view.html'" ng-controller="periodController as vm"></div>
<!--Calendar component-->
<div id="calendar" ng-include="'app/components/calendar/calendar_main-view.html'" ng-controller="calendarController as vm"></div>
<!--Shell component-->
<div id="shell" ng-include="'app/components/shell/shell_main-view.html'" ng-controller="shellController as vm"></div>
<!--Main controller-->
<div id="main" ng-controller="mainController"></div>
</body>
</html>
calendar_main-view.html
<div class="col l10 offset-l1 m10 offset-m1 s10 offset-s1">
<!-- List view mode -->
<div ng-if="view.mode.list" ng-include="app/components/calendar/calendar_list-view.html">
</div>
<!-- Grid view mode -->
<div ng-if="view.mode.grid" ng-include="app/components/calendar/calendar_grid-view.html"></div>
</div>
Problem appear on the second level of ng-include (file calendar_grid-view.html). No one xhr call is done by browser to include the file.
What's wrong?
You are missing single quote.
<div ng-if="view.mode.list" ng-include="'app/components/calendar/calendar_list-view.html'">
<div ng-if="view.mode.grid" ng-include="'app/components/calendar/calendar_grid-view.html'"></div>
Make sure view.mode.list and view.mode.grid evaluted to truthy in order to display html.
I've tried many times to run this code but every time it appears incorrectly I want angular to make its affect like this demo:
http://wowslider.com/angular-slider-collage-demo.html.
Please help, I've tried too many times without the intended result.
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Http://wowslider.net/</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Made with WOW Slider - Create beautiful, responsive image sliders in a few clicks. Awesome skins and animations. Http://wowslider.net/" />
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body style="background-color:#d7d7d7;margin:0" >
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container1" >
<div class="ws_images" ng-controller="HelloController">
<ul>
<li ng-repeat="img in allimages"><img ng-src="data1/images/{{img.name}}" alt="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132" title="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132" id="wows1_0"/></li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a ng-repeat="img in allimages" href="#" title="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132"><span><img ng-src="data1/tooltips/{{img.name}}" alt="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132"/>1</span></a>
</div>
</div>
<div class="ws_script" style="position:absolute;left:-99%">http://wowslider.net/ by WOWSlider.com v8.7</div>
<div class="ws_shadow"></div>
</div>
<!-- End WOWSlider.com BODY section -->
<script type="text/javascript" src="engine1/angular.js"></script>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.allimages = [{name:'2016chevroletcruzespiedcompletelyuncoverednewscaranddriverphoto658949s217x132.jpg'},{name:'2016chrysler300srtspieditsalivenewscaranddriverphoto658864s217x132.jpg'}];
});
</script>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
</body>
</html>
I'm using Zurb's Foundation, attempting to build a FAQ page using the accordion js. But it's not working and I have no idea why. All the js files are in the js folder. Here's my whole page:
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row row-padding">
<div class="small-12 columns">
<h1>FAQ:<h1>
</div>
</div>
<div class="row row-padding small-12">
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
Question
<div id="panel13a" class="content">
Answer
</div>
</li>
</ul>
</div>
<script>
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>
</body>
</html>
I'm brand new to HTML websites, so sorry if it's something stupid.
You are targeting your accordion with an id that doesn't exist in your HTML.
You'll need to add the id to your HTML like this:
<div class="row row-padding small-12">
<ul id="myAccordionGroup" class="accordion" data-accordion>
<li class="accordion-navigation">
Question
<div id="panel13a" class="content">
Answer
</div>
</li>
</ul>
</div>
Also change the order of your scripts so that your custom accordion loads after everything else.
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>
<script>
$(document).foundation();
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
Here is a working CodePen: http://codepen.io/anon/pen/jPmRyB
You forgot about $(document).foundation();
http://foundation.zurb.com/docs/javascript.html - Initialize Foundation
I am making a website, I want to change the content of the page on clicking certain sections. I have CSS, HTML, JS is seperate files. I am a noob. Using jquery I am getting an alert when I give the tag("*")to select all elements, but for the life of me I am not able to select a specific div. all divs are unique but I really don't why the query cannot select the particular divs.
$('*').click(function()
{ alert("The paragraph was clicked.");
});
----> working
but this is not
$('#topbar').click(function(){
alert("The paragraph was clicked.");
});
here is the entire code:
<!doctype html>
<html>
<head>
<title>dear C</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="bbc.css">
</head>
<link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="jquery-2.1.3.min.js">
</script>
<script type="text/javascript" src="resume.js">
</script>
<body>
<div id="container">
<div id="topbar">
<div id="logo">
</div>
<div id="contact">
<div id="facebook">
</div>
<div id="mail">
</div>
<div id="blog">
</div>
</div>
<div id="name"> Dip Ranjan Chatterjee</div>
</div>
<div id="bottom">
<div id="sidebar">
<div id="about">About</div>
<div id="border"></div>
<div id="edu">Education</div>
<div id="border2"></div>
<div id="prof">Professional Exp.</div>
<div id="border3"></div>
<div id="portfolio">Portfolio</div>
</div>
<div id="contents"><p>
<p>Feel free to drop me a mail or message, if you need to get in touch with me.</p>
</div>
</div>
</body>
Also note i have CSS html and JS all in seperate files. In the JS file i am putting the jquery.
Make sure that you dont have multiple divs with the same id(#topbar in that case), and you are adding the listener after the document is loaded.
$(document).ready(function(){
$('#topbar').click(function(){
alert("The paragraph was clicked.");
});
});
Show all your HTML code
The identifier id="topbar" exist?
id="topbar" is unique in the HTML?
You are declaring the script after loading the HTML?
<div id="topbar">Go</div>
<div id="topbar2">Go2</div>
<script type="text/javascript">
$('#topbar').click(function(){
alert("The paragraph was clicked.");
});
</script>
<!-- works -->