thanks for reading my question.
I want to add this function in my website:
When the visitor type in the address bar this:
zicher.mx/beer
automaticaly redirect to: this url:
https://zicher.mx/index.php?buscar=beer
is it posible?
Please apologize my English and thanks in advance.
I don't know how exactly I need to search in google or stackoverflow to find this redirection feature.
This shouldn't be a permanent solution, but you can send something like this to make the client redirect to a new page (btw it's untested):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="1;url=https://zicher.mx/index.php?buscar=<?php echo $_SERVER[REQUEST_URI]; ?>" />
<script>
var x = document.createElement("p");
x.innerHTML = 'Click here to search for ' + location.href.replace("zicher.mx/", "") + ".";
document.body.appendChild(x);
</script>
</head>
<body>
</body>
</html>
Related
Just struggling to get the Attach addon working. The main xterm (4.4.0) comes up fine, but the Chrome browser Javascript console reports 'Uncaught TypeError: AttachAddon is not a constructor' when I try to reference the addon. The webserver is golang/echo, and I pull in the xterm.js and xterm-addon-attach.js from the packages as follows:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="xterm.css" />
<script src="xterm.js"></script>
<script src="xterm-addon-attach.js"></script>
</head>
<body>
<div id="terminal"></div>
<script>
var term = new window.Terminal();
term.open(document.getElementById('terminal'));
ws = new WebSocket('ws://example.net:8080/ws')
const attachAddon = new AttachAddon(ws);
term.loadAddon(attachAddon);
</script>
</body>
</html>
Can anyone help to point out what I've done wrong?
Also the examples in the docs where I took this from doesn't have the term.open() call, so how would the Terminal instance know what element to attach to? Eg at https://github.com/xtermjs/xterm.js/tree/master/addons/xterm-addon-attach
Many thanks in advance
Andy
Update:
I changed the HTML to include the import statements, as follows:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="xterm.css" />
<script src="xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script type="module">
import { AttachAddon } from "./xterm-addon-attach.js";
var term = new window.Terminal();
term.open(document.getElementById('terminal'));
ws = new WebSocket('ws://boundstone.dynamic-dns.net:8080/ws');
const attachAddon = new AttachAddon(ws);
term.loadAddon(attachAddon);
</script>
</body>
</html>
but the Chrome console now reports: "The requested module './xterm-addon-attach.js' does not provide an export named 'AttachAddon'". The webserver serves the script with content type application/javascript, and the Chrome console recognises the structure of the AttachAddon as a Webpack it seems.
I'm afraid I'm not familiar as I clearly should be with JS modules. The web server for my project is not (and can't be) Node, but does that make a difference?
Many thanks in advance
Andy
This is what worked for me. The only thing you have to do is use AttachAddon twice as shown below using the OP's example. That's the only trick to getting it working. I am also using the fit addon and it was the same thing with that.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="xterm.css" />
<script src="xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script>
var term = new window.Terminal();
term.open(document.getElementById('terminal'));
ws = new WebSocket('ws://boundstone.dynamic-dns.net:8080/ws');
const attachAddon = new AttachAddon.AttachAddon(ws);
term.loadAddon(attachAddon);
</script>
</body>
I've specified my Redirect URI in my account setup, but I'm not sure about where to specify it in my code.
I'm using the "sign in with google" button, and I'm able to sign in, but the redirect_uri that I'm always seeing when I use fiddler is the same URI that I'm posting to. I'd like to have a different one.
I'm sure this has to do with me not looking in the right place for instructions, as I'm new to OpenID connect. I thought setting the meta tag would do the trick if the URI matched the redirect_uri I'd listed in my registered redirect URIs.
Here's my HTML page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="xxxxxxxxxxxxxx-yyyyyyyyyyyyyyyyyy.apps.googleusercontent.com">
<meta name="google-signin-redirect_uri" content="https://www.apple.com">
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<script>
function onSignIn(googleUser) {
// Useful data for your client-side scripts:
var profile = googleUser.getBasicProfile();
console.log("ID: " + profile.getId()); // Don't send this directly to your server!
console.log("Name: " + profile.getName());
console.log("Image URL: " + profile.getImageUrl());
console.log("Email: " + profile.getEmail());
// The ID token you need to pass to your backend:
var id_token = googleUser.getAuthResponse().id_token;
console.log("ID Token: " + id_token);
};
</script>
</form>
</body>
</html>
To make use of redirect_uri you have to declare it as g-signin2 data parameter and explicitly request accesstype = offline.
<div class="g-signin2"
data-onsuccess="onSignIn"
data-scope="https://www.googleapis.com/auth/plus.login"
data-accesstype="offline"
data-redirecturi="https://www.example.com/redirect_uri"></div>
This way access code will be sent to requested uri. Detailed docs for server side flow.
I have a jQuery Mobile page with a dynamically generated collapsible. It works great, except if I leave the page then return to it. When that happens, the collapsible appears twice. A refresh fixes the issue but that's obviously not a good solution. Others on here have described similar symptoms, but their solutions didn't work for me. I'm hoping someone can help me out. I think I may be misusing pageinit...
I'm using jQuery 1.9.1 with jQuery Mobile 1.3.1. I'm using Codiqa to generate my pages, hence why I'm on jQuery 1.3.1. I generated the code such that every page is a separate html file.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Characters | PCT</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="css/codiqa.ext.css" rel="stylesheet">
<link href="css/jquery.mobile-1.3.1.css" rel="stylesheet">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.mobile-1.3.1.js"></script>
<script src="js/codiqa.ext.js"></script>
<script src="http://www.parsecdn.com/js/parse-1.2.15.min.js"></script>
<script src="js/pct.js"></script>
</head>
<body>
<div data-role="page" data-control-title="Characters" id="characters"
class="character_page">
<script>
$(document).on("pageinit", "#characters", function() {
var charQuery = new Parse.Query("Character");
charQuery.equalTo("user", Parse.User.current());
charQuery.find({
success: function(results) {
for (var j = 0; j < results.length; j++) {
var object = results[j];
var charName = object.get('charName');
var charNumActions = object.get('charNumActions');
var charSpd = object.get('charSpd');
$("#char_list").append("<div data-role='collapsible'><h4> " +
charName + "</h4><p><strong>Number of Actions:</strong> " +
charNumActions + "</p><p><strong>Spd:</strong> " + charSpd + "</p>
<a data-role='button' class='edit_button'
href='edit_character.html?charname=" + charName + "' data-icon='edit'
data-iconpos='left'>Edit</a><a data-role='button'
id='delete_char_button' class='delete_button' data-inline='true'
data-icon='delete' data-iconpos='left'>Delete</a></div>");
$("#char_list").collapsibleset("refresh");
$(".edit_button").buttonMarkup();
$(".delete_button").buttonMarkup();
}
}
});
});
</script>
<div data-theme="a" data-role="header">
Thank you in advance for taking the time to look at this.
Update:
Based on your edited OP and comment below, when using single page model, functions/JS code that is related to a specific page should be placed inside that page's div.
jQuery Mobile uses Ajax to load pages, it loads all libraries and code of first loaded page's head tag, and neglects the rest as it loads only data-role="page" div.
<div data-role="page" id="characters">
<script>
<!-- place code here -->
</script>
</div>
Because you bind to pageinit without specifying a page. The code will be executed whenever a page is initiated.
You should bind it to page id to fire once only.
$(document).on("pageinit", "#page_id", function () {
// code
});
I am making a website for a hotel. And the contact/booking form should contain a text field so that the user can write his/her country/city of origin.
I would like to implement a kind of geotracking, geolocalization or something that allow me to get the country/city of origin and use that information in a form's field so that the field's contents will be delivered with the rest of the information via email.
I have tried the code as in this website http://www.maestrosdelweb.com/util/geo/geo.html, whose code I place here:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><script type="text/javascript">
//<![CDATA[
try{if (!window.CloudFlare) { var CloudFlare=[{verbose:0,p:0,byc:0,owlid:"cf",mirage:{responsive:0,lazy:0},oracle:"35/0f710f6add20ad3fc449c08c96bdf2",paths:{cloudflare:"/cdn-cgi/nexp/aav=366183412/"},atok:"3ef00aeff8d6c935da4e270822a8471b",zone:"maestrosdelweb.com",rocket:"0",apps:{"ga_key":{"ua":"UA-309831-1","ga_bs":"2"}}}];var a=document.createElement("script"),b=document.getElementsByTagName("script")[0];a.async=!0;a.src="//ajax.cloudflare.com/cdn-cgi/nexp/aav=4114775854/cloudflare.min.js";b.parentNode.insertBefore(a,b);}}catch(e){};
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
window.__CF=window.__CF||{};window.__CF.AJS={"ga_key":{"ua":"UA-309831-1","ga_bs":"2"}};
//]]>
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="robots" content="noindex,follow"/>
<title>Geolocalizacion con HTML5</title>
<link rel="shortcut icon" href="/favicon.ico"/>
<style type="text/css">img{border:0}</style>
<script type="text/javascript">
/* <![CDATA[ */
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-309831-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
(function(b){(function(a){"__CF"in b&&"DJS"in b.__CF?b.__CF.DJS.push(a):"addEventListener"in b?b.addEventListener("load",a,!1):b.attachEvent("onload",a)})(function(){"FB"in b&&"Event"in FB&&"subscribe"in FB.Event&&(FB.Event.subscribe("edge.create",function(a){_gaq.push(["_trackSocial","facebook","like",a])}),FB.Event.subscribe("edge.remove",function(a){_gaq.push(["_trackSocial","facebook","unlike",a])}),FB.Event.subscribe("message.send",function(a){_gaq.push(["_trackSocial","facebook","send",a])}));"twttr"in b&&"events"in twttr&&"bind"in twttr.events&&twttr.events.bind("tweet",function(a){if(a){var b;if(a.target&&a.target.nodeName=="IFRAME")a:{if(a=a.target.src){a=a.split("#")[0].match(/[^?=&]+=([^&]*)?/g);b=0;for(var c;c=a[b];++b)if(c.indexOf("url")===0){b=unescape(c.split("=")[1]);break a}}b=void 0}_gaq.push(["_trackSocial","twitter","tweet",b])}})})})(window);
/* ]]> */
</script>
</head>
<body onload="detectar()">
<h1>Ejemplo de geolocalizacion basado en HTML5</h1>
<div id="mapa">
</div>
<script src="http://code.google.com/apis/gears/gears_init.js" type="text/javascript" charset="utf-8"></script>
<script src="geo.js" type="text/javascript" charset="utf-8"></script>
<script language="javascript">
function detectar(){
if(geo_position_js.init())
{
document.getElementById('mapa').innerHTML="Leyendo...";
geo_position_js.getCurrentPosition(mostra_ubicacion,function(){document.getElementById('mapa').innerHTML="No se puedo detectar la ubicación"},{enableHighAccuracy:true});
} else {
document.getElementById('mapa').innerHTML="La geolocalización no funciona en este navegador.";
}
}
function mostra_ubicacion(p){
var coords = p.coords.latitude + "," + p.coords.longitude;
document.getElementById('mapa').innerHTML="<p>latitud="+p.coords.latitude.toFixed(2)+" longitud="+p.coords.longitude.toFixed(2) + "</p>"
+"<img src=\"http://maps.google.com/maps/api/staticmap?center="+coords+"&maptype=hybrid&size=400x400&zoom=12&markers=size:mid|"+coords+"&sensor=false\" alt=\"mapa\"/>";
}
</script>
</body>
</html>
Nevertheless, this code returns a map with the user's geographic coordinates (latitude/longitude).
Is it there an easy way to determine this and use that information in a form's field?
Thanks in advance.
Another stackoverflow question talked about a webservice that allows for geolocation based on IP address
You could use this to implement a server-side solution that generates the markup with their location filled in.
The old fashioned (and still prevalent!) way is to do a reverse lookup of the client IP address :)
The HTML5 geolocation API will get you the user's latitude and longitude (assuming they opt in). If you need to get info such as the city, country, or postal code, you'll need to use a reverse-geocoding web service. There are plenty of those out there:
Google
Bing
etc
So take your pick... just make sure to look at the terms & conditions and be sure you won't be in violation once the site goes live.
You should be able to find code samples by googling around a bit, it's a fairly common use case. The steps will be:
Get the user's lat/lng with your existing code.
Make an AJAX (JSONP) call to request the reverse-geocode (use your Geocode provider to figure out what URL to use. eg, for Google it is like this).
Parse the JSON response to extract the info you need (country, city).
I have a website with a database of users and I would like to allow them to display on their profile page their current tweet message (if they have a Twitter account).
After searching, I had seen this tool: http://juitter.com
It seems to be a little bit complex for just my needs.
I am working with Rails. Do you know a tool as simple as possible which can do that?
Thank you
D
You may look at the twitter api: users/show
Example:
$ curl http://twitter.com/users/show/20536157.json
{"notifications":false,"time_zone":"Pacific Time (US &
Canada)","friends_count":214,
"profile_sidebar_border_color":"bbccff","url":"http://www.google.com/support/",
"description":"News and updates from Google","status":{"created_at":"Mon Jan
11 19:38:40 +0000
2010","source":"web","truncated":false,"favorited":false,
"in_reply_to_user_id":null,
"in_reply_to_status_id":null,"in_reply_to_screen_name":null,"id":7640306427,
"text":"If
you're interested in what's happening with #google in Sub-Saharan Africa,
check out the new #googleafrica for news &
info."},
"geo_enabled":false,"favourites_count":73, "created_at":"Tue Feb 10
19:14:39 +0000 2009","profile_text_color":"000000","verified":false,
...
}
You can get the last tweet with a simple jquery call:
<!DOCTYPE html>
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1");</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$.getJSON("http://twitter.com/users/show/20536157.json",
function(data){ $("#tweet").text(data.status.text); });
});
</script>
</head>
<body>
<div id="tweet"><!-- last status will show up here --></div>
</body>
</html>
Take a look at the twitter gem. It's super simple to use.
mikus answer didn't work for me, I got
XMLHttpRequest cannot load http://twitter.com/users/show/ditact.json. Origin http://mydomain.com is not allowed by Access-Control-Allow-Origin.
I found the answer in Accessing JSON service from localhost or file://
One way to get around the same origin policy is to load JSONP instead of JSON.
You can do this with the twitter API and jQuery, you just have to add "callback=?" the URL.
<!DOCTYPE html>
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1");</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// vvvvvvvvvvv
$.getJSON("http://twitter.com/users/show/20536157.json?callback=?",
// ^^^^^^^^^^^
function(data){ $("#tweet").text(data.status.text); });
});
</script>
</head>
<body>
<div id="tweet"><!-- last status will show up here --></div>
</body>
</html>