I'm new in web development, I am using MediaElement as my media player in my website. I'm trying to position the audio player but there are too many elements that need to be positioned separately. Is there an easy, singular approach to position the whole thing at once?
There is always a parent element that surrounds just about any component in a web page, especially media players. That's the only thing that needs to be positioned; All child elements will follow.
Below I've created a running example of a fake media player. Notice only the top level .player class has positioning styles. Those are the only ones you need to set. All the child element styles would come from whatever default stylesheet comes with the media player itself.
/* only position the parent container */
.player {
position: absolute;
top: 100px;
left: 100px;
}
/* IGNORE THESE, assume they're from the media player's own stylesheets */
.player .player-video {
width: 250px;
height: 200px;
background: #000;
}
.player .player-controls {
padding: 5px;
background: #CCC;
}
.player .player-play-button,
.player .player-next-button {
display: inline-block;
}
<div class="player">
<video class="player-video"></video>
<div class="player-controls">
<button class="player-play-button">PLAY</button>
<button class="player-next-button">NEXT</button>
</div>
</div>
There are other ways to position elements such as margins, padding and centering, so be sure to explore all options to make sure it'll layout correctly.
One singular (but cheap) approach is to wrap your elements in a <center> tag, but I wouldn't seriously recommend this. If you're new to web development, you should at least be aware of it.
Other options primarily involve CSS. I would check out the flexbox model. It's fantastic for layouts.
.wrapper {
display: flex;
justify-content: center;
width: 100%;
}
Wrapping your items in a <div> with a class of wrapper will horizontally center the items within itself. If you're developing for platforms that support flexbox, then knowing flexbox layouts is helpful to avoid learning arcane, classic CSS hacks of horizontally centering elements.
Related
I have a webpage that I am trying to optimize for desktop and mobile but have little experience in how to place divs in separate places on the screen that reference the same id. Any suggestions about best practices would be extremely helpful.
<input id='feature-filter' type='text' placeholder='Filter by name' />
For example, above I have an input named feature-filter that on desktop should be positioned in the menu bar called header on desktop. Note that there is no accompanying CSS to feature-filter.
#header {
display: flex;
position: absolute;
align-items: center;
top: 0px;
width: 100%;
line-height: 50px;
height: 50px;
background: rgba(12, 12, 12, 0.8);
color: #eee;
font: 16px/20px 'Open Sans', sans-serif;
font-weight: 500;
text-align: center;
vertical-align: middle;
}
<div id='header'>
<button title = "ButtonA" id = "A"></button>
<button title = "ButtonB" id = "B"></button>
<button title = "ButtonC" id = "C"></button>
<input id='feature-filter' type='text' placeholder='Filter by name' />
</div>
In the mobile version, however, I would like to place this input in a legend that is at the bottom of the page. In my javascript, there is an event listener that pulls data from feature-filter.
#legend { z-index: 101010; padding: 5px; position: fixed; text-align: center;
color: #fff; bottom: 0px; width: 300px; background: #181818; opacity: 0.92;
font-family: 'Open Sans', sans-serif; left: 0; right: 0; font-weight: 300}
<div id='legend'>
<input id='feature-filter' type='text' placeholder='Filter by name' />
</div>
Is it possible to reference the same DOM id in javascript AND place feature-filter in two separate places in the html - one for the mobile and one for the desktop version ?
What is the best approach to this problem? Using CSS classes would still require having two separate inputs with the same id in the html
Any basic explanation or suggestions would be appreciated.
It would be best to use the same HTML regardless of screen type. I would use a div tag, and not misuse the legend tag. This simplifies the JavaScript and improves accessibility. However, you may style it differently depending on screen size. You may even disable / enable certain elements to adapt to mobile.
I would not try to use two different HTML elements with the same ID. Duplicated elements should use a class name not an ID (which is intended to be unique). Either use the same HTML and style differently, or use two entirely different HTML elements (with different IDs) and use the CSS to disable one and test in JavaScript which one should be used.
To approach styling differently for different devices, the recommended practice is to use a style sheet that applies different rules based on screen size. See this StackOverflow question for how to target different sized screens with your CSS style sheet.
You may also reference existing styling frameworks such as Bootstrap's responsive grid as an example or a solution to see how to style differently for different sized screens.
I'd recommend using CSS to properly position each element depending on the amount of pixels available. If mobile than do this, if desktop than do this. Its a matter of visuals right? Why not use CSS and tell it how you want your page to look. CSS Info
Or download Bootstrap and customize it to your CSS liking.
I've got a cordova app using jquery, jquery-mobile, iscroll and iscrollview
I'm not exactly committed to any of these tools.
I've got the jquery-mobile header/footer stuck to the top and bottom of the screen just fine.
I have a scrollable div between the header and footer. It will contain variable amounts of data. Sometimes the data will be less than the height of the div and sometimes it will be greater (hence the scrolling)
Here's the tricky part. I want to stick the bottom of the scrollable div to the top of the footer. When I add stuff to the div i want the most recently added closest to the top of the footer so the top of the scrollable div looks like its growing upwards towards the bottom of the header as data is added.
Once the top of the scrollable div is fille by its content then i want to be able to scroll it.
Has anyone been able to achieve something like this?
Here's a neat little trick for you.
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
Now the CSS
div {
width: 100%;
}
.header {
position: absolute;
top: 0px;
left: 0px;
height: 50px;
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
height: 100px;
}
/* the magic */
.content {
position: absolute;
top: 50px; /* matches height of header */
bottom: 100px; /* matches height of footer */
left: 0px;
overflow: scroll;
}
The neat thing about forcing .content to have both a top and a bottom is that it stretches the div so that it's always the proper height. IF you specified height on it, it wouldn't work, but because the height is determined by the top/bottom property, it's dynamic. I think this gets you to where you want to be.
Here's a fiddle
Edit: Here's what it looks like with content
Edit 2 - forcing content to grow from the bottom.
I'm not sure this is a good idea, and I'm not sure I would ever seriously recommend doing things this way. However, using vertical-align it's possible to force content to grow from the bottom. I suspect that it would be better to just set a margin with javascript that shrunk as content grew, but... maybe not. With all that said, here's one way to do things with CSS.
This requires a little bit of restructuring of the content div.
<div class="content">
<span class="margin"></span>
<span class="inner"></span>
</div>
And a little bit more CSS
span.left-margin {
height: 98%;
width: 0px;
display: inline-block;
}
span.inner {
width: 99%;
background-color: white;
display: inline-block;
vertical-align: bottom;
}
It looks like this with a little content
It looks like this with a lot of content
If you want the scroll bar to stick to the bottom as content comes in, you'll need to do some javascript (easy to google it).
I'm not completely happy with doing things this way because if you set height 100% or width 100%, the content div gets a scrollbar automatically from the beginning. However... it looks pretty good and should work in most (if not all) browsers.
I know similar questions have been asked on this but I haven't managed to take any advice from those and get something working. A lot of advice on this topic is also geared towards making full-page background images, which isn't what i'm trying to do.
I am trying to get a background image to stretch horizontally to fit a specific div. The div itself containts child divs with content which should be displayed over the top of the background.
I have html like the following:
<div class="parent">
<div class="child">
<h3>My Header</h3>
<p>A link</p>
<p>Some content</p>
</div>
</div>
and css like this:
.parent{
width: 100%;
height: 145px;
float: left;
clear: both;
background: url(../img/parent-bg.png) top left no-repeat;
}
.child{
width: 960px;
height: 80px;
margin: 0 auto;
text-align: center;
}
parent-bg.png has a gradient fill left to right and is 60 x 142 pixels, which is why I want it to stretch to fit the parent div rather than just use repeat-x (the gradient looks odd when repeated).
The CSS3 background-size:cover property does exactly what I want, but of course doesn't work in IE for versions older than 9. I was curious to see if I could find a solution that works in IE 8 and 7.
I had a look at quick play with this jquery plugin but couldn't get it working: https://github.com/louisremi/jquery.backgroundSize.js#readme. I'm not too keen on burying a style property in javascript anyway, which it was only a 'quick play'.
another solution i found which works for the browsers i'm targeting (IE 7 +, last couple of versions of firefox and chrome) and more, involved using browser prefixes like so:
.parent{
width: 100%;
height: 145px;
float: left;
clear: both;
background: url(../img/parent-bg.png) top left no-repeat;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
}
.footer_inner{
width: 960px;
height: 80px;
margin: 0 auto;
text-align: center;
}
#rgthree's solution is probably more comprehensive in terms of browser coverage though, and involves an excellent working demo.
Where there's a will, there's a way. You should employ a progressive enhancement technique to get the best experience. And here's how you should build this (JS Fiddle Below):
First, have an absolutely positioned <img> under your content which can have a width & height set to 100% so it stretches across.
Next, for browsers that support Background Size hide the aforementioned <img> tag and set the background on .parent with a repeat-y and a background-size:100% auto;
Finally, for browsers that support CSS Gradients use them for the background-image of your .parent
Here's a JSFiddle: http://jsfiddle.net/rgthree/k5gk7/
The JS Fiddle above works across all relevant browsers (the gradient image was randomly taken from google images and is different colors than the CSS Gradients, but you get the picture). It uses Modernizr for capability testing.
If you are not aware of Modernizr, I can't recommend it more for projects like this. It is a library which uses javascript that test for modern browser capabilities and adds classnames to the <html> tag so you can progressively enhance your webpages.
I'm developing a chrome extension, without going too much into it I need to inject some code into webpages and put an overlay over the full page. Thus far I have nearly achieved this butI just cannot seem to get the overlay over certain parts of some websites. These include videos from youtube, the searchbar on top of google search results, random parts of kongregate (the stars and monthly comp info).
Below is the css I'm currently using to achieve this, I have played around and looked for solutions at various places but no solutions seems to work.
.cssX9482Overlay
{
position: fixed;
width: 100%;
Height: 100%;
vertical-align: middle;
background: #000000;
opacity: 0.97;
filter: alpha(opacity=97);
text-align: center;
top: 0;
left: 0;
}
The strange css name is just so it doesn't clash with pages formatting. As you probably guessed this is being used to format a div
Remember this is a Chrome extension, therefore HTML5 and CSS3 solutions are valid.
<style type="text/css">
iframe, div {
position:absolute;
top:20px;
left:20px;
width:200px;
height:25px
}
iframe { z-index:1 }
div {
z-index:2;
background:#000;
border:solid 1px red;
color:#fff;
}
</style>
<applet code="myApp.class" width="700" height="700"></applet>
<iframe></iframe>
<div>EXAMPLE TEXT</div>
TAKEN FROM: http://www.bluestudios.co.uk/blog/?p=6
Also you had height capitalized
You might need a z-index in there; on a Google search results page for me, adding a z-index: 999; covers everything except the top navigation (Web, Images, Videos). This is because Google's CSS looks like:
#gbz, #gbg {
...
z-index: 1000;
}
Elements with a larger z-index are placed on top of others. Even while using this property, I've had problems in the placing content on top of Adobe Flash elements and Java applets.
+-----------------------------------------------------+
|.....................................................|
|..header height: 128px...............................|
|.....................................................|
+-----------------------------------------------------+
|.............|.......................................|
|.sidebar.....|..Lorem ipsum..........................|
|.width:......|.......................................|
|.140px.......|..+---------------------------------------------+
|.............|..|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|
|.............|..|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|
|.............|..|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|
|.............|..|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|
|.............|..+---------------------------------------------+
|.............|.......................................|
|.............|.......................................|
|.............|.......................................|
|.............|..frame should be as large as the......|
|.............|..entire viewport or larger depending..|
|.............|..on the context.......................|
+-----------------------------------------------------+
I am trying to create a 2 column layout (sidebar + content area) with a header (and possibly a footer) where the sidebar has a fixed width and the content area is fluid.
The difficulty is having the content area effectively wrap its contents so the content doesn't overflow.
I'd like to know if there is a CSS way to do this and if not whats the best Javascript approach to it since I had some difficulties with cross-browser support.
Try this.
#content {
margin-top: 128px;
maring-left: 140px;
}
#sidebar {
position: fixed;
left: 0;
top: 128px;
width: 140px;
}
CSS:
#element { word-wrap: break-word; }
This will do it for you:
HTML
<div id="header"></div>
<div id="sidebar"></div>
<div id="content"></div>
CSS
#header {
height: 128px;
}
#sidebar {
float: left;
width: 140px;
}
#content {
margin-left: 140px;
}
You can see an example here.
After having researched the matter substantially, I've concluded that it simply can't be done with css in a compatible way (and I'm not even considering IE6). The possible solutions involve either javascript or tables.
I picked the lesser evil (tables) since javascript resulted in a more complicated solution and handling the onResize event can be taxing on the browser depending on the complexity of the function called.
Certain search engine concerns are not important given it's an intranet application.
The only real issue is accessibility.
I'd be quite glad to be proven wrong though :)