I wanted to perform show and hide on my button click. I have the following code. I want to show or apply my css style(color:red) on my "maindiv" content on clicking of button "Click".
Again, if I click that Click button then it should hide or display it's normal content like earlier(i.e without any css style of red), like this it should come.
Getting error: TypeError: Cannot read property 'classList' of null
Fiddle.
html:
<div ng-app="app">
<div ng-controller="MainController">
<div id="maindiv">
<p>Test Content</p>
</div>
<div id="mainContainer">
<div id="testId">
<button type="button" ng-click="testExpand()">Click</button>
</div>
</div>
</div>
</div>
js:
angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
$scope.testExpand = function(){
alert("testExpand is called to show");
document.querySelector("maindiv").classList.add("maindivColor");
}
}]);
Try angularjs way.
angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
$scope.testExpand = function(){
//alert("testExpand is called to show");
$scope.applyCss = !$scope.applyCss;
}
}]);
.maindivColor {
color:red;
}
.mainContainer {
border-right: 1px solid #333;
}
#testId {
// background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainController">
<div ng-class="{'maindivColor':applyCss}"><p>Normal Content</p></div>
<div ng-show="applyCss" ng-class="{'maindivColor':applyCss}">
<p>
Test Content
</p>
</div>
<div>
<button type="button" ng-click="testExpand()">Click</button>
</div>
</div>
</div>
Try this
<!DOCTYPE html>
<html>
<head>
<script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('surveyController', function($scope){
$scope.backgroundColor = 'yellow';
$scope.changeStyle = function(){
if ($scope.backgroundColor == 'red') {
$scope.backgroundColor = 'yellow';
}else{
$scope.backgroundColor = 'red';
}
}
});
</script>
</head>
<body ng-controller="surveyController" ng-app="myApp">
<div id="maindiv" ng-style="{background: backgroundColor}">
<p>Test Content</p>
</div>
<div id="mainContainer">
</div>
<button ng-click="changeStyle()">Change Style</button>
</body>
</html>
Just add #
document.querySelector("#maindiv").classList.toggle("maindivColor");
And use toggle instead of add
You should use angular way to dynamically add CSS class, It can be achieved using ngClass directive
The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.
<div id="maindiv" ng-class="{'maindivColor' : hideMainDiv }">
Controller
$scope.testExpand = function(){
alert("testExpand is called to show");
$scope.hideMainDiv = !$scope.hideMainDiv;
}
angular.module('app', []).
controller('MainController', ['$scope', function($scope) {
$scope.testExpand = function() {
console.log("testExpand is called to hide");
$scope.hideMainDiv = !$scope.hideMainDiv;
}
}]);
.maindivColor {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainController">
<div id="maindiv" ng-class="{'maindivColor' : hideMainDiv }">
<p>Test Content</p>
</div>
<div id="mainContainer">
<div id="testId">
<button type="button" ng-click="testExpand()">Click</button>
</div>
</div>
</div>
</div>
angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
$scope.testExpand = function(){
alert("testExpand is called to show");
var myEl = angular.element( document.querySelector( '#maindiv' ) );
if(myEl.hasClass('maindivColor')){
myEl.removeClass('maindivColor');
}else{
myEl.addClass('maindivColor');
}
}
}]);
.maindivColor {
color:red;
}
.mainContainer {
border-right: 1px solid #333;
}
#testId {
// background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainController">
<div id="maindiv">
<p>
Test Content
</p>
</div>
<div id="mainContainer">
<div id="testId">
<button type="button" ng-click="testExpand()">Click</button>
</div>
</div>
</div>
</div>
The best advice here: use angular things to do job in angular.
The faster you become 'ok' with this, the better.
You can add a 'style' variable in the controller:
angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
$scope.style = {};
$scope.testExpand = function(){
alert("testExpand is called to show");
if ($scope.style.color)
$scope.style.color = red;
else delete $scope.style.color;
}
}]);
And then you simple modify your html this way:
<div ng-app="app">
<div ng-controller="MainController">
<div ng-style="style">
<p>Test Content</p>
</div>
<div id="mainContainer">
<div id="testId">
<button type="button" ng-click="testExpand()">Click</button>
</div>
</div>
</div>
</div>
You can use JQuery in the following way.
$(document).find('.yourButton').hide();
Related
is there anyone that can just write down the basics for database knowledge? i want to link a database to my html page but have no knowledge about it
this is my html page and i want the div background linked to a databse value that when the value is true the background is green if false background is red, now it works with a button input that if pressed it change to the opposite color
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/style.default.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Grafiek</title>
</head>
<body>
<h1>Server Stats</h1>
<div id="maindiv">
<div id="server1" class="serverstatus">
<div id="cardheader">
(servername1)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
<div id="server2" class="serverstatus">
<div id="cardheader">
(servername2)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
<div id="server3" class="serverstatus">
<div id="cardheader">
(servername3)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
</div>
</body>
</html>
<script>
function toggleStatus(e) {
var parentDiv = e.parentNode.parentNode;
var bgColor = parentDiv.style.backgroundColor;
if (bgColor == "darkred") {
parentDiv.style.backgroundColor = "green";
} else {
parentDiv.style.backgroundColor = "darkred";
}
}
// var green = false
// function toggleStatus()
// {
// if (green = !green)
// {
// $("#maindiv .serverstatus").each(function ()
// {
// $(this).css("background-color", "red");
// });
// }
// else
// {
// $("#maindiv .serverstatus").each(function ()
// {
// $(this).css("background-color", "#639919");
// });
// }
// };
// function updateStatus(){
// $("#maindiv .serverstatus").each(function(){
// $(this).css("background-color", "red");
// });
// }
//
// $( document ).ready(function() {
// updateStatus();
// });
</script>
</body>
</html>
This is my first time using ui-router and I find difficulties in handling routing and reloading some states. I hope anyone can help me with this.
overview of my index.html
<html ng-app="resApp">
<head></head>
<body ng-controller="mainCtrl" ng-cloak>
<div ng-show="showCustomerContent">
<div id="page-wrapper">
<div ui-view="header"></div>
<div ui-view="slider" ng-show="displaySlider"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
</div>
</div>
<div ng-show="showAdminContent">
<div id="page-wrapper">
<div ui-view="aheader"></div>
<div ui-view="asidebar"></div>
<div id="page-content-wrapper">
<div id="page-content">
<div class="container-fluid">
<div ui-view="acontent"></div>
</div>
</div>
</div>
<div ui-view="jsincludes"></div>
</body>
</html>
routing.js
'use strict'
resApp.config(['$stateProvider', '$urlRouterProvider','$httpProvider','$locationProvider',function ($stateProvider, $urlRouterProvider, $httpProvider,$locationProvider) {
$urlRouterProvider
.when('/','/Home')
.when('/login','/Home')
.otherwise('/Home');
$stateProvider
.state("home",{
url:'/Home',
views:{
'jsincludes':{
templateUrl:'views/includes/jsincludes.html'
},
'header':{
templateUrl:'views/customer_part/header.html',
controller:'headerCtrl'
},
'slider':{
templateUrl:'views/customer_part/slider.html'
},
'footer':{
templateUrl:'views/customer_part/footer.html'
}
}
})
.state("home.aboutus",{
url:"/AboutUs",
views:{
'content#':{
templateUrl:'views/customer_views/aboutus.html',
controller:'aboutusCtrl'
}
}
})
$httpProvider.useApplyAsync(true);
}]);
controller.js
'use strict'
resApp.controller('mainCtrl',['$scope','$location','UserData','$rootScope',function($scope,$location,UserData,$rootScope){
$rootScope.displaySlider = true;
$scope.$on('$stateChangeSuccess',function(event, toState){
var url = $location.absUrl().split('/');
//console.log(url);
if(url.length > 6){
$rootScope.displaySlider = false;
}else{
$rootScope.displaySlider = true;
}
});
UserData.getSessVar().then(function(msg){
if(msg.data!="none"){
$rootScope.uid = msg.data["uid"];
$rootScope.fullname = msg.data["fullname"];
$rootScope.role = msg.data["role"];
$rootScope.Id = msg.data["Id"];
if($rootScope.role == "customer"){
$scope.showCustomerContent = true;
}else{
$scope.showAdminContent = true;
}
}else{
$rootScope.role = "none";
$scope.showCustomerContent = true;
}
});
}]);
resApp.controller('headerCtrl',['$scope','$rootScope','UserData','$location','$state','$stateParams',function($scope,$rootScope,UserData,$location,$state,$stateParams){
$scope.hideLoginBtn = false;
if($rootScope.uid!=undefined){
$scope.hideLoginBtn = true;
}
$scope.logout = function(){
UserData.logoutUser($rootScope.Id).then(function(msg){
if(msg.data=="success"){
window.location.reload();
//$location.path('/Home');
}
});
}
$scope.home = function(){
$state.go('home', {}, { reload: true });
}
$scope.aboutus = function(){
$state.go('home.aboutus',{},{reload:true});
}
}]);
resApp.controller('aheaderCtrl',['$scope','$rootScope','UserData','$location',function($scope,$rootScope,UserData,$location){
$scope.logout = function(){
UserData.logoutUser($rootScope.Id).then(function(msg){
if(msg.data=="success"){
window.location.reload();
//$location.path('/Home');
}
});
}
}]);
In my header.html I have this code
<li>
<a href="" title="Home" ng-click="home()">
Home
</a>
</li>
Whenever I click Home the index.html is displaying another copy of my header and slider. As you can see in the image the {{fullname}} scope was displayed and also the other ui-views. I tried doing the ui-sref="home" ui-sref-opts="{reload: true, notify: true}" and put it in my anchor tag but the result is the same. I need to reload the page because my slider is not displaying if I just do ui-sref="home". I also tried to use the ng-cloak but whenever I click the anchor tag it also display my raw code in angularjs. The displayed raw code disappear when the whole page was rendered. Can anyone help me with this?
Update
This error only appeared in mozilla firefox. My routing is perfectly fine in chrome
There is div tag closing issue on the below code
<div ng-show="showAdminContent">
<div id="page-wrapper">
<div ui-view="aheader"></div>
<div ui-view="asidebar"></div>
<div id="page-content-wrapper">
<div id="page-content">
<div class="container-fluid">
<div ui-view="acontent"></div>
</div>
</div>
</div>
Change it as below
<div ng-show="showAdminContent">
<div id="page-wrapper">
<div ui-view="aheader"></div>
<div ui-view="asidebar"></div>
<div id="page-content-wrapper">
<div id="page-content">
<div class="container-fluid">
<div ui-view="acontent"></div>
</div>
</div>
</div>
</div>
Also, I am not sure why are you keeping header, footer, and slider as a named ui-view while you can achieve the same using simple ng-include. Use routing only for redirection and hyperlinks.
Refer my plunker for how to do it
https://plnkr.co/edit/ZatFwz83ODsPjy55eRc5?p=preview
Ideally you should have another html file ex:- main.html and in main.html specify the ui-view. for ex:-
<div id="wrapper">
<div ui-view="header"></div>
<div ui-view></div>
<div ui-view="footer"></div>
<script>
var app = angular.module("myapp", []);
app.controller('test',function($scope){
$scope.my="hi";
$scope.myimag=["Feature-Category1.png","Feature-Category2.png","Feature-Category3.png","Feature-Category1.png","Feature-Category1.png"];
});
</script>
<body ng-app="myapp">
<div ng-controller="test">
<div class="col-md-3 col-sm-3 col-xs-3" ng-repeat="x in myimag">
<img alt="" ng-src="{{x}}">
</div>
</div>
</body>
i want to repeat the items in the myimg but it not working it get errors why
You are missing module, controller and again use $scope variable instead of var,
$scope.myimg=["img.png","img1.png","img2.png"];
DEMO
var testApp= angular.module('test',[])
angular.module('test').controller('testCtrl',function($scope){
$scope.myimg=["altair7.jpg","altair6.jpg"];
})
<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="app.js"></script>
<script src="testCtrl.js"></script>
</head>
<body ng-app="test">
<div ng-controller="testCtrl">
<div class="col-md-2" ng-repeat="x in myimg ">
<img ng-src="{{x}}">
</div>
</div>
</body>
</html>
Three problems With your code :
You haven't defined an angular module.
You haven't defined a controller for that view.
In order to acheive two way data binding , you need to define your variables with $scope instead of defining it as 'var'
Update your code as shown below :
angular.module('myApp', [])
.controller('myController', function TodoCtrl($scope) {
$scope.myimg=["img.png","img1.png","img2.png"];
});
Html:
<div ng-app="myApp" ng-controller="myController">
<div class="col-md-2" ng-repeat="x in myimg ">
<img ng-src="{{x}}">
</div>
</div>
I apologize in advance if this has already been answered. I've Googled around for a few hours now, and I still haven't found anything that seems to answer my exact question.
Here is my code:
<ion-content>
<div class="list">
<div style="padding: 0px; margin: 0px;" class="item">
<div class="row"
ng-repeat="x in orders|orderBy:'order_id'| filter:{ paid: '0' } ">
<div class="col left">
{{x.order_id}}
</div> <div class="col left">
<a ng-href="#/tab/orderdetails?detail={{x.detail}}">订单详情</a>
</div>
</div>
</div>
</div>
</ion-content>
x.detail is the json object i want to pass to the newly opened page "orderdetails.html":
<script id="templates/orderdetails.html" type="text/ng-template">
<ion-view view-title="OrderDetails">
<ion-content class="padding">
<p>Here I want to display order details...</p>
var obj = this.href.split('?')[1];
console.log(obj);
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
</p>
</ion-content>
</ion-view>
</script>
app.js:
.state('tabs.orderdetails', {
url: "/orderdetails",
views: {
'home-tab': {
templateUrl: "templates/orderdetails.html"
}
}
})
I want to know how to parse and use the passed object in "orderdetails.html". Thanks.
You can add controllers to the views,
then declare a $scope.json_name = json value
to be able to use the variable the you angular template
<script id="templates/orderdetails.html" type="text/ng-template">
<ion-view view-title="OrderDetails">
<ion-content class="padding">
<p>Here I want to display order details...</p>
this is a variable name: {{ name }}
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
</p>
</ion-content>
</ion-view>
</script>
then you can add the controller like this
.state('tabs.orderdetails', {
url: "/orderdetails",
views: {
'home-tab': {
templateUrl: "templates/orderdetails.html",
controller: function ($scope) {
$scope.name = "this is a variable name";
}
}
}
})
you can refer to angular documentation
I'm trying to get a javascript on my site so when a person scrolls on the website, it automatically scrolls to the next or previous Div with a certain class. I'm working with smoothscroll and scrollto. I also found two codes that I'm trying to combine. But I don't seem to understand the whole scripts...
The first script is from http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery. This script makes it possible to navigate between DIV's (with a certain class) by pressing next or previous.
The second script is from How to enforce a "smooth scrolling" rule for mousewheel, jQuery? (last post) and makes it possible to make the website scroll (smooth) down or up for a certain amount of pixels when scrolling.
I wanted to combine these two but it's not really straight forward for me :/
It would be nice if someone could point me how to do this. Thanks
Best regards,
Billy Beach
Dear lalibi,
Thanks for your answer. I tried your code, but don't seem to get it work. Here is the code I used:
<head>
<script type="text/javascript" src="Box/jquery.js"></script>
<SCRIPT src="Box/jquery.min.js"></SCRIPT>
<SCRIPT src="Box/jquery.scrollTo-1.4.2-min.js"></SCRIPT>
<SCRIPT src="Box/jquery.localscroll-1.2.7-min.js"></SCRIPT>
<script type="text/javascript" src="Box/jquery.mousewheel.min.js"></script>
<style type="text/css">
<!--
div {
border: 1px solid black;
height: 50px;
}
div.current {
background-color: orange;
}
-->
</style>
<script type="text/javascript">
var current
$(function() {
$('body').mousewheel(function(event, delta) {
var $current = $('div.current');
console.log(delta);
console.log($current);
if (delta > 0) {
$prev = $current.prev();
if ($prev.length) {
$('body').scrollTo($prev, 100);
$current.removeClass('current');
$prev.addClass('current');
}
} else {
$next = $current.next();
if ($next.length) {
$('body').scrollTo($next, 100);
$current.removeClass('current');
$next.addClass('current');
}
}
event.preventDefault();
});
});
</script>
</head>
<body>
<div class="current" id="div">1</div>
<div id="div">2</div>
<div id="div">3</div>
<div id="div">4</div>
<div id="div">5</div>
<div id="div">6</div>
<div id="div">7</div>
<div id="div">8</div>
<div id="div">9</div>
<div id="div">10</div>
<div id="div">11</div>
<div id="div">12</div>
<div id="div">13</div>
<div id="div">14</div>
<div id="div">15</div>
<div id="div">16</div>
<div id="div">17</div>
<div id="div">18</div>
<div id="div">19</div>
<div id="div">20</div>
<div id="div">21</div>
<div id="div">22</div>
<div id="div">23</div>
<div id="div">24</div>
<div id="div">25</div>
<div id="div">26</div>
<div class="current" id="div">27</div>
<div id="div">28</div>
<div id="div">29</div>
<div id="div">30</div>
<div id="div">31</div>
<div id="div">32</div>
<div id="div">33</div>
<div id="div">34</div>
<div id="div">35</div>
<div id="div">36</div>
<div id="div">37</div>
<div id="div">38</div>
<div id="div">39</div>
<div id="div">40</div>
<div id="div">41</div>
<div id="div">42</div>
<div id="div">43</div>
<div id="div">44</div>
<div id="div">45</div>
<div id="div">46</div>
<div id="div">47</div>
<div id="div">48</div>
<div id="div">49</div>
<div id="div">50</div>
<div id="div">51</div>
<div id="div">52</div>
<div id="div">53</div>
<div id="div">54</div>
<div id="div">55</div>
<div id="div">56</div>
<div class="current" id="div">57</div>
</body>
</html>
EDIT: I tweaked the fiddle a little bit. One of the two external scripts was using http: and since the link (before the edit) used https:, Chrome blocked it unless you pressed the little shield icon. I also updated to latest version.
This seems to work fine: http://jsfiddle.net/9Amdx/1707/
var current;
$(function() {
$('body').mousewheel(function(event, delta) {
var $current = $('div.current');
console.log(delta);
console.log($current);
if (delta > 0) {
$prev = $current.prev();
if ($prev.length) {
$('body').scrollTo($prev, 100);
$current.removeClass('current');
$prev.addClass('current');
}
} else {
$next = $current.next();
if ($next.length) {
$('body').scrollTo($next, 100);
$current.removeClass('current');
$next.addClass('current');
}
}
event.preventDefault();
});
});