I'm making a very simple minigame which idea is to pick the proper color of the figure you've seen for about a second or two by clicking one of the four divs with the id's circle1, circle2 etc. with the specific colors:
var odpowiedz_kolor = $('<div class="label id="gra">Jaki kolor miał następujący kształt?</br></br><ul class="inline">'+
'<div class="odpowiedz_pojemnik" id="' + wylosowane[losowa_z_wylosowanych_figur].figura + '"> </div></br></br>'+
'<ul class="inline">'+
'<li><div class="kolo" id="kolo1"> </div></li>'+
'<li><div class="kolo" id="kolo2"> </div></li>'+
'<li><div class="kolo" id="kolo3"> </div></li>'+
'<li><div class="kolo" id="kolo4"> </div></li>'+
'</ul></div>');
I've cut out the unnecessary code...
$('#kolo1').css('background-color', wylosowane[0].kolor);
$('#kolo2').css('background-color', wylosowane[1].kolor);
$('#kolo3').css('background-color', wylosowane[2].kolor);
$('#kolo4').css('background-color', wylosowane[3].kolor);
$(".kolo").on('click', function(){
var color = $('.kolo').find('#kolo').css('background-color');
I've set the colors as seen above. Now's the question how to retrieve the according colors 'cause I'm stuck on the click handler. I'd appreciate even the ugly but working solutions.
The scenario is:
you see 4 different figures with different colors for a couple of seconds
you now have to decide which one was it (if pick good/bad then...)
Thank you in advance.
You probably want to know the color of the figure that you just clicked, so I suggest you made this :
$(".kolo").on('click', function(){
var color = $(this).css('background-color');
}
JsFiddle : http://jsfiddle.net/F3HB5/
EDIT :
Based on your code, I have updated your jsFiddle to this one : http://jsfiddle.net/8LFR7/3/.
There were 2 main errors :
when you want to target an id, you have to put a # before the id -> $("#" + wylosowane[losowa_z_wylosowanych_figur].figura).css('background-color').
As you remove your figure before the test, you have to capture the color BEFORE you remove it and save it in some variable : here I have put it at the beginning of the setTimeout block : var targetColor = $("#" + wylosowane[losowa_z_wylosowanych_figur].figura).css('background-color');
Firstly a friendly advice, whichever native language you belong to, please use English for your code.
Now your solution: Well you need to match the background-color for the clicked circle with the triangle, so you can do the following to achieve this:
$(".kolo").on('click', function(event){
var id = event.target.id; // For the id, but that does not matter, you can get it using the class also or this
if($(id).css('background-color') == $('.odpowiedz_pojemnik').css('background-color')){
alert('Good!');
}
else{
alert('Bad!');
}
}
Related
I have a text and several tags on my website and I want to highlight a random sentence every time I click a tag (at the same time, the tag become "active"). Here's my code:
'click #mytag .selectize-control.multi .selectize-input [data-value]': function(){
if($(event.target).attr('class') == "item"){
$(event.target).removeClass().addClass('item active');
var dataval = $(event.target).attr('data-value');
//to "deactivate" other active tags
$('.selectize-control.multi .selectize-input [data-value]').each(function(){
if($(this).attr('class') == "item active" && $(this).attr('data-value') != dataval){
$(this).removeClass().addClass('item');
}
});
//generate a random random index and find the corresponding sentence to change the color
Meteor.call("generateSentence",asin, function(error, result){
Session.set("colorSentence", result);
});
var sid = Session.get("colorSentence");
var id = 'span#sentence'+sid.toString();
$(id).css("background","yellow");
}
}
I can get a random sentence highlighted with a background color yellow every time i click on one tag. However, I want to toggle the color off next time i click another tag so that there's only one line with background color each time. Can anyone suggest how to do it?
Also, in order to only keep one tag "active" each time, I loop through all tags to check its status and turn other active ones off. It's pretty brute but at least works as my tags are too many. But as there're much more sentences here, I don't want to do the same thing here. I also appreciate any ideas about a cleverer way to deactivate other tags each time. Thanks
First of all, add a class="sentence" to all your sentence spans.
Now, to deactivate your backgrounds, do
$('span.sentence').attr( style, '' );
Secondly, the way you are using Session variables to handle the result of the Meteor call is a bad pattern. It uses an unnecessary reactive observer and is harder to follow than doing the work in the callback. So in total, your code becomes:
Meteor.call( "generateSentence", asin, function(error, result){
$( 'span.sentence' ).attr( style, '' );
$( 'span#sentence' + result ).css( "background", "yellow" );
});
Replace your explicit loop to deactivate your tags with jQuerys build in handling of multiple element selections, the same way as you clear the sentence styles.
Just want to display comment list in the following way but something is wrong with my code and I cannot get expected result. Could you please check it and help me to find the mistake.
I get following result:
var item = $('<div>');
$.each(data.results, function(i, res) {
var photo = $('<div>'),
block1 = $('<div style="float: left;">'),
block2 = $('<div>'),
title = $('<h4>'),
info = $('<p>');
photo.html('<img src="xyz">');
title.html('<hr/>'+res.name+','+res.country);
info.html(res.comment_text);
block1.append(photo);
block2.append(title, info);
item.append(block1, block2);
});
$("#comments").html(item);
This seems to be a clearing issue. You need to clear the parent divs. You can easily do so by adding a clear class to those items and applying the following CSS:
.clear:after {
content: "";
display: table;
clear: both;
}
Here is a test case.
It would have been better if you supplied the output HTML and preferably a fiddle to play with. Now you forced us to figure it out all by ourselves. Make your questions as clear and to the point as possible, so people will answer to you more quickly and thoroughly.
First off your selectors are bad, you have 3 vars that are calling the same thing. Use this as a guideline for your selectors. jQuery Selectors Also it will be helpful to know what is failing exactly, maybe paste some HTML so we can better help you.
Edit: Try removing the block1 and block2 vars and see how it looks. With those selectors they are appending the photo and title info to the very first div. Try using the selector $(this) instead of block1 and block2.
Edit2: Ok so what is going on is your item.append(block1, block2); part is adding the blocks you create to the first div.
EDIT3: You need to create a new div and add the new blocks to create the new "item" Something along the lines of item.append("< /div>< div>"+ photo + title + info+'< /div>')
Edit 4: Without knowing your html I can't really write any code for your situation I can only assume and guess.
You should use stylesheets over inline styles, but essentially you just need to clear the float you're creating.
Change:
var item = $('<div>');
to:
var item = $('<div style="clear:left">'),
where are you closing your elements? try with this code:
var item = $('<div/>');
$.each(data.results, function(i, res) {
var photo = $('<div/>'),
block1 = $('<div style="float: left;"></div>'),
block2 = $('<div/>'),
title = $('<h4/>'),
info = $('<p/>');
photo.html('<img src="xyz"/>');
title.html('<hr/>'+res.name+','+res.country);
info.html(res.comment_text);
block1.append(photo);
block2.append(title, info);
item.append(block1, block2);
});
$("#comments").html(item);
I am using the Nivo slider on my site and wondered if it was possible to change the numbered bullet points (i.e. 1,2,3) to words by changing the javascript / adding some css?
I think it has something to do with this part of the code...
// Add Control nav
if(settings.controlNav){
vars.controlNavEl = $('<div class="nivo-controlNav"></div>');
slider.after(vars.controlNavEl);
for(var i = 0; i < kids.length; i++){
if(settings.controlNavThumbs){
vars.controlNavEl.addClass('nivo-thumbs-enabled');
var child = kids.eq(i);
if(!child.is('img')){
child = child.find('img:first');
}
if(child.attr('data-thumb')) vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('data-thumb') +'" alt="" /></a>');
} else {
vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
}
}
It would be great if i could have the words and style them using css.
I'm using the controlNav as buttons instead of bullets.
Please let me know if you need more info.
Thanks - really hoping someone can help me on this!
You could consider using CSS selectors to target the anchor by its rel attribute (which, for these anchors, appears to be the numeric one-based index). See CSS - style a link based on its "rel" attribute? for details on this topic.
An example of how you could achieve this using purely CSS would be:
a.nivo-control[rel='1'] { content: 'One!'; }
Of course, for this to work, you'd need to know in advance approximately how many slides you have.
If you prefer jQuery (which you already have since it's a prerequisite for using Nivo), you could do something like:
jQuery("a.nivo-control[rel='1']").html("One!");
(edit: The rationale here is that, rather than having to alter the base code for Nivo Slider, you can come by after the fact and make this modification; thus, when you update the plugin in the future your changes will hopefully work out of the box.)
I'm not familiar with the Nivo slider, but from what I can tell, the text is created in your last line of code:
vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
this to be exact: >'+ (i + 1) +'<
In order to create text instead of a number, you would have to create this inside your else-clause:
//REST OF YOUR CODE...
} else {
var bulletText = '';
switch (i) {
case 0: bulletText='one'; break; //change this value to your desired word
case 1: bulletText='two'; break;
case 2: bulletText='three'; break;
//etc...
default: alert('bullet does not exist: '+i);
}
vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'"><span class="bulletTxt">'+bulletText+'</span></a>');
}
In your CSS, you can style the text by adding
.bulletTxt {
//css rules here...
}
Only problem (maybe) is that the switch could be a long list, depending on how many bullet points there are.
Couldn't find a punctual answer for this simple task and your help is highly appreciated
We have an image we want to switch based on user's color selection.
Tried several methods, none worked.
This is the idea:
$('#YourButton').click(function() {
var oldSrc = 'images/Image1.png';
var newSrc = 'images/Image2.png';
$('img[src="' + oldSrc + '"]').attr('src', newSrc);
});
Just change the image source with javascript by clicking your button with another color
Note: it´s jquery so you have to include the js file..
Just bind a click listener to your button and change the src attribute of your image.
$('#colorButton').click( function() { //choose a new color
$('#imageIcon').attr('src', 'path/to/new/image.png'); //change the img's source
});
EDIT (response to questions):
If you want this code to apply to all of your buttons, give each of your buttons a similar class instead of an ID:
<div class="colorButton"></div>
Then you can use the following selector to apply the above click listener to all of these divs:
$('.colorButton')
Naturally, you want to change your image as simply as possible. You could map all of your colors to their corresponding image file, but as far as design goes this might get messy and unwieldy. I would create a directory that stores all of your image files (for example, /your/color/swatches) and give each of them a name consistent with their color, like 'ff0000.png' for red, '0000ff.png' for blue, etc.
Why would we do this? So that we can switch your image based on the background-color attribute of your buttons. Let's say that you have the following buttons:
<div class="colorButton" style="background-color: '#ff0000'"></div>
<div class="colorButton" style="background-color: '#0000ff'"></div>
You can use the same click listener, but it will have to be modified a bit since we are mapping the background color to an image:
$('.colorButton').click( function() {
var color = $(this).css('backgroundColor');
//(You'll need to modify your color string here)
$('#imageIcon').attr('src', 'your/color/swatches/' + color + '.png');
});
BUT this won't work yet. Since most browsers return "rgb(xx, yy, zz)" from .css('backgroundColor'), you need to convert that string into hex. This post on SO gives a more or less effective way to do so, but you'll need to modify it to fit your model where I have indicated.
I am trying to hide and show different div's depending on which radio you select. Unfortunately I could not come up with working solution so far. Here is my starting code http://jsbin.com/edokef/1/edit
Maybe someone could suggest how to achieve that? I was thinking about getting the index of each radio but each radio is inside separate div wrap and in that case the index is always 0.
Thank you for any idea.
Demo: http://jsbin.com/edokef/7/edit
Code:
options.click(function(){
var id = "opt" + $(this).val();
$(".optDivs").hide();
$("#" + id).show();
});
Plus, each div that should be shown has a class now (optDivs)
You can use toggle() to show or hide based on div based on radio button
var options = $('#options').find('input');
options.click(function(){
$("#"+$(this).parent().attr('class')).toggle();
});
})();
DEMO
Sorry for not providing You with a full solution.
1) Why do You want to use indexes? Every radio has a value. Use that instead.
2) "to hide and show different div's depending on which radio you select" sounds to me at least like one to many relationship. I recommend using publisher/subscriber for this task. There are many usable implementations of this pattern eg. https://github.com/federico-lox/pubsub.js
PS Try to avoid pubsub implementations based on jQuery (they manipulate on DOM and and are kinda slow)
may be this can help you
$(function(){
(function(){
var options = $('#options').find('input');
options.click(function(){
if($(this).is(':checked'))
{
$('#' + $(this).parent().attr('class')).show();
}
else
{
$('#' + $(this).parent().attr('class')).hide();
}
});
})();
});
DEMO
This will work:
<script>
$(function(){
(function(){
var options = $('#options').find('input');
$(options).click(function(){
$('#opt1, #opt2, #opt3').hide();
$('#' + $(this).parent().attr('class')).show();
});
})();
});
</script>