I have the following two scss files, and I'm trying to change an attribute that is set when I import an already built component. The first file is the css I'm changing, and the second is the css I'm pulling from. I can't change the second file without messing up the component already built, but I can't seem to figure out how to modify this one attribute...
.button-edit {
.imported-button {
width: 200px;
}
}
.imported-button {
width: 300px;
.imported-button-color {
color: red;
}
}
I have figured out how to change the width through the first code block I've shown above, but how would I change the color from red to blue, for example? I've tried...
.button-edit {
.imported-button {
width: 200px;
.imported-button-color {
color: blue;
}
}
}
... but that doesn't change anything for me. Appreciate the help!
Edit: The Javascript being used is structured like...
<BoxButton className='button-edit'>
<div>
<p>Press here</p>
</div>
</BoxButton>
where the Button component has the css attributes in the .imported-button class
First, you have an error in your code, why did you write className in the html code?
<Button className='button-edit'>
<div>
<p>Press here</p>
</div>
</Button>
you should just write class
<Button class='button-edit'>
<div>
<p>Press here</p>
</div>
</Button>
Second, you have a problem arranging the elements within the scss code, as you want the blue color to activate when its parent class is deleted! How do you want this to be done? This command cannot be implemented because you are asking the language to break its programming to implement your goal
To solve this problem, you have to remove the blue color class from inside the dev whose class you want to delete, so that it becomes as follows
.button-edit {
.imported-button {
width: 200px;
}
.imported-button-color {
color: blue;
}
}
Now we come to JavaScript:
1- We make variables that carry the father div and p
let checkDiv = document.querySelector(".button-edit div")
let checkDivP = document.querySelector(".button-edit div p")
2- We make a function on the button so that it contains two conditions
document.querySelector(".button-edit").addEventListener("click",function(){
if( checkDiv.className === "" )
{
checkDiv.className = "imported-button";
checkDivP.className = ""
}
else
{
checkDiv.className = "";
checkDivP.className = "imported-button-color"
}
})
first condition
if( checkDiv.className === "" )
{
checkDiv.className = "imported-button";
checkDivP.className = ""
}
If the class is empty, add the width class and delete the color class
second condition
else
{
checkDiv.className = "";
checkDivP.className = "imported-button-color"
}
If the width class exists, delete it and add the color class
The final result / https://codepen.io/emozlove/pen/JjpjmQR
Related
It's a to do list and here's the JS I'm stuck into -
function taskCheck() {
let taskCheckboxImg = this.style.backgroundImage;
if(taskCheckboxImg=="url('img/uncheck.png')") {
taskCheckboxImg="url('img/check.png')";
} else {
taskCheckboxImg="url('img/uncheck.png')";
}
}
I want to toggle between check and uncheck by changing the background image when clicked but the if statement doesn't seem to work. Perhaps it doesn't change the background image property in the 4th line.
I could have done this with a regular checkbox but it doesn't seem to have editable properties in CSS. Help!
You are assigning the value to a variable, instead you need to change the value of the CSS property after each condition like
this.style.backgroundImage = "url('img/check.png')";
Also, you are using this, which refers to the current object, so make sure you have the this context available from wherever you call taskCheck() function
You function after the change should look like below
function taskCheck() {
let taskCheckboxImg = this.style.backgroundImage;
if(taskCheckboxImg=="url('img/uncheck.png')") {
this.style.backgroundImage="url('img/check.png')";
} else {
this.style.backgroundImage="url('img/uncheck.png')";
}
}
const myDiv = document.querySelector('div')
myDiv.addEventListener('click', taskCheck)
function taskCheck(e) {
let taskCheckboxImg = e.target.style.backgroundImage;
if(taskCheckboxImg=='url("https://picsum.photos/id/200/200/200")') {
// you have to change css property like this
e.target.style.backgroundImage='url("https://picsum.photos/id/300/200/200")';
} else {
console.log(taskCheckboxImg)
e.target.style.backgroundImage='url("https://picsum.photos/id/200/200/200")';
}
}
div{
width: 200px;
height: 200px;
background-size: cover;
}
<div style="background-image:url('https://picsum.photos/id/200/200/200')"></div>
I would like to create a curriculum presentation by Java Script similar to the one on Udemy.
https://prnt.sc/22zxxrp
I have tried to put both button and content in the same div and to add an event listener which would on click trigger conditional check if both of the elements are of the same parent and if true to display the content.
But it does not work.
The code would be something like this but with more buttons.
let batonceros = document.getElementsByClassName("batno");
let paragraph = document.getElementsByClassName("para");
batonceros.addEventListener("click", function() {
if( batonceros != paragraph && batonceros.parentNode == paragraph.parentNode) {
batonceros.style.display = "block";
}
else {
batonceros.style.display = "none";
}
});
Not exactly sure what you're trying to accomplish, but maybe this might help. It shows how to reference the parent container to find the relative .para from its .batno
let batonceros = document.querySelectorAll(".batno");
let paragraph = document.querySelectorAll(".para");
batonceros.forEach(button => button.addEventListener("click", e => {
e.target.closest('div').querySelector('.para').classList.toggle('show');
}));
.para {
display: none;
}
.show {
display: block;
}
<div>
<p class='para'>This is a paragraph</p>
<button class='batno'>Button</button>
</div>
<div>
<p class='para'>This is a paragraph</p>
<button class='batno'>Button</button>
</div>
To debug, try to see if it works without checking the parent. Also, no need to check to see if the button equals the paragraph. Also, you are changing the button style, not the paragraph style.
batonceros.addEventListener("click", function() {
paragraph.style.display = "block";
}
If this does cause the paragraph to display, your problem may in your element structure.
I have a element with an id="caretToggle" and a button with onclick="caretToggle()". This fires a function that adds a class to invert the caret on the button.
I am successful in running:
function caretToggle() {
var caretElement = document.getElementById("caretToggle");
caretElement.classList.add("dropup");
}
But This leaves the caret inverted after the collapse is closed. I want to toggle the caret once the button is clicked again.
This is my condition code that I have failed to get working:
function caretToggle() {
var caretElement = document.getElementById("caretToggle");
if (caretElement.classList.contains("dropup")) {
caretElement.classList.remove("dropup");
} else {
caretElement.classList.add("dropup");
}
}
Thank you in advance for any help you may provide!
You dont need to check wheter contains or not.
What you can do simply use toggle function on classList :)
function caretToggle() {
var caretElement = document.getElementById("caretToggle");
caretElement.classList.toggle("dropup");
}
And also there is a conditional toggle like:
caretElement.classList.toggle("dropup", counter < 10)
Check here from MDN
If you want to toggle class simply do it like this
let caretElement = document.getElementById("caretToggle");
function caretToggle() {
caretElement.classList.toggle("dropup");
console.log('class attribute contains: ', caretElement.className)
}
span {
margin:10px;
}
.dropup {
background-color: purple;
padding: 1em;
border-radius: 10px;
color: white;
}
<span id="caretToggle">HTMLElement</span>
<br/>
<br/>
<br/>
<br/>
<button onclick="caretToggle()">Click</button>
I am trying to make webpage where there is a div in the center which is being changed, instead of going to different pages.
Ultimately, I would like to have the new div, when clicking on an arrow, to flow from right or left in to the center. But first I would like to make the divs appear and disappear when clicking on the arrows but unfortunately this doesn't work.
This is my javascript:
<script>
function changeToHome() {
document.getElementById("mainmain").style.display="block";
document.getElementById("mainmain2").style.display="none";
document.getElementById("mainmain3").style.display="none";
document.getElementById("mainmain4").style.display="none";
}
function changeToStudy() {
document.getElementById("mainmain").style.display="none";
document.getElementById("mainmain2").style.display="block";
document.getElementById("mainmain3").style.display="none";
document.getElementById("mainmain4").style.display="none";
}
function changeToJob() {
document.getElementById("mainmain").style.display="none";
document.getElementById("mainmain2").style.display="none";
document.getElementById("mainmain3").style.display="block";
document.getElementById("mainmain4").style.display="none";
}
function changeToContact() {
document.getElementById("mainmain").style.display="none";
document.getElementById("mainmain2").style.display="none";
document.getElementById("mainmain3").style.display="none";
document.getElementById("mainmain4").style.display="block";
}
function changePageRight() {
var displayValue5 = document.getElementById('mainmain').style.display;
var displayValue5 = document.getElementById('mainmain2').style.display;
var displayValue6 = document.getElementById('mainmain3').style.display;
var displayValue7 = document.getElementById('mainmain4').style.display;
if (document.getElementById('mainmain').style.display == "block") {
document.getElementById("mainmain").style.display="none";
document.getElementById("mainmain2").style.display="block";
}
else if (document.getElementById('mainmain2').style.display == "block") {
document.getElementById("mainmain2").style.display="none";
document.getElementById("mainmain3").style.display="block";
}
else if (document.getElementById('mainmain3').style.display == "block") {
document.getElementById("mainmain3").style.display="none";
document.getElementById("mainmain4").style.display="block";
}
else if (displayValue8 == block) {}
}
function changePageLeft() {
var displayValue = document.getElementById('mainmain').style.display;
var displayValue2 = document.getElementById('mainmain2').style.display;
var displayValue3 = document.getElementById('mainmain3').style.display;
var displayValue4 = document.getElementById('mainmain4').style.display;
if (displayValue == "block") { }
else if (displayValue2 == "block") {
document.getElementById("mainmain").style.display="block";
document.getElementById("mainmain2").style.display="none";
}
else if (displayValue3 == "block") {
document.getElementById("mainmain2").style.display="block";
document.getElementById("mainmain3").style.display="none";
}
else if (displayValue4 === "block") {
document.getElementById("mainmain3").style.display="block";
document.getElementById("mainmain4").style.display="none";
}
}
</script>
Now I have a few divs that look like this:
<div id="mainmain4">
<img style="width:400px;height:327px;margin-left:auto;margin-right:auto;display:block;" src="Untitled-22.png" />
<h2> My name </h2>
<p>Hi,</p>
<p>Some text</p>
</div>
With these css atributes:
#mainmain {
float: left;
width: 575px;
display: block;
position: relative;
}
And all other divs with display: none; so I can change this to block and the one that was block to none.
For some reason, after when I click on one button of the menu, which activates a changeToX() function, the arrows work great. But before that, when you first go to the website, it doesn't.
Can someone explain me what I do wrong?
You don't tell the browser which divs shall be displayed on load. You can use theonloadevent for this:
<body onload="changeToHome()">
One additional hint: you maybe don't want to use inline JavaScript and CSS.
jQuery is as this simple:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
toggle!
<div id="mainmain">test text</div>
<script>
// you need this, only apply javascript when all html (dom) is loaded:
$(document).ready(function() {
$('.toggle-container').on('click', function(e) {
e.preventDefault(); // this prevents the real href to '#'
// .toggle() is like "on / off" switch for hiding and showing a container
$($(this).data('container')).toggle();
});
});
</script>
This function can be reused, because it is based on classes instead of id's.
Check this JSFiddle: http://jsfiddle.net/r8L6xg15/
Maybe this is of some use. I've tried to make a page control-like behaviour. You can select any container div and put elements in there that have the class 'page'. The JavaScript code will let you navigate those with buttons.
You can make it more fancy by adding the buttons through JavaScript. What you then have is basically a list of pages which are normally displayed as regular divs, but when the script kicks in, it changes them to a page control.
You can call this for any parent element, and in that sense it behaves a bit like a jQuery plugin. It is all native JavaScript, though. And not too much code, I hope. Like you said, I think it's good to learn JavaScript at first. It is very powerful by itself, and it's becoming increasingly powerful. jQuery adds a lot of convenience functions and provides fallbacks in case browser don't support certain features, or when implementations differ. But for many tasks, bare JavaScript will do just fine, and it certainly can't hurt to know your way around it.
Press the 'Run this snippet' button at the bottom to see it in action.
function Pages(element)
{
// Some initialization
var activePage;
// Find all pages within this element.
var pages = document.querySelectorAll('.page');
var maxPage = pages.length - 1;
// Function to toggle the active page.
var setPage = function(index)
{
activePage = index;
for (p = 0; p <= maxPage; p++)
{
if (p == activePage)
pages[p].className = 'page active';
else
pages[p].className = 'page inactive';
}
}
// Select the first page by default.
setPage(0);
// Handler for 'previous'
element.querySelector('.prev').onclick = function()
{
if (activePage == 0)
return;
setPage(activePage - 1);
}
// Handler for 'next'
element.querySelector('.next').onclick = function()
{
if (activePage == maxPage)
return;
setPage(activePage + 1);
}
// Add a class to the element itself. This way, you can already change CSS styling
// depending on whether this code is loaded or not. So in case of an error, the
// divs are just all show underneath each other, and the nav buttons are hidden.
element.className = element.className + ' js';
}
Pages(document.querySelector('.pages'));
.pages .page {
display: block;
padding: 40px;
border: 1px solid blue;
}
.pages .page.inactive {
display: none;
}
.pages .nav {
display: none;
}
.pages.js .nav {
display: inline-block;
}
<div class="pages">
<button class="nav prev">Last</button>
<button class="nav next">Next</button>
<div class="page">Page 1 - Introduction and other blah</div>
<div class="page">Page 2 - Who am I? Who are you? Who is Dr Who?</div>
<div class="page">Page 3 - Overview of our products
<ul><li>Foo</li><li>Bar</li><li>Bar Pro</li></ul>
</div>
<div class="page">Page 4 - FAQ</div>
<div class="page">Page 5 - Contact information</div>
</div>
To dos to make this a little more professional:
Add the navigation through JavaScript
Disable the buttons when first/last page has been reached
Support navigation by keys too (or even swipe!)
Some CSS transform (fade or moving) when toggling between pages
Smarter adding and removing of classes. Now I just set className, which sucks if someone would like to add classes themselves. jQuery has addClass and removeClass for this, which is helpful. there are also stand-alone libraries that help you with this.
Visible indication of pages, maybe with tabs at the top?
In my HTML for my file I have a div with the id "divNavyBox." The code is below.
<div id="divNavyBox" class="box" onmouseover="animated.doAnimation()"></div>
Note that once the mouse hovers over it, it executes the doAnimation() from var animated.
var animated = {
el : document.getElementById("divNavyBox"),
doAnimation : function() {
if (el.className=="box") {
el.className="boxAlt";
}
if (el.className=="boxAlt") {
el.className="box";
}
}
};
I want it to switch between these two cs classes once the method doAnimation is executed. However, it doesn't do anything. I put an alert statement inside of the if(el.className="box" and it didn't ring up as I executed the function, even though the class really IS box. The two CS classes that I want to be used are listed below:
.box {
width: 100px;
height: 100px;
background-color: navy;
}
.boxAlt {
width: 100px;
height: 100px;
background-color: red;
}
Why does the boolean statement el.className="box" keep returning false?
here you assign boxAlt if current = box
if (el.className=="box") {
el.className="boxAlt";
}
here you switch back if current is boxAlt which is allways true if the class has been box from the beginning.
if (el.className=="boxAlt") {
el.className="box";
}
Change it to something like:
doAnimation : function() {
el.className = el.className == "box" ? "boxAlt" : "box";
}
There are at least three problems with your code:
I wonder why there is a ; before onmouseover.
Then you use el.className="box" in the if() which assigns "box" to className. Use == to compare.
Lastly, el.style.className is undefined.
el.className = "box" is not a Boolean statement, it's an assignment.
el.className == "box" is a boolean statement.