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>
Related
I am trying to modify the z-index of the http://tympanus.net/Development/ScatteredPolaroidsGallery/ . The demo I am refering to is in the third / final example shown.
When the polaroid is flipped I am unable to select the text in chrome or Safari, but I can in firefox.
Chrome and Firefox
I just need a way to be able to select the text in chrome/safari. This way I can then be able to add hyperlinks and call to action buttons that are currently hidden behind the z-index.
The div in question is 'photostack-back'
HTML
<section id="photostack-1" class="photostack photostack-start">
<div>
<!-- Polaroid with backside -->
<figure>
<a href="http://goo.gl/fhwlSP" class="photostack-img">
<img src="img/2.jpg" alt="img02"/>
</a>
<figcaption>
<h2 class="photostack-title">Happy Days</h2>
<!-- optional backside -->
<div class="photostack-back">
<p>Fish don't fry in the kitchen and beans don't burn on the grill. Took a whole lotta tryin' just to get up that hill. Baby if you've ever wondered - wondered whatever became of me. </p>
</div>
</figcaption>
</figure>
</div>
</section
CSS
.photostack-back {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff;
font-family: "Give You Glory", cursive;
color: #a7a0a2;
padding: 50px 40px;
text-align: left;
font-size: 22px;
line-height: 1.25;
z-index: 1;
}
Here is the tutorial Scattered Polaroids Gallery
I figured out that this was not a z-index issue but a backface-visibility issue.
I used veinjs to inject the following code in photostack.js
vein.inject('figure', {'backface-visibility' : 'visible !important'});
and the css
figcaption {
backface-visibility: hidden;
}
This is the configuration:
#media print {
body {
visibility: hidden;
}
#printhtml {
visibility: visible;
left: 0;
top: 0;
}
}
And yet other divs on my page, apart from printhtml, are showing up when printing the entire page. I tried setting those divs to display:none and it worked. But the space they used to occupy (now blank) continues to exist and the print output always has 3 blank pages.
What am I missing here?
Btw, below is the other section of the page with the script and HTML codes. The divs stubborn1, stubborn2, and stubborn3 are the ones continuing to show up. Again, they disappear when I set them to display:none but are replaced with blank spaces when printing, which shouldn't be the case.
<script>
function myFunction() {
window.print();
}
</script>
<div style="width:78%; float:left;">
<div id="printhtml">
I want to print this page
</div>
<hr>
<a title="View Page in PDF" href="/pdf-URL"><img src="/image1.png" /></a> <img src="/print.png" />
</div>
<div id="stubborn1" style="width:20%; float:right;"><img src="/image2.jpg" style="position:fixed; margin-top:-70px; z-index:21;" />
</div>
<div id="stubborn2" ><img src="/image3.png" style="position:fixed; margin:215px 0px 0px 20px; z-index:21;" /></div>
<div id="stubborn3" ><img src="/image4.png" style="position:fixed; margin:215px 0px 0px 122px; z-index:21;" />
</div>
Don't hide the entire body
Give the body contents in the div tags and give the class as 'hide'
and use this
#media print {
.hide {
display:none;
}
#printhtml {
visibility: visible;
left: 0;
top: 0;
}
}
<div class="oringal">
<ul class="rank">
<li class="rank-1">
<img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/Tetra_pak_New_packaging_Juice7_by_KATOK.jpg" />
<p>1</p>
</li>
<li class="rank-2">
<img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/21.jpg" />
<p>2</p>
</li>
I want to get the ranking sequence as follows, but i do not want change the html, how can i just change the css in the div.oringal to get the ranking sequence as follows.first in center, second rights, third lefts
please see the full code on jsfiddle page http://jsfiddle.net/6grsm/1/, thanks a lot
You could try using absolute positioning. It looks like you are creating a shopping cart layout so I assume that you have a fairly structured page to start with.
See demo at fiddle: http://jsfiddle.net/audetwebdesign/rC59T/
Your HTML is basically this:
<div calss="panel-wrap">
<ul class="rank">
<li class="rank-1">
<img ... />
<p>1</p>
</li>
<li class="rank-2">
<img ... />
<p>2</p>
</li>
<li class="rank-3">
<img ... />
<p>3</p>
</li>
</ul>
</div>
For the CSS:
.panel-wrap {
width: 460px;
}
The .panel-wrap is useful if you want to add background images and so on.
ul.rank {
list-style: none outside none;
padding: 0;
margin: 0;
position: relative; /* this will force the li to be positioned with respect
to this block level container */
border: 1px solid gray;
height: 200px;
}
ul.rank li {
width: 150px;
top: 0; /* pin top and bottom so that the li fills in the height
of the parent container */
bottom: 0;
border: 1px solid red;
position: absolute;
}
ul.rank img {
width: 150px;
xheight: 90px; /* Careful not to adjust both width and height which could
distort your images */
}
ul.rank p {
border: 1px dotted blue;
text-align:center;
position: absolute;
bottom: 10px;
left: 0; /* pin left and right so the p fills in the
width of the li... */
right: 0;
margin: 0;
}
The trick is to adjust the left offset for each list item in uniformly spaced increments:
.rank-3 {
top: 0;
left: 0;
}
.rank-1 {
top: 0;
left: 160px;
}
.rank-2 {
top: 0;
left: 320px;
}
The Big Advantage
What you could do is set the left offset dynamically using JavaScript/jQuery, and create an interactive page where the user can click buttons and scroll through a series of catalog items.
"i want get the sequence 3 1 2, but i do not want to change the sequence in html in div.original, my question is, how should i change the css"
From that comment, it seems that what you actually is not to change the positioning of elements, but change the order of numbering, which is a completely different question. The easiest way to do this is to use the (deprecated, but still seemingly supported) start attribute of the ol tag. In CSS, you can also set counter-increment for li tags, which will enable customisation of what the li tags display. Examples of the various methods are in this Stackoverflow answer
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;
}
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";