Jquery-tubular plugin issue - html

I'm trying to make my first video background and found this tubular plugin. when i follow the step, it seems that adding the code in body gets complicated.
I added the jquery link and for some reason the code i added is not valid.
can anyone help me how tomake this plugin work?
This is the instruction im trying to follow:
https://code.google.com/p/jquery-tubular/
Thank you in advance!
here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Using Tubular Plugin</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>
<style type="text/css">
body,html { margin:0; padding::0; height:100%; width:100%;}
#topSection {
background-color: #D8D8D8;
height:100%;
min-height:100%;
width:100&;
position:relative;
}
</style>
</head>
<body>
$().ready(function() {
$('#wrapper').tubular({videoId: 'idOfYourVideo'}); // where idOfYourVideo is the YouTube ID.
});
<section id="topSection">Top section- I need a youtube video background here</section>
</body>
</html>

Hi Have you tryed calling jQuery from head. You should add a piece of code like:
<script>
$("document").ready(function() {
var options = { videoId: "xp-8HysWkxw", // where idOfYourVideo is the YouTube ID.
start: 0,
repeat: true
};
$("#page").tubular(options); // Here is the jQuery call
});
</script>

Related

How to make HTML canvas for emscripten without borders

I have a simple C++ SDL2 program and I'm using emscripten to run it in the browser. Emscripten generates two files (javascript and webassembly) and it renders everything into HTML canvas. I found this simple HTML canvas on the internet and it works just fine but for some reason, it has white borders on the left and on the top. How can I remove these borders?
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<script type='text/javascript'>
var Module = {
canvas: (function() { return document.getElementById('canvas'); })()
};
</script>
<script src="index.js"></script>
</body>
</html>
screenshot here
This is the browser-default margin on the body-element.
You can remove it by adding some CSS to the head-element.
Example:
<style>
body {
margin: 0;
}
</style>

How do I call my HTML webpage to expand and fit the whole screen?

I have an HTML file that I'm calling in my Flutter app.
On fetching the file using WebView, my output looks like the image shown below and does not cover up my entire screen.
This is my code:
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://s3.amazonaws.com/cdn.theoremreach/v3/theorem_reach.min.js"></script>
</head>
<body>
<iframe src="https://theoremreach.com/respondent_entry/direct?api_key=abc&user_id=12345"></iframe>
<script type="text/javascript">
var theoremReachConfig = {
apiKey: "abc",
userId: "12345",
onRewardCenterOpened: onRewardCenterOpened,
onReward: onReward,
onRewardCenterClosed: onRewardCenterClosed
};
var TR = new TheoremReach(theoremReachConfig);
function onRewardCenterOpened(){
console.log("onRewardCenterOpened");
}
function onReward(data){
window.postMessage(data.earnedThisSession)
console.log("onReward: " + data.earnedThisSession);
}
function onRewardCenterClosed(){
console.log("onRewardCenterClosed");
}
if (TR.isSurveyAvailable()) {
TR.showRewardCenter();
}
</script>
</body>
</html>
And this is what the screen looks like:
I am trying to fit the entire WebView on my screen.
Adding this to your head should work fine.
<style>
iframe {
height:100%;
width:100%;
margin:0 auto;
position:absolute;
top:0;
left:0;
}
</style>

Can't adjust data feed position on web page regardless of css

I'm trying to implement the data feed that Box Office Mojo offers from their website, and they say that adding this line of code should display the feed:
<script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php">
Which works, but I have the issue of it positioned on the far left side of the page by default, which looks weird (warning, large image).
I wrapped said script in a p tag, like so:
<p id="boxOffice"><script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php"></script></p>
and styling tag with position, but none of the options that I have tried have moved it. Have any of you guys had any idea of moving it? I'm stuck here.
Do you want it in the center? There are multiple ways to do that.
Method 1. Using <center> tag
<center><script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php"></script></center>
Your table should be centered like this:
Method 2. Add below code after the <head> tag:
<style type="text/css">
table {
margin: 0px auto;
}
</style>
It will do the same.
Method 3. Using <div> tag:
<div class="mytable"><script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php"></script></div>
And you can play with css to put the table anywhere you want:
.mytable {
text-align: center;
}
Here is my full code for method 1:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<center><script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php"></script></center>
</body>
</html>
Firstly i would suggest that try using <DIV>tag instead of <p>tag.
it should Work.
<!DOCTYPE html>
<html>
<head>
<style>
#boxOffice{
float:right;
}
</style>
</head>
<body>
<div id="boxOffice"><script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php"></script></div>
</body></html>
You can also use other css properties with <DIV>.
or
You can use <center>tag with <p> tag to align it to center.
<center><p id="boxOffice"><script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php"></script></p></center>

About DIVs (Hiding and Showing not Java)

<div id="abc" style="display: none;"><h1>abc</h1></div>
Hello! I hide the div but I want to see when I type it #abc I can't see this text.
In case people want to do it without having to resort to JavaScript, the CSS solution is to use the :target pseudo class, as mentioned in the comments.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
#abc {display:none}
#abc:target {display:block}
</style>
</head>
<body>
<div id="abc"><h1>abc</h1></div>
</body>
</html>
Please find below sample as per your requirement.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
if(window.location.href.indexOf("#abc")!=-1)
{
//alert("Page is loaded");
document.getElementById("abc").style.display="block";
}
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<div id="abc" style="display: none;"><h1>abc</h1></div>
</body>
</html>
This is how you can do it using jquery:
var url = "https://abcdefgh.carrd.co/#abc";
var hash = url.substring(url.indexOf("#"));
// You can use
// var hash = window.location.hash;
// but i need to write the url to show you that is working.
if ($( hash ).length) { //check if div exists
$( hash ).show();
}
#abc, #cde
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc">ABC</div>
<div id="cde">CDE</div>
That should do it:
if(window.location.href.indexOf("#abc")!=-1) {
document.getElementById("abc").style.display="block";
}}

Exit URL on converted swf with swiffy

I tried to add an exit URL and metrics from doubleclick studio from a converted swf with swiffy to the HTML5 file.
Could anyone tell me what the most efficient way is to do this? What would the code look like in the HTML5 creative? Where in the code to add best? What tags to use?
The code swiffy generates looks like a mess to me.
<!doctype html>
<html>
<head>
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"> </script>
<link rel="stylesheet" type="text/css" href="exit.css">
<script src="exit.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Swiffy Output</title>
<script type="text/javascript" src="https://www.gstatic.com/swiffy/v7.3.0/runtime.js"></script>
<script>
swiffyobject = {"as3":true,"frameRate":25,"frameCount":342,"backgroundColor":-1,"frameSize":{"ymin":0,"xmin":0,"ymax":1800,"xmax":19400},"fileSize":52767,"v":"7.3.0","internedStrings":["::::::6Y:","::::: <<shortend from here>>
</script>
<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: hidden">
<div id="swiffycontainer" style="width: 970px; height: 90px">
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, {});
stage.start();
</script>
</body>
</html>
This is an add-on / improvement to this answer.
So you will have a few files in your HTML5 folder ( that you'll package into a zip to upload to Doubleclick Studio at the end of the build process )
index.html
styles.css
backupimage ( *.gif / *.jpg )
ajax-loader.gif ( I use this as a placeholder when elements are still loading )
object.js ( where the converted Swiffy code will be )
script.js ( where the magic happens )
The backupimage is the image you should show just in case the Creative doesn't load, and the ajax-loader.gif is available widely online. So we'll focus on the other 4 files.
index.html
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>[ Creative Name ]</title>
<meta name="ad.size" content="width=300,height=250">
<link rel="stylesheet" type="text/css" href="styles.css" media="all">
<script type="text/javascript" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
<!-- Make sure that this is the most recent runtime.js from the Swiffy Conversion file -->
<script type="text/javascript" src="https://www.gstatic.com/swiffy/v7.3.0/runtime.js"></script>
<script src="object.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="swiffycontainer" class="loading"></div>
<div id="bg-exit"></div>
</body>
</html>
styles.css
* {
border:0;
padding:0;
margin:0;
}
body, html {
width:100%;
height:100%;
overflow:hidden;
background:#fff;
width:100%;
height:100%;
position:relative;
}
#bg-exit {
position:absolute;
z-index:999999;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
cursor: pointer;
}
#swiffycontainer {
position:absolute;
z-index:100;
width:100%;
height:100%;
overflow:hidden;
}
#swiffycontainer.loading {
background: url("ajax-loader.gif") center center no-repeat;
}
objects.js
Copy whatever the output from the swiffy conversion and paste into the {} as shown below
var swiffyobject = {
"as3":false,"frameRate":24,"frameCount":114,"backgroundColor":-1,"frameSize":{" .... blah blah blah blah }]
};
scripts.js
var stage;
var clickTag;
if (!Enabler.isInitialized()) {
Enabler.addEventListener(
studio.events.StudioEvent.INIT,
enablerInitialized
);
} else {
enablerInitialized();
}
function enablerInitialized() {
if (!Enabler.isVisible()) {
Enabler.addEventListener(
studio.events.StudioEvent.VISIBLE,
adVisible
);
} else {
adVisible();
}
}
function adVisible() {
document.getElementById('swiffycontainer').className = "";
document.getElementById('bg-exit').addEventListener('click', exitHandler, false);
stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject, {});
stage.start();
}
function exitHandler(e) {
Enabler.exit('Exit');
}
Doing the above works for me and all of my creatives using the above code have been approved by Google's QA and are now being trafficked - so I'm pretty confident with my answer - although again, this is just an improvement from this answer.