I have some web page with some content and a button. What I would like to do is to implement such behaviour:
User is pressing the button.
Before any time consuming operation starts, animation appears.
2a. Animation must be on the top of the page. I do not want to underlying page dissapear for the time when some data is processed.
Data processing is finished, animattion is hidden and page is re-rendered.
I do not want to use jQuery to achieve this and the animation must work on IE and Firefox.
I am using Ajax Control Toolkit library and I whish to avoid any other external libraries.
How to do this? My first and only idea so far is to put whole page on the UpdatePanel and then put somehow UpdateProgress on top of it.
How about setting up an animation target? Inside each animation definition in the UpdatePanelAnimationExtender?
<Sequence>
<EnableAction Enabled="false" />
<Color AnimationTarget="MyContent"
Duration="1"
StartValue="#FF0000"
EndValue="#666666"
Property="style"
PropertyKey="backgroundColor" />
<Color AnimationTarget="MyContent"
Duration="1"
StartValue="#FF0000"
EndValue="#666666"
Property="style"
PropertyKey="backgroundColor" />
<EnableAction Enabled="true" />
</Sequence>
Related
I have been used a custom itemrenderer to build a program needed.
In the itemrenderer it looks like this.
i use to deal with the calse effects when user move mouse over a specific item renderer.
<s:postLayoutTransformOffsets>
<mx:TransformOffsets id="offsets" x.hovered="-10" y.hovered="-15" scaleX.hovered="1.2" scaleY.hovered="1.2" />
</s:postLayoutTransformOffsets>
<s:transitions>
<mx:Transition fromState="normal" toState="hovered" autoReverse="true">
<s:Animate target="{offsets}" duration="200">
<s:SimpleMotionPath property="scaleX" />
<s:SimpleMotionPath property="scaleY" />
<s:SimpleMotionPath property="x" />
<s:SimpleMotionPath property="y" />
</s:Animate>
</mx:Transition>
<mx:Transition fromState="hovered" toState="normal" autoReverse="true">
<s:Animate target="{offsets}" duration="200">
<s:SimpleMotionPath property="scaleX" />
<s:SimpleMotionPath property="scaleY" />
<s:SimpleMotionPath property="x" />
<s:SimpleMotionPath property="y" />
</s:Animate>
</mx:Transition>
</s:transitions>
After that is the script part deal with the event or logic with the renderers.
For each render there will have to buttons contained in the renderer and showed only when user move mouse on the renderer, each button can trigger a event to deal with.
the last part code is about the container in the renderer.
First is a which have a "rollOver" and "rollOut" event, when user rollOver a button and click it the event will executed. same to the rollOut.
Inside the Group there is a image bound with the pictures that will be show in the renderer.
A Hgroup contains the button that with the Event to execute when user click on it.
The problem i have been meet is:
1. the states is not controllable, when user move mouse over a render and do the click, other itemrenderer will do the scale as well. that the sates problem and i have override the getcurrentstates method to fix that,that works but
2. after fix the itemrenderer states problems i found the other itemrender which is not clicked by users also can execute the rollOver event, which is pretty wired.
I'm not sure if this problem is also about the states of itemrenderer or it is about something else i don't have a idea.
Hope someone can help me find some clues and solutions , or maybe just suggestions that could be helpful.
cheers.
This is because the item renderers are being reused for other items in the list, and when being reused, they maintain the previous state they were.
You should set the state of the items to the default one if they are being reused. Do that by overriding the "set data" function, however you will have to disable the transitions, otherwise they would be played too.
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've got a progressBar component defined as the following on my webpage:
<rich:modalPanel id="pb1Panel">
<rich:progressBar id="pb1" oncomplete="javascript:#{myBean.handleProgressEvent()} closeProgressModalPanel()" value="#{pb1Listener.percentageComplete}" label="#{pb1Listener.percentageComplete} %" minValue="1" maxValue="100" limitToList="true" timeout="3200" interval="1400" enabled="false"/>
</rich:modalPanel>
and a button:
<a4j:commandButton id="actButton" value="action" action="#{myBean.performAction}" immediate="true" ajaxSingle="true" onclick="javascript:Richfaces.showModalPanel('pb1Panel');" reRender="pb1Panel">
<a4j:support event="onClick" value="#{rich:component('pb1')}.enable()" reRender="pb1" />
</a4j:commandButton>
which doesn't work. However if I take out the
....
enabled="false"/>
....
from the progress bar, and the element from the button, everything seems to work just fine.
Any suggestion why it's not working? I'm setting enabled="false" initially because I do not want the polling to start unless the button was clicked (to reduce unnecessary polling).
The system is building on richfaces/seam.
Thanks!
The enabled property should refer to a property of a managed bean, and your button should change it, then reRender the progress bar.
Simply copy-paste the example from here - it's doing exactly the same thing as you want.
I'm struggling to find a solution for a weird issue with ASP.Net Menu control, when used in conjunction with Master Pages.
When the user navigates to a page - via. the menu - which inherits from the Master Page, the entire menu just expands and flashes across the screen. Collapses immediately and the page is rendered....
Causes some flickering on the screen, annoying for the users.
Now, there are a few work-arounds suggested for this:
- Commenting out the tag from the web.config.
- giving IDs to the Master Pages in their Page_Load events.
Tried'em all, dosen't seem to sort out my issue :(.
I'd take any ideas.
-HK
I remember seeing that at one point in a site of mine. Since then I ripped the menu out, but putting it back into my master page I don't see the flicker any more. Here's the code for a simple menu that works without flicker in a master page;
<asp:Menu ID="menu"
DataSourceID="sitemap"
runat="server" />
<asp:SiteMapDataSource
ID="sitemap"
ShowStartingNode="false"
runat="server" />
Not tried it myself, but how about setting the default class for the menu children to invisible (say, a class of invisibleMenu), which means it initially loads invisibly, and then using a bit of javascript to remove the invisibility? In jQuery, something like
$('.invisibleMenu').removeClass('invisibleMenu');
If I remember, I had the same problem and solve it in putting the menu in content place holder in the amster page:
<asp:ContentPlaceHolder ID="MenuZone" Runat="server">
<asp:TreeView ID="TreeView1" Runat="server" DataSourceID="dsSiteMap" ImageSet="Simple"
NodeIndent="10" MaxDataBindDepth="3" ExpandDepth="0" OnTreeNodePopulate="TreeView1_TreeNodePopulate">
<SelectedNodeStyle Font-Underline="True" ForeColor="#DD5555" HorizontalPadding="0px" VerticalPadding="0px"></SelectedNodeStyle>
<NodeStyle Font-Names="Verdana" Font-Size="8pt" HorizontalPadding="0px" ForeColor="Black" NodeSpacing="0px" VerticalPadding="0px"></NodeStyle>
<HoverNodeStyle Font-Underline="True" ForeColor="#DD5555"></HoverNodeStyle>
<ParentNodeStyle Font-Bold="False" />
</asp:TreeView>
<asp:SiteMapDataSource ID="dsSiteMap" Runat="server" ShowStartingNode="False" />
And in not overwritting this placeholder in nested page.
Add the menu to an ASCX page or its own masterpage and include it into the main masterpage. I myself have never run into this issue but something similar has happened.
if know your problem that
ASP.Net Menu Control renders incorrectly when used on a Master Page
if the asp.net menu is not worked then use usercontrol not master page because we can use user control by easy wasy.
In case anyone else runs into this problem again, I had my issue resolved over here on another Stack Overflow thread:
How to get rid of ugly asp:Menu flickering?
Same issue was with me too. But solved by removing jquery calls. :)
or you can download and keep the .js script file inside the script folder instead of referencing it from online.
I have a gridview that is within an updatepanel for a modal popup I have on a page.
The issue is that the entire page refreshes every time I click an imagebutton that is within my gridview. This causes my entire page to load and since I have grayed out the rest of the page so that the user cannot click on it this is very annoying.
Does any one know what I am missing.
Edit: I entered a better solution at the bottom
Make sure you have the following set on the UpdatePanel:
ChildrenAsTriggers=false and UpdateMode=Conditional
do you have ChildrenAsTriggers="false" on the UpdatePanel?
Are there any javascript errors on the page?
I had this problem and came across the following article:
http://bloggingabout.net/blogs/rick/archive/2008/04/02/linkbutton-inside-updatepanel-results-in-full-postback-updatepanel-not-triggered.aspx
My button wasn't dynamically created in the code like in this example, but when I checked the code in the aspx sure enough it was missing an ID property. On adding the ID the postback became asynchronous and started to behave as expected.
So, in summary, check your button has an ID!
Are you testing in Firefox or IE? We have a similar issue where the entire page refreshes in Firefox (but not IE). To get around it we use a hidden asp:button with the useSubmitBehavior="false" set.
<asp:Button ID="btnRefresh" runat="server" OnClick="btnRefresh_Click" Style="display: none" UseSubmitBehavior="false" />
Several months later this problem was fixed. The project I was working in was a previous v1.1 which was converted with 2.0. However, in the web.config this line remained:
<xhtmlConformance mode="Legacy"/>
When it was commented out all of the bugs that we seemed to have with the ajax control toolkit disappeared
Is the Modal Window popped up using the IE Modal window? Or is it a DIV that you are showing?
If it is an IE Modal Pop up you need to ensure you have
<base target="_self" />
To make sure the post back are to the modal page.
If it is a DIV make sure you have your XHTML correct or it might not know what to update.
I would leave the onClick and set it as the trigger for the updatePanel.
That's odd that it works in FF and not IE. That is opposite from the behavior we experience.
UpdatePanels can be sensitive to malformed HTML. Do a View Source from your browser and run it through something like the W3C validator to look for anything weird (unclosed div or table being the usual suspects)
If you use Firefox, there's a HTML validator Extension/AddOn available that works quite nicely.
For reference..
I've also noticed, when using the dreaded <asp:UpdatePanel ... /> and <asp:LinkButton ... />, that as well as UpdateMode="Conditional" on the UpdatePanel the following other changes are required:
ViewStateMode="Enabled" is required on <asp:Content ... /> (I've set it to Disabled in the MasterPage)
ClientIDMode="Static" had to be removed from <%# Page ... />
To prevent post-backs add return false to the onclick event.
button.attribute.add("onclick","return false;");
Sample:
string PopupURL = Common.GetAppPopupPath() + "Popups/StockChart.aspx?s=" + symbol;
hlLargeChart.Attributes.Add("onclick", String.Format("ShowPopupStdControls(PCStockChartWindow,'{0}');return false;", PopupURL));