My web page has no «meta» viewport tag absolutely.
I have created my own «meta» viewport tag dynamically:
var viewportMeta = document.createElement('meta');
viewportMeta.setAttribute('id', 'myMeta');
viewportMeta.setAttribute('name', 'viewport');
viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=no');
and appended it to the «head» (after some user actions):
document.head.appendChild(viewportMeta);
Then (after user clicks on some button) I need to remove "myMeta" «meta» tag from «head»:
var myMeta = document.getElementById('myMeta');
document.head.removeChild(myMeta);
And it removes, 100%! Checked with desktop browser and with Adobe Edge Inspect Weinre on iPad.
But the whole page does not go to it's previous state! Whole page stays the same, like it has «meta» viewport tag with all defined properties in "viewportMeta" object.
So, is there a way to remove «meta» viewport tag completely? Any ideas?
(This issue is on iPad's Safari and Chrome browsers. Tried not to remove «meta» tag but just changed it's «content» property — no success. Did not checked on Android devices and browsers.)
You should restore the original value of viewport meta tag
<html>
<head>
<title>test dynamic view port</title>
</head>
<body>
<button id="turnOn">on</button>
<button id="turnOff">off</button>
<script type="text/javascript">
function turnOnDeviceViewport() {
removeMetaIfExist();
var viewportMeta = document.createElement('meta');
viewportMeta.setAttribute('id', 'myMeta');
viewportMeta.setAttribute('name', 'viewport');
viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=no');
document.head.appendChild(viewportMeta);
alert("click");
}
function turnOffDeviceViewport() {
removeMetaIfExist();
var viewportMeta = document.createElement('meta');
viewportMeta.setAttribute('id', 'myMeta');
viewportMeta.setAttribute('name', 'viewport');
viewportMeta.setAttribute('content', 'width=980, user-scalable=yes');
document.head.appendChild(viewportMeta);
alert("click");
}
function removeMetaIfExist() {
var metaElement = document.getElementById("myMeta");
if (metaElement) document.head.removeChild(metaElement);
alert("removed");
}
document.getElementById("turnOn").addEventListener("click", turnOnDeviceViewport, false);
document.getElementById("turnOff").addEventListener("click", turnOffDeviceViewport, false);
</script>
</body>
You can find details about viewport meta default values on Apple's developer website:
Safari HTML Reference: Supported Meta Tags
EDIT: the default viewport value "width=980, user-scalable=yes" might not be the same for all devices and browsers so for a complete solution you will need to identify the browser you are running on and set the default value accordingly
Related
Alright StackOverflow, I've got a weird one today. I am working on adding pasting of images to a website. It works for Firefox and Chrome but fails for IE. When I turn on the debugger it gives an error on:
var items = event.clipboardData.items;
saying that event.clipboardData.items is undefined. What is the way to do this in IE?
Here is the code which actually comes from the WebKit layout tests:
<!DOCTYPE html>
<html>
<head>
<script>
function paste(event){
var items = event.clipboardData.items;
console.log(items.length);
for (var i = 0; i < items.length; ++i) {
if (items[i].kind == 'file' && items[i].type == 'image/png') {
var blob = items[i].getAsFile();
var url = window.URL.createObjectURL(blob);
document.getElementById('dest').src = url;
}
}
}
window.onload = function (e) {
document.body.onpaste = paste;
}
</script>
</head>
<body contenteditable="true">
<img id="dest">
</body>
</html>
The specific workflow I'm trying to allow is for a user to use the Snipping Tool to take a snapshot and to then paste that image into IE. Normally I would tell the user to use Chrome or Firefox but this is for work and we are restricted to IE. Thanks for the help!
My testing Environment:
Windows 8 64bit
IE 10
This is a really old issue, but copying an image from snipping tool to IE10 is simply not possible. The functionality is added in Edge. IE10 does not have the tools to paste images from clipboard.
I have been looking for a simple way to allow a similar functionality to the built-in Image Viewer (Zooming in and out of an image with 2 fingers, pinch zoom / zoom out, and the floating effect, if someone gently pushes an image in one of the directions).
Initially I was trying to achieve it with the Image control, but It turned out to be extremely difficult.
I decided to go with the Webbrowser control, as it seemed to offer just what I need and it had a benefit of clipping it's content to the parent container ( an Image control wouldn't do that by default ).
I placed the Webbrowser control in the second Row of a 2-row parent Grid container (Its basically the default Page generated by Visual Studio)
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
<toolkit:PerformanceProgressBar x:Name="ProgressBar" IsIndeterminate="True" />
<phone:WebBrowser Visibility="Collapsed" x:Name="BrowserWindow" IsScriptEnabled="True" />
</Grid>
The C# code backing the View is this:
public partial class ItemDetailView : PhoneApplicationPage
{
public static string HtmlTemplate =
#"<!doctype html>
<html>
<head>
<meta name='viewport' content='initial-scale=0.1,minimum-scale=0.1,user-scalable=yes,width=480' />
<title></title>
<script type='text/javascript'>
function imageLoadFailed() {{
window.external.notify('ImageLoadFailed');
}}
</script>
</head>
<body style='margin:0; padding:0; width:100%; background-color: {0};'>
<div style='margin:0 auto;'><img onerror='imageLoadFailed()' src='{1}' alt='' /></div>
</body>
</html>";
public ItemDetailView() {
InitializeComponent();
this.BrowserWindow.LoadCompleted += (s, e) => {
this.ProgressBar.IsIndeterminate = false;
this.BrowserWindow.Visibility = Visibility.Visible;
};
this.BrowserWindow.ScriptNotify += (s, e) => {
if (e.Value == "ImageLoadFailed") {
MessageBox.Show("Image failed to load");
}
};
}
public ItemDetailViewModel VM {
get {
return this.DataContext as ItemDetailViewModel
}
}
public bool IsBackgroundBlack() {
return Visibility.Visible == (Visibility)Resources["PhoneDarkThemeVisibility"];
}
protected override void OnNavigatedTo(NavigationEventArgs e) {
base.OnNavigatedTo(e);
App app = App.Current as App;
this.VM.Item = app.CurrentItem;
string css = "";
if (this.IsBackgroundBlack()) {
css = "black";
}
else {
css = "white";
}
this.BrowserWindow.NavigateToString(string.Format(ItemDetailView.HtmlTemplate, css, app.CurrentItem.Url));
}
}
As you may see, I set the width to 480 in the Viewport meta tag. This is the only value that is close enough to center the image so it appears naturally as if placed in an Image control (it fits within the width of the phones screen and is scaled appropriately)
I tried to set the viewport meta tag width property to 'device-width', but with this setting, the image reaches beyond the phones screen width upon initial load.
I also have noticed that with width set to 480, if a user taps on the Web browser for the first time, the browser centers the image a little bit, so 480 is not a perfect value. I am also concerned that this may not be the greatest solution given multiple screen sizes of other devices.
I am curious, if there is a cross-device way to center the image in the web browser control.
Reference Image:
Left Image - What I want, and what it more or less looks like with Viewport meta tag's width=480 (Entire image is seen)
Right Image - What it looks like with Viewport meta tag's width=device-width;
(A single tap is needed to zoom out and position it in the center like the left image)
It appears that there is no need for setting the meta tag at all (it just caused trouble in my case)
the html template:
<!doctype html>
<html>
<head>
<title></title>
<script type='text/javascript'>
function imageLoadFailed() {
window.external.notify('ImageLoadFailed');
}
</script>
</head>
<body style='background-color: {0};'>
<img width='100%' onerror='imageLoadFailed()' src='{1}' alt='' /></div>
</body>
</html>
does the trick
I am trying to use the galleria photo gallery.
Issue: The theme loading code
Galleria.loadTheme('/galleria/themes/classic/galleria.classic.min.js'); works fine only when we are using it in the default action of home controller i.e. Home/Index
I was using the theme on a View called Display. so i wrote an action in Home to return Display view.
The images must be showing in the Galleria theme photo viewer, but they show up as images one after other instead.
If i try and call the display view from Index action, it works fine. but i want to do something else in the Index view.
any help will be greatly appreciated.
The theme script does not seem to be loading. The cause can be a virtual path issue.
I´m used to use the Galleria plugin in this way:
<script src="#Url.Content("~/Scripts/JQuery.Galleria/1.2.5/galleria-1.2.5.min.js")" type="text/javascript"></script>
<script type="text/javascript">
var virtualPath = '#Url.Content("~/")';
$(document).ready(function () {
Galleria.loadTheme(virtualPath + '/Scripts/jQuery.Galleria/1.2.5/themes/twelve/galleria.twelve.min.js');
// Initialize Galleria
$('#galleria').galleria({ autoplay: false, /* true, miliseconds */
thumbnails: true, /*true, false, numbers, empty */
imageCrop: true, /*true, false, height, width */
transition: "pulse", /*fade, fadeslide, slide, flash, pulse */
trasitionSpeed: 500,
thumbFit: true
});
});
</script>
Hope this helps.
I'm working on my first GM script, to replace the Flash previews on http://www.freesound.org with HTML 5 audio tags, and to add a download link to search results. I have the latter working fine, but I can't get the audio tag to display in Firefox 3.5.9. Here's my script:
// ==UserScript==
// #name FreeSound HTML 5 Preview
// #namespace http://thewordnerd.info
// #description Replace Flash-based sound previews on freesound.org with audio tags and add quick download links
// #include http://freesound.org/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js
// ==/UserScript==
$(document).ready(function() {
$("embed").remove();
$(".samplelist").each(function(index) {
sampleNo = $(this).find("a:first").attr("href").split("?")[1].split("=")[1];
userName = $(this).find("a:eq(1)").html();
title = $(this).find("a:first").html().replace(/ /g, "_");
url = "/download/"+sampleNo+"/"+sampleNo+"_"+userName+"_"+title;
$(this).find("script").replaceWith("<audio src='"+url+"' controls='controls' type='audio/wave'/>");
//$(this).find("audio").removeAttr("tabindex");
$(this).append("<a href='"+url+"'>Download</a>");
});
});
I can see the element in Firebug and it seems just fine.
Thoughts on what I might be doing wrong here? Since the download link does download the requested file, since it's a wave and since I think I've set the correct type, I'm at a loss as to why this isn't displaying.
It may not be your script so much as the freesound.org site/server.
When I run a modified version of your script, the audio controls all appear for a split second before reverting to the error display, like so:
Firefox reports MEDIA_ERR_SRC_NOT_SUPPORTED for the files I checked.
Save this code to your machine and then run it with Firefox:
<html>
<head>
<title>Audio File test</title>
</head>
<body>
<audio id="aud1" controls="true" type="audio/ogg"
src="http://www.freesound.org/download/7521/7521_abinadimeza_Rainfall.ogg">xxx</audio>
<audio id="aud2" controls="true" type="audio/ogg"
src="http://developer.mozilla.org/#api/deki/files/2926/=AudioTest_(1).ogg">xxx</audio>
</body>
<script type="text/javascript">
window.addEventListener ("load", ErrorReport, false);
function ErrorReport (evt)
{
console.log (document.getElementById ("aud1").error);
console.log (document.getElementById ("aud2").error);
}
</script>
</html>
.
You'll see that the known good file, from Mozilla, works correctly but the one from freesound.org does not. This may be a bug/limitation in Firefox -- both files play fine on my local player.
Here is a link to the Firefox bug system, to search for or report bugs.
I am looking to track a Pop-Over page that appears when the forum is
submitted at:
http://www.xebra.com/salesAssistance.html
I tried adding the urchin/google analytics code to the page that is displayed in the pop-over window, but whenever I do so the status bar displays "Read http://www.google-analytics.com/" and the entire form page goes blank.
It is important to track the page in the popover because that page is the conversion goal (the page we are trying to direct people to).
How do I stop Google Analytics from destroying my window, while still tracking that a user has been there?
Thank you,
Andrew J. Leer
You could separate your google analytics code into two bits:
one that goes on top of the page:
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." :"http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("#########");
} catch(err) {}
</script>
and the other just before the "end body" tag
<script>
pageTracker._trackPageview();
</script>
And the call the pageTracker._trackPageview(); method in the ajaxComplete callback of the "pop-up" window.