First off, I've check this article and it doesn't quite seem to address the issue I'm having.
The code I'm using looks like this and for whatever reason, it refuses to run in Firefox and is giving an error of "Argument 1 of Window.getDefaultComputedStyle does not implement interface Element". This code is designed to switch tabs and can currently be found at testing.worldwidejamie.com.
Here is my full code:
$(document).ready(function(){
var content = undefined;
$('#tabs .tab-list li').each(function(){
$(this).on('click',function() {
// buttons
$(this).addClass('active').siblings().removeClass('active');
// content
if(content !== undefined){
content.hide();
}
var currentAttrValue = $("a", this).attr('href');
content = $(currentAttrValue);
content.show();
});
});
});
This works in the latest builds of Chrome, Safari, and IE but not in Firefox.
Thanks in advance for any help.
The code for the tabs works without fail. The problem is actually in your platform.js script. After checking the console output for the page via Firebug, the script breaks inside that script.
You can see here: http://jsfiddle.net/Au7EJ/3/ that your tabs.js script runs as you would expect. Only made one change to your code because there is no need to initialize 'content' with a value, so I changed it in the fiddle.
$(document).ready(function () {
var content; // just a declaration is enough here
$('#tabs .tab-list li').each(function () {
$(this).on('click', function () {
// buttons
$(this).addClass('active').siblings().removeClass('active');
// content
if (content !== undefined) {
content.hide();
}
var currentAttrValue = $("a", this).attr('href');
content = $(currentAttrValue);
content.show();
});
});
});
Hope this sheds some light on your problem!
Related
Ok, so I need some insight into working with History.js and jQuery.
I have it set up and working (just not quite as you'd expect).
What I have is as follows:
$(function() {
var History = window.History;
if ( !History.enabled ) {
return false;
}
// Capture all the links to push their url to the history stack and trigger the StateChange Event
$('.ajax-link').click(function(e) {
e.preventDefault();
var url = this.href; //Tells us which page to load
var id = $(this).data('passid'); //Pass ID -- the ID in which to save in our state object
e.preventDefault();
console.log('url: '+url+' id:'+id);
History.pushState({ 'passid' : id }, $(this).text(), url);
});
History.Adapter.bind(window, 'statechange', function() {
console.log('state changed');
var State = History.getState(),
id = State.data.editid; //the ID passed, if available
$.get(State.url,
{ id: State.data.passid },
function(response) {
$('#subContent').fadeOut(200, function(){
var newContent = $(response).find('#subContent').html();
$('#subContent').html(newContent);
var scripts = $('script');
scripts.each(function(i) {
jQuery.globalEval($(this).text());
});
$('#subContent').fadeIn(200);
});
});
});
}); //end dom ready
It works as you'd expect as far as changing the url, passing the ID, changing the content. My question is this:
If I press back/forward on my browser a couple times the subContent section will basically fadeIn/fadeOut multiple times.
Any insight is appreciated. Thanks
===================================================
Edit: The problem was in my calling all of my <script> and Eval them on each statechange. By adding a class="no-reload" to the history controlling script tag I was able to do:
var scripts = $('script').not('.no-reload');
This got rid of the problem and it now works as intended. Figure I will leave this here in case anyone else runs into the same issue as I did.
The problem was in my calling of all of my <script> and Eval them on each statechange. By adding a class="no-reload" to the history controlling script tag I was able to do:
var scripts = $('script').not('.no-reload');
This got rid of the problem and it now works as intended. Figure I will leave this here in case anyone else runs into the same issue as I did.
I'm trying to add class to an iframe (on same domain) element but check some of the same issues here and came up with the solution.
The iframe is next to body tag and the js was place before the body end tag.
<script>
$(document).ready(function() {
$('#my-iframe').contents().find('#mnucompany').addClass('is-active');
console.log('ok');
});
</script>
There is no error showing in console except the OK log but the class was not adding to #mnucompany.
What else could be wrong? Any big hints will be appreciated.
After our comments :
You should wait the iframe to be loaded !
$(document).ready(function() {
$('#my-iframe').on('load',function (){
$('#my-iframe').contents().find('#mnucompany').addClass('is-active');
console.log('ok');
});
});
$(document).ready(function() {
var myVar = setTimeout(function () {
var $mnuCompany = $('#my-iframe').contents().find('#mnucompany');
if($mnuCompany.length>0){
$('#my-iframe').contents().find('#mnucompany').addClass('is-active');
console.log('ok');
clearTimeout(myVar);
}
});
}, 1500);
This should be quite simple but I'll be darned if I can work it out. Just trying to get a div to display while my ajax is processing and then hide once done (I've put a sleep in there purely to test its working as locally it loads so fast I'm not sure if its working or not)!
The html page has this code in the script: -
$(document).ready(function(){
$("#loadingGIF").ajaxStart(function () {
$(this).show();
});
$("#loadingGIF").ajaxStop(function () {
window.setTimeout(partB,5000)
$(this).hide();
});
function partB(){
//just because
}
var scenarioID = ${testScenarioInstance.id}
var myData = ${results as JSON}
populateFormData(myData, scenarioID);
});
There is then a div in my page like so (which I can see in the source of the page just hidden): -
<div id="loadingGIF" ><img src='${application.contextPath}/images/spinner.gif' height="50" width="50"></div>
The ready code then goes off and calls this: -
function populateFormData(results, scenarioID) {
$table = $('#formList')
for(var i in results){
var formIDX = (results[i]["forms_idx"])
var formID = (results[i]["form_id"])
appendSubTable(formIDX, scenarioID, $table, formID);
}
}
Which references this multiple times calling several AJAX posts: -
function appendSubTable(formIDX, scenarioID, $table, formID) {
var $subTable = $table.find("#" + formIDX).find('td:eq(1)').find("div").find("table")
var url = "**Trust me this bits OK ;) **"
$.post(url, {
formIDX : formIDX, scenarioID : scenarioID, formID :formID
}, function(data) {
$subTable.append(data)
}).fail(function() {
});
}
Any pointers gratefully received...
Interestingly I bunged some alerts into my ajaxstart and stop and neither show up ever so I'm missing something obvious :S When I check the console in firefox I can see that all my POSTs are completing....
You should probably add the Ajaxstart and stop global event handlers to the document node like this
$(document).ajaxStart(function () {
$("#loadingGIF").show();
});
I realized my problem, I needed to register the ajaxstart and stop to the document not the div!
So instead of this: -
$("#loadingGIF").ajaxStart(function () {
$(this).show();
});
I now have: -
$(document).ajaxStart(function () {
$("#loadingGIF").show();
});
I assume this is because its the document that the ajax is running against not the div although my understanding there may not be 100% accurate at least this works so please tell me if I've misunderstood this! :)
#jbl, thanks for this pointer I did this to also leave the notification on screen for a few more moments just to make sure everything is loaded.
I'm working with a client proyect which is working with lot's of iframes inside others.
The problem is that I want to add an addEventListener in all iframes automatically from the absolute parent document, an example schema would be this:
Document: iframe1, iframe2
Iframe1: iframe1.1, iframe1.2
Iframe1.1: iframe.1.1.1, iframe 1.1.2
I want to simulate something like this:
iframes[i].contentWindow.document.getElementsByTagName('iframe')[0].contentWindow.document.getElementsByTagName('iframe')[i]
I wrote this code, but I have an "undefined" error:
window.onload=function(){
eventoIframe(document,null,1);
}
var eventoIframe=function(target,prev_target,lvl){
console.log('Ejecuto funcion por '+lvl+' vez');
var iframes=target.getElementsByTagName('iframe');
if(lvl>2){
var iframes=prev_target.target.getElementsByTagName('iframe');
}
if(iframes.length>0){
for(var i=0;i<=iframes.length-1;i++){
var iframe=iframes[i].contentWindow;
iframe.addEventListener("click",function(event){
console.log('click on:', event.target)
},false);
eventoIframe(iframe.document,target,lvl+1);
}
}
}
Okay, I found the mistake, I don't know why I wanted to know the prev target hehe
The solution is
window.onload=function(){
eventoIframe(document);
}
var eventoIframe=function(target){
var iframes=target.getElementsByTagName('iframe');
if(iframes.length>0){
for(var i=0;i<=iframes.length-1;i++){
var iframe=iframes[i].contentWindow;
iframe.addEventListener("click",function(event){
//code to be execute on each iframe
},false);
eventoIframe(iframe.document);
}
}
}
Problem solved: I removed the first function as it wasn't needed anyways, and now it all works in all browsers. Thanks for the posts though!
My issue here is that I have a javascript which on one server runs perfectly with no issues what-so-ever in IE. But on another server gives me 2 errors in IE.
It claims that my offset().top is either Null or not an object.
My fade in and out effect doesn't even become active.
Then I have another HUGE issue, which is that in FireFox NON of it all works.
OPS: This is a webpart, so additional javascripts running on the site might could intervene with the javascript I am trying to execute here. But I'm not sure.
I've tested this webpart in IE 8.0.7600.16385, on both servers.
Script:
<script type="text/javascript"
src="/_layouts/Progressive/Javascripts/jquery-1.4.3.js"></script>
<script type="text/javascript">
(function($) {
$.fn.goTo = function() {
// This is where IE on the second server claims the error to be.
$('html, body').animate({scrollTop: $(this).offset().top + 'px'}, 'fast');
return this;
}
})(jQuery);
function showParagraphs(sender) {
var id = sender.getAttribute('href');
if ($('#<%=paragraph.ClientID%>').hasClass("readable")) {
$('#<%=paragraph.ClientID%>').removeClass("readable");
highlightSelected(id);
}
else {
$('#<%=paragraph.ClientID%>').addClass("readable");
rmvClass(id);
}
};
function highlightSelected(id) {
$(id).goTo();
$(id).addClass("reading");
// This part is what isn't activated on the second server.
$('.reading').fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400);
// .reading only adds a gray background to the DIV.
};
function rmvClass(id) {
$('div').each(function() {
if ($(this).hasClass("reading")) {
$(this).removeClass("reading");
}
});
}
function toTop() {
$('div').each(function() {
$(this).removeClass("reading");
});
$('#<%=paragraph.ClientID%>').addClass("readable");
}
$(document).ready(function() {
$('#<%=q.ClientID%>').find('dd').hide().end().find('dt').click(function() {
$(this).next().slideToggle("fast");
});
$("#<%=q.ClientID%> dt").click(function() {
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
}
else {
$(this).addClass("selected");
}
});
});
</script>
Any thoughts or suggestions?
When
$(id)
returns an empty jQuery object, then ".offset()" will return null. You're calling that "highlightSelected" code with the "href" value from something, so perhaps what you think to be an "id" value that corresponds to something on the page, well it really doesn't. It's hard to know for sure, however, because you did not post any of the relevant HTML, nor did you even show where "showParagraphs()" is called!