How to create boarders in a Table in SummerNote - editor

When inserting a table into the editing area of Summernote editor, how do I outline the boarders of the table sections with a line? For example - the way Word does it's tables.
All help appreciated.

If you open Microsoft Word and insert a box, you will see that the boxes have boarders around them. SummerNote does display a very very faint line around the boxes of the table but on a white background it's impossible to see. I would like to draw darker and even thicker lines around the boxes. I would like to provide an example from Word but can't see a way to do it. Yes, I think I can edit CSS given some guidance.

Summernote calls tableClassName when table is created via jquery's addClass method. So I used that to inject my jquery code like this:
<script>
$('#xyz').summernote({
tableClassName: function()
{
$(this).addClass('table table-bordered')
.attr('cellpadding', 12)
.attr('cellspacing', 0)
.attr('border', 1)
.css('borderCollapse', 'collapse');
$(this).find('td')
.css('borderColor', '#ccc')
.css('padding', '15px');
},
});
</script>
Link for Information

Related

Statsoc style package giving table positioning problems

I am formating a paper in statsoc style. I inserted a table. But it moves to the top of the page even though it should be placed in the middle of the page after some text.
I tried using float package with table options [H],[H!], [h]. But that results in printing [H] (or whatever the option i type) before caption like this:
[H] Table 1: table_caption
Please help. Really appreciate it.
Within the statsoc.cls, you need to change def\fps#table{tbp} to \def\fps#table{htbp}.

JQuery: New "Pop-up Div" on mouse hover at relative postion of "My Div"

I want to create a "mouseover" pop-up div dynamically, just like What we get in Stackoverflow (When mouse over a tag)/Google+ (when mouseover a friend image).
Curretly I am able to get the text from AJAX, but i am unable to place that in a "Catchy cool" look & feel.
Is there any wasy way to do this in JQuery?
I know that it's not the right way to help but I wrote some code for you:
http://jsfiddle.net/w8qan/11/
It is not perfect - i recommend reading about jQuery's offset() and position() methods and differences between them.
If you want you popups "stylish" - use CSS the way you want, use jQuery's animate(), show(), slideDown(), etc. I focused on displaying your description where you want it.
You can use the .animate() method to create cool custom animations..
For more widely-used effects have a look at this list of jQuery options http://api.jquery.com/category/effects/

jQuery UI Accordion (or similar) with multiple header lines

I'm trying to show a list of messages to the user where the first two lines from each message are showing and they can click to see more.
So I was thinking the accordion would be an interesting way to do this. The only problem is that I can only show the normal single line header row. Is there a way I can show multiple lines or do I need to look for an alternative control like Kwicks?
Ive just given it a go and you can use a < br > inside of the h3 to give it an extra line, or maybe try setting the wraping attributes for the css if you cant manually put a line break in.
Take a look at http://jsfiddle.net/YY7ML/ for a basic example.
Or maybe I have misunderstood?

Wrap text in list items/buttons instead of hiding the overflow

I'm trying to override the default behavior of list items and buttons in jQuery Mobile, which has text which doesn't fit on one line as hidden overflow.
If you view this on a skinny browser window or iPhone you'll see what I mean: http://m.gizmag.com
I'd like to be able to wrap the text in the h3 and p tags of each list item onto new lines.
Thanks in advance!
Try setting a style of white-space:normal for the elements.
I just did this with an anchor (<a>) element inside a jQuery Mobile listview-styled li, and it worked to wrap the text as I expected. I used Chrome's developer tools to determine where the CSS attributes were coming from and interactively changed them to make it work the way I wanted.
--
Derek
If feasible, enclosing it inside a <div> will also make it wrap. (But finding the affected element and declaring white-space:normal is the more proper solution)
Source: http://forum.jquery.com/topic/list-items-are-truncating-text-is-there-a-way-around-this

Sifr 3 a:hover not active outside text

I have an unordered list with links. The links have display:block; in the css so the hover will also have effect in the padding surrounding the links. I replace the list-items with sIFR 3. In the sifr-config.js I specify a hover color for the text but this only works on the text itself, not on the padding surrounding the text. Is there a solution for this problem?
I got it working for the padding on the left side of the text by adding margin-left:'25' in the config for .sIFR-root but margin-right doesn't have the same effect. Help greatly appreciated ;-)
It's hard to say based on your question, but if you replace the individual list items, the entire list item will be a sIFR link. If you want more space around the text you should do this within the Flash movie rather than in CSS. You can use the tuneWidth, tuneHeight, offsetTop and offsetLeft parameters for this.

Resources