I am using an Image Map to direct the user to diff page when he clicks on it. I have written this code
<asp:ImageMap ID="ImageMap1" runat="server" AlternateText="Amazon"
BorderStyle="Groove" DescriptionUrl="~/Images/TT.jpg" Height="29px"
ImageAlign="Baseline" ImageUrl="~/Images/amazon.png"
ToolTip="Amazon" Width="82px" HotSpotMode="Navigate">
<asp:CircleHotSpot NavigateUrl="http://www.amazon.com" Target="_blank"
HotSpotMode="Navigate" />
</asp:ImageMap>
Its working but not navigating on clicking so as soon as I add OnClick"ImageMapID" it gives me an error. What am I still missing?
Wow..ImageMap think I have travelled back to 1999!
Anyway, not sure what you mean by adding OnClick but you have not added the dimesions of the Hot Spot so it does not know which area is click-able - set the x,y and radius properties see http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.circlehotspot(v=vs.80).aspx)
Related
I have had a website running using a textbox, autocomplete extender, and autocompletedropdownpanel. Basically when a user starts typing a name into the text box the results appear in a few seconds. Since there can be hundreds of rows I need a scroll bar. Then the use just selects the name. For some reason, it is now broken (maybe update with IE? as it works fine in Chrome) Now when a user uses the scroll bar it automatically closes the results and is unable to make a selection. I have not been able to find a solution on the web for this. Is there an updated ajax kit I need to use? If so how do I go about replacing it? Or is there something to my code I can add or change?
Update: I found that this issue only appears on Surface Pro tablets. So something with IE11 and being a tablet causes this. Even though the tablet is docked with a normal keyboard and mouse.
Is it possible to use a cancelBubble function for a dropdownpanel with scroll bars? I have an issue where when clicking on the scroll bar to scroll threw rows once the mouse is released the results close. From reading I think I need some sort of cancelBubble event or stop propagation
<asp:Panel ID="autocompleteDropDownPanel" runat="server"
ScrollBars="Auto" Height="200px" Font-Size="Medium"
HorizontalAlign="Left" Wrap="False" />
<asp:AutoCompleteExtender ID="AutoCompleteExtender" runat="server"
DelimiterCharacters="" Enabled="True" ServicePath="AutoComplete.asmx"
ServiceMethod="GetCompletionList" TargetControlID="DoctorNameTextBox"
UseContextKey="true" ContextKey="StateDropDown"
CompletionListElementID="autocompleteDropDownPanel"
onclientitemselected="getSelected"
ShowOnlyCurrentWordInCompletionListItem="True" CompletionInterval="100"
MinimumPrefixLength="2">
</asp:AutoCompleteExtender>
Just edit the css of the class.
Overflow: Auto;
Height: 60px;
If this doesnt work , then try following:
Set AutoPostBack=false.
If the AutoCompleteExtender functionality is gone by setting AutoPostBack=false , then by Using the OnClientItemSelected property I could call a javascript function that triggered a postback.
I have an ASPxPopupControl. The html code is:
<dx:ASPxPopupControl ID="MKRPopup"
Width="900px"
ClientInstanceName="MKRPopup"
HeaderText="MKR
Ekleme" Modal="true"
runat="server"
AllowDragging="true"
AllowResize="true"
AutoUpdatePosition="false"
CloseAction="CloseButton"
ShowFooter="false"
PopupHorizontalAlign="WindowCenter"
PopupVerticalAlign="Above"
EnableViewState="false">
This popup is shown with choosing a row in a gridview and clicking an AddMKR button below it. However, the problem is, when I make the modal true, the popup goes really below the page so it can't bee seen and the scrollbar on the actual page disappears. So, the only way to see the popup is to zoom out the page. Then I can see it there below. Can you think of a reason? I thought maybe thats because it goes to the server side, because some fields have to be filled. But, when I change the Modal to false, it is shown the way it should be. I really can't figure this out.
i build a header in photoshop and imported it to visual basic 2010. I want the header to be a bit more dynamic, so when i press on part of the image (that says contacts for example), it will transfer me to another page.
i know that there is a function in css that does this, it is called mapping. Dreamweaver has an easy way of doing it. But is it possible to map an area on the image, which would make the image respond (as if he clicked a button)?
ASP.net provides 3 ways to give imagemap, these are called 'Hotspot' properties of imagemap control. Circular and rectangular hotspots are easy to understand. here is an example..
<asp:ImageMap ID="ImageMap1" runat="server">
<asp:CircleHotSpot NavigateUrl="nextPage.aspx" />
<asp:RectangleHotSpot Bottom="50" Left="50" NavigateUrl="contactpage.aspx"
Right="10" Top="10" />
</asp:ImageMap>
Sample image illustrated here
ASP setting screenshot
Area mapping links leads to horrible and unnecessary markup. Just put an anchor link around your entire header image like so:
<a href="~/default.aspx" title="Home" runat="server">
<img src="~/images/header.jpg" alt=Home" style="border:none;"
runat="server" />
</a>
If you want to go with Image Maps (not a good design), check these links:
http://www.w3schools.com/TAGS/tag_map.asp
http://www.image-maps.com/
I have 2 sections of my website I am developing, a reference box that has a fixed width and a working box that has the same height as the content. I am trying to make it so the user can swap the content between the two boxes. I have the following type of setup in the aspx page:
<asp:panel id="pnlReference" runat="server" CssClass="referencePanel" >
<asp:panel id="pnlsection1" runat="server" >
Content....
</asp:panel>
</asp:panel>
<asp:linkbutton id="lbtSwapPanels" runat="server" />
<asp:panel id="pnlWorking" runat="server" CssClass="workingPanel" >
<asp:panel id="pnlSection2" runat="server" >
Content....
</asp:panel>
</asp:panel>
What I am trying to have occur is when I press the lbtSwapPanels linkbutton, it moves pnlSection1 into pnlWorking and pnlSection2 into pnlReference. The code I used to do this in the OnClick method was:
Control pane1, pane2;
pane1 = pnlWorking.Controls[0];
pane2 = pnlReference.Controls[0];
// Remove them from their respective panels
pnlWorking.Controls.Remove(pane1);
pnlReference.Controls.Remove(pane2);
// Add them to the opposite pane
pnlWorking.Controls.Add(pane2);
pnlReference.Controls.Add(pane1);
Unfortunately, this does not work. When I click the linkbutton, nothing happens. If I then do something to perform another postback the reference and working panels become empty. I assume this has to do with the change not being saved into Viewstate but I don't know how to get around that.
Does anyone have any ideas on how to do this?
Update: It seems that moving objects around with Jquery is causing issues with asp.net postbacks as well as making my asp.net ajax tabcontainer completely fail to function. After 2 swaps and postbacks, further postbacks cease to function at all. Here's the new code
<div id="referencePane">
<asp:panel id="pnlsection1" runat="server" >
Content with tab container
</asp:panel
</div>
Swap Panes
<div id="workingPane">
<asp:panel id="pnlsection2" runat="server" >
Content
</asp:panel>
</div>
Here's the javascript:
function SwapPanes() {
var pane1, pane2;
pane1 = $("#workingPane").html();
pane2 = $("#referencePane").html();
$("#workingPane").empty();
$("#referencePane").empty();
// Add them to the opposite pane
$("#workingPane").prepend(pane2);
$("#referencePane").prepend(pane1);
}
First postback causes the tabcontainer to fail (javascript exceptions claiming it's trying to create a tab container with teh same ID (only one exists in the original aspx page). Postbacks then proceed to do wierd stuff.
Have you thought about keeping the controls in the panel but just swapping the position of the panels? You can do this pretty easily in JQuery although you'll be using DIVS instead of ASP.NET panels. This is, again, quite easy since Panels just translate to DIVS in the end. I did this recently for a wizard-style questionnaire (moving from panels to divs) and I was surprised how easy it was.
Update: Note that, when you swap the div positions, you can change the style as well (again, easy in JQuery) so that the user won't have a jarring "why did these two things change position" experience.
The bottom line, really, is that I think you are trying to use a hammer to drive a screw. JQuery is the screwdriver you are looking for and learning it is very much worth your while!
Look into ASP.Net web parts. That will manage the whole thing for you in a dynamic and responsive way.
I have 3 different kinds of ajax popups that need to exist across my site. I was hoping that I could simply create a user control for each one and place the panel and modal popup extender inside each one but this doesn't seem to be working. Has anyone tried this before or do you have a recommendation as to how I can avoid duplicate code for each pop up on different pages? Thanks!
Ah I figured out my issue with the User Control I believe.
The ModalPopUpExtender requires the TargetID property to be set otherwise an error occurs. Since this is sitting in a UserControl I just created a dummy link button that doesn't do anything and I set the property visible to false.
<asp:LinkButton ID="lnkBlank" runat="server" Visible="false" />
<asp:Panel ID="plContainer" style="display: none;" runat="server">
Hello?
</asp:Panel>
<cc1:ModalPopupExtender ID="mpe" runat="server"
BehaviorID="test"
TargetControlID="lnkBlank"
PopupControlID="plContainer" />
Apparently it doesn't appreciate that and the moment I set the visible property to true it started working. Not sure what the reasoning is for a TargetID since, I would think, most pop ups could be called from multiple links about the page. Perhaps I'm still not entirely clear on how this control is supposed to be used.
One option would be to write the popups in a asp.net user control (a .ascx page) and include that on the pages you need the popups. Have a public method in the ascx page that will show the popup, and call it from the parent page when you need to. If you already have a script manager on the parent page, you can't have a second one in the ascx page, but other then that there shouldn't be anything that would stop this from working. Hope this helps!
edit: here's what my modal popup extender control looks like...
<cc1:ModalPopupExtender
ID="mpeClassroom"
BackgroundCssCLass="modalBackground"
runat="server"
CancelControlID="lbClose"
OnOkScript="onOk()"
TargetControlID="Button1"
PopupControlID="pnlClassroom">
</cc1:ModalPopupExtender>
in my code behind page, my method just calls mpeClassroom.Show();
The problem with hidden link as TrgetControlID is that; when u set its visibility as false, server doesn't render it as well. PopExtender then cannot find control on the page.
Instead of setting its visibility to false, try to apply a style with display:none. This should work !