I have some code that animates a <div>. When the animation is complete, several things need to happen (mostly manipulation of CSS on various elements), so I naturally put them callback provided by jQuery's .animate();
It behaves as expected in Firefox. I can't tell whether or not it's an issue in IE because there are still some CSS issues preventing it from displaying properly there - I can't tell if it's the CSS or the same problem I'm having with Chrome. Regardless, for the moment, I'm focusing on Chrome.
One thing to note is that it doesn't happen if I do a console.log right before the line that's not being executed. Same if I insert a breakpoint and then let it continue.
$sliders.animate($thisSlideConfig, 250, function() {
$newPg.removeAttr('style');
$curPg = $newPg;
$curPgInf = plugin.getPgInf($curPg);
plugin.setIndTxt();
load2nav();
plugin.adjustNavState();
doCleanup();
});
The line nor being run is $newPg.removeAttr('style');
It doesn't seem to matter where in the block I put that line or how I select $newPg.
Oh yeah, I'm on Chrome 19.0.1084.52.
Removing the style attribute is unreliable. It may not trigger redrawing of the page (whereas a console log or a breakpoint force it to). Instead, try manually calling:
$newPg.style.XYZ = "";
For each style property you defined, if you can list them. If not, try this:
for( var x in $newPg.style) $newPg.style[x] = "";
These will trigger the correct redraw, and should hopefully stop the problem.
Related
I've created this code to print data from an iFrame
function (data) {
var frame = $("<iframe>", {
name: "iFrame",
class: "printFrame"
});
frame.appendTo("body");
var head = $("<head></head>");
_.each($("head link[rel=stylesheet]"), function (link) {
var csslink = $("<link/>", { rel: "stylesheet", href: $(link).prop("href") })
head.append(csslink);
;});
frame.contents().find("head")
.replaceWith(head);
frame.contents().find("body")
.append(this.html());
window.frames["iFrame"].focus();
window.frames["iFrame"].print();
}
This creates an iFrame, adds a head to where it sets all the css links that are needed for this website. Then it creates the body.
Trouble is, the styling won't get applied to the print, unless I break at line frame.contents().find("head").replaceWith(head), which means that something in that part is running asynchronously.
Question is, can I somehow get the code to wait for a short while before running that line, or is there perhaps another way to do this? Unfortunately I'm not all that familiar with iFrames, so I have no clue what it's trying to do there.
This turned out to be a real hassle. I've always been reluctant to using iframes, but since there are many resources saying that using an iframe for printing more stuff than what's on the screen, we figured we'd give it a try.
This was instead solved by putting the data inside a hidden div which then was shown before a window.print(). At the same time, all other elements on the page were given a "hidden-print" class which is a class we're already using to hide elements for prints.
This might not be as elegant for the user (The div will show briefly before the user exits the print dialogue), but it's a way more simpler code to use and manage.
I think you could / should move the last focus() and print() calls to a onload handler for the iframe, to get it to happen after styles are loaded and applied.
I've just run into the same issue and did the following:
setTimeout(() => {
window.frames["iFrame"].focus();
window.frames["iFrame"].print();
}, 500)
This appears to have sorted it for me. I hate using timeout and the length is guess work at best but as it's not system critical it's something I can run with for now.
I am required to prevent copy from a form. Using a oncopy handler works just fine on all <input/>-type fields.
Yet I fail to apply it to our "richtextarea", which is basically an empty iframe (src="about:blank" for what I have been able to gather; the page is GWT-generated, and the people before me developped quite an extensive framework around it).
I am able to get the iframe in the JavaScript, but I fail to have a correct handler (I tried adding one that logs, but it never does).
I have tried frame.oncopy, frame.contentWindow.oncopy, frame.contentWindow.document.oncopy, frame.contentDocument.oncopy. None of these does log to the console when I copy the iframe's content.
Does somebody have any lead for me? Any help appreciated (I've been stuck on this for some days now).
Having a cross-compatible solution would of course be ideal, but the main target is Firefox (the page is only open via a custom container based on Firefox 10).
Edit 2015-03-24
For those who want to try some debug script, the component I have trouble with is the one demonstrated here.
I have some native methods in the Java project to execute some custom JavaScript on it.
Below is some of the JavaScript I have unsuccessfully tried.
var frame = document.getElementsByTagName('iframe')[0];
function disallowCopy() {
alert('Gotcha!');
return false;
}
frame.oncopy = disallowCopy;
frame.contentWindow.oncopy = disallowCopy;
frame.contentWindow.document.oncopy = disallowCopy;
frame.contentWindow.document.body.oncopy = disallowCopy;
frame.contentDocument.oncopy = disallowCopy;
even though oncopy is a non standard event https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy and that there is no reliable way to prevent copying text,
you can check out the following bin
ensure the frame is loaded
use iframe.contentDocument.body to attch the event
I have this function being called everytime the page is scrolled by a user:
window.onscroll=function(){
document.getElementById("navBlurContent").style.top=-window.pageYOffset+125+"px";
}
However, this causes lots of lag to the browser. I have noticed some answers with jQuery that calls a delay to when the function is called. But, I want to use strictly javascript. I was wondering how this could this be done.
I have now realized that the majority of the lag is being caused by a -webkit-filter I have on the element. But I am not sure how to stop it.
Thanks
Try not to do a DOM select on every scroll.
Cache it:
var blur_content = document.getElementById("navBlurContent");
window.onscroll=function(){
blur_content.style.top=-window.pageYOffset+125+"px";
};
I used Easy Slider jQuery plugin before and never had problem until now. And the problem is strange. Check out this home page
http://bit.ly/HKiWY6
The page will pop an alert showing two values:
$("#slider").width()
and
$("#slider3").width()
I already set the value for both in css. One is 710px and one is 700px.
If you run in IE9, it shows the default value of $(window).width() instead for both, whatever the window or document width currently is. FF and Chrome returned correctly. Why is that?
Try the outerWidth, and make sure to wrap it in a windows.ready event listener to make sure all DOM element rendered properly before the width being computed
$("#slider3").outerWidth()
I've had problems with jQuery's width()/height()/offset().top/.left etc in the past when I used them before a certain event fully bubbled. See if setTimeout(function() { alert($('#slider').width()); }, 0); has any effect. It's a cheap nextTick() trick that might be just what you need.
when i type something on ie 8, and press 'bold' on toolbar on top of the text editor, the cursor will go to the beginning of the entire text editor. is this bug in tiny mce?
on the other hand, if i select text i typed, and pressed control+b, no problem ; both are fine in firefox,ie6
Have you tried turning off "View->Caret Browsing" in IE8 ? (it is toggled by F7)
That worked for me
I had a similar problem where the image that I wanted to insert was always going to the top of the editor. I solved it by setting the 'onchange_callback' field in the editor's init:
tinyMCE.init({..., onchange_callback: 'updateSelectionBookmark', ...});
This will call my 'updateSelectionBookmark' function when anything is changed on the screen, including the editor being blurred (Read more: http://tinymce.moxiecode.com/wiki.php/Configuration:onchange_callback). My updateSelectionBookmark looked something like:
function updateSelectionBookmark (ed) {
ed.updatedSelectionBookmark = ed.selection.getBookmark(1);
}
This will add a custom property to the editor object which will always contain the latest bookmark.
I then make use of the stored bookmark whenever I need to add the content:
ed.selection.moveToBookmark(ed.updatedSelectionBookmark);
I wanted to insert HTML so I put this before my call to the instance command (In my case, mceInsertRawHTML).
I hope this helps someone, even if my answer is a few months late.
Edit (A few months later): So I originally found this solution while working with TinyMCE 3.2.2.3 but we recently updated to 3.4.4 for compatibility with IE9. Looks like the above solution doesn't work as well as I thought it did. I've since found a (as far as I can tell) perfect solution to this. It's similar to the above except when and where to trigger the callback. Instead of using onchange_callback in the settings, you should use the editor's onEvent event:
tinyMCE.init({
...,
setup: function (ed) {
ed.onEvent.add(function (ed, e) {
ed.updatedSelectionBookmark = ed.selection.getBookmark(1);
});
},
...
});
This replaces the need for the updateSelectionBookmark function or the onchange_callback setting. The reason onEvent works better than onChange is because it gets called after any possible event, including mouse or key presses so the cursor's position is guaranteed to be saved even if moved but the content isn't changed.
After setting up the editor with the above event callback, just use moveToBookmark as stated above to restore the selection. I've tested this on IE9, Chrome, FF6, it works when inserting images/text inside text/tables.
I would'nt say that it's a bug in IE8.
A cursor does'nt move by magic, someone(tinymce) put's him somewhere.
So if the cursor does'nt appear at the expected position, it has to be a misbehaviour in tinymce.
But I can't provide a "bugfix", because this not occurs with my IE8(Win7).
What's your environment?