Draft.js modify text-alignment styles only on lists? - javascript

When using Draft.js, I'm able to use blockStyleFn to modify the styling of list items by using contentBlock.getType() === 'unordered-list-item' which only targets the li. I'm not able to target the surrounding ul or ol though.
When using textAlignment="center", it's causing some strange styling. I'd like to override this behavior by adding styles to the ul and ol tags as well as the li, but I'm not able to target the surrounding ul or ol using blockStyleFn.
Another issue is Draft.js adding HTML such as div and span tags in the li. Because of this, it's even harder to achieve my goal.
How would i go about using textAlignment="center" but modify it just for lists?

Related

TinyMCE and multiple CSS selectors on the parent css file handling

I got a problem with TinyMCE when it comes to parent site CSS selectors.
My TinyMCE opens an iframe. I add the parent css to the tinyMCE via content_css property, no problem from there.
Now imagine that i got a css style like this:
.mysite.default .content h1 {
...
}
.mysite.default .info h4 {
}
The problem comes when i want to access to .content h1 or .info h4.
As by default, by adding to the body the class .mysite.default, if you got an h1 or h4, those won't be applied of course due to the selector .content and .info in the middle.
So inside the iframe's body i would be able to set styles only for
.mysite.default h1 { ... }
.mysite.default h4 { ... }
Is there a good strategy to have this kind of flexibility?
Problem is that I don't have only one h1 or h4 or span styling, I may got many of them, that's why I need a flexible selector strategy for this...
I can't just copy all the styles of the parent dynamically at runtime, because what if one of the parent selectors has a border, margins, padding (because it might be a parent div wrapper container with some unique styling) ?
So it's not that easy as saying, "hey add every parent style and that's all", because the child will have extra borders, extra margins when starting to edit that div.
If I understand you correctly, you should be able to use
.mysite.default * h1 { ... }
to select all h1s inside other tags: the * wildcard covers any wrapping tag/class/id.
Hope that is helpful...!

delay css from firing using jquery

Is there a way to delay css from firing using jquery?
I have some css which displays the menu on hover of an li but its really fast and i would like to delay it by 1 second or so.
I know i can do stuff like:
$('div#new-menu-lower ul li:hover ul li:first-child ul')
.delay(800)
.queue( function(next){
$(this).css('display','block');
next();
});
But is there a way to keep the css and use JQ/JS to delay the css class from loading that would be better?
There is a way. If you keep your CSS in an external file, reference that through the linktag, then just after disabling the tag element, the DOM will stop referring the elements in the CSS. Then once u want to refer the elements, u can just enable the element.

not statement in CSS? Or way around? (superfish)

I have tried finding this on the net had no luck.
I'm using superfish dropdown and I need the top li to be rounded, but not li's with ul's inside, if you see here this is the test page where its demo'd:
jsfiddle: http://jsfiddle.net/UdvBC/
But i need to say sort of.. only apply the rounding on the top li not the ones in the dropdown, is this doable?
Thanks :)
You are looking to use the :first-child selector from what I gather...
http://www.w3schools.com/cssref/sel_firstchild.asp
It allows you to apply special CSS to the very first item. Just make sure to apply the first-child selector AFTER the styles applying to all items, so as to prevent overriding the first-child properties.
Example:
ul li { background: red; }
ul li:first-child { background: blue; }
Putting it in the opposite order would override the first-child CSS.
Edit: Thanks for the correction!
CSS cannot really accept not statements like that, so I'd suggest defining separate classes for the two types of li's.

css or javascript add a :hover style to complete line?

I have a PRE tag with a bunch of code in it and several lines. I want to apply a :hover style when a user hovers over a line.
Is there a way I could do this using CSS or Javascript? I looked at :first-line and couldn't find anything.
Any idea?
You have to use the <span class="changeonhover"> tag around each line and then you can have that effect.
pre tags are good way of dumping an array. Its not the best way to display the actual array or data.
If you want to do it in CSS:
wrap it around a div
.prediv a:hover{
background-color:blue;
}
And use:
<div class="prediv"><pre>CONTENT</pre></div>
This would hover the whole content not line by line.
My suggestion is use ul li tags and do a for loop in JavaScript and dump lines into li.
Hope this helps.

Mixing jquery dropline and dropdown menu

How to achive that following menu act normaly like dropline, but last sublevel to be dropdown instead dropline?
Tnx
To make sure I understand the question, are you wanting the sub-drop-downs to display in a vertical list instead of horizontally? If so, try adding this to your CSS:
.droplinebar > ul > li > ul > li > ul > li
{
float: left;
clear: both;
}
ADDENDUM (to get the menus lined up properly):
I haven't tested this, but see if changing line 16 to the following does the trick:
$subul.css({left:$curobj.position().left, top:this._dimensions.h})
You may need to do something like the above on $targetul as well.
2nd ADDENDUM
It's a bit dirty, but you can always give the sub-ul's a unique id, and them use css to line then up manually.
http://jsfiddle.net/DxpMJ/11/
In that example, I gave a unique id to the JavaScript > Traveling 4 menu, and manually set the margin-left and overrode the width with the !important trick (which you should look up if you're not familiar with it - very useful when javascript plugins are setting CSS styles without your knowledge). If you don't mind manually adding css rules for all of the menus you need to be vertical, I think this would work.

Categories

Resources