I have a page with multiple panels on it. When a user clicks on a button one panel becomes invisible and another becomes visible. I was wondering if it is possible to dim the entire page except for the panel that has just become visible?
The asp.net panels will be rendered as
<div>
in the html, so why not write some javascript which which sets these to hidden? You could give them a class which you use to identify what to hide e.g.
<div class="container">
and then hide all the divs based on that. As Tim B James suggests, JQuery is great for doing this kind of thing, and can give you animations, fading, delays etc, which are really easy to get started with.
If you'd rather do it in the code-behind, you could loop through all the panels, finding and hiding them programmatically. Then show the correct one. This solution might be best if you have complex validation or something needed for the panel contents.
If you are not afraid to dip into some jQuery, then I would take a look at the jQuery Tools Exposure feature. Found here http://flowplayer.org/tools/demos/toolbox/expose/index.html
If you view the demo, this might be what you are looking to achieve. It is also very easy to set up, with minimal coding.
Related
I need some suggestions on what I can use for a text pop up that appears when mouse is hovered over certain text.
I have researched many webpages but nothing that I am looking for to be more specific,
I have a table with headers at the top.
I want people to hover over the heading and get a pop up with the definition of the header.
I have currently something working and its kind of simple.
What I was also wondering if there was a way to have the definitions read from a different place?
The definitions will be read from different pages, if I keep it the way that appears now I will have to change the definitions in many pages instead of one centralized place.
Not sure if this makes sense.
It's called a tooltip. One of my favorites is the one in the Jquery ui toolkit.
http://jqueryui.com/tooltip/
Best regards.
The simplest way is to use default HTML tooltips (title property of the div markup)
<div title="My tooltip text">Header</div>
I've been trying to iterate over a placeholder in sitecore. Essentially, there control that needs to be repeated by the page for a collection of elements (say a tab). I've only gotten the placeholder to render once. The following tabs don't have content inserted into them.
The code for something like what I'm trying to do is:
<asp:Repeater ID="rptTabs" runat="server">
<sc:Placeholder ID="plSocialSharing" runat="server" Key="Social"/>
<sc:Placeholder ID="plTab" runat="server" Key="content"/>
</asp:Repeater>
Should something like what I'm doing work? If it doesn't, do I need to user another sitecore control (something more dynamic?). Should I instead be using user controls I place there, or should I stick with the sitecore framework approach?
Since each of your tabs will contain the same rendering the I would not bother with placeholders. I think you will be adding more complexity than is required.
Assuming you are going to be using the jQuery UI Tab plugin then I would use the same technique you used in the previous question you asked, i.e. render out the content of the div tabs in the repeater, and you will need another repeater to create the ul list of the actual tabs.
Assuming you have a tree structure like:
- Social Sharing
-- Facebook
-- Twitter
-- Email
You could now Social Sharing use as the datasource of your Repeater and still allow the content of the tabs to be editable if you use Sitecore controls.
If you wanted something much more dynamic, like different rendering for each of the tabs, for example one with rich text, one with 2 column, one with table etc, then again there are a couple of ways of achieving this. One way would be to use standard <asp:PlaceHolder> in your repeater and add the rendering in this from your codebehind on ItemDataBound event.
Another option would be to add a bunch of different renderings into the placeholder in the page editor and set the datasource of each to content item. It will be difficult to use jQueryUI Tabs with this though since you would want markup like this in each control to make them self contained:
<div class="tab-title">Tab Title</div>
<div class="tab-content">Put whatever content you want in here</div>
As long as each rendering followed this structure then it would be easy to add several of these to the page and they would still be editable in the Page Editor, albeit listed one after another (not in tab format) in Editing mode. You would need to roll your own tab plugin, but it could be something as simple as:
Only in Preview or Normal mode
Get all .tab-title elements
Create a ul list and prepend to the tab container
Now call jQuery UI Tabs on the element
Hopefully given you some options at least, I can expand on any of these if it something you need but will have to get some code samples together.
this is my second question regarding more or less the same topic, since I am still struggling with it.
This is the layout I need to build:
Also important:
The header and the footer contain buttons, info but shouldn't be included in the page transitions (eg. shouldn't fade in or fade out).
In the end I just want the controls inside the "Page w/ content" (see picture below) area to be animated (fade in/fade out, etc) between the different pages.
What I got so far:
Header and Footer are user controls;
Page w/ content is a Lockablepivot (with headers hidden), and I use the pivot items to switch between the different content I want.
Problems:
I havent been able to put the Islocked = true working (it always gives me a null ref excep);
A pivot item is not really a page, so If the user for presses the back button it leaves the app (I think I can probably solve this by overriding the back button etc..);
I don't know if its easy or even doable to change the pivot items animations (haven't researched much about this one).
Ok, so my real question:
What other options do I have?
Using a ContentPresenter in the "Page w/ content" area to show me another xaml page? I read something about this being not good at all;
Do everything in one page but dynamically and through the code add, delete, fade in, fade out all the controls ?
Any ideas? What about performance? Which one should perform best?
Thank you!
Put an Header and Footer controls to a each page and make any animations with Content control you like
Yes, I realize that's a bit of a vague title but I'm having a hard time stating the problem. I have a .Net .aspx page that has a Master page, some Ajax, and an updatepanel. My problem occurs on 2 different pages but in both cases I'm either selecting a radio button or a checkbox when the behavior occurs. Immediately after selection the entire page moves down. It does not scroll but instead it is like an extra tag was inserted into the source. I have done HTML source comparisons before and after this change and nothing is different. I can only assume it is related to the updatepanel but I cannot determine where this may be happening.
I'd be happy to provide more information if you can direct me towards a solution.
Thanks!
I am not entirely sure if this will do it and there is not enough detail here to be sure, but have you tried setting RenderMode to inline on the UpdatePanel? Maybe that will do the trick. Otherwise go take a look at Fiddler and see what is coming back from the server. Alternate recommendation (if none of the above work) is to just get your result in Json and change the markup yourself with jQuery or something like it.
Incredible. This was exactly the problem. I've modified my code as follows and form stays in place after selection. This was a simple case of selecting a radio button and having it auto-populate a dropdownlist.
[asp:UpdatePanel ID="panelValidation" runat="server" ChildrenAsTriggers="true" UpdateMode="Always" RenderMode="Inline"]
[ContentTemplate]
[asp:ValidationSummary ID="ValidationSummary1" runat="server"]
[ContentTemplate]
[asp:UpdatePanel]
Thanks!
Suppose I have an ajax TabContainer with two tabs. Due to certain buisness logic, we might set one of the tabs to Visible = false.
In this scenario, is it possible to hide the TabStrip at the top, so that they don't see only one tab?
OK; didn't get any replies, but just wanted to summarize what I was able to do:
For the above situation, I actually was able to move the contents of the one visible tab outside the container by reassigning its parent control, and then re-adding where it needed to go (my example is a little more complicated than usual, due to update panels being in the section of code getting moved)
However, it does seem possible to hide the TabStrip by modifying its CSS class depending on how many tabs should be displayed. See http://www.krissteele.net/blogdetails.aspx?id=117 or http://cushen.wordpress.com/2007/10/25/how-to-styling-the-asp-net-ajax-tabcontainer-control/ for some examples of how to modify the styling.