Emoji One appears Oversized when integrated in my blog - javascript

So I integrated the emoji one script in my blog to convert all the unicode emojis into the emojis from emoji one. It works but it is over-sized and collides with other posts.
This is the code I've used to integrate:
$(window).load(function() {
function convert() {
var input = document.body.innerHTML;
var output = emojione.unicodeToImage(input);
document.body.innerHTML = output;
}
convert();
});
img.emojione {
/* Override any img styles to ensure Emojis are displayed inline*/
margin: 0px !important;
display: inline !important;
min-width: 15px!important;
min-height: 15px!important;
vertical-align: middle;
}
<script src="//cdn.jsdelivr.net/emojione/2.0.0/lib/js/emojione.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/emojione/2.0.0/assets/css/emojione.min.css" />
And a working fiddle
Here's the preview on my blog how it looks like.
Despite trying my best I couldn't get it to display in its default size.
Here is my blog's entire code.
Any help is appreciated.

That's because you are loading the EmojiOne CSS after the Custom CSS in your blog which is making width:auto from EmojiOne CSS "working".
So put this line below before your Custom CSS:
<link rel="stylesheet" href="//cdn.jsdelivr.net/emojione/2.0.0/assets/css/emojione.min.css"/>

Related

Transparent styling to table when printing

I've created a table with some simple styling elements such as borders, colors, etc. When attempting to print this table, the print preview does not show any of my CSS. I've seen some answers suggesting it's a bootstrap.css issue but after attempting some of the fixes, it doesn't seem to make a difference. I have also made sure that the "background graphics" option is selected in the browser during print preview.
Is there a way to access the code or css of the print preview page as opposed to my actual code? Or is there another fix that I'm missing?
If it helps, I'm using leaflet and a print plugin, everything looks right except for the table. Thank you for taking the time to read or answer this, I've attached a photo of the table in print preview.
Screenshot of my table missing styling in print preview.
You can use
<link rel="stylesheet" media="print" href="print.css" />
to style the printing preview.
I see. print css and main css is difference.
So you style it in other ways.
for example:
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />
body {
margin: 2em;
color: #fff;
background-color: #000;
}
/* override styles when printing */
#media print {
body {
margin: 0;
color: #000;
background-color: #fff;
opacity:0.3;
}
}
Add missing bootstrap classes in your css file with #media print. Example:
#media print {
.table td {
background-color: #fff;
}
}
More about media print:
https://developer.mozilla.org/en-US/docs/Web/CSS/#media

Add CSS to iframe elements using the page .css file [duplicate]

This question already has answers here:
How to apply CSS to iframe?
(28 answers)
Closed 5 years ago.
First of all, it seems like there are a lot of posts with the same kind of title, but none of them is focusing on the problem I am facing. That is the reason why I opened this new question, and I hope the title is explicit enought.
I am working on a text-editor on my own, and I was using a <textarea> at first, but I wanted to add various styles to the elements I was writing. After reading a lot of topics about it, I decided to change my <textarea> for an <iframe>.
Before trying anything new with design or whatever, I would like to have the same behaviour with this <iframe> and my previous <textarea>. But I am facing an issue :
My <iframe> element is in a page, index.html, which is linked with a CSS file, style.css. I am able to change the global <iframe> design (like width, height, border...) of the frame in style.css, but I can't add a special design to the elements inside the <iframe> with properties I added in my style.css.
I saw in the inspector that the iframe has a #document before any tag
But even if I tried to add this strange tag to the CSS, the style is not applied to the elements I want to change.
So to be concise, my question is this one : Is it possible to add some style to elements inside an iframe in the stylesheet file of the host page ?
Here are some relevant parts of my code, which shows what I would like to do : add a custom font to the <p> tags inside the <iframe>.
window.onload = function() {
var frameElement = document.getElementById("text-field");
var doc = frameElement.contentDocument;
doc.body.contentEditable = true;
}
html, body {
margin : 0px;
background : #f5f5f5;
font-family: 'Roboto', sans-serif;
}
input:focus, textarea:focus {
outline: none;
}
.text-editor {
min-width : 800px;
width : 1200px;
max-width : 1600px;
min-height : 400px;
height : 850px;
max-height : 850px;
background : #f0f0f0;
box-shadow : 0px 1px 4px #ccc;
margin : auto;
overflow:auto
}
.text-editor .text-field {
display : block;
background-color : white;
min-height : 300px;
height : 600px;
max-height : 600px;
width : 90%;
margin : auto;
padding : 5px;
border: 1px solid #ccc;
}
.text-editor .text-field #document html body {
font-family: 'Source Code Pro', monospace;
font-size : 14px;
}
<!DOCTYPE html>
<html>
<head>
<title>A Text Editor Project</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="text-editor">
<iframe class="text-field" id="text-field" src="about:blank" contenteditable="true">
</iframe>
</div>
</body>
</html>
Styles from the parent will not be applied to the document within the iframe. The best solution is to add the stylesheet to the document in the iframe. Either via javascript or creating a template page to load in via src.
Something like:
var head = doc.head
var link = doc.createElement('link')
link.type = 'text/css'
link.rel = 'stylesheet'
link.href = ...src...
head.appendChild(link)
in your existing javascript.
I've put together a small example with a style block here

Update style of already rendered webpage by using js to load a css stylesheet

I'm currently trying to load some CSS file into a page that has already been loaded and rendered by the browser and apply it's styling to the page without reloading it as a whole.
I can't modify the original page too much, so the CSS has to be linked/included in the html at a later moment using JavaScript. I tried adding a <link> element referring to the CSS file in the header, as well as adding <style> with the CSS itself.
The modification of the html does work fine, but the layout of the page isn't affected at all. Probably because the browser doesn't re-render the page at this point?
I saw some answers here suggesting that it would work like described above, but for me it does nothing. What could be the reason here?
As requested, some of the JavaScript i'm using to update the HTML of the page. Both ways work fine, the elements are added to the page. So I presume the error lies somewhere else.
1.) Adding actual CSS by reading it with XHR from file:
var promptCSS= document.createElement('style');
promptCSS.type="text/css";
var cssPromptFileSelectStyleURL= 'promptFileSelectStyle.css';
//add css of prompt into current page html
var cssFile = new XMLHttpRequest();
cssFile.open("GET",cssPromptFileSelectStyleURL,true);
cssFile.send();
cssFile.onreadystatechange = function(){
if (cssFile.readyState== 4 && cssFile.status == 200){
promptCSS.innerHTML=cssFile.responseText;
}};
var head=document.querySelectorAll("head")[0];
head.appendChild(promptCSS);
2.) adding <link> referencing CSS file
var promptCSS= document.createElement('link');
promptCSS.rel = 'stylesheet';
promptCSS.type = 'text/css';
promptCSS.href = 'promptFileSelectStyle.css';
var head=document.querySelectorAll("head")[0];
head.appendChild(promptCSS);
Inline CSS isn't set between <script> tags, but between <style> tags.
Also here is a Fiddle that tests your method : https://jsfiddle.net/sLpfLsLc/
It waits 2 seconds before loading a new CSS file containing
*{
background: red;
}
As you can see, it works fine !
Maybe this will point you in the right direction. I am not 100% sure I understood what you need. So if this is the case you can try appending a link tag with the css file url in it whenever you need. For instance you can trigger that script when you scroll X height or a click happened or whatever. For this case I am appending a style tag to the head every 2 seconds and then removing it so it won't keep appending every 2 seconds. Instead of style maybe you can do a <link rel="stylesheet" type="text/css" href="promptFileSelectStyle.css"/>
Hope this helps.
function remover(){
$(".style-tag").remove();
}
function x(){
var style = $('<style class="style-tag">.columns {justify-content: space-around;} </style>');
$('html > head').append(style);
$(".parent").toggleClass("columns");
}
$(document).ready(function(){
setInterval(function(){
remover();
x();
}, 2000);
});
.parent{
display:flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
}
.box{
background: red;
border: 1px solid black;
width: 100px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="box">content</div>
<div class="box">content</div>
<div class="box">content</div>
<div class="box">content</div>
<div class="box">content</div>
</div>

In which order webpage codes are executed and how can we change the order?

Let look at the following codes as example.
var tst;
tst = document.getElementsByClassName("tst");
tst.style.backgroundColor = "#008000";
tst.style.marginTop = "50px";
tst.innerHTML = "Testing an element.";
body {
font-size: 0px;
padding: 0px;
margin: 0px;
width: 100%;
overflow-x: hidden;
}
.tst {
font-family: Arial;
font-size: 20px;
color: #FFFFFF;
text-align: center;
background-color: #FF0000;
padding: 10px;
margin: 10px auto 0px auto;
width: 200px;
display: block;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="tst"></div>
<script src="./js_style.js"></script>
</body>
<html>
Now my question is, in which order browser will execute this codes,
like,
1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)
5. Styles in JavaScript
or in different order?
And how can we change the order?
Thanks Everyone.
CSS is not executed. It's just a set of rules that dictates what an element should look like.
So yes, the order you specified is the right order, but that doesn't necessarily mean that a later style overrules an earlier one.
Most important here, is the specificity of the CSS selector. For instance a CSS selector with a class name (like .tst) is more specific than a selector with a tag name (like div). So if you would have both selectors, and both of them setting the color of your test div, then the color of .tst would be used over the other.
But when selectors are of the same specificity, the last one that is encountered is used, so there may be a later one in the same style sheet, or in a different external style sheet. When evaluating this, the order you mentioned is important.
However, that specificity merely affects the internal and external style sheets. When you have inline styles, they always overrule the styles in the style sheet.
the same applies to the JavaScript code, since it just changes the inline style of the element.

CSS/HTML/Javascript tricks to print a web page without images

I'm trying to put a print button on a web page that will print the page's contents except images. Any ideas?
You can use CSS to disable all images on your website only when printing.
#media print {
img {
display: none !important;
}
* {
background-image: none !important;
}
}
No need to use a button, unless you want to give people the option to print images or no images.
If you just want people to print without images (which is preferred most of the time), you can just use a print stylesheet.
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Then add
img {display: none;}
You need a print style sheet. There are two options for that:
Reference a separate stylesheet with the following code:
<link rel="stylesheet" type="text/css" href="printstylesheet.css" media="print"/>
In that stylesheet, put the following:
img {
display: none;
}
Put the following in your main stylesheet:
#media print {
img {
display: none;
}
You could use a stylesheet for print media and make a rule like below..
img { visibility:hidden; }
...
<link rel="stylesheet" type="text/css" href="myprintstyles.css" media="print">
You could also use display:none as the image rule but this will not preserve the spacing and could completely change the layout of the printed page.

Categories