first timer here. I help manage a WordPress site that has an html object imbedded in a div that overflows. The scrollbar functionality works fine on pc's; however, on an ipad (and I assume an iphone and android devices), the scrollbar doesn't appear. The html I have is:
#wrapper {
width:100%;
height:360px;
overflow:scroll;
-webkit-overflow-scrolling:touch;
}
#wrapper object {
width: 100%;
height: 100%;
}
<div id="wrapper">
<object id="object" type="text/html" data="[link to html page with lots of <tr> rows]"
</object>
</div>
I'm wondering if perhaps the webkit overflow attribute should be on the object instead of the div to get this to work correctly?
Related
Currently, I am working on a ASP .NetCore project to make a web application. I face trouble in setting a video background for the entire application. There are plenty of methods to set a video background for ordinary Html/CSS projects but I was unable to find a reliable method to set up a video background for a ASP.net core MVC web application.
Project Details:
Framework: ASP .NetCore MVC web application
Target Framework: net 5.0
This is my project structure:The folder structure of the MVC web app
I was in a hurry to find a way to do this. I am sorry if the information provided by me are not sufficient. Yes, I have tried using simple available methods such as,
Using video tag in _layout.cshtml file as follows.
HTML code:
<div class="fullscreen-bg">
<video loop muted autoplay poster="images/background.jpg" class="fullscreen-bg__video">
<source src="../../wwwroot/video/background.mp4" type="video/mp4">
</video>
</div>
CSS code:
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The video file is saved in images folder of wwwroot folder. It is a mp4 file.
I have tried several codes similar to above code, but it does not work in ASP.NETcore web app.
I ran into a similar problem, once. This could be solved by few codes added to the _layout.cshtml. Following is the method I followed to solve the issue. I hope this might help you to solve your issue, too.
I made the following changes in the _layout.cshtml file.
In _layout.cshtml you can find the following code snippet:
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
Modify it as follows:
<div class="container embed-responsive">
<main role="main">
<div>
<video autoplay muted loop poster="">
<source src="" data-src="https://webtests.blob.core.windows.net/samplevideo/background.mp4" type="video/mp4">
</video>
<div class="container">
#RenderBody()
</div>
</div>
</main>
</div>
In the 'body' tag, add the bootstrap classes 'jumbotron' and 'jumbotron-fluid' as follows.
<body class="jumbotron-fluid jumbotron">
In the 'nav' tag, add the bootstrap class 'fixed-top' as follows (otherwise navbar is hidden under the layers and not clickable):
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3 fixed-top">
Now, after the </html> tag at the end, add the following script.
<script>
function backgroundVideo() {
$("video source").each(function () {
var sourceFile = $(this).attr("data-src");
$(this).attr("src", sourceFile);
var video = this.parentElement;
video.load();
});
}
window.onload = backgroundVideo;
</script>
Next modify the bootstrap classes as follows. You may change the properties of the classes until the desired output is obtained.
<style>
.jumbotron {
background-color: #454545;
}
.jumbotron .hero-section {
position: fixed;
z-index: 1;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.6;
background: black;
}
.jumbotron .container {
z-index: 2;
position: relative;
}
</style>
If you may wonder how I get the 'data-src' URL for the video. It is very easy. Follow the steps below.
Create an Azure account for free. (you can use your university mail/GitHub student package or just use the credit card number)
Search for 'Azure blob storage' and create a 'container' with public access enabled. (This can be done when creating the container)
screenshot
Next upload the video file to blob storage and get the URL. screenshot
Now you can use that URL directly in the project.
You can further decrease the video file size using this online converter without affecting the quality: https://www.freeconvert.com/video-compressor
You can get the added benefit that your project size becomes less since the heavy media files are stored in the cloud.
This solved my problem. I hope you may use it wisely. Please feel free to suggest more. I am also learning and highly value your opinion.
I think it is the path problem, wwwroot is a web root path when you run it. So the path need to be changed as:
<source src="~/video/background.mp4" type="video/mp4">
Edit:
It is possible that browser has compatibility issues with the transcoded video. You can also use videojs.
<div>
<video id="my-video" class="video-js" controls preload="auto" width="1296" height="728"
poster="video/cover.png" data-setup="{}">
<source src="~/images/1.mp4" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
</div>
#section Scripts{
<link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.10.2/video.min.js"></script>
#*If you'd like to support IE8*#
#*<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"> </script>*#
<script>
var my_video = videojs('my-video');
videojs('my-video').ready(function () {
var myvideo = this;
myvideo.play();
});
</script>
}
My PWA in a desktop browser is not really cool (because i don't have a lot of information to show).
And I would like to limit the width to 768px.
I tried many solutions, but i can't to change elements in position "fixed" like v-navigation, v-footer, v-dialog, ...
they are always 100% of the width of the browser.
I tried this in app.vue or in index.html:
html,body,#app {
max-width:768px !important;
overflow: hidden;
}
and last time I tried this in index.html:
#mytable {
width: 100%;
overflow: hidden;
}
#mytable td{
width:50%
}
<table id="mytable">
<tr>
<td>
<div id="app"></div>
</td>
<td>other half</td>
</tr>
</table>
But no solutions works.
Thanks for your help
Marco
Your problem seems you need different layout in function of screen size. You have several solutions from media queries to simple margin. Here I will explain how to do what you want with just margin.
I advise you to use a div to wrap your content and do not apply all your style in your #app container. Why ? Because you can imagine for instance that you want a top bar that take all the width and a content that take only 768px. If you make your layout in only one block this will be very complex. Separation in several block is a good strategy to have a modulabe UI. So we will use this template. You can make whatever you want in the .content div.
<div id="app">
<!-- Here we can imagine a top bar -->
<div class="content">
<!-- Display whatever you want -->
</div>
</div>
First you need to prepare your app container to display your application in all screen. I suggest this css :
html,body,#app {
overflow: hidden; // If content is large it will display scroll bar
height: 100vh; // Tell to your browser to take 100% of the available viewport height
}
Then you can define the css of the .content block :
.content {
max-width: 768px; // Max-width you want
height: 100%; // Take all the height available
margin: 0 auto; // Display div at the center
}
Here is an example: jsFiddle
If you are very interested in layout design, I strongly advise you to look into flex box and css grid.
I'm designing a joomla horizontal scroll website by specifying the width of the body to be 4500px wide and absolute positioning the content I want (tried loads of different ways and this one works the best for me). The problem is bootstrap tooltips dont position themselves correctly if I specify data-position"bottom"
I've tried adding { container: 'body' } to the js tooltip initialisation but it does not fix the problem (as the width of the body is wider than the viewport).
It's annoying the heck out of me, can anyone help please.
I've create a bootply and the code is below for reference
http://www.bootply.com/x1xfg7Z19J
The JS is as follows:
$("[data-toggle=tooltip]").tooltip({container:'body'});
the CSS is as follows:
body {
width: 4500px;
position:relative;
height: 100vh;
overflow-x: visible;
}
.dyno {
position: absolute;
transition: none;
}
.zap-fb {
background-color:#456789;
background-size: 100% 100%;
}
.zap-fb:hover {
background-color:#453698;
}
.zap-li {
background-color:#763456;
background-size: 100% 100%;
}
.zap-li:hover {
background-color:#854a34;
}
.zap-pi {
background-color:#912643;
background-size: 100% 100%;
}
.zap-pi:hover {
background-color:#7269c3;
}
The HTML is as follows:
<p>Scroll to the right to see the tooltip issue. If you position the squares around the center of the screen and hover you will see the bottom positioned tooltip way off to the left. If you position the squares to the right of the screen and hover to see the tool tip it is almost in the right position. Note without body position: relative, the tooltip boxes are wierd dimensions</p>
<a style="width:50px; height:50px; left:3144px; top:20px;" class="zap-fb dyno" data-block="268,292,left,3144,top,20" href="#" target="_blank" title="Spread the Word, Like Us on Facebook" data-toggle="tooltip" data-placement="right"></a>
<a style="width:30px; height:30px; left:2900px; top:10px;" class="zap-li dyno" data-block="240,250,left,2900,top,10" href="#" target="_blank" title="Promote your business whilst promoting ours" data-toggle="tooltip" data-placement="bottom"></a>
<a style="width:70px; height:70px; left:2700px; top:10px;" class="zap-pi dyno" data-block="200,208,left,2700,top,10" href="#" target="_blank" title="Share our work with the world" data-toggle="tooltip" data-placement="left"></a>
EDIT: posted the problem on the bootstrap github issues page: official response "Closing as a won't fix since it's v3." So I guess it is an issue but one that I've got to live with. I did try the scenario with bootstrap 4alpha and the tooltips position themselves correctly.
EDIT 2: using bootplys bootstrap version select, I've found that prior to the introduction of bootstrap 3.2.0, tooltips aligned correctly. I'll try and download 3.1.1 and see if I can spot the error.
I've encountered an odd behavior in a Windows8 app that I'm building with WinJS, javascript, and HTML. In a particular Page that I'm implementing, there are several divs that have CSS rules like this:
.col {
border: 1px solid none;
overflow-x: hidden;
overflow-y: auto;
height: 100%;
margin: 0px;
width: 100%;
}
The problem is when I invoke the main app bar by right clicking, the scrolled content in the div snaps to the top of the div. In other words, the scroll position of the div is lost. I've tried a host of ways to fix, but nothing has come up. How can I prevent the scrolled content from jumping around upon invoking the App Bar.
Thanks!
suggest to use -ms-grid for the page. The app bar will overlap the div in that case, which is ok and likely right behavior that you can see in other apps also.
html:
<div class="test5 fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">test page</span>
</h1>
</header>
<section class="content" aria-label="Main content" role="main">
<div class="test-content">
Text here.
</div>
</section>
</div>
<div id="appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button"></button>
</div>
css:
.test5.fragment section[role=main] {
display: -ms-grid;
-ms-grid-rows: 1fr;
-ms-grid-columns: 1fr;
}
#Sushil is correct. AppBar is an overlay control, so you should place it next to the fragment div, not inside it. #Sushil's code shows how to do it.
Placing an appbar inside the fragment has performance penalties as it will need to be rendered every time a user navigates to that page. Another undesirable side effect is that all input to the appbar will propagate to the fragment. This is the problem you are facing.
In theory, you can listen to the various input events for mouse, keyboard, touch and call preventDefault on them. But it is not recommended.
Currently I'm embedding Youtube videos with the following HAML code in a Twitter Bootstrap based site:
.row
.span12
%iframe.span11{ :height => "720", :frameborder => "0", :allowfullscreen => nil, :src => v.video_url }
Unfortunately, this doesn't respond well when resizing the browser or on mobile devices because of the static height.
What would be a better (more dynamic and responsive) way to implement this embedded iframe for Youtube?
Try this "Responsive video CSS", it works perfect for me: https://gist.github.com/2302238
<section class="row">
<div class="span6">
<div class="flex-video widescreen"><iframe src="https://www.youtube-nocookie.com/embed/..." frameborder="0" allowfullscreen=""></iframe></div>
</div>
<div class="span6">
...
</div>
</section>
I implemented a pure CSS solution which works great.
Here is an example of code in my view using the iframe code generated in YouTube.
<div class="video-container">
<iframe width="300" height="168" src="http://www.youtube.com/embed/MY__5O1i2a0" frameborder="0" allowfullscreen></iframe>
</div>
Here is an example of code in another view where instead of using iframe I used the body field generated from the AutoHtml gem, which is used for embedding different types of video links into a web page. This is good if you have a model where a link needs to be dynamically embedded into the same web page.
<div class="video-container">
<span style="text-align: center;"><%= #livevideo.body_html %></span>
</div>
Here is the CSS code:
.video-container {
position: relative; /* keeps the aspect ratio */
padding-bottom: 56.25%; /* fine tunes the video positioning */
padding-top: 60px; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Here is the YouTube video which explains in great detail how the code works and give one or two blog posts to check out.
http://www.youtube.com/watch?v=PL_R3zEjqEc
Bootstrap 3.2.0 comes with a several improvements and a large number of bug fixes. A framework for building websites with a responsive design, Bootstrap was missing support for responsive , and elements, feature added in this latest version.
The HTML for a responsive YouTube 16:9 video that adjusts its size based on the width of the page it is displayed in looks like this:
On your container(maybe DIV) add class="embed-responsive embed-responsive-16by9"
This is probably best done with jQuery: http://www.seanmccambridge.com/tubular/ or http://okfoc.us/okvideo/
Just to automatize #Bart's answer, I've created a simple Javascript snipped that automatically wraps iframe elements within <div class="flex-video">
$(document).ready(function() {
$('iframe').each(function() {
$(this).wrap('<div class="flex-video"></div>');
});
});
If using bootstrap, the method below is without a doubt the easiest way to implement a responsive embed:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Documentation can be found here: http://getbootstrap.com/components/#responsive-embed.