I'm trying to display a div with content over a 360° panorama with javascript.
It works perfect on IE, Firefox, Safari, Iphone, Ipad and android 3 (tablet) but doesn't work as it should on android mobile (2.3.3).
From my panorama I call a javascript function to fadein a div wich has an absolute position and display:none.
Here is the javascript
function ouvrirDiv(divnum){
$('#wrapper'+divnum).fadeIn("slow");}
function fermerDiv(divnum){
$('#wrapper'+divnum).fadeOut("slow");}
Here is my html
<div id="pano">
<noscript><table style="width:100%;height:100%;"><tr style="valign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
<script type="text/javascript">
// <![CDATA[
var swf = createswf("nantes.swf", "krpanoSWFObject", "100%", "100%");
swf.addVariable("xml", "nantes.xml");
swf.addParam("wmode","opaque");
swf.embed("pano");
// ]]>
</script>
</div>
<div id="wrapper1"><div id="scroller">
<div class="closetop">Fermer</div>
<div class="closebottom">Fermer</div>
<div id="tabContainer1">
<div class="tabs">
<ul>
<li id="tabHeader_1">Texte</li>
<li id="tabHeader_2">Photos</li>
<li id="tabHeader_3">Vidéos</li>
</ul>
</div>
<div class="tabscontent">
<div class="tabpage" id="tabpage_1">
Texte...
</div>
<div class="tabpage" id="tabpage_2">
Photos...
</div>
<div class="tabpage" id="tabpage_3">
Videos...
</div>
</div>
</div>
</div>
</div>
And the CSS
* {
margin:0;
padding:0;
}
#media only screen and (min-device-width: 800px) { html { overflow:hidden; } }
html { height:100%; }
body { height:100%; overflow: hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; -webkit-user-select:none; -webkit-text-size-adjust:none; }
#pano {
width:100%; height:100%; position:absolute; top:0px; left:0px;
}
#wrapper1 , #wrapper2 , #wrapper3 , #wrapper4 , #wrapper5 {
position:absolute;
top:0px; bottom:-60px; left:0px;
width:100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.8);
overflow:auto;
display:none;
}
#scroller {
position:relative !important;
margin:0 auto;
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
max-width: 600px;
background:transparent;
color: #fff;
margin-bottom: 60px;
text-align: justify;
}
Here is the behaviour on default android browser: the wrapper div is opened but stays behind the panorama.
On Opera mobile the panorama can't be scrolled until you call a wrapper div, but then the wrapper is over the pano (wich is correct) but you can't scroll it, you can scroll the panorama instead...
I have really no idea of the problem...
If someone has an idea, thanx very much !!!
MY TEST PAGE iS THERE : http://www.360images.fr/nantes/nantes.html
I have this problem, too. For me adding
.hide()
before to
$('divelement').fadein
works.
Related
I would like to create a dual pane view, where the top banner of the screen is fixed, while the bottom can scroll horizontally. As the user scrolls horizontally, they should still be able to see the same top banner. I've attached some sample code and a corresponding jsfiddle.
The problem is that as the user scrolls past GROUP2 to GROUP3, the top header gets cropped. I would like the header to continue across the top of the screen as the user scrolls.
<div>
<div class="header">
COMPANY NAME
</div>
<div class="scroller">
<div class="group1">
GROUP1
</div>
<div class="group2">
GROUP2
</div>
<div class="group3">
GROUP3
</div>
</div>
</div>
.header {
width:100%;
height:60px;
background:red;
}
.scroller {
overflow-y:hidden;
overflow-x:scroll;
}
.group1 {
top:80px;
left:0px;
width:500px;
position:absolute;
}
.group2 {
top:80px;
left:540px;
width:500px;
position:absolute;
}
.group3 {
top:80px;
left:1080px;
width:500px;
position:absolute;
}
try this updated fiddle
.header {
width:100%;
height:60px;
background:red;
position: fixed;
top:0px;
left:0px;
}
So quick question, I haven't been able to find the correct phrasing perhaps in google but I'm attempting to make a fixed banner will scale when the page is resized. I've found that using a percentage width works for at least the large container, however my banner container within the main container will not rescale into that adequately (The banner is extending longer than the main container).
CSS:
.contMain {
width:80%;
position: top
padding-top: 0;
border-top: 0;
margin: 0 auto;
background-color: #F1EDCC;
}
.contMain-banner {
position:fixed;
width: inherit;
background: #87AADF;
}
HTML:
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Some Title</h1>
{{> MeteorTemplate}}
</div>
</div>
The only higher level css is a .body tag in css for a background color. I am using MeteorJS for this. Cheers
Try this - codepen here
css
body {
height:100%;
width:100%;
}
.contMain {
height:150px;
width:80%;
padding:0;
margin: 0 auto;
background-color: #333333;
}
.contMain-banner {
position:fixed;
width: inherit;
height:auto;
background: #d7d7d7;
}
span {
color:#fff;
position:absolute;
top:125px;
}
HTML
<body>
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Main Content Banner</h1>
{{> MeteorTemplate}}
</div>
<span>This is the main container</span>
</div>
</body>
The title says everything. I want something like this:
The left box should be positioned in the left, the right one in the right. They both should have fixed widths, e.g. 200px. The middle div should take the size between. Its width is not set, but it takes the width that's remaining.
Thanks.
Here's a working one.
Use margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)
The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.
The margin: 0 auto; setting doesn't work perfectly in every centering situation, but it works in a whole lot of them.
reference: You Can't Float Center with CSS
HTML
<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>
CSS
.leftsidebar
{
height: 608px;
width: 60px;
background:red;
float:left; }
.rightsidebar
{
background:blue;
height: 608px;
width: 163px;
float:right;
}
.content
{
width: auto; //or any width that you want
margin:0 auto;
background:yellow;
}
Here is the DEMO http://jsfiddle.net/yeyene/GYzVS/
Working great on onReady and onResize too.
JS
$(document).ready(function(){
resizeMid();
$(window).resize(function() {
resizeMid();
});
});
function resizeMid(){
var mid_width = $('#main').width() - ($('#left').width()+$('#right').width());
$('#middle').css({'width':mid_width});
}
HTML
<div id="main">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
CSS
html, body{
margin:0;
padding:0;
}
#main {
float:left;
width:100%;
margin:0;
padding:0;
}
#left {
float:left;
width:100px;
height:300px;
margin:0;
background:red;
}
#middle {
float:left;
width:100%;
height:300px;
margin:0;
background:blue;
}
#right {
float:left;
width:100px;
height:300px;
margin:0;
background:red;
}
You can try this one FIDDLE just html and css, without javascript
<div class="container">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</div>
CSS
div {
height:500px;
position:absolute;
border:0px;
padding:0px;
margin:0px;
}
.c1, .c3 {
width: 200px;
background-color:red;
}
.c1, {
left:0px;
}
.c3 {
right:0px;
}
.c2 {
margin-left:10px;
margin-right:10px;
background-color:blue;
left:200px;
right:200px;
}
.container {
width:99%;
}
[updated]
use a table, it will adjust it's own width. float style was the first that came to my mind but it doesn't adjust the element's width to fill in the gap.
html:
<table>
<tr>
<td style="width:10%;"><div id="d1"></div></td>
<td><div id="d2"></div></td>
<td style="width:10%;"><div id="d3"></div></td>
</tr>
</table>
css:
#d1,#d3{
background-color:red;
width:100%;
height:300px;
}
#d2{
background-color:blue;
width:100%;
height:300px;
}
table{
width:100%;
height:100%;
}
DEMO
update:
if you don't want to use tables or excessive js calculations use this:
#d1,#d3{
float:left;
background-color:red;
width:10%;
height:300px;
}
#d2{
float:left;
background-color:blue;
width:80%;
height:300px;
}
DEMO
I would personally avoid using JS and do this using CSS.
You can add a #container wrapper and then define the width to whatever you want and then use % for the left right and the middle div's
Sample CSS below:
<div id="container">
<div id="left-column"> </div>
<div id="middle-column"> <p>Content goes in here and dynamically stretches</p></div>
<div id="right-column"> </div>
</div>
#container{
float:left;
width:1000px;
*background-color:blue;
}
#left-column, #middle-column, #right-column{
height:500px;
float:left;
}
#left-column, #right-column {
width:20%;
background-color:red;
}
#middle-column {
background-color:green;
width:60%;
}
I'm late to the party, still here goes.
This can be done using flexbox.
HTML
<div class="flex">
<div class="fixed-div"></div>
<div class="dynamic-div"></div>
<div class="fixed-div"></div>
</div>
CSS
.flex {
display:flex;
}
.fixed-div {
width:30px;
background-color:blue;
height:200px;
}
.dynamic-div {
width:100%;
background-color:red;
height:200px;
margin: 0px 10px;
}
You can checkout the implementation here.
The problem is, in one of my pages I have a slide, where my images are 1920x1080 while the slide is just set to 1350 as width. My images are not getting centered, you just see about 1/3 of the picture's top left-middle-ish. The slide also doesn't reach out to the ends (<---->) of the screen, there's this tiny space there. Any solutions?
Picture: http://tinypic.com/view.php?pic=29crp7a&s=6
Code
Html:
<div id="container">
<div id="banner">
<ul class="bjqs">
<li><img src="images/lamborghini/av_lp700-4_roadster_ov3_v2_1920x1080.jpg" title="This is my slideshow!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_home_1920x1080.jpg" title="Apparently it works!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_spyder_home_1920x1080.jpg" title="By Andreas!"></li>
</ul>
</div>
</div>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/basic-jquery-slider.min.js"></script>
<script>
$(document).ready(function() {
$('#banner').bjqs({
'animation' : 'slide',
'width' : 1350,
});
});
</script>
Css:
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
/* demo styles */
body{
font-family: 'Carter One', sans-serif;
}
#container{
width:100%;
padding:20px 0;
margin:0 auto;
overflow:hidden;
}
#banner {
height:300px;
width:700px;
margin:0 auto;
position:relative;
background:#fff;
#fff solid;
}
ul.bjqs-controls li a{
display:block;
padding:5px 10px;
position:absolute;
background:#000000;
color:#fd0100;
text-decoration:none;
text-transform:uppercase;
}
a.bjqs-prev{
left:0;
}
a.bjqs-next{
right:0;
}
p.bjqs-caption{
background:rgba(0,0,0,0.7);
color:#fff;
text-align:center;
}
ol.bjqs-markers{
position:absolute;
bottom:-50px;
}
ol.bjqs-markers li{
float:left;
margin:0 3px;
}
ol.bjqs-markers li a{
display:block;
height:10px;
width:10px;
border:4px solid #fff;
overflow:hidden;
text-indent:-9999px;
background:#000;
border-radius:10px;
}
ol.bjqs-markers li.active-marker a{
background:#fd0100;
}
The solution is very simple actually.
You need to set a width to your images to 100% in your CSS.
.bjqs img {
width:100%;
}
Hope that helps, good luck
I want to autoscroll a particular element either onmouseover or using an image map. I also want to hide the scrollbars for that div. The problem is...
I don't understand how to do this. I've been learning javascript for weeks now and I've only learned the useless parts. Nothing actually applicable to web design, that is. I did google it and nothing gave me the exact answer I was looking for, nor was I able to tweak those examples to work for me.
The code is on jsfiddle.net unless I'm breaking an unwritten rule, and please just let me know, I will just post the link. Please please please! don't just give me an answer, as I am a beginner. Please explain your solution. Thank you so much!
http://jsfiddle.net/thindjinn/KQP9t/2/
Decided to add the code, because I've gotten immediate responses before when doing that.
<!DOCTYPE html>
<html>
<title>Scrolling Pictures</title>
<head>
<link rel="stylesheet" type="text/css" href="scrollingPictures.css" />
<script src="/scrollingPictures.js"></script>
</head>
<body>
<div class="mask"></div> <!-- White behind images, to keep color consistent when low transparency -->
<div id="scroll">
<img class="left" id="image1" src="http://www.yalibnan.com/wp-content/uploads/2011/02/steve-jobs1.jpg" alt="Steve Jobs"/>
<img class="left" id="image2" src="http://www.power-of-giving.com/image-files/achievements-of-richard-branson.jpg" alt="Richard Branson"/>
<img class="left" id="image3" src="http://static5.businessinsider.com/image/4b16d0c70000000000134152/anderson-cooper.jpg" alt="Anderson Cooper"/>
<img class="left" id="image3" src="http://swandiver.files.wordpress.com/2009/03/rachel-maddow.jpg?w=288&h=371" alt="Rachel Maddow"/>
<img class="left" id="image3" src="http://img2.timeinc.net/people/i/2006/celebdatabase/kanyewest/kanye_west1_300_400.jpg" alt="Kanye West"/>
<img class="left" id="image3" src="http://img1.browsebiography.com/images/gal/2627_Larry_Page_photo_1.jpg" alt="Larry Page"/>
</div>
<div class="gradientTop"></div>
<div class="gradientBottom"></div>
<div id="work"><div class="panel">Work</div></div>
<div id="education"><div class="panel">Education</div></div>
<div id="skills"><div class="panel">Skills</div></div>
<div id="footer"> Home <!-- Beginning of Footer -->
Privacy Statement
Contact Us
Careers
More Info
</div>
</body>
</html>
body{
overflow:hidden;
margin-left:0;
margin-top:0;
}
div#scroll{
border-right:1px solid orange;
position:absolute;
z-index:2;
float:left;
width:200px;
height:100%;
overflow:auto;
overflow-x:hidden;
}
img.left{
z-index:inherit;
float:left;
width:200px;
min-height:200px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:200px; /* for IE5.x and IE6 */
opacity:0.4;
filter:alpha(opacity=40);
}
#image1, #image2, #image3{
width:200px;
}
img.left:hover{
opacity:1;
}
div.gradientTop{
position:absolute;
margin-top:0;
z-index:2;
width:206px;
height:30px;
float:left;
background:-webkit-linear-gradient(rgba(255,255,255,2), rgba(255,255,255,0))
}
div.gradientBottom{
position:absolute;
margin-bottom:50px;
z-index:2;
width:206px;
height:120px;
float:left;
bottom:-210px;
background:-webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1))
}
.panel{
font-size:2em;
padding-right:5%;
padding-top:7%;
height:100%;
}
#work{
width:100%;
z-index:0;
color:orange;
position:relative;
text-align:right;
max-height:500px;
background-color:#fff;
min-height:200px; /* for modern browsers */
min-width:700px;
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#education{
width:100%;
z-index:0;
color:orange;
position:relative;
text-align:right;
max-height:500px;
background-color:#fff;
min-height:200px; /* for modern browsers */
min-width:700px;
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#skills{
width:100%;
z-index:0;
color:orange;
position:relative;
text-align:right;
max-height:500px;
background-color:#ffe;
min-height:200px; /* for modern browsers */
min-width:700px;
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#work:hover,#education:hover,#skills:hover{
z-index:0;
background-color:#f0f0f9;
border-top:1px solid #d0d0d0;
border-bottom:1px solid #e0e0e0;
}
#work:active,#education:active,#skills:active{
z-index:0;
background-color:#ededf2;
border-top:1px solid #d0d0d0;
border-bottom:1px solid #e0e0e0;
}
div.mask{
position:relative;
z-index:1;
margin-top:5px;
float:left;
width:206px;
height:805px;
background-color:white;
}
#footer {
background:white;
z-index:3;
position:absolute;
font-variant:normal;
text-indent:5%;
color:#333;
clear:both;
height:50px;
padding-top:20px;
}
How do hide scrollbars:
Set the css property overflow to hidden on the div:
<div style="overflow:hidden"></div>
How to scroll the div:
The element has a scrollTop property, which is the amount of pixels the element has been scrolled. You can scroll the element by assigning to this property:
var div = document.getElementById(someId);
div.scrollTop = 50;
How to do something on mouseover:
var div = document.getElementById(someId);
div.onmouseover = function() {
// do something here
};
Chech this page:
http://valums.com/vertical-scrolling-menu/
And this is the sample.
http://valums.com/files/2009/vertical-menu/final.htm
Good luck