I am very new to JS. How do I add onclick event to magento Advanced options so when selected first option it should automatically scroll (jump) to next option without having to manually scroll for the next option. Here is an example: Link to Example
Since you tagged 'jQuery' in your post I'm going to assume you want to use that.
Below is the code that would work on the example you gave, but it (especially the selectors) will be different for other templates.
// Click event handler
$('.optionblock input').click(function(){
// Check if there is a next option block
var $next = $(this).parents('.optionblock').next('.optionblock');
if($next.length) {
// Set scroll position to the next option block
$(window).scrollTop($next.offset().top);
}
});
This is just to get the idea. I didn't consider crossbrowser support and animated scroll effects.
Update: here you have a working example with the animated scroll effect: http://jsfiddle.net/66AmA/
Update 2: For your specific HTML-structure the code would be like this: http://jsfiddle.net/FFu6n/
Try to define "onChange" event to focus next input (or use other condition than onchange):
document.getElementById("myForm").elements[next].focus();
Related
Right now I am using the jQuery plugin Chosen (https://harvesthq.github.io/chosen/)
The multiselect option is exactly what I want to achieve, but I'd like if the selected elements appeared outside of the textbox instead of inline the others. Any quick solutions? Or should I be looking at a custom coded attempt?
A bit brute but might be effective. Add your own chosen().change() event handler (as per their docs) to the texbox and simply move the <li> elements from the textbox to wherever you like. So something along the lines of:
$("#form_field").chosen().change(
// detach from source and append to destination
);
I have a scenario where a dropdown launcher menu should appear on every row in a list page. I have tweaked the code here.
I want the popover (open) behavior be restricted for the click on the particular launcher-icon, though close action is perfect here.
the problem is when any icon is clicked, it shows all menus. My page has rows inflated from a database and every row has three such launcher icons.
I guess this block of code needs some tweaks:
// Click event handler to toggle dropdown
$(".button").click(function(event){
event.stopPropagation();
// How can I call toggle for the specific div element?
$(".app-launcher").toggle();
});
How can it be done?
You need to traverse the DOM to find the .app-launcher instance which is related to the clicked .button element, to do that use closest() and find(), like this:
$(".button").click(function(event){
event.stopPropagation();
$(this).closest('.launcher').find(".app-launcher").toggle();
});
Updated CodePen
I would also suggest looking in to using a single instance of .app-launcher and moving it around the DOM as required to DRY up your HTML code.
Here is my issue :
I have a custom button with a code onClick. This code modify the selection's parent node, and I would like that my selection stays the same after my code, but tinyMCE disable my selection and give me a caret instead.
I tried getRng() and setRng from tinyMCE API but without success, the results are pretty odd. Sometimes it works and sometimes it deactivate my selection and give me a caret instead. Plus, sometimes it works only 2 times and then my button does not respond.
Here is my code which does not work:
onclick : function() {
range_selection = tinymce.activeEditor.selection.getRng();
//Here is my own code which modify my parent node
tinymce.activeEditor.selection.setRng(range_selection);
}
Problem here is that this range is probably not applicable anymore because of a changed DOm structure. I would use a bookmark to overcome this issue:
var bookmark = ed.selection.getBookmark();
// do what you like to do here
ed.selection.`moveToBookmark`(bookmark);
I'm having difficulty changing the value of select box in Zurb's foundation. I'm using the custom forms which just hides the actual select box and uses an unordered list as the select box.
My problem is that the usual method of changing the value of select box doesn't work:
$('#selectboxID').val('something')
The code above assumes that the value of each of the options in the select box is the same with the text:
<option value="1">1</option>
I also tried:
$($('.dropdown ul li')[1]).addClass('current')
$($('.dropdown ul li')[0]).removeClass('current') //remove current class from the other one
But it doesn't work either.
There's also alternative use case when you're binding on change event yourself, you might not want to trigger it. Code to just force a refresh on select:
Foundation.libs.forms.refresh_custom_select(#jQueryElement, true)
where #jQueryElement is a original hidden select.
You have to trigger "change" event after changing selected index.
Example:
// Change selected option
$('#selectboxID').val('something');
// Or use selectedIndex: $("#selectboxID")[0].selectedIndex = 0;
// Fire change event
$('#selectboxID').trigger('change');
Hope this helps
There have been some modifications to the way that the change event is handled recently in the Foundation code.
You can still achieve what you want using the trigger() method, but you have to add a 'force refresh' flag:
$('#selectboxID').trigger('change', true);
If you are using Foundation 3:
Updated to the latest Foundation 3 release.
Setting selectedIndex, using JQuery's val() or anything which triggers a change event is working out of the box.
If you are using Foundation 4:
This seems to be a regression. As a - hopefully temporary - workaround you can force to update the custom select by using the refresh_custom_selection method, e.g.:
Foundation.libs.forms.refresh_custom_selection($('select'))
Note: It is refresh_custom_selection, not refresh_custom_select!
It is not necessary to use the latter (or trigger('change', true)) because they both completely rebuild the custom select, i.e. they re-copy your select options which involves lots of DOM manipulation and it can slow things down a lot. (Depending on the size of your select options and your other code)
On the other hand refresh_custom_selection just updates the displayed value which is a much more lightweight operation.
PS: Instead of refresh_custom_selection you could also use
$('a.current', $select.next()).text($('option:selected', $select).text());
But that code makes assumptions on the generated HTML, so it is better to stick to the provide utility methods
I have some weird behavior with jQuery paginate plug-in (jPaginate). I need to have top and bottom pagination and I want to sync them - whenever one is clicked, the second one should be properly changed as well.
I have two divs with number_pagination class and they are initialized the same way:
$(".number_pagination").paginate(options);
Now, here where it gets weird. Whenever I click on the top div, everything works as supposed to, but if I click on the bottom one, it changes the bottom one and does the pagination, but the top one stays the same. I cannot figure out why that could be happening.
Here's the onChange function that is supposed to change both pagination divs. Note the jQuery.fn.draw function that is a part of jPaginate. This is where it applies classes and style.
var opts=jQuery.extend({},jQuery.fn.paginate.defaults,options);
var o=jQuery.meta?jQuery.extend({},opts,jQuery(this).data()):opts;
jQuery(".number_pagination").each(function(){
var obj=jQuery(this);
jQuery.fn.draw(o,obj,page);
});
Found another solution that works perfectly.
It may even work for other pagination plug-ins. It checks the class that has the currently selected page number and checks if the content matches the selected NOW page, and if it doesn't, it looks for siblings that have the correctly selected page and triggers the click event.
jQuery(".jPag-current").each(function(){
if(jQuery(this).html() != page){
jQuery(this).parent().siblings().children().each(function(){
if(jQuery(this).html() == page){
jQuery(this).trigger("click");
}
});
}
});
You should probably look at using the onChange event to redraw the other pager that didn't incur the change