I am adding the link button and a image logo with that link dynamically from code behind. On the page it is showing linktext and then the image '[LinkText][Image]'. I want to show in the other manner like '[Image][LinkText]'. How we can implement it, please help.
Here is my code snippet:
HtmlGenericControl imgToAdd = new HtmlGenericControl("img");
imgToAdd.Attributes.Add("src", "../Images/Click.png");
imgToAdd.Attributes.Add("id", "img" + containerCountForLabels);
imgToAdd.Style.Add("height", "16px");
imgToAdd.Style.Add("vertical-align", "top");
HtmlGenericControl linkToAdd = new HtmlGenericControl("a");
linkToAdd.Attributes.Add("id", "linkbtn" + containerCountForLabels);
linkToAdd.Style.Add("margin-bottom", "5px");
linkToAdd.Style.Add("margin-top", "6px");
linkToAdd.Style.Add("margin-left", "10px");
linkToAdd.Style.Add("margin-right", "10px");
linkToAdd.Style.Add("font-size", "13px");
linkToAdd.Style.Add("float", "left");
linkToAdd.Style.Add("cursor", "pointer");
linkToAdd.Style.Add("color", "white");
linkToAdd.Style.Add("text-decoration", "underline");
linkToAdd.Style.Add("vertical-align", "top");
linkToAdd.Attributes.Add("onclick", "ShowHideDiv('img" + containerCountForLabels + "','divMain" + containerCountForLabels + "');");
linkToAdd.InnerText = dtReportLocal.Rows[0]["SubExpenseName"].ToString();
linkToAdd.Controls.Add(imgToAdd);
divForLink.Controls.Add(linkToAdd);
containerCountForLabels++;
I dont know why it shows before, but what you can do is to add the image and text as an innerHTML of the link instead using InnerText, something like the code below:
linkToAdd.InnerHTML = "<img src='../Images/Click.png' id='img"+ containerCountForLabels+"' style='height:16px;vertical-align:top;'>"+dtReportLocal.Rows[0]["SubExpenseName"].ToString();
Related
I want to have a button to insert an image into primefaces text editor when click. The image may be as
<img src=\"data:image/png;base64," + imgToBase64String("Test") + "\">
I used the function PrimeFaces.widgets.editorA.editor.editor.insertText(PrimeFaces.widgets.editorA.editor.getSelection().index, ImageInfo, 'bold', true)"
But it just show the text about "<img src="data:image/png;base64," + imgToBase64String("Test") + "">", not an image, is there has anyway to insert an image just like call function as editor.editor.insertText?
Thanks a lot!
I am a beginner in html. I have an image that has to be displayed on the overlay,when a button is pressed. Th problem is the image doesnot appear on the overlay for the first time. It appers only from the second time and then it works properly. If I refresh my page and do it again the image does not appear. The removing part has no error. So i did not include that part of the code.
var overlay = $(".ui-widget-overlay");
baseBackground = overlay.css("background");
baseOpacity = overlay.css("opacity");
overlay.css("background", "#000").css("opacity", "1");
function ShowOverlay() {
$("<div id='overlay'> <img src='Images/ajax.gif'/> </div>").appendTo('body');
$('#overlay').show();
Is it possible to add the image below _overlay.css("background", "#000").css("opacity", "1"); _ ?
All I ever wanted is my DropDownList to be special. :(
I can write just names, but that won't be as intresting. So I tried to add images, like so:
// Somewhere in the code...
ListItem item = new ListItem();
item.Value = // something
item.Text = "<img src=\"" + <AnImagePathIGetFromTheDatabase> + "\">";
<MyDropDownlist>.Items.Add(item);
However the evil thing escapes the text in a list automatically, like so:
<img src="https://41.media.tumblr.com/bcb96f4a4c46a1001118ee216d7abacf/tumblr_mgfhbngsDl1r58qimo1_500.png">
So I get text instead of an image. How can I overcome this?
EDIT: Using Lajos' solution, I've got to a situation where I inspect the selection element, And I get the following :
<img src="http://i.somethingawful.com/u/robtg/Fiesta/f05.jpg" alt="monster" height="42" width="42">
Which is pretty much what I was looking for. Sadly, in the page source, I get the following:
<option value="MeaninglessImp" class="imageconverter">http://i.somethingawful.com/u/robtg/Fiesta/f05.jpg</option>
The list itself shows 2 empty cells. The inspector says the pictures have been scaled down to 0x0.
Fiddle: here.
Why does that happen?
You can set the Text to contain the source and not show them until the page is loaded. You can implement a Javascript library which replaces src text with images in your list. That should solve the problem.
// Somewhere in the code...
ListItem item = new ListItem();
item.Value = // something
item.Text = <AnImagePathIGetFromTheDatabase>;
listItem.Attributes.Add("class", "imageconverter");
<MyDropDownlist>.Items.Add(item);
And in Javascript you need something like:
$(function() {
$(".imageconverter").each(function() {
$(this).html('<img src="' + $(this).text() + '">');
});
});
Using a Custom HTML module and have the following code:
<h2>info#studev.net</h2>
However after saving the module, the rendered code becomes:
<h2>
<script type="text/javascript">
<!--
var prefix = 'ma' + 'il' + 'to';
var path = 'hr' + 'ef' + '=';
var addy61999 = 'info' + '#';
addy61999 = addy61999 + 'studev' + '.' + 'net';
var addy_text61999 = 'info' + '#' + 'studev' + '.' + 'net';
document.write('<a ' + path + '\'' + prefix + ':' + addy61999 + '\'>');
document.write(addy_text61999);
document.write('<\/a>');
//-->\n </script>info#studev.net<script type="text/javascript">
<!--
document.write('<span style=\'display: none;\'>');
//-->
</script><span style="display: none;">This email address is being protected from spambots. You need JavaScript enabled to view it.
<script type="text/javascript">
<!--
document.write('</');
document.write('span>');
//-->
</script></span></h2>
Does anyone know why this is happening?
It is 'Content - Email Cloaking' plugin for protection email in joomla. This plugin changes each email in such way (with js). If you want, you can disable this plugin. But If you found such code with js in source of page it is normal.
/libraries/joomla/html/html/email.php - rule for 'email cloaking'
For anyone else trying to add attributes to anchors that are filtered by the Email Cloaking plugin, you can use this piece of jQuery to add your own attributes after the page has loaded:
HTML Example:
<h2 id="contactUsEmail">info#studev.net</h2>
You cannot put the ID in the anchor tag as the plugin removes this as it renders the page, so use the parent tags and then use ">" to identify a child element, in this case an anchor tag, as so:
jQuery(document).ready(function(){
$("#contactUsEmail > a").attr("target","_blank");
});
This target="_blank" to the anchor link, after the page has loaded, but keeping the Email Cloaking plugin still enabled
I have following code in HTML:
http://pastebin.com/GfrE1Pkh
I want to add text to banner_button_1 and banner_button_2. How can I do that?
Thanks!
This code is horrible, but I'll assume that you can not edit the HTML and just want to change it via JS.
var bannerButton = document.getElementsByClassName('banner-button')[0];
var bannerButtonLinks = bannerButton.getElementsByTagName('a');
bannerButtonLinks [0].innerHTML += "text for banner_button_1";
bannerButtonLinks [1].innerHTML += "text for banner_button_2";