RadEditor version 7.3.3.0
I am using radeditor from telerik to give editing option for creating and modifying emails.
editor contents are created in <tr> and <td> formats. each td can have div and other dom inside it.
It appears to us that resize options are provided for all divs in wyswyg editor when editing is done in firefox. whereas it is not there in other browsers. How can i disable the resizing option for firefox.
In Firefox:
In Chrome:
This comes from the browser's rich text editing engine and I do not think you can stop it.
Try adding the same HTML in a simple editable iframe to test it. Here is a simple page that you can use for that:
<body onload="SetEditable()">
<b>Set your original HTML content here:</b><br />
<textarea id="htmlArea" style="width: 783px; height: 189px"></textarea>
<br />
<input type="button" onclick="CreateHtml();return false;" value="Set Content in the IFRAME">
<br />
<b>Editable IFRAME element:</b>
<br />
<iframe
src="javascript:void(0)"
id="editor" style="width: 774px; height: 489px;border: 3px solid red;"></iframe>
<input type="button" onclick="ShowIFRAMEHTML();return false;" value="Show IFRAME HTML">
<br />
<b>HTML Mode of the IFRAME:</b>
<br />
<textarea id="htmlMode" style="width: 783px; height: 313px"></textarea>
<script type="text/javascript">
var editor1 = document.getElementById("editor"); //reference to the IFRAME element
var htmlArea1 = document.getElementById("htmlArea"); //reference to the HTML area in which we put the content
var htmlMode = document.getElementById("htmlMode"); //reference to the HTML area that displays the IFRAME content
var oDocument = editor1.contentWindow.document;
var sMarkup = "<html><head><title>New Document</title></head>" +
"<body contenteditable=true style='overflow:scroll;margin:0px;padding:0px;height:100%'>" +
" </body></html>";
function SetEditable()
{
oDocument.open();
oDocument.write(sMarkup);
oDocument.close();
oDocument["designMode"] = "on";
}
function CreateHtml()
{
oDocument.body.innerHTML = htmlArea1.value;
htmlMode.value = oDocument.body.innerHTML;
}
function ShowIFRAMEHTML()
{
alert(oDocument.body.innerHTML);
}
</script>
Related
We have lots of internal websites that could use a little standardization. I am looking to add a common banner page to all websites for a couple of reasons -
Consistent look
Easily update Banner logo
Display announcements like server maintenance ones
We have IIS and ASP.net. I did do work around where I have the banner page as a free standing html page that sits on top of the existing site, but I'm sure there is a better way around. I don't want to go the way of master pages mainly because it changes the control ID's of pages and we have several sites that use JQuery and Javascript that would break when the control ID's change.
You can create a javascript function as below and update body tag of all pages to call that function like onload="onAllPageLoad()"
function onAllPageLoad() {
$('body').prepend('My common banner HTML elements');
}
This shall put your banner html elements as the first elements in the body tag.
I was able to hack up a solution by using Jquery get function to splice the Banner page with the site page. The caveat being, each of the internal website pages must carry the get function for a uniform look. Since most of our sites are single page apps, this works for now. I have some site specific info that I want to add to the banner and any updates to the banner page are reflected on the site page.
Here is the code I came up with -
Banner.htm page:
<table width="100%" border="0">
<tr>
<td style="width: 30%" align="left">
<a href="http://SiteHomePage">
<img alt="Site Home" border="0" src="http://SiteHomePage/img/SiteHomePagelogo.png"
width="119px" height="67px" /></a>
</td>
<td style="width: 70%">
<table width="100%">
<tr>
<td style="text-align:left;">
<div id="SiteName" style="font-weight: bold; font-size: 30px;">
</div>
</td>
<td>
<div id="ExtraInfo" style="float: right; font-weight: bold; font-size: 15px;">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
Default.aspx Page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<%--Script to add banner page starts here--%>
<script runat="server">
<%--Fetch site specific info from the site web.config --%>
string SiteInfo =
ConfigurationManager.AppSettings["SiteInfo"];
string PageTitle =
ConfigurationManager.AppSettings["PageTitle"];
<%--BannerURL value is Banner.htm--%>
string BannerURL =
ConfigurationManager.AppSettings["BannerURL"];
</script>
<script src="//code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var extraInfo = '<%= SiteInfo %>';
var title = '<%= PageTitle %>';
var BannerURL = '<%= BannerURL %>';
$(document).ready(function() {
$.get(BannerURL, function(data) {
$("#Banner").html(data);
$("#SiteName").html(title);
document.title = ":: " + title + " ::";
$("#ExtraInfo").html(extraInfo);
});
});
</script>
<%--Script to add banner page ends here--%>
</head>
<body>
<form id="form1" runat="server">
<div id="Banner">
</div>
< %--Add site code here--%>
</form>
</body>
</html>
I am working on asp.net website using webforms & i am facing strange problems for some unknown reason.
I am different banner in different areas of teh page & one common banner in the header section of the MasterPage, Banner show up as it should but problem is that link with the banner is not working.
Below is the partial code generated after page display.
<div class="horizontalBannerBar">
<!-- Header Banner -->
<div class="pnlHeaderBanner" id="pnlHeaderBanner">
<a target="_blank" href="http://abc.com" class="bannerlink" id="hypLnkHeaderBanner"><img style="border-width:0px;" src="../images/Banners/32dfe9ee-0832-4d89-8c61-45b0ef371f1f.jpg" id="imgHeaderBanner"></a>
</div>
<!-- Header Banner -->
</div>
I am using Panel as a wrapper so that i can hide the banner in case banner is not present .
Below us the Code i use to assign value to hyperlink control & image control
DataSet ds = DataProvider.GetTopBanner(ArticleID, PageID, IssueID, CategoryID, BannerLayoutPosition, LangID);
if (ds.Tables[0].Rows.Count > 0)
{
imgHeaderBanner.ImageUrl = ds.Tables[0].Rows[0]["ImagePath"].ToString();
hypLnkHeaderBanner.NavigateUrl = ds.Tables[0].Rows[0]["BannerURL"].ToString();
}
else
{
imgHeaderBanner.Visible = false;
pnlHeaderBanner.Visible = false;
}
Actual .ASPX page code
<div class="horizontalBannerBar">
<!-- Header Banner -->
<asp:Panel ID="pnlHeaderBanner" CssClass="pnlHeaderBanner" runat="server">
<asp:HyperLink ID="hypLnkHeaderBanner" CssClass="bannerlink" runat="server" Target="_blank">
<asp:Image ID="imgHeaderBanner" runat="server" BorderWidth="0" />
</asp:HyperLink>
</asp:Panel>
<!-- Header Banner -->
</div>
It seems HTML is breaking up somewhere but i am not able to see it even on fiddle it doent work in FF & Chrome while link works in IE 9..
Example LINK
It's because of the z-index: -999; in your CSS. If you set it to 0 then your link will work.
Also the <img /> tag is not properly closed in the HTML sample you posted at the top. I doubt that's the actual HTML generated by ASP.NET though.
<div class="horizontalBannerBar">
<!-- Header Banner -->
<div class="pnlHeaderBanner" id="pnlHeaderBanner">
<a target="_blank" href="http://abc.com" class="bannerlink" id="hypLnkHeaderBanner">
<img style="border-width:0px;" src="../images/Banners/32dfe9ee-0832-4d89-8c61-45b0ef371f1f.jpg" id="imgHeaderBanner" />
</a>
</div>
<!-- Header Banner -->
</div>
I am using a ModalPopupextender Ajax Control to open aspx page in a modal Popup. aspx page is opened in a iframe as shown in below code.The content which is loaded in iframe is dynamic hence I cannot give a fixed height to iframe. I want that I should be able to adjust the height as per the content every time popup is being opened. I have a function to resize the iframe height and I am using that successfully on my other pages where iframe gets populated in the window itself but not able to adjust the height when iframe is opened in a POPUP. I have already tried window onload, iframe onload events without any success.
<asp:ModalPopupExtender ID="ModalPopupExtender2" BackgroundCssClass="transparentBG"
runat="server" CancelControlID="ButtonCancel" OkControlID="ButtonDone"
TargetControlID="btnAddNew" PopupControlID="DivAddWindow" Drag="true" >
</asp:ModalPopupExtender>
<div class="popup_Buttons" style="display: none">
<input id="ButtonDone" value="Done" type="button" />
<input id="ButtonCancel" value="Cancel" type="button" />
</div>
<div id="DivAddWindow" style="display: none;">
<iframe id="IframeEdit" scrolling="no" src="MasterPage.aspx" width="700px">
</iframe>
</div>
I would really appreciate if somebody can lead me the solution to resolve this.
Try this:
<iframe id="IframeEdit" onload="iframeLoaded()" scrolling="yes" src="MasterPage.aspx" width="700px">
</iframe>
following javascript function would get height from the iframe content.
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('IframeEdit');
if (iFrameID) {
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script>
I checked it in even ModalPopupextender, it works.
I have defined an IFrame in HTML.
From JavaScript I am trying to change the URL(src attribute) of the IFrame. It's working fine with most of the URLs. But when I try to set an eBay item URL more than once it opens in entire window.
Here is my code:
<html>
<head>
<script type="text/javascript">
function seturl(){
var txt=document.getElementsByName("txt");
document.getElementById('testframe').src = txt[0].value;
}
</script>
</head>
<body>
<iframe id="testframe" width= "700" height="500" >
</iframe>
<input type="text" name="txt" width="700"/>
<input type="button" value="Click me!" onclick="seturl()" />
</body>
</html>
Is there any solution to avoid opening in entire page for this eBay items URL?
http://cgi.ebay.com/Apple-iPad-Wi-Fi-32GB-BRAND-NEW-NO-RESERVE_W0QQitemZ220725228457QQcategoryZ171485QQcmdZViewItem
You are not allowed to do so.
It would seem that what you want to do is a violation of the UA.
http://pages.ebay.com/help/policies/user-agreement.html
I'm new to jQuery so this may be a real simple answer. I have a ASP.NET project that I'm trying to dynamically add content to an ASP Label element by typing into a text box and clicking a button. Sounds simple right? Well, I can get the content to added, but when the form is submitted the Label element is still empty? Why is the new data not submitted? What step am I missing? Please help. Here's some sample code:
<asp:Label ID="lblContainer" Text="" runat="server" />
<input type="text" name="tag" id="tag" />
<input type="button" name="AddTag" value="Add" class="button" onclick="addTag();" />
function addTag() {
if ($("#tag").val() != "") {
$("#lblContainer").append('$("#tag").val()' + '<br />');
$("#tag").val("");
}
}
Asp.Net doesn't work that way because it won't send the contents of a <span> tag in the HTTP Post when your form is submitted. You need to add that content to an <input> of some sort. Try something like this instead.
<span id="tagContainer" runat="server"></span>
<input type="text" name="tag" id="tag" />
<input type="button" name="AddTag" value="Add" class="button" onclick="addTag();" />
<!-- Use a hidden field to store the tags -->
<asp:HiddenField id="tagText" runat="server" />
function addTag() {
var newTag = $.trim($("#tag").val());
if (newTag != "") {
$("#tag").val("");
$("#tagContainer").append(" "+ newTag);
// append the newTag to the hidden field
var $tagText = $("#tagText");
$tagText.val($tagText.val() + " " + newTag);
}
}
Then in your asp.net code you can retrieve the value like so..
string myTagText = tagText.value;