Disable javascript generated by asp.net menu control - javascript

I have a menu created using the asp.net menu control. I have added JQuery script that changes the display from pop-appearing to rolling out accordion style. However the pop-appearing still occurs, so what occurs overall is 'Mouse over Menu -> Sub Menu Appears --> Sub Menu Rolls back up'
What I am looking for, is a method to disable the javascript that asp.net generates that causes the sub menus to appear on mouse over, so that the replacement script that I have can function stand alone.
In other answers similar to this question I found the following:
public class MyCustomMenu : System.Web.UI.WebControls.Menu
{
protected override void OnPreRender(EventArgs e)
{
// Don't call base OnPreRender
//base.OnPreRender(e);
}
}
However adding that to my masterpage.cs file did not solve the issue.

If you look at the HTML rendered by menu control you will see that every menu element has a function call on mouse over, called Menu_HoverStatic. To disable it simple include an empty function by the same name in your ASPX markup:
<script type="text/javascript">
Menu_HoverStatic = function () { };
</script>
This will effectively disable original mouse over. Using this method you can disable other original event handlers if needed.

One thing that not everyone is familiar with is the use of Control Adapters to customize how a standard control renders.
Using adapters you can for example alter the output of the menu to be clean <ul> and <li> elements, integrate it with jquery, etc.
Here's an example of using ASP.NET 2.0 CSS Friendly Control Adapters on menues: http://www.asp.net/cssadapters/WalkThru/WalkThrough.aspx#SimpleMenu

Related

Semantic UI - Following menu example

I'm new to Semantic UI and I want to implement following menu as seen in Semantic UI's documentation on right side. I want to implement this functionallity to fixed top menu - so when id of header element is reached, active element in menu should be changed. I was looking at code of docs.js where this is implemented for documentation's site, but this code is pretty complex if you are using Semantic UI for the first time. I have those classes for my menu: ui large top fixed hidden menu
Is there already built-in following menu (probably not since it's not mentioned in docs?) or I add it with jQuery?
semantic-ui only gives you the styling. Once you click on a menu item, it is up to you to update the item's active status.
This is how we have it implemented in our code -
const menuNav = $('.ui.menu.menu-component .item');
menuNav.on('click', function (item) {
menuNav.removeClass('active');
$(this).addClass('active');
});
The other thing to remember is that you need to check the URL on page load so that you can set the appropriate item label to active.

tinyMCE setting not found (2 parts)

Question 1: I am wokring with tiny MCE 4 and have this bit of code
editor.addMenuItem("item1", {
text: "Name",
onclick: function() {
editor.insertContent("<span id='Name' contenteditable='false'>[Name]</span> ");
},
});
As you can see I am passing in a setting object where the fields text and onclick is set. Also if you look at the example here it uses a setting object with the field text, context, and onclick. But when I look at the documentation for settings attribute I do not see context, or onclick listed there. I looks at the menu and button also and could see anything there. Is there a more complete documentation somewhere?
Question 2: The reason I am asking this is because I want to see if there is a settings somewhere, that I can use to change the menus, for example, in the fiddle mention here instead of additional data displaying list box, I want the menu item used to display list box to be replaces with a textbox/dropdown.
In the example that you mentioned it is already explained that the context is where to you put your new menu item in the existing menu (Example configuration of a menu here). So if you have an context "tools", you can add you new menu item to "tools".
editor.addMenuItem("item1", {
text: "YourItemName",
context: "tools",
onclick: function() {
//The function of your menu item insert some content at the cursor position, is that corrent?
editor.insertContent("<span id='Name' contenteditable='false'>[Name]</span> ");
},
});
For your first question: No, at the moment the documentation of tinyMCE 4.x is still not complete. To learn more about how plugins (menus and buttons incl.) work, I downloaded the complete source code. I looked at some plugins (e.g. link plugin) and tried to understand the code there. At the moment the fastest way to learn some not-well-documented stuff.
For your second question: If you want to edit existing menus (or plugins), you have to download the dev-code and look the sources.

How to keep selected text highlighted when activating a context menu in GXT? (EXT GWT 2.x)?

I am trying to find a way to keep selected text highlighted when a user activates a context menu (right-click menu) using Sencha's EXT GWT 2.x (though I'm fine with a 3.x solution if there is one).
The use case:
User is viewing content on the screen.
User selects some block of text (and phrase for example).
User right-clicks to view the context menu so they may take action on the selected text and sees a context menu. The selected text remains selected when the menu appears.
In testing it appears that the GXT context menu automatically de-selects the text when the menu appears. Is there a way to prevent this and take action on the selected text?
So far I have tried:
a. Add a listener to the panel for the Context Menu event (Events.OnContextMenu) to see if there is a property that I can change (something like contextMenu.disableTextSelection(false) even though it was already set on construction of the view).
b. Overriding the de-select effect created by the appearance of the context menu by adding a native method to the same listener (Events.OnContextMenu) which then uses JS to try and grab the currently selected text, copy it to a temp variable, and then immediately add it back to the range on the page (effectively re-selecting the already selected text), but this didn't work either. I was able to confirm that the native method fired, detected the text and appeared to drop it back into the range, but it seems that perhaps another event fires or some other action occurs which still clears the selection out before the menu appears.
Any ideas would be greatly appreciated.
I'm still not aware of an official solution and I am starting to think this is a bug in GXT 2.x but I was able to come up with a workaround and am posting it here in case someone else should run into a similar problem.
For starters, the issue appears to occur in Firefox and not in IE. For Firefox, the following worked (example code snippets after the summary):
Add a listener to the Events.OnContextMenu event on your component/container/panel/etc.
Override the handleEvent method and add a native method to use JS to detect if the user has selected text on the screen. If text is selected, save it off to a JavaScriptObject (opaque wrapper of JS objects provided by GWT, see GWT documentation for details).
Add a listener to the Events.Show event on the context menu object.
Override the handleEvent method and add a native method to use JS to re-select the previous selection.
Add a listener to the Events.Hide event on the context menu object.
Override the handleEvent method and clear our your selection variable and then run a native method to clear out any remaining selection (if desired).
Using these steps I was able to keep the text selected when making a context menu appear in Firefox.
Example Code
(these are just sample code blocks to help better illustrate the steps - a copy/paste of this code won't give you everything you need)
public class ContextMenuExample {
JavaScriptObject selection;
Menu contextMenu = new Menu();
public void buildPanelExample() {
ContentPanel panel = new ContentPanel();
panel.addListener(Events.onContextMenu, new Listener<BaseEvent>() {
if (!GXT.isIE) {
selection = findSelectedTextOnScreen();
}
});
contextMenu.addListener(Events.Show, new Listener<BaseEvent>() {
if (!GXT.isIE) {
reSelectText(selection);
}
});
contextMenu.addListener(Events.Hide, new Listener<BaseEvent>() {
if (!GXT.isIE) {
clearSelection();
}
});
private native JavaScriptObject findSelectedTextOnScreen() /*-{
// use JS method to get selected text as a range
return selectedText;
}-*/;
private native void reSelectedText(JavaScriptObject range) /*-{
// use JS method to find a range a select it
}-*/;
private native void clearSelection() /*-{
// us JS to clear any selected ranges
}-*/;
private void clearSelections() {
selection = null;
clearSelection();
}
}
}

Dynamically reposition dropdown menu in IE

When I populate my drop down menu in IE, it doesn't re-center. This is what it should look like (which it does in chrome):
However, this is what it is doing:
There must be an easy way to reset the menu back to center and resize the box?
This is the function that populates the menu:
function PopResources()
{
$('#resources').html("<option>loading..</option>");
$.get("resources.php",
{"param":"getresources"},
function(returned_data)
{
//alert(returned_data);
$('#resources').html(returned_data);
});
}
I don't know your particular case (without html and css), but sometimes these type of display issues can be resolved by turning off and then turning back on the display of the element at the end of the script (this usually works in the case of refresh issues as the browser is "forced" to recalculate the element).
For jquery something like this at the end of the script:
$("#resources").toggle().toggle();

How to handle Android's Back Button click in a single HTML page webapp using PhoneGap?

I read from the documentation that we can handle the back button click using the following code:
document.addEventListener("backbutton", backKeyDown, true);
function backKeyDown() {
// Call my back key code here.
alert('go back!');
}
My concern is that I have a single HTML5 web page in which I have multiple div tags which I animate using jQuery as per the navigation option selected by the user from the menu options.
How can I, in this single page webapp, handle the back button click using PhoneGap and show the user the previously animated div. Clicking on the back button again would again take him to the previous div of the current previous div :-)
Thanks.
I solved the problem by creating a global array variable as
var myStack = new Array();
Then whenever I clicked on the div tag, I inserted the function prototype along with the arguments inside the myStack variable. For eg:
myStack.push(\"myfunction(args1, args2);\");
Then, using the code which I posted in my question, inside the BackButton handler, I wrote the following code:
var divToShow = myStack.pop();
eval(divToShow);
Hope this helps others.
I did an implementation in a similarly structured phonegap app. My situation was a bit more complex because I was loading in html as well as external data via ajax (rather than just unhiding divs). I created a global array called history which I used to keep track of current position as well as previous positions (position here being the most recent ajax function called, so the array was actually storing function names as text). The right sequence and combination of .pop and .push array methods got me a fully functioning js back button that scaled nicely and handled any kind of back and forth navigation I could think of.
I will just post my overall idea of handling this situation. Hope you can improvise and change it to suit your needs.
Have a global variable to remember the current div id that is
visible. For example, when a menu item x is clicked, set this global
variable to the div id that is currently visible (before showing the next div corresponding to menu item x).
When the back button is pressed, use the global variable's value to identify the previous div. Hide the current div and show the previous one.

Categories