Though I can see this question has been asked before I really need a solution without the use of JQuery, its for an embedded web interface and I don't want the overhead of loading jQuery. I need to be able to manipulate sprites using just the JS on the single page, the state of the sprite is dependent on certain JS variables. I'm sure this must be possible, but can't find anything without the use of JQuery.
The easiest way (I think) is to define your own css classes and change those clasess on certan events. i.e.
<style type="text/css">
.bg1{
/* Some attributes set here */
background-position:center;
}
.bg2{
/* Some attributes set here */
background-position:left;
}
</style>
and then you put your javascript like this
document.getElementById("some_id").class = "bg2";
I think you can use Object.style.backgroundPosition="position" to change your desired background position .
Try this code
<!DOCTYPE html>
<html>
<head>
<style>
div
{
background-image: url('example.png');
background-repeat: no-repeat;
width: 400px;
height: 400px;
border: 1px solid #000000;
}
</style>
<script>
function displayResult()
{
document.getElementById("div1").style.backgroundPosition="center bottom";
}
</script>
</head>
<body>
<button type="button" onclick="displayResult()">Position background image</button>
<br>
<div id="div1">
</div>
</body>
</html>
Reference
Related
My HTML code-
<html>
<head>
<style type="text/css">
{
/*for setting background image*/
background-image: url('C:/Users/SONY/Desktop/CSS/images.jpg');
background-attachment: fixed
}
</style>
</head>
</html>
This code is for setting the background image. But it's not showing the
result. I've not created two files. Like one for CSS and another HTML file.
I've compiled both the files into one.
Why am I not able to see the background image? Despite giving the
correct path for the URL.
You need to specify the element for which want to give particular CSS properties like html, body, .class, #id.
body {
/*for setting background image*/
background-image: url('http://lorempixel.com/400/200/sports/1/');
background-attachment: fixed
}
Here is the link of working fiddle.
You are applying background image to none of the class/id or any html tags like html, body etc. either you need to add a class or id or need to apply style to the inbuilt tags. you can try this
<html>
<head>
<style type="text/css">
html{
/*for setting background image*/
background-image: url('C:/Users/SONY/Desktop/CSS/images.jpg');
background-attachment: fixed;
}
</style>
</head>
</html>
Hope this helps.
I think your code under css folder, so the line should be :
background-image: url('images.jpg');
Use this style in your code. If want to pick image from local computer.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
background-image: url(./images.jpg);
background-attachment: fixed;
}
</style>
</head>
<body>
</body>
</html>
This is a bit of a simplification of my code, but I think the example works. Basically, what I want to do is to use jQuery to automatically highlight a selected div-element.
At the moment, the div-element only seems "active" once I hold down on the element (the background becomes orange).
<html>
<head>
<title>Samuels HTML-inlämning!</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js">
</script>
<script type="text/javascript">
$('.test').click(function(){
$('.test').removeClass("active");
$(this).addClass("active");
});
</script>
<style type="text/css">
div.test{
background: grey;
}
div.test:hover{
background: yellow;
}
div.test.active{
background: orange;
}
</style>
</head>
<body>
<div class="test">
Stuff
</div>
<div class="test">
Other stuff
</div>
<div class="test">
More Stuff
</div>
</body>
</html>
Does anyone know why this doesn't work? The complete example works basically the same, but I an ID to select the class to be un-highlighted rather than (.test) all classes. But that code produces the same result.
UPDATE:
Tried making this change in CSS:
div.test.active{
background: orange;
}
Now it doesn't highligt at all however. Did I miss something?
Thats because you are setting the property in your CSS as a pseudo-class, Try this:
div.test.active{
background: orange;
}
You're mixing classes and state selectors. :active is a state (that means you're currently mouse-down on it) while .active is any random class (it could be .xyz). Here's more information on states: http://css-tricks.com/almanac/selectors/a/active/
I'm sure I am missing something obvious and I have checked the other questions regarding this but none seem to have exactly my issue. I am new to Javascript but I'm sure this is a very simple script to implement on a website. If I can get it to work I can edit it from there and see how it works to further enhance it or remove from it.
Here is my code so that you can see exactly how i have it in the .html file
<!DOCTYPE>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="css/nanoscroller.css">
<script rel="text/javascript" src="js/jquery.nanoscroller.min.js"></script>
<style type="text/css">
/* START NanoSlider */
.nano { background: #bba; width: 500px; height: 500px; }
.nano .content { padding: 10px; }
.nano .pane { background: #888; }
.nano .slider { background: #111; }
/* END NanoSlider */
</style>
<script>
$(document).ready(function(){
$(".nano").nanoScroller();
});
</script>
</head>
<body>
<div id="about" class="nano">
<div class="content">
This is the content box and it should be scrolling but it is not!! =/.
</div>
</div>
</body>
</html>
Here is a JSFiddle: http://jsfiddle.net/fcJr3/1/
Maybe I am linking in or refering to required files wrong? or possibly NOT linking in or referring to all the files I am suppose to?
As you can see in the JSFiddle I only get the box. I don't get the scroll bar or any of the effects. Your help is greatly appreciated, thanks!
EDIT: this is the nanoSlider here: http://jamesflorentino.github.io/nanoScrollerJS/
You need to include the jQuery library itself. You can download it or run it straight from the google cdn i.e.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
In your fiddle you need to include jquery using the dropdown top left i.e.
http://jsfiddle.net/fcJr3/2/
This appears to be an issue with jqLite, which I came across while working with angular.js. To see the problem, open the console tab and click "run with js" in this jsbin. left.css("width") is returning an empty string when it shouldn't be.
HTML
<!doctype html>
<html ng-app>
<head>
<meta name="description" content="Angular Template" />
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="left"><span id="test">left</span></div>
<div class="right">right</div>
</div>
</body>
</html>
CSS
.container {display:table; width:100%;}
.left {border: 1px dashed purple; display:table-cell; overflow:hidden; width: 66%; height: 20px;}
.right {display:table-cell; background:green; width: 34%; height: 20px;}
JS
var innerSpan = document.getElementById("test");
var left = angular.element(innerSpan);
console.log(left.css("width"));
When I inspect the element using the chrome dev tools panel, the computed width is definitely not the empty string? What am I missing here?
You can't use .css('width') to get the width of an element. You use it to get the styled width. Since you didn't define the width in the element's style attribute, you get no value.
Try .prop('offsetWidth') instead.
Also, when using jsbin.com, your script is automatically included. Including script.js is just throwing a 404.
I am making my first responsive design website.. I have an image slider div that is set with using pixels and media queries. I want to be able to access the width so I can tell the image slider how far I need to move. Unfortunately media queries don't seem to change the HTML. Is there any workarounds to get that information so I can use it in javascript.
here is a simple webpage example to play with and a JSFiddle http://jsfiddle.net/synthet1c/sNbW9/
<!doctype html>
<html>
<head>
<style>
body{
position:absolute;
background:red;
width:100%;
height:100%;
}
#outer{
position:absolute;
width:80%;
height:80%;
background:red;
background-image:url('http://www.largepictures.net/largepictures/scenery/largepictures_scenery_large_3066.jpg');
background-position: center;
margin:auto;
}
#inner{
width:80%;
height:80%;
background:rgba(255,0,0,0.3)
margin:auto;
margin-top:5%;
}
</style>
<script>
document.getElementById('inner').onclick = function(){
alert(document.getElementById('inner').style.width);
}
</script>
</head>
<body>
<div id="outer">
<div id="inner">click the box to get width</div>
</div>
</body>
</html>
The element.style object is only available for properties set with the style attribute (as the name might suggest). To retrieve CSS settings for elements whose style is set using a stylesheet:
document.getElementById('inner').onclick = function(){
alert(window.getComputedStyle(document.getElementById('inner'), null).width);
}
JS Fiddle demo.
References:
element.style.
window.getComputedStyle().
I made a little snippet for myself as this is a function I have been needing for a while
var comStyle = function(element , pseudoElt){
if(!pseudoElt){pseudoElt = null}
return window.getComputedStyle(document.getElementById(element), pseudoElt); }
This has me thinking though... Am I able to change the prototype so if element.style.something equals and empty string then use getComputedStyle() to get the actual value from the stylesheet?
Can't you just use offsetWidth, it's read-only property providing width of an element as an integer.
var el = document.getElementById('inner')
el.onclick = function(){
alert(el.offsetWidth)
}
http://jsfiddle.net/t2r7jnb4/