So I'm having this piece of code that do horizontal scroll and I have a view helper that write videojs video element on to the php file. When I try to scrub the video, it will just play from the start again, the pause and fullscreen button works, but the volume adjust when clicked will mute the sound, which is kinda like the same behavior as the progress bar-going straight to zero. Why? It works if it's not in this horizontal scrolling element.
<?PHP
include("test/viewHelpers.php");?>
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src='http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js'></script>
<script src="js/video.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/video-js.css" type="text/css" media="screen" title="Video JS">
<script type="text/javascript">VideoJS.setupAllWhenReady();</script>
<style>
#container{width: 640px; height:360px; overflow:hidden; border:5px solid yellow;}
#content{width: 2200px;background-color: blue;position:relative;left:0px;}
.section{background-color: lightblue; width:640px; float: left; }
</style>
<script type="text/javascript">
$(function(){
$("#container").scrollTo($('#2'), 4000);
}
);
</script>
<title>Videojs Test</title>
</head>
<body>
<div id="container">
<div id="content">
<div class="section" id="1" style="width: 620px; height: 360px; left:0px">section one</div>
<div class="section" id="2" style="background-color:red; width: 620px; height: 360px; left: 640px">
<?php echo view_video_helper("video1-1") ?>
</div>
<div class="section" id="3" style="width: 620px; height: 360px; left: 1280px; background-color:green;">section three</div>
</div>
</div>
</body>
</html>
Try the new version of video.js and see if it makes any difference.
Related
I have created the following page, to inform users that their browser is outdated.
table,
.modal-footer a {
margin-left: auto;
margin-right: auto;
}
td {
width: 60px;
text-align: center;
color: #1a73e8;
}
a.browser-icon {
width: 36px;
height: auto;
img {
width: 32px;
height: auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(window).on('load', function() {
$('#outdatedBrowserModal').modal('show');
});
</script>
<style>
</style>
</head>
<body>
<div class="container">
<div class='modal fade' id='outdatedBrowserModal' tabindex='-1' role='dialog' aria-hidden='true' data-backdrop="static" data-keyboard="false">
<div class='modal-dialog modal-dialog-centered' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h5 class='modal-title'>YOUR BROWSER IS OUT-OF-DATE!</h5>
</div>
<div class='modal-body'>
<p>
To continue using the site please use an up-to-date browser such as:
</p>
<table>
<tr>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/chrome.svg' alt='Chrome' title='Chrome'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/safari.svg' alt='Safari' title='Safari'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/firefox.svg' alt='Firefox' title='Firefox'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/edge.svg' alt='Edge' title='Edge'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/opera.svg' alt='Opera' title='Opera'></a>
</td>
</tr>
<tr>
<td>Chrome</td>
<td>Safari</td>
<td>Firefox</td>
<td>Edge</td>
<td>Opera</td>
</tr>
</table>
</div>
<div class="modal-footer">
UPDATE MY BROWSER NOW
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The problem is that the page does not show properly in Internet Explorer, as shown below:
Is there any other way to center the footer button?
Give it a parent div and set the button as display: block; and center it using margin: 0 auto;
I think this only needs to adjust the position of the <a> element in the modal-footer through the translateX attribute, like this:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
table {
margin-left: auto;
margin-right: auto;
}
td {
width: 60px;
text-align: center;
color: #1a73e8;
}
a.browser-icon {
width: 36px;
height: auto;
}
img {
width: 32px;
height: auto;
}
.modal-footer a {
transform: translateX(-50%);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(window).on('load', function () {
$('#outdatedBrowserModal').modal('show');
});
</script>
</head>
And this is result in IE:
You can use the transform property to center it, if you give the element any position but static (I used relative in this case).
table,
.modal-footer a {
margin-left: auto;
margin-right: auto;
}
.modal-footer {
position: relative;
left: 50%;
transform: translateX(-50%);
}
td {
width: 60px;
text-align: center;
color: #1a73e8;
}
a.browser-icon {
width: 36px;
height: auto;
img {
width: 32px;
height: auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(window).on('load', function() {
$('#outdatedBrowserModal').modal('show');
});
</script>
<style>
</style>
</head>
<body>
<div class="container">
<div class='modal fade' id='outdatedBrowserModal' tabindex='-1' role='dialog' aria-hidden='true' data-backdrop="static" data-keyboard="false">
<div class='modal-dialog modal-dialog-centered' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h5 class='modal-title'>YOUR BROWSER IS OUT-OF-DATE!</h5>
</div>
<div class='modal-body'>
<p>
To continue using the site please use an up-to-date browser such as:
</p>
<table>
<tr>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/chrome.svg' alt='Chrome' title='Chrome'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/safari.svg' alt='Safari' title='Safari'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/firefox.svg' alt='Firefox' title='Firefox'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/edge.svg' alt='Edge' title='Edge'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/opera.svg' alt='Opera' title='Opera'></a>
</td>
</tr>
<tr>
<td>Chrome</td>
<td>Safari</td>
<td>Firefox</td>
<td>Edge</td>
<td>Opera</td>
</tr>
</table>
</div>
<div class="modal-footer">
UPDATE MY BROWSER NOW
</div>
</div>
</div>
</div>
</div>
</body>
</html>
To make this come in center u can bound it by center tag like this:
<center>
<div class="modal-footer">
UPDATE MY BROWSER NOW
</div>
</center>
This shall work in every browser
as you can see in this photo: https://postimg.cc/YLC0cnsY the photo of the slideshow is not shown in full on the mobile screen. I wanted to see it in full, so that it would fit the screen, bootstrap if possible.In the computer it's shown right, but the problem it's in the movile screen. This is my css code and my html code:
.contenedor{
width:485px;
height:540px;
margin :auto;
}
.slick-prev:before, .slick-next:before {
color:black !important;
}
<html>
<head>
<title>Slide</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="js2/slick/slick.css">
<link rel="stylesheet" href="js2/slick/slick-theme.css" charset="UTF-8">
<link rel="stylesheet" href="css2/estilos.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
<LINK REL=StyleSheet HREF="css/bootstrap.css" TYPE="text/css">
</head>
<body>
<div class="container-fluid">
<div class="contenedor">
<div class="slideshow2" >
<div class="slide slide1">
<img src="img2/1.jpg" class="img-fluid">
</div>
<div class="slide slide1">
<img src="img2/2.jpg" class="img-fluid">
</div>
<div class="slide slide1">
<img src="img2/3.jpg" class="img-fluid">
</div>
<div class="slide slide1">
<img src="img2/4.jpg" class="img-fluid">
</div>
<div class="slide slide1">
<img src="img2/5.jpg" class="img-fluid">
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js2/slick/slick.min.js"></script>
<script>
$(".slideshow2").slick({
dots:true,
arrows: true,
fade:false,
autoplay:true,
centerMode: false, //centrar foto
slidesToShow: 1,
slidesToScroll: 1
});
</script>
<script src="js/popper.min.js" type="text/javascript"></script>
<script src="js/jquery-3.5.1.slim.min.js" type="text/javascript"></script>
<script src="js/utilidades.js" type="text/javascript"></script>
</body>
</html>
try this:
HTML:
<!DOCTYPE html>
<html lang="en">
<body>
<div id="slideshow">
<center>
<img src="src of your first img" height="400px">
</center>
</div>
</body>
</html>
CSS:
<style>
#slideshow {
border: solid 20px;
margin: 0 auto;
background-color: black;
display: table;
height: 40%;
width: 100%;
}
</style>
JavaScript:
<script>
let adding = 1;
setInterval(function () {
document.getElementById("simg").innerHTML =
"<img src=\"p" + adding + ".jpg\" height=\"400px\"/>"
adding++
if (adding > 8) {
adding = 1
}
}, 3000);
</script>
name your imgs like p1.jpg,p2.jpg etc.
I named them like that.If you want yo can change,but also change
the 4rth line in script with your img name.
to make it fit to the screen on mobile use bootstrap.
thanks for your answer but i finally resolved it setting max-width and max-height instead of width and height:
.contenedor{
max-width: 485px;
max-height: 540px;
margin:auto;
}
and removing class="img-fluid" from the images on the slide code.
I'm currently in the process of learning Bootstrap and I'm still fairly new, so please go easy on me. I'm trying to make a page where there is a main heading for the page, a heading above the grids, and 3 unequal responsive grids than span the height of the rest of the page, even when the browser is resized. I've tried setting height or row and each div to 100%, I also tried looking this up but I didn't find anything of much use, and I'm not sure how I would achieve this, Thanks for taking the time to help. Code is:
EDIT: To specify, my issue is getting the remaining area to take up 100% of space, not a div taking up 100% of the page, just the remaining part
.div1 {
background-color:red;
}
.div2 {
background-color:gray;
}
.div3 {
background-color:blue;
}
.row {
height: 100%;
}
#main {
background-color: yellow;
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<h1>Welcome</h1>
<div class="container-fluid" id="main">
<h1>This is a heading</h1>
<div class="row">
<div class="col-sm-3 div1">Left side</div>
<div class="col-sm-6 div2">Middle</div>
<div class="col-sm-3 div3">Right side</div>
</div>
</div>
</body>
</html>
Try this
.row {
height: 100vh;
}
More information here:
https://stackoverflow.com/a/16837667/7361767
Hi I got an issue with my page where I have used Flex and height:x% to achieve a very botched but working responsive height for two divs within a container.
The problem I have is that it works fine in FF but not Chrome. (Assume IE, edge etc) doesn't either.
Here is what it looks like in FF: http://prntscr.com/a712g6 (this is what it should be)
Here it is in Chrome: http://prntscr.com/a712q4
Below is the code: (excuse the mess its a hacked up copy and paste of source code)
<!doctype html>
<html lang="en">
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles/header.css?v=1.0">
<link rel="stylesheet" href="styles/content.css?v=1.0">
<link rel="stylesheet" href="styles/footer.css?v=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="MainHeader">
</div>
<div class="logged_container">
You are Logged in as <span style='font-weight:bold;'>Ryan</span> (<a href='logoff.php'>Log Out</a>)
</div>
<div class="navigation_container">
<a href="main.php">
<img src="img/test.png" alt="" height="16" style="vertical-align:top; padding-right:5px;">Home
</a>
</div>
<div class='content'>
<div class='contentTableView' style="flex: 1; flex-direction: column; min-height:100%; height: 100%; position: relative;">
<span class="contentHeader">Title</span>
<div id="map" class="map" style="float:left; width: 40%; margin-top: 1%; height:90%; min-height:90%; margin-left:20px; border:1px solid #0a639d;"></div>
<div id="controls" class="controls" style="float:left; width: 40%; margin-top: 1%; height:90%; min-height:90%; margin-left:10%; border:1px solid rgb(204, 204, 204); background-image: url('img/bms47.png');"></div>
</div>
</div>
<div class="footer">
Footer Text
</div>
</div>
</body>
</html>
Anyone got any suggestions?
EDIT: ATTACHED CSS
http://pastebin.com/59rcgQwM
EDIT2: Issue Example
jsfiddle.net/vctbszc2/3 – Adam Buchanan Smith
I have created two href's which act like buttons, in a comic game. I am following this tutorial . The issue i have is the links are not clickable. They dont respond to touch, nothing happens when clicked.
Here is the project structure:
here is my styles.css:
* {
font-family: Verdana, Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
margin: 0px auto;
background-color:#0a3003;
}
img {
margin:0px;
padding:0px;
border:0px;
width:100%;
height:auto;
display:block;
float:left;
}
.btn {
display: inline-block;
padding: 15px 4% 15px 4%;
margin-left: 1%;
margin-right: 1%;
margin-top: 5px;
margin-bottom: 5px;
font-size: 30px;
text-align: center;
vertical-align: middle;
border: 0;
color: #ffffff;
background-color: #4b4237;
width: 40%;
height: 80px;
text-decoration: none;
}
and now i'll show you the index.html where the button is not clickable from :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>2nd Race</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<div>
<img src="images/coverpage.png" alt="Cover Page"/>
</div>
<div>
<a href="#" class="btn" ><<</a>
<a href="comic/page1.html" class="btn" >>></a>
</div>
</div>
<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script src="app.js"></script>
<script src="lowBatteryCheck.js"></script>
</body>
</html>
When i load the program onto the tizen wearable emulator it looks like this but nothing is clickable:
In my opinion,
if you want to move between pages with tau.js library, you need to follow their rule. Here is some reference guide.
https://developer.tizen.org/development/ui-practices/web-application/tau/hello-world#fill_content
Maybe this issue was appeared because you didn't define "page" of TAU.
It is very simple. Just insert class="ui-page" in root <div> tag.
I tested on my desktop with Tizen IDE. In your index.html,
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>2nd Race</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="ui-page">
<div class="ui-content">
<img src="images/coverpage.png" alt="Cover Page"/>
<div>
<<
>>
</div>
</div>
</div>
<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script src="app.js"></script>
<script src="lowBatteryCheck.js"></script>
</body>
</html>
And on every other pages(comic/page1.html, page2.html... etc)
<!DOCTYPE html>
<html>
<body>
<div class="ui-page">
<div class="ui-content">
<img src="../images/page1.png" alt="Page 1" />
<div>
<a href="../index.html" class="btn" ><<</a>
<a href="page2.html" class="btn" >>></a>
</div>
</div>
</div>
<script type="text/javascript" src="../../lib/tau/wearable/js/tau.min.js"></script>
</body>
</html>
Please try again with above my example.
I checked that project runs well now :)