I am using go-gin and have a re-direct
c.Redirect(http.StatusMovedPermanently, myurl1).
Can I add a timer and call another re-direct once the first one completes in the same handler?
c.Redirect(http.StatusMovedPermanently, myurl1)
// sleep for 5 seconds
c.Redirect(http.StatusMovedPermanently, myurl2)?
Can I pause a handler's execution for a few seconds?
Simply put inside your page:
<meta http-equiv="refresh" content="5; url=http://example.com/" />
Another solution with javascript:
<script type="text/javascript">
setTimeout("location.href = 'http://example.com/';",5000);
</script>
your html logout page with 3-d party logout page inside
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="refresh" content="5; url=https://localhost:8080/login" />
<title>Test Layout</title>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
}
</style>
</head>
<body>
<div id="content">
<iframe width="100%" height="100%" frameborder="0" src="http://example.com/" />
</div>
</body>
</html>
If you want to redirect once the page is loaded, you have to do that in javascript.
The base of HTTP protocol is 1 query, 1 answer: "Get me this page" -> "Here it is".
You can't answer once to a query, and one second later and say "Oh, now you have to display this other page" (that's how the protocol was defined).
Therefore, if you want to redirect to another page after a short break, you have to insert a javascript call at the end of your file: Once the first redirection is done, then JS will execute itself, and you can put something like "Wait 5 seconds then call for this second page".
Related
I'm learning to develop a Firefox add-on. I've made a simple dev-tools tab with an input box. I'm finding that I can type every character into the input box with the exception of "/" or "'". A forward slash or single quote will not populate. Nothing appears in the input box when I type these characters.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
}
.warpath-search{
width:100%;
background-color:#fcfcfc;
border:1px solid #f0f1f2;
padding:.3em;
}
.warpath-search label{
width:100px;
display:inline-block;
}
.warpath-search input{
width:400px;
}
</style>
</head>
<body>
<div class="warpath-search">
<label>Xpath:</label><input type="text" name="warpath-xpath" id="warpath-xpath" />
</div>
<script src="devtools-panel.js"></script>
</body>
</html>
devtools-panel.js:
input = document.getElementById("warpath-xpath");
input.addEventListener("keyup", () => {
console.log(input.value);
});
Gif:
If I load the plugin's HTML file directly in the browser I can enter the characters but when it is loaded as a plugin it's blocked.
Using Firefox: 70.0.1 (64-bit)
The problem seems to have something to do with a Firefox type-ahead feature. The following steps resolved the issue for me:
Open about:config in the browser
Click "I accept the risk"
Search for "accessibility.typeaheadfind.manual"
Change the value of this key from "true" to "false"
My question is whether the following is a good pattern for Polymer?
The other purpose for my posting is to show how to handle events and access bound values from Polymer elements in the mainline of your html. I couldn't find good examples and it took me some time to get my head around how this should work so hopefully it is of use to others (assuming I have it right!)
I recognize that I could encapsulate the entire handling within a new Polymer element but sometimes this seems a bit awkward.
Note if you want try this code you will need to update the references to the Polymer elements.
<!--
Use the template tag to wrap your Polymer elements with data binding: Will Hopkins
-->
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>paper-input</title>
<!--
Update the following script and links to reflect your Polymer element locations
-->
<script src="/polymer/platform/platform.js"></script>
<link href="/polymer/font-roboto/roboto.html" rel="import">
<link href="/polymer/paper-input/paper-input.html" rel="import">
<link href="/polymer/paper-button/paper-button.html" rel="import">
<style shim-shadowdom>
body {
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
margin: 0;
padding: 24px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
}
paper-input.narrow {
width: 150px;
}
</style>
</head>
<body unresolved>
<section>
<!--
OK here is the secret sauce. Wrap your Polymer tags with the template tag, give it and id and specify auto binding
-->
<template id="user-maintenance" is="auto-binding">
<div><paper-input label="ID" floatinglabel=true type=number value="{{iD}}"></paper-input></div>
<div><paper-input label="First Name" id="firstName" floatinglabel=true value="{{firstName}}"></paper-input></div>
<div><paper-input label="Last Name" floatinglabel=true value="{{lastName}}"></paper-input></div>
<div><paper-input label="Blurb" floatinglabel=true multiline maxrows=5 value="{{blurb}}"></paper-input></div>
<div><paper-input label="Concurrency Control"value="{{conControl}}" disabled></paper-input></div>
<br>
<p>id: {{iD}}, First Name: {{firstName}}, Last Name: {{lastName}}, Blurb: {{blurb}}, Concurrency Control: {{conControl}}</p>
<div>
<paper-button raised id="createButton" on-tap="{{createClicked}}">Create</paper-button>
<paper-button raised id="retrieveButton" on-tap="{{retrieveClicked}}">Retrieve</paper-button>
<paper-button raised id="updateButton" on-tap="{{updateClicked}}">Update</paper-button>
<paper-button raised id="deleteButton" on-tap="{{deleteClicked}}">Delete</paper-button>
</div>
</template>
</section>
<script>
//
// OK now lets get a handle to our template
//
var inlineBinding = document.getElementById('user-maintenance');
// now we can set an input value
inlineBinding.conControl = 13;
// and handle events
inlineBinding.createClicked = function() {
// and retrieve values
alert("Create fired for: " + inlineBinding.firstName + " " + inlineBinding.lastName);
};
inlineBinding.retrieveClicked = function() {
alert("Retrieve fired for: " + inlineBinding.firstName + " " + inlineBinding.lastName);
};
inlineBinding.updateClicked = function() {
alert("Update fired for: " + inlineBinding.firstName + " " + inlineBinding.lastName);
};
inlineBinding.deleteClicked = function() {
alert("Delete fired for: " + inlineBinding.firstName + " " + inlineBinding.lastName);
};
</script>
</body>
This is perfectly fine and something we show off in the docs: https://www.polymer-project.org/docs/polymer/databinding-advanced.html#bindingoutside
<template is="auto-binding"> is in fact a custom element :), so you shouldn't shy away from it. The only thing it doesn't do (compared to <polymer-element> is <prop>Changed() handlers).
I have a jsfiddle here to illustrate my question
http://jsfiddle.net/ttmt/DgnLd/1/
It's just a simple button with a hidden div. The button slide toggles the hidden div.
I would like to have div filled with a random color each time it opens.
At the moment it's picking two random colors - when the div is opening and when the finished opening.
How can I stop the second color and just have one.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<style type="text/css">
•{
margin:0;
padding:0;
}
#wrap{
margin:20px;
}
#btn{
width:100px;
height:50px;
background:red;
color:white;
padding:10px;
margin:0 0 50px 0;
}
#infoDiv{
width:500px;
height:300px;
display:none;
}
</style>
</head>
<body>
<div id="wrap">
CLICK
<div id="infoDiv">
</div>
</div>
<script>
$(document).ready(function(){
alert('here');
var color_arr = ['#6faab6','#80c3d1','#888888','#d8e420','#21b4e4','#e4b115','#33ace4'];
$('#infoDiv').hide();
$('#btn').bind('click', function(){
$('#infoDiv').slideToggle('slow', function(){
var ranNum = Math.floor(Math.random()*color_arr.length);
var col = color_arr[ranNum];
$('#infoDiv').css({'background': col});
});
});
});
</script>
</body>
</html>
$(document).ready(function(){
var color_arr = ['#6faab6','#80c3d1','#888888','#d8e420','#21b4e4','#e4b115','#33ace4'];
$('#infoDiv').hide();
$('#btn').bind('click', function(){
var ranNum = Math.floor(Math.random()*color_arr.length);
var col = color_arr[ranNum];
$('#infoDiv:hidden').css({'background': col});
$('#infoDiv').slideToggle('slow');
});
});
Try that -- I've moved your Random color picker out of the SlideToggle callback as that will only run once the slide was finished which from your question I assumed you didn't want.
It also only changes the color of the info div if it's hidden by checking the visible selector, you can read more about that here
Let me know if that works for you
I've created a PHP file named maps.php that contains a simple Google Maps API that works on the iPad's default browser.
But when I call it using Ajax, the page loads itself but not the map. If I open the link in a desktop or mobile browser it works fine.
You can show google maps by accessing google's javascript api.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Or you can load any php page directly in webView by using window.location="http://www.mourady.me/alhokair/iphone/maps.php" javascript method, as your php page contain google map in canvas tag, you can not load that in div through ajax call, better way used iframe tag to the job.
<html>
<body onload="bodyload()">
<button onclick="bodyload()">Ajax call</button>
<iframe id="mapDiv" height=500px width=700px src="http://www.mourady.me/alhokair/iphone/maps.php"></iframe>
</body>
</html>
Is this possible ? like I have this phrase on a textbox:
"I went home"
then when I click "home" an options box shows up like:
"I entered home"
|garden|
| motel|
|______|
sorry for my ugly way to show it, couldn't think about anything better lol
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#fieldName").focus(function(){
var el = $(this);
var coords = el.offset();
var div = $("<div>").addClass("dropdown").html("<span>garden</span><span>motel</span>").css({"top":coords.top+18+"px","left":coords.left+45+"px"});
el.after(div);
$(".dropdown span").click(function(){
var newText = "I entered the " + $(this).text();
$("#fieldName").val(newText);
$("div.dropdown").remove();
});
});
});
</script>
<style>
.text {width:120px;}
.dropdown {width:75px; text-align:right; position:absolute; padding:2px; background:#eee; border:1px solid #aaa;}
.dropdown span {display:block; cursor:pointer;}
</style>
</head>
<body>
<input type="text" class="text" name="fieldName" id="fieldName" value="I entered the home" />
</body>
</html>
You'll need a copy of jquery (or point to Google's CDN of it) for this to work. This example's pretty primitive, but hopefully it'll get you where you want to go.