I'm in the process of refining a translation script, and the script itself actually works fine (on most computers). We've found that the script does not work correctly on computers where the native language is not English.
The script is as follows:
$('.translation-links a').click(function(e) {
e.preventDefault();
var lang = $(this).data('lang');
$('#google_translate_element select option').each(function(){
if($(this).text().indexOf(lang) != -1) {
$(this).parent().val($(this).val());
var container = document.getElementById('google_translate_element');
var select = container.getElementsByTagName('select')[0];
triggerHtmlEvent(select, 'change');
}
});
});
The .translation-links a would be something like:
<li><span class="south-africa"></span>Afrikaans</li>
The line with the problem is
if($(this).text().indexOf(lang) != -1) {
We've narrowed it to that line through troubleshooting, but we're wondering if there is another way to write it to possibly prevent the issue. Maybe an alternative to indexOf? We're not sure exactly why the native language matters, so if somebody has some insight into that as well we'd appreciate it!
It seems that you should be looking for a match between the clicked elements' data-lang string and an option's value, both of which should be immune to translation.
If so, then it should be as simple as :
$('.translation-links a').on('click', function(e) {
e.preventDefault();
$('#google_translate_element select').eq(0).val($(this).data('lang')).trigger('change');
});
Related
I know this question has been asked and answered many times, but none of the solutions work for this example, even though I know they should. Perhaps other pairs of eyes will help resolve this.
I have placed alerts before and after the code that sets the disabled property, which is indeed set correctly, but the element remains disabled.
I have excerpted the code necessary to reproduce this issue: jsfiddle
Here's some code just to satisfy the SO rule.
$(function () {
var dbVendor = $("#database-vendor");
$("#uses-db").on("change", function (event) {
event.preventDefault();
dbVendor.prop("disabled", ($(this).val() == "Yes" ? false : true));
});
});
Instead of messing with prop("disabled"), do
$dbVendor.selectmenu("enable");
http://jsfiddle.net/r3977gy7/30/
Documentation
http://api.jquerymobile.com/selectmenu/#method-enable
See this solution, please
$(function () {
var dbVendor = $("#database-vendor");
$("#uses-db").on("change", function (event) {
event.preventDefault();
dbVendor.selectmenu($(this).val() === 'Yes' ? 'enable' : 'disable');
});
});
dbVendor.selectmenu(($(this).val() == "Yes" ? "enable" : "disable"))
You are using jquery mobile wich adds "ui-disabled" class to the element and his parent
$(function () {
$("#uses-db").on("change", function (event) {
event.preventDefault();
if($(this).val() == "Yes"){
$("#database-vendor").parent().removeClass("ui-disabled");
$("#database-vendor").removeClass("ui-disabled");
$("#database-vendor").removeAttr("disabled");//edited
}
else{
$("#database-vendor").parent().addClass("ui-disabled");
$("#database-vendor").addClass("ui-disabled")
$("#database-vendor").addAttr("disabled");//edited
}
});
});
actually working code jsffidle
#database-vendor has been wrapped, by jQuery Mobile, with a div and a pile of JavaScript. Changing the disabled property of the select isn't causing jQuery Mobile to respond and change its div.
Removing jQuery Mobile will make the code work.
If you want it to work with jQuery Mobile, then you'll need to look at the jQuery Mobile API to figure out how to enable its pseudo-select elements.
I have a fiddle for you: http://jsfiddle.net/vSs4f/
I want to show the div.sub-menu with a simple click on a.haschildren. If the body loads the div.sub-menu should be closed. If I click a second time on a.haschildren the div.sub-menu should be close.
I have sampled so many things but I think the problems are the lot of DIV's. One idea is in the fiddle.
$(function() {
$("a.haschildren").click(function(e) {
e.preventDefault();
$('div.sub-menu:visible').hide();
$(this).next('div.sub-menu').show();
});
});
I really hope you can help me, thanks!
Try this:-
Fiddle
$(function () {
$("a.haschildren").click(function (e) {
e.preventDefault();
var subMenu = $(this).closest('div.haschildren').nextUntil('.sub-menu').next().toggle();
$('div.sub-menu:visible').not(subMenu).hide();
});
});
Using .nextUntil to reach a point till the .sub-menu, incase any other siblings come in between this will still work.
Personally there are MANY things I would have changed about the structure of your DOM. I am a strong believer that you should base your javascript structure around a well structured DOM, so the traversal is very easy and intuitive. That being said, I'm going to be slightly daring by submitting my fiddle, in the hope that if nothing else, you can look at it and gain a little insight on how to take advantage of a few DOM quirks to make your javascript a bit more intuitive and elegant.
http://jsfiddle.net/vSs4f/6/
$(function() {
$('#menu > div.item')
.find('a').click(function() {
var submenu_index = $(this).parents('.item:first').find('.sub-menu').toggle().index('.sub-menu');
// This chunk can disappear if you're not interested in hiding all of the other sub-menus
$('.sub-menu').filter(function(index) {
if(index != submenu_index)
return true;
}).hide();
}).end()
.find('div:first').after('<div class="trenner"></div>');
});
Try
$(function() {
$("a.haschildren").click(function(e) {
e.preventDefault();
var item = $(this).closest('div.haschildren').next().next('div.sub-menu').toggle();
$('div.sub-menu:visible').not(item).hide();
});
});
Demo: Fiddle
just use toggle()
$('div.sub-menu').toggle();
Ironically enough, the method you're looking for is .toggle();
http://api.jquery.com/toggle/
try it:
$(function() {
$("div.haschildren").click(function() {
if($(this).next().next('div.sub-menu').is(":hidden")){
$('div.sub-menu:visible').hide();
$(this).next().next('div.sub-menu').show();
}else{
$(this).next().next('div.sub-menu').hide();
}
return false;
});
});
So long story short im working on a web app and using AJAX within it.
I'm trying to disable the default actions of links when clicked, attach a hash value to the link and then remove the "#" from the url.
the problem im having is that, although the hash values are being attached accordingly, the substring method isnt extracting the "#", it extracts the letter after it.....
here is my code. PS, i left my comments inthere so you get where im trying to go with this
so i dont know....my logic or setup may be wrong....
$(document).ready(function(){
//app vars
var mainHash = "index";
var menuBtn = $('.leftButton');
//~~~~~~load the index page at first go.
loadPage();
//~~~~~~~~~~~~~~~~~~~~~~~~~~~menu show/hide
menuBtn.click( function(){
$('#menu').toggleClass();
});
//Menu items on click , disable link default actions.
$('#menu a').click( hijackLinks );
//~~~~~~~~~~~~~~~~~~~~~~~~~~~functions for mobile index load AND hijacking app links to AJAX links.
function loadPage(url){
if( url == undefined){
$('#contentHere').load('index.html #content', hijackLinks);
window.location.hash = mainHash;
} else {
$('#contentHere').load(url + '#content', hijackLinks );
}
}
function hijackLinks(e){
var url = e.target.href;
e.preventDefault();
loadPage(e.target.href);
window.location.hash = $(this).attr("href").substring(1);
}
});
what im wanting is to remove the "#" from the url. What am i doing wrong, what am i not seeing/understanding?
ive tried substring/substr etc and both do the same thing in that no matter what numbers i choose to insert into the substrings params, they remove EVERYTHING BUT the "#" lol....
Thanks in advanced.
Well, you don't really change the link itself, you only change the window.location.hash, and the hash always has a "#" at the beginning.
What you need to do in order to change the entire url (and remove the '#') is to manipulate the browser history.
Although you should know it works only in newer browsers (the exact browser versions are in the link), so if you target your website to older too browsers you might need to think about having a fallback using the hash. If you decide to have such a fallback, I suggest searching for a plugin which does it instead of making it all yourself.
I'm trying to make an infinitely rotating imagereel with jQuery. This imagereel shifts between images with an interval of 5000 milliseconds, then fading out the 'old' image and fading in the 'new' image. The image to be displayed has a style-attribute for "display:inline".
The code can be found below:
function switchImage(){
var selector = $('#fotoreel img[style="display: inline; "]');
var nextOne = $(selector).next();
if($(nextOne).length == 0)
{
var nextOne = $('#fotoreel img:first');
}
$(selector).fadeOut('normal',function(){
$(nextOne).fadeIn('normal');
});
var t = setTimeout("switchImage()",5000);
}
$(document).ready(function(){
setTimeout("switchImage()",5000);
});
The problem is that it works fine in Chrome, but in Firefox and in Opera it only shifts image one time. In IE it's worse; there it doesn't work at all.
Do you guys know a better way of infinitely looping with javascript? Now I use setTimeout() to call the function again, but that doesn't seem to work.
EDIT
Okay, thank you everyone! Such fast responds, awesome!
The solution that I used was the one of adding a class and searching for that instead of for the style. The display:inline didn't appear to be a problem, as it worked out, but all the browsers appeared to implement the jQuery fadeIn() function differently.
I namely wanted to filter EXACTLY on "display: inline ;", because the spaces were added in Chrome, but not in IE, FF or Opera. So that means the style attribute wasn't accurately at all to filter with. Stupid me! :)
I made sure that a class was added to the image that is showed currently, and find the next one by filtering on that class. Now it works like a charm.
Thank you all for your answers, I love this place! :D
This is most likely because you are checking the style attribute, which is very inconsistent in browsers. I.E. doesn't work at all or works with various amounts of white-space. Just simplify your selector to use a class or ":visible"
It's probably going to work better if you explicitly mark images with a class:
function switchImage(){
var selector = $('#fotoreel img.current');
var nextOne = $(selector).length ? $(selector).next();
if($(nextOne).length == 0)
{
var nextOne = $('#fotoreel img:first');
}
$(selector).fadeOut('normal',function() {
$(selector).removeClass('current');
$(nextOne).addClass('current').fadeIn('normal');
});
setTimeout(switchImage, 5000);
}
$(document).ready(function(){
$('#fortoreel img:last-child').addClass('current');
setTimeout(switchImage,5000);
});
Note also that in my calls to "setTimeout()" I pass a direct reference to the function instead of a string version of the code to call it.
This wasn't working because the browsers you mentioned did not like the display: inline selector you used.
I got it working using the following:
function switchImage() {
var selector = $('#fotoreel img:visible');
var nextOne = selector.next();
if (nextOne.length == 0) {
var nextOne = $('#fotoreel img:first');
}
selector.fadeOut('normal', function () {
nextOne.fadeIn('normal');
});
var t = setTimeout(switchImage, 5000);
}
$(document).ready(function () {
setTimeout(switchImage, 5000);
});
Here's my code:
$('ul.container_12 li ul li div ul li.icon_export').click(function (e) {
e.preventDefault();
var anchorHrefValue2 = $('a', this).attr('href');
var mycat2 = $(this).parents('li.current').attr('class').split(' ')[0];
window.location = anchorHrefValue2+"?active="+mycat2;
});
When I click menu in Firefox seems like variable anchorHrefValue2 is undefined, if I add alert('somthing'); between lines 3 and 4 anchorHrefValue2 returns the right value and mycat2 returns the value menu! Which I don't know where the hell it comes from.
both variables has been set correctly but not together.
Both return the right value using alert(); but seems to be undefined calling in the line: window.location=...;.
If anyone has experienced anything close to this, please share. I've tested this in different browsers with JavaScript enabled.
By the way, I have another function like this for parent menus with the same goal which works just fine(only selectors are different with the first one):
$('ul.container_12 li ul li').click(function (e) {
e.preventDefault();
var anchorHrefValue = $('a', this).attr('href');
var mycat = $(this).parent().parent().attr('class').split(' ')[0];
window.location = anchorHrefValue+"?active="+mycat;
});
When I had a similar weird bug that went away when I added an alert box, it turned out that the same event (a div losing focus) was triggering two different javascripts. (I guess adding the alert gave one script a chance to complete before the other was triggered). So asynchronous behaviour as CamelCamelCamel said above, but you can get (unwanted) asynchronous behaviour even if there is no server-side code. Hope that helps someone out.
ul.container_12 li ul li div ul li.icon_export
This is a very long and very specific selector, if you change your HTML code only a little, this selector will break. Try simplifying it. To me it seems that .container_12 .icon_export would work as well.