Can't get jQuery addClass("active") to work - javascript

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/

Related

How to pass a css value from one html page to another using javascript?

I am trying to pass a circle made with CSS from one HTML page to another. First the circle is green. After clicking a button the circle becomes red. I want the same green circle of the other html page to becomes red like in the first page.
Here is the code of the first HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<style>
#first{
height:20px;width:20px;
border-radius:50%;
border-width: 5px;
background-color: green;
}
</style>
<script>
function passvalues(){
const first=document.getElementById("first");
localStorage.setItem("firstvalues",first);
return false;
}
</script>
</head>
<body>
<div id="first"></div>
<input type="button" value="click here" onclick="doSomeThing()">
<script>
function doSomeThing(){
document.getElementById("first").style.backgroundColor='red';
}
</script>
<form action="second-page.html">
<input type="submit" value="Click" onclick="passvalues()"/>
</form>
</body>
That's the code of the second HTML page (Second-page.html):
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<style>
#first{
height:20px;width:20px;
border-radius:50%;
border-width: 5px;
background-color: green;
}
</style>
</head>
<body>
<div id="first"></div>
<span id="first"></span>
<script>
document.getElementById("first").innerHTML=localStorage.getItem("firstvalues");
</script>
</body>
</html>
When I run this code I get on the second page a green circle and [object HTMLDivElement] inside of it. I think something is wrong with the function innerHTML.
You can avoid to use JavaScript including one single class in your index.css that use :active to change the color of the circle when clicked.
That's a simple example that you can arrange to your needs:
<html>
<body>
<button class="btn">Click me</button>
<style>
.btn{
background:black;
color:white;
border:0;
margin:1rem;
}
.btn:active{
background:red;
}
</style>
</body>
</html>
One good idea is to activate the styling after a button is clicked with JavaScript so you don't have to pass the function to the other page, instead you can activate this class with onother button placed on second page.
In this example I've changed the background of the button,
instead of changing button's style you can apply the class directly to the circle.
I hope this answer is usefull for you, if not, please tell me I would give you mnore help!
Your best.
What you are trying to store here is the div as an object.
Instead try storing the Html itself of that div. Use:
localStorage.setItem("firstvalues", first.outerHTML)
Note:
Ids should be unique to the page. When you put the content of the first page's #first in the second page's #first, you create two elements of the same id. Have different ids in both to avoid conflicts.
You are submitting a form to another page. So why not use the standard method of passing data in a GET parameter?

JavaScript appearing on the page with "inline-block" css inherited

We're using display: inline-block; to control elements that might live within the div of class "test". The javascript is now appearing on the page. I did not know "script" tags could ever render to the page. Has anyone found a way to work this example code to not hit elements such as "style" and "script"?
We're willing to use display:none; on our script and style tags but that's a kludge.
<html>
<head>
<style type="text/css">
.test * {
display: inline-block;
}
</style>
</head>
<body>
<div class="test">
<p>Text here</p>
<script type="text/javascript">
function TestFunction() {
var test = 1;
};
</script>
</div>
</body>
</html>
The output is:
Text here function TestFunction() { var test = 1; };
The easiest way would be to change the .test * {} selector.
An alternate would be to bulldoze the style with something like:
script,style{
display:none !important;
}
Here is a fiddle
Just like you commented before,
"We're willing to use display:none; on our script and style tags but that's a kludge."
You're setting the tag to spill its guts with that
.test * {display: inline-block}
A couple of things you could do.
Take out the tag from within that div
Don't use the * selector in CSS
Add another rule within css .test script {display: none;}
You can overwrite it with display: none; or you can use the :not() selector like so:
.test *:not(script) {
display: inline-block;
}
Or, probably the best option would be to place your script tags just inside your </body> tag or in the head where they should go.

How to implement the nanoScroller so that it works correctly?

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/

Add a class name to element immediately this element is loaded

I have an element which has to be hidden when JavaScript is enabled. The current code seems like this:
<body>
...
<div id="js-hidden"></div>
...
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$('#js-hidden').hide();
})
</script>
There is the problem, the js-hidden div is visible since the rest of page (and JavaScripts) are loaded.
Can I hide that earlier? This solution is so bad for me, JS user can´t see this element.
PS: I've written the example with using jQuery, it can be in plain JS too, of course :-)
$(document).ready makes it happen after full page loaded you can use
<body>
...
<div id="js-hidden"></div>
...
<script src="jquery.js"></script>
<div id="js-hidden"></div>
<script>
$('#js-hidden').hide();
</script>
Simplest thing:
<style>
.js-hidden {
display: none;
}
</style>
<noscript>
<style>
.js-hidden {
display: block;
}
</style>
</noscript>
Since you cannot use onload event on div I guess the best solution is put your js right after that div...

Changing background position with Javascript?

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:cen‌​ter;
}
.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

Categories