I'm trying to output text + image + text in HAML. I know that I can do
=image_tag('some.png') + "text"
to have the text immediately after the picture. But how can I prepend some text?
="text" + image_tag('some.png') + "text"
does not work. What I get is
text
<img alt="" src="some.png" />text
which renders a blank between the first text and the image. I would rather like to have
text<img alt="" src="some.png" />text
My 2nd attempt above renders
text<img alt="" src="some.png" />text
Try this
view file:
%span
= "text".html_safe
= image_tag('/apple-icon-57x57.png')
= "text"
css file:
span img { display: inline; }
Sort of a solution was to render a new image with the texts and the image together. This way they always appear joined.
Related
I need tooltips in Foundation to accept html. The html in the title tag is not being read as html. Here is a simple example: https://sc.imaginalmarketing.net/test/
Here's the code:
<h3 data-tooltip data-allow-html="true" class="has-tip" title="<p>This is the description</p>">This is a tooltip</h3>
I'm not sure how to do it directly, but you can use javascript to adjust it. I did this in the console in Google's inspector (with code cobbled together from other places):
Select the tooltip by role (assuming you only have one tooltip on the page):
tooltip = document.querySelectorAll('[role="tooltip"]')[0]
Create the html element you want to append:
var a = document.createElement('a');
var linkText = document.createTextNode("my title text");
a.appendChild(linkText);
a.title = "my title text";
a.href = "http://example.com";
document.body.appendChild(a);
Append the html element to the tooltip:
tooltip.appendChild(a)
Hope that helps!
I am loading UIWebView with html file. the html file contains some text in Div tags. I need to set cursor position in a div tag. the html file contains different div tags.based on some condition i need to locate cursor position.
This is helpful for setting the caret position.
Suppose my html is like this:
<div id="editable" contenteditable="true">
text text text<br>text text text<br>text text text<br>
</div>
<button id="button" onclick="setCaret()">focus</button>
and my javascript method is:
function setCaret() {
var el = document.getElementById("editable");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[2], 5);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
}
I have a method used in an onclick handler, from within the content of a collapsible in jQuery Mobile.
The idea of this method is to access the collapsible and make the collapsible button green to mark it as ok, when viewing the collapsible set with all items collapsed.
No matter what i've tried i have had no success in this.
I have tried to add a custom theme file and call .attr("data-theme", "b") for instance, to no avail. I have also tried to add a custom class, that does not work.
The thing is, it is dynamic so when page is first switched to it does not have any custom styling. Only upon clicking an element in the content of collapsible X should X be turned to green backcolor.
When inspecting the element when run i can see that it appends the new attributes and/or correctly, but it does not render.
I tried calling .trigger("create") on the element as well after appending styles, to no avail.
Example of something i tried. The element is given an id of "Stop" + id when dynamically inserted into the set, i just use that to find the correct element to attempt to style. This works and i can see that it is appended to the correct element.
function markAsOk(id, index)
{
//Color the line green, use set id (computed, less costly than find by attribute value , switch to swatch B = green
$( "#Stop" + id ).attr("data-theme", "b");
$( "#Stop" + id ).attr("data-content-theme", "b");
//$( "#Stop" + id ).enhanceWithin(); */
$( "#Stop" + id ).trigger("create");
//Refresh main list
$( "#activestopslist" ).trigger("create");
}
above this the collapsible is declared dynamically as follows:
html += "<div data-role=\"collapsible\" id=\"Stop" + activeObj.id + "\" data-wonum =
\"" + activeObj.id + "\" data-index = \"" + activeObj.index + "\">";
//Set content
html += "<h3>" + activeObj.name + "</h3>";
html += "<a href=# onclick=\"markAsOk(" + activeObj.id + "," + activeObj.index +
")\"><img src = \"resources/okicon.png\" /></a> <img src=\"resources/failicon.png\">";
//Icons for buttons
html += "<p>" + processInstructions(activeObj.instructions) + "</p>";
//End tag
html += "</div>";
Here you also see the onclick event, added to the ok button embedded in content...
I would need some suggestions, it seems.
If you are just trying to change the color of the collapsible header, you don't need a theme swatch. Instead create a CSS rule for the green coloring, e.g:
.greenCollHeader {
background-color: #7FAF1B !important;
text-shadow: #aaa 0 1px 0 !important;
}
Then on your image click, just add this class to the link with class .ui-collapsible-heading-toggle within the collapsible widget:
$("#Stop" + id).find(".ui-collapsible-heading-toggle").addClass("greenCollHeader");
DEMO
I have problem with ASP.NET MVC Telerik Grid.
In my grid I have comment column and some columns contains too large text.
This effects to row height. I need that all rows have same height.
How I can reduce the text? I tried to add HTML abbr, but it doesn’t work.
Best regards Paul.
Using custom formatting, you can check the length of your text, and if the text length is greater than a certain number, you can limit the length by using substring. For example, if your comment column is called "Comment", you could do something like this:
Html.Telerik().Grid(Model)
.Name("MyGrid")
.CellAction(cell =>
{
if (cell.Column.Title != null)
{
if (cell.Column.Title.Equals("Comment"))
{
if (cell.DataItem.Comment.Length > 25)
{
cell.Text = cell.DataItem.Comment.Substring(0, 25) + "...";
}
}
}
});
Update
You asked about showing the complete comment. I don't know of a simple way built into the telerik control, but you can do it using css. I am using css code from kollermedia.at, but there are lots of examples of css tooltips if you want a different style.
In your css, put something like this:
/* tooltip */
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
Then change the line in your view to this:
cell.Text = "<a class=\"tooltip\" href=\"#\">" + cell.DataItem.Comment.Substring(0, 25) + "<span>" + cell.DataItem.Name + "</span></a>";
When you hover over the shortened text, the complete text is displayed in a tooltip.
I've got a column renderer defined that creates a HTML fragment which contains the ext.qtip attributes to create a quicktip. All works fine, the image renders in the grid cell, when i hover over the image a tooltip with the larger image is shown ... all nice but the quicktip on the bottom row expands beyond the constraints of the panel, is there any way to make it stay inside the panel boundaries?
var thumbRenderer = function(value, meta, record){
var thumbPath = Config.baseUrl + 'images/thumb/' + record.get('filename');
var previewPath = Config.baseUrl + 'images/big/' + record.get('filename');
return String.format('<img src="{0}" ext:qwidth="312" ext:qtip="<img style=\'margin: 2px 0;width:300px;\' src=\'{1}\' />" width="60" class="pic" />', thumbPath, previewPath);
}
You may want to look at the showAt method:
tip.showAt([x,y]);
Where x and y are the respective x and y co-ordinate positions.
EDIT: You can also use the showBy() method on a QuickTip instance:
http://dev.sencha.com/deploy/dev/docs/source/Tip.html#method-Ext.Tip-showBy