raphael text() not working in ie9 - text

Why is the following example not working in ie9?
http://jsfiddle.net/dzyyd/2/
It spits out a console error:
"Unexpected call to method or property access."

I found it pretty quickly. You created the element, but did not put it anywhere. Once it is added to the document body, everything seems to be fine.
this._width=300;
this._height=300;
this._bgSvgContainer = document.createElement("div");
//NOTE: add the created div to the body of the document so that it is displayed
document.body.appendChild(this._bgSvgContainer);
var bgCanvas = Raphael(this._bgSvgContainer, this._width, this._height);
this._bgCanvas = bgCanvas;
var num = this._bgCanvas.text(this._width-10,this._height-10,"1");

It's really hard to tell with such a tiny code-fragment (doesn't run on any browser for me), but it's probably a scope issue this in IE during events is completely different to this using the W3C event model. See: quirksmode-Event order-Problems of the Microsoft model

Related

#material material-component-web Invalid tab component given as activeTab

firstly let my say that the mdc documentation is difficult for non-pros like me.
I'm using Elixir Phoenix and Brunch.
I import and everything is fine.
import {MDCTab, MDCTabFoundation} from '#material/tabs'; import
{MDCTabBar, MDCTabBarFoundation} from '#material/tabs'; import
{MDCTabBarScroller, MDCTabBarScrollerFoundation} from
'#material/tabs';
I manually instantiate the tab bar in a separate function that I export
export var Tabbable = {
run: function(MDCTabBar, el){
var myDynamicTabBar = window.myDynamicTabBar = new MDCTabBar(document.querySelector('#' + el));
Which is following the documentation like this
const tabBar = new MDCTabBar(document.querySelector('#my-mdc-tab-bar'));
but is slightly different to the documentation's use of the tab bar in their code snippet
var dynamicTabBar = window.dynamicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#dynamic-tab-bar'));
But, whenever I try to use mdc I get a 'not defined' error. Therefore, I'm not using it :-)
Now, when the user clicks the tab bar I capture that like this:
myDynamicTabBar.listen('MDCTabBar:change', function ({detail: tabs}) {
var nthChildIndex = tabs.activeTabIndex;
updatePanel(nthChildIndex);
});
The subtle difference is that my myDynamicTabBar is MDCTabBar but the documentation's dynamicTabBar is mdc.tabs.MDCTabBar
My tab control works, but it throws an error only visible in the console:
Uncaught Error: Invalid tab component given as activeTab: Tab not
found within this component's tab list
which is likely because I'm not using mdc.tabs? The documentation notes the change event happens on the MDCTabBar.
Therefore, how do I get rid of this annoying error in the console?
And why can I not access the global mdc? I have tried this in my Brunch file
globals: { mdc: "#material"}
But no good.
I'm right behind you on this! I'm frustrated with the docs too :(
You answered your own question in this Elixir thread which is very informative.
I found the real solution in this thread https://github.com/hyperapp/hyperapp/issues/546
MDCTabBar automatically initiates its children. So initiating tabs will result in that error.
The fix is to just initiate MDCTabBar

jspdf and addHTML / blurry font

I generate pdf file from a HTML-page via jspdf plugin addHTML.
It works but the rendered text / font is really blurry, the original HTML page is not. Rendered images are fine, only text is the problem (see attached images).
original_image: http://111900.test-my-website.de/stackoverflow/orig.jpg
blurry_image: http://111900.test-my-website.de/stackoverflow/blurry.jpg
I read all google results the last three days - maybe I am the only person in the world I have exact this problem?!?! :/
I added the following scripts in my code:
spdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js
pdf generation code:
pdf.addHTML(document.getElementById("container"),10,15,function() {
var string = pdf.save(filename);
});
Is there a quality option in jspdf I missed?
How can I render the font?
Thanks for reply,
Thomas
I found that when creating a PDF and the text was blurred when using addHtml this was because of the width of the web page. Try using it with the browser not maximised as a test.
My solution was to add some styles to adjust the width before calling addHTML with a width parameter that matches the styles I added. I then remove the additional styles in the function that runs after addHTML.
I had the same problem and I resolved it.
Actually, the main issue here is to specify the 'dpi' to avoid having a blurred image. In addition to that, try to avoid any 'smoothening' features beacuse it may make it worse. I have taken a look around the API and other discussion about it and I came back with the following solution:
1- update your version of html2canvas : many blurring issues have been fixed after the 1.0.0-alpha release.
2- use the following properties :
const context = canvas.getContext('2d');
context.scale(2, 2);
context['dpi'] = 144;
context['imageSmoothingEnabled'] = false;
context['mozImageSmoothingEnabled'] = false;
context['oImageSmoothingEnabled'] = false;
context['webkitImageSmoothingEnabled'] = false;
context['msImageSmoothingEnabled'] = false;

Identifying an element in Visual Studio UI coded test

I'm trying to set up a coded UI test to allow me to check for an error message on a login. The test runs, but I'm struggling to get the assert to work.
The response that comes back is nested as follows:-
<div class='ui-errors'>
<ul>
<li>Your password is invalid</li>
</ul>
</div>
What do I need to set up to check the first li in the div of that class in an assert?
Coded UI can capture DIV. In the following code I've created a custom DIV object from your provided example. AdrianHHH's answer will definitely get you information you need to insert in to my example.
var error = new HtmlDiv(new Parent(RootParentWindow));
error.SearchProperties.Add("Class", "ui-errors");
var errors = error.FindMatchingControls();
foreach (var item in errors)
{
Assert.IsTrue(item.GetProperty("InnerText").ToString().Contains("Your password is invalid"));
}
Coded UI does not really look at DIVs or ULs etc. Coded UI looks at what is drawn on the display. I suggest you use the Coded UI cross-hair tool to examine the error message then add an assertion to check for the message. You might also examine the same area of the screen for a test which passes to see how they differ.
If you are hand coding your test rather than letting Coded UI generate the code for you, I recommend creating a sandbox project and recording the assertion into that. Then copy the useful ideas from the generated code into your own test code.
If you can get a sample of the page where the assertion is needed I could create it for you, otherwise do what AdrianHHH said.
In case you don't know when you use the assertion tool, all the options you get are different ways to assert that particular control, eg you could assert if it exists or if the inner text is equal etc.
yonitdm answer will solve your problem, but as per your words, "first li in the div of that class" try below.
// Find Error Div
var errorDiv = new HtmlDiv(new Parent(RootParentWindow));
errorDiv.SearchProperties.Add("Class", "ui-errors");
errorDiv.Find();
// Get UL - First item in div
var errorUL = errorDiv.GetChildren().First(); // or GetChildren()[0]
// Get all LIs and take first item
var firstLI = errorDiv.GetChildren().First(); // or GetChildren()[0]
Assert.IsTrue(firstLI.GetProperty("InnerText").ToString().Contains("Your password is invalid"));

jscrollpane colors

I'm trying to modify the scrollbar colors for jscrollpane.
This didn't work for me:
$('a.athlete_popup_content').click(function(){
$('#box_on_top').append($content); //.athlete class is within $content
$('.athlete').jScrollPane({autoReinitialise: true});
$('.jspVerticalBar').css('width', '10px');
$('.jspTrack').css('background','lightgrey');
$('.jspDrag').css('background','black');
$('.athlete').jScrollPane({autoReinitialise: true});
});
i tried placing athlete class both before and after... it doesn't do anything... also, the second time this runs, the scrollbar doesn't appear at all.
any help?
-=update=-
For the issue where it does not appear correctly the second time, I had to destroy the jsp on close and it started working.
var element = $('.athlete').jScrollPane();
var api = element.data('jsp');
api.destroy();
I was unable to get the colors to work.
I am including the .css initially, but want to change the colors on load. I wasn't able to figure out this issue so I just modified the .css
Thanks!
Your code es working perfectly, as you can see here. If you are calling jScrollPane() on a click event then the tags you are trying to reach (.jspVerticalBar, .jspTrack, .jspDrag) are created after css() calls, then you should use .on() to attach those calls to the event.

sharepoint: Using a Content Editor Web Part this error occurred:"Cannot retrieve properties at this time."

I have a content editor web part. Whenever I edit the content and then click save, the following errors occurred:
"Cannot retrieve properties at this time."
"Cannot save your changes"
How do you fix this?
I tried googling it.. there are some similar cases but not exactly the same. I tried this link:
www.experts-exchange.com/OS/Microsoft_Operating_Systems/Server/MS-SharePoint/Q_21975446.html
and this one:
support.microsoft.com/kb/830342
and this one:
blogs.msdn.com/gyorgyh/archive/2009/03/04/troubleshooting-web-part-property-load-errors.aspx
I found the answer!! apparently using mozilla firefox it worked. Then I found out that there is a javascript error in IE, this javascript error doesnt happened in firefox. how ironic!
Are you doing anything to modify the URL in an HTTPModule? I ran into this problem on a publishing site where a module was hiding the "/pages" part of the URL. Modifying the CEWP via the page when accessed w/o the "/Pages" wasn't working, but with the "/Pages" it was.
Example:
Got error: http://www.tempura.org/webpartpage.aspx
Worked: http://www.tempuri.org/pages/webpartpage.aspx
I don't see how this is an answer -- "don't use IE".
In my case (and apparently many others) it has something to do with ISA + SharePoint + host headers. I will post the fix if I find one.
I have had problems with this before and have found recycling the Application Pool often corrects the problem.
Rodney
IE8 -->
Tools --> Compatiblity View Settings --> CHECK THIS : Display All Websites in ....
If you are editing a webpart page, make sure that it is checked out. Sometimes the document library the webpart pages are in will have a "force check out to edit" option and it will give you errors if the webpage itself isn't checked out.
I had this same error recently. In javascript, I had written some prototype overrides (see examples below) to add some custom functions to the string and array objects. Both of these overrides interferred with SharePoint's native JavaScript somehow in IE. I removed the references from the master page and this issue was FIXED. Currently trying to find a work-around so I can keep them because things like the string.format function is very nice to have...
//Trim
if (typeof String.prototype.trim !== 'function') {
String.prototype.trim = function(){
return this.replace(/^\s+|\s+$/g, '');
}
}
//Format
String.format = function() {
var s = arguments[0];
for (var i = 0; i < arguments.length - 1; i++) {
var reg = new RegExp("\\{" + i + "\\}", "gm");
s = s.replace(reg, arguments[i + 1]);
}
return s;
}
I also faced the same problem. Finally it worked for me using url /Pages/Contact-Us.aspx instead of clean URL. It worked only with IE browser. Don't know why this was happening but anyhow it worked with me.
Use IE browser
Use Pages in the URLinstead of clean URL.
to me,
compatibility mode in IE8, to work

Resources