Can one insert a collapsible list in an outlook email? - vba

Is it possible to insert collapsible text in an Outlook email ?
[+] header name
When the reader clicks the [+] he will expand the text.
Tried these methods
Making collapsible text without Java and attaching as text. Imports fine into an outlook email. But expansion doesn't work.
Tried with Outlook VBA. Works fine with the .docm format outside of Outlook in Word. But doesn't work in Outlook.

H Mayan,
This can't be done in Outlook as it does not support the CSS required.
You can implement the practice of progressive enhancement whereby you code a CSS-only solution like this:
#toggle {
display: none;
font-size:14px;
}
#toggle:target {
display: block;
}
#toggle:target + .close {
display: block;
}
.close {
display: none;
}
REVEAL +
<p id="toggle">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#" class="close">HIDE -</span>
And then use a media query, usually #media screen and (max-width:480px) to show/hide on supported devices and mso conditional css to give a simple fallback for Outlook.

just another ideea to through your way. What about a macro that creates a table with 2 columns, first column contains a trigger/toggle, second contains the expandable area. When you click on the toggle, the entire row toggles between height = autosize and height = 1 row.

Related

VBA IE Automation - cannot find "export" element ID

I'm working in Microsoft Excel 2010 VBA and I'm trying to automate pdf report downloads. I can navigate to where I need to be but I'm stuck on the last step;
There's an "Export" element that behaves like a link. If I were to click on it, it would initiate a pdf download. I want to automate this and direct the download to a specified folder, but when I inspect the element it doesn't appear to have an element ID by which I can call it (ie. getElementById().Click).
I'm new to VBA IE automation. Does anyone have suggestions on how to initiate that "Export" function?
I can't share the full HTML detail, as it is for a site with sensitive data, but below are snippets of the HTML, my VBA code, and a screenshot of the HTML section that is in question:
<DIV style="FONT-SIZE: 8pt; HEIGHT: 30px; FONT-FAMILY: Verdana; DISPLAY: inline"><TABLE style="DISPLAY: inline" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD height=28><SELECT id=PrintFormat><OPTION value="">Select a format</OPTION><OPTION selected value=Pdf>Acrobat (PDF) file</OPTION></SELECT></TD>
<TD width=4></TD>
<TD height=28><A onclick="if (document.getElementById('PrintFormat').value != '') {var url = document.getElementById('PrintFormat').value + 'Stream.aspx'; document.location.href = url;}" style="FONT-SIZE: 8pt; TEXT-DECORATION: none; FONT-FAMILY: Verdana" href="#" shape="">Export</A></TD></TR></TBODY></TABLE></DIV>
My vba code;
Sub pdfdownloadautomation()
Set objIE = New InternetExplorer
objIE.Visible = True
objIE.navigate Sheet3.Range("A1").Value 'A1 contains url
objIE.document.getElementById("PrintFormat").Value = "Pdf"
'works fine to this point - just not sure how to call the export
objIE.document.getElementById("?").Click
End Sub
screenshot of inspected element in IE
You may try a CSS selector as follows to target the element. I can't test and don't know if there are parent frame/iframe/form tags to navigate. There appears to be one form element at least visible. Please provide the html including this form tag if possible. I have given variations without parent form and including parent form (which looks to be the case) - the assumption with the parent form element is that it is the first form element on the page.
ie.document.querySelector("td a[onclick^='if']").Click
Which might become:
ie.document.getElementsByTagName("form")(0).querySelector("td a[onclick^='if']").Click
The CSS selector is likely more complex than required but I am trying to localize using the visible cues in your image i.e. that there is an element with an a tag, that has onclick attribute starting with 'if', and is inside a parent td tag.
You could also gather all the a tag elements and loop until the Export innerText is found:
Dim list As Object, item As Object
Set list = ie.document.getElementsByTagName("a")
For Each item In list
If item.innerText = "Export" Then
item.Click
Exit For
End If
Next
Again, this may become
Set list = ie.document.getElementsByTagName("form")(0).getElementsByTagName("a")

twitter typeahead.js - add clickable font awesome icon to results list

I would like to customize typeahead / bloodhound's display of the results list by adding a clickable font awesome icon. The use case is to allow users to initiate editing of one of the result items, rather than selecting it.
Is this possible?
I have added this suggestion template:
suggestion: function(el){
return '<div><strong>' + el.value + '</strong>' +
'<span style=display:inline-block; float:right;">
<i class="fa fa-minus-circle"></i><span></div>'},
}
This displays the icon and makes it clickable, but the icon is displayed right next to the el.value.
The answer is to not use inline styles, instead add a new class definition:
.tt-suggestion span {
display: : inline-block;
float: right;
}
and the icon is displayed correctly, aligned at the end of the suggestion row.

MVC Checkbox Formatting Issue

I am trying to find a way to display the checkbox and some text to the right properly. The default way the MVC View lays them out puts the checkbox below the label / text. So I tried to get them on the same line with this simplified code, but the text still rides up about half a line above the checkbox. How can you display a checkbox and some text to the right of the checkbox on the same line with proper vertical alignment for the text on the right? Thank you!
<div>
#Html.EditorFor(model => model.DriverDBARequired) Driver DBA Required
</div>
This must be a CSS issue. The standard site.css might cause that behavior:
label {
**display: block;**
font-size: 1.2em;
font-weight: 600;
}
If you change it to
display: inline
it should work. The following lines in the standard site.css can help you too:
label.checkbox {
display: inline;
}
Write your checkbox like something as:
<label class="checkbox">#Html.CheckBox("MyName", false) My text</label>

Input type="file" Localization [duplicate]

How can I internationalize the button text of the file picker? For example, what this code presents to the user:
<input type="file" .../>
It is normally provided by the browser and hard to change, so the only way around it will be a CSS/JavaScript hack,
See the following links for some approaches:
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
http://www.quirksmode.org/dom/inputfile.html
http://www.dreamincode.net/forums/showtopic15621.htm
Pure CSS solution:
.inputfile {
/* visibility: hidden etc. wont work */
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile:focus + label {
/* keyboard navigation */
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
pointer-events: none;
}
<input type="file" name="file" id="file" class="inputfile">
<label for="file">Choose a file (Click me)</label>
source: http://tympanus.net/codrops
Take a step back! Firstly, you're assuming the user is using a foreign locale on their device, which is not a sound assumption for justifying taking over the button text of the file picker, and making it say what you want it to.
It is reasonable that you want to control every item of language visible on your page. The content of the File Upload control is not part of the HTML though. There is more content behind this control, for example, in WebKit, it also says "No file chosen" next to the button.
There are very hacky workarounds that attempt this (e.g. like those mentioned in #ChristopheD's answer), but none of them truly succeed:
To a screen reader, the file control will still say "Browse..." or "Choose File", and a custom file upload will not be announced as a file upload control, but just a button or a text input.
Many of them fail to display the chosen file, or to show that the user has no longer chosen a file
Many of them look nothing like the native control, so might look strange on non-standard devices.
Keyboard support is typically poor.
An author-created UI component can never be as fully functional as its native equivalent (and the closer you get it to behave to suppose IE10 on Windows 7, the more it will deviate from other Browser and Operating System combinations).
Modern browsers support drag & drop into the native file upload control.
Some techniques may trigger heuristics in security software as a potential ‘click-jacking’ attempt to trick the user into uploading file.
Deviating from the native controls is always a risky thing, there is a whole host of different devices your users could be using, and whatever workaround you choose, you will not have tested it in every one of those devices.
However, there is an even bigger reason why all attempts fail from a User Experience perspective: there is even more non-localized content behind this control, the file selection dialog itself. Once the user is subject to traversing their file system or what not to select a file to upload, they will be subjected to the host Operating System locale.
Are you sure you're doing your user any justice by deviating from the native control, just to localize the text, when as soon as they click it, they're just going to get the Operating System locale anyway?
The best you can do for your users is to ensure you have adequate localised guidance surrounding your file input control. (e.g. Form field label, hint text, tooltip text).
Sorry. :-(
--
This answer is for those looking for any justification not to localise the file upload control.
You get your browser's language for your button. There's no way to change it programmatically.
much easier use it
<input type="button" id="loadFileXml" value="Custom Button Name"onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
I could achieve a button using jQueryMobile with following code:
<label for="ppt" data-role="button" data-inline="true" data-mini="true" data-corners="false">Upload</label>
<input id="ppt" type="file" name="ppt" multiple data-role="button" data-inline="true" data-mini="true" data-corners="false" style="opacity: 0;"/>
Above code creates a "Upload" button (custom text). On click of upload button, file browse is launched. Tested with Chrome 25 & IE9.
To make a custom "browse button" solution simply try making a hidden browse button, a custom button or element and some Jquery. This way I'm not modifying the actual "browse button" which is dependent on each browser/version. Here's an example.
HTML:
<div id="import" type="file">My Custom Button</div>
<input id="browser" class="hideMe" type="file"></input>
CSS:
#import {
margin: 0em 0em 0em .2em;
content: 'Import Settings';
display: inline-block;
border: 1px solid;
border-color: #ddd #bbb #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: 700;
font: bold 12px/1.2 Arial,sans-serif !important;
/* fallback */
background-color: #f9f9f9;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C2C1C1), to(#2F2727));
}
.hideMe{
display: none;
}
JS:
$("#import").click(function() {
$("#browser").trigger("click");
$('#browser').change(function() {
alert($("#browser").val());
});
});
Actually, it is possible to customize the Upload File button with its pseudo selector: ::file-selector-button.
Check this for more info: MDN ::file-selector-button - CSS

How to make a div to a input text form?

There is some drawbacks using textarea and input-text as input of text forms. textarea has a little annoying triangle in right-lower corner and input-text is a single-line input.
I try to have a input of text like the facebook update input form. The input auto resize after linebreaks. And the element or tag used was <div>. I said "used" because, after they redesigned Facebook, I can't figure-out which tag is used now. There is CSS property that enables the user to edit the text in a div element. I actually copied the CSS property, but now I lost it. Can someone tell me which CSS property it was? I have a weak memory that it began with the -webkit prefix though
If you use html5 you can use:
<div id="divThatYouCanWriteStuffIn" contenteditable>
<!-- you can write in here -->
</div>
If you couple this with the css:
#divThatYouCanWriteStuffIn {
min-height: 4em; /* it should resize as required from this minimum height */
}
To get rid of the 'annoying little triangle' in textareas:
textarea {
resize: none;
}
JS Fiddle demo of both ideas.
I know you can do this in javascript by doing getElementByID('mydiv').contentEditable='true';, but I do not know how this would be done in CSS
The Facebook update input field is a TEXTAREA element. The trick is to use the resize property:
textarea { resize:none; }
That will make the triangle disappear.
You should be able to add your style to a textarea like you do with tags like p, h1, h2 etc..
So you can target all textareas or ones with specific classes or ids on them
Example:
textarea {
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
line-height:140%;
color:black;
margin:0 0 5px 5px;
padding:5px;
background-color:#999999;
border:1px solid black;
}
This example will target all textareas on the page.
Change textarea to .nameOfClass or #nameOfId if you want to target a class or an id.
Hope this helps.