I am making a website (just for fun) where you can play the game SET. Now an intermittent problem has cropped up which I do not understand.
The user selects squares by clicking on them (the board is made up of floated DIV elements with images inside of them). When clicked, the border of the DIV becomes yellow.
The unwanted behavior that is happening here is that when a user clicks on the first DIV to highlight it, another div becomes highlighted (see below). The worst part is that the problem happens only intermittently, maybe once out of every five times a user begins selecting a set. I am not sure what code to post as I really cannot guess what is the source of the error.
Here is the code that makes squares light up, although I am not at all sure that the error is in this code:
var myDown = isIOS ? "touchstart" : "mousedown";
$(".cell").on(myDown,function(event) {
if (declared == true) {
if ($(this).hasClass('on')) {
$(this).removeClass('on');
} else {
if ($('.cell.on').length <3) {
$(this).addClass('on');
}
}
if ($('.cell.on').length == 3) {
$submitButton.addClass('ready');
setTimeout(delayedSubmit,400);
}
}
});
Here is a screenshot of the problem:
The square that is highlighted in blue should not be highlighted at all. I clicked on the square in the third column, second row, and that square does have a yellow border to indicate that it was clicked.
In the end I guess I'm just hoping someone else will have had a similar experience with weird, unwanted DIV highlighting so as to suggest a possible cause.
EDIT: Here is a bit of the HTML
<div id="board" class="">
<div id="A1" class="cell">
<div class="box">
<a class="stretchy no-limit" href="#"><img class="spacer" src="/img/spacer.png" alt="spacer"><img class="sprite one empty" id="c0012" alt="card" src="/img/12.png"></a>
</div>
</div>
<div id="B1" class="cell">
<div class="box">
<a class="stretchy no-limit" href="#"><img class="spacer" src="/img/spacer.png" alt="spacer"><img class="sprite three empty" id="c2001" alt="card" src="/img/01.png"></a>
</div>
</div>
<div id="C1" class="cell">
<div class="box">
<a class="stretchy no-limit" href="#"><img class="spacer" src="/img/spacer.png" alt="spacer"><img class="sprite one solid" id="c0202" alt="card" src="/img/02.png"></a>
</div>
</div>
etc.
If I understand the problem you can solve this issue by
Add a css property user-select:none
Add -webkit-tap-highlight-color: rgba(0,0,0,0); to the relevant tag.
Related
I'm currently trying to figure out how to make a text area disappear while another one will appear instead.
I have no knowledge of javascript and I have just started learning the basics of HTML and CSS, is there a chance anyone from the forum can help me out or maybe guide me to the correct path.
I'm attaching the part of the code, to make it more clear.
When you click on "2.svg" it should change the "textarea.one's and three's" "display: block;" into "display: none;"
When you click on "3.svg" it should change the "textarea.two's and one's" "display: block;" into "display: none;"
When you click on "1.svg" it should change the "textarea.two's and three's" "display: block;" into "display: none;"
I hope this explanation is clear enough, I'm also not sure if I'm allowed to ask to provide full code on this forum without preparing anything on my own.
Thank you in advance to whoever will read this!
<div>
<img id="header1" src="/1.svg" alt="Open Menu" class="menu">
<img id="header1" src="/2.svg" alt="Open Menu" class="menu">
<img id="header1" src="/3.svg" alt="Open Menu" class="menu">
</div>
<div class="textniz">
<textarea class="one" id="myInput" name="myInput" readonly>
Line one
Line two
Line three</textarea>
</div>
<div class="textniz">
<textarea class="two" id="myInput" name="myInput" readonly>
Line four
Line five
Line six</textarea>
</div>
<div class="textniz">
<textarea class="three" id="myInput" name="myInput" readonly>
Line seven
Line eight
Line nine</textarea>
</div>
Read this: https://www.w3schools.com/jsref/prop_style_display.asp
In order to change an element's display property, you can access it like this:
document.querySelector("myelement").style.display = "theValueIWant";
Mind the different selectors
Now, what you want is when we click 2.svg to change textarea one and three's diplay property from block to none. First select these using document.querySelector("textarea.one") and then change the value: document.querySelector("textarea.one").style.display = "none";
Now, to call this javascript you need an event. You can use the onClick one. Simply
<img id="header1" onClick="document.querySelector('textarea.one').style.display = 'none';" src="/1.svg" alt="Open Menu" class="menu">
would change the display property of the textarea.one element on click.
Method I In order to call multiple elements, what I suggest is adding one more class to the two elements that you are going to hide, and the simply use the above code with changing the class. E.g., to textarea one and three add class hideOne and then hide the element with document.querySelector("hideOne").style.display = "none";
Method II Another way you can accomplish this, is by creating a function that would hide the two components. Create a script tag and then use the above selector to hide the two elements:
<script>
function hide1(){
document.querySelector('textarea.one').style.display = "none"
document.querySelector('textarea.three').style.display = "none"
}
</script>
Then call the function by inserting into the element to be clicked(your svg): onClick="hide1()"
That's it!
The following is a very short way of achieving the same without jQuery.
It is not as easy to read as the jQuery based solution but contains certain elements that might be interesting to you too:
I used a "delegated event attachment" which means I attached the click event handler to the parent element (the first div in the document) of the three <img> elements. Doing it this way keeps the document "fast" and makes it easily extendable by further elements.
I identify the clicked image by its id attribute: only if the clicked element has the tagName==="DIV" and its id starts with "header", I will take the remaining (id-string - 1) as the index to look-up the class name c in the cls array.
In the txtas.forEach() loop I will then make the <textarea> containing c in its classList visible, while all others will be hidden.
const cls=["one","two","three"],
txtas=document.getElementsByName("myInput");
document.querySelector("div").onclick=ev=>{ let el=ev.target;
if(el.tagName==="IMG"&&el.id.substr(0,6)==="header"){
let c=cls[el.id.substr(6)-1];
txtas.forEach(t=>t.style.display=t.classList.contains(c)?"":"none");
}
}
<div>
<img id="header1" src="/1.svg" alt="first" class="menu">
<img id="header2" src="/2.svg" alt="second" class="menu">
<img id="header3" src="/3.svg" alt="third" class="menu">
</div>
<div class="textniz">
<textarea class="one" name="myInput" readonly>
Line one
Line two
Line three</textarea>
</div>
<div class="textniz">
<textarea class="two" name="myInput" readonly>
Line four
Line five
Line six</textarea>
</div>
<div class="textniz">
<textarea class="three" name="myInput" readonly>
Line seven
Line eight
Line nine</textarea>
</div>
I removed the id attributes from your <textarea> elements as they would have been dupes. The script works very well without them.
Impossible with just CSS but so easy with JQuery (which I think would be easier fo you to start as the semantic is much more read friendly for begginers than pure javascript)
like this:
$("#header1").click(function(){
$(".two").hide();
$(".three").hide();
$(".one").show();
});
$("#header2").click(function(){
$(".one").hide();
$(".three").hide();
$(".two").show();
});
$("#header3").click(function(){
$(".one").hide();
$(".two").hide();
$(".three").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<img id="header1" src="/1.svg" alt="Open Menu" class="menu">
<img id="header2" src="/2.svg" alt="Open Menu" class="menu">
<img id="header3" src="/3.svg" alt="Open Menu" class="menu">
</div>
<div class="textniz">
<textarea class="one" id="myInput" name="myInput" readonly>
Line one
Line two
Line three</textarea>
</div>
<div class="textniz">
<textarea class="two" id="myInput" name="myInput" readonly>
Line four
Line five
Line six</textarea>
</div>
<div class="textniz">
<textarea class="three" id="myInput" name="myInput" readonly>
Line seven
Line eight
Line nine</textarea>
</div>
So as per your question, if it is just a quick switch and you want only one view to be active, it's better and easy to use jQuery because it is very direct, #Alvaro has already shared the quick code snippet. It's very easy to play around with jQuery.
Disclaimer: It makes your life so easy that if in case you try to learn a full seasoned framework, then there will be a long workaround. But get started with jQuery. You'll find it very interactive.
Happy Coding :)
I have searched around but no question seems to address this concern.
I have the following markup:
<li>
<div class="box-brochure-slide" onclick="window.location='product.php?item=TEC%2FSR-888HP-SS';">
<div class="boxInner-item">
<div class="triangle-topright-cover"></div>
<div class="triangle-topright-red"></div>
<div class="label-limitedsets">LIMITED SETS</div>
<img class="lazy" alt="" src="img/pixel.png" data-original="user/picture/TEC-SR-888HP-SS.jpg">
<div class="ui content">
<div class="productbrand">TECNO</div>
<div class="productname">TECNO SR-888HP-SS 2 X HI POWER BURNERS, 1 X MED BURNER, <br>BATTERY AUTO IGNITION</div>
<div class="price">
<div class="specialprice"><div class="specialprice-name">Crazy Price</div><span class="pricecurrency">$</span>488<span class="pricecents">00</span></div>
<div class="usualprice">U.P. $588.00</div>
</div>
</div>
</div>
</div>
</li>
However, when I try to right click on the <li> on the web page, there was not an option for me to open in a new tab. What is wrong with the markup here?
Edit: I have read in some sources that <a> would solve the problem, but I do not wish to wrap the entire <li> in an anchor tag. Is there a way to do this?
Note: I do not wish to right click to OPEN in a new tab. I just wish to have an option available to open in a new tab when I right click on it.
Although you don't want to use the element but if you replace the topmost div with "a" leaving the class id and css intact, you will get the same look and feel with the option of "open in new tab" as well.
For that purpose you need to use <a> tag and pass the href property to the tag
To Open in new tab on right click first we need to check the mouse click event and then open the link.
<div id="open">open</div>
$('#open').mousedown(function(event) {
if(event.which == 3) { //Right click event
window.open('http://google.com','_newtab'); // To open in new tab
} else{
alert('Please Right click to open');
}});
Working Code Pen
I thought of doing a fiddle for this, but since it's already online, and since I don't know fiddle that well, I figured it'd take me a long time to get it right on one. So...
The code's all there. And you can all see what the problem is...
The problem: I need it to remain that when one clicks the OIL, MILITARY, MISC tabs, the first rectangle border is red (as it is when you first scroll through them now). When one clicks the second, third, etc. rectangle on the oil tab, the border needs to be removed from the one that it currently is on and be applied to the one that was just clicked. Again, keeping the first rectangle on the MILITARY and MISC tabs as selected with a red border.
The code works, almost exactly as needed, but after spending a few hours trying to google and after rewriting the code several times (you can see some of my attempts commented out in the code), I cannot figure out what is wrong.
When you load the page, the TEST rectangle is selected. When you TEST 2 (or any other one) the red border is removed from TEST and applied to TEST 2 (or whichever one is clicked). When clicking any other, the red border remains and is added to the new one...but when TEST is reclicked (and gains the border again), and is then clicked out of (say, you click TEST 2 again), the border is removed once more...but it only works on TEST.
My question is thusly: what am I doing wrong? Why does it appear as though
var active_tab_selector2 = $('a[href='+active_div_data+']');
$(active_tab_selector2).parent('div').removeClass('selected');
is cached and not being re-ran on every click?
EDIT: (More code):
$("#lewy section div a").click(function(e) {
e.preventDefault();
var target_tab_selector2 = $(this).attr('href');
var active_div = $("#lewy div div.active a");
var active_div_data = $("#lewy div div.active a").data('default');
var active_tab_selector2 = $('a[href='+active_div_data+']');
$(active_tab_selector2).parent('div').removeClass('selected');
$(active_div).attr('data-default',target_tab_selector2);
var target = $('a[href='+target_tab_selector2+']');
$(target).parent('div').addClass('selected');
$.ajax({
type : "POST",
cache : false,
url : "mapStructureDisplay.php?s",
data : {'X': target_tab_selector2},
success: function(data) {
$("#secondary").html(data);
}
});
});
});
<div id="lewy" style="background-image:url('images/308.png');">
<div id="outer">
<div id="inner" class="active">OIL</div>
<div id="inner">MILITARY</div>
<div id="inner">MISC</div>
</div>
<section id="Div1" class="active">
<div id="structure" class="selected"><a class="button2" href="#str1">TEST</a></div>
<div id="structure"><a class="button2" href="#str2">TEST 2</a></div>
<div id="structure"><a class="button2" href="#str3">TEST 3</a></div>
<div id="structure"><a class="button2" href="#str4">TEST 4</a></div>
<div id="structure"><a class="button2" href="#str5">TEST 5</a></div>
<div id="structure"><a class="button2" href="#str6">TEST 6</a></div>
</section>
<section id="Div2" class="hide">
<div id="structure" class="selected"><a class="button2" href="#str7">TEST DIV 2</a></div>
</section>
<section id="Div3" class="hide">
<div id="structure" class="selected"><a class="button2" href="#str9">TEST DIV 3</a></div>
</section>
</div>
<div id="srodek">
</div>
<div id="prawy" style="background-image:url('images/246.png');">
<div id="secondary">TEST</div>
</div>
</div>
Try changing:
$(active_div).attr('data-default',target_tab_selector2);
to:
$(active_div).data('default',target_tab_selector2);
jQuery caches data-XXX attribute the first time you access them with .data(), and doesn't fetch them again. So modifying them with .attr() later won't be seen when you use .data('default') to read the attribute. You should be consistent, either use .attr for all setting and reading, or .data, but don't mix them.
I am using a Wordpress Theme (Incipiens) that has a show/hide Javascript to show a map on the contact page http://demo.themedev.me/wordpress_themes/incipiens/contact-us/
I want to use this function on a page multiple times to show/hide galleries.
<div class="map">
<div class="map_top">
<hr class="toolbox toolbox1">
</div>
<hr class="vertical_sep0">
<a class="show_map" href="javascript:void(0)"></a>
<div class="map_container"><div class="thismap"><iframe>........</iframe></div>
</div>
I have this working but the call to the js opens all divs. I therefore put a unique div id round each gallery and slightly changed the javscript...
<div class="map">
<div class="map_top">
<hr class="toolbox toolbox1">
</div>
<hr class="vertical_sep0">
<div id="silestone">
<div class="map_container">
[show_gallery width="124" height="124" galleryid="527"][/show_gallery]
</div>
</div>
</div>
It works but very oddly, sometimes the right one opens, sometimes the wrong one...not sure what i'm doing wrong, should I just have one javascript call that contains the ID's to all divs? If so how do I do this?
Since you have not shown the actual script you use for toggling, I assume you mean something like this (taken from the page) -
function (){
$(this).toggleClass('hide_map');
$('.map_container').slideToggle(400);
}
I would change that to -
function unhide(id){
$(this).toggleClass('hide_map');
$('#' + id).find('.map_container').slideToggle(400);
}
Does that work?
In IE7 and IE8 when I move hovered link to new place it is still displayed as hovered. In Firefox and Chrome link is displayed as unhovered. In the example below if you click on the link it will be moved to the second row but will still be red. Is it possible to fix such behavior?
<style>
a { color:blue; }
a:hover { color:red; }
</style>
<div id="div1">
First Row
<a id="a1" href="javascript:void(0);" onclick="document.getElementById('div2').appendChild(this);">Click It</a>
</div>
<div id="div2">
Second Row
</div>
Live example
I don't like it, but cloning the node and removing the original seems to work:
<a id="a1" href="javascript:void(0);" onclick="document.getElementById('div2').appendChild(this.cloneNode(true)); this.parentNode.removeChild(this);">Click It</a>
Live example
There, instead of actually moving the node, we do a deep clone of it (cloneNode(true)) and append that instead. Then we remove the original (this.parentNode.removeChild(this)). This seems to avoid keeping the state information IE is keeping.