I have some javascript code that gets the id of the element selected by the user, it works absolutely fine with Chrome, Safari, Opera but when it comes to Firefox and IE it doesn't seem to work at all.
It is located within a closure function and I have done some tests and found that it is this exact line that is breaking the code.
my function...
var myfunction = (function(){
var testId;
var item1;
var item2;
return{
animate: function(){
testId = window.event.target.id;
item1 = $('#heading' + testId);
item2 = $('#subheading' + testId);
//jquery operating on item1 and item2 goes here
}
};
}());
line that doesn't seem to be working...
testId = window.event.target.id;
Any help with this problem would be much appreciated.
Do this:
testId = (event.target || event.srcElement).id;
Hope it helps
Related
This has gotten so far,that I will sum up what we found out:
Inside the event handler the attribute src cannot be read in IE8 (FF works fine), neither with jQuery nor with usual javascript
The only way to get the data was to get it outside the handler, write it to an array and read it afterwards from the inside of the handler
But there was still no possibility to write to src (neither jQuery nor javascript worked - only for IE 8)
I've got it working by writing the img elemts themselves to the document, but the reason behind this problem is no solved
The snippet we have is used twice.
The old code
<script type="text/javascript">
jQuery(document).ready(function() {
//...
//view entry
jQuery('.blogentry').live('click',function(){
// Get contents
blogtext = jQuery(this).children('.blogtext').html();
blogauthor = jQuery(this).children('.onlyblogauthor').html();
blogtitle = jQuery(this).children('.blogtitle').html();
profileimage = jQuery(this).children('.profileimage').html();
imgleft = jQuery(this).children('.Image_left').attr('src');
imgcenter = jQuery(this).children('.Image_center').attr('src');
imgright = jQuery(this).children('.Image_right').attr('src');
// Write contents
jQuery('#bild_left').attr('src', imgleft);
jQuery('#bild_center').attr('src', imgcenter);
jQuery('#bild_right').attr('src', imgright);
jQuery('.person').attr('src', profileimage);
jQuery('#g_fb_name').html(blogauthor);
jQuery('#g_titel').html(blogtitle);
jQuery('#g_text').html(blogtext);
//...
});
//...
// Change entry
jQuery('.blogentry').each(function(){
entryindex = jQuery(this).attr('rel');
if (entry == entryindex)
{
// The following works fine (so 'children' works fine):
blogtext = jQuery(this).children('.blogtext').html();
blogauthor = jQuery(this).children('.onlyblogauthor').html();
blogtitle = jQuery(this).children('.blogtitle').html();
profileimage = jQuery(this).children('.profileimage').html();
// This does not work - only in IE 8, works in Firefox
imgleft = jQuery(this).children('.Image_left').attr('src');
imgcenter = jQuery(this).children('.Image_center').attr('src');
imgright = jQuery(this).children('.Image_right').attr('src');
//alert: 'undefined'
alert(jQuery(this).children('.Image_center').attr('src'));
//...
}
}
//...
});
</script>
The new code
Please see my own posted answer for the new code.
UPDATE:
This does not work if called inside of the click event!!!
jQuery('.Image_left').each(function(){
alert(jQuery(this).attr('src'));
});
SOLUTION TO GET THE IMAGE DATA:
relcounter = 1;
imgleft_array = new Array();
jQuery('.Image_left').each(function(){
imgleft_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});
relcounter = 1;
imgcenter_array = new Array();
jQuery('.Image_center').each(function(){
imgcenter_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});
relcounter = 1;
imgright_array = new Array();
jQuery('.Image_right').each(function(){
imgright_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});
//... inside the eventhandler (entryindex = 'rel' of blogentry):
imgleft = imgleft_array[entryindex];
imgcenter = imgcenter_array[entryindex];
imgright = imgright_array[entryindex];
This works because it is not called inside the event handler and the sources are saved beforehand
BUT! I still cannot write the data, which is my aim:
jQuery('#bild_left').attr('src', imgleft);
jQuery('#bild_center').attr('src', imgcenter);
jQuery('#bild_right').attr('src', imgright);
UPDATE!!!
This is just crazy, I tried to write the data via usual javascript. This also works in FF, but no in IE8. Here really is some serious problem witt the attribute src:
document.getElementById('bild_left').src = imgleft;
document.getElementById('bild_center').src = imgcenter;
document.getElementById('bild_right').src = imgright;
alert(document.getElementById('bild_left').src);
This works in FF, but not in IE8, the attribute src remains undefined after writing! This seems to be not a jQuery problem at all!
children looks for immediate child elements only where as find looks for all the elements within it until its last child element down the dom tree. If you are saying find is working that means the element you are looking is not its immediate children.
Try to alert this jQuery(this).children('#Image_center').length see what you get.
FYI. Even when any element is not found jQuery will return an emtpy object it will never be null. So alert an emtpy object will always give you [object Object]. You should alwasy check for the length property of the jQuery object.
Try this
alert(jQuery(this).find('#Image_center').length);//To check whether element is found or not.
Bing Bang Boom,
imgright = jQuery(".Image_right",this).attr('src');
And why don't you easily use one working?
alert(jQuery(this).children('#Image_center').attr('src'));
change children to find
alert(jQuery(this).find('#Image_center').attr('src'));
It is probably the easiest solution, and when it work, why wouldn't you use it?
the problem is not in the attr('src') but in something else. The following snippet works in IE8:
<img id="xxx" src="yrdd">
<script type="text/javascript">
alert($('#xxx').attr('src'));
</script>
But if you for example change the the text/javascript to application/javascript - this code will work in FF but will not work in IE8
This has gotten so far,that I will sum up what we found out:
Inside the event handler the attribute src cannot be read in IE8 (FF works fine), neither with jQuery nor with usual javascript
The only way to get the data was to get it outside the handler, write it to an array and read it afterwards from the inside of the handler
But there was still no possibility to write to src (neither jQuery nor javascript worked - only for IE 8)
I've got it working by writing the img elemts themselves to the document, but the reason behind this problem is no solved
The new code
relcounter = 1;
imgleft_array = new Array();
jQuery('.Image_left').each(function(){
imgleft_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});
relcounter = 1;
imgcenter_array = new Array();
jQuery('.Image_center').each(function(){
imgcenter_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});
relcounter = 1;
imgright_array = new Array();
jQuery('.Image_right').each(function(){
imgright_array[relcounter] = jQuery(this).attr('src');
relcounter++;
});
//view entry
jQuery('.blogentry').live('click',function(){
// Get contents
entryindex = jQuery(this).attr('rel');
blogtext = jQuery(this).children('.blogtext').html();
blogauthor = jQuery(this).children('.onlyblogauthor').html();
blogtitle = jQuery(this).children('.blogtitle').html();
profileimage = jQuery(this).children('.profileimage').html();
imgleft = imgleft_array[entryindex];
imgcenter = imgcenter_array[entryindex];
imgright = imgright_array[entryindex];
// Write contents
jQuery('#entryimages').html('');
jQuery('#entryimages').html('<img class="rotate" width="132" height="138" id="bild_left" src="'+imgleft+'" /><img class="rotateright" width="154" height="162" id="bild_center" src="'+imgcenter+'" /><img class="rotate" width="132" height="138" id="bild_right" src="'+imgright+'" />');
jQuery('.person').attr('src', profileimage);
jQuery('#g_fb_name').html(blogauthor);
jQuery('#g_titel').html(blogtitle);
jQuery('#g_text').html(blogtext);
});
So I am just not using .attr('src') in the event handler....
Try to make a delay:
jQuery(document).ready(function() {
setTimeout(function () {
jQuery('.blogentry').each(function(){
// your code...
});
}, 100); // if doesn't work, try to set a higher value
});
UPDATE
Hope, this code will work.
$('.blogentry img').each(function(){
alert( $(this).attr('src') );
});
UPDATE
I'm not sure, but maybe IE can't read classes with uppercase first letter...
Try to change ".Image_center" to ".image_center"
UPDATE
Check your code again. You definitely have some error. Try this jsfiddle in IE8, attr('src') is showed correctly. http://jsfiddle.net/qzFU8/
$(document).ready(function () {
$("#imgReload").click(function () {
$('#<%=imgCaptcha.ClientID %>').removeAttr("src");
$('#<%=imgCaptcha.ClientID %>').attr("src", "Captcha.ashx");
});
});
I have the following code which works in Firefox-20 and Opera but not in Chrome-26 or IE-10. The keyup functions adds Indian commas to the amounts.
$(document).ready(function() {
$("#readyArea").on('change', function() {
$("#underConstArea").val($(this).val()).trigger('change');
});
$('.comma').on('keyup', this, function commaFormatted(){
var delimiter = ","; // replace comma if desired
var amount = $(this).val().replace(/\,/g,'');
var a = amount.split('.',2);
var d = a[1];
var i = parseInt(a[0],10);
if(isNaN(i)) { return ''; }
var minus = '';
if(i < 0) { minus = '-'; }
i = Math.abs(i);
var n = new String(i);
var a = [];
var cnt=0;
while(n.length > 2)
{
if(cnt == 0)
{
var nn = n.substr(n.length-3);
n = n.substr(0,n.length-3);
cnt++;
}
else
{
var nn = n.substr(n.length-2);
n = n.substr(0,n.length-2);
}
a.unshift(nn);
}
if(n.length > 0)
{
a.unshift(n);
}
n = a.join(delimiter);
amount = n;
amount = minus + amount;
$(this).val(amount);
});
});
Here is the JSFiddle link. (As I said if I open this link in Firefox or Opera the js works but not in Chrome or IE). There are no js errors on the console either. Do I need to do something specific for Chrome and IE?
EDIT
Just to clarify, it is the onChange event that is not firing in Chrome and IE. The same is firing in Firefox and Opera.
I tested on Chrome, and the commas did fine, but I never saw the underConstArea update, while I did see it do so on Firefox after leaving the textbox.
I'm not sure what is happening there, but I have several ways of fixing it.
First, it seems that whether $("#readyArea").on('change') fires is browser dependent. I don't know why, but it seems that Chrome doesn't throw a change event when you're changing the code. Maybe it's trying to avoid an infinite loop of changes; I'm not really sure.
If you're happy with the underConstArea only updating when the number is done (as it behaves in firefox), you can do so on focusout instead of on change. I changed your top lines to
$("#readyArea").on('focusout', function() {
$("#underConstArea").val($(this).val());
});
and it worked fine for me in Chrome and Firefox. Here's an updated fiddle.
Alternatively, if you want it to update every time the user types, just update underConstArea within your commaFormatted function. Just add
$("#underConstArea").val(amount);
at the bottom of your function.
And the link to the second option I offered. Note that I removed any event catching on #readyArea.
I have an class remover that works just fine in IE och Chrome, wont get any errors but in firefox. it dosent work at all.
Just get an error thats thas remove is not a function.
I been trying different ways to make it work, but none of them removes the class.
function removeDice(){
document.getElementsByClassName("dice")[0].remove(0);
}
An nice function that lets me remove dice classes one by one...
works in chrome but not firefox.
Been reading different methods here in stackoverflow and tried this
document.getElementById("dice").className =
document.getElementById("dice").className.replace
( /(?:^|\s)MyClass(?!\S)/g , '' )
But no luck either.
Any tips ?
Thanks
Have a try with this
Fiddle
function removeClass(classToRemove){
var elems = document.getElementsByClassName(classToRemove);
if (!elems) return;
for (var i=elems.length-1;i>=0;i--) {
var elem=elems[i];
var classes=elem.className.split(" ");
classes.splice(classes.indexOf(classToRemove),1);
elem.className=classes.join(" ");
}
}
Use removeAttribute()
document.getElementById("dice")[0].removeAttribute("class");
UPDATED:
Do this way:-
function removeClassFromAllElements(){
var objClass = document.getElementsByClassName("YOUR-CLASS-NAME");
var tempLen = objClass.length;
for (i=0; i<tempLen; i++) {
objClass[0].removeAttribute("class");
}
}
removeClassFromAllElements();
Refer LIVE DEMO
I have written some code with jquery works in firefox, safari and ie9. But chrome does not like it. No obvious msgs in chrome console coming up. I am hitting a wall hopefully someone can shed some light. Script just show/hides some tooltips. Any ideas?
fiddle here, changed code still no change to behaviour.
http://jsfiddle.net/qAfwJ/
$(document).ready(function(){
//custom toolTip Written by CASherwood but not working in ie9/chrome
var ShowId;
var id;
var contentholder = $(".contentBox");
var toolTip = $(".info");
var idHashString = '#info';
var idString = 'id';
function showToolTip(name, id){
id = name + id;
$(id).fadeIn(1000);
}
function hideToolTip(name, id){
id = name + id;
$(id).fadeOut(1000);
}
$(toolTip).mouseover(function(){
ShowId = $(this).attr(idString);
showToolTip(idHashString, ShowId);
});
$(contentholder).mouseleave(function(){
ShowId = $(this).find('.info').attr(idString);
hideToolTip(idHashString, ShowId);
});
});
There are a few things here,
You are setting a variable var toolTip = $(".info");
And then using this same variable to add a function to it.
What you are doing here is actually
$($(".info")).mouseover(
Instead of
var toolTip = $(".info");
toolTip.mouseover(
Also you might consider using
jquery.hover(handlerIn(eventObject) , handlerOut(eventObject) );
http://api.jquery.com/hover/
Ok one thing I'm noticing here is that you are wrapping some elements twice with the jQuery selector.
var contentholder = $(".contentBox");
$(contentholder).mouseleave(function(){
...
});
Basically what evaluates to is this -
$($(".contentBox"))
That doesn't look too good and I'm not too sure if it would work as expected. Even if it does, the issues of cross browser compatibility might come into play and I believe this is what you are experiencing. If you have already captured the element and are not just storing the selectors as strings, then there is no need to wrap the element again with the $ syntax.
var contentholder = $(".contentBox");
contentholder.mouseleave(function(){
...
});
When you are constructing selectors from strings and variables, you should do so in a similar way to this -
var elementId = 'the_elements_id';
$('#'+elementId).on('click',handler);
I'd start by changing
$(toolTip).mouseover(function(){
ShowId = $(this).attr(idString);
showToolTip(idHashString, ShowId);
});
$(contentholder).mouseleave(function(){
ShowId = $(this).find('.info').attr(idString);
hideToolTip(idHashString, ShowId);
});
to
toolTip.mouseover(function(){
ShowId = $(this).attr(idString);
showToolTip(idHashString, ShowId);
});
contentholder.mouseleave(function(){
ShowId = $(this).find('.info').attr(idString);
hideToolTip(idHashString, ShowId);
});
since your toolTip and contentholder variables are already jquery objects.
I'm not sure and haven't tested it, but what if you try to move the two functions (showToolTip() and hideToolTip()) before or after the $(function(){});
The might get seen as inner functions of some sort instead of global functions and that might be a thing.
I'm trying to follow up on a previous Stackoverflow question about how to display content from a Cleditor textbox in an external HTML element such as a <p>. Here's the question and the fiddle which solves my problem in webkit browsers but not Firefox or IE:
Here's the code from the fiddle:
<textarea id="input" name="input"></textarea>
<p id="x"></p>
<script>
$("#input").cleditor();
$(".cleditorMain iframe").contents().find('body').bind('keyup',function(){
var v = $(this).text(); // or .html() if desired
$('#x').html(v);
});
</script>
I've read Get content of iframe from jquery that I need to use "window.top.... to access the main page and pass it that way because .contents() is not supported by all browsers" but i'm not sure how to use window.top for this purpose and am hoping someone might be able to shed some light on this topic.
The cleditor documentation states that it does have a "change" event which it claims to work with the 'keyup' event, but unfortunately in my testing it didn't work as expected with Firefox 7 (requires clicking out of the text-editor).
Jsfiddle: http://jsfiddle.net/qm4G6/27/
Code:
var cledit = $("#input").cleditor()[0];
cledit.change(function(){
var v = this.$area.context.value;
$('#x').html(v);
});
There is also another StackOverflow question which asked about the same thing, in which user Ling suggests modifying the plugin to add your own function:
Get content from jquery CLEditor
Edit:
Based on your comments with the above SO question result's not working, I've amended the code below.
This works in IE9 and IE9's "IE8" developer mode. http://jsfiddle.net/qm4G6/80/
$(document).ready(function(){
var cledit = $("#inputcledit").cleditor()[0];
$(cledit.$frame[0]).attr("id","cleditCool");
var cleditFrame;
if(!document.frames)
{
cleditFrame = $("#cleditCool")[0].contentWindow.document;
}
else
{
cleditFrame = document.frames["cleditCool"].document;
}
$( cleditFrame ).bind('keyup', function(){
var v = $(this).text();
$('#x').html(v);
});
});
Another Edit: To get the HTML, you have to find body within the iframe like $(this).find("body").html(). See the code below.
JSFiddle: http://jsfiddle.net/qm4G6/84/
var cledit = $("#inputcledit").cleditor()[0];
$(cledit.$frame[0]).attr("id","cleditCool");
var cleditFrame;
if(!document.frames)
{
cleditFrame = $("#cleditCool")[0].contentWindow.document;
}
else
{
cleditFrame = document.frames["cleditCool"].document;
}
$( cleditFrame ).bind('keyup', function(){
var v = $(this).find("body").html();
$('#x').html(v);
});
$("div.cleditorToolbar, .cleditorPopup div").bind("click",function(){
var v = $( cleditFrame ).find("body").html();
$('#x').html(v);
});
Since I answered the question that prompted you for this, I guess I'll answer this one too ;)
This works in Chrome and Firefox (I don't have access to IE):
$("#input").cleditor();
$( $(".cleditorMain iframe")[0].contentWindow.document ).bind('keyup', function(){
var v = $(this).text(); // or .html() if desired
$('#x').html(v);
});
Updated jsFiddle
UPDATE
This also works in Chrome and Firefox. Maybe IE too?
$("#input").cleditor();
$( $(".cleditorMain iframe")[0].contentDocument ).bind('keyup', function(){
var v = $(this).text(); // or .html() if desired
$('#x').html(v);
});
jsFiddle