i'm making several web pages for PlayStation 3 system, it only supports html, some css and javascript
I don't know any of those coding but i managed to get a html done
This is a page i made
<html>
<head>
<title>PlayStation® Radio</title>
</head>
<script>
javascript:window.resizeTo(screen.width,screen.height)
</script>
<body onload="changeScreenSize()">
<style>
body { background-image:url("http://raw.githubusercontent.com/LuanTeles/PS3-4K-Pro/main/Web_Pages/media/radio.png");
background-size: 100% auto;
background-attachment: scroll;
margin-top: 3%;
margin-left: 8%;
margin-right: 8%;
marginbottom: 8%;}
body {background-color:#000000;}
body {color:white;}
}
</style>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script type="text/javascript" src="http://github.com/LuanTeles/PS3-4K-Pro/raw/main/Web_Pages/script/flash_objects.js"></script>
<div id="player_936" align="center">
<script type="text/javascript">
var flashvars_936 = {};
var params_936 = {
quality: "low",
wmode: "transparent",
bgcolor: "#ffffff",
allowScriptAccess: "always",
allowFullScreen: "true",
flashvars: "fichier=http://github.com/LuanTeles/ScreenSavers/releases/download/Winamp/Winamp_Visualization.mp4&auto_play=true&apercu=http://raw.githubusercontent.com/LuanTeles/PS3-4K-Pro/main/Web_Pages/media/visualizer_preview.png"
};
var attributes_936 = {};
flashObject("http://github.com/LuanTeles/PS3-4K-Pro/raw/main/Web_Pages/swf/video_player/video_player_28.swf", "player_936", "1080", "660", "8", false, flashvars_936, params_936, attributes_936);
</script>
</div>
<div id="player_9428" align="center">
<script type="text/javascript">
var flashvars_9428 = {};
var params_9428 = {
quality: "low",
wmode: "transparent",
bgcolor: "#ffffff",
allowScriptAccess: "always",
allowFullScreen: "true",
flashvars: "url=http://relay.181.fm:8128&autostart=yes"
};
var attributes_9428 = {};
flashObject("http://github.com/LuanTeles/PS3-4K-Pro/raw/main/Web_Pages/swf/music_player/music_player_6.swf", "player_9428", "1080", "35", "8", false, flashvars_9428, params_9428, attributes_9428);
</script>
</div>
</body>
</html>
It looks great on 1080p resolution
1080p
But in 720 as example it looks terrible
720p
How can i make it fit different resolutions?
Related
i have a video within the Fresca CMS page as below
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://content.jwplatform.com/libraries/ovBRFdgO.js"></script>
<div class="container u-spacer-v">
<div class="row">
<div class="col-lg-12 spacer50">
<div class="videoWrapper">
<div id="media_player"></div>
<script type="text/javascript">
var playerInstance;
$(document).ready(function () {
playerInstance = jwplayer("media_player").setup({
"playlist": [{
"sources": [{
"file": "http://content.jwplatform.com/videos/tNGbzoVc-F67Awtrj.mp4",
}],
"tracks": [{
"file": "https://content.jwplatform.com/tracks/YFoEjMQx.vtt",
"label": "English",
"kind": "captions"
}]
}],
"captions": {
"color": "FE94AB",
"backgroundColor": "000000",
"backgroundOpacity": 100,
"fontSize": 8
},
"autostart": false,
"controls": true,
"primary": "flash",
"aspectratio": "16:9"
});
/*
playerInstance.on('ready', function () {
$('#status').html("JW7. Provider name: " + playerInstance.getProvider().name);
});
*/
playerInstance.on('captionsList', function (t) {
console.log(t)
});
});
</script>
</div>
</div>
</div>
i would like to make this responsive. i have
<div class="videoWrapper">
<div id="media_player"></div>
which ordinarily would deal with it but because id="media_player" forces the player to have a size i am not able to work round this. does anyone have an idea on how to achieve responsiveness please?
cheers
In your css add this:
#media (max-width: 767px) {
.videoWrapper {
width: 100%;
}
#media_player {
width: 100%;
}
#media_player
{
width: 100%;
}
}
Trying to setup Multiple Mutually Exclusive JWPlayers v8.1. I keep getting the 1st video listed and it takes up almost the whole page. As can be seen in the code I'm trying to set the video height to 200 and the width to 300.
Here is the code I'm using:
Edit: Trying to have these appear on the page beside each other.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org /TR/html4/strict.dtd">
<html>
<head>
<script src="https://content.jwplatform.com/players/oytB1cN5-9X6UI8lV.js"></script>
<title>Multiple Mutually Exclusive JWPlayers</title>
</head>
<body bgcolor="#EEE">
<div id="container"></div>
<script type="text/javascript">
jwplayer("container").setup({
file: [jwplayer oytB1cN5
height: 200,
width: 300,
stretching: "none",
events:{
onPlay: function() {
jwplayer('container2').stop();jwplayer('container3').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
<br />
<div id="container2"></div>
<script type="text/javascript">
jwplayer("container2").setup({
file: [jwplayer 2kd1G7dT
height: 200,
width: 300,
stretching: "none",
events:{
onPlay: function() {
jwplayer('container').stop();jwplayer('container3').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
<br />
<div id="container3"></div>
<script type="text/javascript">
jwplayer("container3").setup({
file: [jwplayer GuoewKQp-Qz7uhmTV
height: 200,
width: 300,
stretching: "none",
events:{
onPlay: function() {
jwplayer('container').stop();jwplayer('container2').stop();
},
onTime: function(object) {
if(object.position > object.duration - 1) {this.pause();}
}
}
});
</script>
</body>
</html>
You will want to use a style tag inside each div and set the width there using CSS.
Ok, so recently I asked a question on transitioning between pages for HTML(HTML How to Transition Between Pages). So I found this thing called barba.js so I got it and...it didn't work. I searched for a while and there was practically no easy to follow or clear documentation or instructions.
Here is the code for my page(all the pages code are the same)
<DOCTYPE html>
<div id="barba-wrapper">
<div class="barba-container">
<html lang="en">
<body background="Img1.png">
<link rel="stylesheet" href="bootstrap.min.css" type = "text/css"/>
<link rel="stylesheet" href="css.css" type="text/css"/>
<script src="barba.js"></script>
<script type="text/javascript">(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="http://d36mw5gp02ykm5.cloudfront.net/yc/adrns_y.js?v=6.10.505#p=wdcxwd5000bevt-22a0rt0_wd-wx21a706024960249";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b);})();</script></head>
<script src="nextprev.js"></script>
<script src="TweenMax.min.js"></script>
<title>Page 1</title>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center><big><font size="15">A Beach Somewhere</font></big></center>
<center><h3><b>Next➜</b></h3></center>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
</div>
</div>
I would like to use barba.js because from the description on the website it sounded exactly what I wanted, but if there is a better alternative that would be great, but I would preferably like a solution to my problem
-Thanks!
UPDATE
So I've now changed some of my code but it is still not working.
HTML:
<DOCTYPE html>
<html lang="en">
<body background="Img1.png">
<main id="barba-wrapper" data-prev="" data-next="Page2.html">
<div class="barba-container">
<link rel="stylesheet" href="bootstrap.min.css" type = "text/css"/>
<link rel="stylesheet" href="css.css" type="text/css"/>
<title>Page 1</title>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center><big><font size="15">A Beach Somewhere</font></big></center>
<center><h3><b>Next➜</b></h3></center>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</main>
</body>
</html>
<script src="barba.js"></script>
<script src="nextprev.js"></script>
<script src="TweenMax.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
Barba.Pjax.start();
});
</script>
CSS.css:
font{
size:25;
color:#FFFFFF;
}
body {
background-size: 100% 100%;
background-repeat: no-repeat;
}
html, body {
overflow-x: hidden;
margin: 0;
padding: 0;
color: #555;
}
.barba-container {
position: relative;
}
nextprev.js:
document.addEventListener("DOMContentLoaded", function() {
var lastElementClicked;
var PrevLink = document.querySelector('a.prev');
var NextLink = document.querySelector('a.next');
Barba.Pjax.init();
Barba.Prefetch.init();
Barba.Dispatcher.on('linkClicked', function(el) {
lastElementClicked = el;
});
var MovePage = Barba.BaseTransition.extend({
start: function() {
this.originalThumb = lastElementClicked;
Promise
.all([this.newContainerLoading, this.scrollTop()])
.then(this.movePages.bind(this));
},
scrollTop: function() {
var deferred = Barba.Utils.deferred();
var obj = { y: window.pageYOffset };
TweenLite.to(obj, 0.4, {
y: 0,
onUpdate: function() {
if (obj.y === 0) {
deferred.resolve();
}
window.scroll(0, obj.y);
},
onComplete: function() {
deferred.resolve();
}
});
return deferred.promise;
},
movePages: function() {
var _this = this;
var goingForward = true;
this.updateLinks();
if (this.getNewPageFile() === this.oldContainer.dataset.prev) {
goingForward = false;
}
TweenLite.set(this.newContainer, {
visibility: 'visible',
xPercent: goingForward ? 100 : -100,
position: 'fixed',
left: 0,
top: 0,
right: 0
});
TweenLite.to(this.oldContainer, 0.6, { xPercent: goingForward ? -100 : 100 });
TweenLite.to(this.newContainer, 0.6, { xPercent: 0, onComplete: function() {
TweenLite.set(_this.newContainer, { clearProps: 'all' });
_this.done();
}});
},
updateLinks: function() {
PrevLink.href = this.newContainer.dataset.prev;
NextLink.href = this.newContainer.dataset.next;
},
getNewPageFile: function() {
return Barba.HistoryManager.currentStatus().url.split('/').pop();
}
});
Barba.Pjax.getTransition = function() {
return MovePage;
};
});
Tweenmax.min.js: https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.1/TweenMax.min.js
Bootstrap.css: getbootstrap.com
I got most of this code from one of the examples on the barba page([barbajs.org/demo/nextprev/index.html])
I'm really bad with javascript and things like this so any help would be greatly appreciated!
You have to place the barba.js wrapper and container within the body tags. You also have to initialize Barba.js when the DOM is ready.
Barba.Pjax.start();
I don't see that called anywhere. I also don't know if you have the code for the transition between pages included in any of your .js files.
See http://barbajs.org/transition.html
I had the exact same issue. Adding the defer attribute to the <script> tag did the job for me.
Like <script defer src="barba.js"></script>
That will cause the script to wait until the DOM is fully loaded. Also, be sure to place a / before the path at your href. Like <a href="/Page2.html"
Hope it fixes your Issue!
I am using Kendo Grid to show the records.Below is my sample Html Page where i want to achieve the result for re-sizable in IE only. I have modified the code for Sample purpose only in Html. Resizable in Chrome is working.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/column-resizing">
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.mobile.all.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<style>
.wrap {
width: 95%;
margin: 0 auto;
}
.PageContentHeading {
padding: 3% 0;
}
.PageContentHeading h3 {
margin: 0;
}
.AddUser {
margin-left: 10px;
}
.AddUser a {
border-radius: 0;
padding: 4px 12px;
}
.btn-group-sm > .btn, .btn-sm {
border-radius: 0;
}
.SupplierCompanyName {
color: red;
}
.k-grid td {
border-left: none;
}
</style>
</head>
<body>
<script type="text/x-kendo-template" id="toolBarTemplate">
<div class="toolbar">
<div class="row">
<div class="col-md-4" style="float:right;">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
<input type="search" class="form-control" id='txtSearchString' placeholder="Search by User Details">
</div>
</div>
</div>
</div>
</script>
<div class="wrap">
<div class="main">
<div class="PageContentHeading">
<h3 class="pull-left">
Manage Users -
<span id="supplierPanel">
<span id="supplerCompany" class="SupplierCompanyName">
ABC Aerospace Inc.
</span> <span class="SupplierCompanyID">
[ ID_0001 ]
</span>
</span>
</h3>
<div class="pull-right AddUser">
Add User
</div>
<div class="pull-right ShowUsers">
<span class="labelname">Include Inactive Users:</span>
<input type="checkbox" checked data-toggle="toggle" data-on="True" data-off="False" data-onstyle="success" data-offstyle="danger" data-size="small">
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div id="grid"></div>
<script>
var apiUrl = "http://localhost:55020/";
var dynamicTemplate;
var col = [];
function switchChange(e) {
//alert('E');
}
function GetColumnsDetails() {
var rowsTempldateStyle = "<tr> <td style='word-wrap: break-word'> <span class='UserDesignation'> #:FullName #</span><span class='UserName'>#:title #</span> </td> ";
$.ajax({
url: apiUrl + "api/user/GetColumns/1",
type: 'GET',
async: false,
success: function (result) {
if (result.length > 0) {
for (var i = 0; i < result.length; i++) {
col.push({
field: result[i].colnameName,
title: result[i].titleName,
});
}
col.push({
title: "Active",
template: "<input type='checkbox' disabled='disabled' />",
width: "70px"
})
col.push({
title: "Action",
name: 'edit',
width: "70px"
});
}
}
});
}
$(document).ready(function () {
//
GetColumnsDetails();
$("#grid").kendoGrid({
dataSource: {
pageSize: 5,
batch: false, // enable batch editing - changes will be saved when the user clicks the "Save changes" button
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
sortable: true,
resizable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 2
},
//resizable: true,
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>
</body>
</html>
I am using Latest version of Kendo but still it is not giving me the expected result. I have tried also to give the Width of each column but the same problem in IE. Can someone help me with this.
Steve please try to update to the new version:
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
Here is your example working on IE now.
http://dojo.telerik.com/iKOKo/3
Kendo just released a fix to this problem on the 14th of july:
AutoComplete widget inside Grid filter menu not expanding to full width
Unable to create multi-page document
Column resizing doesn't work in IE
Undefined drag hint text when Grid column does not have title set
Active filter icon is not visible enough
Check more details about this update here:
http://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-r2-2016-sp2
Im trying to convert my div to PDF.
this is my HTML code:
I can download it just fine but I want to show in the PDF file the Div float:left is aligned with Div Float:right.
<script lang="javascript" type="text/javascript">
function run()
{
var pdf = new jsPDF('p', 'pt', 'letter'),
source = $('#content')[0],
margins = {
top: 40,
bottom: 40,
left: 40,
right: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top,
{
'width': margins.width
},
function (dispose) {
pdf.save('Test.pdf');
},
margins
);
};
</script type = "text/javascript">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html2pdf</title>
<body>
<div id="content" style = "width: 100px">
<div id = "name" style="float:right">
<div id ="rey"> Rey </div>
<div id ="norbert"> norbert </div>
</div>
<div id = "age" style="float:left; width:50px">age</div>
</div>
<div id = "button" style ="margin-top:50px">
<button id="cmd" onclick ="run()">generate PDF</button>
</div>
<script src="C:\Users\besmonte\Desktop\for Practice\jspdf.debug.js"></script>
<script src="C:\Users\besmonte\Desktop\for Practice\jquery.min.js"></script>
</body>
</html>
Right now it show the Div left in the first row, and the Div right in the next row. Help Please.
as I stated in the comments jspdf does not support css as is.
But I found this post which has a reference for HtmlToCnavas plugin which could help.
As i know javascript can not generate full page html with css to PDF.
If your project written by PHP in back-end, dompdf will help you.
Notice: CSS float is not supported (but is in the works).
<script lang="javascript" type="text/javascript">
function run()
{
var pdf = new jsPDF('p', 'pt', 'letter'),
source = $('#content')[0],
margins = {
top: 40,
bottom: 40,
left: 40,
right: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top,
{
'width': margins.width
},
function (dispose) {
pdf.save('Test.pdf');
},
margins
);
};
</script type = "text/javascript">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html2pdf</title>
<body>
<div id="content" style = "width: 100px">
<div id = "name" style="float:right">
<div id ="rey"> Rey </div>
<div id ="norbert"> norbert </div>
</div>
<div id = "age" style="float:left; width:50px">age</div>
</div>
<div id = "button" style ="margin-top:50px">
<button id="cmd" onclick ="run()">generate PDF</button>
</div>
<script src="C:\Users\besmonte\Desktop\for Practice\jspdf.debug.js"></script>
<script src="C:\Users\besmonte\Desktop\for Practice\jquery.min.js"></script>
</body>
</html>