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!
Related
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?
is there anyone that can just write down the basics for database knowledge? i want to link a database to my html page but have no knowledge about it
this is my html page and i want the div background linked to a databse value that when the value is true the background is green if false background is red, now it works with a button input that if pressed it change to the opposite color
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/style.default.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Grafiek</title>
</head>
<body>
<h1>Server Stats</h1>
<div id="maindiv">
<div id="server1" class="serverstatus">
<div id="cardheader">
(servername1)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
<div id="server2" class="serverstatus">
<div id="cardheader">
(servername2)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
<div id="server3" class="serverstatus">
<div id="cardheader">
(servername3)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
</div>
</body>
</html>
<script>
function toggleStatus(e) {
var parentDiv = e.parentNode.parentNode;
var bgColor = parentDiv.style.backgroundColor;
if (bgColor == "darkred") {
parentDiv.style.backgroundColor = "green";
} else {
parentDiv.style.backgroundColor = "darkred";
}
}
// var green = false
// function toggleStatus()
// {
// if (green = !green)
// {
// $("#maindiv .serverstatus").each(function ()
// {
// $(this).css("background-color", "red");
// });
// }
// else
// {
// $("#maindiv .serverstatus").each(function ()
// {
// $(this).css("background-color", "#639919");
// });
// }
// };
// function updateStatus(){
// $("#maindiv .serverstatus").each(function(){
// $(this).css("background-color", "red");
// });
// }
//
// $( document ).ready(function() {
// updateStatus();
// });
</script>
</body>
</html>
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.
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>
I am adding font styles like (small caps,all caps,no caps and normal)to the curved shape text but among this styles only small caps,all caps and no caps is working but for normal its not working.Why?
Normal text should be look like 'Normal' means first letter should be caps and remaining should be small.Please give me answer for this as soon as possible.
Is there anyone to answer my question.
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<form>
Top Center:<input type="text" name="Location 3" id="ta3" class="changeMe2" maxlength="15"><br /><br />
Bottom Center:<input type="text" name="Location 4" id="ta4" class="changeMe2" maxlength="25">
<font color="#000000">Font Style :</font>
<select id="size" >
<option value="0">[No Engraving]</option>
<option value="variant">Small Caps</option>
<option value="uppercase">All Caps</option>
<option value=" lowercase">No Caps</option>
<option value="capitalize">Normal</option>
</select>
</form>
<div id="container3" class="changeMe2" style="left:112px; font-size:18px; text-align:center;letter-spacing:-1px;
position: absolute;
top:117px;
z-index: 999;">
<div id="float3">
<p>
</p>
</div>
</div>
<div id="container4" class="changeMe2" style="left:109px; font-size:18px; text-align:center;letter-spacing:-1px;
position: absolute;
top: 217px;
z-index: 999;">
<div id="float4">
<p>
</p>
</div>
</div>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="arctext.js"></script>
<script type="text/javascript">
$(window).load(function(){
function curveTop(){
var text = '<p>' + $('#ta3').val() + '</p>',
size = $('#size').val();
$('#float3')
.css({
fontStyle: size
})
.html(text)
.find('p')
.arctext({radius:80});
}
$('#ta3').keyup( curveTop );
$("#size").change( curveTop );
function curveBottom(){
var text = '<p>' + $('#ta4').val() + '</p>',
size = $('#size').val();
$('#float4')
.css({
fontStyle: size
})
.html(text)
.find('p')
.arctext({radius: 80, dir: +2});
}
$('#ta4').keyup( curveBottom );
$("#size").change( curveBottom );
});
$('#ta3').keyup(function(){
$('#float3').html("<p align = 'center'>"+$(this).val()+"</p>");
});
$("#size").change(function() {
if($("#size option:selected").val()=="variant") {
$('#float3').css("font-variant", "small-caps");
}
else{
$('#float3').css("font-variant", "normal");
$('#float3').css("text-transform", $(this).val());
}
});
$('#ta4').keyup(function(){
$('#float4').html("<p align = 'center'>"+$(this).val()+"</p>");
});
$("#size").change(function() {
if($("#size option:selected").val()=="variant") {
$('#float4').css("font-variant", "small-caps");
}
else{
$('#float4').css("font-variant", "normal");
$('#float4').css("text-transform", $(this).val());
}
});
</script>
</head>
</body>
</html>
See this code and please do the needful.
I put your example on jsFiddle:
http://jsfiddle.net/h5c6Y/2/
The text is capitalized just as you expect in Firefox and Chrome. It doesn't work in IE 8 unless you update the text after applying the text transform. So I modified your code to update the text after applying a transform.
$("#size").change(function() {
if($("#size option:selected").val()=="variant") {
$('#float3,#float4').css("font-variant", "small-caps");
} else {
$('#float3,#float4').css("font-variant", "normal");
$('#float3,#float4').css("text-transform", $(this).val());
}
// Added the next two lines to force IE to refresh the text
$('#float3').html("<p align = 'center'>"+$(this).val()+"</p>");
$('#float4').html("<p align = 'center'>"+$(this).val()+"</p>");
});