I've sent various HTML emails in the past, and have seen the pretty large limitations associated with it. What I really need is the ability to have regions with a show/hide ability - click the plus sign or a header to toggle.
I'm figuring JS is out of the picture, CSS might be a possibility. I only need it to work in Outlook 2007-2010. Any suggestions?
Thanks!
You can do this in Outlook using anchor tags. The trick is to create 2 tables that are separated by a td cell with a large height specified so that you don't see the second table.
Both tables are exact duplicates except that table 1 has the show link, while table 2 has the content you want to show, and a hide link.
When you click the anchor tag, the email moves down to the position specified in your second table. As the content in both tables is the same except for the show/hide box visibility, you've created an illusion that the box is toggling.
If you have more than one show/hide box, you'll need to create more tables. The email will get really long, but the toggling effect still works in Outlook.
The anchor tags:
Click here to show content
<a name="section1"></a>
Here's a quick example: http://jsfiddle.net/mjcookson/nq3Re/
Update to comment: Also, your email might not fill the entire viewport, so a gap between tables is used to avoid seeing the second table immediately after the first table.
You can't do that in Outlook. Its HTML email rendering engine is pretty bad. I have seen it done for the mobile webkit and android browsers.
See this article: http://coding.smashingmagazine.com/2011/08/18/from-monitor-to-mobile-optimizing-email-newsletters-with-css/
Related
I have a table, this table gets data from a server, and has a few fields,
The data from the server is plain text, but no limit on how many characters.
The table should not be over 900px wide.
View example
As you can see in my plunker some texts gets very long, so they take several rows, while some fit on the first row.
In my opinion, this is not readable at all, it's horrific.
And here's the real problem, since this should be printed some time, all text must be visible.
I have tried fooling around with some fixed tables and overflow: hidden properties, though this does make the table more attractive, a lot of text would be litterly unreadable
Basically what I am asking is if there are any tried methods for displaying (maybe) a lof of texts in tables, and have it readable?
Edit: Okey, as it seems this is the way to do it, there can be some stylig done, but nothing major. There's is one thing that bothers me though, and that's that the title field (field1) is pushed to the left so much.
I know I can set width, but that requires the table to be fixed, and that will cause problems, I need the table to be as dynamic as possible.
Is it possible to set priortiy on which cells the table will break words on first? So that maybe field 1 and 5 have a low priority, so those cells will be less likely to have line breaks?
The ideal solution, and the solution I have used in most of the projects i've done is to add a modal.
For example, if you have a pragraph of texts, the best thing to do it to display a few words and then add a View more button which will open up a modal which will display the entire paragraph.
You can also try to add a View button in the end of each row in another column. Clicking this would open a modal which shows all the data in that row entirely.
This way you can show some information in the table without making it ugly and also provide all the details in the table itself(although its not present in the table view).
It looks fine to me as well, although you may try alternating row colors... add the following rule to your css... you can of course change the color to whatever you like. I find it improves readability:
tbody tr:nth-child(odd) {
background: #eee;
}
Here's the case: I have a series of thumbnails in a page, and I would like to display several keywords over each image when the user hovers with the cursor. Each of those keywords are anchor tags that point to a search query. And each thumbnail (the image) should also be clickable (through the empty spaces that the keywords leave) and point to a specific page.
I have everything already coded, I'm just missing a way to display the keyword anchors over the image anchors. I already tried with an onclick="window.location.href=..." but when the user clicks the keyword, the onclick is also triggered (for instance: if I ctrl+click on a keyword, i get the keyword search on a different window, but the main window content changes as well).
Any help will be much appreciated. Thanks!
This is quite common and can definitely be done with plain HTML and CSS. You can also do it with JavaScript, but I prefer to avoid doing so if possible.
This example is perfectly valid HTML/CSS and should have no weird browser rendering issues (even as far back as IE 6).
http://jsfiddle.net/2JD76/1/
Basically you have a containing element, in this case a div, which has your linked thumbnail and linked keywords. They're hidden by default and only shown when the containing div is hovered.
The linked thumbnail is absolutely positioned so that it's taken out of the page flow which then allows the linked keywords to appear on top. I then use z-indexes to make sure that the keywords are always on a layer that is higher than that of the linked thumbnail.
You can not. It is illegal html.
Attach a click handler that changes the current location instead of the "greater ".
I was going to answer with a long reply but, well check out my Jsfiddle here. I was trying to solve something before and well...check it out.
http://jsfiddle.net/somdow/KSt6a/
If you look at the code, its doing exactly what you are describing.
On my Jsfiddle, theres a div box with space for an image(this is wher YOUR image would go), The image is on the code but not on the jsfiddle so youll see the alt tag....Anyways so, on mouse-over, it brings up another div with text dynamically created inside of it.
All you have to do is replace the image content with your own image, then Insert the links/keywords links you want into this line
.prepend('<div class="portSecRollOver"><div class="portSecInner"></div></div>');
and stick your words in between the <div class="portSecInner"> **YOUR WORDS HERE** </div> line
And change the CSS to fit your needs.
oh AND ps, DELETE this line (below) which is the one that dynamically appends text inside of "portSecInner", since your going to insert your own words, then you dont need this line.
$(this).find('.portSecInner').html("<h3 class='h34roll'>" + $(this).find('img').attr("alt") + "</h3>");
http://weknowwhatyouredoing.com/
I'm trying to make a table like this one where I have a profile image to the left, a bold title/name and text underneath the bold title/name, and date/time stamp underneath that... basically the same views as on that website (http://weknowwhatyouredoing.com/) or better (or twitter tweets).
Anybody know of any tutorials on how accomplish this? I'm currently using table with multiple columns but it seems that when one cell is big, all the cells in that row become the same height and i don't like that. In android this is called a list view but i'm not sure what it is in the html/css world, any help please? Thanks in advance
You could make multiple tables floating next to each other. The elements on the website you show aren't aligned as fa as I can tell.
A tutorial on rowspan and colspan can be found here.
If you make the image span 3 rows, you can put the bold text, content and date stamp each into one row. With valign you can vertically position elements within a row if the row becomes higher than the content. This will probably happen if the 3 rows together are higher than the one spanning row containing the image.
As a quick fix for your issue with the equal row heights, you could use the same layout method as they use on weknowwhatyouredoing.com.
Wrap each column in a separate <div>, and then place your <table> inside.
4 containers, 4 tables with independent row heights.
You shall give a look at the Twitter Bootstrap CSS library Twitter Bootstrap
It's pure HTML5/CSS using only divs.
for improve your knowleges in HTML, you can see W3C (Word Wibe Web Consortium) specs. For sample, if you see this page, W3C explain all structure, attributes, for Table element.
You can find lot of tutorial in google ( search "tutorial create Table HTML" ).
Also, you can help you to understand website structure with browser plugins that display hover element in specific website. ( firebug for Firefox and Chrome, Dragonfly for Opera browser...)
Why not use multiple list elements? Tables definitely don't give you flexibility for responsive designs. Making multiple columns of list elements can be rearranged as needed with limited restrictions
I want a UI that is basically a document having souped-up paragraphs that are (a) editable and (b) each have a column of meta-data/widgets on their left. That is, I want a tree layout that looks like an HTML document, except:
to the left of each paragraph is a column of controls like buttons, state indicators, very short textbox fields (3 chars), and
if you click on a paragraph (or hit an edit button on the left) it morphs into a textarea you can edit; when you are done, you hit a done button on the left (probably the edit button morphed into a done button) and the textarea goes back to being a paragraph.
When you hit edit, some labels in the meta-data on the left should also morph into text areas, etc. and back again when you hit done. Also, I want to be able to hit a button and show only part of the paragraph (imagine a paragraph having a title and a body).
I'm sure I can cobble something together that does this if I hit it over the head with enough HTML tables and GWT Panels, but I'm trying to do this in as lightweight manner as possible, given that such documents of these things may be large, I want it to resize naturally in the browser, and since browsers already naturally lay out things that look like documents I should be able to use very vanilla HTML for most of it.
I've spent several days being frustrated with GWT Panels of various kinds. Ideas?
You should just be able to hide a Label and show a TextArea, and then switch back when you're done editing. Set whatever styles you need to on them - I think a Label comes out as a <div> and a TextArea comes out as a <textarea>. No panels required... just a <div> container to put these two widgets in.
I'm new on this particular project, and I've been tasked with resolving an issue that's appearing in IE8.
If you check http://funds.ft.com/ETFHomepage.aspx, There's a section called "News". In that section, there's a column called "Most Popular ETFs". This should be the same width as the "Recently Viewed ETFs" column.
For reference, this page is appearing correctly in Firefox. Can somebody please point out what I can do with CSS or (some other means)* to resolve this?
*I know the best way to resolve this issue is to scrap the terrible design and implement it correctly!! :-) -- we're actually doing that right now. It's a big job, so it's taking a long time. In the mean time however, we have to fix the bugs as they appear. Thanks
Update: just to note what I've said to Hristo, "I think the problem is with the table (rather, nested tables) on the left. The table in the center has its width defined by the image, and the table on the right doesn't have an image so it gets crushed"
Well the reason this is happening is because of the url you have under the "Alphaville: Overcoming the Volcker rule, with ETFs" header. Since the url has no whitespace in it, the table tries to give it space. So there are a couple of ways to fix this problem:
Plain text urls aren't very becoming on a webpage (especially when they're not in anchor tags so you can click on them.) Could you update the content so that you don't have a raw url in your content?
If you must be able to handle long lines of text with no whitespace then you need to figure out how to change the layout of the page so it forces the text to either wrap or clip to fit the container. Try playing around with putting "table-layout: fixed" on your tables to force the column widths to be sized based on the table's specifications only (instead of content). Firefox seems to be wrapping on dashes and slashes in the url whereas IE only wants to wrap on the dashes in the url.
I would say your layout is fine, and you just need to fix the content generation so it doesn't include any long plain text urls (option 1 above)
EDIT: If you do decide to go with option 2 above, then look into the css rule "word-break: break-all". It is IE only and it forces the text to break as soon as it reaches the end of the container. Not good for words, but it works for url's. So you couldn't apply this to the whole news table, but you could to just the cell that contains the url.