Javascript change element properties onmouseover onmouseout - javascript

I've got this code:
<script type="text/javascript">
$(document).ready(function () {
$('.thumbspiccolimabelli').hover( function(e){
var ider = $(this).attr('title'); // e.g. the other element I want to change colour on
console.log(ider);
var test = document.getElementsByClassName(ider);
for(var i = 0; i < test.length; i++) {
if(test[i].style.color = 'red'){
test[i].style.color = 'white';
}
else{
test[i].style.color = 'red';
}
}
console.log(test);
});
});
</script>
And i'm trying to change the colour of all element on the page that have the id of the element i'm hovering over, but it does'nt quite work.
The element im hovering over has a ID of "myhoverelement" and I have span elements that share the same ID, these ones I want the colour to change on.
Thanks

You dont need javascript for this
CSS:
.thumbspiccolimabelli {
background-color: none;
}
.thumbspiccolimabelli:hover {
background-color: #fff;
}

Is this what you want?
'#myhoverelement' is being replaced with '.myhoverelement'. IDs must be unique.
$('.thumbspiccolimabelli').on('hover' , function() {
$('.myhoverelement').each(function() {
$(this).css('background' , '#ffffff');
});
});

Related

How do i style each li element at a time?

I am trying to style each <li> element at a time on click, not all at once. For each click, the first one, then on the second click, the next one and so on...
This code puts style on all li elements at once. How do I do it?
$("a").click(function() {
var menu = document.getElementsByTagName("li");
for (var i = 0; menu[i]; i++) {
$(menu).css("background", "red");
}
});
p {
color: red;
margin: 5px;
cursor: pointer;
}
p:hover {
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a>sdadsa</a>
<ul>
<li>asda</li>
<li>sadada</li>
<li>sada</li>
<li>asdad</li>
</ul>
You can use jQuery's .css() to check the css value of specified element
$("a").click(function() {
var menu = document.getElementsByTagName("li");
for (var i = 0; menu[i]; i++) {
// get element of current index
const menuElement = menu[i];
// if the first element's background is not red.
if ($(menuElement).css("background") !== "red") {
// set it red.
$(menuElement).css("background", "red");
// escape for loop
break;
}
}
});
You can use a variable that points to current li element which should change background on the next click. When the anchor tag is clicked we remove the background of previous li element and change the current element's background
<script>
let current = 0;
$("a").click(function () {
var menu = document.getElementsByTagName("li");
let prev = current-1;
if(prev==-1) prev = menu.length-1;
menu[prev].style.background = "none";
menu[current].style.backgroud = "red";
current = (current + 1)%menu.length;
});
</script>
One approach would be to add a class to do the styling.
When you click your element find the first <li> that doesn't have that class and add it to that one.
Adding and removing classes is typically easier than modifying and undoing inline style
$("a").click(function() {
$('li').not('.red-bg').first().addClass('red-bg')
});
.red-bg {background:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a>sdadsa</a>
<ul>
<li>asda</li>
<li>sadada</li>
<li>sada</li>
<li>asdad</li>
</ul>

Hide DIV depending on text inside another DIV in DOM with javascript?

I need to hide a DIV depending on userroles. I have no variable to use from these userroles, except text inside a title tag.
html:
<title>admin</title>
If admin then hide the DIV for an example
<div class="demo"></div>.
I can only use Vanilla Javascript.
Update: This hides the div, but shows it for a blink at pageload:
$('document').ready(
function() {
function _title(){
if(document.title=="admin"){
document.getElementById('demo').style.display="none";
}
}
window.onload=_title;
});
Okay well this should answer your question.
This will set style none for element with the ID of demo.
function _title(){
if(document.title=="admin"||document.title=="admin1"){
document.getElementById('demo').style.display="block";
}
}
window.onload=_title;
If you to use class rather than id to allow this function to work with multiple elements....
function _title(){
if(document.title=="admin"){
var DemoClass = document.getElementsByClassName('demo');
for(var i=0; i<DemoClass.length; i++) {
DemoClass[i].style.display="block";
}
}
}
window.onload=_title;
If this answers your question, marking your question as answered would be appreciated.
Simple add this to your page
For id
<style type="text/css">
#demo{display:none;}
</style>
For class
<style type="text/css">
.demo{display:none;}
</style>
---- Titles that contain the word Admin ----
For Class
function _title(){
var allow = document.title.search("admin");
if(allow>-1){
//Set display for demo element
var DemoClass = document.getElementsByClassName('demo');
for(var i=0; i<DemoClass.length; i++) {
DemoClass[i].style.display="block";
}
}}
For id
function _title(){
var allow = document.title.search("admin");
if(allow>-1){
//Set display for demo element
document.getElementById('demo').style.display="block";
}}

JavaScript toggle 2 links from full page

I have a page full of links and they're paired. What I would like to do is once I've clicked a question mark (for help) the first 2 pairs are selected, then the next 2 and so on. The problem is that the links are created randomly on the page. I have the following code which selects the first link and its pair.
$(".main .container a:first").css("color", "#0c0");
var valid = $(".main .container a:first").attr("class").split(" ");
var links = $(".main .container a");
for (i = 0; i < links.length; i ++) {
var attributes = $(links[i]).attr("class").split(" ");
if (attributes[1] == valid[1]) {
$(links[i]).eq(0).css("color", "#0c0");
}
}
EDIT:
$(".help a").on("click", function()
{
var unchecked = $(".main .container a:not(.selected)");
var valid = unchecked.eq(0).attr("class").split(" ");
var links = $(".main .container a");
unchecked.eq(0).addClass("selected");
for (i = 0; i < links.length; i ++) {
var attributes = $(links[i]).attr("class").split(" ");
if (attributes[1] == valid[1]) {
$(links[i]).eq(0).addClass("selected");
}
}
});
Looks like you can simply manage that by adding a CSS class to the elements that were already "selected".
Check this simple test I did at JSFiddle: http://jsfiddle.net/L4rUM/1/
// When you click the "?"
$('button#btnHelp').on('click', function(){
// Gathers the list of ALL <a> elements that were not "selected" yet
var uncheckeds = $('.main .container > a:not(.selected)');
// If you have at least 2 available elements
if(uncheckeds.size() > 1){
// Adds the .selected CSS class to first 2 non-selected elements
uncheckeds.eq(0).addClass('selected');
uncheckeds.eq(1).addClass('selected');
}
});
And the CSS manipulation you are doing is now controlled by just adding the CSS class:
.selected { color: #0c0; }
I hope this helps and solve your problem :)

Create my own Radio-like-button with a DIV?

I'm trying to make a site where users can create there own social networking buttons. (I know its been done but its mostly for practice). A part of the site will allow users to choose the shape of the buttons. Here is the HTML:
<div class="design" id="shape">
<div class="shapeSelect square" id="square"></div>
<div class="shapeSelect rounded" id="rounded"></div>
<div class="shapeSelect circle" id="circle"></div>
</div>
What I would like to do is add an event listener when the div is clicked. After it's clicked the class attribute would be changed to "selected." When another one would be click then the first clicked one would be cleared and the next one would be selected. Just like with radio buttons.
I am familiar with JavaScript and my idea was this:
window.onload = function () {
'use strict';
document.getElementById("square").addEventListener('click', function (e) {//adds the event listener
divArray = document.getElementById("shape");//Here is my first issue: an array is not returned
if (!(document.getElementById("square").getAttribute("class") == "shapeSelect square selected")) {// checks to make sure its not already selected
for (i = 0, count = document.getElementById("shape").length; i < count; i++) {// if it isn't go through the array
divArray[i]// and this is where i also get stuck. I Can't figure out how i would return the class attribute to be class="shapeSelect circle" instead of class="shapeSelect circle selected"
};
}
}, false);
}
A more simple version of scdavis41's answer:
$(document).ready(function(){
$('#shape > .shapeSelect').click(function(){
$('#shape > .shapeSelect').removeClass('selected');
$(this).addClass('selected');
});
});
I also put a selector that includes the control's main div id in case you want to put this control more then once in your page.
** EDIT **
If you absolutly want to use javascript and DOM try this:
document.getElementById("square").addEventListener('click', function (e) {
var divArray = document.getElementById("shape").getElementsByTagName("div"); //Get all the div child element of the main div
for (i = 0, count = divArray.length; i < count; i++) {
if(divArray[i].getAttribute("class").indexOf("selected") !== -1) { //check if the selected class is contained in the attribute
divArray[i].setAttribute("class", divArray[i].getAttribute("class").replace("selected", "")); // clear the selected class from the attribute
}
};
document.getElementById("square").setAttribute("class", document.getElementById("square").getAttribute("class").concat(" selected")); //select the square
}, false);
This is verbose, but you could use:
$(document).ready(function(){
$('#square').click(function(){
$('.shapeSelect').removeClass('selected');
$(this).addClass('selected');
});
$('#circle').click(function(){
$('.shapeSelect').removeClass('selected');
$(this).addClass('selected');
});
$('#rounded').click(function(){
$('.shapeSelect').removeClass('selected');
$(this).addClass('selected');
});
});
This is jQuery, which means you have to load the jQuery library, but putting this above your script tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
If you are looking for a pure JavaScript solution, you could try this:
if(option == 'add'){
element.className = element.className + ' selected';
element.onclick = function() {select(this.id, 'remove')};
element.innerHTML = '✓';
}
else if(option == 'remove'){
element.className = element.className.replace(/\bselected\b/,'');
element.onclick = function() {select(this.id, 'add')};
element.innerHTML = '';
}
JSFiddle: http://jsfiddle.net/hKePD/
**EDIT**
Or if you were looking for a checkbox to be always checked, you could try this: http://jsfiddle.net/hKePD/1/
Building on scadvis41's answer, this is much shorter:
$(document).ready(function(){
$('.shapeSelect').click(function(){
$('.shapeSelect').removeClass('selected');
$(this).addClass('selected');
});
});

How to change background-color in header with scrollpsy on each ID

I'm using scrollpsy from bootstrap.
I made an example of what I'm trying to do:
http://jsfiddle.net/te3V4/15/
All is good, he passing one active class to li at each section id, but I want change the background at header at each section
For example:
if #studio background-color: #0915ff;
if #green background-color: 085606;
$(function() {
var $spy = $('.nav');
$spy.bind("activate", function(e) {
//e.target is the current <li> element
var header = $(e.target).find("a").attr("href");
alert (header);
$studio = $('#studio')
$duplex = $('#duplex')
$tower = $('#tower')
If( $(header) == "#studio" ) window.alert( “ALERT ACTIVED”);
});
});
I'm not familiar with scrollspy but I've updated your fiddle http://jsfiddle.net/te3V4/18/
Basically on each tag I've added a "data-background" property which a value of the color you want. I reset all the colors on when it runs, and the assign the correct color using the following code.
var $spy = $('.nav');
var first = $('a', '#navbar')[0];
$(first).css({'background-color':$(first).data('background')});
$spy.bind("activate", function(e) {
$('a', '#navbar').css({'background-color':'inherit'});
var header = $(e.target).find("a");//.attr("hr");
$(header).css({'background-color': header.data('background')});
});

Categories