Try our conversational search powered by Generative AI!

Getting a container to fade in when a button is clicked

Vote:
 

Hello,

Probably a simple one for you guys - using the basic EPiServer Search in 6 R2 - the search works how I want it to, however i want the search results to fade in (using javascript or some other method) to make the page look a bit more contemporary.

Code as follows.

<div id="mainContent" class="rounded contentArea">
<h1>How are we doing?</h1>
<div id="Searchfor">
<span class="searchtitletext"><%--You searched for:--%><asp:TextBox ID="txtSearch" runat="server" cssclass="searchinput"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" onclick="btnSearch_Click" cssclass="searchbutton" />
<br />
<br />
<EPiServer:SearchDataSource ID="sdsSearch" runat="server" PageLink="8104">
<SelectParameters>
<asp:ControlParameter ControlID="txtSearch" Name="SearchQuery" PropertyName="Text" />
</SelectParameters>
</EPiServer:SearchDataSource>
</div>
<div id="Searchresults">
<h2>Search Results</h2>
<asp:DataList ID="dlSearch" runat="server" DataSourceID="sdsSearch">
<ItemTemplate>


<li class="searchresult"><EPiServer:Property ID="propPageLink" runat="server" PropertyName="PageLink" /></li>
<p class="searchtext"><EPiServer:Property ID="propMainIntro" runat="server" PropertyName="FurtherText" /></p><p class="divider"></p>

</ItemTemplate>
</asp:DataList>
</div>
</div>

</asp:Content>

 

Need the Search results div to fade in once the button at the top has been pressed.

Will just use a javascript solution - but wanted to ask the experts first, to check there are no EpiServer dependant conditions I should be aware of.

Many thanks.

Marc.

#73173
Jul 09, 2013 14:45
Vote:
 

Are you looking for full ajax experience without a postback or is it sufficient with the fade-in effect after the postback?

#73194
Jul 10, 2013 9:16
Vote:
 

Hi Alf,

Fade in effect after the postback is sufficient...

Many Thanks.

Marc.

#73201
Jul 10, 2013 11:10
Vote:
 

That seems a little non-EPiServer, all you would need is to render the result with a css that hides it.

And create a javascript that is run at startup. The script fades in the results either by using JQuery animation or maybe CSS3 transitions and play with the opacity?

Depending on what browser compatibility requirements you have.

#73202
Jul 10, 2013 11:19
Vote:
 

Hi Alf,

Thats fine! Was just checking for any EPiServer related anomalies.

Thanks for your reply.

Marc.

#73203
Jul 10, 2013 11:22
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.