How to run in full screen on start? - javascript

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.

Related

Integrate widget in existing html without css conflict

I have to integrate widget html file in a existing html page but i am getting many css issue after this. Is there any way that i can restrict css files of main html not to apply on widget html file.
**Sample html :**
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" class="csstransforms" lang="ru" >
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="abc.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="abc.js" type="text/javascript"></script>
</head>
<body>
<!-- WIDGET CODE-->
<!DOCTYPE html>
<html lang="en" ng-app="adidas" bb-api-url="https://adidas-dev.bookingbug.com">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="def.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="defjs" type="text/javascript"></script>
</head>
<body>
.......widget html code
</body>
</html>
<body>
</html>
With HTML you are not allowed to have two HTML documents in a single file.
One approach to solve this is by using an iframe in your main HTML:
<iframe src="widget.html"></iframe>
So you create your widget in its own HTML file with its own styles and javascript scripts, and embed it in your main HTML file using the iframe (then your widget is completely isolated from your main HTML scripts and styles and not be affected by them).
Another approach will be to create a separate CSS for you widget and include it in your main HTML, then insert your widget's markup only (without the html and body tags) in your main HTML body.
In your widget CSS file you should create a "namespace" for you widget's style that will not collide with the rest of your CSS by doing something like this:
.my-widget-name {
// your widget styles
}
.my-widget-name span.name {
// your widget style
}
.my-widget-name .box {
// your widget style
}
.......
.......
(I usually like to use something like LESS, but shown above is a traditional CSS example)
"my-widget-name" should be a unique class name that only your widget is using, and by sub-classing all of your widget styles under this class name, you are basically isolating it from the rest of your CSS.
Hope it helps a bit

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

My html site is not displaying in mobile devices

I am using the following CSS link code on my site:
<link rel="stylesheet" href="index_files/front.css" media="all" type="text/css" >
and also the following code
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<meta http-equiv="cleartype" content="on">
Here is my site links - http://www.etutorbd.com/shopi/. It's displaying properly in desktop browser but It's not displaying in mobile browser. I have checked in my android phone. I have found this answered My phone is not displaying the mobile oriented version of my site but It's not working for me. I didn't found any console error. I had a problems like "Error: Failed to execute 'send' on 'XMLHttpRequest' ". But I have fixed that. What am I doing wrong here? Is there any jQuery or CSS media type issues.
You have to remove this from your HTML body:
overflow: hidden; height: 100%; font-size: 81.44%;
if you really need it, add it to your CSS and then use media-queries to disable it on mobile sizes
EDIT with code:
body{overflow:hidden /*use it only if needed, otherwise remove it */}
#media(max-width:768px){
body{overflow: auto; height: 100%; font-size: 81.44% /* change if needed */;}
}

how to enable menu bar when mouse is placed on it

i have a menu which contains home,patient,reports etc. This menu should be present in each and every page and it should be present at the top right of each page. I know how to design this.Now i wanted to make it hidden and it should display only when mouse is placed at the top right side of a page.Please guys tell me how to do this.If you want the code for menu bar then here is this
<html class="no-js" lang="en-US">
<head>
<style type="css/text">
body{
overflow:hidden;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Home</title>
<meta name="author" content="jQuery Foundation - jquery.org">
<meta name="description" content="jQuery: The Write Less, Do More, JavaScript Library">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="base.css">
<script src="jquery.min.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<meta name="generator" content="WordPress 3.5.1" />
</head>
<body >
<header>
<section id="global-nav">
<nav>
<div class="constrain">
<ul class="links">
<li>Home</li>
<li>Patient</li>
<li>Appointments</li>
<li>Reports</li>
<li>logout</li>
</ul>
</div>
</nav>
</section>
</header>
</body>
</html>
hi i have made a example for u i hope this helps the first example shows that whenu hover over the menu show but when u stop the hover on the box the menu will disapear
http://jsfiddle.net/nFwWG/
$("#righttopbox").on('mouseenter',function(){
$("#global-nav").show();
});
$("#righttopbox").on('mouseleave',function(){
$("#global-nav").hide();
});
the second one show when u hover once the menu will stay
http://jsfiddle.net/nFwWG/1/
$("#righttopbox").on('mouseenter',function(){
$("#global-nav").show();
});
also dont forget to put jquery script on the header you can use this hosted by google by typing in google jquery google.
or you can download it at
www.jquery.com
hope this helps
Assuming global-nav is at top right
JS:
$("#global-nav").mouseenter(function(){
$(".links", this).show();
}).mouseleave(function(){
$(".links", this).hide();
});
CSS:
#global-nav .links {
display:none;
}
If it is hidden and you want to make it appear when the mouse is at top right, then you probably have to use JavaScript with mousemove event on the body or such. Then check the mouse co-ordinates and if it's in your pre-defined range (top-right) then show up the menu. As you can see e.screenX and e.screenY will give you the mouse coords relative to screen.

Changing the Header information of a html page programmatically

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" />

Categories