Google app script : Separating HTML and CSS - javascript

i have a question connected with title. Currently i am trying to follow google "best practice". https://developers.google.com/apps-script/guides/html/best-practices
I have no idea why its not working.
Here is a MainPageCSS.html
<pre>
<style>
p {
color: green;
}
</style>
</pre>
Then comes server-side function:
function includeCSS() {
var content = HtmlService.createTemplateFromFile('MainPageCSS').getRawContent();
//.getContent();
return content;
}
I am using a sidebar via HtmlService, and calling google.script.run.withSuccessHandler(SuccessAddCss).includeCSS();
I tried different ways of adding css into page, but noone worked...
function SuccessAddCss(Style){
var styles = document.getElementById("allStyles").innerHTML += "p { color:red }";
var text = styles.innerHTML;
var styleNode = document.createElement('style');
var styleText = document.createTextNode('p { color:red; } ');
styleNode.appendChild(styleText);
document.getElementsByTagName('head')[0].appendChild(styleNode);
alert("ok");
};
function teso()
{
google.script.run.withSuccessHandler(SuccessAddCss).includeCSS();
alert(text);
};
In order to add somehow css from MainPageCSS to MainPage
id="allStyles" type="text/css"
<pre>
<style id="allStyles" type="text/css">
h2{
font-family: Times New Roman, Times, serif;
font-size: 14px;
text-align: center;
}
</style>
</pre>
Also sidebar is launched in SandBox.Native mode, so it allows css dynamic changes.
Thank you for help.

In my website, I use a scriptlet to include the CSS file.
HTML:
<?!= include('MainPageCSS'); ?>
<div>Some Content Here</div>
<form>A form</form>
<button>A button</button>
That's how the include function gets called from the HTML file. Just curious, could you try taking out the <pre> tags and see if that makes any difference?

Related

How create new container tag in html

i have read about this theme but not solved. Something similar to header and footer html tag with content. Ok it not standard html custom tag, but i want something like:
<html>
<body>
<content>
This is a text
</content>
</body>
</html>
So, I have defined CSS as:
content {
backuground-color: red;
display: block;
padding: 1em;
}
And Javascript as:
var customTag = document.createElement('content');
var customTag = new customTag();
document.body.appendChild(customTag);
But something not work. How i can fix problem? What i forget to do more?
Thanks very much.
<content> used to be an HTML tag (I think)...
Here's a way with <customcontent>, instead:
var cc=document.createElement("customcontent");
cc.innerText="Hello! I'm a custom content tag!";
document.body.append(cc);
customcontent {
background-color: red;
display: block;
padding: 1em;
}

Buttons are not appearing in the html on click

Good day, Im creating buttons using DOM and toggle to change the paragraph in the HTML file when you click it in on in JavaScript however, the buttons are not appearing in the html and I've set it up so it sits on top of the paragraph. I have used CSS to style the buttons.
Here are the JC, HTML and CSS files:
HTML:
<!DOCTYPE html>
<head>
<link scr="stylesheet" type="text/css" href="A3 .css">
<script src="A3.js"></script>
</head>
<div id ="button_containter"></div>
<body id= target_p>
In considering any new subject, there is frequently a tendency, first, to overrate what we find to be already interesting
or remarkable; and, secondly, by a sort of natural reaction, to undervalue the blue state of the case, when we do
discover that our notions have surpassed those that were really tenable
</body>
</html>
JS:
let para = document.getElementById("target_p");
class ParagraphChanger {
constructor (p){
this.p=p;
var btnDiv = document.getElementById("button_containter");
let btnBold = this.createButton("toggle bold");
btnBold.addEventListener('click',() => this.makeBold());
btnDiv.appendChild(btnBold);
let widthBtn = this.createButton("toggle width");
widthBtn.addEventListener('click', () => this.changedWidth());
btnDiv.appendChild(widthBtn);
let clrBtn = this.createButton("togglt color");
clrBtn.addEventListener('click', () => this.changeColor());
clrBtn.appendChild(clrBtn);
let szBtn = this.createButton("toggle size");
szBtn.addEventListener('click', () => this.changeSize());
}
createButton (name){
const btn = document.createElement('button_container');
const buttonName = document.createTextNode(name);
buttonName.appendChild(buttonName);
return btn;
}
makeBold(){
// changing the size to bold, getting it from CSS s
this.p.classList.toggle("Toggle_bold");
}
changedWidth(){
this.p.classList.toggle('Toggle_width');
}
changeColor(){
this.p.classList.toggle('Toggle_width');
}
changeSize(){
this.p.classList.toggle('Toggle_size');
}
window.onload = () => {
new ParagraphChanger(document.getElementById('target_p;'));
}
};
CSS:
Toggle_bold {
font: bold;
}
.Toggle_width{
width: 50%;
}
.Toggle_width{
color: #ff2800;
}
.Toggle_size{
font-size: 100%;
}
#button_containter{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
JS issues:
First, when you call document.createElement(), you are accidentally passing in the name of the container. Instead, you should pass in button, like so: const btn = document.createElement('button');
Next, you don't need to create a text node. btn.innerText = name will work just fine ;)
Finally, you accidentally stuck a semicolon in your new ParagraphChanger(document.getElementById('target_p;'));.
Also, you put the call to window.onload inside the class; move it outside!
CSS issues:
font: bold; won't work, you need to use font-weight: bold;
Also, you forgot a period in your Toggle_bold selector. It should be .Toggle_bold to select the class.
Here's a CodePen with your final, fixed code.
I hope this solves your problem!
Took a bit of editing as your code had a lot of issue. The container id had a typo, the button was created with button_container which is actually the ID etc. Below you can see how the button is created.
CreateElement:
In createElement we must specify the tag name not the ID itself to created new html element. Read more here.
document.createElement('button'); //p tag, h1,h2,h3 tags etc, divs
SetAttribute:
For the id we use setAttribute which Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.
btn.setAttribute("id", "button_content"); //Ids,classes and data-attribute
//id="myid", class="myclass", data-myid=1
InnerText:
Finally for the value, we use innerText to set text of button and call it onLoad.
btn.innerText ="Click me";
The complete code:
<!DOCTYPE html>
<html>
<head>
<title>Website Project</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
Toggle_bold {
font: bold;
}
.Toggle_width{
width: 50%;
}
.Toggle_width{
color: #ff2800;
}
.Toggle_size{
font-size: 100%;
}
#button_containter{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
</style>
</head>
<body>
<div id ="button_container"></div>
<script>
function createButton (name){
const btn = document.createElement('button'); //Add button with create Element
btn.setAttribute("id", "button_content"); //Add Id with setAttribute method
btn.innerText ="Click me";// Add value of the button with innerText property
let container = document.getElementById("button_container"); //Fetch container div
console.log(btn);
console.log(container);
container.appendChild(btn); //Append button to it.
}
function makeBold(){
// changing the size to bold, getting it from CSS s
this.p.classList.toggle("Toggle_bold");
}
function changedWidth(){
this.p.classList.toggle('Toggle_width');
}
function changeColor(){
this.p.classList.toggle('Toggle_width');
}
function changeSize(){
this.p.classList.toggle('Toggle_size');
}
window.onload = () => {
createButton();// call button function here to create the button
}
</script>
</body>
</html>
Finally, i believe we learn by doing and so i hope this was helpfull in clearing some of the confusions as well solving your problem :).

CSS manipulation using buttons

I am trying to make a small settings page where users can change how the site looks, I want them to be able to click a button and the sites CSS update along with it (along with the background colo(u)r) and I would like the changes saved across all pages.
How would I do this?
From your question, I have come up with a solution that suits your use case better in a neater implementation.
Take the following code for example;
<div id="container">
<div>
<h1>Page Header</h1>
<h3>Page Sub Header</h3>
<p>Page Content</p>
</div>
<div class="buttons">
<button id="default-theme" onclick="setTheme(event)">default</button>
<button id="theme-one" onclick="setTheme(event)">theme one</button>
<button id="theme-two" onclick="setTheme(event)">theme two</button>
</div>
</div>
In the code above, you have some unstyled elements and some buttons to set the preferred theme color.
You can set the theme colors like below in your CSS file. The code below is an SCSS implementation. Check out the live solution on codePen https://codepen.io/sirwhite/pen/mdbNjLG
<style>
// Default theme color
.default-theme {
background: $default-bg;
}
.default-theme h1 {
color: $default-color;
}
.default-theme h3 {
color: $default-color;
}
.default-theme p {
color: $default-color;
}
// Theme One Colors
.theme-one {
background: $theme-one-bg;
}
.theme-one h1 {
color: $theme-one-color;
}
.theme-one h3 {
color: $theme-one-color;
}
.theme-one p {
color: $theme-one-color;
}
// Theme Two Colors
.theme-two {
background: $theme-two-bg;
}
.theme-two h1 {
color: $theme-two-color;
}
.theme-two h3 {
color: $theme-two-color;
}
.theme-two p {
color: $theme-two-color;
}
</style>
Now, use javascript to set the theme color based on the user's selection
var theme = '';
var container = document.getElementById('container');
window.addEventListener('load', function() {
if(localStorage.theme && localStorage.theme !== '') {
theme = localStorage.theme;
container.classList.add(theme);
}
else {
theme = 'default-theme';
}
});
function setTheme(event) {
theme = event.target.id ;
localStorage.theme = theme;
container.classList = [];
container.classList.add(theme);
}
You can use LocalStorage to persist the selected theme value across all pages. When the page loads, you can check if localStorage value is set else set the theme to the default theme.
Check out the live solution on codePen https://codepen.io/sirwhite/pen/mdbNjLG
You could do this with javascript or jquery by calling a function when your button is clicked.
Our HTML, notice how we call myFunction when we click on the button.
<h1 class="item blue">Hello World</h1>
<button onClick="myFunction()">Click Me</button>
Some basic CSS:
.blue {
color: blue;
}
.red {
color: red;
}
Our Javascript will add a class depending on what class is already present. We can change our target variable to add/remove classes from a different element.
function myFunction() {
var target = document.querySelector('.item');
if (target.classList.contains('red')) {
target.classList.remove('red')
target.classList.add('blue')
} else if (target.classList.contains('blue')) {
target.classList.add('red')
target.classList.remove('blue')
}
}
This is a very cookie-cutter way of doing this, but it works and you can take the same principles here and apply it to your code.
To use this site-wide, just use a seperate javascript file and import the same javascript and call the same function on each page.
Hope this helps :)
As per my understanding of the question you want to change the background colour on the button click
<!DOCTYPE html>
<html>
<head>
<style>
.yellows {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<button id="btn">click me </button>
<script>
$('#btn').click(function() {
$('body').toggleClass( "yellows" );
});
</script>
</body>
</html>

Styling encoded mailto address

I have used an online email encoder to generate a sort-of harvester-proof email-link, but this link won't adapt to my styling. Does anybody know how I can style this kind of link? As of now I don't know where to call the css class.
Here is an example of the link I've encoded:
<div class="mailto-link"><script type="text/javascript"><!--
var gefmyis = ['m','r','l','l','i','a','m','m',' ','e','o','a','"','h','m','e','<','e','/','o',':','a',
'>','a','s','t','c','m','s','l','"','=','.','i','t','>',
'l','f','i','#','.','s','s','"','<','e','"','o','a','c',
't','l','m','t','#',' ','c','=','e','e','i','t','a','a'];
var lmmezyh =
[29,4,25,55,54,53,9,22,31,5,14,23,38,3,40,51,0,17,61,28,15,
34,45,62,36,13,27,52,18,43,8,37,26,24,49,63,33,6,11,20,56,35,
48,30,60,39,44,58,1,32,46,12,59,16,50,2,57,7,47,21,42,19,10,41];
var bsmqvte= new Array();for(var i=0;i<lmmezyh.length;i++)
{bsmqvte[lmmezyh[i]] = gefmyis[i]; }for(var i=0;i<bsmqvte.length;i++)
{document.write(bsmqvte[i]);}
// --></script>
<noscript>Please enable Javascript to see the email address</noscript></div>
Thanks!
Edit:
By just inspecting in Console what is actually created by that script you'll notice this:
<a class="email" href="mailto:test#email.com">test#email.com</a>
means a.email in your CSS will suffice:
a.email{
font-weight: bold;
color:red;
}
http://jsfiddle.net/990exhow/
Simply use:
a[href^="mailto:"]{
font-weight: bold;
color:red;
}
http://jsfiddle.net/pbve1aum/1/
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Or wrap all into a SPAN
<span class="mailtoStyle">
<!-- all in here -->
</span>
and in your CSS:
.mailtoStyle a{
font-weight: bold;
color:red;
}
http://jsfiddle.net/pbve1aum/2/

Creating an Internal Style Sheet With Javascript

So I'm trying to use javascript to create an internal style sheet in the header, but its not working. This point of this script would be to have the tab for the page that I'm on be highlighted.
Below is not the actual site i'm implementing it on, just testing - but its not working correctly. Is this even possible? Yes I know I could do it with inline css or something but that would be must more confusing !
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function parseUrl( url ) {
var a = document.createElement('a');
a.href = url;
return a;
}
var page=parseUrl('').search
function getSecondPart(str) {
return str.split('=')[1];
}
var site=getSecondPart(page));
text.innerHTML('<style type="text/css">
."nav_"' + page + '" {background-color:red;} {color=green;} </style>')
}
</style>"
</script>
</head>
<body>
<ul>
<li class="nav_home">Home
<li class="nav_forum"><a href="testtest.html?site=forum"/>Forum</a>
<li class="nav_help"><a href="testtest.html?site=help"/>Help</a>
<li class="nav_roster"><a href="testtest.html?site=roster"/>Roster<a/>
</body>
</html>
parseURL returns an DOM element.
page = parseUrl('').search, if parseUrl('') returned a string, would return the string method search, which is not very useful in itself.
var site=getSecondPart(page)); has an extra parenthese.
text is not defined.
A class like ."nav_"4 is not a valid class.
You have an extra closing brace.
All of these errors will prevent your code from running. A good tool to use to ensure syntax errors do not occur are Chrome's Web Developer, Firefox's Firebug, or JSHint.
Once that is done, do something like this:
var style = document.createElement("style");
style.innerHTML = ".nav_" + page + " { background-color: red; color: green; }";
document.body.appendChild(style);
There are two proper solutions, which are not what you're asking for but solve your problem.
The first way is to use a distinct nav class in each of your lis. That's what you should have been doing all along.
The preferred way:
<li class="nav" id="home"> ...
You can alternatively do this, but it's not a good idea, because the home li is unique.
<li class="nav nav-home"> ...
with
li.nav {
background-color: red;
color: green;
}
The second way is to use a CSS3 attribute selector. However, this may not work on all browsers:
li[class^="nav"] {
background-color: red;
color: green;
}

Categories