HTML Collapsible with text instead of image? - html

How can I make an expandable text using only HTML?
I have this working code that I had adapted from a tutorial, but I can't find the original tutorial to go backwards. Right now, the image is clicked and text expands below it. The tutorial originally had text, and I changed it to an image, but now I want text for a different project and can't figure it out for the life of me. (Links, etc. have been changed for stackoverflow)
<table style="width:100%"><tr><td>
<img src="https://i.imgur.com/PYIzMc6.jpg" width="200" title="Click to show/hide text" onclick="if(document.getElementById('sizes') .style.display=='none') {document.getElementById('sizes') .style.display=''}else{document.getElementById('sizes') .style.display='none'}"/></td></tr><tr>
<td>
<div id="sizes" style="display:none">
one<br/>
two<br/>
three<br/></div></td></tr>
</div></td>
</tr></table>
I can't figure out how to get the part that is clicked to expand the links to text instead of an image - or both if possible.

You write "using only HTML" but are using inline JavaScript, so I assumed that a JS solution analogous to your example is fine.
Just change your <img> tag to a <span> (or a <p> paragraph, or whatever suits your needs` and remove the image-specific attributes.
Also, your markup had a few unnecessary tags bevore the closing </table> tag.
<table style="width:100%">
<tr>
<td>
<span
title="Click to show/hide text"
onclick="if(document.getElementById('sizes') .style.display=='none') {document.getElementById('sizes') .style.display=''}else{document.getElementById('sizes') .style.display='none'}">
toggle list
</span>
</td>
</tr>
<tr>
<td>
<div id="sizes" style="display:none">
one<br/>
two<br/>
three<br/></div>
</td>
</tr>
</table>

Related

Basic HTML table formatting for email

I am making a simple newsletter layout that can only contain basic HTML but am getting caught up on formatting it properly. I have very little html experience, if I could use css I could lay this out but this is meant to be low level html that most e-mail clients can display properly.
This is a bit of code that I've done to get the image and a button (in the position of button 2) looking correct but it's getting the top and bottom buttons sitting there correctly that's the issue.
<table width="100%" style="text-align:center;">
<td>
<img src="http://localhost/temp/leftpic.png"></td>
<td>
<img src="http://localhost/temp/button.png"></td>
</table>
This is my design outcome. With the outter border being a table border centered in the middle of the page.
Is it possible to format something relatively close to this without using css?
I appreciate any help, cheers.
You CAN use css, you just have to avoid third-party files. You need to define the CSS rules inline, that is, in the style attribute, as you are already doing it for table. However, your HTML is invalid. You need to have tr elements outside your td elements and it is healthy to actively wrap your tr elements inside a tbody, which should be the child of your table.
By the way: the reason one should avoid third-party css in this case is that it might mess the design of the page of gmail/yahoo.
Something like this will start you off... This is with no CSS and no styling (other than what you have originally).
Although you state no CSS yet your first line is styling (albeit inline). Did you just mean no external file?
This is how we used to do layout before CSS, so this is using HTML tables:
<table width="100%" style="text-align:center;" border="1">
<tr>
<td width="50%">
<img src="http://localhost/temp/leftpic.png" width="390" height="480" />
</td>
<td>
<table>
<tr>
<td><input type="button" value="bn1" /></td>
</tr>
<tr>
<td><input type="button" value="bn2" /></td>
</tr>
<tr>
<td><input type="button" value="bn3" /></td>
</tr>
</table>
</td>
</tr>
</table>
Since you have a fixed height of your image on left, you can also use
<tr height="160">
Since 160 * 3 = 480 (the height of your image)
See an example here https://jsfiddle.net/on6ytfyn/
You probably want to remove the border in the first line of code too.

Nesting Div To Make Button Around Tel: Link?

I tried to nest a div before closing my tag to make a button around a tap to call tel: link:
<a href=”tel:+18888888888">
<div>
<table>
<tbody>
<tr>
<td rowspan="2"><img id="phone" src="/phoneimg.png" alt="xx"></td>
<td rowspan="2">Tap To Call NOW! 888.888.8888</td>
</tr>
</tbody>
</table>
</div>
</a>
When I upload the html file to my host I get a 404 error when I tap the button.
When I remove the div, and the closing tag is right behind the a href=”tel:+18888888888" tag (i.e. it has correct syntax without a div container before the closing tag) it works but is simply an undecorated link.
Any way to do this?
Thank you.
As dfionov correctly stated, you cannot include block elements inside inline elements. Anchors (<a>) are however an exception to the rule in HTML5, as explained in another answer.
I would like to also mention that for your use-case, tables should be avoided. They are for displaying tabular data not aligning an image.
There are a number of ways to do this with CSS, I would probably suggest using inline-block because it works on all modern browsers and is easier to understand than many of the alternatives.
<a href="tel:+18888888888">
<img id="phone" src="/phoneimg.png" alt="xx">
<span>Tap To Call NOW! 888.888.8888</span>
</a>
Corrected code:
<div>
<table>
<tbody>
<tr>
<td rowspan="2"><img id="phone" src="/phoneimg.png" alt="xx"></td>
<td rowspan="2">Tap To Call NOW! 888.888.8888</td>
</tr>
</tbody>
</table>
</div>

Email HTML signature adds blank HTML elements on web clients, causing layout to break

I've been trying to fix this for a few hours already, and I just can't seem to find the problem.
I have this HTML email signature that has to wrap properly on low resolution devices.
This is a mockup with how it should look on large-screen devices:
And this is a mockup with how it should look on small-screen devices:
This is the markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<table width="100%">
<tr>
<td>
<!-- TEXT CELL -->
<table align=left width=160>
<tr>
<td>
<p>
<span style='font-size:12.0pt;font-family:"Times New Roman","serif"; mso-fareast-font-family:"Times New Roman"'>sep</span>
</p>
</td>
</tr>
</table>
<!-- TEXT CELL -->
<table align=left width=160>
<tr>
<td>
<p>
<span style='font-size:12.0pt;font-family:"Times New Roman","serif";
mso-fareast-font-family:"Times New Roman"'>ult</span>
</p>
</td>
</tr>
</table>
<!-- TEXT CELL -->
<table align=left width=160>
<tr>
<td>
<p>
<span style='font-size:12.0pt;font-family:"Times New Roman","serif";
mso-fareast-font-family:"Times New Roman"'>tur</span>
</p>
</td>
</tr>
</table>
<!-- TEXT CELL -->
<table align=left width=160>
<tr>
<td>
<p>
<span style='font-size:12.0pt;font-family:"Times New Roman","serif";
mso-fareast-font-family:"Times New Roman"'>ura</span>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
The problem is with the web clients. For some reason, there's always an extra HTML element appended next to each one of those 4 tables:
And these are the results:
MS Outlook 2007 (properly displayed):
Apple GMail client (properly displayed and wrapped, since it's small-resolution screen):
Outlook web (there's an extra HTML element that breaks the layout, details in the pic):
GMail web (somehow similar to the Outlook web):
I'd also like to mention that I tested these with Litmus and all looked good. I'm not sure why things are different in these let's say "real-world" situations.
Could be related to my process of putting the HTML signature:
Open the HTML page containing the signature
Select all the content within that page (ctrl+A)
Copy all the content (ctrl+C)
Open MS Outlook 2007
go to Tools -> Options -> Mail Format -> Signatures
New signature -> Paste the content into the textarea -> Save the newly created signature.
I'm pretty confident what you are asking for can not be done in Outlook '07 in a signature.
This is because Outlook '07/'10/'13 use the Microsoft Word engine and add their own junk after send (the p msoNormal tags). Because it is added after send, you can not use inline CSS. In html email design, often designers will add styles to the style tag to zero out these unwanted tags in anticipation of Outlook doing it's thing. This wouldn't work for you because you are are using a signature only. You can try including a <style> tag in the signature html, but I'm doubtful it would work.
The best suggestion I have to mimic this kind of behavior is with . Very hack way, but it may be the only option you have for "floating" if sending from Outlook '07. Example:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
Text 1
Text 2
Text 3
Text 4
</td>
</tr>
</table>
Something like this might also work, (definitely a lot neater) but I haven't tested it:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<span style="width:150px;">Text 1</span>
<span style="width:150px;">Text 2</span>
<span style="width:150px;">Text 3</span>
<span style="width:150px;">Text 4</span>
</td>
</tr>
</table>
You could easily accomplish that layout using a single <table> and making each of those items a column, instead of having 4 separate <table> elements.
Make sure your CSS is all inline, and try to use tables for layout as much as possible (HTML e-mails is the only time this advice is acceptable). Additionally, try to only use CSS that is compatible with Outlook.com. Note that Outlook.com actually replaces some of your HTML with its own and takes any inline CSS and replaces that with a class/id that it places in its stylesheet at the top of the converted e-mail (hence the .ExternalClass resets).
Also, you may want to look at the Mailchimp reset, for fixing various issues encountered with e-mail providers such as Outlook.com.

Jsoup How can i parse element which show after click button (image)?

I have this div in source of website, and after click it shows more data.
<div class=infogroup>
<div onClick=requestAjax(); style=cursor:pointer; class=infoheading>Your Panels (Click to load results)<img style=float:right; src="/images/plus_sign.png" width=20 height=20></div>
<div id=resultsPanels style=display:none;>
<table width=100%>
<tr>
<td>
<center>Loading your results...</center>
</td>
</tr>
<tr>
<td>
<center><img src=/images/ajaxloader.gif></center>
</td>
</tr>
</table>
</div>
</div>
when i click it and do "inspect element" witch chrom i can see it in source website
when i copy xpatch the xpatch of interesting field is:
//*[#id="resultsPanels"]/div/table/tbody/tr[3]/td[3]
how do i select it in Jsoup ?
i tried like this but it isnt working:
elements = doc.select("//*[#id=\"resultsPanels\"]/div/table/tbody/tr[2]/td[3]");
this is what mozzila do when i click button:
Jsoup doesn't support javascript / ajax, but you can use an external library for that (i've listed some examples here).
Btw. is using CSS / jQuery selector syntax, not XPath. So this syntax will likely fail.
You can get an overview about Jsoups selector here: Use selector-syntax to find elements

Adding html class to tinymce td element

:)
It is my second post here in stackoverflow and got happy with the results of my first question. Anyway, I already have a working tinymce toolbar with a re-designed appearance. In achieving this I have used jQuery to add classes to the toolbar elements.
But in some way isn't it better if upon initializing the toolbars the classes are also added..
let's say:
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,"
currently: (the one that i have now)
initiate tinymce
find elements add class while there are elements
Result:
<td class="first"> (*save elements here) </td>
<td class="last"> (*newdocument elements here) </td>
<td class="separator"> (*separator element here) </td>
<td class="first"> (*bold elements here) </td>
<td class="center"> (*italic elements here) </td>
<td class="center"> (*underline elements here) </td>
<td class="last"> (*strikethrough elements here) </td>
what I want to achieve:
- initiate tinymce and add classes (*the result would be the same)
wouldn't it be faster this way?
I have been tracing the codes of tinymce but with my inexperience in coding makes it more harder for me... Anyone out there who knows the answer to my problem.. Please help me.. thank you and more power... :)
Looks like you should use the configuraton setting editor_css.