I am currently attempting to get a DIV to expand to 100% of the browser's height. I know that is a commonly asked question and so have read countless forums in order to find the answer but have yet to find something which will work across all browsers.
My CSS file looks something like this:
html{height:100%;}
body {
background: #ffffff;
font-size: 0.8em;
line-height: 1.7;
color: #09123e;
height:100%;
}
#wrapper {
background: #ffffff url(../images/assets/wrapper.bg.gif) repeat-y center center;
margin: 0 auto;
height:100%;
}
This renders as expected in all browsers except later versions of Internet Explorer, most notably IE7 and IE8. I have found that if I use min-height instead of height on #wrapper then I get the desired result in the problematic browsers but this then messes up the rendering in everything else. I have tried using a conditional stylesheet but the #wrapper style specified just seems to get ignored.
Any help would be greatly appreciated.
This works fine in all browsers, make sure you use doctype!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
* {margin: 0px; padding: 0px;} //Reset all margins, use some css reset stylesheet instead...
html {height: 100%;}
body {height: 100%;}
#wrapper {
margin: 0 auto;
height: 100%;
}
</style>
</head>
<body>
<div id="wrapper"></div>
</body>
</html>
The only reliable solution to this problem that I've found is to use javascript/jquery to manually change the height. That is, assuming the visitor has javascript enabled. I have a site that has a colored side-menu bar and a white content area. Both are divs and one is float-right, and the other float-left. The content area is Almost always larger than the side menu bar, so to make the colored side bar as long as the content I use this little jQuery snippet.
<script language="javascript">
<!--
$(document).ready(function() {
var p = $( "#pageContent" ).height();
var m = $( "#menuContent" ).height();
if (m < p) $( "#menuContent" ).height( p );
});
-->
</script>
Related
Am still learning on Django and wkhtml2pdf using and I need some help please, I have searched and try much solutions but they don't work with me, I want to set a background image and page number in the footer(I Have use wkhtml2pdf library):
Here it's the code
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
body{
background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/...');
margin:0px;
background-size: cover;
background-position: left top;
padding-top:0px;
height: 1100px;
width: 900px;
}
#divb
{
font-size: 12px;
font-family: Arial;
}
div.footer {
display: block; text-align: center;
position: running(footer);
#page {
#bottom-center { content: element(footer) }
}
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="border:0; margin: 0;">
<div id="divb">
<p><strong>Materials :</strong> {{ materiel }}</p>
.........(the rest of calling the data)
</div>
<div class='footer'>
Page <span id='page'></span> of
<span id='topage'></span>
<script>
var vars={};
var x=window.location.search.substring(1).split('&');
for (var i in x) {
var z=x[i].split('=',2);
vars[z[0]] = unescape(z[1]);
}
document.getElementById('page').innerHTML = vars.page;
document.getElementById('topage').innerHTML = vars.topage;
</script>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script>
window.load = function() {
window.status = 'render-pdf';
};
</script>
</body>
</html>
and here it's the result :
the was a white space between the background image and the origin page , also the number of page appear to me (Page undefined of undefined), How i can adjust the background-image correctly to filled out all the page without white space , also what' wrong with page number in the footer.
see the screenshoot please.
enter image description here
.Thanks In Advance for everyone here.
I've dropped in the code below but basically there's an element on the page. On hover transform: scale(1.2) is applied. The element has a transition on it. The main intention was that on transitionend some logic needed to be executed and so a transitionend event handler is attached. Now in all non Blink powered browsers is works absolutely fine. But in Chrome and Opera, if you keep moving the mouse, off the element, the event does not fire until you stop moving the mouse, despite the transition finishing some time ago. Anyone come across this before and have a solution?
<!DOCTYPE html>
<html class=''>
<head>
<meta charset='UTF-8'><meta name="robots" content="noindex">
<link rel="canonical" href="http://codepen.io/SayTen/pen/zvNbOM" />
<style class="cp-pen-styles">
#transitioner {
margin: 50px;
width: 100px;
height: 100px;
transition: transform 0.2s;
display: block;
background-color: black;
}
#transitioner:hover {
transform: scale(1.2);
}
body {
color: black;
font-family: sans-serif;
}
</style>
</head>
<body>
<div>This demos an issue in Chrome where transform transitions do not end reliably. Mouse over the element and keep the mouse still and it fires immediately, keep moving the mouse and it won't fire until you stop.</div>
<div id="transitioner"></div>
<div id="logger"></div>
<script>
window.addEventListener('load', function () {
var logger = document.getElementById('logger');
document.getElementById('transitioner').addEventListener('transitionend', function (e) {
var date = new Date();
logger.appendChild(document.createTextNode(date.getTime() + ': Event Fired'));
logger.appendChild(document.createElement('br'));
});
});
</script>
</body>
</html>
Apparently a bug within Chrome, my issue was merged into:
https://code.google.com/p/chromium/issues/detail?id=513833
Question
How do I create a <paper-button> group UI element with the following characteristics?
It is a group of <paper-button> elements.
It is stacked vertically.
Each button fills the entire width of the container (without margin, padding or horizontal white space).
There is no margin, padding or vertical white space between the buttons.
Examples:
The effect I am seeking is analogous to <body fullbleed> only scoped to the button's parent container.
Similar to the Bootstrap "Vertical variation" shown here.
If you have Google Drive, hover your mouse over the menu items in the left margin of the page. (Under the red button labeled "New.")
Do a Google search. The dropdown menu that appears from the search field predictively suggesting possible questions you want is also another example of the look/feel I am after.
Attempts:
See below code for my previous attempts to:
stack vertical buttons using <p> tags and
use a <paper-menu>.
Research:
Flexbox documentation
Paper button documentation
Paper menu documentation
Demo: JS Bin
Code:
<!doctype html>
<html>
<head>
<title>polymer</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">
<link rel="import" href="https://rawgit.com/PolymerElements/paper-button/master/paper-button.html">
</head>
<body>
<dom-module id="x-test" noscript>
<template>
<!-- Attempt #1: Stacking Buttons -->
<div id="container">
<p><paper-button>One</paper-button></p>
<p><paper-button>Two</paper-button></p>
<p><paper-button>Three</paper-button></p>
</div>
<!-- Attempt #2: <paper-menu> -->
<paper-menu>
<paper-item>One</paper-item>
<paper-item>Two</paper-item>
<paper-item>Three</paper-item>
</paper-menu>
</template>
</dom-module>
<x-test></x-test>
</body>
</html>
I'm super tired right now, will test an example tomorrow but I think theoretically all you'd have to do is:
<link href="bower/iron-flex-layout/iron-flex-layout.html" rel="import" >
<div class="layout vertical">
<paper-button>foo</paper-button>
<paper-button>foo</paper-button>
</div>
paper-button {
width: 100%;
margin:0;
}
Overview of new way of defining layout attributes with classes with the help of iron-flex-layout.html:
http://embed.plnkr.co/1UKMQz/preview
I got my Vertical and Horizontal mixed up when i wrote this answer:)) so below is for horizontal Stacking. But thinking about its pretty much the same except for couple of changes.
So created a
.vertical-section {
min-width: 130px;
}
and make the buttons inline or flex;
eg
paper-button {
display: inline-block; //or inline-flex
margin-bottom: 24px;
}
To get rid of padding/margin etc see below because it should be the same
I played around with the Css for the paper-buttons demo so the above changes will work
For Horizontal stacking
Looking at the demo here paper-buttons and right click to view frame source the code goes like this
<style is="custom-style">
.horizontal-section {
min-width: 130px;
}
paper-button {
display: block;
margin-bottom: 24px;
}
</style>
<div>
<h4>Raised</h4>
<div class="horizontal-section">
<paper-button tabindex="0" raised>button</paper-button>
<paper-button tabindex="0" raised class="colorful">colorful</paper-button>
<paper-button tabindex="0" raised disabled>disabled</paper-button>
<paper-button tabindex="0" raised noink>noink</paper-button>
<paper-button tabindex="0" raised class="colorful custom"><iron-icon icon="check"></iron-icon>ok</paper-button>
<paper-button tabindex="0" raised class="custom"><iron-icon icon="clear"></iron-icon>cancel</paper-button>
</div>
</div>
</div>
That gives you something like this
Now as you dont want any margin/padding etc and fill the entire width you need to amend the css a bit and inspect the button element.
Take out the padding:24px; from the .horizontal-section eg padding:0;
And take out the paper-button:not margin-bottom:24px; and margin:0 0.25em; from paper-button css
and you end up with this
As you are using a template i beileve the styling may need to go before that.
Sorry i cant do you a demo, i managed to do a demo for someone in 0.5 but not yet for V.1 but its easy to understand the method above.
Demo: JS Bin
Code:
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="all-elements.html">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
<style>
paper-material {
xheight: 400px;
width: 400px;
background-color: #ff1101;
margin: 0 auto;
}
paper-button {
width: 100%;
margin: 0;
}
paper-button:hover {
background-color: black;
color: white;
}
</style>
<template>
<paper-material id="material" elevation="3">
<div class="layout vertical">
<paper-button>One</paper-button>
<paper-button>Two</paper-button>
<paper-button>Three</paper-button>
</div>
</paper-material>
</template>
<script>
Polymer({
is: 'x-element',
behaviors: [
Polymer.NeonAnimationRunnerBehavior,
],
properties: {
animationConfig: {
value: function() {
return {
'entry': {
name: 'slide-down-animation',
node: this.$.material
},
'exit': {
name: 'slide-up-animation',
node: this.$.material
}
}
}
}
},
ready: function() {
this.playAnimation('entry');
}
});
</script>
</dom-module>
</body>
</html>
I am using dynamic content (WordPress) and would like to center a logo in the middle of a list like: http://www.munto.net/queed-v1/.
I tested it out and my theory works, provided the number of items on both sides is the same...but if they're different it messes up the navigation.
You can see a live example at: http://joshrodgers.com/.
What I did was made my logo a background image and centered that to my unordered-list, then I set a width on each list-item (so that if there was a super-long one it wouldn't mess up the navigation), and finally after the third link I put a 200px margin on to the right of the list-item (that way there is no list-item over the logo)...but like I said this works perfectly if the number of items is even, if the items equal an odd number it looks funny.
Not sure what the best way to do this, so - what would be the best way to fix this?
Page Code:
<html>
<head>
<title>Josh Rodgers - El Paso, Texas</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul>
<li>Home</li>
<li>About Us</li>
<li class="example">super new lodge</li>
<li>Programs</li>
<li>Events</li>
<li>Contact Us</li>
<li>Contact Us</li>
</ul>
</body>
</html>
CSS Style:
/* Reset */
#import url("reset.css");
body {
margin: 0 auto;
position: relative;
width: 1000px;
}
ul {
background: #ff0000 url("images/example.jpg") top center no-repeat;
height: 200px;
margin: 0 auto;
text-align: center;
width: 1000px;
}
li {
background: #ffff00;
color: #ff0000;
display: inline-block;
font-size: 20px;
padding: 20px 0;
position: relative;
top: 70px;
width: 100px;
}
li.example {
margin-right: 200px;
}
*Figured I'd work on a normal php solution before integrating it into WordPress.
Thanks,
Josh
From a design point of view i would maybe consider making the logo the home link. A lot of web users are accustomed to clicking the logo and it taking them home. You could still incorporate the home text underneath the logo.
I would probably not use your method of margin-right: 200px to not cover the logo, anything you change before that list item will shift the margin.
Ultimately i would suggest rethinking having the logo set as a background-image and make it one of the list items.
Let's say, I have HTML code like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
This is content.
</body>
</html>
And I want to add a <noscript> tag there. Which means, if the JavaScript disabled, it will show as a blank page.
And only when JavaScript is disabled, it will show "This is content text".
Please give me some examples to achieve. Thanks.
An alternative to a JS approach as suggested by rahul is to display a div in the <noscript> element, covering the entire page:
<noscript>
<div style="position: fixed; top: 0px; left: 0px; z-index: 30000000;
height: 100%; width: 100%; background-color: #FFFFFF">
<p style="margin-left: 10px">JavaScript is not enabled.</p>
</div>
</noscript>
Wrap all you contents inside a main div with display none and in the onload function change the display to block.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="divMain" style="display: none">
This is content.
</div>
<noscript>
JS not enabled
</noscript>
<script>
document.getElementById("divMain").style.display = "block";
</script>
</body>
</html>
The noscript tag works the other way around. To make the content visible when script is enabled, put it in an element that is hidden, and show it using script:
<div id="hasScript" style="display:none">
This is content
</div>
<script>document.getElementById('hasScript').style.display='';</script>
It's a little odd.
You don't even need a 'noscript' for this. You can just have a blank first page, who's only content is a javascript of the form:
document.location = '/realpage.htm';
And then call that OnLoad, with jQuery, or whatever. This will mean if the client doesn't have scripting, they don't go anywhere, hence the page remains blank.
Edit:
Example, as requested:
<html>
<body onload="document.location = 'realpage.html';">
</body>
</html>
This SHOULD really work!
hide a content when javascript is not enabled
Note: you can replace <noscript> with <noembed> or <noframes>, too.
<!-- Normal page content should be here: -->
Content
<!-- Normal page content should be here: -->
<noscript>
<div style="position: absolute; right: 0; bottom: 0;
display: none; visibility: hidden">
</noscript>
<-- Content that should hide begin -->
**Don't Show! Content**
<-- Content that should hide begin -->
<noscript>
</div>
</noscript>
<!-- Normal page content should be here: -->
Content
<!-- Normal page content should be here: -->
Both the style tag and the meta refresh DO work inside noscript:
<noscript>
<style>body { display:none; }</style>
<meta http-equiv="refresh" content="0; url=blankpage.html">
</noscript>
The first line will display the current page but empty.
The Second line will redirect to blankpage.html
I had a very problem:
I wanted to show the full site when javascript was enabled. However, if javascript were disabled, not only did I want to show a "this site requires javascript..." message, but I still wanted to display the header & footer (which reside in header.inc and footer.inc, called by each content page) of my site (to look nice). In other words, I only wanted to replace the main content area of my site. Here's my html/css solution:
Header.inc file (location not important):
<noscript>
<style>
.hideNoJavascript {
display: none;
}
#noJavascriptWarning {
display: block !important;
}
</style>
</noscript>
Header file (bottom):
<div id="noJavascriptWarning">The Ignite site requires Javascript to be enabled!</div>
<div class="container-fluid hideNoJavascript">
<!-- regular .php content here -->
CSS file:
#noJavascriptWarning {
color: #ed1c24;
font-size: 3em;
display: none; /* this attribute will be overridden as necessary in header.inc */
text-align: center;
max-width: 70%;
margin: 100px auto;
}
In summary, my "javascript required" message is hidden per my default CSS rule. However, when the browser parses the tag, it overrides the default rule, resulting in main content being hidden and (everything except header/footer) and the javascript message being displayed. Works perfectly...for my needs! Hopefully someone else finds this useful :-)
Here are two screenshots with javascript enabled/disabled:
You could do something like
<body id="thebody">
this is content.
<script>
document.getElementById('thebody').innerHTML = "<p>content when JS is enabled!</p>";
</script>
</body>
I know this is an old inquire, but somehow none of this things worked in one of the PHP page I created. Below is what worked, the important thing was the comment tag between the noscript tag:
<noscript>
<center><div style="font-size:300%;position: absolute;top: 40%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%)">
Scripts are Required...
<meta http-equiv='refresh' content="1;url=http://flstate.us/NoScript"/>
</div> </center>
<!--
</noscript>
<html>
<body>
Page HERE...
</body>
</html>
<noscript> --> </noscript>