Friends I need some help to fix IE 7 issues. This is my code.
<div id="thumb-slider-tabs">
<ul class="ibm-tabs">
<li class="active"><a href="#slide1" rel="0" class="no-mobile show-tab"><img
src="/i/slider/featured_icon_1.jpg" alt=""/></a><span class="icon-overlay"></span><span>Announcement</span></li>
this is how I target my href using the following:
dojo.query('#thumb-slider-tabs a').onclick(function(event){
var test = dojo.attr(event.currentTarget, 'rel');
alert(test);
switchTabs(dojo.attr(event.currentTarget, 'rel'), this.parentNode);
sliderClick = true;
});
IE 7 does not recognize the onclick and does not alert also it does not display the rel attribute in test.
Any suggestions please let me know what I can do to fix this issue in IE 7. This works in Chrome, Safari, Firefox, IE 8 & 9. I need to get it to work on IE 7.
I had two elements with ID thumb-slider-tabs, which is xhtml violation. In IE dojo finds the first node only and ignores the second one, hence dojo.query('#thumb-slider-tabs a') targets first 3 links on page, not the others as in firefox, chrome and safari. Bottom line, my 'onclick' handler is never attached to the actual nodes and thus the clicks were not being triggered on the tabs.
var anchors = dojo.query('[id="thumb-slider-tabs"] a').forEach(function(element){
dojo.connect(element, 'onclick', function(ev){
dojo.stopEvent(ev);
switchTabs( dojo.attr(element, 'rel'), element.parentNode);
sliderClick = true;
console.log(sliderClick + " " + "sliderClick value");
});
});
I made this change to my code and the onclick event handler triggers when I click the tabs.
Related
I have a list of staff profiles that uses jquery to filter it based on links selected in an index.
HTML:
<ul id="staff-filtering-system">
<li>Headmaster</li>
<li>Assistant Headmaster</li>
<li>Deputy Heads</li>
...
</ul>
<div class="staff_member" data-htb_role="headmaster" style="display: none;">...</div>
and uses this function to filter using this
JS:
$("#staff-filtering-system li a").click(function(e){
e.preventDefault();
var q = $(this).attr("data-htb_role-filter");
//console.log(q);
$("div.staff_member").each(function(){
var that = $(this)
if(that.attr("data-htb_role") == q){
//console.log(that);
that.show();
}else{
that.hide();
}
});
});
This works fine on desktop browsers, but not on mobile where tt mostly jumps to top of the page or does nothing.
After a quick google search I tried the following:
Removing href="#" from each index link
adding e.stopPropagation(); after e.preventDefault();
rewriting the click() method as on("touchstart click")
adding return false before the closing bracket of $("div.staff_member")...
Nothing seems to work
If I include alert(e.type) at the start. I sometimes get a touchstart event fired.
Any advice on what I should try next would be welcome.
I am testing on my mobile (Moto G5, Android 7, Chrome) and on BrowserStack ( Chrome on Samsung Galaxy S9/Android 8 and Chrome on Google Pixel 2/Android 8)
There was another function that was manipulating the links, I just reapplied the click method afterwards.
On a button click event in jQuery I have code that shows a div(and it's contents) which were previously set to 'display:none;". It works fine on all other browsers but not Safari on the iPad.
My code:
$(document).ready(function(){
<cfoutput>var cnt = #cnt#;</cfoutput>
$('##add_#dialog_label#_b').click(function() {
if (cnt < 10) {
cnt++
document.getElementById("#dialog_label#_dv_" + cnt).style.display = "";
}
});
});
I've also tried all the following 'show' functions:
$("###dialog_label#_dv_"+cnt).fadeIn();
$("###dialog_label#_dv_" + cnt).css('display','inline');
$("###dialog_label#_dv_" + cnt).show();
Everyone one of which work fine on all other browsers. Also the dozens of hash tags are Coldfusion evaluations. Another possibly important note is this is all taking place within a modal window.
Credit goes to #Wolff here:
document.getElementById("#dialog_label#_dv_" + cnt).style.display = "block";
This worked just fine on Safari. The apparent reasoning being that when I chose not to set display to any value (other than an empty string) it ignored the command. I don't understand whythe newest version of Safari on the newest version of iOS was refusing to do these things using jQuery, but I'm happy with this solution!
UPDATE: Still not working on the clients iPad. I'm at a loss.
I am having some problems with addEventListener in Firefox.
I have an iframe on my site for a WYSIWYG area I built myself.
I want the iframe to look more like a normal textarea so I want a border around the iframe on focus. First tp (textpreview) is found like this (and works well):
var tp = document.getElementById('iframe-textpreview');
var iframe = tp;
if(tp.contentDocument){ // normal
tp = tp.contentDocument;
}
else if(tp.contentWindow){ // old IE
tp = tp.contentWindow.document;
}
//Open and close for Firefox
tp.open();
tp.close();
tp.designMode = 'on';
Then I try to attach an eventlistener and log when the event fires. This works in Chrome, Opera and the most recent IE but not in Firefox:
//Doesn't work in Firefox
tp.body.addEventListener('focus', function(){ console.log('focus...')});
tp.body.addEventListener('blur', function(){ console.log('blur...')});
This does work however:
//Firefox
tp.body.onfocus = function(){ console.log('focus...')};
tp.body.onblur = function(){ console.log('blur...')};
I have cleared the cache on Firefox and tried with another computer, still no luck to get the first option working.
Firefox doesn't fire the event handler on the body element for some reason, instead you have to attach the event handler to the iframe itself or an actual element inside the iframe.
Focusing on the iframe itself, and not the body, seems to work in all browsers
tp.addEventListener('focus', function(){ console.log('focus...')});
tp.addEventListener('blur', function(){ console.log('blur...')});
I'm creating a button input on the fly with "document.createElement('input')". The button generates fine in all browsers, but the function does not fire in IE 8 (or IE 7) as it does in all other browsers. I tested the code of the function being called in IE 7 & 8 and it works. Does anyone know a way around this browser issue?
Thanks for your help.
<script type="text/javascript">
function killWindow(){
window.open('', '_self', '');
window.close();
}
document.observe("dom:loaded",function(){
var forceCloseButton = document.createElement("input");
forceCloseButton.setAttribute("id","forceClose");
forceCloseButton.setAttribute("type","image");
forceCloseButton.setAttribute("src","SurveyResource/Button-Close");
forceCloseButton.setAttribute("class","button");
forceCloseButton.setAttribute("onclick","killWindow()");
var a=$('datstat_bottomcenterbuttons');
a.appendChild(forceCloseButton);
})
</script>
You should never never set an event handler with setAttribute.
You need to use addEventListener/attachEvent or set onclick directly.
Also setting class is going to have issues, look at className.
The problem I have is that the program I have is not working correctly in IE8 for some people. The website is an English course and in IE8 for some people you are unable to click on the correct answers. Take a look at the following video:http://screencast-o-matic.com/watch/cXllIjvxW
Take a look and you will see the user is trying to click but it is not working. Take a closer look yourself and login to http://www.fcecourse.com/grammar-fce?m=11 with the username digital and the password digital. Then click on unit 1 (01) , then click on exercise, then on start ... here is another video: http://screencast-o-matic.com/watch/cXllD9v4D
The strange thing is that I have tested this and others have tested it and it is working fine in IE8, in windows 7, but other people I know are getting this problem are unable to click on the correct answers. I need a solution.
Hey i had like a couple of weeks ago the same problem and taking just a little look inside your html i see you have this:
<a onclick="javascript:comprobar('has', 'r-25529');" href="javascript:;">has</a>
the problem i had with internet explorer 7 and 8 was because i was calling my javascript function in the onload attribute of the anchore instead of bind the event with jquery and later do your stuff i fix this like this:
<a id="answer" href="javascript:;" number="25529" >has</a>
and later(Edited):
$('.answer').live('#answer', function(e){
e.preventDefault();
var link_prefix = "r-"; //prefix of the link to check
var link_number = $(this).attr('number'); //obtaining the number attribute from the link
var completeLink = link_prefix + link_number;
comprobar('has', completeLink);//the onclick stuff here
})
and that should be work on ie 7 and 8 i promise in this way you can obtain the value of the clicked link bassed in a class.