www.webdeveloper.com
Results 1 to 10 of 10

Thread: Help fading content that is dynamically included with PHP

  1. #1
    Join Date
    Jan 2014
    Posts
    8

    Help fading content that is dynamically included with PHP

    Hello everyone.

    My site currently loads content into a <div> with the id 'content'.
    It does this by using PHP to dynamically include the content that the user requests.
    My php looks like this:
    PHP Code:
    <?php
            $content 
    $_GET['content'];
            
    $pages = array('forside''menukort''hvemervi''Kontakt''catering');
                if (!empty(
    $content)) {
                    if(
    in_array($content$pages)) {
                    
    $content .= '.php';
                    include(
    $content);
        }         
                    else {
                        echo
    'Siden kunne ikke findes. Der må være sket en fejl! Gå tlbage til <a href="index.php">forsiden</a>';
                    }
                    
                }
                
            else {
                include(
    'forside.php');
        }     
            
    ?>
    my html for the menu that calls the pages looks like this:
    HTML Code:
                        	<li><a href="index.php?content=forside">Forside</a></li>
                            <li><a href="index.php?content=menukort">Menukort</a></li>
                            <li><a href="index.php?content=hvemervi">Hvem er vi?</a></li>
                            <li><a href="index.php?content=catering">Catering</a></li>
                            <li><a href="index.php?content=Kontakt">Kontakt</a></li>
    What I want to do is fade in the content that's called through these chunks of code. (Fade out old, fade in new)
    I've then come the conclusion that using jQuery.AJAX is a good way to do this.
    Further more I've learned that something like this needs to be done:
    1. Find current content
    2. Get the URL(part of content that i want)
    3. fade out the old content;
    4. fetch new content from the new url
    5. Fade in new content.

    My problem is that I don't quite know how to do this.
    I've tried following this:
    http://stackoverflow.com/questions/1...-includes?rq=1
    But the did not work.

    Any help is very much appriciated.

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,670

  3. #3
    Join Date
    Jan 2014
    Posts
    8

    Thumbs up You're amazing!

    Quote Originally Posted by Padonak View Post
    Thank you very much!
    You're amazing! I will try adding it to my page later today and get back to you - I would love to give you some kind of credit !

    Also looking over the code there is some parts I'm not sure I understand fully, and I'm not going to be using something I don't understand.

  4. #4
    Join Date
    Jan 2014
    Posts
    8
    Ok, so I've implemented the script to my website, and the fading content works perfectly!

    There's 2 problems tho.

    1. On my frontpage, I have a jQuery slideshow which has vanished. It's not showing on the site.
    2. My css for the menu no longer works, how to apply the css to the menu created by the script. It has no id?

  5. #5
    Join Date
    Jan 2014
    Posts
    8
    Okay, I just looked further through the code and i found your css.
    But in order to no add background gradients to all links, i need to give the link in the menu only.

    Would #menu a {} do the trick? Or can I give the <a href="your_script" class="menustyle"> </a> fx.?

  6. #6
    Join Date
    Jan 2014
    Posts
    8
    Sorry for multi-posting.

    Solved the css problem, except some minor once.

    How to rearrange the menu order? Don't seem to understand that.
    And can I make the line below the menu not move when hovered?

    live site her:
    LIVE SITE
    Javascript on front page still not working

  7. #7
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,670
    remove all the commented from the code

    Code:
    <!--style>
    body{color:#000;background-color:#fff;font-family:Georgia,'Bookman Old Style',Verdana;font-size:14px;text-align:center;}
    a:link,a:active,a:visited{text-decoration:none;font-weight:bold;color:#000;}
    a:hover{color:Crimson;}
    #menu{text-align:left;}
    </style-->
    <!--script src="http://code.jquery.com/jquery-latest.min.js"></script-->
    i've commented this stuff and the slideshow seems to be working ok. but i'm on slow connection and your site is too heavy for it, so i'm not quite sure

    How to rearrange the menu order?
    by renaming your page files or changing the php part which sorts scanned dir. also you can re-sort the javascript array the way you need
    Last edited by Padonak; 01-23-2014 at 09:12 AM.

  8. #8
    Join Date
    Jan 2014
    Posts
    8
    Quote Originally Posted by Padonak View Post
    remove all the commented from the code

    Code:
    <!--style>
    body{color:#000;background-color:#fff;font-family:Georgia,'Bookman Old Style',Verdana;font-size:14px;text-align:center;}
    a:link,a:active,a:visited{text-decoration:none;font-weight:bold;color:#000;}
    a:hover{color:Crimson;}
    #menu{text-align:left;}
    </style-->
    <!--script src="http://code.jquery.com/jquery-latest.min.js"></script-->
    i've commented this stuff and the slideshow seems to be working ok. but i'm on slow connection and your site is too heavy for it, so i'm not quite sure



    by renaming your page files or changing the php part which sorts scanned dir. also you can re-sort the javascript array the way you need
    When ever I look at the site, the javascript on the frontpage (forside.php) is not even showing. Idk if it's a directory problem, but I doubt it.
    Also, sorting the array, can you give me a pointer?

    I can only sort it according to descending, or ascending.

    Can I use .replace(/a_/g, '')+ .replace(/b_/g, '')++
    And then name the pages a_forside.php, b_menukort.php.
    Wont that sort away they "a_" part and replace it with and nothing? And then descending sorting would work perfectly.

  9. #9
    Join Date
    Jan 2014
    Posts
    8
    Ok, my above guess did not work.

    Are there anyway I can get the php to check an array of the pre-sorted pages?

  10. #10
    Join Date
    Jan 2014
    Posts
    8
    Nevermind this, I found the solution.

    I simply created a pre-defined array with the pages it wanted and commented out the sort($files) and the scan $dir - I may need it later for bigger sites, but It's not necessary here.

    Thank you very much for the help! My Javascript on the front page is the only thing not working at the moment

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles