Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I wanna create something like pixel art notepad but I can't get background-color from my divs(top left corner) when I am pressing on them and assign this value to the variable, then assign this value to the "current color" div(top right corner).
The screenshot of my app.
My code:
$(document).ready(function() {
createGrid(16);
$('#newGrid').click(function() {
refreshGrid();
});
$('.colorBoxes').click(function() {
var currentObject = event.target;
console.log(currentObject);
//here i'm trying to get the color of my clicked div
//(I'm really have no idea what to do)
variable = window.getComputedStyle(currentObject);
var containerForBackgroundColor = variable.getPropertyValue('background-color');
console.log(containerForBackgroundColor);
});
});
As you are using jQuery, you can access the background-color with the following code:
var containerForBackgroundColor = $(this).css('background-color');
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I need to hide all elements on a Wikipedia page (https://en.wikipedia.org/wiki/Dogs_in_warfare) after an element with the id of "See_also" using javascript. Any suggestions on how to do this quickly? I think I'm overcomplicating my possible solutions.
Vanilla JS Solution
Keep on removing the sibling elements until you reach the end.
const span = document.getElementById("See_also");
const h1 = span.parentElement;
let nextEl = h1.nextElementSibling;
while (nextEl) {
nextEl.style.display = "none";
nextEl = nextEl.nextElementSibling;
}
document.getElementById("catlinks").style.display = "none";
If the elements after "See_also" are on the same level in the hierarchy , you can achieve this in CSS like so:
#See_also ~ * {
display: none;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I'm doing this tutorial and this guy says, "I'm going to create a div..."
$("document").ready(function() {
// fetch the AJAX content
$("#newsContent").load("news.txt");
//$.getJSON("news.json", successFn);
});
function successFn(result) {
$.each(result.newsStories, function(i, item) {
// Didn't quite understand what this line did.
var newsDiv = $("<div class='news'>");
newsDiv.append(item.title);
newsDiv.append(item.content);
// Now understand that this puts the above div in play.
$("#newsContent").append(newsDiv);
});
}
I'm really only worried about this line:
var newsDiv = $('<div class="news">');
I've tried this on jsfiddle, but it doesn't seem to work. This is happening during the construction of an AJAX request if that helps.
My question is, when does newsDiv become part of the DOM?
$('<div class="news">'); will return $ wrapped object corresponds to an html element (in this example, div element) to you. But not created any element at your html. You can simply add this newly created element to your html like,
$('#myNewsContainer').append(newsDiv); // append to the div with id 'myNewsContainer'
$('#myNewsContainer').html(newsDiv); // replace all html with new div
The line
var newsDiv = $('<div class="news">');
creates a variable newsDiv with value <div class="news">. At this moment it is not appended to html. You can append it to HTML using Jquery append() method.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have code but it works with scroll height, i want to do something different. I want to convert it to Toggle, is it possible? First click add .animated and remove .fix, on second click remove .animated and add .fix.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 20) {
$header.addClass('animated').removeClass('fix');
} else {
$header.removeClass('animated').addClass('fix');
}
});
I'm new on javascript can anyone help me please?
Thanks!
The toggleClass accepts a switch argument, a Boolean value. true adds the className and false removes the className.
var bool = scroll > 20;
$header.toggleClass('animated', bool).toggleClass('fix', !bool);
I've found solution like this, maybe somebody uses it.
$('.header').on('click', function(e) {
$('.header').toggleClass("animated") .removeClass('fix');
e.preventDefault();
});
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
I wanted to add a class to the parent div depending on particular size of the image inside the parent div.
But this jquery code doesn't works when i add more div element in the parent container
code looks something like this
<div>
<div>
<div>
<img src='http://4.bp.blogspot.com/-Go-gvkEm4Rw/UszzNls6EYI/AAAAAAAAEfQ/qds_K1jXgLE/s1600/doctype-hi-res1-960x305.jpg'/>
</div>
</div>
</div>
I want a jquery code which can add class to the main parent div depending on the size of image of certain width.
Use the image load handler... like
jQuery(function () {
$('img').load(function () {
//check the desired size here
if (this.width > 48) {
$(this).parents(':eq(2)').addClass('special')
}
}).filter(function () {
return this.complete
}).trigger('load')
})
Demo: Fiddle
$(img).parent().addClass('classname');
Yeah I've achieved it already it's similar like you jQuery function only difference is I'm using height instead of width of the image
Here's the jQuery function which I'm using
`
$(window).load(function() {
$('img';).each(function() {
var div = $(this);
var $par = $(this).closest('div');
if(this.height >= 100) {
$par.addClass('';);
} else {
$par.addClass('landscape');
}
})
});
`
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Why does this work:
upButton.addEventListener('click', function(){player.up()}, false);
//downButton.addEventListener('click', function(){player.down()}, false);
but this doesn't work:
upButton.addEventListener('click', function(){player.up()}, false);
downButton.addEventListener('click', function(){player.down()}, false);
These are the buttons:
var upButton = document.getElementById('up');
var downButton = document.getElementById('down');
Right now the program just prints out "Hello World" to a canvas. When I add the event listener to the downButton, it won't print anything. The canvas appears but I don't see the "Hello World" message.
I am very confused. Thanks for the help.
Here is a link to the jsfiddle
http://jsfiddle.net/PPuCR/9/embedded/result/
Based on your fiddle, you have capitalized ID's for right and down. There are case sensitive. I filled in the blanks with a working fiddle: http://jsfiddle.net/guydog28/duYBu/
Your down button id is Down not down so use the below line
var downButton = document.getElementById('Down');
Note : id of an element is case-sensitive
Please consider respecting naming conventions "down" "Down".
Anyway, I think I fix it.
var upButton = document.getElementById('up');
var downButton = document.getElementById('down');
Here is the link : http://jsfiddle.net/PPuCR/15/embedded/result/
Have a nice day.