I've got a problem with firefox for mac and z-index.
I've got 3 div: header, wrapper and footer; inside of them i've got 3 swf header.swf, wrapper.swf and footer.swf.
This is the code:
<div id="header">
<div id="navigation">
<script type="text/javascript">
var fo = new FlashObject("fla/head.swf", "top", "960", "118", "7", "#fff", true);
fo.addVariable("quality", "best");
fo.addVariable("scale", "noscale");
fo.addParam("wmode", "transparent");
fo.write("navigation");
</script>
</div>
</div>
<div id="wrapper">
<div id="flashContent" class="home">
<script type="text/javascript">
var fo = new FlashObject("fla/home.swf", "top", "1660", "840", "7", "#fff", true);
fo.addVariable("quality", "best");
fo.addVariable("scale", "noscale");
fo.addParam("wmode", "transparent");
fo.write("flashContent");
</script>
</div>
</div>
<div id="footer" class="fHome">
<div id="news">
<script type="text/javascript">
var fo = new FlashObject("fla/footer.swf", "top", "960", "130", "7", "#292929", true);
fo.addVariable("quality", "best");
fo.addVariable("scale", "noscale");
fo.addParam("wmode", "transparent");
fo.write("news");
</script>
</div>
</div>
and this is the css code:
body {overflow-x:hidden}
#header {position:absolute; top:0px; left:0px; background:url(../img/bkgHeader.jpg) top left repeat-x; width:100%; height:118px; text-align:center; z-index:50}
#navigation {width:960px; height:118px; margin:0 auto;}
#wrapper {background:#fff; position:absolute; top:60px; left:0px; width:100%; height:840px; text-align:center; z-index:1}
#news {width:960px; height:130px; margin:0 auto;}
#flashContent {width:1660px;margin:0 auto;}
.home {height:840px;}
#footer {position:absolute; left:0px; background:url(../img/bkgFooter.jpg) bottom left repeat-x; width:100%; height:130px; text-align:center; z-index:3}
.fHome {top:880px;}
the problem is that wrapper div dont work good with zindex and cant stay below the header.
So rollover and rollout actions doesnt work!
pls help!
for z-index also negative numbers are allowed.... maybe can help? Or give an extremely high z-index value to the other guys!
Related
I want to fit the video to the screen and scrolling needs to be disabled.
Problem:
Instead of being full screen it is overflowing from the screen.
What am I doing wrong here?
<!DOCTYPE html>
<html>
<head>
<style>
.videosize {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
height:auto;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/indigo-player#1/lib/indigo-player.js"></script>
</head>
<body>
<div id="playerContainer" class="videosize">
<script>
const config = {
sources: [
{
type: 'hls',
src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
}
],
};
const element = document.getElementById('playerContainer');
const player = IndigoPlayer.init(element, config);
</script>
</div>
</body>
</html>
Make the <body> element have a class where
position: relative , width: 100% and overflow: hidden are declared or use the inline style="..."
After doing this the video should take the width of the parent with a relative position.
The solution can be this:
Added position:fixed; in css
Added height:100%; in css
Added background: url('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8') no-repeat center center; in css
Added background-size: 100%; in css
Know Issues
NavigationUI visible only in full screen mode (F11 or F) given of the script (Need to change the script to fix these) but it still work.
Final Code
<!DOCTYPE html>
<html>
<head>
<style>
.videosize {
position:fixed;
z-index:-1;
top:0;
left:0;
width:100%;
height:100%;
background: url('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8') no-repeat center center;
background-size: 100%;
}
</style>
</head>
<body>
<div id="playerContainer" class="videosize">
</div>
<script src="https://cdn.jsdelivr.net/npm/indigo-player#1/lib/indigo-player.js"></script>
<script>
const config = {
sources: [
{
type: 'hls',
src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
}
],
};
const element = document.getElementById('playerContainer');
const player = IndigoPlayer.init(element, config);
</script>
</body>
</html>
I want to autoplay the video when it comes in the viewport and should stop playing the video when it goes out of the viewport with ionic 3, can anyone please suggest how to do that?
Yes you can do it.
$(window).scroll(function(){
var trackerOffset = $('.tracker').offset().top; // offset in document
var trackerPosition = trackerOffset - $(window).scrollTop(); // offset in viewport
$('.debug-status').html('video status: ' + checkTrackerPos(trackerPosition));
}).trigger('scroll');
function checkTrackerPos(trackerPosition){
var triggerTop = $('.trigger-top').position();
var triggerBottom = $('.trigger-bottom').position();
if (trackerPosition >= triggerTop.top && trackerPosition <= triggerBottom.top ) {
return 'playing!';
}
return 'paused';
}
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body {
text-align:center;
font-family:Arial,sans-serif;
}
.debug {
font-size:20px;
position:fixed;
left:50%;
top:50%;
width:30vw;
margin-left:-15vw;
margin-top:-35px;
padding:15px;
background:rgba(0,0,0,0.05);
}
.viewport {
position:relative;
width:100vw;
height:200vh;
border:2px dashed red;
display:flex;
justify-content:center;
flex-direction:column
}
/* Position these two as you please */
.trigger-top,
.trigger-bottom {
width:100%;
text-indent:-50%;
position:fixed;
top:25%;
border-top:1px dotted #000;
}
.trigger-bottom {
top:auto;
bottom:25%;
}
.video-wrapper {
position:relative;
color:blue;
border:1px solid blue;
width:400px;
height:300px;
margin:0 auto;
}
.video-wrapper .tracker {
position:absolute;
top:50%;
left:50%;
width:1px;
height:1px;
padding:1px; /* these 3 attributes are here just for the show */
border:1px solid red;
color:red;
line-height:1px;
text-indent:5px; /* again, just for the show */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="viewport">
<div class="debug">
<div class="debug-trigger"></div>
<div class="debug-pos"></div>
<div class="debug-status"></div>
</div>
<div class="trigger-top">top trigger</div>
<div class="trigger-bottom">bottom trigger</div>
<div class="video-wrapper">
video
<div class="tracker">tracker</div>
</div>
</div>
Refer this answer: https://stackoverflow.com/a/50479802/10971575
Could just call a JS -function when you scroll.
<div onscroll="myFunction()">
And the JS-function would roughly look like this:
if (end of viewport > document.body.scrollTop > start of viewpoint || end of viewport > document.documentElement.scrollTop > start of viewpoint) {
vid.play();
}else{vid.pause();}
Does anyone have MapBox experience?
I'm trying to implement a personal map with specific markers, complete with pan and zoom features. I was trying to implement the code from the website that does just this that comes directly from the MapBox website. However, when I implemented in to my own page I got the following:
As you can see there is a weird paneling effect happening as well as white blocks around the markers. The map is pretty ineffective this way so I was hoping someone out there knew the solution.
Here's the code I used:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Pan and vertical zoom</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; height:500px}
</style>
</head>
<body>
<style>
.ui-control {
font:bold 12px/28px Helvetica, sans-serif;
text-align:center;
position:absolute;
top:10px;
left:10px;
z-index:1000;
}
.ui-pan {
position:absolute;
top:0;
left:0;
z-index:1000;
}
.ui-pan .panner {
background:#fff;
color:#404040;
font-size:9px;
position:absolute;
top:0;
left:0;
width:28px;
height:28px;
border:1px solid rgba(0,0,0,0.4);
border-radius:3px;
}
.ui-pan .panner:hover { background-color:#f8f8f8; color:#404040; }
.ui-pan .panner.up { left:28px; }
.ui-pan .panner.right { left:58px; top:28px; }
.ui-pan .panner.down { left:28px; top:58px; }
.ui-pan .panner.left { top:28px; }
.ui-zoombar {
background:#FFF;
position:relative;
top:93px;
left:28px;
width:28px;
height:200px;
border:1px solid rgba(0,0,0,0.4);
border-radius:3px;
cursor:pointer;
}
.ui-zoombar:hover { background-color:#f8f8f8; }
.ui-zoombar .handle {
position:absolute;
cursor:pointer;
width:26px;
height:28px;
background:#404040;
color:#fff;
border-radius:2px;
}
.ui-zoombar .handle:hover { background:#303030; }
</style>
<div class='ui-control'>
<div id='pan' class='ui-pan'>
<a href='#' id='up' class='panner up'>▲</a>
<a href='#' id='right' class='panner right'>▶</a>
<a href='#' id='down' class='panner down'>▼</a>
<a href='#' id='left' class='panner left'>◀</a>
</div>
<div id='zoom-bar' class='ui-zoombar dragdealer'>
<div id='handle' class='handle'>0</div>
</div>
</div>
<div id='map'> </div>
<!-- If you plan to use this example, download dragdealer from
https://code.google.com/p/dragdealer/ instead of hotlinking it like this -->
<script src='https://dragdealer.googlecode.com/svn/tags/0.9.5/dragdealer.js'></script>
<script>
var zooms = 19;
var handle = document.getElementById('handle');
var map = L.mapbox.map('map', 'tlchang.ikgi2358', {
zoomControl: false
})
.setView([42.0, -3.5], 2);
// Configure Dragdealer to update the map zoom
var zoom_bar = new Dragdealer('zoom-bar', {
steps: zooms,
snap: true,
horizontal: false,
vertical: true,
callback: function(x, y) {
var z = y * (zooms - 1);
map.setZoom(z);
handle.innerHTML = z;
}
});
// Round the zoom value the number looks presentable.
map.on('zoomend', function() {
var z = Math.round(map.getZoom());
zoom_bar.setValue(0, z / 19);
handle.innerHTML = z;
});
document.getElementById('left').onclick = function(e) { e.preventDefault(); map.panBy([-100, 0]); };
document.getElementById('right').onclick = function(e) { e.preventDefault(); map.panBy([100, 0]); };
document.getElementById('down').onclick = function(e) { e.preventDefault(); map.panBy([0, 100]); };
document.getElementById('up').onclick = function(e) { e.preventDefault(); map.panBy([0, -100]); };
</script>
</body>
</html>
Any ideas?!
This example works fine on its own.
However, when I implemented in to my own page I got the following:
This is probably the issue. If you can provide a link to your own page, then that would help - you probably have some over-eager CSS rules that are causing this problem.
I've been trying to make two divs stick to the top of the page after the user scrolled past these divs. Both divs are positioned at the same hight. This is what I have been using from other stackoverflow answers:
Html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top)
$('#blockleft').addClass('sticky')
else
$('#blockleft').removeClass('sticky');
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
</head>
<body>
<div id="header"></div>
<div id="sticky-anchor"></div>
<div class="container">
<div id="blockleft"></div>
<div id="blockright"></div>
<div id="content"></div>
</div>
</body>
Css:
body {
margin: 0;
padding: 0;
}
#header {
height:200px;
background-color:#666;
}
#blockleft {
width:100px;
height:500px;
margin-top:10px;
background-color:#090;
float:left;
}
#blockright {
width:100px;
height:500px;
margin-top:10px;
background-color:#0F3;
float:right;
}
#content {
width:500px;
height:2000px;
background-color:#0CF;
margin:auto;
}
.container {
width:800px;
margin:auto;
}
.sticky {
position: fixed;
top: 0;
}
The script is working fine on one div, but when using the script twice it automatically moves the right div to the left and this one is not sticking to the top of the page.
I was hoping someone could help me out with this one.
Edit: Recreated the problem in a new document
Since the divs lose float property when we make it position:fixed, they both overlap with each other. In order to make them in their position, we need to apply right distance for the right div. To fix this, replace your script code as follows.
<script type="text/javascript">
function sticky_relocate() {
var containerWidth = $(".container").outerWidth(true);
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top)
{
$('#blockleft').addClass('sticky');
$('#blockright').addClass('sticky');
$('#blockright').css("right", (containerWidth-800)/2 + "px");
}
else
{
$('#blockleft').removeClass('sticky');
$('#blockright').removeClass('sticky');
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
The code $('#blockright').css("right", (containerWidth-800)/2 + "px"); calculates the right distance value for the right div and adds css property right:XXXpx to that div while scrolling. The code var containerWidth = $(".container").outerWidth(true); fetches the width of the container div with its margin value (since margin is made auto, we need definite number for calculation)
I tried your script but it isn't working right. I have edited my code below to show exactly what I am working with. Thank you so much for being helpful.
Quazi
Hi,
I am very new to JQuery.
I am trying to get a div to fade in after a click event and then hide after click anywhere. I have three divs set up to do this with css set as display:none. The problem is that the script does not work in IE8 and only works in ff/safari if I double click or triple click the menubar links below.
I am using the following code to show/hide these divs on mouse click:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
body,
html {
margin:0;
padding:0;
color:black;
background:black;
color:black;
}
#logo {
margin-top:1%;
width:12%;
margin-left:5%;
padding:1%;
border:2px solid #FF8c00;
}
#showsbanner {
margin-top:1%;
width:60%;
position:absolute;
right:2px;
}
#wrap {
width:90%;
margin:0 auto;
background:black;
color:black;
}
#header {
padding:5px 10px;
background:black;
color:#ef9c00;
}
h1 {
color:#35002c;
font-family:"verdana";
font-size:25px;
}
h2 {
color:#044476;
font-family:"verdana";
font-size:18px;
}
h3 {
color:#044476;
font-family:"verdana";
font-size:15px;
}
#nav {
padding:5px 10px;
width:89%;
margin-left:5%;
background:#ff8c00;
border:2px solid darkblue;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
color:white;
}
#menubar {
float:left;
width:40%;
padding:1%;
background:#ff8c00;
margin-bottom:1%;
border:2px solid darkblue;
}
#bcity {
float:right;
width:50%;
padding:1%;
background:#ff8c00;
margin-bottom:1%;
border:2px solid darkblue;
}
#aicbk {
display:none;
float:right;
width:50%;
padding:1%;
background:#ff8c00;
margin-bottom:1%;
border:2px solid darkblue;
}
#pdil{
display:none;
float:right;
width:50%;
padding:1%;
background:#ff8c00;
margin-bottom:1%;
border:2px solid darkblue;
}
#footer {
clear:both;
padding:1px, 1px;
background:#ff8c00;
width:100%;
border:2px solid darkblue;
}
#footer p {
color:white;
font-size:12px
}
* html #footer {
height:1px;
}
//The last four lines are an IE bug fix
</style>
<script type="text/javascript" src="homepage_files/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var gLastH = null;
var gLastId = null;
$('.toggleh').hide();
$('.toggle').click(function(e) {
$('.toggleh:visible').fadeOut('slow');
gLastId = $(this).attr('id');
console.log('#' + gLastId + 'h');
gLastH = $('#' + gLastId + 'h');
$(gLastH).fadeIn('slow');
e.stopPropagation();
});
$('*').click(function(e) {
if ($(this).attr('id') != gLastId) {
$(gLastH).fadeOut('slow');
}
e.stopPropagation();
});
});
</script>
stuff...
text here
text here2
text here3
stuff......
<div class="toggleh" id="toggle2h">
<div id="aicbk">
stuff....
</div>
</div>
<div class="toggleh" id="toggle3h">
<div id="pdil">
stuff..
</div>
</div>
<div id="footer">
stuff..
</div>
Here's a working sample, tested under Chrome 8.0.552.0 dev:
<html>
<head>
<title>S.O. 3920865</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var gLastH = null;
var gLastId = null;
$('.toggleh').hide();
$('.toggle').click(function(e) {
$('.toggleh:visible').fadeOut('slow');
gLastId = $(this).attr('id');
console.log('#' + gLastId + 'h');
gLastH = $('#' + gLastId + 'h');
$(gLastH).fadeIn('slow');
e.stopPropagation();
});
$('*').click(function(e) {
if ($(this).attr('id') != gLastId) {
$(gLastH).fadeOut('slow');
}
e.stopPropagation();
});
});
</script>
</head>
<body>
<div id="menubar">
<div class="toggle" id="toggle1">
text here
</div>
<div class="toggleh" id="toggle1h">
some description in here I suppose
</div>
<div class="toggle" id="toggle2">
text here2
</div>
<div class="toggleh" id="toggle2h">
some description in here I suppose 2
</div>
<div class="toggle" id="toggle3">
text here3
</div>
<div class="toggleh" id="toggle3h">
some description in here I suppose 3
</div>
</div>
</body>
</html>
Perhaps you need to check jQuery UI accordion which can be what you really want.
EDIT: following 1st comment.
Use this simple code to hide/show menu (or any div)
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
Click here to toggle visibility of element #foo
<div id="foo" style="display:block">This is foo</div>