I have had to put all of the code here so you can see my question in context with this code for a basic website. The part of this code I'm referring to is the media query coded below as:
# media (max-width: 700px)
body { background-color: #fff; }
I've done some research on media queries as required and know that in this code that when the page is at width 700px or less it will become the color of #fff which I think is a white color. But what would be the purpose of putting the code here besides a teaching exercise? Is it so that it will fit a mobile phone if the web page where to be opened on such a device? I thought that instead of using a media query that the width of the webpage to fit a device like a mobile phone was established in the meta tags viewport description. Please bear in mind I'm a newbie and just starting to learn about coding about a month ago.
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sansserif;
}
div {
width: 600px;
margin: 5em auto;
padding: 50px;
background-color: #fff;
border-radius: 1em;
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
#media (max-width: 700px)
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
</style>
</head>
<body>
<div>
<h1>Example Domain</h1>
<p>This domain is established to be used for illustrative examples in
documents. You may use this
domain in examples without prior coordination or asking for permission.</p>
<p>More information... </p>
</div>
It looks like your code is missing a bracket for the media query. I believe it should look like this. When the window is less than 700px the background is white. When greater than 700px it's a gray. Try re-sizing the window to see what I mean.
#media (max-width: 700px) {
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
Snippet
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sansserif;
}
div {
width: 600px;
margin: 5em auto;
padding: 50px;
background-color: #fff;
border-radius: 1em;
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
#media (max-width: 700px) {
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
<div>
<h1>Example Domain</h1>
<p>This domain is established to be used for illustrative examples in documents. You may use this domain in examples without prior coordination or asking for permission.</p>
<p>More information...
</p>
</div>
Look at following JSFiddle: http://jsfiddle.net/ep6mtoa7/ (Btw. there was a missing { after the Media Query that I inserted here)
#media (max-width: 700px) {
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
If you increase the width of the box, you will see a grey background and in the middle will be a Box with rounded edges. If you decrease the width of the box, you will see that the grey background disappers and the box disappears too, but the white Background stays. The real need is because the box has a height, so only the box part would be white and the rest (top and bottom area) would still be grey.
Look at following JSFiddle: http://jsfiddle.net/ep6mtoa7/1/ (I removed the background-color: #fff)
You will see that the bottom part is still grey. If you put in the background-color part it will be white.
To your other question: The media query looks for device width, so mostly devices have a smaller width than your PC would have. The meta-tag part says something like if the zoom should kick in or if it's even allowed.
So if you saying that your page should be 1024px wide, the phone would fit the page into a 1024px viewport and you don't have to zoom in/out as an user.
At this point I am not sure if it's smart to go so deep into it, maybe first learn the basics more and then go deeper. But I like the effort you putting in, also google and read read read read as much blogs and stackoverflow threads as you can, this is a must do and will improve you alot!
Related
I've been working on a theme for the site http://silversoundz.com and have it looking just how my client wants it on browsers but the problem comes when I shrink the screen to check the site on mobiles, in particular the Iphone.
It seems like there's a minimum threshold (around 768px width) before the header+icon svg files go back to their enormous default dimensions thus rendering everything else tiny in relation to that. I've changed the icons to smaller pngs but I'm not sure what the best course of action is for resolving the header scaling/sizing so everything is proportional on a small screen.
Here's the problematic css
media="all"
#media only screen and (min-width: 768px)
.logo-img {
width: 100%;
float: left;
margin: 0;
position: inherit;
}
Ok I figured it out:
Basically I just had to find the relevant bit of css which was only kicking in for screens > 768 and re-paste it below the general styles which says:
body {
font-family: "Open Sans", sans-serif;
font-size: 1.0em;
color: #000000;
background: #ffffff;
font-weight: 400;
min-height: 100%;
}
.wrap {
width: 96%;
margin: 0 auto;
}
so it would come into affect for the general styles too.
I am trying to build video conferencing using html5 and javascript till now i am able to stream my camera capture and display it on canvas
here is the code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<style>
nav .search {
display: none;
}
.demoFrame header,
.demoFrame .footer,
.demoFrame h1,
.demoFrame .p {
display: none !important;
}
h1 {
font-size: 2.6em;
}
h2, h3 {
font-size: 1.7em;
}
.left {
width: 920px !important;
padding-bottom: 40px;
min-height: auto !important;
padding-right: 0;
float: left;
}
div.p {
font-size: .8em;
font-family: arial;
margin-top: -20px;
font-style: italic;
padding: 10px 0;
}
.footer {
padding: 20px;
margin: 20px 0 0 0;
background: #f8f8f8;
font-weight: bold;
font-family: arial;
border-top: 1px solid #ccc;
}
.left > p:first-of-type {
background: #ffd987;
font-style: italic;
padding: 5px 10px;
margin-bottom: 40px;
}
.demoAds {
position: absolute;
top: 0;
right: 0;
width: 270px;
padding: 10px 0 0 10px;
background: #f8f8f8;
}
.demoAds a {
margin: 0 10px 10px 0 !important;
display: inline-block !important;
}
#promoNode {
margin: 20px 0;
}
#media only screen and (max-width : 1024px) {
.left {
float: none;
}
body .one .bsa_it_ad {
position: relative !important;
}
}
</style> <style>
video { border: 1px solid #ccc; display: block; margin: 0 0 20px 0; }
#canvas { margin-top: 20px; border: 1px solid #ccc; display: block; }
</style>
</head>
<body>
<!-- Add the HTML header -->
<div id="page">
<!-- holds content, will be frequently changed -->
<div id="contentHolder">
<!-- start the left section if not the homepage -->
<section class="left">
<!--
Ideally these elements aren't created until it's confirmed that the
client supports video/camera, but for the sake of illustrating the
elements involved, they are created with markup (not JavaScript)
-->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap" class="sexyButton">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true, "audio" : true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
</script>
</section>
<style>
body .one .bsa_it_ad { background: #f8f8f8; border: none; font-family: inherit; width: 200px; position: absolute; top: 0; right: 0; text-align: center; border-radius: 8px; }
body .one .bsa_it_ad .bsa_it_i { display: block; padding: 0; float: none; margin: 0 0 5px; }
body .one .bsa_it_ad .bsa_it_i img { padding: 10px; border: none; margin: 0 auto; }
body .one .bsa_it_ad .bsa_it_t { padding: 6px 0; }
body .one .bsa_it_ad .bsa_it_d { padding: 0; font-size: 12px; color: #333; }
body .one .bsa_it_p { display: none; }
body #bsap_aplink, body #bsap_aplink:hover { display: block; font-size: 10px; margin: 12px 15px 0; text-align: right; }
</style>
</div>
</body>
</html>
now i just want to stream video to make a conference between two people, i know i have to use webRTC or websocket but i don't know how to start writing code for that.
any help or suggestion would be very helpfull.
HTML5rocks has excellent tutorial on this.
WebRTC tutorial
To summarize below are the steps involved:-
Get streaming audio, video or other data.
Get network information such as IP address and port, and exchange this with other WebRTC clients (known as peers) to enable connection, even through NATs and firewalls.
Coordinate 'signaling' communication to report errors and initiate or close sessions.
Exchange information about media and client capability, such as resolution and codecs.
Communicate streaming audio, video or data. To acquire and communicate streaming data,
WebRTC implements the following APIs.
MediaStream: get access to data streams, such as from the user's camera and microphone. RTCPeerConnection: audio or video calling, with facilities for encryption and bandwidth management. RTCDataChannel: peer-to-peer communication of generic data.
You are obviously only asking for JavaScript here, but if you are a .NET or Mono dev you can install the nuget package XSockets.Sample.WebRTC, that will provide a JavaScript video conference for you... and also read this guide about it http://xsockets.net/blog/tutorial-building-a-multivideo-chat-with-webrtc
I want to add a text content slider over a full screen background website. I'm poor in css. So please help me to add a beautiful text content slider that describes about each background image. The following is my background page
http://alampady.tk/fullbg/testbackground.html
Regards
Ashraf
Add this to your
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>
And this to your stylesheet
.colorbag {
position: absolute;
top: 300px;
left: 900px;
width: 500px;
border: thin dotted;
height: 200px;
background-color: #ccc;
opacity: 0.6;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 10px;
font-family: 'Open Sans', sans-serif;
line-height: 22px;
}
.colorbag span.subtext {
font-weight: 600;
font-size: 22px;
}
.colorbag font {
font-weight: 300;
font-size: 14px;
}
Then I think it will be like 10 times nicer =)
What is the proper way to create responsive, transparent CSS captions over images — with graceful degradation in older browsers?
I am trying to achieve:
Centered vertical column of images
Images are equal heights and widths
Each image has a caption which should be centered
Caption should have a see-through background
Would be nice if the background became black in older browsers that don't support transparency
If you take a look at this Fiddle example, there's clearly a lot wrong with it.
The basic premise for HTML5 is:
<section>
<figure>
<img src="1.jpg">
<figcaption>Caption 1</figcaption>
</figure>
<figure>
<img src="2.jpg">
<figcaption>Caption 2</figcaption>
</figure>
<figure>
<img src="3.jpg">
<figcaption>Caption 3</figcaption>
</figure>
</section>
But the CSS3 code is where we get some problems. Is it the right approach even? I got it to work with some fine-tuning (not included), but the fine-tuning doesn't seem to make semantic sense to me anyway.
For example, this is the result:
I have a feeling the CSS is wrong on many levels (pun intended).
I modified your CSS slightly. The main changes were adding position: relative; to the parent element and position: absolute; to the caption.
CSS:
section {
overflow: auto;
}
section figure {
float: left;
clear: both;
position: relative;
overflow: auto;
margin: 0 auto;
padding: 30px 0 0 0;
font-size: 15px;
}
section figure img {
vertical-align: bottom;
}
section figure figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.7);
text-align: center;
color: #fff;
padding: 10px;
}
section {
padding-bottom: 30px;
background: #ccc;
}
Demo: http://jsfiddle.net/XjthT/6/
This code works in every other browser I've tried, except IE8.
IE8 appears to ignore the z-index - and the pop-up becomes a pop-under.
It's in the right place, just renders underneath the thumbnail.
Anyone?
Thanks!
HTML:
<a class="thumbnail" href="#thumb">
<img src="comic_a3_thumb.jpg" height="300" width="212" border="0"
style="float:right; margin-top:10px;margin-bottom:10px;"
alt="description" />
<span>
<img src="/images/comic_a3_popup.jpg" />
</span>
</a>
CSS:
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: 0px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -140px; /*position where enlarged image should offset horizontally */
left: -500px;
}
The simple answer is to add a z-index value that is greater than the .thumbnail:hover value to the hover state of the span.
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -140px; /*position where enlarged image should offset horizontally */
left: -500px;
z-index: 51;
}
Put these lines in your page head
<!--[if IE]>
<style>
#your_faulty_div{
background-color:#000; /*any color it doesn't matter*/
filter: alpha(opacity=0);
}
</style>
<![endif]-->
your_faulty_div is the div which is misbehaving due to IE z-index bug.
Works smooth , i use it in all of my projects where i have positioned elements overlaping.
If I understand you correctly, you want the span to show above the element marked as the thumbnail. You have not specified the z-index for the span element. Here is a working example:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Pop-up Test</title>
<style type="text/css">
#vbox {
border: 1px solid black;
height: 200px;
position: relative;
width: 200px;
z-index: 0;
}
#vbox:hover #hbox {
display: block;
}
#hbox {
border: 1px solid blue;
display: none;
height: 200px;
left: 50px;
position: relative;
top: 50px;
width: 200px;
z-index: 1;
}
</style>
</head>
<body>
<div id="vbox">
<p>Hover over this box to show a hidden "pop-up".</p>
<p id="hbox">This box is a pop-up.</p>
</div>
</body>
</html>
The way to fix this issue is by adding a class to the thumbnail image like this:
.thumbnail:hover img.thumb {z-index:-50; position:relative;}