We are using java ajaxtags as a library to populate auto complete values for textbox. It is working perfectly in most of the browsers (Firefox, ie6, ie7 etc...).
But in case of IE8 the position of auto complete results are not linked with the actual textbox, instead it is shifted towards down. It is happening only in IE8.
Please suggest a solution to resolve this issue and to be able to the display auto complete results in a proper way.
Thanks for your help in advance.
Found the solution myself...
In control.js file I have added the following condition to get it worked
if(!update.style.position || update.style.position=='absolute') {
update.style.position = 'absolute';
// Adding the following condtion will fix the issue with IE8
if(navigator.appVersion.indexOf('MSIE')>0) {
update.style.display = 'inline';
}
Position.clone(element, update, {setHeight: false, offsetTop: element.offsetHeight});
}
Related
I've added a plugin that allows the user to add a specially styled div via a dialog. The issue now is, this element should not be clickable inside the edtior. The problem is the users manage it to click inside the div and enter text there and by this screw it up.
I've already spent some time searching the documentation but couldn't find the right approach to do this yet. I'm not asking for code, just some advice how to do it, a pointer to the right API method would be good enough for me. I guess I can somehow access the elements or intercept an users click and prevent them from adding something to my element somehow, I just couldn't yet figure out how to do it.
Use the Widget System.
Widget Tutorial.
Demos.
I've finally managed to get this done by making the elements content not editable. When I create the element in my dialog:
hrElement.setAttribute('contenteditable', false);
When loading the plugin:
init: function (editor) {
editor.on('contentDom', function () {
var stiching = (this.document.getElementsByTag('div'));
console.log(stiching);
for(var i=0;i<stiching.count();i++){
if (stiching.getItem(i).hasClass('stitching')) {
stiching.getItem(i).setAttribute('contenteditable', false);
}
}
});
}
I'm pretty sure this is not the most best solution (don't like to iterate over the elements) but at least it works for me now. Any suggestions how to improve it for future cases are welcome.
I'm just working on a little webservice. Therefore I am using an AJAX call and append my data to a table on my website. Here I can read and update already existing entries or write new entries. Everything works fine.
I want to have the possibility to update already existing with the wysihtml5 editor. I already integrated this editor on my website and I can use it on new entries. That works, too.
But now there's the problem with existing data. When it comes to the form to update data, I want the existing data being displayed as the value. Everything works fine on all inputs, just the wysihtml5 don't work.
I already know that there's an iframe and that's why I can't set the value of the textarea. I searched for a solution and found the following code (last line):
var editor = new wysihtml5.Editor("textareaid", { // id of textarea element
toolbar: "wysihtml5-toolbar", // id of toolbar element
parserRules: wysihtml5ParserRules, // defined in parser rules set
});
editor.setValue('Here's the content', true);
Usually this should work, but no content appears and the console just tells me:
Error: wysihtml5.Sandbox: Sandbox iframe isn't loaded yet
I tried it with a timeout-function but nothing works. Searching on the internet it also seems that there is noone else with that problem. I hope you can help me out, would be great!
Is there a way to set the value?
This code work for me
$("#product_details").data("wysihtml5").editor.getValue();// to get the value
$("#product_details").data("wysihtml5").editor.setValue('new content')// to set the value
I got the solutions, below code worked for me
$('#id ~ iframe').contents().find('.wysihtml5-editor').html(my_html);
This work for me
$('.wysihtml5-sandbox').contents().find('.wysihtml5-editor').html(my_html);
the ".wysihtml5-sandbox" is a class name of iframe, create by wysihtml5 by default.
I finally got it working by myself. I just change the second parameter of setValue to false. I don't know why, but it works then.
this code worked for me :
var wysihtml5Editor = $('#text_editor').data("wysihtml5").editor;
wysihtml5Editor.setValue("<p>foobar</p>", true);
console.log(wysihtml5Editor.getValue());
I'm using a Magento 1.4.1.1 install that I'm having issues with the javascript on a custom themed store.
For example, going to any product page (e.g. http://www.papakuraeducation.co.nz/index.php/teachers/magic-caterpillar-handwriting-casey-caterpillar-small-book.html) loads a Javascript file, which contains code which is supposed to scale down the .jpg file to fit the 'product-image' container it sits inside.
The relevent code seems to be around line #10279, which is causing a exception that $(imageEl).parentNode = null
Product.Zoom.prototype = {
initialize: function(imageEl, trackEl, handleEl, zoomInEl, zoomOutEl, hintEl){
this.containerEl = $(imageEl).parentNode;
this.imageEl = $(imageEl);
this.handleEl = $(handleEl);
this.trackEl = $(trackEl);
this.hintEl = $(hintEl);
(snipped...)
I've tried debugging it in Chrome and adding breakpoints, but tbh I'm not actually sure how to use this information to find the solution.
Any help in pointing me in the right direction would be greatly appreciated.
You have to add an ID to the <IMG> in question. This ID should than be fed into the following code-space:
product_zoom = new Product.Zoom('IMAGE_ID', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
I would like to disbale the X-Frame-Option Header on client side on Firefox(and Chrome).
What I've found:
Overcoming "Display forbidden by X-Frame-Options"
A non-client side solution isn't suitable for my purpose
https://bugzilla.mozilla.org/show_bug.cgi?id=707893
This seems to be pretty close. I tried creating the user.js in the profile dir with the code user_pref("b2g.ignoreXFrameOptions", true);
but it didn't work. The second last entry seems to imply compiling ff with modified code? If this is the case, it's also not a possible solution for me.
I just wrote a little HTML Page with some JS that loops a list of YouTube videos by successively loading them into an iframe. I know youtube supports playlists but they suck and I dont want to download the videos.
Also, it would be nice if the browser only ignores the X-Frame-Option for local files. This would somewhat minimize the security hole I tear open by disabling this. As for Chrome, a solution would be nice but isn't that important.
I guess another approach would be to intercept incoming TCP/IP packets which contain a HTTP Respone and remove this header line but this is quite an overkill.
[edit]
Using youtube.com/embed is a bad workaround since a lot of videos dont allow to be embedded...
This can be easily achieved using an HTTP Observer through a Firefox extension. That observer will look something like this:
let myListener =
{
observe : function (aSubject, aTopic, aData)
{
if (aTopic == "http-on-examine-response")
{
let channel = aSubject.QueryInterface(Ci.nsIHttpChannel);
try
{ // getResponseHeader will throw if the header isn't set
let hasXFO = channel.getResponseHeader('X-Frame-Options');
if (hasXFO)
{
// Header found, disable it
channel.setResponseHeader('X-Frame-Options', '', false);
}
}
catch (e) {}
}
}
}
You can find further info such as how to install the observer on MDN[1][2]
[1] : https://developer.mozilla.org/en/docs/Observer_Notifications#HTTP_requests
[2] : https://developer.mozilla.org/en-US/docs/Setting_HTTP_request_headers#Registering
Using diegocr code, I've created an Firefox add-on to allow the displaying of webpages that have X-Frame-Options in their header, so they will be displayed when accessed via an iframe. It can be downloaded/installed here: https://addons.mozilla.org/en-US/firefox/addon/ignore-x-frame-options/
The Firefox extension mentioned by René Houkema in the other answer no longer works anymore so I created a new one.
https://addons.mozilla.org/fr/firefox/addon/ignore-x-frame-options-header/
This extension is also compatible with Quantum.
Source & updates:
https://github.com/ThomazPom/Moz-Ext-Ignore-X-Frame-Options
I am creating a style element and I need to put some CSS into it. The below code works in Chrome, Safari and FF, but fails in IE8:
var styleElement = document.createElement("style");
styleElement.type = "text/css";
styleElement.innerHTML = "body{background:red}";
document.head.appendChild(styleElement);
In IE8, the code fails when it comes to the innerHTML part. I've tried doing:
var inner = document.createTextNode("body{background:red}");
styleElement.appendChild(inner);
But this also fails with "Unexpected call to method or property access."
I'm looking for a workaround or fix.
Use .styleSheet.cssText
NOTE: this seems to be REALLY slow in IE8 compared to modifying individual elements style.
Is there a faster way to modify style sheets dynamically in IE?
This is slow in IE8:
styleElement.styleSheet.cssText = "body{background:red}";
This is also slow in IE8 (assumes the style object to be modified is the 1st style element in the head):
document.styleSheets[0].cssText = "body{background:red}";
This is fast in IE8:
document.body.style.background = "red";
Try to use styleElement.innerText