new to stack overflow, so apologies if I'm missing something here.
Question 1: I've got this code that positions elements randomly within its parent - its woking great until I resize the screen. How would I do this responsively, so that the elements move within the parent container proportionally?
Question 2: Is there a way I could make sure that the dots don't overlap, and there's a specific amount of space between them - like padding / margins (the dots will all stay the same size if that helps). If I understand correctly this isn't possible with just CSS with my current setup.
All comments and suggestions are greatly appreciated!!
Here's my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
*{
box-sizing: border-box;
}
.container{
margin: auto;
display: block;
width:90VW;
height:90VH;
border:1px solid grey;
position:relative;
}
.random{
position:absolute;
width:8px;
height:8px;
border-radius: 8px;
background-color: antiquewhite;
border: solid grey;
}
</style>
<script>
$( document ).ready(function() {
$( '.random' ).each(function() {
$holder = $(this).parent();
$divWidth = $holder.width();
$divHeight = $holder.height();
$(this).css({
'left': Math.floor( Math.random() * Number( $divWidth ) ),
'top' : Math.floor( Math.random() * Number( $divHeight ) )
});
})
});
</script>
</head>
<body>
<!--- ↓ ↓ M A I N C O N T E N T ↓ ↓ --->
<main>
<div class="container">
<a class="random" href="index.html"></a>
<a class="random" href="index.html"></a>
<a class="random" href="index.html"></a>
<a class="random" href="index.html"></a>
<a class="random" href="index.html"></a>
<a class="random" href="index.html"></a>
</div>
</main>
<!-------------------------------------->
</body>
</html>
Related
I followed the example code here to put a dismissible drawer under a top app bar but it doesn't work.
Here is what I tried:
// Note: these styles do not account for any paddings/margins that you may need.
body {
display: flex;
height: 100vh;
}
.mdc-drawer-app-content {
flex: auto;
overflow: auto;
position: relative;
}
.main-content {
overflow: auto;
height: 100%;
}
.app-bar {
position: absolute;
}
// only apply this style if below top app bar
.mdc-top-app-bar {
z-index: 7;
}
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Default Page Title</title>
<link rel="stylesheet" type="text/css" href="drawer.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#4.0.0/dist/material-components-web.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="./drawer.css">
</head>
<header class="mdc-top-app-bar app-bar" id="app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="mdc-top-app-bar__navigation-icon mdc-icon-button material-icons" href="#">menu</button>
<span class="mdc-top-app-bar__title">Dismissible Drawer</span>
</section>
</div>
</header>
<aside class="mdc-drawer mdc-drawer--dismissible mdc-top-app-bar--fixed-adjust">
<div class="mdc-drawer__content">
<div class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
<span class="mdc-list-item__text">Inbox</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
<span class="mdc-list-item__text">Outgoing</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
<span class="mdc-list-item__text">Drafts</span>
</a>
</div>
</div>
</aside>
<div class="mdc-drawer-app-content mdc-top-app-bar--fixed-adjust">
<main class="main-content" id="main-content">
App Content
</main>
</div>
<body>
<script src="https://unpkg.com/material-components-web#4.0.0/dist/material-components-web.min.js"></script>
<script>
// Instantiate MDC Drawer
const drawerEl = document.querySelector('.mdc-drawer');
const drawer = new mdc.drawer.MDCDrawer.attachTo(drawerEl);
// Instantiate MDC Top App Bar (required)
const topAppBarEl = document.querySelector('.mdc-top-app-bar');
const topAppBar = new mdc.topAppBar.MDCTopAppBar.attachTo(topAppBarEl);
topAppBar.setScrollTarget(document.querySelector('.main-content'));
topAppBar.listen('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open;
});
</script>
</body>
</html>
In order to have the header on the side of the dismissble drawer, you need the following structure:
// Instantiate MDC Drawer
const drawerEl = document.querySelector('.mdc-drawer');
const drawer = new mdc.drawer.MDCDrawer.attachTo(drawerEl);
// Instantiate MDC Top App Bar (required)
const topAppBarEl = document.querySelector('.mdc-top-app-bar');
const topAppBar = new mdc.topAppBar.MDCTopAppBar.attachTo(topAppBarEl);
topAppBar.setScrollTarget(document.querySelector('.main-content'));
topAppBar.listen('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open;
});
// Note: these styles do not account for any paddings/margins that you may need.
body {
display: flex;
height: 100vh;
}
.mdc-drawer-app-content {
flex: auto;
overflow: auto;
position: relative;
}
.main-content {
overflow: auto;
height: 100%;
}
.app-bar {
position: absolute;
}
// only apply this style if below top app bar
.mdc-top-app-bar {
z-index: 7;
}
<!-- IMPORTS -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap">
<link rel="stylesheet"
href="https://unpkg.com/material-components-web#4.0.0/dist/material-components-web.min.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- CONTENT -->
<aside class="mdc-drawer mdc-drawer--dismissible">
<div class="mdc-drawer__content">
<div class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated"
href="#"
aria-current="page">
<i class="material-icons mdc-list-item__graphic"
aria-hidden="true">inbox</i>
<span class="mdc-list-item__text">Inbox</span>
</a>
<a class="mdc-list-item"
href="#">
<i class="material-icons mdc-list-item__graphic"
aria-hidden="true">send</i>
<span class="mdc-list-item__text">Outgoing</span>
</a>
<a class="mdc-list-item"
href="#">
<i class="material-icons mdc-list-item__graphic"
aria-hidden="true">drafts</i>
<span class="mdc-list-item__text">Drafts</span>
</a>
</div>
</div>
</aside>
<div class="mdc-drawer-app-content">
<header class="mdc-top-app-bar app-bar"
id="app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="mdc-top-app-bar__navigation-icon mdc-icon-button material-icons"
href="#">menu</button>
<span class="mdc-top-app-bar__title">Dismissible Drawer</span>
</section>
</div>
</header>
<main class="main-content"
id="main-content">
App Content
</main>
</div>
<!-- IMPORTS -->
<script src="https://unpkg.com/material-components-web#4.0.0/dist/material-components-web.min.js"></script>
Changes to make this work:
First, you don't need the class mdc-top-app-bar--fixed-adjust since we won't need to adjust the items anymore
Next, move the header itself into the app content (here, called mdc-drawer-app-content).
I looked at this example's HTML in order to see how they did it themselves
Here is the custom CSS that worked for me. Mine is a permanent drawer, so you may need some JS to apply the changes dynamically if you want the drawer to be dismissible, but it solves the layout issues.
First, the critical bit:
.mdc-drawer {
position: fixed;
top: 64px;
}
Since the drawer is now fixed-position, it no longer affects the layout, and the top bar sees it has room to fill the whole width of the page. Pushing the drawer down 64 px keeps it from covering the top bar.
However, this has some side-effects that have to be dealt with. First, most obviously, your main content does the same thing the top bar does--it thinks it has room to fill the whole page, so it gets lost behind the drawer. This is fixable by simply pushing it over:
main {
margin-left: 255px;
}
Second, you will notice that if you resize the viewport, the drawer doesn't show a scroll bar when it should, and when the scroll bar does appear, it won't go all the way to the bottom. This is because you've pushed the bottom of the drawer down off the page.
To fix this, make the drawer's scrollable content shorter:
.mdc-drawer__content {
height: calc(100% - 128px);
}
(I would have expected it to be 100% - 64px, but for some reason it needs 128. I haven't figured out why.)
I have the html structure like this
<div class="first_div">
<ul class="menu">
...
</ul>
</div>
<div class="second_div">
<ul class="menu">
...
</ul>
</div>
By default the tab first goes to the first div menu and then the second div menu.
But I want to change its order. I want the tab should go first to the second div menu and then the first div menu.
I have tried by giving the tabindex="1" to the second div and tabindex="2" to the first div but its not working.
Note: I can't change the html structure.
tabindex seems to do the trick. Even after dynamically adding and re-setting the tabindex is working.
Here is the snippet:
var cnt = 2;
function btnAdd_Clicked() {
cnt++;
document.body.innerHTML += '<div class="div_' + cnt + '"><ul class="menu" tabindex="' + cnt + '">...' + (cnt) + '...</ul></div';
}
function btnReoder_Clicked() {
var uls = document.querySelectorAll("body>div>ul");
for (var i = uls.length - 1; i >= 0; i--) {
uls[i].setAttribute('tabindex', (cnt - i));
}
}
body>div {
border: 1px solid lightgray;
padding: 5px;
}
body>div>ul {
border: 1px solid lightblue;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p>
<button onclick="btnAdd_Clicked()">Add</button>
</p>
<p>
<button onclick="btnReoder_Clicked()">Reverse tab</button>
</p>
<div class="first_div">
<ul class="menu" tabindex="2">
....First..
</ul>
</div>
<div class="second_div">
<ul class="menu" tabindex="1">
...Second...
</ul>
</div>
</body>
</html>
At the bottom of the page, I would like a yellow bar to go across and have social media links and other small details. I want the links to be on the right and small details to be on the left.
HTML:
<footer>
<div class="one-third"></div>
<div class="one-third"></div>
<div class="one-third">
<img src="images/facebook.svg" />
</div>
</footer>
CSS:
footer {
width: 100%;
background-color: #f5c300;
}
.one-third {
float:right;
}
As I was writing this, I figured that the .one-third is incorrect for the CSS part and maybe it should be footer a img {...}.
Update: No even as I did this ^ it still got rid of the background color of the footer. I then threw a BG color on the footer a img style and it only changed behind the icon, not the whole footer.
When you float an element you take it out of the current document flow. What does that mean? Well, as far as container elements are concerned those floated elements don't take up space. If the container element doesn't have any content taking up space (height), then the height of the container is 0 and no background color. Even though floated elements don't take up space, other elements will "see" them and flow around them.
How to fix? Clear the float. The most popular method is to use a clearfix. A clearfix is typically a CSS class. I use the micro clearfix by Nicolas Gallagher.
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
<footer class="cf"><!-- floated elements --></footer>
Another clearfix solution is to apply overflow: hidden; to the element containing floated elements. This has some drawbacks as sometimes you don't want to hide content that overflows the parent.
footer {
width: 100%;
background-color: #f5c300;
overflow: hidden;
}
Hi please check the plunker https://plnkr.co/edit/Zmp66hXeiYAhS3VUyl8E?p=preview
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<script data-require="jquery" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Basic plunk!</h1>
<!-- Put your html here! -->
<div class="footer">
<div class="pull-right">
<ul class="list-icons">
<li>
<a href="">
<em class="fa fa-twitter-square"></em>
</a>
</li>
<li>
<a href="">
<em class="fa fa-facebook-square"></em>
</a>
</li>
<li>
<a href="">
<em class="fa fa-google-plus-square"></em>
</a>
</li>
<li>
<a href="">
<em class="fa fa-instagram"></em>
</a>
</li>
<li>
<a href="">
<em class="fa fa-flickr"></em>
</a>
</li>
<li>
<a href="">
<em class="fa fa-pinterest-square"></em>
</a>
</li>
</ul>
</div>
<div>
<strong>Copyright</strong> Example
</div>
</div>
</body>
</html>
and CSS
/* Put your css in here */
h1 {
color: red;
}
.footer {
background: none repeat scroll 0 0 yellow;
border-top: 1px solid #e7eaec;
bottom: 0;
left: 0;
padding: 10px 20px;
position: absolute;
right: 0;
}
ul
{
list-style:none
}
ul li
{
float:left;
padding-right:20px;
}
I have the following code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="res/favicon.ico" />
<title>My website</title>
<style type="text/css">
.wrap {
position:relative;
margin:0 auto;
width:900px;
text-align:center;
}
#header, #footer {
width:100%;
float:left;
}
#footer {
position:fixed;
bottom:0;
z-index:999999;
}
</style>
</head>
<body>
<div id="header">
<div class="wrap">
<div class="logo">
<h1>Header</h1>
</div>
<div>Menu goes here</div>
</div>
</div>
<iframe src="http://www.cnn.com"></iframe>
<div id="footer">
<div class="wrap">
<h2>Footer</h2>
</div>
</div>
</body>
</html>
How can I setup the iframe so that it'll take all the remaining width and height between the header and the footer?
Solved it, needed some javascript :)
Live example:
http://simplestudio.rs/yard/framed/framed.html (offline)
CODE:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="res/favicon.ico" />
<title>My website</title>
<style type="text/css">
#framed {
position: relative;
width: 100%;
height: 100%;
}
.wrap {
position:relative;
margin:0 auto;
width:900px;
text-align:center;
}
#header, #footer {
width:100%;
float:left;
}
#footer {
position:fixed;
bottom:0;
z-index:999999;
}
</style>
<script>
var resize = setInterval(function(){chng_iframe_height('framed','header','footer')},500);
function chng_iframe_height(ifrid,hid,fid) {
var eheight = window.innerHeight;
var ifrobj = document.getElementById(ifrid);
var header = document.getElementById(hid);
var footer = document.getElementById(fid);
var header_height = getComputedStyle(header).height;
var footer_height = getComputedStyle(footer).height;
var reserved_height = parseInt(header_height) + parseInt(footer_height);
ifrobj.style.height = eheight - reserved_height +"px";
}
</script>
</head>
<body onload="chng_iframe_height('framed','header','footer');">
<div id="header">
<div class="wrap">
<div class="logo">
<h1>Header</h1>
</div>
<div>Menu goes here</div>
</div>
</div>
<iframe src="http://www.cnn.com" id="framed"></iframe>
<div id="footer">
<div class="wrap">
<h2>Footer</h2>
</div>
</div>
</body>
</html>
Basicaly, I compute header and Footer rendered height, get window.innerHeight and from that numbers I know how much px is there left between header in footer so I assign that value to iframe and whoila it works...
Also I have set setinterval to call that function every half second so if you resize window it will almost immediately update iframe height...
Try adding a class to your iframe or style it on the spot like this:
<iframe style="height:100%; width:100%;" src="http://www.cnn.com"></iframe>
Try this also:
<iframe height="100%" width="100%" src="http://www.cnn.com"></iframe>
Also don't forget to remove the padding/margin on the body tag so the header and footer go all the way:
body {
margin:0;
padding: 0;
}
EDIT:
If this does not work you'll have to add fixed width and height.
I made used of .css() and $(window).height() When you use $(window).height() make sure you have doctype as html
<script>
var resize = setInterval(function(){chng_iframe_height('framed','header','footer')},500);
function chng_iframe_height(ifrid,hid,fid) {
var eheight = $(window).height();
var ifrobj = document.getElementById(ifrid);
var header_height = $("#" + hid).css("height"); // getComputedStyle(header).height;
var footer_height = $("#" + fid).css("height");
var reserved_height = parseInt(header_height) + parseInt(footer_height);
ifrobj.style.height = eheight - reserved_height +"px";
}
</script>
The image should resize (up to max) but I need the navigation div to always be visible. At the moment it is being hidden when I resize the browser. Ideally it should move up with the image.
here is the code I have already. Also, is there a way of placing the image in the centre of the screen.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body style="margin:0;padding:0; height:100%">
<div style=" border:solid 1px green; ">
<img style="max-height:400px; height:100%;" src="../Images/img-02.jpg" />
</div>
<div style="border:solid 1px red;height:30px;position: relative;">navigation</div>
</body>
</html>
This can be rectified using some scripting
<html>
<head>
<script type = "text/javascript">
window.onload = function(){
var hVal = window.innerHeight;
if(hVal>434){
document.getElementById("test").height = 400;
}
else{
document.getElementById("test").height = hVal-34;
}
}
window.onresize = function(){
var hVal = window.innerHeight;
if(hVal>434){
document.getElementById("test").height = 400;
}
else{
document.getElementById("test").height = hVal-34;
}
}
</script>
</head>
<body style="margin:0;padding:0; height:100%">
<div style=" border:solid 1px green; ">
<img id="test" src="../Images/img-02.jpg" />
</div>
<div style="border:solid 1px red;height:30px;position: relative;">navigation</div>
</body>
</html>
I hope it works...!