Changing the Header information of a html page programmatically - javascript

I am currently displaying an HTML page in to my UIWebView(iPad) and it is loading properly.
But the problem is, it is not properly fit into my container view. So I have tried everything like scalePageToFit..etc but it does not fulfill my requirement.
So I have checked the HTML page and it displays like this :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
.....
......
</html>
So after googling a bit i find out that we can insert any java script file (by using stringByEvaluatingJavaScriptFromString) to our html file
and can do anything.
So can I change the following:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
to this?
<meta name="viewport" content="width=320"/>

Not 100% sure this will work on iPhone, but to add a meta tag using Javascript, you would use soemthing like this:
var meta;
if (document.createElement && (meta = document.createElement('meta'))) {
meta.name = "viewport";
meta.content = "width=320";
document.getElementsByTagName('head').item(0).appendChild(meta);
}

The Apple tech note “Preparing Your Web Content for iPad” has a good suggestion: avoid hard-coding a width for your viewport. On the iPad, a viewport width smaller than 1024 can cause your content to be blown up and blurred. Their suggestion is
<meta name="viewport" content="width=device-width" />
This is an improvement, but your content will still be blown up if your device is in landscape mode. This is because device-width is the width of the physical device (320px or 768px), not the width of the screen in the current orientation. As a consequence, you can get content rendered at 768px and blown up to 1024px.
Avoiding Blowup
To make sure your content is not blown up, set the maximum-scale to 1.0:
<meta name="viewport" content="width=720,
maximum-scale=1.0" />

Related

setting viewport content width by javascript, does it change the whole content?

From threads like this: How to set viewport dynamically? I know how to set the width of the viewport content by javascript.
My question is:
If I have this meta tag:
<meta id="myViewport" name="viewport" content="width=device-width, user-scalable=no" />
and change it like this:
document.getElementById("myViewport").setAttribute("content","width=500px");
Will this delete the user-scalable=no?

Change URL on GIF animation end

I am trying to change the URL of a website once a GIF has reached its last frame. What I got to, is that I can use the libgif.js setup.
However I am having difficulties making it work and figuring out the components. There are a couple of example suggestions, but all I need it to do is check if the GIF has finished and if so go to another URL.
The following code is what I have gotten to so far, it loads the GIF but nothing happens, other than it plays in a loop, even though the GIF isn't supposed to loop. But no URL change or anything.
Any help is much appreciated.
EDIT: the site now just doesn't load and goes directly to "unsafe website" message from browsers.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="./libgif.js"></script>
</head>
<body>
<img id="taliAni" src="LogoAnimation2.gif" rel:animated_src="LogoAnimation2.gif"
rel:auto_play="1"/>
<script type="text/javascript">
var sup1 = new SuperGif({ gif: document.getElementById('taliAni') } );
sup1.on_end(window.location.href = "https://www.website.com/";);
</script>
</body>
</html>

textarea changes font-size according to the screen size

I don't know what happens in a desktop browser but in Android default browser when i keep the width and height as 100%
The font size of the textarea increases according to the screen I tried to alert the font - size of the textarea but it doesn't change .I think this is a bug in the browser if not is there a way to fix this issue ?
Any help would be appreciated.
The code is simple it is:
<textarea></textarea>
<style>
textarea{
width:100%;
height:100%;
font-size:16px;
}
</style>
<script>
alert($("textarea").css("font-size"));//uses jquery
//Outputs 16
</script>
I have noticed that the font size starts changing after the width becomes more than ~450px
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Disable zoom.
i think the problem related to :
<meta name="viewport" content="width=device-width, initial-scale=1">
simply check <head> tag and remove that if exist --not Recommended --
another reason maybe related to css media Query
check the media queries in stylesheet and change the font-size

change viewport meta tag with jquery

I was wondering if it is possible to add a meta tag using jquery to an html page before the page loads.
The reason why I ask, is because I have a page with no viewport meta tag on and it should have it only when the resolution drops below 700px - <meta name="viewport" content="width=device-width, initial-scale=1"/>
The reason being, I have html markup for mobile site (using media queries) & also html markup for desktop version ( I don't have one for tablets). I want to make sure html markup designed for desktop is rendered properly on tablet on page load and also when we change the device orientation.
Thanks in advance!
Using jQuery you can do it like the following:
if ($(window).width() < 700) {
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1"/>');
}
EDIT
To have the viewport tag by default, then remove it above 699px:
HTML:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
jQuery:
if ($(window).width() > 699) {
$('head').remove('<meta name="viewport" content="width=device-width, initial-scale=1"/>');
}
Try this (you don't need the / at the end of the meta tag anymore):
if(screen.width < 700) {
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1">');
}
Sure you can as soon as the jQuery library is loaded and the head is registered at the DOM:
if (jQuery('html').outerWidth(true) < 700) {
jQuery.('head').append('<meta name="viewport" content="width=device-width, initial-scale=1"/>');
}

How to run in full screen on start?

http://www.wimpyplayer.com/
Was searching in the docs, but did not find how to run in full screen. Anyone maybe knows it?
Or where is the new version of skin machine for that player? When I enter to Google, I only find some old which is for Rave, I assume its for old version of the player. But I saw one online editor for new version, which I can't find.
I would then just remove panel of buttons, and set the size of the player with setSize() function.
Skin machine found, from browser history. Google does not find it even when it looks like I use exact keywords http://www.wimpyplayer.com/skinmachine/
In the download ZIP there is a folder named "test" which includes this file:
"option-responsive-size-fullscreen.html"
... which you can use as a reference.
The trick is to use the "data-responsive" option to get wimpy to expand into the size of the page as defined in the CSS.
This is a cleaned-up version o the HTML needed to run in fullscreen:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Wimpy Player - Fullscreen</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- The following META tags are used to inform mobile-device browsers to present this page in full-screen mode.-->
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Wimpy Player" />
<style type="text/css" media="screen">
/* Make page fill device window */
html, body {
width : 100%;
height : 100%;
margin:0;
padding:0;
overflow:hidden;
background-color:#484848;
}
/* For the Player Instance DIV */
.full {
left:0px;
top:0px;
width : 100%;
height : 100%;
}
</style>
<!-- Prevent entire page from "bouncing" -->
<script>document.addEventListener('touchmove',function(event){event.preventDefault();},false);</script>
<!-- Wimpy Engine -->
<!-- NOTE: Change WIMPY_INSTALLATION_FOLDER to target the wimpy.js file correctly. -->
<script src="WIMPY_INSTALLATION_FOLDER/wimpy.js"></script>
</head>
<body>
<!-- Set the DIV's class to "full" and set the "responsive" option
so the player automatically adjusts to fit snuggly within the view.
The responsive option also causes the player to adjust itself when
the orientation changes (e.g. from landscape to portrate) -->
<!-- NOTE: Change data-media to target media files or a playlist. -->
<div class="full" data-wimpyPlayer data-responsive data-media="song1.mp3|song2.mp3|song3.mp3"></div>
</body>
</html>
UPDATE:
This page on wimpyplayer.com that explains this as well.

Categories