I'm new to LESS CSS. When I use below html and LESS css codes the output comes error.
Please fix this problem.
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>LESS CSS</title>
<script type="text/javascript" src="../_s/jquery.js"></script>
<link rel="stylesheet/less" type="text/css" href="test.less" />
<script src="less.js" type="text/javascript"></script>
</head>
<body>
<div id="box"></div>
</body>
</html>
test.less
#color : #2AA4CF;
#clientHeight: ~`$.trim( $(window).height() ) + 'px'`;
#box
{
position: absolute;
background-color: darken(#color, 10%);
width: 300px;
height: #clientHeight - 100;
}
Output is Error
Object # has no method 'operate'
in test.less
at e.Operation.eval (http://localhost/frames/006/less.js:9:11151)
at Object.e.Expression.eval (http://localhost/frames/006/less.js:9:3533)
at Object.e.Value.eval (http://localhost/frames/006/less.js:9:18173)
at e.Rule.eval (http://localhost/frames/006/less.js:9:12727)
at Object.e.Ruleset.eval (http://localhost/frames/006/less.js:9:13904)
at Object.e.Ruleset.eval (http://localhost/frames/006/less.js:9:13904)
at Object.toCSS (http://localhost/frames/006/less.js:8:10291)
at http://localhost/frames/006/less.js:9:20740
at http://localhost/frames/006/less.js:8:1157
at Object.p.parse (http://localhost/frames/006/less.js:8:10899)
Please give me a solution...
You have two problems. The first:
`$.trim( $(window).height() ) + 'px'`
This code evaluates to "400px" (note the quotes "). This will make the CSS rule invalid, as it doesn’t use quotes. Also, $.trim is redundant since .height() returns an integer.
The second problem:
height: #clientHeight - 100;
This will take the previously created string and try to perform an illegal math operation to it. This is what throws the error.
Here is how you can do it:
#color : #2AA4CF;
#clientHeight: `$(window).height()-100`;
#box
{
position: absolute;
background-color: darken(#color, 10%);
width: 300px;
height: 0px + #clientHeight
}
The last code 0px + #clientHeight is just a trick to add px to the variable.
You can probably solve your task using pure CSS instead of calculating in LESS (and also make it scale when the window resizes) using the following code:
html,body{ height:100% }
#box{ position:absolute; top:0; bottom:100px }
Related
This question already has answers here:
How to retrieve the display property of a DOM element?
(4 answers)
Closed 3 years ago.
i need to increment the value top attribute of a div. for some reason it doesn't work.
i tried to use obj.style.top and increase the value but it doesn't work.
let sqr = document.getElementById("sqr")
let val = parseInt(sqr.style.top)
sqr.style.top = (val + 100) + "px";
body {
width: 100vw;
height: 100vh;
position: relative;
}
#sqr {
height: 30px;
width: 30px;
background-color: blue;
position: absolute;
top: 100px;
left: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="index2.css" />
</head>
<body>
<div id="sqr"></div>
<script src="index2.js"></script>
</body>
</html>
I just want the square move up about 100 px.
thanks.
Use
sqr.style.top= (sqr.offsetTop + 100) + "px";
style.top returns the top value set in style attribute on the html tag.
The .style DOM property returns a CSS Style Declaration object containing the styles that have been set on the object through the HTML style attribute. Since your div doesn't have any inline styles applied to it, that technique won't return anything.
Instead, use getComputedStyle(), which returns the computed value of any/all styles, regardless of how/where they were set (inline, JavaScript, stylesheet).
Also (FYI):
As a best practice, you should always specify the optional second argument for parseInt() (the radix) to ensure you don't accidentally get a value you didn't expect.
let sqr = document.getElementById("sqr")
let val = parseInt(getComputedStyle(sqr).top, 10);
sqr.style.top= (val + 100) + "px";
body{
width:100vw;
height:100vh;
position: relative;
}
#sqr{
height: 30px;
width:30px;
background-color: blue;
position:absolute;
top:100px;
left:100px;
}
<div id = "sqr"></div>
I am aware I can use background-image: url("www.linktoimage.com/image.png"), in css, to place an image in the background. I also know I can add a javascript file into html with tag. My challenge is how do I apply css characteristics of a background image to my javascript file?
To add some context, the javascript file is a simple animation (randomly bouncing balls, that responds to the screen width and height. I want to place text on top of this as if it was background, but no matter what I do, text will place itself above the script, in a white box, instead of directly on top of my script. Below is the general result of my various attempts:
I would like to place "Welcome" on top of my javascript, as oppose to how it currently appears on top of window with a white background. My css is as follows:
#font-face {
font-family:'HighTide';
src: url('assets/HighTide.otf')
font-family:'HighTideSans';
src: url('assets/HighTideSans.otf')
}
body {
padding: 0;
margin: 0;
}
canvas {
vertical-align: top;
z-index: -1
}
.title {
font-family:'HighTide';
font-size: 10vw;
margin: auto;
text-align: center;
z-index: 1;
}
.enter {
font-family:'HighTideSans';
font-size: 2vw;
text-align: center;
margin: auto;
z-index: 1;
}
And here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LockeDesign</title>
<script src="libraries/p5.js" type="text/javascript"></script>
<script src="libraries/p5.dom.js" type="text/javascript"></script>
<script src="libraries/p5.sound.js" type="text/javascript"></script>
<script src="libraries/svg.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=title> WELCOME </div>
<a href="main.html" class=enter> </a>
</body>
</html>
Any suggestions are appreciated, thank you!
EDIT
Using position: absolute; works partially, all I had to do was add left: 0;
right: 0; and bottom: 50%; to re-center the text. Resizing the window would cause scrollbars to appear, which was less than desirable, so I added overflow:hidden; to the body tag. Now this works exactly as intended, thanks all!
I would suggest WRAPPING all of the content you wish to display over the dynamic background in a single div
Example
<html>
<body>
<div id="BodyWrapper">
<h1> This is an HTML Page </h1>
</div><!-- End BodyWrapper -->
</body>
</html>
Then apply some Z positioning to the BodyWrapper with css
#BodyWrapper{position:absolute; top:0; left:0; width:100%; height:100%; z-index:5;}
If the above is still not enough then you may have to delay the
showing of the body content (make sure the dynamic background
completely loads first).
You can set the initial display styling of the wrapper to
#BodyWrapper{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; display:none;}
and onLoad... call this function
function show_PageBody()
{
setTimeout(function(){ update_Wrapper(); },1000);
function update_Wrapper()
{
document.getElementById('BodyWrapper').style.display='block';
document.getElementById('BodyWrapper').style.zIndex = 5;
}
}
You can add a css transition for the opacity of the BodyWrapper so that it fades onto the screen instead of just appearing.
This should work (has worked for me in the pass).
If not please let me know.
Using position: absolute; works partially, and renders this result:
All I had to do was add left: 0; right: 0; and bottom: 50%; to re-center the text. Also, resizing the window would cause scrollbars to appear, which was less than desirable, so I added overflow:hidden; to the body tag. Now this works exactly as intended:
I have the following HTML file that currently has nothing in it except some div class objects that are specified by CSS styles. If I open this web page and inspect the elements in Chrome they are the sizes that I want them to be. What I am wondering is if I can access those sizes via javascript.
HTML File:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>TEST</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
.camp_cont {
float: left;
width: 45%;
height: 50%;
position: relative;
}
.camp_cont_select {
float: left;
width: 45%;
height: 50%;
position: relative;
fill: #800;
}
.sub_camp_cont {
float: left;
width: 15%;
height: 50%;
position: relative;
margin: 10px 25px;
fill: #800;
}
</style>
</head>
<body>
<div class="camp_cont", id="cpa_perf"></div>
<div class="camp_cont", id="ctr_perf"></div>
<div class="sub_camp_cont", id="as_perf"></div>
<div class="sub_camp_cont", id="f_perf"></div>
<div class="sub_camp_cont", id="rh_perf"></div>
<div class="sub_camp_cont", id="rm_perf"></div>
<div class="sub_camp_cont", id="rl_perf"></div>
<div class="sub_camp_cont", id="ul_perf"></div>
<div class="sub_camp_cont", id="rt_perf"></div>
</body>
</html>
I am wondering if I can do something like the following:
x = $("#cpa_perf").width()
Again, when I inspect cpa_perf in Chrome it says its width is 515px. That's what I'm trying to get at
jQuery Width works just fine for this:
x = $("#cpa_perf").width();
alert(x);
JS Fiddle: http://jsfiddle.net/9abcf9d3/
You can use jQuery pretty easily to modify attributes of elements..
$('.classname').css(property, value);
I'm not certain if you are trying to use jQuery or pure javascript.
You're original attempt to get the width of the element should work as long as you're using a jQuery library.
Otherwise, if you just want the width of the element with pure javascript, you can use something like this:
var x = document.getElementById('cpa_perf').offsetWidth;
If you are including a jQuery library then the following should work:
var x = $("#cpa_perf").width()
Additional Note: Make sure that the script isn't called before the DOM element is written to the page as well. For example:
$(document).ready(function (){
var x = $("#cpa_perf").width();
console.log(x);
}) ;
I'm using JavaScript and jQuery to create a horizontal scrolling iframe document using absolute positions for the iframes to make them appear side by side. I'm using a short script based of a jsFiddle I found that displays the co-ords of an element in the top left of the screen and they change as the page is scrolled. I have created my own implementation of this and tried to get it working, but I'm getting an error when I load the site telling me that the top property of an undefined variable cannot be read, even though the first thing I'm doing is defining it. I've looked at all of my code and I can't see why this would be the case, I've got the right jQuery scripts added and I'm defining the variable before it's being used as is the norm. The fiddle I'm basing this off can be found here: http://jsfiddle.net/hxRPQ/22/
The HTML I have:
<!DOCTYPE html>
<html>
<head>
<title>Test 33</title>
<link href="base.css" rel="stylesheet" type="text/css">
<script src="./jquery/jquery.min.js" type="text/javascript"></script>
<script src="./jquery/jquery-ui.js" type="text/javascript"></script>
<script src="scroll.js" type="text/javascript"></script>
</head>
<body>
<div class="iFCont">
<iframe src="./HTMLFiles/07.html" class="iF" id="if1" style="left: 5px;"></iframe>
<iframe src="./HTMLFiles/08.html" class="iF2" id="if2" style="left: 1010px;"></iframe>
<iframe src="./HTMLFiles/09.html" class="iF2" id="if3" style="left: 2015px;"></iframe>
</div>
<div class="output"></div>
</body>
</html>
The js file:
function scroll()
{
var if1 = $("if1");
var ofs = if1.offset();
var posX = ofs.top - $(window).scrollTop();
var posY = ofs.left - $(window).scrollLeft();
$(".output").text("top:" + posY + ", left:" + posX);
}
$(document).ready(function a()
{
$(window).scroll(scroll);
});
and my CSS for reference:
body
{
overflow-x: scroll;
overflow-y: scroll;
}
.iF
{
width: 1000px;
height: 1350px;
position: absolute;
}
.iF2
{
width: 1000px;
height: 1350px;
position: absolute;
}
.iFCont
{
display: inline-block !important;
overflow-x: hidden !important;
}
.output
{
position: fixed;
top: 0px;
left: 0px;
}
You need to fix your selector:
var if1 = $("if1"); // Look for 'if1' tag
Should be:
var if1 = $("#if1"); // Look for an element with 'if1' id
<head>
<title>Overlay test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#overlay {
position: absolute;
background-color: #ccffcc;
display: none;
height: 200px;
margin: 0 auto;
width: 200px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function hide() {
document.getElementById("overlay").style.display = "none";
}
function show() {
document.getElementById("overlay").style.display = "block";
}
//]]>
</script>
so when the user clicks it runs show() which places the css box on top. However i want it to be centered in the browser. I've set the margin: 0 auto; which should be doing the trick shouldnt it?
I'm just trying to create an overlay function without using jquery because it seems to be incompatible with my schools cms templates.
Thanks
Margin: 0 auto won't work on position absolute elements, they exist in their own little world, outside of normal flow. So in order to pull this off, you need to do an extra step. The CSS dead centre technique will work here.
Try setting the top and left attributes on your overlay.
Use % to set top and left position. Set css attribute top:10%; Left 40%;