?
Solved

Using JQuery Cycle Plugin

Posted on 2009-05-02
5
Medium Priority
?
530 Views
Last Modified: 2012-05-06
How do I get the following code to work properly.  When the page is rendered the both divs (Div1 & Div2) momentarily appear; then only Div1 is shown.  How do I  stop this behavior?  I only want Div1 to appear when the page is initially rendered.

Thanks
<script language="javascript" type="text/javascript">
            $(document).ready(function() {
                $('#Headlines').cycle({
                    fx: 'scrollUp',
                    speed: 7000,
                    timeout: 9000,
                    continuous: 1,
                    pause: 1
                });         
            });
    </script>
    
            <td style="border-top: #b1b1cb thin groove; border-bottom-color: #b1b1cb; border-left: #b1b1cb thin groove; border-right-style: groove; border-right-color: #b1b1cb; border-bottom-style: groove; border-width: thin; background-color: #FFFF99;" valign="top" align="center">
                <asp:Panel ID="Panel1" runat="server" Width="100%">
               
                <div id ="Headlines">
                
                    <div>
                        <div class="SMW" id="Div1" style="text-align: center">Head Line #1</div>
                    </div>
 
                    <div>
                        <div class="BDH" id="Div2" style="text-align: center" >Head Line #2</div>
                    </div>
                </div>  
                
                <div class="NormalText" style="color: #333333; text-align:center">Place cursor over event to pause scrolling</div>
                <p align="center">
                <asp:Panel ID="SpecialMessage" runat="server" CssClass="MessagePanel">
                <asp:Label CssClass="Caption" ID="lblCaption" runat="server" Text="Label"></asp:Label>
                <br />
                <asp:Label ID="lblMessage" runat="server" Text="Label" CssClass="Message"></asp:Label>
                </asp:Panel>
                </p> 
                </asp:Panel>
            </td>

Open in new window

0
Comment
Question by:Ray Turner
  • 3
  • 2
5 Comments
 
LVL 63

Accepted Solution

by:
Zvonko earned 2000 total points
ID: 24286781
For me it looks OK but if you want initialy to hide all Headlines then do it like this:

 <div id ="Headlines" style="display:none;" >
 
And extend your script to this:
 
 
<script language="javascript" type="text/javascript">
            $(document).ready(function() {
                $("#Headlines").css("display", "inline");
                $('#Headlines').cycle({
                    fx: 'scrollUp',
                    speed: 7000,
                    timeout: 9000,
                    continuous: 1,
                    pause: 1
                });
            });
    </script>

Open in new window

0
 
LVL 63

Assisted Solution

by:Zvonko
Zvonko earned 2000 total points
ID: 24286797
Sorry, INLINE was not so a good idea for DIV.
Take better this statement:
                $("#Headlines").css("display", "");

Open in new window

0
 

Author Comment

by:Ray Turner
ID: 24287223
This did not work well.  The entire Headlines is hidden.  I want only Div1 to be displayed initially.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 24287368
It works for me.
So the problem is elsewhere on the page.
Eithe show the complette page source or give a link to online page URL.
0
 

Author Closing Comment

by:Ray Turner
ID: 31577183
Thanks!  After rechecking my code I discovered some other issues?
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month14 days, 16 hours left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question