Just starting off with YUI and I'm struggling a bit.
I am very interested in the example: Button Control: Using A Menu Button To Replace A Element here http://developer.yahoo.com/yui/examples/button/button-menu-select_log.html .
The example seems very well documented and explained, but I am struggling to get it to work in jsfiddle or codepen.
I guess that I am not sure on how to start the javascript.
What I've been doing is copying and pasting the HTML, CSS, and Javascript into jsfiddle, but I think there is something missing along the lines of YUI().use('node', function (Y) {
I was wondering if someone could maybe take that example and pop it in a jsfiddle or codepen for me, I really have tried very hard to help myself but now feel a bit hopeless.
FWIW I even struggle to get a simple YUI 'Hello World' example going in jsfiddle.
Thank you very much for any help!
Well that example is YUI2, not YUI3, so it's not going to work unless you wrap it in a yui use and bring them in that way YUI 2 in YUI 3
Related
I prefer OneUI V3.0.2 to 2.0 except for one element, which is paging. I think the new style looks horrible.
Here is an example of the old paging style:
And here is an example of the new styling:
I would like to replace the new styling with the old, but just for this one element, or at least to create my own style for paging.
I have looked at the OneUI documentation, but there is something that I don't understand. I am using a dataView in my layout, but when I go to look at how things are implemented, it always seems that they are using raw html, so there is a table element in there. I don't understand that. I want to know how to style a custom control, not html.
Any help would be greatly appreciated.
Styling is done by your browsers rendering engine. It applies CSS to HTML. That's how it works. So you need to create some CSS with !important to fix it.
Easiest way to figure it out: load the page, use FF or Chrome Dev tools that allow you to live edit the CSS and see the result instantly. Once you have it, copy to a CSS file and add to your project.
Comparing to a V2 page makes it easier to figure out.
Just reading the CSS source is rather a pain. The Dev tools rock
I find I can't edit a svg text node at any time like HTML node by using "contenteditable" attribute. How mightI solve it? I have referred to this stackoverflow post. But it doesn't work.
How can I get the result that when I double-click a svg text node to edit it?
Please provide an example if you can explain it. Thank you.
Old Questions desereve an answer, too. So here it is:
contenteditable is not in the SVG1.1 Specs which means it does not work.
However you can make the sorrounnding html editable which causes the whole svg to be editable.
I anyway suggest NOT to do that because it most likely will destroy the whole svg when you try to edit it.
In the SVG2 specs the contenteditable attribute will be present!
Is it possible to reproduce what is on the picture below in ListView, padding/margin icon to the right.
http://img801.imageshack.us/img801/4043/listview.png
My first question here, so I couldnt post the picture here.
Basically I need to move the ListView icon more right, I am reproducing file/directory browser, so the fails that are in a directory need to be below them and slighty right like in the picture, I have everything else figured out.
You should be using a TreeView control:
http://msdn.microsoft.com/en-us/library/1dtsdfkx.aspx
But if you insist on hacking a ListView to render this way, you'll simply have to take over drawing each row yourself. You can do so using the OwnerDraw property, though be warned that there's a lot of corner cases here so you should do a lot of reading to see what people have had to deal with when implementing this:
http://msdn.microsoft.com/en-us/library/system.windows.forms.listview.ownerdraw.aspx
I'm trying to get qTip working on my own project, and the qTips do show up, but without styling. I've tried googling and poking around Stackoverflow, but to no avail.
For example, if I look at the qTip demo page, here, I can see the styling. But when I click the jsfiddle button on the top left corner, (which takes me here) the styling is gone.
Anyone know what's going on? It makes it impossible to style my own qTips!
That's because the code is a bit different on those two pages
in the original/styled the it use classes: 'qtip-tipsy qtip-shadow'
while on jsfiddle it use classes: 'ui-tooltip-tipsy ui-tooltip-shadow'
change on the jsfiddle to classes: 'qtip-tipsy qtip-shadow' and its all good...
as I found out a few days ago when you click an extension button and popup shows up, its height is much higher than it needs to be if you need the height to be less than 350px. When something happens in the popup (animation e.g.) the height is adjusted properly according to the content. Setting height to html, body and general wrapper element didn't help. It might be some bug in the latest update of Chrome, I cannot test it in earlier builds, because of autoupdate.
I'll be thankful for any thoughts and advices.
Libor
UPDATE: I started to examine what can possibly cause this behaviour and found out this happens because of Twitter and Google Plus share buttons. They both modify DOM structure adding script tag which adds iframe. When commented, popup bubble appeared in correct size. The weird thing is facebook like button script does more or less the same, but it doesn't mess up the layout at all.
Like it was said here, the good solution to solve this problem is changing <html> to <!doctype html>
Same thing here with my extension and Chrome 19 on Windows 7. I must note that there were no problems with the previous version of Chrome. As you stated the issue shows up only on the first appearance of the popup - it shrinks correctly afterwards).
I'm using jQuery in my extension and I think I've partially solved it by adding
$("body").fadeOut(10).fadeIn(50);
though it doesn't always work (it probably will if you increment the fadeIn delay but!). Hope someone can provide a better solution to this.
EDIT. This should be guaranteed to always work (using your hint) although the user might see the resizing happening for a fraction of second:
$(window).load(function() {
$("body").fadeOut(10, function() { $(this).show(); });
});