Can I not use embedded <style> CSS on Android? - javascript

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.

Related

How to select <script> tag in CSS?

It's not necessary, but i have tried to select <script> tag in css. But it didn't work. Why ?
<style>
script {
padding:80px;
background-color:red;
}
</style>
This should work. Because it works on other elements. But not on script tag .
<script>alert(1)</script>
And this is the tag i want to select.
You forgot to set display property:
script{
display:block;
padding:80px;
background-color:red;
}
<script>console.log(1)</script>
You can use display:block to show elements that normally wouldn't.
Browsers simply apply the following rule to hide unnecessary tags
head, title, link, meta, style, script {
display: none;
}
But you can override it just like any other CSS. It even works on elements that are not even on the body, but the head, such as titles, metas, etc
head, title, link[href][rel], meta, style, script {
display: block;
}
And even use some pseudo-elements magic to show attributes of tags such as the rel for your CSS link tag, or the content for your description
title, link[href][rel], meta, style, script {
display: block;
}
link[href][rel]::after {
content: attr(rel) ': ' attr(href);
text-transform: capitalize;
}
meta[charset]::after {
content: 'Charset: ' attr(charset);
}
meta[name][content]::after {
content: attr(name) ': ' attr(content);
text-transform: capitalize;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is the title</title>
<meta name="description" content="This is the Description">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<script>/*This is inside an script tag*/</script>
</body>
</html>
And then you can style them as you would any regular html element.
Does this have any practical purpose? Nope, none at all. Maybe (and stretching it quite a bit) displaying the title on a print stylesheet.
Other than that, it's just a pointless fun fact.
The answers posted here are sufficient, but for fun I decided to mess around with this. I noticed a few things. This code makes a short JavaScript visible, and executes it.
body {
background-color:#2a4128;
color:white;
font-size:1.05em;
}
script {
display:block;
color:#ef9a9a;
background-color:#321117;
font-weight:normal;
padding:10px;
border:1px solid red;
font-family:"Courier New";
font-size:0.94em;
text-align:left;
}
.script-area {
text-align:center;
width:79%;
margin-left:10%;
margin-right:10%;
}
h2 { color:pink; }
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing</title>
</head>
<body>
<h3>Hello world!</h3>
<p>Let's see how this script works!!!</p>
<div class="script-area">
<pre><script type="text/javascript">
document.write("<p>This script came from a visible element!</p>");
document.getElementsByTagName("h3")[0].innerHTML = "I changed this with <b><i>inline JavaScript!</i></b>";
console.log(1);
</script></pre>
</div>
</body>
</html>
Like others have stated, the web browser automatically hides typically invisible elements - not just <script>, but <meta>, <title>, <style>, and so on. This is done with the display:none; CSS directive. Like any CSS rule, this can be overwritten with your own. Just select the script and use display:block;.
The script that is now visible on the page, is executed like it normally is. I've noticed the script is unaware of elements that appear after it, and only aware of the DOM that appears before it. I initially placed the brief script in the <head> tag, but I was unable to make it visible with CSS. This is probably due to some kind of
head { display:none; }
rule in the browser software. But I imagine this can be overruled just like for the <script>.

How to create a CSS scope by JavaScript to prevent the CSS effect to another part of the page?

For example:
I have a page and the code is:
<!DOCTYPE html>
<html>
<head>
<style>
.wrap a {
color: red;
}
</style>
</head>
<body>
<div class="wrap">link</div>
</body>
</html>
And I have a common JavaScript component which will load a CSS file include the code below:
.wrap .link { color: blue; }
Then the link will change from red to blue.
Use iframe can fix this but cause another problem same like display two scrollbar or the lightbox overlay just in part of the page.
I can not change the CSS but I can write a JS loader so do you have some idea to fix this?
If a selector matches then a rule will apply until overridden by a rule (which sets the same property) further down the cascade.
You can either change your selectors to stop them matching the elements you don't want them to match, or you can override all your rules in that section.
Therefore, you'll have to adapt your markup and styles. You can precede every selector with #wrapper. For example, if a rule says a{color:red}, substitute that with #wrapper a {color:red;}.
HTML5 allows scoped stylesheets, but only Firefox supports it so far. However there is a you may try a jQuery solution: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin.
Hope it helps.
This might help you.
function changeColor(){
jQuery(".link").css('color','blue');
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.wrap a {
color: red;
}
</style>
</head>
<body>
<div class="wrap"><a href="#" class="link" onclick='changeColor()'>link</a></div>
</body>
</html>

How to apply "-webkit" css rules using jquery .css

Hey fellas and ladies,
I'm having an issue applying the following css rule.
$('#bam').css({"-webkit-overflow-scrolling": "touch"})
Is applying -webkit stuff supported in jquery being a nonstandard rule? When I apply nothing happens and no error occurs.
However if I do the the same syntax and change color it works.
As a use case im trying to fix an issue with an iphone iframe overflow problem see iframe size with CSS on iOS for my current issue and Im not in a position to use inline styles or external css.
Any ideas :)?
Added jsbin example.
https://jsbin.com/vizacezeva/edit?html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$( document ).ready(function() {
$('#bam').css({"overflow-scrolling": "touch"})
console.log('hi');
console.log($('#bam').css("overflow-scrolling"));
});
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="bam" style="width:100%; padding:0px;">
<iframe src="http://www.jsbin.com" style="width:1px; min-width:100%; max-width:100%;">
</iframe>
</div>
</body>
</html>
Instead of adding the CSS rule with jQuery you can declare a rule in your CSS file and add a class which applies the style.
/** style.css **/
.foo { -webkit-overflow-scrolling: touch; }
// app.js
$('#bam').addClass('foo');

how to format web page content loaded from javascript?

I have a webpage that displays a web form whose source is javascript.
By default it places this form in the upper left corner of the screen. How to center it horizontally and vertically on the screen?
I'm confused because the block is in the <script> section rather than <body>.
The form is generated by my email marketing service provider, and I don't have access to its code.
The complete html file is:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://app...."></script>
</head>
<body>
</body>
</html>
Is it your javascript file or are you loading in an external file which creates the form? You can add classes/id's to javascript generated markup which is one way you could target it but you should be able to target and centre it just using:
form {display: block; margin: 0 auto; width: 100%}
Without actually seeing what your JavaScript is doing this is difficult to answer, however the generalized answer to your problem is to use CSS. You can do so within the head section of your html document using the <style> tag (see code below) or using <link> to add an external stylesheet.
Check out W3 to get you started learning more about CSS: http://www.w3schools.com/css/
Actual CSS attributes you will need may vary, but this article shows use of transform: translate to center an element vertically and horizontally.
<!DOCTYPE html>
<html>
<head>
<style>
/* this is a class you would add to the parent HTML tag of your form */
form {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
<script type="text/javascript" src="https://app...."></script>
</head>
<body>
</body>
</html>

Internet Explorer: How to modify CSS at runtime for printing?

Imagine a webpage which enables users to show an hidden element, using javascript to modify css a CSS style at runtime.
After his decision (which includes the modification of the stlyesheet) the user uses the printing functionality of his browser.
It seems that Internet Explorer does not respect the changes made in the stylesheet before during printing if the original css definition is located in an external file.
In other Browsers everything works as expected.
Please have a look at the example below, which changes a style class from its initial definition display:none to display:inline at runtime hence the element will be displayed.
But when printing this page, the element remains hidden in internet explorer (tested with IE 6,7,8).
Do you have a solution or workaround?
Minimalistic example (html file):
<html><head>
<LINK rel="stylesheet" type="text/css" href="minimal.css">
</head><body onload="displayCol();">
<script>
function displayCol()
{
var myrules;
if( document.styleSheets[0].cssRules ) {
myrules = document.styleSheets[0].cssRules;
} else {
if ( document.styleSheets[0].rules ) {
myrules = document.styleSheets[0].rules;
}
}
myrules[0].style.display = "inline";
}
</script>
<div class="col0" id="test">This is hidden by default.</div></body></html>
minimal.css
.col0 {
display:none;
}
UPDATE:
Please note that the decision if the object should be displayed or not is made by the user - it's not known at runtime!
Have you considered using the media=print way of getting the browser to use a stylesheet specifically for printing?
<link rel="stylesheet" href="print.css" media="print" />
If the css changes you are making are always the same, i.e. you can technically store them on a separate css file, then you can use this.
For non-static CSS, in IE (not sure about other browsers/later versions of IE), you could consider using the onbeforeprint event.
See here: http://www.javascriptkit.com/javatutors/ie5print.shtml
Instead of using javascript to change the stylesheet rules, use scripting to apply and remove classes to the elements that need to be displayed. Remember that an element can have more than one class applied to it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Demo</title>
<style type="text/css">
.col0 {display:none;}
div.showCol {display: inline;}
</style>
<script type="text/javascript">
function displayCol() {
document.getElementById("test").className += " showCol";
}
</script>
</head>
<body onload="displayCol();">
<div class="col0" id="test">This is hidden by default.</div>
</body>
</html>
This answer to another question does a great job laying out different ways to do this with scripting: Change an element's class with JavaScript
You could try using a specific style sheet for printing, for example:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
EDIT - too slow :)
Javascript is not being evaluated when printing. It will look just like when Javascript is turned off. You need an extra media=print stylesheet and make any necessary changes there.
If that is not an option, you could create a link that will generate a static page that will look like it's supposed to for that particular user.
Based off your example scenario - in your style sheet add:
.col0 {
display: none;
}
body.showColumn .col0 {
display: inline;
}
Then simply toggle the .showColumn class on your body, and the column's visibility will be toggled accordingly.

Categories

Resources