The same question has been asked in this post, but the accepted answer doesn't help (me, at least).
I use dojox.mobile.View to display two views that look like this. Everything works fine, except the map container doesn't get displayed correctly. It is shown as a small box on the top page. Do I miss something on the layout file? Thank you!
<div id="view1" dojoType="dojox.mobile.View" selected="true">
<h1 dojoType="dojox.mobile.Heading">View 1</h1>
<ul dojoType="dojox.mobile.RoundRectList">
<li dojoType="dojox.mobile.ListItem" icon="images/icon1.png" moveTo="view2" transition="slide">Go To View 2
</li>
</ul>
</div>
<div id="view2" dojoType="dojox.mobile.View" style="height:100%">
<h1 dojoType="dojox.mobile.Heading" back="View 1" moveTo="view1">View 2</h1>
<div dojoType="dojox.mobile.RoundRect" id="map_canvas" style="width:100% !important;height:100% !important;"></div>
</div>
Update:
<body style="visibility: visible;">
<div id="view1" class="mblView" selected="true" style="visibility: visible; width: 100%; height: 100%; top: 0px; left: 0px; display: none;" dojotype="dojox.mobile.View" widgetid="view1">
<div id="view2" class="mblView" style="visibility: visible; width: 100%; height: 100%; top: 0px; position: relative; left: 0px;" dojotype="dojox.mobile.View" widgetid="view2">
<h1 id="dojox_mobile_Heading_1" class="mblHeading mblHeadingCenterTitle" moveto="view1" back="View 1" dojotype="dojox.mobile.Heading" style="" widgetid="dojox_mobile_Heading_1">
<div id="map_canvas" class="mblRoundRect" style="width: 100% ! important; height: 100% ! important; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" dojotype="dojox.mobile.RoundRect" widgetid="map_canvas">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
Firebug logs
I had similar display problem with Dojo mobile + Google maps api version 3.
Simons solution did not work, but there was another way.
I don't create new topic, just give you this simple hint: Always check if Google maps loads AFTER DOM (for example using require(["dojo/domReady!"], function(){ ... })
the mobile view your using for the map view only has height:100% set where as the example has width + height 100%.
This can cause issues inside the div used for the map as its not picking up a width correctly. (i've seen a similar issue like this before, could be something else though)
EDIT:
Nothing pops out to me. Have you tried maybe using script to modify it ? something like:
var div = dojo.byId("map_canvas");
div.style.height = window.innerHeight+"px";
div.style.width = window.innerWidth+"px";
Related
I am creating a simple portfolio page on github and am using HTML, CSS, and JS.
I have 4 different sections on my page, that I created a scroll functionality to nav through the portfolio.
I have added a background video to the first(home) section of the page. When i added it directly into the body tag it worked and played fine. But I needed it to be the background of my "home section"..so when I finally aligned it correctly to fit the home-page, it didn't play.
the background is of a video-still, not the poster="./videos/Lonely-Blue.jpg" that I plugged in as an alt image..which means it just wont start playing. I haven't been able to find a solution that has worked yet, but I've mainly been testing with the placement of the video in HTML and with CSS.
here is the HTML snippet:
<ul id="myMenu">
<li data-menuanchor="welcome" class="active">Home </li>
<li data-menuanchor="about">About</li>
<li data-menuanchor="projects">Projects</li>
<li data-menuanchor="contact">Contact</li>
</ul>
<div id="fullpage">
<div class="section" data-menuanchor="welcome" id="homeSection">
<div id = "bg-vid">
<video preload playsinline autoplay muted loop poster="./videos/Lonely-Blue.jpg" id="bgvid">
<source src="./videos/Lonely-Blue.webm" type="video/webm">
<source src="./videos/Lonely-Blue.mp4" type="video/mp4">
</video>
</div>
<div id="wrapper" class="home">
<h1 id ="dbg">Diana B. Gobar</h1>
<h5>Full Stack Web Developer. Artist. Curious human.<br><span id="highlight">Get to know me: </span><span id="altFaves"> ...</span></h5>
</div>
the CSS for the video and home section:
#bg-vid {
position: absolute;
z-index: -1;
overflow: hidden;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
#homeSection {
z-index: -2;
}
#wrapper {
width: 100%;
margin: 0 auto;
padding: 60px;
}
.home{
position: fixed;
top: 0;
left: 0;
z-index: 99;
width: 100%;
margin: 0 auto;
padding: 40px;*/
/*background-color: rgba(0,0,0,0.6);*/
}
The navigation bar on top of the video worked fine while it played, but when I aligned the size of the video with the home section and added the "wrapper" content over it, it wont start.
Try to mannualy start the video,
insert after the snippet
<script>
// assuming you're using jQuery
$('#bg-vid video')[0].play()
</script>
<iframe src="http://osu.ppy.sh/u/516595" style= width:100%;height:100% frameborder="0">
</iframe>
<style type="text/css">
body {
background-color: #d8da3d
.iframe {position: relative;}
.iframe:<iframe> {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000;}
</style>
<div style="position:absolute;top:020px;left:000px;z-index:10;" >
<img src="http://images.wikia.com/inciclopedia/images/3/32/Nieve.gif" >
</div>
<div style="position:absolute;top:020px;right:001px;z-index:10;">
<img src="http://images.wikia.com/inciclopedia/images/3/32/Nieve.gif" >
</div>
That's my code all in one. What I want is that I can click through the "Nieve.gif" I don't know what is wrong and what I could or must do to make possible click trough the gif.
And can be possible to make all the site cover of snow gif or better with rain gif?
How Can I "erase" that White parts that appear? :(
The site it's not mine that's why I use iframe
Please people help me :( I don't speak english
Try This.Add pointer-events:none; style to your div. Tested on chrome.
<div style="position:absolute;top:020px;left:000px;z-index:10;pointer-events:none" >
<img src="http://images.wikia.com/inciclopedia/images/3/32/Nieve.gif" >
</div>
<div style="position:absolute;top:020px;right:001px;z-index:10;pointer-events:none">
<img src="http://images.wikia.com/inciclopedia/images/3/32/Nieve.gif" >
</div>
Check out this answer to on this post:
https://stackoverflow.com/a/4839672/589909
It seems to do what I understand what you want to achieve using a pure cross browser CSS approach.
pointer-events:none;
I copy the anser from Jquery pass click through element
I've been trying to insert a clickable image into the header to sit on the right bottom. I've been scouring your past questions, and have gotten this far by navigating what is already posted. However, I can get either the style to work with this code without correct linkage:
header {
<style>
div#button
{
position:relative;
align:right;
top:111px;left:640px; margin:0;width:100%;
padding-bottom:25px;
}
</style>
***position is right, but linkage is wrong***
<div id="button">
<a href="0379a5a.netsolhost.com/wordpress1/products/products-page/" >
<img src="http://0379a5a.netsolhost.com/wordpress1/wp-content/uploads/2013/07/shop_now2.png" height="80.5x" width="163.5px"
<div style="float:right;margin-top: 111px; margin-right: 50px; padding-bottom:16px;"
/></a>
</div>
But The link will not work. I can get the link to work, but then the style goes away with this code:
<style>
div#shop_now_button
{
position: relative;
float: right;
margin-top: 111px;
margin-left: 640px;
margin-right: 50px;
width:100%;
padding-bottom:25px;
}
</style>
<div id="shop_now_button">
<div style="float:right;margin-top: 111px; margin-right: 50px; padding-bottom:16px;">
<a s href="http://0379a5a.netsolhost.com/wordpress1/product/products-page/" target="_blank">
<img src="http://0379a5a.netsolhost.com/wordpress1/wp- content/uploads/2013/07/shop_now2.png"
height="80.5px"
width="163.5px"
float="right"
margin-top="111px"
margin-right="50px"
padding-bottom="16px" />
</div>
I just wish I knew what was going on. I've been trouble shooting for hours now... (I apologize if its a simple solution--I'm new at this) this is my vanity domain... http://0379a5a.netsolhost.com/wordpress1/
use:
.header {position: relative;}
.header img {positon: absolute; bottom: 0; right: 0;}
When flash banners from thirdparty are displayed they are overlapping my code:
test URL is: http://test.otwierac.pl/ (refresh page many times and you will see)
Code is:
<div style="width:100%">
<div id="banner">
<script>
<!--
var d = new Date();
r = escape(d.getTime()*Math.random());
document.writeln('<script src="http://tracking.novem.pl/rotator/CD31115/59&js=1&r='+r+'&keyword="><\/script>');
//-->
</script><div id='beacon_1' style='position: absolute; left: 0px; top: 0px; visibility: hidden;'><img src='http://test.otwierac.pl/reklamy/www/delivery/lg.php?bannerid=1&campaignid=1&zoneid=0&loc=http%3A%2F%2Fwww.test.otwierac.pl%2F&referer=http%3A%2F%2Ftest.otwierac.pl%2F&cb=6d0002d6e4' width='0' height='0' alt='' style='width: 0px; height: 0px;' /></div>
</div>
</div>
CSS code:
#banner
{
margin-top:10px;
width:950px;
margin:0 auto;
text-align:center;
}
How to fix this ? Banners should be centered and not overlapping my text.
There's a flash parameter
wmode: opaque
Should do the trick
EDIT
From the adobe website:
opaque - The SWF content is layered together with other HTML elements on the page. The SWF file is opaque and hides everything layered behind it on the page. This option reduces playback performance compared to wmode=window or wmode=direct.
EDITED:
Try:
#banner {
height: 315px;
margin-top: 10px;
text-align: center;
width: 950px;
}
lets say we have
<div class="picture"><img class="picture_thumb" src="path" /> </div>
And i'd like to use CSS to add an image z-index higher to .picture (it's basically an magnifying glass Icon so I can see it on top of .picture_thumb)
Any chance?
Thanks a lot
PD: it would be like instead of a background, a Front-ground
-EDIT-
An image so you can understand better
There's no such thing as front-ground.
You'd have to do something like this:
<div class="picture">
<img src="images/picture.jpg" alt="Picture" />
<img class="magnifier" src="images/magnifier.jpg" alt="Maginfy" />
</div>
.picture {
position: relative;
width: 100px;
height: 100px;
}
.magnifier {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 1000;
}
You could also do it with javascript if you didn't want to add the magnifier image to each picture div.