Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member amcneely43's Avatar
    Join Date
    Jun 2012
    Posts
    2
    Member #
    31979
    I should preface this by saying that I am by no means a Web Designer ... I'm just trying to build a site for myself and have taken on the challenge of not using Wordpress. Essentially, I am trying to find a jquery function that can open links (of htmls from my own server) from my ul nav bar in a specified div tag (preferably the same div) -- i want this to work more or less like an iframe. I first attempted this by trying to learn php but was too overwhelmed. I have read on several forums this is possible using javascript. And have even found an example doing essentially what i want: http://www.dynamicdrive.com/dynamici...jaxcontent.htm

    But i am still having issues getting the link to open in the div -- in the html below the div is id'd #container
    <body>
    <div id="page_effect" style="display:none;">
    <BR>
    <div id="a1-title"><FONT SIZE="6" COLOR="#382D2C" FACE="Arial Black"><b>mytitle</b>
    </div>
    <BR>
    <div id="nav">
    <ul>
    <li class="everything"><a href="https://pupilpath.nvskedula.com">current</a></li>
    <li class="everything"><a href="https://pupilpath.nvskedula.com">past</a></li>
    <li class="everything"><a href="blacktempl.html" class="ajaxLink">text</a></li>
    <li class="everything"><a href="CV.html" target="_self">bio</a></li>
    <li class="everything"><a href="kameraden.html" target="iframe-container">kameraden</a></li>
    <li class="everything"><a href="https://pupilpath.nvskedula.com">inflammatio</a></li>
    </ul>
    </div>
    <BR>
    <div><video id="a8-video" class="everything" width="540" height="380" controls="controls"> <video src="caughtmapping1940.mp4" type="video/mp4" />
    </video></div>
    <div id="content" class="ajaxLink" style="border-style: none><p>this needs to work</p>
    </div>
    </ body>

    *********************
    And here is the Jquery I am working with (it's the last function):

    $(document).ready(function(){
    $('#page_effect').fadeIn(1500);
    });

    $(document).ready(function() {
    var eT=0;
    $('.everything').hide().each(function() {
    $(this).delay(eT).fadeIn('slow');
    eT += 200;
    });
    $('.everything').click(function() {
    $('.everything').stop(true,true).fadeIn();
    });
    });

    $(document).ready(function(){
    $('a.ajaxLink').click(function(){
    var url = $(this).attr('href');
    $('#container').empty().load(url);
    });
    return false;
    });

  2.  

  3. #2
    Junior Member amcneely43's Avatar
    Join Date
    Jun 2012
    Posts
    2
    Member #
    31979
    sorry - i should mention the "text" li tag in the ul is the link i have been fiddling with to get this to work .. just ignore the other nav buttons

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Check out jQuery's .load() or .html() function. Might just be what you're looking for.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Junior Member SimplyWebsites's Avatar
    Join Date
    Jul 2012
    Location
    Leicester
    Posts
    27
    Member #
    32160
    Make sure you have jQuery on your site and use this function:

    function loadPage(page_url,div_id){
    $.ajax({
    urlage_url,
    success:function(data){
    $("#" + div_id).html(data);
    }
    });
    }

    I've just written this quickly and havn't tried it but im pretty sure it works.

    Then your links would look something like this:

    <a href="javascript:loadPage('page.html','loader_div' );">Page</a>

    Hope I helped


Remove Ads

Posting Permissions

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

Search tags for this page

how to open a website url in div tag using jquery
,
jquery ajax open page
,
jquery hide div open with link
,

jquery open link in div

,
jquery open url using ajax
,
open link in div
,
open link in div content ajax
,

open link to div using php ajax

,
open url ajax jquery
,
open website link with jquery in div
Click on a term to search for related topics.
All times are GMT -6. The time now is 02:27 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com