So I have little issue with my title tag.
So I have some message like
IHaveSpacebars = I'd like to show you everything
I'm adding image via coffescript because I have to, but I think it wouldn't change a thing, so heres image code
<img src=\"#{url("/static/css/images/tick_shield.png")}\" style=\"margin-top:-6px\" title=" + i18n('IHaveSpacebars') + ">
i18n returns full string "I'd like to show you everything" so this is working well (checked via firebug).
So my issue: when I move mouse cursor over my image tick_shield.png it shows only I'd instead of I'd like to show you everything. I believe I messed up with this " + variable + " in title tag but I couldn't find anything else :/ examples that don't work:
title=i18n('IHaveSpacebars')
returns i18n('IHaveSpacebars') instead of txt
IHaveSpacebars = "I'd like to show you everything"
giving that one " " works, but that string is also used in other names (like column name) which will return column name with " ".
So do you guys (and girls:)) know how to write it correctly? I'm sure it's my fault with this " + . + " but couldn't find how to write it different.
Ok I found out a solution so maybe someone will find it helpful:
title="+"'"+i18n('IHaveSpacebars')+"'
The reason why it didn't work was that my original code title="+i18n('IHaveSpacebars')+" was returning
<img src="" title='I'd' like to show you everything>
while code above is returning
<img src="" title='I'd like to show you everything'>
Cheers ;)
Related
I'm working on a Spring Boot project and I am using Thymeleaf. In one of my view page let's call it dashboard.html, I need to change background image.
I can change images source with Thymeleaf.
Example 1
<img th:src="'/uploads/' + ${dashboard.dashboard_photo}" alt="" class="img-fluid" />
Works fine..
But, I cannot change background image with Thymeleaf...
<div class="banner_w3lspvt" th:style="'background: url('/uploads/' + ${dashboard.dashboard_photo});'">
I tried everything I found. Yes I know the same question was asked before but none of these answers helped me at all.
Welcome to SO. When you ask a question, please try to provide as much information as possible about the issue, like the stack trace, the log, or the unexpected behaviour.
Meanwhile, try the following:
th:style="'background: url(/uploads/' + ${dashboard.dashboard_photo} + ');'"
I think Literal substitutions work well for expressions like that. For example:
<div class="banner_w3lspvt" th:style="|background: url(/uploads/${dashboard.dashboard_photo});|">
Quick question. I am dynamically creating some buttons and basically want to add a background image to them in the code behind. Can someone tell me how its supposed to look like? I want to use the Button.Style.Add().
I tried Button.Style.Add("background-image","url(~/Uploads/Steak.jpg)"); but it did not work.
please use following code:
Button.Style.Add("background-image","url('~/Uploads/Steak.jpg')");
Add single quotes to the url
string strimgpath = "Uploads/Steak.jpg";
String strImgLocation = "url('" + strimgpath + "')";
idimage.Style.Add("background-image", strImgLocation);
For the love of everything holy, can someone please help me do this?
I have literally been searching for two hours on how to put a page break in a JEditorPane for when it prints to no avail. I've tried everything from HTML styles to even trying sketchy APIs I've found on random websites.
The code I wrote uses a textPaneEditor to print the data, and I use the HTML styling to format it in the way that I need it to look. So, I need a way to add a page break after I push in all of the data for the next line possibly with the HTML styling. Unfortunately, " " doesn't seem to work.
Here's what my code essentially looks like:
String report = "<font size=\"3\">";
report += "<b> TEST! </b><br>";
report += "PAGE BREAK WOULD GO HERE<br>";
report += "</font>";
JEditorPane textArea = new JEditorPane("text/html", report);
try{
textArea.print(new MessageFormat(""), new MessageFormat(""), true, null, null, true);
}catch(PrinterException e){
e.printStackTrace();
}
TLDR; how do I page break a JTextEditorPane with HTML styling during printing to a printer?
I'm working on solving the same problem myself right now. One thought I've had is to issue two print commands, one for each page to print. Not sure if this is or will be the most elegant or efficient solution but it's something to look into.
I have a page which includes details of the registered users.
Every html table includes 80-90 users.
For every user there is a $username variable.
I normally show their pictures in a table like the code below.
print "<a href=\"small-avatar-$username.jpg\" target=\"_blank\">
<img src=\"big-avatar-$username.jpg\">
</a>";
But the user can open images in a new tab. I want to show big avatars easily.
My first choice was lightbox-jquery. But because i use twitter-bootstrap in my site, i decided to use default bootstrap and jquery features.
I saw that there is "bootstrap-modals". When user clicks link, i don't plan to show anything more than i big picture.
I tried this:
print "<a href=\"#$username" data-toggle=\"modal\" class=\"img-modal\" >
<img src=\"small-avatar-$username.jpg\" ></a>";
print '</td>';
.
print "<div id=\"$username\" class=\"modal\">";
<img src=\"big-avatar-$username.jpg\">
print "</div>";
.
<script type="text/javascript" id="js">
$('#username').modal();
</script>
I suppose putting $('#username').modal();
for every user to my page will make HTML file huge.
But then I tried class name of anchor like this: $('.img-modal').modal();
But this didn't work.
What would you recommend in this situation?
I would recommend you to use a HTML5 Custom Data Attributes in your <a> tag to identify the username and keep your img-modal class.
"<a href="#myModal" data-username='".$username."' class="img-modal">...
Trigger the call to modal on click on .img-modal (you don't need the data-toggle="modal")
$('.img-modal').click(function(event) {
You can get the value of the username by using
var username = $(this).attr('data-username')
Since you have the username you can replace the src property of your <img> tag in your unique modal with something like.
$("#img-in-modal").attr("src","big-avatar-" + username + ".jpg")
And open your modal
$('#myModal').modal('show')
And finally, make sure bootstrap-modal.js or boostrap.js is included.
I have a sub that writes out a bunch of HTML inside of a literal control. Part of this HTML is an image that I would like to add an onclick event to. The onclick just needs to alert a string that I have available in the same sub. ONCE THE HTML GENERATING IS COMPLETE the string to return will also be complete. So it is at this point I would need to add the onlick event to the image. But how can I do so as it won't recognize the control at this point? Thanks guys.
/**** EDIT ****/
ok so, I changed things around and I just inserted the string for the image button last so that the string to return is complete. however when the html is inserted the string kind of screws it up because of punctuation. the string could contain any number of special characters :',;" etc.
here is the line of html in the vb.net codebehind
text = "<td style='background-color:#C8DBEC;width:31px;'><img style='cursor:pointer;' id='imgPrint' src='../images/Buttons/printerbtn.png' onclick='printTranscript(" + finalText + ");' /></td>"
so my question is.. how do I need to format the finalText so that it will pass through to the javascript call?
I think your code should look like this:
text = #"<td style='background-color:#C8DBEC;width:31px;'><img style='cursor:pointer;' id='imgPrint' src='../images/Buttons/printerbtn.png' onclick='printTranscript(""" + finalText + #""");' /></td>"
I put doublequotes before and after finalText variable (inside the brackets), otherwise its value would be parsed in javascript like a varible name. I also had to place # sign at the beginning of the both strings to be able to use doublequotes
(you can read more about it here: http://msdn.microsoft.com/en-us/library/362314fe%28v=vs.71%29.aspx)
Are you using JQuery? it makes it pretty simple
$('#target').html(""');
$('#imgPrint').click(function() { printTranscript(" + finalText + "); });
I Just love JQuery
I did not test but it'll be something like that
Just bind a click event to your image. Set your alert to the finalText and voila.
$("#imgPrint").click(alert(finalText));
OR
$("#imgPrint").click(printTranscript(finalText));
finalText can be stored as an alt or title on the image and then you can grab that with jQuery as well, or you can set it in a field with display none.
With the above code you don't need an onClick on the image.