how to make ng-click must be triggered only when device-width<480px?
1
I have a scenario where I need ng-click to work for devices with a width less than 480px but not for anything greater. I have tried an if condition but it is not working.The toggle function must be work only in smaller device and the list must not be affected in desktop view,if toggled in smaller device.
I have tried the following;
Here is my Plunker
Any help would be appreciated.
Thanks in Advance.
var app = angular.module('myApp', );
app.controller('myCtrl', function($scope, $window) {
$scope.width = $window.document.body.clientWidth;
if ($scope.width < 480) {
$scope.showList = false;
} else {
$scope.showList = true;
}
});<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-5 widget" ng-click="showList = !showList;">
<h2>sign in data</h2>
<article class="widget_content">
<ul ng-show="showList">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
<div class="col-md-3 widget">
<h2>CONTACT US</h2>
<article class="widget_content">
<ul>
<li>Find a branch</li>
<li>Contact us</li>
</ul>
</article>
</div>
<div class="col-md-4 widget">
<h2>ABOUT</h2>
<article class="widget_content">
<ul>
<li>Careers</li>
<li>data</li>
</ul>
</article>
</div>
</div>
</div>
</div>
</body>javascript angularjs
edited Nov 21 at 5:41
Samuel J Mathew
3,43412228
asked Nov 21 at 5:09
pbsbr
1299
add a comment |
1
I have a scenario where I need ng-click to work for devices with a width less than 480px but not for anything greater. I have tried an if condition but it is not working.The toggle function must be work only in smaller device and the list must not be affected in desktop view,if toggled in smaller device.
I have tried the following;
Here is my Plunker
Any help would be appreciated.
Thanks in Advance.
var app = angular.module('myApp', );
app.controller('myCtrl', function($scope, $window) {
$scope.width = $window.document.body.clientWidth;
if ($scope.width < 480) {
$scope.showList = false;
} else {
$scope.showList = true;
}
});<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-5 widget" ng-click="showList = !showList;">
<h2>sign in data</h2>
<article class="widget_content">
<ul ng-show="showList">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
<div class="col-md-3 widget">
<h2>CONTACT US</h2>
<article class="widget_content">
<ul>
<li>Find a branch</li>
<li>Contact us</li>
</ul>
</article>
</div>
<div class="col-md-4 widget">
<h2>ABOUT</h2>
<article class="widget_content">
<ul>
<li>Careers</li>
<li>data</li>
</ul>
</article>
</div>
</div>
</div>
</div>
</body>javascript angularjs
edited Nov 21 at 5:41
Samuel J Mathew
3,43412228
asked Nov 21 at 5:09
pbsbr
1299
add a comment |
1
1
1
I have a scenario where I need ng-click to work for devices with a width less than 480px but not for anything greater. I have tried an if condition but it is not working.The toggle function must be work only in smaller device and the list must not be affected in desktop view,if toggled in smaller device.
I have tried the following;
Here is my Plunker
Any help would be appreciated.
Thanks in Advance.
var app = angular.module('myApp', );
app.controller('myCtrl', function($scope, $window) {
$scope.width = $window.document.body.clientWidth;
if ($scope.width < 480) {
$scope.showList = false;
} else {
$scope.showList = true;
}
});<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-5 widget" ng-click="showList = !showList;">
<h2>sign in data</h2>
<article class="widget_content">
<ul ng-show="showList">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
<div class="col-md-3 widget">
<h2>CONTACT US</h2>
<article class="widget_content">
<ul>
<li>Find a branch</li>
<li>Contact us</li>
</ul>
</article>
</div>
<div class="col-md-4 widget">
<h2>ABOUT</h2>
<article class="widget_content">
<ul>
<li>Careers</li>
<li>data</li>
</ul>
</article>
</div>
</div>
</div>
</div>
</body>javascript angularjs
edited Nov 21 at 5:41
Samuel J Mathew
3,43412228
asked Nov 21 at 5:09
pbsbr
1299
I have a scenario where I need ng-click to work for devices with a width less than 480px but not for anything greater. I have tried an if condition but it is not working.The toggle function must be work only in smaller device and the list must not be affected in desktop view,if toggled in smaller device.
I have tried the following;
Here is my Plunker
Any help would be appreciated.
Thanks in Advance.
var app = angular.module('myApp', );
app.controller('myCtrl', function($scope, $window) {
$scope.width = $window.document.body.clientWidth;
if ($scope.width < 480) {
$scope.showList = false;
} else {
$scope.showList = true;
}
});<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-5 widget" ng-click="showList = !showList;">
<h2>sign in data</h2>
<article class="widget_content">
<ul ng-show="showList">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
<div class="col-md-3 widget">
<h2>CONTACT US</h2>
<article class="widget_content">
<ul>
<li>Find a branch</li>
<li>Contact us</li>
</ul>
</article>
</div>
<div class="col-md-4 widget">
<h2>ABOUT</h2>
<article class="widget_content">
<ul>
<li>Careers</li>
<li>data</li>
</ul>
</article>
</div>
</div>
</div>
</div>
</body>var app = angular.module('myApp', );
app.controller('myCtrl', function($scope, $window) {
$scope.width = $window.document.body.clientWidth;
if ($scope.width < 480) {
$scope.showList = false;
} else {
$scope.showList = true;
}
});<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-5 widget" ng-click="showList = !showList;">
<h2>sign in data</h2>
<article class="widget_content">
<ul ng-show="showList">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
<div class="col-md-3 widget">
<h2>CONTACT US</h2>
<article class="widget_content">
<ul>
<li>Find a branch</li>
<li>Contact us</li>
</ul>
</article>
</div>
<div class="col-md-4 widget">
<h2>ABOUT</h2>
<article class="widget_content">
<ul>
<li>Careers</li>
<li>data</li>
</ul>
</article>
</div>
</div>
</div>
</div>
</body>var app = angular.module('myApp', );
app.controller('myCtrl', function($scope, $window) {
$scope.width = $window.document.body.clientWidth;
if ($scope.width < 480) {
$scope.showList = false;
} else {
$scope.showList = true;
}
});<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-5 widget" ng-click="showList = !showList;">
<h2>sign in data</h2>
<article class="widget_content">
<ul ng-show="showList">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
<div class="col-md-3 widget">
<h2>CONTACT US</h2>
<article class="widget_content">
<ul>
<li>Find a branch</li>
<li>Contact us</li>
</ul>
</article>
</div>
<div class="col-md-4 widget">
<h2>ABOUT</h2>
<article class="widget_content">
<ul>
<li>Careers</li>
<li>data</li>
</ul>
</article>
</div>
</div>
</div>
</div>
</body>javascript angularjs
javascript angularjs
edited Nov 21 at 5:41
Samuel J Mathew
3,43412228
asked Nov 21 at 5:09
pbsbr
1299
edited Nov 21 at 5:41
Samuel J Mathew
3,43412228
asked Nov 21 at 5:09
pbsbr
1299
edited Nov 21 at 5:41
Samuel J Mathew
3,43412228
edited Nov 21 at 5:41
Samuel J Mathew
3,43412228
edited Nov 21 at 5:41
Samuel J Mathew
3,43412228
3,43412228
asked Nov 21 at 5:09
pbsbr
1299
asked Nov 21 at 5:09
pbsbr
1299
asked Nov 21 at 5:09
pbsbr
1299
1299
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
1
You will get device width with following
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
You can check an if condition in the click handler.
if(width<480) {
handleClick();
}
var app = angular.module('myApp', );
app.controller('myCtrl', function($scope, $window) {
$scope.width = ($window.innerWidth > 0) ? $window.innerWidth : $window.document.body.clientWidth;
if ($scope.width < 480) {
$scope.showList = false;
} else {
$scope.showList = true;
}
});<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-5 widget" ng-click="showList = !showList;">
<h2>sign in data</h2>
<article class="widget_content">
<ul ng-show="showList">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
<div class="col-md-3 widget">
<h2>CONTACT US</h2>
<article class="widget_content">
<ul>
<li>Find a branch</li>
<li>Contact us</li>
</ul>
</article>
</div>
<div class="col-md-4 widget">
<h2>ABOUT</h2>
<article class="widget_content">
<ul>
<li>Careers</li>
<li>data</li>
</ul>
</article>
</div>
</div>
</div>
</div>
</body>If you want you can create a directive
app.directive('myDirective', ['$window', function ($window) {
return {
link: link,
restrict: 'A'
};
function link(scope, element, attrs){
angular.element($window).bind('resize', function(){
scope.width= $window.innerWidth;
});
}
}]);
And use it on your div:
<div my-directive ng-if="width > 320">
answered Nov 21 at 5:25
Samuel J Mathew
3,43412228
how would you set up a watcher on width to check its value dynamically?
– Aleksey Solovey
Nov 21 at 10:13
1
@AlekseySolovey I think we need not set a watcher since that can be achieved to window resize event.
– Samuel J Mathew
Nov 21 at 10:16
plnkr.co/edit/3nXaY7oE5rHHsEeW9lyx?p=catalogue
– pbsbr
Nov 21 at 12:01
add a comment |
0
You can try like :
you can check width through JS (id):
document.getElementById(id).clientWidth;
Also, you can check width through angular.element
angular.element(document.getElementById(id)).clientWidth;
angular.element(document.querySelectorAll(".class")[0]).clientWidth;
answered Nov 21 at 5:21
dvl333
495
add a comment |
0
put the function defined in the snippet to all lists which you want to toggle...
var app = angular.module('myApp', );
app.controller('myCtrl', function($scope,$window) {
$scope.toggleInSmallDevices = function(){
var screenWidthNow = $window.document.body.clientWidth;
console.log(screenWidthNow);
if (screenWidthNow<480){
$scope.showList = !$scope.showList;
}
else {
$scope.showList = true;
}
}
});<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl" ng-init="showList=true; toggleInSmallDevices();">
<div class="container">
<div class="row">
<div class="col-md-5 widget" ng-click="toggleInSmallDevices()">
<h2>sign in data</h2>
<article class="widget_content">
<ul ng-show="showList">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
<div class="col-md-3 widget">
<h2>CONTACT US</h2>
<article class="widget_content">
<ul>
<li>Find a branch</li>
<li>Contact us</li>
</ul>
</article>
</div>
<div class="col-md-4 widget">
<h2>ABOUT</h2>
<article class="widget_content">
<ul>
<li>Careers</li>
<li>data</li>
</ul>
</article>
</div>
</div>
</div>
</body>answered Nov 21 at 5:34
AIqbalRaj
1,4842620
add a comment |
0
In below link the solution of Responsive web design it is pretty much explained similar to your problem.
Used media queries for checking width less than 480px and based on that toggle element class to show/ hide menus on element click function in JavaScript
https://www.youtube.com/watch?v=FDh7Mdl2oww&list=PL4cUxeGkcC9g9Vh9MAA-XKnfJsWZnPZFw&index=9
Thanks
answered Nov 21 at 6:28
Gautam
335
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53405587%2fhow-to-make-ng-click-must-be-triggered-only-when-device-width480px%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You will get device width with following
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
You can check an if condition in the click handler.
if(width<480) {
handleClick();
}
var app = angular.module('myApp', );
app.controller('myCtrl', function($scope, $window) {
$scope.width = ($window.innerWidth > 0) ? $window.innerWidth : $window.document.body.clientWidth;
if ($scope.width < 480) {
$scope.showList = false;
} else {
$scope.showList = true;
}
});<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-5 widget" ng-click="showList = !showList;">
<h2>sign in data</h2>
<article class="widget_content">
<ul ng-show="showList">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
<div class="col-md-3 widget">
<h2>CONTACT US</h2>
<article class="widget_content">
<ul>
<li>Find a branch</li>
<li>Contact us</li>
</ul>
</article>
</div>
<div class="col-md-4 widget">
<h2>ABOUT</h2>
<article class="widget_content">
<ul>
<li>Careers</li>
<li>data</li>
</ul>
</article>
</div>
</div>
</div>
</div>
</body>If you want you can create a directive
app.directive('myDirective', ['$window', function ($window) {
return {
link: link,
restrict: 'A'
};
function link(scope, element, attrs){
angular.element($window).bind('resize', function(){
scope.width= $window.innerWidth;
});
}
}]);
And use it on your div:
<div my-directive ng-if="width > 320">
answered Nov 21 at 5:25
Samuel J Mathew
3,43412228
how would you set up a watcher on width to check its value dynamically?
– Aleksey Solovey
Nov 21 at 10:13
1
@AlekseySolovey I think we need not set a watcher since that can be achieved to window resize event.
– Samuel J Mathew
Nov 21 at 10:16
plnkr.co/edit/3nXaY7oE5rHHsEeW9lyx?p=catalogue
– pbsbr
Nov 21 at 12:01
add a comment |
1
You will get device width with following
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
You can check an if condition in the click handler.
if(width<480) {
handleClick();
}
var app = angular.module('myApp', );
app.controller('myCtrl', function($scope, $window) {
$scope.width = ($window.innerWidth > 0) ? $window.innerWidth : $window.document.body.clientWidth;
if ($scope.width < 480) {
$scope.showList = false;
} else {
$scope.showList = true;
}
});<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-5 widget" ng-click="showList = !showList;">
<h2>sign in data</h2>
<article class="widget_content">
<ul ng-show="showList">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
<div class="col-md-3 widget">
<h2>CONTACT US</h2>
<article class="widget_content">
<ul>
<li>Find a branch</li>
<li>Contact us</li>
</ul>
</article>
</div>
<div class="col-md-4 widget">
<h2>ABOUT</h2>
<article class="widget_content">
<ul>
<li>Careers</li>
<li>data</li>
</ul>
</article>
</div>
</div>
</div>
</div>
</body>If you want you can create a directive
app.directive('myDirective', ['$window', function ($window) {
return {
link: link,
restrict: 'A'
};
function link(scope, element, attrs){
angular.element($window).bind('resize', function(){
scope.width= $window.innerWidth;
});
}
}]);
And use it on your div:
<div my-directive ng-if="width > 320">
answered Nov 21 at 5:25
Samuel J Mathew
3,43412228
how would you set up a watcher on width to check its value dynamically?
– Aleksey Solovey
Nov 21 at 10:13
1
@AlekseySolovey I think we need not set a watcher since that can be achieved to window resize event.
– Samuel J Mathew
Nov 21 at 10:16
plnkr.co/edit/3nXaY7oE5rHHsEeW9lyx?p=catalogue
– pbsbr
Nov 21 at 12:01
add a comment |
1
1
1
You will get device width with following
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
You can check an if condition in the click handler.
if(width<480) {
handleClick();
}
var app = angular.module('myApp', );
app.controller('myCtrl', function($scope, $window) {
$scope.width = ($window.innerWidth > 0) ? $window.innerWidth : $window.document.body.clientWidth;
if ($scope.width < 480) {
$scope.showList = false;
} else {
$scope.showList = true;
}
});<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-5 widget" ng-click="showList = !showList;">
<h2>sign in data</h2>
<article class="widget_content">
<ul ng-show="showList">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
<div class="col-md-3 widget">
<h2>CONTACT US</h2>
<article class="widget_content">
<ul>
<li>Find a branch</li>
<li>Contact us</li>
</ul>
</article>
</div>
<div class="col-md-4 widget">
<h2>ABOUT</h2>
<article class="widget_content">
<ul>
<li>Careers</li>
<li>data</li>
</ul>
</article>
</div>
</div>
</div>
</div>
</body>If you want you can create a directive
app.directive('myDirective', ['$window', function ($window) {
return {
link: link,
restrict: 'A'
};
function link(scope, element, attrs){
angular.element($window).bind('resize', function(){
scope.width= $window.innerWidth;
});
}
}]);
And use it on your div:
<div my-directive ng-if="width > 320">
answered Nov 21 at 5:25
Samuel J Mathew
3,43412228
You will get device width with following
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
You can check an if condition in the click handler.
if(width<480) {
handleClick();
}
var app = angular.module('myApp', );
app.controller('myCtrl', function($scope, $window) {
$scope.width = ($window.innerWidth > 0) ? $window.innerWidth : $window.document.body.clientWidth;
if ($scope.width < 480) {
$scope.showList = false;
} else {
$scope.showList = true;
}
});<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-5 widget" ng-click="showList = !showList;">
<h2>sign in data</h2>
<article class="widget_content">
<ul ng-show="showList">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
<div class="col-md-3 widget">
<h2>CONTACT US</h2>
<article class="widget_content">
<ul>
<li>Find a branch</li>
<li>Contact us</li>
</ul>
</article>
</div>
<div class="col-md-4 widget">
<h2>ABOUT</h2>
<article class="widget_content">
<ul>
<li>Careers</li>
<li>data</li>
</ul>
</article>
</div>
</div>
</div>
</div>
</body>If you want you can create a directive
app.directive('myDirective', ['$window', function ($window) {
return {
link: link,
restrict: 'A'
};
function link(scope, element, attrs){
angular.element($window).bind('resize', function(){
scope.width= $window.innerWidth;
});
}
}]);
And use it on your div:
<div my-directive ng-if="width > 320">
var app = angular.module('myApp', );
app.controller('myCtrl', function($scope, $window) {
$scope.width = ($window.innerWidth > 0) ? $window.innerWidth : $window.document.body.clientWidth;
if ($scope.width < 480) {
$scope.showList = false;
} else {
$scope.showList = true;
}
});<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-5 widget" ng-click="showList = !showList;">
<h2>sign in data</h2>
<article class="widget_content">
<ul ng-show="showList">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
<div class="col-md-3 widget">
<h2>CONTACT US</h2>
<article class="widget_content">
<ul>
<li>Find a branch</li>
<li>Contact us</li>
</ul>
</article>
</div>
<div class="col-md-4 widget">
<h2>ABOUT</h2>
<article class="widget_content">
<ul>
<li>Careers</li>
<li>data</li>
</ul>
</article>
</div>
</div>
</div>
</div>
</body>var app = angular.module('myApp', );
app.controller('myCtrl', function($scope, $window) {
$scope.width = ($window.innerWidth > 0) ? $window.innerWidth : $window.document.body.clientWidth;
if ($scope.width < 480) {
$scope.showList = false;
} else {
$scope.showList = true;
}
});<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-5 widget" ng-click="showList = !showList;">
<h2>sign in data</h2>
<article class="widget_content">
<ul ng-show="showList">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
<div class="col-md-3 widget">
<h2>CONTACT US</h2>
<article class="widget_content">
<ul>
<li>Find a branch</li>
<li>Contact us</li>
</ul>
</article>
</div>
<div class="col-md-4 widget">
<h2>ABOUT</h2>
<article class="widget_content">
<ul>
<li>Careers</li>
<li>data</li>
</ul>
</article>
</div>
</div>
</div>
</div>
</body>answered Nov 21 at 5:25
Samuel J Mathew
3,43412228
edited Nov 21 at 5:38
answered Nov 21 at 5:25
Samuel J Mathew
3,43412228
answered Nov 21 at 5:25
Samuel J Mathew
3,43412228
answered Nov 21 at 5:25
Samuel J Mathew
3,43412228
3,43412228
how would you set up a watcher on width to check its value dynamically?
– Aleksey Solovey
Nov 21 at 10:13
1
@AlekseySolovey I think we need not set a watcher since that can be achieved to window resize event.
– Samuel J Mathew
Nov 21 at 10:16
plnkr.co/edit/3nXaY7oE5rHHsEeW9lyx?p=catalogue
– pbsbr
Nov 21 at 12:01
add a comment |
how would you set up a watcher on width to check its value dynamically?
– Aleksey Solovey
Nov 21 at 10:13
1
@AlekseySolovey I think we need not set a watcher since that can be achieved to window resize event.
– Samuel J Mathew
Nov 21 at 10:16
plnkr.co/edit/3nXaY7oE5rHHsEeW9lyx?p=catalogue
– pbsbr
Nov 21 at 12:01
how would you set up a watcher on width to check its value dynamically?
– Aleksey Solovey
Nov 21 at 10:13
how would you set up a watcher on width to check its value dynamically?
– Aleksey Solovey
Nov 21 at 10:13
1
1
@AlekseySolovey I think we need not set a watcher since that can be achieved to window resize event.
– Samuel J Mathew
Nov 21 at 10:16
@AlekseySolovey I think we need not set a watcher since that can be achieved to window resize event.
– Samuel J Mathew
Nov 21 at 10:16
plnkr.co/edit/3nXaY7oE5rHHsEeW9lyx?p=catalogue
– pbsbr
Nov 21 at 12:01
plnkr.co/edit/3nXaY7oE5rHHsEeW9lyx?p=catalogue
– pbsbr
Nov 21 at 12:01
add a comment |
0
You can try like :
you can check width through JS (id):
document.getElementById(id).clientWidth;
Also, you can check width through angular.element
angular.element(document.getElementById(id)).clientWidth;
angular.element(document.querySelectorAll(".class")[0]).clientWidth;
answered Nov 21 at 5:21
dvl333
495
add a comment |
0
You can try like :
you can check width through JS (id):
document.getElementById(id).clientWidth;
Also, you can check width through angular.element
angular.element(document.getElementById(id)).clientWidth;
angular.element(document.querySelectorAll(".class")[0]).clientWidth;
answered Nov 21 at 5:21
dvl333
495
add a comment |
0
0
0
You can try like :
you can check width through JS (id):
document.getElementById(id).clientWidth;
Also, you can check width through angular.element
angular.element(document.getElementById(id)).clientWidth;
angular.element(document.querySelectorAll(".class")[0]).clientWidth;
answered Nov 21 at 5:21
dvl333
495
You can try like :
you can check width through JS (id):
document.getElementById(id).clientWidth;
Also, you can check width through angular.element
angular.element(document.getElementById(id)).clientWidth;
angular.element(document.querySelectorAll(".class")[0]).clientWidth;
answered Nov 21 at 5:21
dvl333
495
answered Nov 21 at 5:21
dvl333
495
answered Nov 21 at 5:21
dvl333
495
answered Nov 21 at 5:21
dvl333
495
495
add a comment |
add a comment |
0
put the function defined in the snippet to all lists which you want to toggle...
var app = angular.module('myApp', );
app.controller('myCtrl', function($scope,$window) {
$scope.toggleInSmallDevices = function(){
var screenWidthNow = $window.document.body.clientWidth;
console.log(screenWidthNow);
if (screenWidthNow<480){
$scope.showList = !$scope.showList;
}
else {
$scope.showList = true;
}
}
});<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl" ng-init="showList=true; toggleInSmallDevices();">
<div class="container">
<div class="row">
<div class="col-md-5 widget" ng-click="toggleInSmallDevices()">
<h2>sign in data</h2>
<article class="widget_content">
<ul ng-show="showList">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
<div class="col-md-3 widget">
<h2>CONTACT US</h2>
<article class="widget_content">
<ul>
<li>Find a branch</li>
<li>Contact us</li>
</ul>
</article>
</div>
<div class="col-md-4 widget">
<h2>ABOUT</h2>
<article class="widget_content">
<ul>
<li>Careers</li>
<li>data</li>
</ul>
</article>
</div>
</div>
</div>
</body>answered Nov 21 at 5:34
AIqbalRaj
1,4842620
add a comment |
0
put the function defined in the snippet to all lists which you want to toggle...
var app = angular.module('myApp', );
app.controller('myCtrl', function($scope,$window) {
$scope.toggleInSmallDevices = function(){
var screenWidthNow = $window.document.body.clientWidth;
console.log(screenWidthNow);
if (screenWidthNow<480){
$scope.showList = !$scope.showList;
}
else {
$scope.showList = true;
}
}
});<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl" ng-init="showList=true; toggleInSmallDevices();">
<div class="container">
<div class="row">
<div class="col-md-5 widget" ng-click="toggleInSmallDevices()">
<h2>sign in data</h2>
<article class="widget_content">
<ul ng-show="showList">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
<div class="col-md-3 widget">
<h2>CONTACT US</h2>
<article class="widget_content">
<ul>
<li>Find a branch</li>
<li>Contact us</li>
</ul>
</article>
</div>
<div class="col-md-4 widget">
<h2>ABOUT</h2>
<article class="widget_content">
<ul>
<li>Careers</li>
<li>data</li>
</ul>
</article>
</div>
</div>
</div>
</body>answered Nov 21 at 5:34
AIqbalRaj
1,4842620
add a comment |
0
0
0
put the function defined in the snippet to all lists which you want to toggle...
var app = angular.module('myApp', );
app.controller('myCtrl', function($scope,$window) {
$scope.toggleInSmallDevices = function(){
var screenWidthNow = $window.document.body.clientWidth;
console.log(screenWidthNow);
if (screenWidthNow<480){
$scope.showList = !$scope.showList;
}
else {
$scope.showList = true;
}
}
});<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl" ng-init="showList=true; toggleInSmallDevices();">
<div class="container">
<div class="row">
<div class="col-md-5 widget" ng-click="toggleInSmallDevices()">
<h2>sign in data</h2>
<article class="widget_content">
<ul ng-show="showList">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
<div class="col-md-3 widget">
<h2>CONTACT US</h2>
<article class="widget_content">
<ul>
<li>Find a branch</li>
<li>Contact us</li>
</ul>
</article>
</div>
<div class="col-md-4 widget">
<h2>ABOUT</h2>
<article class="widget_content">
<ul>
<li>Careers</li>
<li>data</li>
</ul>
</article>
</div>
</div>
</div>
</body>answered Nov 21 at 5:34
AIqbalRaj
1,4842620
put the function defined in the snippet to all lists which you want to toggle...
var app = angular.module('myApp', );
app.controller('myCtrl', function($scope,$window) {
$scope.toggleInSmallDevices = function(){
var screenWidthNow = $window.document.body.clientWidth;
console.log(screenWidthNow);
if (screenWidthNow<480){
$scope.showList = !$scope.showList;
}
else {
$scope.showList = true;
}
}
});<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl" ng-init="showList=true; toggleInSmallDevices();">
<div class="container">
<div class="row">
<div class="col-md-5 widget" ng-click="toggleInSmallDevices()">
<h2>sign in data</h2>
<article class="widget_content">
<ul ng-show="showList">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
<div class="col-md-3 widget">
<h2>CONTACT US</h2>
<article class="widget_content">
<ul>
<li>Find a branch</li>
<li>Contact us</li>
</ul>
</article>
</div>
<div class="col-md-4 widget">
<h2>ABOUT</h2>
<article class="widget_content">
<ul>
<li>Careers</li>
<li>data</li>
</ul>
</article>
</div>
</div>
</div>
</body>var app = angular.module('myApp', );
app.controller('myCtrl', function($scope,$window) {
$scope.toggleInSmallDevices = function(){
var screenWidthNow = $window.document.body.clientWidth;
console.log(screenWidthNow);
if (screenWidthNow<480){
$scope.showList = !$scope.showList;
}
else {
$scope.showList = true;
}
}
});<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl" ng-init="showList=true; toggleInSmallDevices();">
<div class="container">
<div class="row">
<div class="col-md-5 widget" ng-click="toggleInSmallDevices()">
<h2>sign in data</h2>
<article class="widget_content">
<ul ng-show="showList">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
<div class="col-md-3 widget">
<h2>CONTACT US</h2>
<article class="widget_content">
<ul>
<li>Find a branch</li>
<li>Contact us</li>
</ul>
</article>
</div>
<div class="col-md-4 widget">
<h2>ABOUT</h2>
<article class="widget_content">
<ul>
<li>Careers</li>
<li>data</li>
</ul>
</article>
</div>
</div>
</div>
</body>var app = angular.module('myApp', );
app.controller('myCtrl', function($scope,$window) {
$scope.toggleInSmallDevices = function(){
var screenWidthNow = $window.document.body.clientWidth;
console.log(screenWidthNow);
if (screenWidthNow<480){
$scope.showList = !$scope.showList;
}
else {
$scope.showList = true;
}
}
});<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl" ng-init="showList=true; toggleInSmallDevices();">
<div class="container">
<div class="row">
<div class="col-md-5 widget" ng-click="toggleInSmallDevices()">
<h2>sign in data</h2>
<article class="widget_content">
<ul ng-show="showList">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
<div class="col-md-3 widget">
<h2>CONTACT US</h2>
<article class="widget_content">
<ul>
<li>Find a branch</li>
<li>Contact us</li>
</ul>
</article>
</div>
<div class="col-md-4 widget">
<h2>ABOUT</h2>
<article class="widget_content">
<ul>
<li>Careers</li>
<li>data</li>
</ul>
</article>
</div>
</div>
</div>
</body>answered Nov 21 at 5:34
AIqbalRaj
1,4842620
edited Nov 21 at 5:40
answered Nov 21 at 5:34
AIqbalRaj
1,4842620
answered Nov 21 at 5:34
AIqbalRaj
1,4842620
answered Nov 21 at 5:34
AIqbalRaj
1,4842620
1,4842620
add a comment |
add a comment |
0
In below link the solution of Responsive web design it is pretty much explained similar to your problem.
Used media queries for checking width less than 480px and based on that toggle element class to show/ hide menus on element click function in JavaScript
https://www.youtube.com/watch?v=FDh7Mdl2oww&list=PL4cUxeGkcC9g9Vh9MAA-XKnfJsWZnPZFw&index=9
Thanks
answered Nov 21 at 6:28
Gautam
335
add a comment |
0
In below link the solution of Responsive web design it is pretty much explained similar to your problem.
Used media queries for checking width less than 480px and based on that toggle element class to show/ hide menus on element click function in JavaScript
https://www.youtube.com/watch?v=FDh7Mdl2oww&list=PL4cUxeGkcC9g9Vh9MAA-XKnfJsWZnPZFw&index=9
Thanks
answered Nov 21 at 6:28
Gautam
335
add a comment |
0
0
0
In below link the solution of Responsive web design it is pretty much explained similar to your problem.
Used media queries for checking width less than 480px and based on that toggle element class to show/ hide menus on element click function in JavaScript
https://www.youtube.com/watch?v=FDh7Mdl2oww&list=PL4cUxeGkcC9g9Vh9MAA-XKnfJsWZnPZFw&index=9
Thanks
answered Nov 21 at 6:28
Gautam
335
In below link the solution of Responsive web design it is pretty much explained similar to your problem.
Used media queries for checking width less than 480px and based on that toggle element class to show/ hide menus on element click function in JavaScript
https://www.youtube.com/watch?v=FDh7Mdl2oww&list=PL4cUxeGkcC9g9Vh9MAA-XKnfJsWZnPZFw&index=9
Thanks
answered Nov 21 at 6:28
Gautam
335
edited Nov 21 at 7:16
answered Nov 21 at 6:28
Gautam
335
answered Nov 21 at 6:28
Gautam
335
answered Nov 21 at 6:28
Gautam
335
335
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53405587%2fhow-to-make-ng-click-must-be-triggered-only-when-device-width480px%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
