<!DOCTYPE html>
<html>
<head>
<title>jQuery Dialog Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
</head>
<script>
$(document).ready($(function() {
//Dialog box
$("#dialog").dialog({
autoOpen: false
});
//button to open dialog box
$("#button").click(function(event) {
$("#dialog").dialog("open");
});
});
</script>
<body>
//div containing info about the dialog box
<div id="dialog">
<p>This is supposed to be a calculator</p>
</div>
<input id="button" type="submit" value="Open">
</body>
</html>
Change $(document).ready($(function() { to $(document).ready(function() {
and also check if the braces are properly closed
Related
I just want to click over the iframe or visit the iframe content on/after button click.
Please provide me a javascript code.
I have tried
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<iframe id="frm" src="https://example.com"></iframe>
<button id="btn">Click Here</button>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>
$("#btn").on('click', function() {
window.location.href=this.frm;
});
</script>
</body>
</html>
Can I get an array that contains references to the fields in a form (like input, textarea, etc.) and in my code run a function on them, like addClass()?
To explain what I want to do - after the user submits the form (and invokes the submit() function in the controller) I want to add a red border color on the invalid input.
ng-class="{'has-error':form.input.$invalid}"
But this isn't working
You can add a condition on your input like ng-class="{'has-error':yourFormName.$submitted&&yourFormName.yourInputName.$invalid}"
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.val={};
});
.has-error{
border-color:red;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-require="angular.js#1.5.x" data-semver="1.5.11"></script>
</head>
<body ng-controller="MainCtrl">
<form name="myForm" novalidate>
<div style="padding: 10px">
<input name="Hazmat" ng-model="val.type" required ng-class="{'has-error':myForm.$submitted&&myForm.Hazmat.$invalid}">
<p ng-show="myForm.$submitted">
<span ng-show="myForm.Hazmat.$error.required">Required</span>
</p>
</div>
<button>Submit</button>
</form>
</body>
</html>
I have an angular material slider that needs to reside inside a div with a dir="rtl" style. However, when ever I add the dir="rtl" tag the slider is getting all messed up (the mouse isn't capturing it correctly and coloring is not accurate).
Here's a full HTML example of the problem:
<html>
<head>
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css">
</head>
<body>
<div ng-app="MyApp" ng-controller="AppCtrl" dir="rtl">
<md-slider min="0" max="255" ng-model="value" aria-label="red" id="red-slider">
</md-slider>
Value: {{value}}
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
<script>
angular.module('MyApp', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
});
</script>
</body>
I've tried changing the direction of the slider itself and placing it inside another div dir="ltr" but without success.
<html>
<head>
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css">
<style>
[dir=ltr] md-slider .md-thumb {
left: auto;
right: auto;
}
[dir=ltr] md-slider .md-thumb-container {
left: 0;
right: auto;
}
</style>
</head>
<body>
<div ng-app="MyApp" ng-controller="AppCtrl" dir="rtl">
<div dir="ltr">
test
<md-slider min="0" max="255" ng-model="value" aria-label="red" id="red-slider">
</md-slider>
</div>
Value: {{value}}
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
<script>
angular.module('MyApp', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
});
</script>
</body>
when you override this class it seems to work
I am trying to make a simple login page with dojo, I have a button at the moment but it doesn't use the dojo theme. The css works when I copy everything from the theme of claro and make a local css file but it doesn't work when i try to load it from the link.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Button test</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css ">
</head>
<script src="lib/dojo/dojo.js"></script>
<body class="claro">
<script>
require(["dijit/form/TextBox", "dijit/form/SimpleTextarea", "dojo/parser", "dojo/domReady!"]);
</script>
</body>
<body class="claro">
<button id="Button" data-dojo-type="dijit/form/Button"
data-dojo-props="
iconClass: 'dijitIconNewTask',
showLabel: false,
onClick: function(){ console.log('Second button was clicked!'); }">
Login
</button>
</html>
when i click on a button in parent window a pop up which is in hidden div tag must be displayed in the iframe that is loaded in the page....i dont understand where i have gone wrong so please help me out
<html>
<head>
<title>The iframe</title>
<SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
return false;
}
//-->
</SCRIPT>
</head>
<body>
<div id="popup"style="visibility:hidden;"><strong><h1>POPUP</strong></h1>
<A
HREF="inframe.html"
onClick="return popup(this, 'notes')">click me</A>
</div>
<body>
</html>