I am working on a memory matching game. I have some code that checks if two images that the user clicked on have the same source and removes the images if they do have the same source.
(function compareClicked() {
var lastclicked = "";
$("img").click(function() {
var path = $(this).attr("src");
if( lastclicked == path) {
$('img').hide(1000, function () {
$(this).remove();
});
}
else {
if( lastclicked != "") alert("Not a match");
}
lastclicked = path;
});
})();
However, as you can see, when they have the same source, it removes all of the images on the page - even if the user did not click any them. How can I change it so it only removes the two images that the user clicked on?
var lastclicked = "";
$("img").click(function() {
var path = $(this).attr("src"); // or this.src
if (lastclicked == path) {
$(this).hide(1000, function() {
// remove image with same src as lastClicked
$('img[src="' + lastclicked + '"]').remove();
});
} else {
if (lastclicked != "") alert("Not a match");
}
lastclicked = path;
});
DEMO
How about something like
var lastEl = null;
$(document).ready(function(){
$('img').each(function(index){
$(this).attr('id','img-' + index);
});
$('img').click(function(){
if( lastEl ) {
if( ($(this).attr('src') == lastEl.attr('src')) && ($(this).attr('id') != lastEl.attr('id')) ) {
$(this).remove();
lastEl.remove();
}
lastEl = null;
} else {
lastEl = $(this);
}
});
});
Haven't tested that, but it's got to be pretty close
EDIT: Updated code in line with conversation below. JS fiddle here http://jsfiddle.net/joevallender/pc3Qa/3/
EDIT again: JS fiddle link should be correct now
If you got multiple time (more than twice) the same Src, I really suggest that you tag your clicked images to know which one should be hidden.
As mentionned you could use attr or special class for this purpose.
Related
this is work fine..any idea about how to display "no result found"..
Here my code http://jsfiddle.net/UI_Designer/8p426fog/4/
$(".my-textbox").keyup(function() {
var val = $(this).val().toLowerCase()
$(".personsMenu li").each(function(i) {
var content = $(this).html();
if(content.toLowerCase().indexOf(val) == -1) {
$(this).hide()
} else {
$(this).show();
}
});
});
Thank You..
More elegant and the simplest way it to add extra variable and add <div class="no-results" style="display:none">no results found</div> into DOM, and then toggle visibility of the block jsFiddle
var $block = $('.no-results');
$(".my-textbox").keyup(function() {
var val = $(this).val();
var isMatch = false;
$(".personsMenu li").each(function(i) {
var content = $(this).html();
if(content.toLowerCase().indexOf(val) == -1) {
$(this).hide();
} else {
isMatch = true;
$(this).show();
}
});
$block.toggle(!isMatch);
});
Use the below code for no result found.
$(".my-textbox").keyup(function() {
var val = $(this).val();
$(".personsMenu li").each(function(i) {
var content = $(this).html();
if(content.toLowerCase().indexOf(val) == -1) {
$(this).hide();
$(".personsMenu").html("<ul><li><label> NO RESULT FOUND!</label></li></ul>");
}
else {
$(this).show();
}
});
});
Hope this fullfill your requirement.
I have the following code, I'm relatively new to JavaScript, so can anyone tell me why it isn't advancing to stage 1 + show me how it's done?
var textContainer = '#text';
var inputLine = 'input';
var username = null;
var stage = 0;
$(function(){
if(0 == stage){
$(function(){
$(textContainer).text('What is your name?');
$(inputLine).focus();
$(inputLine).keypress(function(e){
if (e.keyCode == 13 && !e.shiftKey) {
e.preventDefault();
username = $(this).val();
$(this).val('');
stage = 1;
}
});
});
}
if(1 == stage){
$(textContainer).text('Hi there, ' + username + '.');
}
});
What you have there doesn't make much sense, so I'm guessing this is what you're trying to do :
$(function(){
var textContainer = $('#text'),
inputLine = $('input');
textContainer.text('What is your name?');
inputLine.focus().on('keyup', function(e){
if (e.which === 13) {
e.preventDefault();
textContainer.text('Hi there, ' + this.value + '.');
this.value = "";
}
});
});
FIDDLE
There is no way stage could be anything other than zero right after it's set to zero?
What happens inside the event handler, happens "later", so checking stage after the event handler still gives you ... wait for it .... zero ?
I need to check onload if an anchor is within the URL to open a tab if required. The problem is that if a user opens a tab before the onload function gets fired, the tab gets closed and the user needs to open it again.
How to fix that?
HTML:
<body onload="checkurl()">
JS:
function checkurl(){
if (window.location.hash == '#about')
{
showhide('secabout');
}
else if (window.location.hash == '#contact')
{
showhide('seccontact');
}
}
JS function:
var divState = {};
function showhide(id) {
if (document.getElementById) {
var divid = document.getElementById(id);
divState[id] = (divState[id]) ? false : true;
for (var div in divState){
if (divState[div] && div != id){
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
}
}
Thanks.
Uli
I'm pretty sure that <script> tags inside of <head> execute right away before onload() so try that.
You can call the function with an extra parameter to make sure will show in your load function.
Then check on a global initialized variable to check if the function has already been executed by user when running from the checkurl function. This is required if the user clicks on a different tab than the one specified in the URL.
Also you need to check on divState[id] instead of divid.style.display == 'block' when updating divid.style.display at bottom.
function checkurl(){
if (window.location.hash == '#about')
{
showhide('secabout', true);
}
else if (window.location.hash == '#contact')
{
showhide('seccontact', true);
}
}
var divState = {};
var initialized = false;
function showhide(id, initialize) {
if(initialized && initialize) return;
initialized = true;
if (document.getElementById) {
var divid = document.getElementById(id);
divState[id] = (divState[id]) ? false : true;
for (var div in divState){
if (divState[div] && div != id){
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
if(initialize){
divid.style.display = 'block';
} else {
divid.style.display = (divState[id] ? 'block' : 'none');
}
}
}
I have my click function set up to look for the first link in the div and assign that link to the entire div.
$('.article-excerpt').click(function() {
var newLink = $(this).find('a:first-child').attr("href");
if(newLink != "" && newLink != "#") {
window.location.href = newLink;
}
return false;
});
How can I also make that link in a new window?
$('.article-excerpt').click(function() {
var newLink = $('a:first-child',this).attr("href");
if(newLink != "" && newLink != "#") {
window.open(newLink);
}
return false;
});
window.open(newLink)
I have a javascript page which checks an email and username, this works fine in every browser but Internet Explorer. The div box where errors are shown should be hidden unless an error is given e.g. username taken or invalid email.
If the email gets an error this is shown in the div tag, but doesnt work for username (in all browsers)
below is my code:
<script type="text/javascript">
var usernameok;
var emailok;
function checksubmit()
{
if (usernameok && emailok) {
document.getElementById("button").disabled = false;
} else {
document.getElementById("button").disabled = true;
}
}
function username(username)
{
make_request();
function stateck()
{
if (httpxml.readyState == 4) {
if (httpxml.responseText.indexOf("Username Ok") >= 0) {
usernameok = true;
} else {
usernameok = false;
}
checkCanSubmit();
}
}
httpxml.onreadystatechange = stateck;
user_url = "check_username.php?username=" + username.value;
httpxml.open("GET", user_url, true);
httpxml.send(null);
}
function email(email)
{
make_request();
function stateck()
{
if (httpxml.readyState == 4) {
if (httpxml.responseText.indexOf("Email Ok") >= 0) {
emailok = true;
} else {
emailok = false;
}
checkCanSubmit();
}
}
httpxml.onreadystatechange = stateck;
email_url = "check_email.php?email=" + email.value;
httpxml.open("GET", email_url, true);
httpxml.send(null);
}
</script>
I see your function stateck() is the return function from the HTTP request. However, you are defining it within another function. Not as an anonymous function, but just as a function within another function.
I see what you're doing now...ok, try this instead:
httpxml.onreadystatechange = function()
{
if (httpxml.readyState == 4) {
if (httpxml.responseText.indexOf("Email Ok") >= 0) {
document.getElementById("email").style.backgroundColor = "green";
document.getElementById("email").style.color = "white";
document.getElementById("email_div").style.display = 'none';
emailok = true;
} else {
document.getElementById("email").style.backgroundColor = "red";
document.getElementById("email_div").innerHTML=httpxml.responseText;
emailok = false;
}
checkCanSubmit();
}
};
Do you need to set your initial state to display: none? I think IE may initialize the divs with a non-0 height whereas the divs may be technically visible in other browsers but too short to see.
Edit:
Okay I think I misunderstood your question. Your problem is not with hiding the divs but with displaying errors for the username.
Nothing obvious jumps out at me. Try stepping through the code using VS or VWDE:
http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/