I am wondering how I can make a script that automatically clicks a button with tampermonkey.
Here is the button:
<button class="confirm" tabindex="1" style="display: inline-block; background-color: rgb(91, 155, 209); box-shadow: rgba(91, 155, 209, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;">Next Video</button>
You can do the following:
$(document).ready(function() {
$("button:contains('Next Video')").click();
});
Hope that helps!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#result").hide();
$("#btnNextVideo").trigger('click');
$("#btnNextVideo").click(function() {
$("#result").show();
});
});
</script>
<button id="btnNextVideo" class="confirm" tabindex="1" style="display: inline-block; background-color: rgb(91, 155, 209); box-shadow: rgba(91, 155, 209, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;">Next Video</button>
<div id="result">
It worked!
</div>
<script>
$(document).ready(function() {
$("#result").hide();
$("#btnNextVideo").trigger('click');
$("#btnNextVideo").click(function() {
$("#result").show();
});
});
</script>
Related
In AngularJS, I have one textbox and while writing message if we type # then it should display list of names which is in arraylist.
Kindly help how can I do this feature using angularjs.
Thanks in advance
first you should publish what you have tried so far.. then only will help us to help you further...
here i wrote search alone..
for string specific,
you have to write function inside ng-change="func_name(your_txt)"
read the text use substr to find whether your text contains # if its do filter.. here i wrote filter inside ng-repeat can write filter on change will answer.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Angular animated search box - sibeeshpassion </title>
<style>
.inputText {
border: 1px solid #ccc;
border-radius: 10px;
background-color: #0ff;
box-shadow: 1px 1px 1px 1px #ccc;
width: 230px;
height: 30px;
}
ul {
list-style: none;
padding: 10px;
background-color: #CAEAF5;
border-radius: 10px;
border: 1px solid #ccc;
width: 210px;
}
li {
border: 1px solid #ccc;
border-right: none;
border-left: none;
padding: 2px;
text-align: center;
}
</style>
</head>
<body ng-app ng-init="placesVisited=['Delhi','Kerala','Tamil Nadu','Banglore','Uttar Pradesh','Noida','Haryana','Thrissur'];">
<div>
<input type="text" ng-change="do_on_at(curPlace)" ng-model="curPlace" class="inputText">
<ul>
<li ng-repeat="place in placesVisited | filter:curPlace">
<span>{{place}} </span>
</li>
</ul>
</div>
</body>
</html>
selectAll/none options inside md-select
Hi, I'm trying to add selectAll/None option inside md-select, once selectAll checkbox is checked all other checkbox should be checked how to get control of other checkboxes is my problem please can anyone help me i need this very badly. code is down
thanks in advance.
<!doctype html>
<html>
<style>.selectdemoSelectHeader {
/* Please note: All these selectors are only applied to children of elements with the 'selectdemoSelectHeader' class */ }
.selectdemoSelectHeader .demo-header-searchbox {
border: none;
outline: none;
height: 100%;
width: 100%;
padding: 0; }
.selectdemoSelectHeader .demo-select-header {
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12);
padding-left: 10.667px;
height: 48px;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
width: auto; }
.selectdemoSelectHeader md-content._md {
max-height: 240px; }</style>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
</head>
<body ng-app = "myapp">
<div ng-controller="HelloController" class="md-padding" ng-cloak>
<div>
<h1 class="md-title">Pick a vegetable below</h1>
<div layout="row">
<md-input-container>
<label>Vegetables</label>
<md-select ng-model="selectedVegetables"
md-on-close="clearSearchTerm()"
data-md-container-class="selectdemoSelectHeader"
multiple>
<md-select-header class="demo-select-header">
<input ng-model="searchTerm"
type="search"
placeholder="Search for a vegetable.."
class="demo-header-searchbox md-text">
</md-select-header>
<md-optgroup label="vegetables">
<md-checkbox ng-model="selectedAll"ng-click="checkAll()" style="float:left">SelectAll/NONE</md-checkbox>
<md-option ng-value="vegetable" ng-repeat="vegetable in vegetables |
filter:searchTerm">{{vegetable}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
</div>
</div>
</div>
<script>
angular.module("myapp", ['ngMaterial'])
.controller("HelloController", function($scope,$element) {
$scope.vegetables = ['Corn' ,'Onions' ,'Kale' ,'Arugula' ,'Peas', 'Zucchini'];
$scope.searchTerm;
$scope.clearSearchTerm = function() {
$scope.searchTerm = '';
};
$element.find('input').on('keydown', function(ev) {
ev.stopPropagation();
});
});
</script>
</body>
</html>
I am trying to use meter tag to show battery power indicator. It works with hard coded value but does not work with $scope variable.Here is the jsfiddle
HTML
<div ng-app="app" ng-controller="main">
<div id="page-wrapper">
<p>
<meter min="0" max="4" low="1" high="3" optimum="4" value="2"></meter>
</p>
<p>
<meter min="0" max="4" low="1" high="3" optimum="4" value="value"></meter>
</p>
</div>
</div>
**JS*
angular.module("app", [])
.controller("main", ['$scope', function($scope) {
$scope.value = 2
}])
You have to use {{value}} to reflect the scope value.
So use,
value="{{value}}"
instead of
in value="value"
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<style>
.styled meter {
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 30px;
/* For Firefox */
background: #EEE;
box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
border-radius: 3px;
}
/* WebKit */
.styled meter::-webkit-meter-bar {
background: #EEE;
box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
border-radius: 3px;
}
.styled meter::-webkit-meter-optimum-value,
.styled meter::-webkit-meter-suboptimum-value,
.styled meter::-webkit-meter-even-less-good-value {
border-radius: 3px;
}
.styled meter::-webkit-meter-optimum-value {
background: #86CC00;
}
.styled meter::-webkit-meter-suboptimum-value {
background: #FFDB1A;
}
.styled meter::-webkit-meter-even-less-good-value {
background: #CC4600;
}
/* Firefox */
.styled meter::-moz-meter-bar {
border-radius: 3px;
}
.styled meter:-moz-meter-optimum::-moz-meter-bar {
background: #86CC00;
}
.styled meter:-moz-meter-sub-optimum::-moz-meter-bar {
background: #FFDB1A;
}
.styled meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: #CC4600;
}
button {
display: inline-block;
border-radius: 3px;
border: none;
font-size: 0.9rem;
padding: 0.4rem 0.8em;
background: #69c773;
border-bottom: 1px solid #498b50;
color: white;
-webkit-font-smoothing: antialiased;
font-weight: bold;
margin: 0 0.25rem;
text-align: center;
}
button:hover, button:focus {
opacity: 0.75;
cursor: pointer;
}
button:active {
opacity: 1;
box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;
}
</style>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="page-wrapper">
<p>
<meter min="0" max="4" low="1" high="3" optimum="4" value="4"></meter>
</p>
<p>
<meter min="0" max="4" low="1" high="3" optimum="4" value="{{value}}"></meter>
</p>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.value = 2
});
</script>
</body>
</html>
PLEASE RUN THE ABOVE SNIPPET
Here is a working DEMO
Some observations as per your fiddle :
You forgot to include AngularJS library in your fiddle.
To get the $scope value into the HTML . Use angular expression {{value}}
Change LOAD TYPE to No wrap - in <head> from onLoad in JAVASCRIPT section of the fiddle.
DEMO
As shown how do I enter my phone number through that keyboard.
I am trying but my method is overloading the previous button values.
So please can one help me how to do that...
I think we need to concatenate the buttons value. If I press button "1" the value in textfield should be "1", if I then press "2" the value in textfield should become "12".
everything works properly except these.
clear button it clears the textfield
angular.module('myApp', [])
.controller('MyCtrl', function($scope)
{
$scope.chandru = false;
$scope.noinput = "";
$scope.newNumber = true;
$scope.cleartext = function()
{
$scope.noinput = "";
};
$scope.hideshow = function(id)
{
$scope.chandru = true;
};
$scope.updateOutput = function(btn)
{
if($scope.noinput == "" || $scope.newNumber) {
$scope.noinput = btn;
$scope.newNumber = false;
} else {
$scope.noinput += String(btn);
}
};
});
.mainform {
background-color: #c0c0c0;
margin-right: 300px;
margin-bottom: 100px;
margin-top: 100px;
margin-left: 300px;
border-radius: 10px;
padding-left: 30px;
padding-bottom: 30px;
padding-top: 30px;
padding-right: 30px;
}
.Head {
color: #4169E1;
border-bottom: 2px solid #DC143C;
font-family: Righteous;
}
.inputprop {
border-radius: 5px;
border: 1px solid black;
height: 30px;
}
.classnumber {
border: 2px solid black;
border-radius: 5px;
padding-left: 10px;
margin-right: 5px;
width: 35px;
height: 30px;
font-size: 20px;
}
.classClear {
border: 2px solid black;
border-radius: 5px;
padding-left: 10px;
margin-right: 5px;
width: 70px;
height: 30px;
font-size: 20px;
}
.classOk {
border: 2px solid black;
border-radius: 5px;
padding-left: 10px;
margin-right: 5px;
width: 50px;
height: 30px;
font-size: 20px;
}
#buttondesign {
display: inline;
border: 2px solid black;
width: 40px;
height: 40px;
border-radius: 5px;
}
.clearbutton {
border: 2px solid black;
width: 60px;
height: 40px;
border-radius: 5px;
}
.okbutton {
border: 2px solid black;
width: 50px;
height: 40px;
border-radius: 5px;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8"/>
<title>My Task</title>
<link rel="stylesheet" type="text/css" href="styele.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="mainform">
<h1 class="Head"> SignUp</h1>
<div style="color: #4682b4; font-size: 20px;">
<center>
Enter mobile number:
<select class="inputprop">
<option value="IND(91)">IND(91)</option>
<option value="PAK(92)">PAK(92)</option>
<option value="SRL(93)">SRL(93)</option>
<option value="NUL(92)">NUL(92)</option>
</select>
<input class="inputprop"type="text" name="mobileno" value="{{noinput}}"
ng-model="noinput" placeholder="enter mobile number"/><br><br>
Press OK to send OTP
</center><br><br>
<center><div ng-init="num=['1','2', '3', '4', '5', '6', '7', '8', '9', '0']">
<div style="display: inline;"ng-repeat="item in num">
<button id="buttondesign" type="button" name="namebutton"
ng-click="updateOutput({{item}})">{{item}}</button>
</div>
<input class="clearbutton" type="button" value="Clear" ng-click="cleartext()"/>
<input class="okbutton"type="button" value="OK" ng-click="hideshow('second')"/>
</div>
</center>
</div>
</div>
</body>
</html>
you can put a ng-click="buttonPressed(number)" on each button.
<button ng-click="buttonPressed(1)>1</button>
<button ng-click="buttonPressed(2)>2</button>
<button ng-click="buttonPressed(3)>3</button>
...
So when you press a button it call this function.
Then in your controller you declare this function like this
var pressed = [];
$scope.buttonPressed = function(number){
pressed.push( number ) ;
console.log(pressed);
// to other stuff
}
I am new to angularjs and web development is already not my forte, but I did search for an answer to this issue and can't find anything.
I am using ng-repeat on a div displayed as inline-block. I'm getting weird top and bottom spacing. I have a screenshot here: https://www.dropbox.com/s/dt2jw4cyv609t5q/screenshot.png.
Here is the base html:
<html>
<head>
<title>Knock Admin V1.0</title>
<script type="text/javascript" src="/assets/js/angular.js"></script>
<script type="text/javascript" src="/assets/js/angular-route.js"></script>
<script type="text/javascript" src="/assets/ng/admin/app.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/ng/admin/css/style.css">
</head>
<body ng-app="admin">
<div id="sidebar">
Welcome
<br>Logout
</div>
<div id="view">
<div ng-view></div>
</div>
</body>
</html>
And the view template:
<h3>My Locations</h3>
<label for="filter">Filter:</label><input type="text" id="filter" ng-model="filter.input" />
<div id="locationCardCollection">
<div class="locationCard" ng-repeat="loc in locations | filter:filter.input" >
{{ loc.chain.name }} - {{ loc.name }} <br>
{{ loc.message }}
</div>
</div>
And lastly, the CSS:
body, div {
margin: 0;
padding: 0;
}
body{
background-color: #E4E4E4;
}
#view {
padding: 10px;
margin-left: 200px;
overflow: hidden;
}
#sidebar {
position: fixed;
height: 100%;
width: 200px;
background-color: #555555;
color: #FFFFFF;
}
div.locationCard {
background: #FFFFFF;
display: inline-block;
height: 400px;
width: 300px;
margin: 10px;
-webkit-box-shadow: 5px 5px 10px 1px #404040;
box-shadow: 5px 5px 10px 1px #404040;
}
div.locationCard.hover {
background-color: #FF0000;
}
I'm not doing anything tricky with formatting in the angular app code, so I'll leave that out unless otherwise requested. Can someone give me a hand here?
Thanks!
Added overflow: hidden to locationCard CSS.