Issue when using title attribute on style element - javascript

Recently I came across a very weird issue. When you add more than one style element and if you add title attribute on style element with different value assigned in title. Only the first style element css gets applied.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
<style title="Id-1">
h1{color:red}
</style>
<style title="Id-2">
h2{color:blue}
</style>
</head>
<body>
<h1>Hello Red Heading!</h1>
<h2>Hello Blue Heading!</h2>
</body>
</html>
Now if you see in above simple HTML code. Following are possibilities of this code working-
When no title attribute is added - It works.
When title attribute is added with same value or no value - It works.
When we assign different value in title attribute as shown in code only the first style element css gets applied i.e. h1 becomes red but no effect on h2.
On solution is to use data- to mark title as custom attribute or data attribute.
I am more interested in knowing what is the reason behind this behavior.
To see it in action I have created a plunkr you can visit here

It's because title on <style> is used to provide different subset of styles. Documentation
So basically going to View > Page Style you will see id-1 and id-2:
From documentation:
Any stylesheet in a document falls into one of the following categories:
Persistent (no rel="alternate", no title=""): always applies to the document.
Preferred (no rel="alternate", with title="..." specified): applied by default, but disabled if an alternate stylesheet is selected. There can only be one preferred stylesheet, so providing stylesheets with different title attributes will cause some of them to be ignored.
Alternate (rel="alternate stylesheet", title="..." must be specified): disabled by default, can be selected.

Related

jHtmlArea newlines creating div tag and not a paragraph tag

We're using jHtmlArea in our site for the html input elements. I've noticed in our implementation adding a newline generates a new div tag wrapping a br tag. Adding text to the line removes the br tag with resulting html renders with no breaks.
On the example provided here:
https://pietschsoft.com/Demo/jHtmlArea/Default.htm
Adding a line creates a paragraph tag rather than a div+br. Has anyone seen something similar where it's required to add two lines in order to get a line break?
Some thoughts on next steps to debug this issue or just get used to the two-line method?
Edit:
Relevant jsfiddle - https://jsfiddle.net/xrtaw4k8/1/
<script type="text/javascript" src="https://pietschsoft.com/Demo/jHtmlArea/scripts/jHtmlArea-0.8.alpha.min.js"></script>
<script type="text/javascript" src="https://pietschsoft.com/Demo/jHtmlArea/scripts/jHtmlArea.ColorPickerMenu-0.8.alpha.min.js"></script>
<!--http://rs.01298.com/rs/lib/js/jHtmlArea-0.8.min.js-->
<link rel="stylesheet" href="https://pietschsoft.com/Demo/jHtmlArea/content/jHtmlArea/jHtmlArea.ColorPickerMenu.css">
<link rel="stylesheet" href="https://pietschsoft.com/Demo/jHtmlArea/content/jHtmlArea/jHtmlArea.css">
<link rel="stylesheet" href="https://pietschsoft.com/Demo/jHtmlArea/content/bootstrap/bootstrap.min.css">
<div>
<textarea cols=90 rows=50></textarea>
</div>
Script:
$('document').ready(function() {
$('textarea').htmlarea();
});
jHtmlArea uses a feature in the browser to make an element editable. As a result, the HTML generated is actually generated by the web browser, and different web browsers may generate slightly different HTML.
So I discovered the reason why one is producing paragraph tags the other div tags.. apparently if the text area is seeded with tags then each new line will be surrounded with p tags as well? As Chris mentioned above it's a quirk of Chrome and not anything the library is doing.

How to make a button that uses a custom asset and links to another page

I am new to CSS, HTML, and JS but I hope to learn more as I progress through developing my portfolio site. Currently I am trying to put custom buttons I designed on my site, that link to another page. I have the button zero and click state working, but I'm not 100% sure how to make it so that button can be used to link to another page on my site.
Here is the code so far.
<html>
<head><title>button</title>
<style>
div.butn{
background-image:url("https://static1.squarespace.com/static/54da7941e4b0e25dc3648a4f/t/59640885b3db2b282c21c56e/1499728005971/zero_state%40300x-8.png#import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:700");
width:555px;
height:170px;}
div.butn:active{
background-image:url("https://static1.squarespace.com/static/54da7941e4b0e25dc3648a4f/t/5964090b6b8f5bf77b28504f/1499728139538/hover_state%40300x-8.png");
width:555px;
height:170px;}
</style>
</head>
<body>
<div class="butn"></div>
</body>
</html>
Any help is appreciated, sorry in advance for any noobie mistakes xD
I'd advise you to stick with semantic HTML, i.e. use proper tags for what you are trying to convey. In your example you want a button to act like a hyperlink to another URL, so why don't you use the anchor tag which was made for exactely that purpose?
Let's see how we can improve things a bit:
<html>
<head>
<meta charset="utf-8">
<title>button</title>
<style>
.butn {
background-image:url(.../plain.image");
width:555px;
height:170px;
}
.butn:active{
background-image:url("../active.image");
}
</style>
</head>
<body>
<p><a class="butn" href="https://..." title="Show this text on hover">Go to YouTube</a></p>
</body>
</html>
So, what has changed besides the use of the anchor tag? Quite a lot, actually:
I chose a proper character set (UTF-8 should be fine for most about everything)
I lowered your CSS rule's specificity (you may read up on as to why this is !important (no pun intended) on Smashing magazine)
I used an anchor tag <a> to properly mark up the hyperlink
I got rid off the superfluous CSS properties within the .btn:active rule (see CSS-Tricks to learn all about how styles are cascaded)
and last but not least, I properly aligned your code (call me pedantic but missaligned code makes it more difficult to read and hinders your thought process)
There's a lot more ground to cover but this should be enough to keep you occupied for the next two weeks. Keep asking!

JS manipulation on CSS and how it result on page rendering

I know from many sources that applying CSS after the page has loaded can cause "flashing" effect - means the page will re-render the CSS.
For example:
<head></head>
<body>
<link rel="stylesheet"... />
</body>
However, I can't find any source for applying CSS(not inline) with JS after the page is loaded and how it's reflected by the re-rendering it self.
For example:
HTML:
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
<div id="divid" class="displaynone"></div>
<script>
function showit(){
document.getElementById("divid").className += " displayblock";}
window.onload = showit;
</script>
</body>
CSS:
.displaynone {display:none;}
.displayblock {display:block;}
Will the second example will be forced to re-render the css after the page is loaded? I want to understand the deeps of how the displayblock is actually apply to the div.
If you apply your <link rel="stylesheet"... /> after your DOM elements in your markup you can end up with "flickering" effects. This is caused because when the browser load the CSS file (a network request is made), the DOM is being already displayed in the ViewPort (which has not yet any style applied).
In the second case where you add <link rel="stylesheet"... /> in your head, the browser download your CSS file before rendering the DOM on the ViewPort. At this point your JavaScript change class attribute to the DOM and you have no flickering (as all CSS has been already loaded).
When you change the DOM with a property which is related to the its visual representation the browser execute a "paint" this means that an area of the ViewPort is partially or fully re-rendered.
An interesting article regarding browser painting and performance and rendering path. Also of interest if you are using Chrome Dev Tools.

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.

Can't set z-index via CSS

<html>
<head>
<title>Sample</title>
<script>
window.onload = function()
{
alert(document.getElementById('div1').style.zIndex);
alert(document.getElementById('div2').style.zIndex);
}
</script>
<style type="text/css" media="screen">
#div2
{
z-index: 1;
}
</style>
</head>
<body>
<div id="div1" style="z-index:1"></div>
<div id="div2"></div>
</body>
The outcome of the above code is "1" for the 1st alert, and nothing for the 2nd.
How come i can't set the z-index of "div2" via CSS?
Thanks.
1: it is set, but JS cant determine it if it's not set inline
2: it would'nt have any effect, if the object is not positioned(as gulbrandr posted)
regarding to 1.
If it's not set inline(or by javascript), you can retrieve it using currentStyle or getComputedStyle what gives you the currently applied style.
From W3Schools.com:
z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)
The .style.* set of properties map directly on to properties set via the style attribute, not those which are cascaded from a proper stylesheet.
To find the computed z-index, you need to use getComputedStyle

Categories

Resources