CSS manipulation using buttons - javascript

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>

Related

Is there any way to change background color of ::selection (selected text) using JavaScript?

I want to change the background of my text selection using HTML button.
Is there any way to change background color of ::selection (selected text) using JavaScript?
In general where it's not possible to directly change pseudo element settings via JS it is possible to set CSS variables using JS.
So if you have something like this in your stylesheet:
::selection {
background-color: var(--selcolor);
}
and something like this in your JS:
element.style.setProperty('--selcolor', selcolor)
it will work.
Here's small example. It changes the selection color variable in the body:
function selChange(color) {
document.body.style.setProperty('--selcolor', color);
}
body {
--selcolor: yellow;
}
::selection {
background-color: var(--selcolor);
}
<button onclick="selChange('cyan');">Cyan</button>
<button onclick="selChange('magenta');">Magenta</button>
<button onclick="selChange('yellow');">Yellow</button>
<p>Highlight some of this text, then click a color and highlight some text...</p>
you can make it by toggle class give your body a class which will take the default selection style and make a class to toggle it when click the button
Here's example in pure CSS
<!DOCTYPE html>
<html>
<head>
<style>
.body-selection-green *::selection {
background: green;
}
.body-selection-yellow *::selection {
background: yellow
}
</style>
</head>
<body class="body-selection-green">
<div> Try to select me </div>
<button> change selection background</button>
<script>
let btn = document.getElementsByTagName("button")[0];
btn.addEventListener("click", function() {
if(document.body.classList.contains("body-selection-green")) {
document.body.classList.remove("body-selection-green")
document.body.classList.add("body-selection-yellow")
} else if(document.body.classList.contains("body-selection-yellow")) {
document.body.classList.remove("body-selection-yellow")
document.body.classList.add("body-selection-green")
}
});
</script>
</body>
</html>

VueJS: dynamic class name inside style tags

I have a VueJS application which contains some Materializecss modals, all wrapped within single page components. Due to the nature of the application I have to assign dynamic unique IDs to each modal. Below is a snippet:
<template>
<div :id="modal_id" :class="'modal '+modal_id">
<div class="modal-content">
.... stuff here
</div>
<div class="modal-footer">
<a class="modal-close waves-effect waves-green btn-flat">Exit</a>
</div>
</div>
</template>
<style type="text/css" scoped>
.modal {
width: 90% !important;
height: 100% !important;
}
.modal_id
{
background-color: black;
}
</style>
<script type="text/javascript">
import pdf from 'vue-pdf'
export default {
data: function() {
return {
modal_id: 'ViewPdf_'+this.$root.g(), // this.$root.g() returns a unique integer
}
},
}
</script>
My question is if it's possible to use Vue to modify the custom class name from within <style></style> tags to match the class name generated when component is mounted. If not, what workarounds I could use?
<style type="text/css" scoped>
.modal {
width: 90% !important;
height: 100% !important;
}
.modal_id // <--- I wish this class name was the same with value of this.modal_id
{
background-color: black;
}
</style>
If the CSS is all contained in your Vue component, you could just produce the style information in your component rather than trying to match up the css selector based on the DOM id.
Specifically, instead of doing this:
<div :id="modal_id" :class="'modal '+modal_id">
Do this:
<div :id="modal_id" :style="modalStyle">
and then within your component, have a computed property for the style, using the guidelines at https://v2.vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles
For example:
computed: {
modalStyle: function () {
return {backgroundColor: 'black'};
}
}
You can build a computed property that will react to changes in modal_id and calculate a class name that you want to attach to particular modal.
<template>
<div :id="modal_id" :class="className">
...
</div>
</template>
<script type="text/javascript">
export default {
data: function() {
return {
}
},
computed: {
className: function () {
if (this.modal_id === <your modal_id1>) return 'class1';
else if (this.modal_id === <your modal_id2>) return 'class2';
},
modal_id: function () {
return 'ViewPdf_'+this.$root.g()
}
}
}
</script>
<style>
.class1{}
.class2{}
</style>
the modal_id also should be a computed property if you want to make it dynamic.
Yes, you can edit the css property name with javascript if you use an external css file. Here is a simple example in pure javascript that shows how I change the name of the css name, thereby placing its style on the second paragraph.
//the index of the stylesheet based on load order
var cssIndex = 0;
var cssRules = (document.all) ? 'rules' : 'cssRules';
function changeClass() {
for (i = 0, len = document.styleSheets[cssIndex][cssRules].length; i < len; i++) {
if (document.styleSheets[cssIndex][cssRules][i].selectorText === ".text") {
document.styleSheets[cssIndex][cssRules][i].selectorText = ".text2";
return;
}
}
}
.text {
text-align: center;
}
<button onclick='changeClass()'> Change css property class name </button>
<p id="1" class="text">This is text class</p>
<p id="2" class="text2"> This is text2 class</p>
I hope you can apply it in your Vue code.

Make content of header disappear when menu opens

I basically want to make that when I press on a button the first time it adds display: none; to an element and when I press it again it makes the element appear again (so add display: none;). How would I do this with jQuery?
This is the jQuery I tried to implement but as I'm new to Javascript I don't know why it isn't working.
$('#menuBtn').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$('.header-text').css({
'display': 'none'
});
} else {
$('.header-text').css({
'display': 'block'
});
}
$(this).data("clicks", !clicks);
});
Use toggle or slideToggle (With animation)
$('#menuBtn').on('click', function() {
$('.header-text').toggle();
});
$('#menuBtnSlide').on('click', function() {
$('.header-text').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menuBtn">Toggle</button>
<button id="menuBtnSlide">SlideToggle</button>
<div class="header-text">
This content must me show and hide
</div>
You could supply a modifier class in some external stylesheet for hiding the text and toggle it via toggleClass.
Word of advice: It's best not to use something like toggle because it will inject inline css into your elements, making it difficult to override in the long-run for something so simplistic.
const $headerText = $('.header-text');
$('#menuBtn').click(function() {
$headerText.toggleClass('header-text--hidden');
});
.header-text--hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menuBtn" type="button">Toggle</button>
<header>
<p class="header-text">Text 1</p>
<p class="header-text">Text 2</p>
<p class="header-text">Text 3</p>
<p class="header-text">Text 4</p>
</header>
You actually don't need jQuery for this.
You can add CSS rule to set .hidden to display: none and then toggle that class when the button is clicked.
To catch the click event on the button, you need a click event listener
const header = document.querySelector('.header');
const toggle = document.querySelector('.menu-toggle');
toggle.addEventListener('click', () => {
header.classList.toggle('hidden')
});
.header {
background: red;
height: 3em;
}
.hidden {
display: none;
}
<header class="header"></header>
<button class="menu-toggle">Click me!</button>
.hidden{display:none !important;}
$('#menuBtn').click(function() {
$('.header-text').toggleClass("hidden");
});

How to change one HTML file to another without changing link?

I have an html file(a webpage). I want when I press a button on it, the page should be replaced by another html file (with its own css, javascript functions etc) without being redirected to some other link.
For example, if link in first case is abc.com/def it should be same after too.
Using this code, I am able to change webpage look, but not getting how to change look (and also manage to load css and js functions) from another file.
<script type="text/javascript">
document.body.addEventListener('click',function(){
document.write("THIS IS NEW TEXT")
},
false);
</script>
You need to look into frameworks like AngularJS, Specially Routing of Angular. They provide such features built-in for web applications. However, you can do it the hard way, using javascript, like you are doing it right now. Add CSS and change whole body HTML using javascript if you don't want to learn any new framework or libraries.
You want to use PJAX,
Here's a link for an example.
As discuss by others, you should use a Framework to do this..
But this is a complete solution you can inspire of:
let layouts = {}
let current = null
// Display the new page by deleting current, and replacing by the good one
let displayLayout = (layout_id) => {
let parentNode = current.parentNode
parentNode.removeChild(current)
current = layouts[layout_id]
parentNode.appendChild(current)
loadEvents(current)
}
// Load event for HTML DOM you just created
let loadEvents = (layout_el) => {
Array.from(layout_el.getElementsByClassName('go-to-layout')).forEach(el => {
el.addEventListener('click', e => {
e.preventDefault()
displayLayout(e.currentTarget.dataset.layout)
})
})
}
// On init I get all the existing layout, but you can build you own dictionary an other way.
Array.from(document.getElementsByClassName('layout')).forEach(l => {
layouts[l.id] = l
if (l.classList.contains('active')) {
loadEvents(l)
current = l
}
else {
l.parentNode.removeChild(l);
}
})
/* Global CSS */
body, html, .layout {
height: 100%;
margin: 0;
}
* {
color: #FFF
}
.layout {
display: flex;
}
.nav, .page {
}
.nav {
width: 150px;
background: #555;
}
/* Special CSS for one layout */
#layout1 {
background: red;
}
#layout2 {
background: blue;
}
<div id="layout1" class="layout active">
<div class="nav">
Page 2
</div>
<div class="page">
This is page 1
</div>
</div>
<div id="layout2" class="layout">
<div class="nav">
Page 1
</div>
<div class="page">
This is page 2
</div>
<style>.page { font-size: 2em }</style>
</div>

Changing background colour of toggle after click via custom JS in wordpress

I am currently trying to add a custom JS function (via the Live Code Editor Plugin) to my wordpress website. The goal is to change the background colour of a toggle after click (i.e. from red -> green). I have tried this function but although the selector works for CSS, the JS function is not working:
CSS:
\23 toggle-id-1 {
background-color: red;
}
JS:
var \23 toggle-id-1 = document.getElementById("\23 toggle-id-1");
\23 toggle-id-1.onclick = function(){
\23 toggle-id-1.style.backgroundColor = "green";
}
In JSFiddle this worked without any problems, is there anything different for this plugin?
Thank you!
jQuery solution:
$("#toggle-id-1").click(function () {
$(this).toggleClass("green");
});
#toggle-id-1 {
background-color: red;
height: 100px;
width: 100px;
}
#toggle-id-1.green { background-color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle-id-1" class=""></div>
You can't have spaces in variable names. Name your variable something else.

Categories