jQuery Forum

Loading new content into a div - old content still displaying before new content loads
[2Replies]
- 13-Mar-2012 06:06 AM
- Forum: Using jQuery
I'm trying to provide basic password protection for certain pages on a site. What I want to happen is when they enter the password, the new page fades in. What is actually happening is that "loading" flashes on the screen, then the old content (gallerychoose2), then the new content flashes twice and stays there. I can't seem to get it so that the page goes blank or says "loading" and is then replaced by the new content. This should be really simple, but I can't seem to get it to work! Any ideas? Thanks!
1. <head>
2. <title></title>
4. </head>
5. <body>
6. <script>
7. $("#words").html('<p> Loading...<\/p>');
8. //this script is to add password protection to a gallery.
9. var pw="demo";//change "demo" to whatever password you want to use.
10. var password=prompt('This is a password protected area, please enter your password to continue', '');
11. if (password.toLowerCase()==pw)
12. $("#words").load('landgallery.html', function(){
13. $("#words").fadeIn('600');
14. })
15. else if (password.toLowerCase()!=pw)
16. var password=prompt('Incorrect password, please try again.', '');
17. if (password.toLowerCase()==pw)
18. $("#words").load('landgallery.html', function(){
19. $("#words").fadeIn('600');
20. })
21. else if (password.toLowerCase()!=pw)
22. alert('Incorrect password. Please contact us to obtain your password.','');
23. $("#words").load('gallerychoose2.html', function(){
24. $("#words").fadeIn('600');
25. })
27. </script>
28. <div id="words"><p>Loading...</p></div>
29. </body>

Getting a random picture to display
[7Replies]
- 12-Mar-2012 06:36 AM
- Forum: Using jQuery
Hi, I'm trying to get it so that a random picture displays from a gallery file one at a time. I'm probably making a basic syntax error somewhere as I'm fairly new to JavaScript/jQuery, but please can someone help? I can't get a picture to display in the div at all. Any help would be great, thanks!!

N.B. the pictures are called e.g. 101.jpg, 102.jpg - so I thought a random number generator would be best to get a random picture.

<script>

    $(document).ready(function generatePic(){

            function randomPicture() {

            var min=101;
            var max=120;

            var picture=Math.floor(Math.random()*(max-min+1))+min;

            }

            function bannerDisplay(){
                    $("#banner").fadeOut('400',function(){
                    $("#banner").load("pages/gallery/PhotoWall/images/'$picture'.jpg", function(){
                    $("#banner").fadeIn('600', randomPicture())
                    })})}

                bannerDisplay();

                }
                )

</script>

<div id="banner"></div>

queue() help
[1Reply]
- 02-Mar-2012 08:55 PM
- Forum: Using jQuery
Hi, I've got some code that loads content into a div dependent on which menu item is clicked. However, when I'm getting the new content to fade in, sometimes it hasn't finished loading, so the old content fades back in, then flicks over to the new content. How would I use queue() in this context to get the content to finish loading first before it fades back in? I've tried to do it, but it just ends up with a weird flashing effect. Any help would be much appreciated!! Thanks!
1. <div id="menu">
2. <ul>
3. <li><a href="#" class="menu-linka" data-remote-url="home.html">HOME</a></li>
4. <li><a href="#" class="menu-linkb" data-remote-url="about.html">ABOUT</a></li>
5. <li><a href="#" class="menu-linkc" data-remote-url="gallery.html">GALLERY</a></li>
6. <li><a href="#" class="menu-linkd" data-remote-url="contact.html">CONTACT</a></li>
7. </ul>
8. <script>
9. $('.menu-linka').click(function(){
10. $("#words").fadeOut('400',function(){
11. $("#words").load('home.html')
12. $("#words").fadeIn('600');
13. })})
14. </script>
15. <script>
16. $('.menu-linkb').click(function(){
17. $("#words").fadeOut('400',function(){
18. $("#words").load('about.html')
19. $("#words").fadeIn('600');
20. })})
21. </script>
22. <script>
23. $('.menu-linkc').click(function(){
24. $("#words").fadeOut('400',function(){
25. $("#words").load('gallery.html')
26. $("#words").fadeIn('600');
27. })})
28. </script>
29. <script>
30. $('.menu-linkd').click(function(){
31. $("#words").fadeOut('400',function(){
32. $("#words").load('contact.html')
33. $("#words").fadeIn('600');
34. })})
35. </script>
36. </div>
37. <div id="content">
38. <div id="words">
39. <script>
40. $('document').ready(function(){
41. $("#words").fadeOut('300',function(){
42. $("#words").load('home.html')
43. $("#words").fadeIn('400');
44. })})
45. </script>
46. </div>
47. </div>

Help with replaceWith() and slideUp()
[1Reply]
- 02-Mar-2012 09:02 AM
- Forum: Using jQuery
I'm trying to get it so that when I click on a menu item, the old content in the content div slides up, and then the new content slides up to replace it, and I can't get it to work. I've only included code for the first menu item as an example. What am I doing wrong? Any help would be much appreciated!! Thanks!

<head>
<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <title>some title</title>
<script>
    $('li.first').click(function(){
        var $content=$("#content");
            $content.slideUp(function() {
                $content.html('');
            $content.html('home stuff goes here').slideUp();
            )})}
</script>
</head>

<body>

    <div id="menu">
        <ul>
            <li class="first"><a>HOME</a></li>
            <li class="second"><a>ABOUT</a></li>
            <li class="third"><a>GALLERY</a></li>
            <li class="fourth"><a>CONTACT</a></li>
        </ul>
    </div>
    <div id="content">

    </div>

</body>
</html>

Response title

Attachments

jQuery Forum

Activity Trend