any ideas how to have say a set url for iframe like mysite.com/ and then this input form would add the input field to the end like mysite.com/txtsrc?
<html>
<head>
<title>Blah.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme").src = document.getElementById("txtSRC").value;
}
</script>
</head>
<body>
<form>
Enter URL:
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<iframe id="myIfreme" src="" frameborder="0" marginwidth="0" scrolling="yes"></iframe>
</body>
</html>
so rather than user inputting the full src i want mysite.com/then the form input after that but so user would not have to put mysite.com/
thanks in advance
i have tried but failed anyone able to help?
Related
In Bootstrap I would to create a form with a pattern mandatory validation for the addresses, where the value must be:
"Free input text" + "5 numeric characters" (mandatory)
Example:
Rome - 65498
How to do that?
Demo:
https://jsfiddle.net/Lxv4f7qe/2/
Code:
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<form class="p-5" action="POST">
<label for="zip_code">Optional Spaces:</label>
<input type="tel" id="zip_code" name="zip_code" pattern="([A-Za-z]{4,60} ?- ?\d{5})?" title="Zip code"><br><br>
<label for="zip_code">Required Spaces:</label>
<input type="tel" id="zip_code" name="zip_code" pattern="([A-Za-z]{4,60} - \d{5})?" title="Zip code"><br><br>
<input type="submit">
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Here is a helpful link on the pattern matching html input attribute: https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute--cms-25145
This is my plunker url and code snippet:
http://plnkr.co/edit/lUB8pYKRn5JudhToxykj
<head>
<title>Event Registration</title>
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="underscore.js#*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script data-require="angular.js#1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<script data-require="twitter-bootstrap#3.2.0" data-semver="3.2.0" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link data-require="bootstrap#3.0.0" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link data-require="twitter-bootstrap#3.2.0" data-semver="3.2.0" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="font-awesome#4.7.0" data-semver="4.7.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="app.css" />
<script src="app.js"></script>
<script src="EventController.js"></script>
</head>
<div class="span0 well votingWidget">
<div class="votingButton">
<i class="icon-chevron-up icon-white"></i>
</div>
<div class="badge badge-inverse">
<div>{{session.upVoteCount}}</div>
</div>
<div class="votingButton">
<i class="icon-chevron-down"></i>
</div>
</div>
The icon-chevron-up, icon-chevron-down button wouldn't show up and bootstrap seems not working either.
So how to set it up right?
Thanks much!
Zhen
<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
<title>Event Registration</title>
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="underscore.js#*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script data-require="angular.js#1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="app.css" />
<script src="app.js"></script>
<script src="EventController.js"></script>
</head>
<div class="span0 well votingWidget">
<div class="votingButton">
<i class="icon-chevron-up icon-white"></i>
</div>
<div class="badge badge-inverse">
<div>{{session.upVoteCount}}</div>
</div>
<div class="votingButton">
<i class="icon-chevron-down"></i>
</div>
</div>
I need a program that includes two buttons to increase and decrease the number and display it
As well as storage and display number after close and open app
for storage data you can use angular-local-storage for get https://github.com/grevory/angular-local-storage
for load data use $scope.storageValue = localStorageService.get('StoreData');
for save data use localStorageService.set('StoreData',$scope.storageValue);
full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- save and load in Local -->
<script src="js/angular-local-storage.min.js"></script>
<script>
angular.module('app', ['ionic','LocalStorageModule'])
.controller('AppCtrl', function($scope, localStorageService) {
// save and load
$scope.storageValue = localStorageService.get('StoreData');
// add salavat
$scope.add=function(){
$scope.storageValue++;
localStorageService.set('StoreData',$scope.storageValue);
}
// sub salavat
$scope.sub=function(){
$scope.storageValue--;
localStorageService.set('StoreData',$scope.storageValue);
}
})
</script>
</head>
<body ng-app="app">
<ion-content>
<div style="height:100%; text-align:center" ng-controller="AppCtrl">
<div class="item item-icon-left" href="#">
<span>Number : {{storageValue}}</span> <br>
<button class="button button-positive" ng-click="add()">
+
</button>
<button class="button button-positive" ng-click="sub()">
-
</button>
</div>
</div>
</ion-content>
</body>
</html>
pic
I have installed all components and am trying out the various components mentioned in the CSS section of docs (http://ui.lumapps.com/css/buttons)
but the button get the shadow on hover, but do not ripple when clicked.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lumx Trial</title>
<!-- Head -->
<link rel="stylesheet" href="bower_components/lumx/dist/lumx.css">
<link rel="stylesheet" href="bower_components/mdi/materialdesignicons.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
</head>
<body>
<div class="mb">
<button class="btn btn--xs btn--blue btn--raised" lx-ripple>Button</button>
<button class="btn btn--s btn--blue btn--raised" lx-ripple>Button</button>
<button class="btn btn--m btn--blue btn--raised" lx-ripple>Button</button>
<button class="btn btn--l btn--blue btn--raised" lx-ripple>Button</button>
<button class="btn btn--xl btn--blue btn--raised" lx-ripple>Button</button>
</div>
<!-- Before body closing tag -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/velocity/velocity.js"></script>
<script src="bower_components/moment/min/moment-with-locales.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/lumx/dist/lumx.js"></script>
</body>
</html>
Sorry, My bad. I hadn't added the angular module!
I want my iFrame window to show the URL I enter from the Form Text box, To that I want the iframe src="" to be changed to the form field input. How can I do that? Here is a sample code that I intent to use.
<html>
<head>
<title>Blah.</title>
<link href="style.css"rel="stylesheet" type="text/css" />
</head>
<body>
<form>
Enter URL: <input type="text" />
<input type="submit" value="GO" />
</form>
<iframe src="" frameborder="0" marginwidth="0" scrolling="yes"></iframe>
</body>
</html>
Try this.
<html>
<head>
<title>Blah.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme").src = document.getElementById("txtSRC").value;
}
</script>
</head>
<body>
<form>
Enter URL:
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<iframe id="myIfreme" src="" frameborder="0" marginwidth="0" scrolling="yes"></iframe>
</body>
</html>