I've been trying to figure out for the longest while why I couldn't get a table at 100% height although all it's parents were at 100%. Playing around I found it worked once I removed jQuery mobile from the site. After that I created a bare bones version of it and actually got the same results. I have no idea why this happens. Here's my code:
HTML:
<table class="container">
<tr style="height:15%;"><td>Menu Goes here</td></tr>
<tr style="height:85%;"><td>Content Goes here</td></tr>
</table>
CSS:
<link rel="stylesheet" type="text/css" href="boilerplate.css">
<link rel="stylesheet" type="text/css" href="jquery.mobile.custom.structure.min.css">
<style type="text/css">
body, html {
height:100%;
width:100%;
margin:0;
padding:0;
}
.container {
height:100%;
width:100%;
border:solid 2px red;
}
tr {
border:solid 2px blue;
}
</style>
JS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.mobile.custom.min.js"></script>
I'm using a custom jQuery Mobile build but I get the same results even when I use Google's CND.
Any idea why this happens and how to work around it?
EDIT:
http://ramiroproductions.businesscatalyst.com/test.html - barebones version
http://ramiroproductions.businesscatalyst.com/aboutus.html - actual site
Try using !important to make sure that any other css is not overriding the height property.
Also check by doing an inspect element to see if your css is applied or it is striked out.
Update:
For the height property to work correctly if given in percentage you have to make sure that its parent has been given a height. Jquery mobile is adding its own div wrapper on your html which is not having height 100%. see here for solution.
Related
Trying to add a "scroll to top" button to fade in when I scroll down the webpage. Doesn't want to know, I've applied this exactly another webpage and works fine, on this web page, it just doesn't want to know. What am I doing wrong?
The script & style sheets are separate & attached in the head section, they do not make up the document body of the webpage.
Long time,
<!doctype html>
<html>
<head>
<script type="text/javascript" src="../scripts/AltScript.js"></script>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="../styles/alternate-styling-sheet.css" rel="stylesheet" type="text/css">
<head>
<body>
<div id="scroll-to-top-button">
Top<i class="fa fa-caret-up" aria-hidden="true"></i>
</div>
</body>
<html/>
/----------------------------------/
<script>
$(window).scroll(function(){
if($(this).scrollTop() > 150){
$('#scroll-to-top-button').slideDown();
}
});
</script>
/---------------------------------------/
<style>
#scroll-to-top-button{
right:20px;
bottom:20px;
display:none;
background-color:#3A83F3;
position:fixed;
border-style:none;
border-radius:5px;
width:100px;
z-index:99999999999;
}
#scroll-to-top-button a{
padding:10px;
display:block;
color:white;
font-size:17px;
text-decoration:none;
}
#scroll-to-top-button a:hover{
background-color:#81AFED;
border-radius:5px;
}
#scroll-to-top-button a i{
padding-left:10px;
float:right;
}
</style>
If the script is part of the js you are calling first, that may be your problem. You have to load jquery first. If you run developer tools, you will probably see in the console that it fails at "$(window)".
First of all move jquery libs to the top of custom scripts
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="../scripts/AltScript.js"></script>
And for fade in using js you can follow this links.
It is well explained -
Fade In on Scroll Down, Fade Out on Scroll Up
Since I answered first, I will reply to your comment to the other answer that is similar to mine:
It isn't stupid, as javascript - unless dynamically loaded - loads in the order listed. Since jquery is just a javascript library, it has to load before you can call any jquery functions.
It is possible that your other code had inherited jquery some other way. It would be hard to tell without context.
Load your jQuery library script above your personal script by putting it on the line above it
Try using this:
<script>
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 150){
$('#scroll-to-top-button').slideDown();
}});
});
</script>
But it does appear that DaniP's fiddle is working correctly: https://jsfiddle.net/by49ph5s/
I am trying to use the jquery custom scrollbar plugin.
My html:
<body>
<div style="height:10000px"></div>
</body>
javascript:
$("document").ready(function(){
$("body").customScrollbar();
});
Yes, I linked jquery, the js and css file.
When I load the page, it is blank. Without the javascript, it is fine.
The plugin can be found here:
http://plugins.jquery.com/custom-scrollbar/
You need to set the skin in the body and set width and height in pixels. Percentages or use of CSS3 calc doesn't works (if you set the width and height in body). Maybe you would have to modify the CSS to get better results.
<head>
<style type="text/css">
body{
width: 200px;
height: 200px;
}
</style>
</head>
<body class="modern-skin">
<div style="height:10000px">asdf SAS</div>
<script>
$(window).load(function(){
$("body").customScrollbar({updateOnWindowResize:true});
});
</script>
</body>
Look! it's just a band-aid.
If you need a better solution, I recommend you to implement this example from plugin website. Here's an example of how to adjust the scrollbar to the window size.
I'm developing an web-app in the Play Framework and at the moment I would like to make the entire app able to adjust sizes of containers and text according to the browser's size. I have managed to make the containers adjust and it works fine, but I'm stuck on adjusting the font-size to fill up the container's size. Even though I tried several variants already, it doesn't seem to work at all: when the text is too big for the container, it simply passes it to a new line in the #indexPerson container, instead of adjusting the font. I also tried setting "white-space: nowrap", but this causes a scrollbar to show up, and the font still doesn't adjust itself. Adding "overflow:hidden" simply hides part of the text, no font-size adjustment whatsoever. Is there something I'm missing out? Thanks a lot in advance! I'm using the textFit plugin: http://www.jqueryscript.net/text/jQuery-Plugin-For-Fitting-Text-To-Its-Container-textFit.html. My css file looks like this:
div#outer {
width:100%;
height:100%;
}
div#indexPerson {
width:100%;
height:6%;
float:left;
border: 2px #385D8A solid;
background-color:#B9CDE5;
border-radius:20px;
-moz-border-radius:20px;
padding-top:2px;
font-size:30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
And the index page is:
#(people: List[Client])
<!DOCTYPE html>
<html>
<head>
<title>My app</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/index.css")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/textFit.slow.js")" type="text/javascript"></script>
<script>
$(document).ready(function() {
textFit(document.getElementById('indexPerson'), {maxFontSize: 36});
});
$(window).resize(function()) {
textFit(document.getElementById('indexPerson'), {maxFontSize: 36});
});
</script>
</head>
<body>
<div id="outer">
#for(person <- people) {
<a href="#{routes.Application.login_form(person.getId())}">
<div id="indexPerson">
#person.getInfo()
</div>
</a>
}
</div>
</body>
</html>
Solved it! Note to self: always make sure the div ids are unique!
I was wondering what would be the best solution to move certain element of the responsive page, which is displayed in footer on live website, on top in source code only.
EXAMPLE
Like this site has h1 seo-block right after body tag in source code but on live website this content is displayed at the bottom. They use absolute positioning to fix this.
#subfooter{
width:100%;
position:absolute;
bottom:0;
left:0;
}
My question is how could I do this on responsive design because absolute positioning doesn't work best there unless we would use a lot of #media queries for this class only. Are there any other better css/js/jquery solutions for this?
You can't do so via CSS alone. You need to move the part in question using JavaScript.
jQuery example:
jQuery( 'body' ).append( jQuery( '#subfooter' ) );
If you are willing to live with the (currently) limited browser support, you can achieve this with the flexible box layout module.
(live demo)
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Flexbox</title>
<style>
body {
display: flex;
flex-direction: column;
}
#source-top {
order: 2;
}
#source-bottom {
order: 1;
}
</style>
</head>
<body>
<div id="source-top">Source top</div>
<div id="source-bottom">Source bottom</div>
</body>
</html>
I'm debugging a site on an Android HTC Sense. The site uses a lot of inserted content, which comes along with it's own CSS and JS like:
// wrapper id = snippet_id
<html>
<head>
<style type="text/css">
#snippet_id div {border: 1px solid red !important;}
div {border: 1px solid blue !important;}
</style>
</head>
<body>
<div>Hello World</div>
</body>
<html>
This is inserted into an existing page, so it sort these snippets are sort of like iFrames I guess.
Question:
Problem is, that while Javascript works fine, all CSS I'm specifying using <style> tags is being ignored. Any idea why?
EDIT:
Works on:
- Android 4.0.1
Does not work on:
- Android 2.3.1
- IOS 4.1
If I add the CSS to the main.css file being requested when the page loads, all is ok. If it's inside my gadget, it's not working.
EDIT:
So from what I can see, <style> does not seem to work on classes and id. If I use regular HTML elements as selectors it works.
EDIT:
My dev-site is here. I'm using a plugin called renderJs, which encapsultes HTML snippets (along with their CSS and JS) into resuable gadgets. Gadgets content will be appended to the page body, so although a gadget can act as a standalone HTML page, it can also be part of a page.
Example code from my page (I stripped out all gadgets but one below):
index.html - include index_wrapper gadget
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Organization" lang="en" class="render">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/overrides.css">
<script data-main="../js/main.js" type="text/javascript" src="../js/libs/require/require.js"></script>
<title></title>
</head>
<body class="splash">
<div data-role="page" id="index">
<div id="index_wrapper" data-gadget="../gadgets/index_wrapper.html"></div>
</div>
</body>
</html>
The page has a gadget called index_wrapper link - code below:
<!DOCTYPE html>
<head></head>
<body>
<div id="index_social" data-gadget="../gadgets/social.html"></div>
<p class="mini t" data-i18n="gen.disclaimer"></p>
</body>
</html>
Which has another gadget called social here. This gadget includes some CSS, but on the devices in question, it is ignored (just saw, I'm missing a </div> in the index_wrapper, so trying to see if that fixed the problem, too).
The code below includes my fix:
<!DOCTYPE html>
<head>
<style type="text/css" scoped>
// will be ignroed
.el {width: 1px;}
.menu_social {text-align: center; margin: 1em 0;}
.action_menu {display: inline-block;}
.follow_us {display: inline-block; margin: 0; padding: 0 .5em 0 0;}
...
</head>
<body>
<div class="menu_social">
<div>
<span class="el ui-hidden-accessible"></span><!-- fallback for CSS not working -->
<div data-role="controlgroup" data-type="horizontal" data-theme="c" class="action_menu">
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
(function () {
$(document).ready(function() {
var gadget = RenderJs.getSelfGadget();
// fallback for old devices which cannot load <style> css
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/social.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
// trigger enhancement
$(this).trigger("render_enhance", {gadget: gadget.dom});
});
})();
//]]>
</script>
</body>
</html>
So aside from probably missing a closing </div> I'm still wondering why my embedded CSS is not working.
Looking at the generated HTML code (i.e., code as modified by JavaScript) of the demo page suggests that style elements are generated inside body. Although such elements are allowed by HTML5 drafts when the scoped attribute is present, support to that attribute seems to be nonexistent, and the style sheet is applied globally. It is possible however that some browsers do not apply it at all, at least when the style element is dynamically generated.
A better approach is to make all style sheets global to the document, preferably as external style sheets, and use contextual selectors to limit the rules to some elements only. And possibly using JavaScript to change classes of elements, rather than manipulating style sheets directly.
Ok. Ugly workaround:
In the inline section, set this:
<style>
.el {width: 1px;}
</style>
In the page, set hide an element el like this:
// ui-hidden-accessible is a JQM class, moving the item out of view
// since it uses pos:absolute, is needed to not break
// selects on the page (compare to JQM ui-icon)
<span class="el ui-hidden-accessible"> </span>
Then check for the width when running inline Javascript (which works) and require the inline CSS as a separate file, when the width is not at 1px
// fallback for old devices which cannot load <style> css
// gadget is my iframe-look-a-like
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/translate.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
Ugly and an extra HTTP request, but at least the CSS is working then.