Develop Reference

Assign a value of the pressed div [closed]

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');

Convert IF to TOGGLE [closed]

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();
});

How To Add Class To Parent Div which contains image of certain size? [closed]

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');
}
})
});
`

Clear content in textbox onclick of image [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Can anyone help here for clearing the contents in textbox. I have tried to clear the contents in text box on click of an image using javascript
<input name="newKey" id="newKey" type="text" value="helo" size="38" maxlength="45"/>
<span class="btnClr" id="clear" onclick=clearThis("newKey"></span>
function clearThis(target){
target.value= "";
}

You are clearing a string called 'target' :)
What you want to clear is the DOM element itself:
function clearThis(target) {
target = document.getElementById(target);
target.value = "";
}
Moreover, your onclick attribute needed quoting to not be ambiguous:
onclick='clearThis("search")'
Here is a working fiddle
On another note, consider using less obtrusive JavaScript. It is easier to maintain and develop. Debugging code inside attribute strings can be a real nightmare, and might create portability issues.
Something like:
var clear = document.getElementById("clear");
var search = document.getElementById("search");
function clearThis(element) {
element.value = "";
}
clear.onclick = function(){
clearThis(search);
}
And no JavaScript in your HTML
Here is a fiddle of that

USE GET ELEMENT BY ID.....http://jsfiddle.net/Q7fRB/230/
function clearThis(target){
document.getElementById(target).value= "";
}

working Fiddle
$("#clear").click(function(){
$("#newKey").val('');
});

you can simply do this
function clearThis(target){
document.getElementById(target).value = "";
}

Adding an Accordion-Like Setup? [closed]

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 3 months ago.
Improve this question
I want to be able to add the whole Accordion Aspect to this code in jsFiddle. To where if you expand one, and then click on another it collapses the previous div and displays the most recently clicked.
Any idea of how I could accomplish this through this jsFiddle?
http://jsfiddle.net/zrbFE/
Thank you all!

http://jsfiddle.net/fAmWx/1/
This might help get you started in the right direction. The idea is to simplify and reuse class names and code.

I made this some time ago, think it will suit your needs: http://jsfiddle.net/aCaEG/2/

I like this library for that functionality:
http://flowplayer.org/tools/demos/tabs/accordion.html
Way lighter than jQuery UI, and works beautifully. Check that page for examples of how to mark it up and call it in your script.

Try this for your jsfiddle:
function toggleMe(me) {
var alreadyOpen = me.is(':visible');
jQuery('div[class^="content-"]').hide('fast');
if (!alreadyOpen) {
me.show('slow');
}
}
jQuery('.expand-one').click(function() {
toggleMe(jQuery('.content-one'));
var img = $(this).find('img'),
src = img.attr("src"),
alt = img.data("altsrc");
img.attr("src", alt).data("altsrc", src);
});
/// SECOND SESSION:
/////////////////////////////////////////////////////////////////////////////////////
jQuery('.expand-two').click(function() {
toggleMe(jQuery('.content-two'));
var img = $(this).find('img'),
src = img.attr("src"),
alt = img.data("altsrc");
img.attr("src", alt).data("altsrc", src);
});
Hope this helps,
Pete