highlight div on page load?

Question

I want to highlight a div on page load. i could find a solution. But the issue is that it fades out entire content of the div. what i used

$('#searchdiv .highligth').fadeOut(1000);

and the html i have written

                   <div id="searchdiv">
                    <div class="highligth">
                        <table cellspacing="2">
                            <tr>
                                <td>
                                    <a class="anchorText">Filter By:</a>
                                </td>
                                <td>
                                    <asp:ObjectDataSource ID="objLanguage" runat="server" OldValuesParameterFormatString="original_{0}"
                                        SelectMethod="GetLanguage" TypeName="Lang.Repositories.LanguageRepository">
                                    </asp:ObjectDataSource>
                                    <asp:DropDownList ID="dlFilter" runat="server" DataSourceID="objLanguage" DataTextField="LanguageType"
                                        DataValueField="LanguageId" Width="150px" AppendDataBoundItems="True" OnDataBinding="dlFilter_DataBinding"
                                        OnDataBound="dlFilter_DataBound">
                                    </asp:DropDownList>
                                </td>
                                <td>
                                    <asp:Button ID="btnFilter" runat="server" Width="90px" Text="Filter" OnClick="btnFilter_Click" />
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

for few seconds the div is highlighted and as fadeout is mentioned so the content also fade out and the div becomes empty. How to let those control be visible??

Thanks.

Well of course it would fade out the entire contents of the div, what exactly are you trying to achieve here? Be more specific. — daryl, Jul 15 '11 at 20:48

score 1 · Answer 1 · answered Jul 15 '11 at 20:50

1

Is this what you're looking to do?

 $('.highligth').effect("highlight", {}, 3000);

answered Jul 15 '11 at 20:50

wanovak

6,117
25
32

i tried your code. but i don't see any effect. and i just wanted to hightlight the div for few second but with animation like fadeout. and css for the .highligth{ background-color:White;} – CoreLean Jul 15 '11 at 21:14
`highlight` changes the background of the DIV to a yellow-ish green and then fades it out according to the `duration`; here 3000 (3 seconds.) – wanovak Jul 15 '11 at 21:16
i did see the document but when i wrote your code but it didn't show any effect. so only i wrote that. looks like i need to add the css file – CoreLean Jul 15 '11 at 21:26
Put the code within `$(document).ready(function(){ ...(hightlight code)... });` – wanovak Jul 15 '11 at 21:29
ok i tried your code with fresh page. i am pasting my code which i tried. – CoreLean Jul 15 '11 at 21:48
Doesnt work.i tried this .

Hello Worlds

– CoreLean Jul 15 '11 at 21:54

score 1 · Accepted Answer · edited May 20 '16 at 10:05

1

Use fadeOut and fadeIn method,

 $('#searchdiv .highligth').fadeOut(1000).fadeIn(2000);

View Demo: http://jsfiddle.net/rgVTW/

edited May 20 '16 at 10:05

Jaykumar Patel

26,836
12
74
76

answered Jul 15 '11 at 20:50

Pit Digger

9,618
23
78
122

I think this will do. And i have not vote it down. :-) Your solution is better as i not changing any color n all. – CoreLean Jul 15 '11 at 21:20

Jovylle · Answer 3 · 2020-06-24T15:05:01.603

0

Actually there is a very easy and new way to do this.

just add #:~:text=Highlight%20These

try accessing this link

https://stackoverflow.com/questions/38588721#:~:text=Highlight%20a%20text

edited Jun 24 '20 at 15:05

answered Jun 24 '20 at 14:54

Jovylle

859
7
17

score 0 · Answer 4 · answered Jul 15 '11 at 20:50

0

Try this

$('#searchdiv .highligth').css({opacity: 0}).animate({opacity: 0.5 }, 1000);

answered Jul 15 '11 at 20:50

ShankarSangoli

69,612
13
93
124

highlight div on page load?

4 Answers4