I am trying to change the background color of a button in css. The CSS link is working fine, the button changes color when I try to apply bootstrap or use DOM to change the color, but not when I use CSS.
Here's the code:
// let sexybutton= document.querySelector('.sexy');
// sexybutton.style.backgroundColor="red";
// console.log(sexybutton.style);
//Currently commented it out because I do not want to do it this way. Put this here to inform that the button style changes using this method.
.body{
background-color:#CCD6A6
};
.sexy{
background-color: red
};
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/fdee82af88.js" crossorigin="anonymous"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/album/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="style.css">
</head>
<body class="body" >
<button class="sexy" type="submit">Click this</button>
</body>
<script src="index.js"></script>
</html>
Your CSS syntax is wrong. The semi-colon ; must be placed after each CSS property, not after each CSS rule.
.body{
background-color:#CCD6A6;
}
.sexy{
background-color: red;
}
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
<body class="body" >
<button class="sexy" type="submit">Click this</button>
</body>
CSS isn't a C/C++ or anything else that requires semicolon. You can't type a semi-colon to end of the style.
You wrote;
.body{
background-color:#CCD6A6
};
.sexy{
background-color: red
};
but this is correct one;
.body{
background-color:#CCD6A6;
}
.sexy{
background-color: red;
}
You must to write semicolon to end of the line. As you can see, line ending with : red;. Not like };
it's unreadable, your semi-colon placement is not correct
.body{
background-color:#CCD6A6
};
.sexy{
background-color: red
};
correct
.body{
background-color:#CCD6A6;
}
.sexy{
background-color: red;
}
Related
I want to build a small webpage with 3 buttons, like this, with a background image:
By hovering on one of the buttons, the image should change using js.
What would be the best way to achieve this effect?
I tried with background-image, but when the image changes it doesn't change instantly. It first makes the page white, I don't know why.
Thanks.
///edit:
document.addEventListener("DOMContentLoaded", function()
{
document.querySelector(".gaming").addEventListener("mouseover", function()
{
document.querySelector(".container").style.backgroundImage = 'url(1.png)';
});
document.querySelector(".media").addEventListener("mouseover", function()
{
document.querySelector(".container").style.backgroundImage = 'url(2.png)';
});
document.querySelector(".forum").addEventListener("mouseover", function()
{
document.querySelector(".container").style.backgroundImage = 'url(3.png)';
});
});
.container {
position: relative;
height: 1080px;
}
.gaming
{
position: absolute;
height:100%;
}
.media
{
}
.forum {
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Portal</title>
<script src="js.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
<link rel="stylesheet" type="text/css" href="reset.css">
</head>
<body>
<div class="container">
<image class="image-portal"></image>
<a class="gaming">1</a>
<a class="media">2</a>
<a class="forum">3</a>
</div>
</body>
</html>
That's how I tried to do it. Now I'm trying to position the buttons. Should I change the image src instead of adding a backgroundImage? (also I think I need a handler for mouseleave too).
You can download the images in advance without any code, just place some <link rel="preload"> tags in the header like so:
<head>
<link rel="preload" href="1.png" as="image" type="image/png" />
<link rel="preload" href="2.png" as="image" type="image/png" />
<link rel="preload" href="3.png" as="image" type="image/png" />
</head>
Additional information: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
I think you should load the images when you init the page.
You can create an array and then load the images from this array..
I got an issue when using ckeditor which is ckeditor change some css setting.
Original textarea: Original textarea
Using ckeditor: ckeditor
As you can see, the textarea field color become same as my background color.
Also, input text become text-align:center. It should be default as 'left' which same as the original one, doesn't it?
Here is my code,
html head:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Development</title>
<!--Font Awsome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Bootstrap CSS-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href = "index.css" rel = "stylesheet">
<link href = "post_form.css" rel = "stylesheet">
<!-- Editor for Content Field -->
<script src="https://cdn.ckeditor.com/ckeditor5/1.0.0-alpha.2/classic/ckeditor.js"></script>
</head>
form part:
<div class="form-group col-xs-12">
<label for="post_content" class="text_side">Content:</label>
<br>
<!-- id for using Editor -->
<textarea class="form-control" name="" rows="10" cols="30" id="editor" required></textarea>
</div>
bottom part:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Javascript-->
<script src="js/bootstrap.min.js"></script>
<!-- CKEditor -->
<script type="text/javascript" src="ckedit.js"></script>
my css:
.text_side
{
float: left;
font-size: 130%;
font-family: Comic Sans MS;
font-style: italic;
}
my javascript(only the ckeditor activate code):
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
Doesn't know why those issues exist, hope can get help.
Just add one more div with id="ckeditor_bar", then put textarea with id="editor" inside div...
https://jsfiddle.net/c298oqhw/17/
Add to css:
#ckeditor_bar
{
background-color: white;
}
My class fixed-content appears to be stopping onmouseover from changing an images which uses src.this
The html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blah</title>
<link href="https://fonts.googleapis.com/css?family=Mada:900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet">
<script src="https://use.fontawesome.com/07f9f0d505.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="fixed-content col-md-1 hidden-sm-down">
<div class="row">
<div class="col-md-12 firstSideMenuElement">
<img class="sideMenu" src="images/Desmond_blank-01.png" onmouseover="this.src='images/Desmond_mouseover-01.png'" onmouseout="this.src='images/Desmond_blank-01.png'">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The css
.fixed-content{
top: 0;
/*bottom:0;*/
right: 0;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
When I remove this class from the html the onmouseover works correctly.
UPDATE:
This code is at https://sonjadorlas.github.io/Website/desmond.html
The sidebar menu, which contains four images should change slightly onmouseover. When I scroll down the page, this menu is fixed as I want. But when I mouseover the icons in the sidebar menu again, they do not change. If I scroll back to the top of the page, the behaviour is correct again on mouseover.
SOLUTION:
/* SIDE BAR */
.fixed-content{
top: 0;
right: 0;
z-index: 100;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
Thanks
I think your problem has to do with the z-index on your .fixed-content. You need to make sure that the z-index puts it's position above the other content.
Try adding something like this:
.fixed-content{
z-index: 10;
}
I can't find a way to change the drawer hamburger icon. Let's the code doing the talk :
THE CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>drawer icon color</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header"></header>
<div class="mdl-layout__drawer"></div>
</div>
</body>
</html>
THE OUTPUT
The icon seems to be added dynamically afterwards with colour set to white :
When I change its colour from my chromium console everything's fine.
But if I try using the css class it doesn't work :
.mdl-layout__header .mdl-layout__drawer-button {
color: #000 !important;
}
MY QUESTION
Do I have any other solutions than changing the colour dynamically through the DOM or directly messing with material.min.js?
(Didn't successfully change the colour using javascript neither)
<script type="text/javascript">
document.querySelector(".mdl-layout__header .mdl-layout__drawer-button").style.color = "red";
</script>
Thanks ! ♫♪ I wish you a merry christmas ♫♪♫
this work
.material-icons {
color: red !important;
}
I have added the i-tag from the material icons to your CSS. This is working fine. See snippet:
.mdl-layout__header .mdl-layout__drawer-button i {
color: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>drawer icon color</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header"></header>
<div class="mdl-layout__drawer"></div>
</div>
</body>
</html>
Here is my index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>title</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<link href=assets/css/elegant-icons.min.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/bootstrap.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/theme.css rel=stylesheet type=text/css media="all"/>
<link rel=stylesheet type=text/css href="assets/css/style.css"/>
</head>
<body>
<div id="inc"></div>
<div class=main-container>
<section class="no-pad coming-soon fullscreen-element">
</section>
</div>
<script src=assets/js/jquery.min.js></script>
<script src=assets/js/bootstrap.min.js></script>
<script src=assets/js/smooth-scroll.min.js></script>
<script src=assets/js/scripts.js></script>
<script>
$(function(){
$("#inc").load("header.html");
});
</script>
</body>
</html>
If I copy-paste the content of header.html page after the body, then everything works fine.
when I tried to include the header.html page using .load() function then the CSS won't work properly.
Here is the online sample codepen
if I include the content of div="inc" from an external file like header.html than drop-down menu will overlap each other.
Hope this helps.
Your scripts.js file contains
$(window).load(function(){
"use strict";
// Align Elements Vertically
alignVertical();
alignBottom();
$(window).resize(function(){
alignVertical();
alignBottom();
});
// Isotope Projects
});
The scripts.js file you have provided is trying to add some styling to the header.html.
but it's not doing the expected behaviour because the scripts.js file is loading before the header.html file.
Just add this at the end after your header content
<script src=assets/js/scripts.js></script>
This will let the header.html content load first and than scripts.js
Also here is the github repo code structure
https://github.com/siddhartharora02/jsLoad
Try this
<link href="../assets/css/elegant-icons.min.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../assets/css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../assets/css/theme.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" type="text/css" href="../assets/css/style.css"/>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/smooth-scroll.min.js"></script>
<script src="../assets/js/scripts.js"></script>
For your original issue,
If you want to include html content dynamically, here is a method to do it,
HTML,
<link data-include="includes/header.html">
JS,
$('link[data-include]').each(function(){
var el = $(this),
template = $(this).data('include');
$.get(template, function(data){
$(el).replaceWith(data);
});
});
Hope this will help!
Try this,
Now you can include any partial content as you want.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>title</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<link href=assets/css/elegant-icons.min.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/bootstrap.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/theme.css rel=stylesheet type=text/css media="all"/>
<link rel=stylesheet type=text/css href="assets/css/style.css"/>
</head>
<body>
<link data-include="header.html">
<div class=main-container>
<section class="no-pad coming-soon fullscreen-element">
</section>
</div>
<script src=assets/js/jquery.min.js></script>
<script src=assets/js/bootstrap.min.js></script>
<script src=assets/js/smooth-scroll.min.js></script>
<script src=assets/js/scripts.js></script>
<script>
$(function(){
$('link[data-include]').each(function(){
var el = $(this),
template = $(this).data('include');
$.get(template, function(data){
$(el).replaceWith(data);
});
});
});
</script>
</body>
</html>
Try using like this,
$(document).ready(function() {
$.get('header.html').success(function(data){
var headerHTML = data;
$('#inc').html(headerHTML);
});
});
How about this:
Instead of using a load method, use an iframe
<iframe id="inc" src="header.html" style="border:0; overflow:auto;"></iframe>
Edit
<iframe id="inc" src="header.html" class="hidden"></iframe>
css
iframe.hidden {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: hidden;
}
iframe.hidden.load {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: block;
}
JS
!!! Here trigger means the trigger when you want it to load such as onClick, onMouseover, etc !!!
Requires jQuery
$('iframe.hidden').trigger(function() {
$(this).addClass('load');
});