I have a canvas fullscreen over a webpage.
The size gets handled in processingjs.
<div id="canvasDiv">
<canvas id="processingCanvas" data-processing-sources="resources/processing/canvas01.pde"> </canvas>
</div>
Behind the canvas is a lot of text. The problem is i can't scroll on a iPad anymore cause the canvas is on top.
Is there a way to ignore the canvas but still show it on top?
This is the current css:
#canvasDiv {
position: absolute;
left: 0;
z-index: 999;
}
#processingCanvas {
position: fixed;
top: 0;
left: 0;
}
Here is how to let elements fall through to underlying elements:
If the browser is Chrome, Firefox, Safari, Blackberry or Android, but not IE or Opera, you can use pointer-events to tell the canvas not to handle click/touch events and then the clicks/touches will be handled by the underlying elements. So,
in CSS:
#topCanvas{ pointer-events: none; }
But in IE and Opera, you have to be tricky:
Hide top canvas,
Trigger event on bottom element,
Show top canvas.
This code shows how to trigger events on underlying elements:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#wrapper{ width:200; height:200;}
#bottom{ position:absolute; top:0; left:0; width:200; height:200; background-color:red; }
#top{ position:absolute; top:0; left:0; width:200; height:200; background-color:blue; }
</style>
<script>
$(function(){
$('#top').click(function (e) {
$('#top').hide();
$(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
$('#top').show();
});
$("#bottom").click(function(){ alert("bottom was clicked."); });
}); // end $(function(){});
</script>
</head>
<body>
<div id="wrapper">
<canvas id="bottom"></canvas>
<canvas id="top"></canvas>
</div>
</body>
</html>
Related
I am attempting to convert a layout that is currently using frames that works perfectly having a fixed header (this section needs to be named Banner) and a frame on the bottom that scrolls whenever a user posts something in the chatroom (named Body). This works great for frames. I was looking at another conversion post here on stack and trying to use it.
The frame coding is:
<html>
<head><title>$main:roomname$</title></head>
<frameset cols="100%"><frameset rows="120,*">
<frame name="BANNER" src="$BASE$/BANNER?$CONFIG$" scrolling="AUTO" marginheight="1">
<frameset cols="*,140" FRAMEBORDER=YES FRAMESPACING=2 BORDER=2>
<frame name="BODY" src="$BASE$/BODY?$CONFIG$" scrolling="YES">
<noframes>
<body>
Frames are required, sorry folks.
</body>
</noframes>
</frameset></frameset>
</html>
What I'm trying to do is below. The room name pulls and shows as it should for the browser, but it doesn't pull any of the other information. It just shows a white screen.
edit Trying out more coding when I view the page source after trying to load it, it shows the full url pulled from $BASE$/BODY?$CONFIG$ , it just doesn't display it inside the Div like I want it to.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="script.js"></script>
<title>$main:roomname$</title>
<script>
$(document).ready(function(){
$("#BANNER").load("$BASE$/BANNER?$CONFIG$");
});
</script>
<script>
$(document).ready(function(){
$("#BODY").load("$BASE$/BODY?$CONFIG$");
});
</script>
<style>
.BANNER {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 140px;
overflow: hidden;
}
.BODY {
position: absolute;
top: 150px; /* 140px (header) + 10px top padding */
left: 10px; /* 10px padding */
right: 10px; /* 10px padding */
bottom: 10px; /* 10px padding */
overflow: auto;
}
</style>
</head>
<body>
<div id="BANNER"></div>
<div id="BODY"></div>
</body>
</html>
edit 2** with suggestions from below.
Preview : http://embed.plnkr.co/f7LatqNW5hxY2K781edV/preview
HTML main:
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="BANNER"></div>
<div id="BODY"></div>
</body>
</html>
HTML : 1.html(file that you are trying to embed) :
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
JS:
$(document).ready(function(){
$("#BANNER").load("1.html");
});
If the file is not in your local server then may be you need to do some workaround as described here
Good morning everyone,
I have a quick question about some background images in MapBox. For those who don't know MapBox, it is a online provider of custom maps that quickly create beautiful interactive maps and data visualizations. I created a map project, and wanted to put that map as a background image. I am given an embed option and here is my code so far:
<!DOCTYPE html>
<html>
<head></head>
<body>
<iframe width='100%' height='800px' frameBorder='0' src='https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA'></iframe>
</body>
</html>
However, I want the Mapbox html to take the entire background.I have tried placing the url provided into a background-image: url() in css, but it does not function.
body {
background-image: url("https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA");
}
Does anyone know how I might do this?
Thanks,
Eric
Jon here from Stack - I actually do most of the geo stuff here.
If you want to do this the proper way, you're going to have to embed it in a div and put the content that you want over it in its own container div. You can see a pretty straightforward implementation of what you want in the API docs on Mapbox. You can adjust the settings of the map using the JavaScript API (hiding the controls, setting the center, etc.).
L.mapbox.accessToken = 'pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA';
var map = L.mapbox.map('map-container', 'ericpark.k8ehofdl');
html,
body {
height: 100%;
margin: 0px;
padding: 0px
}
#map-background,
#map-container,
#map-overlay,
#content {
width: 100%;
min-height: 100%;
position: absolute;
}
#map-background {
z-index: -1;
}
#map-container {
z-index: 0;
}
#map-overlay {
z-index: 1;
background: none;
}
#content {
z-index: 0;
}
<html>
<head>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
</head>
<body>
<div id="map-background">
<div id="map-container">
</div>
<div id="map-overlay">
</div>
</div>
<div id="content">
<!-- This is where your regular content should be -->
<p style="color: #fff; text-align: center; font-family: Helvetica; font-size: 2.0em;">This is where your foreground code should be.</p>
</div>
</body>
</html>
Good luck Eric :)
EDIT: Restoring interactivity
I've changed the code to get rid of the overlay and some of the blocking styles. Try that.
L.mapbox.accessToken = 'pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA';
var map = L.mapbox.map('map-container', 'ericpark.k8ehofdl');
html,
body {
height: 100%;
margin: 0px;
padding: 0px
}
#map-container {
width: 100%;
min-height: 100%;
position: absolute;
}
#content {
position: absolute;
}
<html>
<head>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
</head>
<body>
<div id="map-container">
</div>
<div id="content">
<!-- This is where your regular content should be -->
<p style="color: #fff; text-align: center; font-family: Helvetica; font-size: 2.0em;">This is where your foreground code should be.</p>
</div>
</body>
</html>
To mimic a "background-image" effect with mapbox you could do something like the following:
<!DOCTYPE html>
<html>
<head>
#map_bg {
position:relative;
width:100%;
height:800px;
}
#map_bg iframe {
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
}
.content {
z-index:1;
position:relative;
}
</head>
<body>
<div id="map_bg">
<iframe class="mapbox" frameBorder='0' src='https://a.tiles.mapbox.com/v4/ericpark.k8ehofdl/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZXJpY3BhcmsiLCJhIjoiS3pKZ0duVSJ9.tLg7r9w5zppYheaOYcv_DA'></iframe>
<div class="content">
This is other content on the page.
</div>
</div>
</body>
</html>
You position the map absolutely relative to it's parent which allows content to overlap it (much like a background image). By adding a z-index:1 to the other content you can ensure it appears on top of the map;
I dont think just putting link as background image will work. Mapbox might be rendering map in canvas.
I just found this. Try this. I am not much familiar with mapbox
I am trying to make a website for school about gothic cathedrals, and can not get the css class to work. I am trying to make a menu on the side of the page that will stay in the same position, and just typed 'hi' to test it. Nothing I have looked up is working and it would be greatly appreciated if someone could tell me what I'm doing wrong.
<html type = "text/css">
<head>
<script>
div.mydiv {
color: red;
position: fixed;
left: 0;
top: 200px; /* 200px from top */
}
</script>
<title>
Cathedral Project
</title>
</head>
<body>
<h1>
<marquee behavior = "alternate" style = "background-color:#828180" scrolldelay = "1">
<img src="gothic.jpg">
</marquee>
</h1>
<div class="mydiv">hi
</div>
</body>
</html>
Currently your css is in a <script> tag. It needs to be in a <style> tag. It should look like this:
<style type="text/css">
.mydiv { /* styles go here */ }
</style>
Change
<script>
div.mydiv {
color: red;
position: fixed;
left: 0;
top: 200px; /* 200px from top */
}
</script>
To
<style>
div.mydiv {
color: red;
position: fixed;
left: 0;
top: 200px; /* 200px from top */
}
</style>
You place your CSS code in the <style type="text/css"></style> tag, not in the <script></script> tag.
And it would be great for you if you indent the code, it will help you not making silly errors like missing the tags.
I have a link in html and i am using :after pseudo element to insert some content and style that content.
It is working fine in FF & IE9. but not working in IE8.
when i click on "Click" link, container div's background color changes.
but content inserted by :after not takes that color as background in IE8.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"> </script>
<script type="text/javascript">
$(function(){
$(".clickMe").click(function(){
$(".yellow").addClass("red").removeClass("yellow");
});
});
</script>
<style>
.testLink {
display: block;
width: 109px;
background: inherit;
max-height: 32px;
overflow: hidden;
}
.testLink:after {
content: "...";
background: inherit;
position: relative;
width: 45px;
margin-left: -20px;
padding: 0 5px;
background-image:none;
background-color:inherit;
font-size: 14px;
}
.yellow{ background:yellow;}
.red{ background:red ;}
</style>
</head>
<body>
<div class="yellow">
linkTextHere
</div>
click
</body>
</html>
Any expert advice would be appreciated.
thanks in advance..
Take a look at the browser support of inherit for IE8
http://www.w3schools.com/cssref/pr_background-color.asp
Note: The value "inherit" is not supported in IE7 and earlier. IE8
requires a !DOCTYPE. IE9 supports "inherit".
So they seem to have a general problem with it considering the Doctype. Maybe try a different one than html5 just to make sure?
I have been trying to fit a div into the browser's working area by setting div's
width and height as 100 %. Despite i am getting a vertical and horizontal scroll bars
on the screen.
HTML:
<html>
<body>
<div id="test">
</div>
</body>
</html>
CSS:
#test{ width:100%; height:100%; background-color:red; }
body{ margin:0; padding:0; }
I also tried this with scripting, But same result returned.
SCRIPT:
$('#test').css({'width':$(window).width(),'height':$(window).height()});
I Have Been Testing This With IE9. Any Ideas To Avoid This.?
Solution Obtained:
The Problem is, i Forgot to specify the border attribute for Body
body{ margin:0; padding:0; border:0;}
Now its Fine, The H and V scroll bar Got Vanished. Any way Thank you guys for your timely response.
Depending on IE version / quirks mode, either:
$(document).ready(function () {
$('#test').css('height', $(window).innerHeight());
});
or
$(document).ready(function () {
$('#test').css('height', document.body.clientHeight);
});
will work. You can do the same with widths as well.
$(window).innerWidth();
document.documentElement.clientWidth;
Using your code & my code in IE 9 worked good for me. Since it apparently didn't work for you, my only other suggestion is to ensure there are no other borders/margins/paddings that could be interfering.
<html>
<head>
<title>hi</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
body{ margin:0; padding:0; }
#test{ width:100%; height:100%; background-color:red; }
</style>
</head>
<body>
<div id="test">
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#test').css('height', $(window).innerHeight());
});
</script>
</body>
</html>
body{
margin:0;
padding:0;
}
#test{
position:absolute;
top: 0px;
left: 0px;
width:100%;
height:100%;
border:none;
background-color:red;
}
or
#test{
position:absolute;
top: 0px;
left: 0px;
right:0px;
bottom: 0px;
border:none;
background-color:red;
}