Develop Reference

Setting HTM5 text kills scrollbar drag in Chrome

I have a timer in Javascript that fires once per second to update some text in the page (HTML5) like this:
document.getElementById('CountDown').innerHTML = "some string";
This works fine except that if this code runs while the user is dragging a scrollbar handle the drag is aborted. This is a very annoying user interface behavior which I have not been able to resolve.
If I comment out the line in the timer event then the scrollbar works normally.
Note: It only happens on Chrome, not on Firefox or Opera.
Any idea how to address this?

The smooth scrolling is a very important and effective function to enhance the user experience, it looks like there are several cases like yours concerning the smooth scroll in the chrome browser, and how it's not working properly, but the issues are in must of time related with the older version, like:
https://github.com/simov/simplr-smoothscroll/issues/27
https://github.com/mathiasbynens/jquery-smooth-scrolling/issues/1
https://github.com/iamdustan/smoothscroll/issues/28
You could try the following rules in your CSS:
html, body {
overflow: hidden,
height: 100%
}
And for your container you could attach the following rules:
{
overflow: auto;
height: 100%
}
Instead, since the code work in the other browser means that your code is valid, so just make sure you're using one of the latest versions, clear your cache & give it a try.

Probably not the answer you want to hear but I had this problem several months ago, there are several known bugs with the smooth scrolling feature of chrome when javascript is updating the DOM.
The newer versions of Chrome seem to handle this much better. I did a quick test where the code is similar to yours on the latest version of Chrome, and there were no problems.
It seems unlikely that there is an error in your code if it is working well in other browsers. Might be best suggesting users to ensure Chrome is fully updated for the best experience on the website or to use another browser.

Seems to be OK now - after release of Chrome 68.0.3440

Jquery Error in ie8 and ie9 with Wordpress theme. (Object doesnt support this property or method)

I recently launched a website for a client http://www.bridgechurch.us/ only to recieve complaints of it not displaying correctly on ie8 or ie9. I have confirmed this to be true. IE is pointing to this line of Javascript:
jQuery(function () {
jQuery(".scrollable").scrollable({circular: true}).navigator().autoscroll({interval: 7000});
[...]
Can anyone help me figure out what is wrong with this line of code?
Thank you
UPDATE - FIXED
I figured out that there was a comment before the Doctype Declaration that forced IE into quirks mode.

You have a lot of 404's on that page, mainly related to ie-specific css and border images, which is probably why the page doesn't look like it should. Files like /images/internet_explorer/borderBottomRight.png and /wp-content/themes/Moses/styles/default.css aren't loading.
That being said, looking at the scrollable documentation, there is no .navigator() function off of the return value of scrollable(); and I'm getting the same error in Chrome.

Well, visually, the site doesn't appear to work well at all in IE9 (compared to Chrome). But just looking at the code that adds scrollable() to jQuery, you can see that that function doesn't always return the original element. In your code, if you split the call into two, you might be ok:
jQuery(".scrollable").scrollable({circular: true});
jQuery(".scrollable").navigator().autoscroll({interval: 7000});
I blame the plug-in on this one: functions that extend jQuery are supposed to always return the original elements found by the selector.

jQuery (or something) is not working properly on IE8

UPDATE:
I was told to test this in IE9 - It works fine in IE9 (for me,
anyways).
I was told by a friend that THIS page is not running properly on IE8 - I was told that the thumbnails are loading properly, but the image in the center is not. I do not have IE8 and I have been unsuccessful in my attempt to download it.
The images are being loaded (well, adjusted) through jQuery and I have a feeling that it is my javascript code that is failing in some way, causing the described errors in IE8.
I put my code through JSLint and the errors I saw were telling me to add spaces in the code - but I highly doubt this could be causing the IE8 issue.
The JS file being loaded is "slideshow.js" which can be easily found through Chrome's inspect element.
I will keep inspecting this from my end looking for JS errors and what not but I would really appreciate some help on this issue.
Thank you very much,
Evan

Problem looks to be
.img-wrapper in style.css with position:absolute.

The problem was that IE8 does not support the "naturalWidth" property. Rather, one should create a new image object, and get the "width" from this new image object.
For more details, refer to this link..

Colorbox in IE8 throwing a wobbly

This problem occurs in Firefox and Chrome, but Safari is fine. IE8, however, in compatability mode or not, doesn't load the overlay over the top (it just sits at the top, scrolling the content down - although I guess this is because the overlay is at the top of the markup).
It also doesn't show the image I'm attempting to show, but shrinks the overlay loading image to nothing in the top left of the screen. I am using the standard colorbox-min and the CSS that goes with that.
Inspecting the markup in the IE8 dev tools seems to hint that the content is not actually loaded into the cboxLoadedContent div.
$(document).ready(function() {
$('a[rel="preview"]').colorbox(
{
photo: true
, maxWidth: '95%'
, maxHeight: '95%'
, photoScaling: true
}
);
});
basically the page is a list of media images and when you click one it gives you the preview and allows you to scroll through ones on the page
well at least it does in FF took a little screenshot as it was shrinking the overlay thingy http://dumpt.com/img/viewer.php?file=7s2zwoxozzf7666h0fzc.png
Anyone have any ideas?
I expect my explanation is not great, so maybe I could take a movie of it or something if needed.

Is your code wrapped in a ready function? I've seen instances where code that works in FF/Safari fails in IE because IE seems to load the DOM more slowly. In those cases it almost always turns out that I've failed to wrap the code in a ready function.
$(function() { // the important bit
$('.colorbox').load('...').colorbox();
});

Try an XHTML strict doctype...?

I've experienced the exact same symptoms - but in my case it extended to all browsers.
One cause was that I didn't include the CSS file that I use for pages that use colorbox.
Another cause was I updated to the newest version of jQuery, but didn't upgrade colorbox. (Also, if you update your jquery include, make sure that you also update your jquery vs doc - if you're even using it).
Hope that helps.

Search through your colorbox files for this:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
There will be several instances of it, each pointing to a png. Make sure the path to that png is correct, then test it again.
I'm pretty sure I had this exact problem at one point, and fixing the paths was all I needed to do. However, it's been a while so my memory is a little fuzzy.

I had the same issue. I also had a problem with the image being only 10px wide due to IE not liking CSS max-width being set to 100%. To alleviate the problem I add the following to my CSS.
.cboxIE img
{
max-width:none;
_max-width:none;
}

TinyMCE not working with Chrome when I dynamically setContent

I have a site that I put:
<body onload="ajaxLoad()" >
I have a Javascript function that then inserts data from my database into the text editor by using the setContent Javascript method of the textarea. It seems fine in Firefox and IE but in Chrome sometimes nothing shows up. There is no error, just a blank editor.
In the body section I have:
<textarea id="elm1" name="elm1" rows="40" cols="60" style="width: 100%">
</textarea>
In the head section I have:
function ajaxLoad() {
var ed = tinyMCE.get('elm1');
ed.setProgressState(1); // Show progress
window.setTimeout(function() {
ed.setProgressState(0); // Hide progress
ed.setContent('<p style="text-align: center;"><strong><br /><span style="font-size: small;">General Manager's Corner</span></strong></p><p style="text-align: center;">August 2009</p><p>It’s been 15<sup>th</sup> and so have a Steak Night (Saturday, 15<sup>th</sup>) and a shore Dinner planned (Saturday, 22<sup>nd</sup>) this month. urday, September 5<sup>th</sup>. e a can’t missed evening, shas extended it one additional week. The last clinic will be the week of August 11<sup>th</sup>. </p><p> Alt (Tuesday through Thursday) </p><p> I wouClub.</p><p> </p><p> </p><p> </p><p> <strong></strong></p>');
}, 1);
}
I am not sure if its some of the formatting that Chrome is rejecting but it seems like if TinyMCE can parse it in one browser, it should be able to do it in any browser, so I am confused.
Any suggestions?

Background:
For various reasons onload() is not considered the proper approach for loading Javascript, see for example Launching Code on Document Ready, with the most important/noticeable one being that Javascript code isn't run until the page has finished downloading entirely, including images and the like, which might take an eternity therefore (e.g. if an external banner ad server is down etc.).
Instead it is recommended to load Javascript as soon as the DOM is ready, but unfortunately there is no cross browser compatible native solution for this, see Getting notified when the page DOM has loaded (but before window.onload); please note that my entire answer is based upon the most excellent Javascript library jQuery, which offers a cross browser solution for this problem, consequently I'd definitely favor the two higher voted answers over the accepted solution myself.
Likely cause:
Your issue seems to be caused by the opposite behavior though: Chrome facilitates the WebKit rendering engine, just like Safari, and for the latter onload() is discussed to behave differently, see section When does onload fire? in Is Safari faster?. Another description of this problem specific to Chrome can be found in window.onload not working correctly in Chrome, without an explanation though.
In conclusion I suspect onload() to fire before the DOM is actually loaded completely, at least concerning the requirements of TinyMCE, which is notoriously fragile regarding issues like this and simply ceases to load.
Possible solution:
Just facilitating attribute defer on the script tag as outlined in window.onload not working correctly in Chrome is again not cross browser compatible, hence I'd simply go with the widely deployed and proven approach of using the already mentioned jQuery cross browser solution for the onload() problem, which is good practice anyway and should in principle take care of your inverse issue as well.
Update:
There are indeed some bugs filed against WebKit which could back my conclusion (no matter whether this behavior actually constitutes a bug or is intentional), see:
onload sometimes fired before all resources are loaded
window.onload fires before all subresources loaded
Window.onload is firing before image resources are loaded

I had a similar problem (editor not showing in chrome) and read in some forum, that if tinyMCE is unable to locate some files, it just stops loading. Try tracking down if everything is found using firebug's net tab (clear your cache first).

First of all; see to it that you have the latest version of TinyMCE.
I could not reproduce your problem given the information you provides. It seems just fine ( with the faked ajaxload ).
You could always try to go the "back entrance" in;
var myed = document.getElementById('elm1_ifr');
myed.contentDocument.getElementById('tinymce').innerHTML="<p style=\"text-align: center;\"><strong>hacking <span style=\"font-size: small;\">my</span> way in.</strong></p>";
Hope you good luck!

SOLUTION:
Ive been struggling with the TinyMCE toolbar not appearing in all kinds of secnarios....it would work in one user's IE browser, but not another. It would not work in Firefox or Chrome, etc.
Turns out if in the newest 3.3 version there are STILL bugs they have not fixed. This one occurs when in your webpage JavaScript code, where you instantiate the TinyMCE, if you added code for the plugin part where you load up two specific plugins, the toolbar fails to appear and you see HTML:
plugins:
"safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,
inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,
fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,**imagemanager,filemanager**",
Remove all references to imagemanager and filemanager in your web page, then refresh your browser...
When you do, retest in Chrome and Firefox and IE and the TinyMCE suddenly appears! Wow....a miracle, huh?
Turns out their "main developer" hasn't fixed the issue but does explain it as such, if you want to try and still use those plugins and yet fix the problem. His quote is as follows:
"If the ImageManager/FileManager are old they might not use the new
scriptloader api. And the new 3.3 version will load all dependent
scripts async instead of sync. - Spocke - Main developer of TinyMCE"

There are a few ways to set content in a TinyMCE editor. If you want the content to be there when the page first loads, you can just put it between the tags.
Otherwise, you can do this through script in the following way:
window.onload = function() {
tinyMCE.getInstanceById("ProfileText").setContent('test');
};
I have wrapped the code in a window.onload block. If you have other functions that set content dynamically through this way after the TinyMCE editor has already loaded, then you do not need that.

There is an option oninit for the function tinyMCE.init(), put your method there:
tinyMCE.init({
oninit: function(){
tinyMCE.activeEditor.setContent('blah');
}
});
It works this way.
The editor is not fully loaded on document load event, as it the editor loader will post-load a bunch of files.

same problem here, ie needs
var ed = tinyMCE.get('content');
ed.setContent('zzz');
other browsers
document.getElementById("content").innerHTML="zzz";
i am quite disapointed
will need to check browser in javascript to get it working properly, thats suxx