We Keep Coding

Is there an alternative to indexOf for jQuery?

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');
});

Element with hidden css not changing with javascript .show()

I have a dropdown list that I am hiding on initialization since it's not needed unless the client actually selections a specific radiobuttonlist object. I'm presently setting it to false through
dlInterval.Attributes.CssStyle[HtmlTextWriterStyle.Visibility] = "hidden";
However, attempting to change this through javascript on selection, is failing, at present, I have my code set up to execute as such.
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#<%=rblVectorChoices.ClientID%>").click(function() {
var intVectorSelectedIndex = $('#<%=rblVectorChoices.ClientID %> input[type=radio]:checked').val();
$("#<%=dlInterval.ClientID %>").style.visibility="visible";
if (intVectorSelectedIndex == 1) {
$("#<%=dlInterval.ClientID%>").show();
} else {
$("#<%=dlInterval.ClientID%>").hide();
}
});
});
</script>
As you can see I'm currently attempting to change the visibility from hidden, back to visible, yet I am receiving an error in the browser console 'TypeError: Cannot set property 'visibility' of undefined'
This doesn't make much sense to me, as the field should be hidden, and not just null. What is causing this to happen, and what is a good solution for such a thing?

The HTML attribute is not called visibility.
In CSS the corresponding attribute for .show() / .hide() is display.

the code you were looking for is :
dlInterval.Attributes.CssStyle["display"] = "none";
or you can just change the javascript to look like, I personally would think that you should hide the element in javascript if your going to show it in javascript . Instead of setting the display:none; in .Net code that is going to disappear when the page is rendered
just re-write your code like this:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
// hide element initially
$("#<%=dlInterval.ClientID%>").hide();
$("#<%=rblVectorChoices.ClientID%>").click(function() {
// much easier way to check if check box is checked
if ( $("#<%=rblVectorChoices.ClientID input[type=radio]:checked%>").is(":checked)) {
$("#<%=dlInterval.ClientID%>").show();
} else {
$("#<%=dlInterval.ClientID%>").hide();
}
});
});
</script>
also , I strongly , strongly reccomend using classes to select your html elements with javascript or jquery , .Net mangles the id's and you have to write out this weird syntax to get the proper id, uses classes prevents all that
NOTE: if you're going to use this second example then you never need to mess with
dlInterval.Attributes.CssStyle["display"] = "none";

Can you use prop and compare if it's true or false? Also, you cant call $("#<%=dlInterval.ClientID %>").style.visibility="visible"; you have to call it this way:
For those of you reminiscing on the missing .NET inline ID's here's my modified code:
$(document).ready(function () {
$("#<%=rblVectorChoices.ClientID%>").click(function () {
var intVectorSelectedIndex = $('#<%=rblVectorChoices.ClientID%>').prop('checked');
$("#<%=dlInterval.ClientID%>").css('visibility', 'visible');
if (intVectorSelectedIndex == true) {
$("#<%=dlInterval.ClientID%>").show();
} else {
$("#<%=dlInterval.ClientID%>").hide();
}
});

Ajax content loading issues

Following is my code which I am using to load contents dynamically. The issues which I am facing are the following:
Following code has now disabled CTRL+CLICK shortcode to open a url in a new tab. The new CSS and JS are not applying if they are not already exist in the previous page. Kindly let me know how can I resolve above mentioned issues?
$(document.body).on("click", "nav a", function () {
topen = $(this).attr("href");
window.location.hash = $(this).attr("href");
$("#main_wrapper").load( topen +" #main_wrapper > *");
return false;
});

What you want to do is modify the handler to use prevent default instead of returning false. Then you can check how the user activated the button and can act accordingly.
$(document).ready(function() {
$('a').on('click', function(e) {
if(e.ctrlKey || e.button === 1) {
return;
}
e.preventDefault();
// Do the stuff when the anchor is just clicked.
});
});
You can examine the Fiddle
In terms of the JS and CSS not applying we would need a working example of this to be of more assistance.

JQuery fades not working in IE9

I'm new to JQuery and can't for the life of me figure out why this isn't behaving properly. As the content in my "content" div changes, I want it to fade in and out. I created a generic "load" function to do this:
function loadPage(page, callback) {
if(current_doc != page) {
current_doc = page;
$("#content").fadeOut(400, function() {
$("#content").load(current_doc, function() {
$("#content").hide().fadeIn(400, function() {
if(typeof(callback) == 'function'){ callback(); }
});
});
});
}
}
Is there some sort of glaring mistake that I'm missing?
Thanks.
P.S. - This code works fine in Firefox.

One thing to check in IE, in Internet Options > Advanced, under Multimedia should be a checkbox that says "play animations in webpages". Ensure that is checked.

While I'm not entirely sure why, placing the content div inside another div and fading that instead seems to have done the trick. I would think that that would have been giving me issues only if "content" itself were being deleted, but that isn't the case from my code. Oh well.

Filtering Content using jQuery

I'm attempting to create a filterable photo gallery using jQuery and multiple classes. I have some code set up, but it doesn't seem to work. Can anybody give me any insight on how to fix this function?
$(document).ready(function(){
$('#sorter a').click(function(e){
var sortName = $(this).text().toLowerCase().replace(' ','-');
if(sortName === 'all-images'){
$('#photorow1 li').show().removeClass('hidden');
}
else {
$('#photorow1 li').filter(sortName).show().removeClass('hidden')
.end().not(sortName).hide().addClass('hidden');
}
e.preventDefault();
});
});
Any help would be greatly appreciated!!
*updated code

The problem is you're doing a return false before any work is being done, move that to the end of your click handler :)
Overall you can clean it up a bit, something like this should do:
$(function(){
$('#sorter a').click(function(e){
var sortName = $(this).text().toLowerCase().replace(' ','-');
if(sortName === 'all-images') {
$('#photorow1 li').show();
} else {
$('#photorow1 li').filter(filterVal).show().removeClass('hidden')
.end().not(filterVal).hide().addClass('hidden');
}
e.preventDefault();
});
});
I recommend that you just add display: none; to the .hidden CSS rules (if you need that class for something else), otherwise just .hide()/.show() works.

For starters, return false; should be at the end of the function, because any code that comes after it in that function will be ignored.
Plus, you don't need that and e.preventDefault(); in the same function, they overlap a bit. You can read more about their similarities here. Pick one.