I create iframe with designMode=on.
When I open web site in IE and move mouse cursor on iframe, the mouse cursor get changes into text-cursor (big letter I).
But when I open web site in Firefox, the corsur doesn't change and stays arrow-point cursor.
How to fix that?
<script language="javascript" type="text/javascript">
designer('content');
function designer(editor) {
var browser = navigator.userAgent.toLowerCase();
isIE = (browser.indexOf("msie") != -1);
document.writeln('<iframe id="' + editor + '" width="600px" height="600px"></iframe>');
var edit = document.getElementById(editor).contentWindow.document;
edit.designMode = "On";
if (!isIE) {
document.getElementById(content).contentDocument.designMode = "on";
}
}
</script>
Maybe this page will help?
Try CSS, that should switch the cursor for you.
iframe{cursor:crosshair} //all iframes on page
or
#content{cursor:crosshair} //just the element with the id "content"
Question? where is the variable content set in the call: document.getElementById(content).contentDocument.designMode = "on";
Do you mean editor as in: var edit = document.getElementById(editor).contentWindow.document;
Okay, I see your problem, link to http://devedge-temp.mozilla.org/viewsource/2003/midas/01/example2-index.html has the same issue and that's the Mozilla way.
Your line:
if (!isIE) {
document.getElementById(content).contentDocument.designMode = "on";
}
Should almost certainly read:
if (!isIE) {
document.getElementById(editor).contentWindow.document = "on";
}
As it stands you're asking non-IE browser to find an element with id null, rather than an element with id 'content'.
However, that won't get you a text caret in your IFrame, even if it does make it editable.
The best I could come up with was:
document.getElementById(editor).contentWindow.document.style.cursor = "text";
Which turns the cursor into a caret on the first line of the iFrame (i.e. at the top), presumably because that's the only editable bit at that point.
You have to set this property when the iframe loads.
var edit = document.getElementById(editor).contentWindow.document;
edit.addEventListener("load", function() {
edit.designMode = "On";
}, false);
Related
I have two TextBoxes, and I want to prevent the user from editing one of it while the other is not empty in real time. How could I do that ?
You can add a text changed event on the textbox that needs a input firts. Then in you C# side you can do a check in that event to see:
If(string.IsNullOrEmpty(txtbox.Text))
{
txtbox2.Enabled = false
}
else
{
txtbox2.Enabled = true;
}
Hope that helps
The interaction you're describing is on the client, not the server, so you'll need to write some javascript to make that happen.
Add this to the bottom of your aspx page. Depending on the id schema you're solution is using, you may need to inspect the Id's of the textareas in your browser to get their actual DOM element Id's. (note - haven't tested the code, but you get the idea)
<script>
var elDisabledTxtBx = document.getElementById("Your_Disabled_Textbox_ID");
var elTxtbxThatAcceptsInput = document.getElementById("ID_of_textbox_user_types_into");
$(elTxtbxThatAcceptsInput).on("keyup", function(el, $e){
if ( this.value.trim() === "" ){
elDisabledTxtBx.disabled = false;
}
});
</script>
I have a scenario where I need to open multiple popup almost 5 . If I use window.open() method , I can open multiple popups but it is not staying on top of parent page all the time. After I open first popup , it shows on top of parent page. then when I access parent page to open second popup , first popup goes behind the parent page. Is there any way I can achieve this functionality.
Any help greatly appreciated
One way is to store the window handles in an array and call the focus method. It works in IE. It will not work in Chrome, details here
FIDDLE
Code below.
var popupWindowsArr = new Array();
function popupClicked() {
var title = "Test -" + popupWindowsArr.length;
var wndID = window.open("http://www.google.com", title, "height=400,width=700");
popupWindowsArr.push(wndID);
for(var i = 0; i < popupWindowsArr.length; i++) {
popupWindowsArr[i].focus();
}
}
EDIT - To bring focus to popups after a postback.
One way is store the names of the opened windows in a hidden field and use it. This will work only if the popup url is in the same domain.
<asp:HiddenField ID="hdnPopupNames" runat="server" />
function popupClicked() {
var popupNames = document.getElementById('<%=hdnPopupNames.ClientID %>').value;
var wndName;
if (popupNames.length > 0) {
var namesArr = popupNames.split("|");
wndName = "Test -" + namesArr.length;
for (var i = 0; i < namesArr.length; i++) {
var wnd = window.open("", namesArr[i]);
wnd.focus();
}
popupNames += "|" + wndName;
}
else {
wndName = "Test - 0" ;
popupNames = wndName;
}
window.open("TestHTMLPage.htm", wndName, "height=400,width=700");
document.getElementById('<%=hdnPopupNames.ClientID %>').value = popupNames;
}
I need to hide the follow button on Twitter card using :
<blockquote width="581" height="250" class="twitter-tweet"><p></p></blockquote></div>
How do you hide the follow button on a card ?
Thanks
The twitter widget expands into an iframe, so you would have to wait until it is fully loaded. Afterwards you could either fully remove the button or hide it. You will need a little JavaScript. The problem is that you would have to wait until it is loaded. I don't know how to catch when the tweet is fully loaded so I will be checking for the button every 100 milliseconds until it appears. You could of course change that to fit your needs.
JS:
window.setTimeout(removeButton, 100);
function removeButton() {
var iframe = document.querySelector('iframe.twitter-tweet');
if(iframe == undefined) {
window.setTimeout(removeButton, 100);
return;
}
var button = iframe.contentDocument.querySelector('.follow-button.profile');
if(button == undefined) {
window.setTimeout(removeButton, 100);
return;
}
//Hide
button.style.display = 'none';
//Or remove
button.parentNode.removeChild(button); //Note: Not using button.remove() because of compatibility
}
This of course right now only works for one single tweet. If you wanted to remove multiple Follow buttons, you would have to modify this script a little bit.
I have a web application(ASP.NET2.0 C#).
Within it, I have a div that contains a checkbox list and a button.
I want to toggle the div viewing, so I got some javascript code online to help me.
Heres the code:
<script language="javascript">
var state = 'hidden';
function showhide(layer_ref) {
if (state == 'visible')
{
state = 'hidden';
}
else
{
state = 'visible';
}
if (document.all)
{ //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.visibility = state");
}
if (document.layers)
{ //IS NETSCAPE 4 or below
document.layers[layer_ref].visibility = state;
}
if (document.getElementById && !document.all)
{
maxwell_smart = document.getElementById(layer_ref);
maxwell_smart.style.visibility = state;
}
}
</script>
I call the function this way:
Choose Columns
When I use this function, it shows me the div with the button, but it doesn't show me the checkboxlist....Any ideas on what's going on?
Thank you.
Have you tried using display instead of visiblity?
For example, instead of:
document.getElementById(layer_ref).style.visiblity = "hidden";
document.getElementById(layer_ref).style.visiblity = "visible";
Use:
document.getElementById(layer_ref).style.display = "none";
document.getElementById(layer_ref).style.display = "block";
You will have to replace all your references to visiblity with display not just the getElementById version. You also may want to look into using jQuery which will handle your scenario with a few lines of code, plus no need for an onclick attribute to cloud you html.
<script type="text/javascript" src="jquery-1.3.2.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.toggleLink').click(function(e) {
e.preventDefault();
$('#AlertDiv').toggle();
});
});
</script>
Choose Columns
Some suggestions:
You really should consider using a javascript library like ASP.NET AJAX or JQuery. This will help to get the browser specific code out of the way.
Base the visibility on the state of the checkbox, rather than just toggling it.
"display" is probably a better style in this situation instead of "visibility". If you use "visibility" then you will just get a blank area where the "layer" should be when it's invisible.
Instead of a "layer reference" you probably want to pass in the id of the div tag and the id of the checkbox.
Example in asp.net ajax:
Here would be your checkbox:
<input type="checkbox" id="mycheck" onclick='showhide("mycheck","mylayer")' />
Here is the area you want to show/hide:
<div id='mylayer'>content</div>
Here is your function:
<script language="javascript">
function showhide(checkboxid, layerid)
{
if($get(checkboxid).checked==true)
{
$get(layerid).display = "none";
}
else
{
$get(layerid).style.display = "";
}
}
</script>
Greetings!
I'm calling a Web service from Javascript when a user clicks on a link. I need to get the coordinates where the user clicked so that I can display a DIV in an appropriate location. My client-side script looks like the following:
var g_event;
function DoWork(event, theId)
{
if (IsIE())
g_event = window.event;
else
g_event = event;
Acme.WebServices.Worker.GetInformation(theId, DoWorkSuccess);
}
function DoWorkSuccess(result)
{
var l_elemDiv = document.getElementById("content-area-div");
DisplayAreaDiv(g_event, l_elemDiv, result);
}
It's used like this:
Help
This works great in Firefox, Safari, and Opera. In IE7, not so much. For example, if I place the following code at the end of both the DoWork() and DoWorkSuccess() functions:
alert(g_event.clientX + ", " + g_event.clientY);
In IE, I'll get two alerts; the first one has correct coordinates, but the second one (which displays on top of the first one) is simply "[object]". Since that "[object]" one is the last one, my DIV is incorrectly displayed in the top left of the browser window. Is there a way I can prevent IE from giving me a second "bad" event? Thanks.
Why not extract and save the coordinates in DoWork and simply use them in DoWorkSuccess rather than saving the event. Of course this won't work if there is more data you are extracting from the event.
var client_x;
var client_y;
function DoWork(event, theId)
{
var g_event;
if (IsIE())
g_event = window.event;
else
g_event = event;
client_x = g_event.clientX;
client_y = g_event.clientY;
Acme.WebServices.Worker.GetInformation(theId, DoWorkSuccess);
}
function DoWorkSuccess(result)
{
var l_elemDiv = document.getElementById("content-area-div");
DisplayAreaDiv( { clientX : client_x, clientY : client_y }, l_elemDiv, result);
}
Have you tried setting window.event.cancelBubble = true in your DoWork function?
If not, quirks mode has good article on events and event bubbling - http://www.quirksmode.org/js/events_order.html that has helped me a lot with these kinds of issues.