I wanna to get element background value from javascript file.
I has three files -
html.html
css.css
js.js
html.html
<!DOCTYPE html>
<html>
<head>
<title> I'm Button! </title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div class="myBlock" onclick="heyJS()"></div>
</body>
</html>
css.css
.myBlock {
width: 300px; max-width: 100%;
height: 100px; max-height: 100%;
margin: 0 auto; margin-top: 100px;
font-size: 50px; font-weight: lighter; font-style: normal; text-align: center;
line-height: 100px; position: relative;
background-color: #83DF31;
}
js.js
function heyJS() {
alert(document.getElementsByClassName('myBlock')[0].style.backgroundColor);
}
After running the scrpit,I only get blank alert box.
How can i get div background value ?
You can replace your alert() with this
alert(window.getComputedStyle(document.getElementById('myBlock')).backgroundColor);
or
alert(window.getComputedStyle(document.getElementsByClassName('myBlock')[0]).backgroundColor);
And modify your html a little bit if you using the first one.
<div id="myBlock" class="myBlock" onclick="heyJS()"></div>
Try the following:
window.getComputedStyle(document.querySelector(".myblock")).getPropertyValue("background-color");
Related
I need to know how to correct this layout on my 404 page of my website. It works fine on a desktop but the layout of the actual page (not the header) gets messed up on mobile. The code is below.
THE LINK TO THE SITE IS WWW.ROGERSARTWORK.CO.UK/404
HTML CODE
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("nav.html");
});
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>
<div id="content">
<html>
<title>404 Not Found</title>
<img src="/images/logo.png" alt="Roger's Artwork Logo" width="320" height="272" />
<p></p>
<img class="image1" src="https://www.rogersartwork.co.uk/images/404.png" alt="Error 404 Image" width="832" height="249"/>
<p>The page you were looking for does not exist. Please return to our homepage.</p>
<script type="text/javascript">
document.addEventListener('contextmenu', event => event.preventDefault());
</script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</html>
</div>
</div>
CSS
<style>
#content {
padding-top: 40px;
}
h1 {
font-size: 45pt;
font-family: Verdana;
font-weight: bold;
text-align: center;
}
#content {
padding-top: 50px;
}
p {
font-size: 25pt;
font-family: Verdana;
text-align: center;
}
body {
text-align: center;
background: #eeeeee;
}
html {
background: #eeeeee;
}
</style>
AND THE LINK TO THE SITE IS WWW.ROGERSARTWORK.CO.UK/404
IMAGE FOR #sbgib
It looks like the only issue is the scaling of the images. This can be fixed by adding CSS rules to make them full width for mobile and then adding one or more media queries to set the images to their full sizes at certain screen sizes. For example:
#content {
padding-top: 40px;
}
h1 {
font-size: 45pt;
font-family: Verdana;
font-weight: bold;
text-align: center;
}
#content {
padding-top: 50px;
}
p {
font-size: 25pt;
font-family: Verdana;
text-align: center;
}
body {
text-align: center;
background: #eeeeee;
}
html {
background: #eeeeee;
}
#content>title+img,
.image1 {
width: 100%;
height: auto;
}
#media screen and (min-width: 500px) {
#content>title+img {
width: auto;
max-width: 100%;
}
.image1 {
width: auto;
max-width: 100%;
}
}
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
</script>
<script>
$(function() {
$("#header").load("nav.html");
});
</script>
</head>
<body>
<div id="header"></div>
</body>
<div id="content">
<title>404 Not Found</title>
<img src="https://www.rogersartwork.co.uk/images/logo.png" alt="Roger's Artwork Logo" width="320" height="272" />
<p></p>
<img class="image1" src="https://www.rogersartwork.co.uk/images/404.png" alt="Error 404 Image" width="832" height="249" />
<p>The page you were looking for does not exist. Please return to our homepage.</p>
<script type="text/javascript">
document.addEventListener('contextmenu', event => event.preventDefault());
</script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</div>
</div>
</html>
Remove the width and height attributes from your image tags. What you should do instead is style them with css. For example, you can add and id to them and target that with css, or you can also do an inline style, like so:
Using inline styling:
<img src="/images/logo.png" alt="Roger's Artwork Logo" style="max-width: 20rem" />
I'm not very skilled at CSS. I have website that has 4 stylesheets and 3 JS files-using Bootstrap 4 and jQuery. When I deployed it on live and refresh the page, all was working fine.
However, when I go to website from mobile, it works fine the first time but when I refresh, all the CSS and HTML is broken (this usually happens after 1st or 2nd refresh). After it is broken, I refresh it once or twice, it fixes the issue. I searched about it and some say it is happening because of using relative positioning and floating, but when I commented out those lines from my CSS files, I still have the same problem. Does anyone have any idea about how to fix this issue?
index html
**
<!DOCTYPE html>
<html lang="en">
<head>
<title>Landor App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<style></style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/fonts.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/intro.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/home.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/video.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/modals.css" type="text/css"/>
</head>
<body>
<!--INTRO PAGE-->
<div id="intro-page" class="container-fluid" style="display: none">
<div class="row intro-header">
<div class="col-12"><img id="landor-worldmark"></div>
</div>
<div class="row intro-text">
<div class="intro-text col-12">
<h3>Hi Andrew,</h3><br>
<h3>We can't wait to welcome you to Landor London.
Until then please take a few minutes
<span style="white-space: nowrap;">(3, to be exact)to explore more about us...</span></h3><br>
<h3>Regards,</h3>
<h3>Peter</h3><br><br>
<span id="enter-button">Enter</span>
</div>
</div>
<div class="intro-footer row">
<div class="col-12"><img class="img-fluid intro-boat"></img></div>
</div>
</div>
intro.css
html {
height: 100%;
}
.intro-text{
font-family: "apercuBold";
}
#intro-page{
padding-left: 20px;
padding-right: 20px;
}
body {
background-color:black;
}
.container-fluid{
padding-right: 10px;
padding-left: 10px;
}
.intro-text{
position: relative;
top: 5%;
}
#enter-button{
font-family: "timeposRegular";
text-decoration: underline;
font-size: 150%;
cursor: pointer;
position: relative;
top: 20%;
}
.intro-header{
padding-top: 3%;
}
.intro-text{
padding-top: 50px;
padding-bottom: 50px;
}
#landor-worldmark{
content:url("../assets/Landor_Logo.png");
width: 120px;
height: 30px;
}
.intro-boat{
content:url("../assets/boat2.png");
max-width: 400px;
height: auto;
float:right;
}
#media screen and (max-width: 450px) {
.intro-text > h3{
font-size: 100%;
}
.intro-text{
font-size: 100%;
line-height: 1.4;
padding-top: 30px;
padding-bottom: 30px;
}
#enter-button{
font-size: 100%;
}
.intro-boat{
max-width: 200px;
height: auto;
float:right;
}
.intro-header{
padding-top: 5%;
}
}
#media screen and (max-width: 350px) {
.intro-text > h4{
font-size: 90%;
}
.intro-text{
font-size: 94%;
line-height: 1.1;
padding-top: 30px;
padding-bottom: 30px;
}
#enter-button{
font-size: 94%;
}
.intro-boat{
max-width: 200px;
height: auto;
}
.intro-header{
padding-top: 5%;
}
}
.intro-footer{
position: fixed;
bottom: 10%;
width: 100%;
}
**
I just pulled out my phone and went to the site, and used the Browser tools phone emulator option (i don't know if that's what it's called) and it looks just fine on reload. Maybe try restarting your phone or clearing cache.
Is it because you are tilting your phone and switching the view from horizontal and vertical (That still shouldn't change anything)
After a whole day, I finally solved this problem by adding "?" at the end of my stylesheets paths on the link tag. It's a caching issue, although I disabled caching, for some reason it did not work. Now I refreshed the page > 10 times and never experienced any problem! I think, because of the question mark, when it is loading the CSS, first it's checking to see if there is another version available which prevents it from fetching from the cache completely.
All of my HTML and CSS code works fine, and my script is properly linked (or so I assume), but I can't get the script to load or do any actions I've coded. Here's my HTML, CSS, and JS code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Highlights</title>
<link rel='stylesheet' type='text/css' href='testwebcss.css'/>
<script type='text/javascript' src='testwebjs.js'></script>
</head>
<body>
<div id="title" class="highlighted">I'm highlighted!</div>
<div id="text">Highlight me, too!</div>
</body>
</html>
CSS
#title {
background-color: #C02942;
border-radius: 5px;
text-align: center;
font-family: Verdana, Arial, Sans-Serif;
color: #FFFFFF;
width: 200px;
height: 25px;
}
#text {
background-color: #0B486B;
border-radius: 5px;
text-align: center;
font-family: Vivaldi, Cursive;
color: #FFFFFF;
width: 200px;
height: 25px;
opacity: 0.5;
}
.highlighted {
-webkit-box-shadow: 0 0 8px #FFD700;
-moz-box-shadow: 0 0 8px #FFD700;
box-shadow: 0 0 8px #FFD700;
cursor:pointer;
}
JS
$(document).ready(function(){
$('#text').mouseenter(function(){
$(this).fadeTo('fast', 1);
});
$('#text').mouseleave(function(){
$(this).fadeTo('fast', 0.5);
});
});
So I don't understand why it's not working. As you can see, the script simply doubles the opacity when the mouse enters the perimeter of #text. So, why is nothing working. I got this from the console:
Uncaught ReferenceError: $ is not defined
Add this to the HTML head (before you include your script):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
You have to add more jQuery
<!DOCTYPE html>
<html>
<head>
<title>Highlights</title>
<link rel='stylesheet' type='text/css' href='testwebcss.css'/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='testwebjs.js'></script>
</head>
<body>
<div id="title" class="highlighted">I'm highlighted!</div>
<div id="text">Highlight me, too!</div>
</body>
</html>
I'm trying to make a slideshow for a website where the pictures slides automaticly (which works), and there should be round buttons to click below it. But the buttons doesn't show up, even thou I have follow the instructions from http://jquery.malsup.com/cycle2/demo/pager.php
my HTML:
<div class ="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="5000" data-cycle-pager=".cycle-pager">
<img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach9.jpg">
</div>
<div class="cycle-pager"></div>
My CSS:
.cycle-pager {
text-align: center;
width: 100%;
z-index: 500;
position: absolute;
top: 10px;*
overflow: hidden;
}
.cycle-pager span {
font-family: arial;
font-size: 50px;
width: 16px;
height: 16px;
display: inline-block;
color: #999999;
cursor: pointer;
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}
.cycle-pager{
width: 500px;
height: 30px;
margin-top: 517px;
}
and my JavaScript:
(function(){
window.onload = function(){ //main
$.getScript("/js/cycle2.js", null); //Handles the slideshow
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);
}
})();
This problem causes doctype Use <!doctype html>
try this javascript
<Script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<Script type="text/javascript" src="jquery.cycle2.min.js"></script>
<script type="text/javascript">
(function(){
window.onload = function(){ //main
$.getScript("/js/cycle2.js", null); //Handles the slideshow
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);
}
})();
</script>
Try this:
JSFiddle Demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<link rel="stylesheet" href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">
</head>
<body>
<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="2000">
<!-- empty element for pager links -->
<div class="cycle-pager"></div>
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
</div>
</body>
</html>
Try adding "height:40px;" to the .cycle-pager class.
I'm going to apologize in advance for how basic this question is, but this is my first time using JavaScript in HTML.
Basically, I have a JavaScript that produces a different bit of random text every time a user loads the page. I'd like to format that text in Helvetica and then display it centred in the middle of the page. I'm attempting to do this with CSS as indicated below, but it is not working for me. Any suggestions much appreciated.
HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="horizon">
<div id="content">
<script type="text/javascript" src="scripts.js"></script>
</div>
</div>
</body>
CSS
#horizon {
color: white;
background-color: #ffffff;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content {
font-family: Helvetica, Geneva, Arial, sans-serif;
font-color: black;
background-color: white;
margin-left: -410px;
position: absolute;
top: -237px;
left: 50%;
width: 825px;
height: 475px;
visibility: visible
}
Well for starters, your missing your HTML tags.
You need to wrap your HTML code between HTML Tags.
Second, you will need to set your text to a different color as the background color. In your CSS, you will need to change the #horizon color to black, or something else.
Other than that, your code works.
try
#content
{
margin: auto;
width: 200px; /* however wide it should be (required) */
}
...
<div id="content">
stuff goes here from js / whatever
</div>
for vertical alignment you are looking at JS and not CSS.
How about using text-align: center?:
#content
{
font-family: Helvetica, Geneva, Arial, sans-serif;
font-color: black;
background-color: white;
text-align: center;
}