Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Loading div content from one file into another without a page refresh. (in WordPress)

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #31586
    mpoisel
    Member

    I know there was a snippet about ajaxing a word press theme on the site but I was getting nowhere fast. I actually found a different tutorial that did what I wanted to do here that I made a lot more progress with. I ran into another problem when it came to implementing it into WordPress. I’m pretty sure this is a jquery issue, if not I’ll post in the php forum.

    What I’m trying to do:
    Basically I’m just trying to load content from one div with an id of #content from one file to another with the same id without a page refresh.

    I have most of it working. The URL gets appended and the active links are working in the nav. But, the content in #content div is not being called in from the other file.

    If anyone could be of some help it would be greatly appreciated.

    Thank you in advance.

    The Java Script I’m using:


    $(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-0)){
    var toLoad = hash+'.php#content';
    $('#content').load(toLoad)
    }
    });

    $('#nav li a').click(function( ){
    $('#nav li a').addClass('active').not(this).removeClass('active');

    var toLoad = $(this).attr('href')+' #content';
    $('#content').fadeOut('fast', loadContent);
    $('#load').remove();
    $('#wrapper').append('LOADING...');
    $('#load').fadeIn('normal');
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-0);
    function loadContent() {
    $('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
    $('#content').show('normal',hideLoader());
    }
    function hideLoader() {
    $('#load').fadeOut('normal');
    }
    return false;
    });
    });

    page1.php




    page2.php



    And if it’s needed here is the css:


    #work-wrap {width:960px; float:left;}
    #work-nav-wrap {width:960px; float:left; min-height:70px; background-color:#0FF;}
    #nav {
    list-style: none;
    padding: 0;
    margin: 10px 0 20px 0;
    background-color:#999;
    display: block;
    overflow: hidden;
    font-size: 0.9em;
    height:33px;
    text-transform:capitalize;
    }
    #nav li {
    display: inline;
    }
    #nav li a {
    display: block;
    float: left;
    padding: 10px 20px;
    color: white;
    text-decoration: none;
    }
    #nav li a:hover {
    background: #1b1b1b url(images/nav_bar_o.jpg) repeat-x;
    }
    #nav li a.active {
    color:#0F0;
    }
    #content {width:100%; float:left;}
Viewing 1 post (of 1 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.