Hello and good day to everyone.
I wanna ask if there is a way for me to highlight every area of a map.
This is the scenario... There's a US map and there's a reset button. All the states' names are covered, meaning that every area is already highlighted. Clicking on one of them 'dehighlights' them, revealing their name.
Those things are already functioning properly. However, I am having trouble with the reset button.
Basically, I want the reset button to cover every names again, excluding the still covered ones (because, well, they're not clicked/revealed yet).
Google isn't being helpful for me on this issue, and the Maphilight documentation on the site...isn't really well-documented.
I hope someone can help me on this one. Thanks~
Never mind~ I figured it out! :D
I inserted this code inside [$.fn.maphilight = function(opts)]'s [return this.each(function()]
reset_hilight = function() {
var mapCount = document.getElementsByTagName("area").length;
var i = 1;
while (i <= mapCount) {
var AllAreas = $('#hlight' + i).data('maphilight') || {};
AllAreas.alwaysOn = true;
$('#hlight' + i).data('maphilight', AllAreas).trigger('alwaysOn.maphilight');
i++;
}
}
So now, whenever I click the reset button, all the areas will be highlited once again. :D
Related
This relates to an online clothing store. We have variable products set up with colour and size attributes, for example a product might have 2 variations; Green/Any Size and Black/Any Size.
There is an image of the product in the corresponding colour for each variation, but at the moment the image doesn't switch unless a colour AND size is selected (I'm aware this is how Woo works out of the box). We would like to make it so that the image switches when JUST a colour is selected.
I have come accross this code on SO and another site. It allows a product variation image to change when only the one main attribute is selected (e.g. color), rather than having to select all variation attributes (e.g color and size) in order for the image to change.
This code was written to work with a plugin, however the person who wrote it mentioned changing line 6 in order to use without plugins.
Can someone help me to adjust this code to my ecommerce store? I know that this can be easly done by someone who understand JS, but since I am not a developer it's really hard for me. I hope someone could help!
var image_to_show = '';
var variations = JSON.parse($(".variations_form").attr("data-product_variations"));
if(variations) {
var first_attr = Object.keys(variations[0].attributes)[0];
// when swatch button is clicked
$("ul[data-attribute_name='"+first_attr+"'] li").click(function() {
var choice = $(this).attr("data-value");
var found = false;
// loop variations JSON
for(const i in variations) {
if(found) continue;
if(variations.hasOwnProperty(i)) {
// if first attribute has the same value as has been selected
if (choice === variations[i].attributes[Object.keys(variations[0].attributes)[0]]) {
// change featured image
image_to_show = variations[i].image_src;
found = true;
}
}
}
});
// after woo additional images has changed the image, change it again
jQuery(".variations_form").on("wc_additional_variation_images_frontend_image_swap_done_callback", function() {
if(image_to_show.length) {
$(".attachment-shop_single").attr("src", image_to_show).removeAttr("srcset");
}
});
}
I have one more input box - ibox2, on the same page.
Problem - After doing anything on ibox1 and leaving value of length > 5 there, if I start typing in ibox2 the focus jumps back to ibox1.
It is that if loop with ibox1.focus() that is doing it. How could I remove focus entirely from ibox1 upon clicking outside and nullify the if loop and its statements.
I tried blurbut it did not work.
var ibox1 = $("#inputbox1");
$(document).on("change", ibox1,function(e) {
var valu = ibox1.val();
if(valu.length > 5){
#do something
ibox1.focus(); #used this as input box lost focus with each charater typed.
}
});
var ibox2 = $("#inputbox2"); #This is for google places autocomplete.
PS - Please do not tag it as a duplicate one, I have tried almost everything here, and only then I posted this. I shall remove it upon getting solution.
Respected mods, I followed a nice accepted answer and made a mistake about understanding $('document'), but I now got it cleared. That's the reason I am not deleting this question, even though I said I would, as it might help others. You guys, if
you feel, could delete this. Thanks.
The focus is jumping back to ibox1 because you are instructing your document to do so each time the onChange event is fired.
e.g.: $(document).on("change", ibox1, funct... where you are calling for ibox1.focus(); `.
Possible solution: bind your change event to the element of interest itself and avoid binding an event of such local significance to the whole document in the future.
Use a simple method to attach an event to inputs. Check below code it may help you.
(function(){
var in1 = jQuery('#input1'); // first input
var in2 = jQuery('#input2'); // second input
// On change of first input
in1.change(function(){
if(this.val().length > 5){
// do something
}
});
// On change of second input
in2.change(function(){
if(this.val().length > 5){
// do something
}
});
})();
Basically I am going with an application style site for mobile view and they wanted a button on the bottom to flip through the pages in order while the nav at the top allows you to flip through them in any order. I want to change the bottom button to link to the following page depending on which one it is on. so I want the button to change links when specific buttons are focused. I tried many different things and can not seem to make it work. Please do your magic.
if(document.getElementById("abt").hasFocus()) {
document.getElementById("golink").href = "#work";
}
I don't believe focus is what you're looking for as focus can be fleeting to track outside of form objects.
I've mocked up a possible solution to help aid you to what you're looking for.
Here is a link to the JSFiddle:
EDIT - Updated Fiddle: https://jsfiddle.net/t0uwff4t/
Javascript in the fiddle:
// Array of sections.
var sections = [
'#first',
'#second',
'#third',
'#fourth',
'#fifth'
]
// Get the last value in the array.
var lastArrayValue = sections[sections.length - 1];
// Button pointer
var btn = document.querySelector('#button');
// On click of the button, do work.
btn.onclick = function() {
// Get the current href.
var href = btn.getAttribute('href');
// Ternary operator setting the index to zero if the user is on the last index of array.
// Else set the index to the next array value.
var index = (href === lastArrayValue) ? 0 : sections.indexOf(href) + 1;
// Set the href attribute.
btn.setAttribute('href', sections[index]);
}
NOTE: While this example works, this is only a mockup - meaning that it doesn't account for rapid button clicking by the user to 'flip pages'.
Good luck and I hope this helps you to your goal.
advise appreciated:
I have a drop-down list with "select..." at the top and then a list of links which, when clicked, each opens a different URL in a new window.
After user selection ("click") I however need that the drop-down always keeps showing "select..." and does NOT show what the user previously selected/clicked on.
I thought that this would do the job, but does not, it still shows whatever the user selected/clicked on in that drop-down, rather than always showing "select...".
Any suggestion how to fix greatly appreciated ! THANKS
var loadUrl= function(ctrl) {
var booking = jQuery(ctrl).children("option:selected");
jQuery(ctrl).prop('selectedIndex',0);
var bookurl = jQuery(booking).attr("data-url");
var win=window.open(bookurl, '_blank');
win.focus();;
}
try this:
jQuery("#ctrl").val(jQuery("#ctrloption:first").val());
or
jQuery("#ctrl")[0].selectedIndex = 0;
I would like to disable a button
<BUTTON name="Next Page" onClick="Next()" VALUE="NextPage">NextPage</button>
based on a javascript variable
var opening = 0;
function Next()
{
var currentdoc = viewONE.getDocIndex();
if (currentdoc == 5)
{
**[DISABLE BUTTON]**
}
what is the javascript code please?
Background information:
Simply browsing through documents using a next and previous buttons. on the first document i want the "previous" button greyed out and on the the last document i want the "next" button greyed out.
Appologise for any incorect terms, newb and never asked this type of question before.
you are welcome to correct my term in a constructive way... need to learn.
Sam's solution is good and will disable the action of the button but won't disable it functionally.
You can disable the input button by changing changing the "disabled" attribute, but you really need to give your button a valid identifier first (I wouldn't even want to let jQuery select it by name due to the space).
jQuery would look something like this:
$('#yourbuttonid').attr('disabled','disabled');
Regular Javascript would be the following:
document.getElementById('yourbuttonid').disabled = true;
Here's an example on JSBin.
All you need to do is:
var opening = 0;
function Next()
{
var currentdoc = viewONE.getDocIndex();
if (currentdoc == 5)
{
return; //This will end the function immediately.
}
}
In terms of greying out buttons, can you not add / remove classes to show different versions of the buttons? We would need more to see your html, and what you have tried so far to help further.
Tutorial on return