www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 24

Thread: jquery swap content make page default on load

Hybrid View

  1. #1
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293

    jquery swap content make page default on load

    I need con1 to show active and be loaded onload of page.

    this is my code to swap content. I am using a external php page to swap out content when the id of con1 con2 and so on our clicked.

    I want to make con1 show onload of page and the link to show active but when you go to the page it only shows my div with no content till a link is clicked. once link is clicked it hovers shows active and works great.

    here is my code


    <script language="JavaScript" type="text/javascript">
    <!--
    $(document).ready(function() {
    $("a.topnav").click(function() {
    $("a.topnav.active").removeClass("active");
    $(this).addClass("active");

    });


    });
    function swapContent(cv) {
    var url = "content.php";
    $.post(url,{contentVar: cv},function(data){
    $("#myDiv").html(data).show();
    });
    }

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,637
    Code:
    $(document).ready(function(){
    bla-bla-bla;
    bla-bla-bla;
    ...etc.
    $('#con1').click();
    });
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    thanks for your response. but im new to jquery and im having problems chaining functions together or adding them in one set of script. could you write that out with in my script so i can understand it better?

    for example if if i am displaying information from the php page in #myDiv

    $("#myDiv").html(data).show();

    can I not just change this code to make it load the first link and then continue on swapping out data?
    Last edited by Nicholas Diaz; 04-23-2013 at 11:56 AM.

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,637
    hi ) show the whole code plz
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    im trying hard to teach my self this but it so much harder for me then php or anything else i have done

  6. #6
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    <html>
    <head>
    <link rel="stylesheet" href="layout.css" type="text/css" />
    <script type="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css"></script>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <script language="JavaScript" type="text/javascript">
    <!--
    $(document).ready(function() {
    $("a.topnav").click(function() {
    $("a.topnav.active").removeClass("active");
    $(this).addClass("active");

    });


    });
    function swapContent(cv) {
    var url = "content.php";
    $.post(url,{contentVar: cv},function(data){
    $("#myDiv").html(data).init();
    });

    $( init );

    function init() {
    $('#con1').click();
    }



    }

    //-->
    </script>

    </head>

    <body>



    <div id="topnav">

    <a class="topnav" href="#" onClick="return false" onMouseDown="javascript:swapContent('con1');">Earth</a>
    <br />
    <br />

    <a class="topnav" href="#" onClick="return false" onMouseDown="javascript:swapContent('con2');">Atmosphere</a>
    <br />
    <br />

    <a class="topnav" href="#" onClick="return false" onMouseDown="javascript:swapContent('con3');">Solar System</a>
    <br />
    <br />

    <a class="topnav" href="#" onClick="return false" onMouseDown="javascript:swapContent('con4');">Galaxy</a>
    <br />
    <br />
    <a class="topnav" href="#" onClick="return false" onMouseDown="javascript:swapContent('con5');">Astrophysicist</a>

    </div>
    <br />
    <div id="myDiv"></div>


    </body>
    </html>

  7. #7
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,637
    see the example in the attachment

    code.zip
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  8. #8
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,637
    i don't know will it be better to have only one page but if you decide to make it on one page you can make various php-functions for various actions and you can call the function you need by passing, for example, 'mode' or 'act' or whatever you like to name it and then use switch:

    Code:
    <?php
    here goes your php-code
    and at the end of the code you put this
    
    $mode=(!empty($_GET['mode']))?$_GET['mode']:$_POST['mode'];
    switch($mode){
    case 'f_1': f_1();break;
    case 'f_2': f_2();break;
    default: here goes you default function of nothing;break;
    }
    ?>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  9. #9
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    first off your a rock star...

    a few things maybe you can help me on..

    so im trying to switch over to using jquery and JS on all my sites to make them look better.

    when setting up each page does it make sense to have each page in a separate .php file or should i make one .php and elseif all the way down the page dependent on what link is clicked?

    what is the appropriate way for setting pages up using jquery?

  10. #10
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,637
    to show the first topnav link content you can add
    Code:
    $('#topnav a:first').click();
    before the last closing brackets
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  11. #11
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    or maybe <body onload(lnk_1);>

    ??? that way it loads the first page so it makes the link active?

  12. #12
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    when i place that in it just shows the first div but does not show the link to be active

  13. #13
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    where would i add that?

    cause no matter what i do the content displays but the active link does not go active till its clicked.

    is there a way to set the home page link active on default and removed when another link is clicked?

  14. #14
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,637
    Quote Originally Posted by Nicholas Diaz View Post
    where would i add that?...
    Code:
    $(document).ready(function(){
    
    $('a.topnav').each(function(){
    $(this).click(function(){
    $("a.topnav").removeClass("active");
    $(this).addClass("active");
    /*
    we have 1.php and 2.php for getting some data
    let's set the menu links id's so that every id will contain the name of the certain php page (without '.php')
    this way we can get this as a substring taken from the link id (see the two lines of the code below)
    */
    var ID=$(this).attr('id');
    var php_page=ID.substring(ID.indexOf('_')+1,ID.length);
    /*and now we can get the appropriate data*/
    $.post(php_page+'.php',function(data){$("#myDiv").html(data);});
    });
    });
    $('#topnav a:first').click();
    });
    Last edited by Padonak; 04-23-2013 at 01:41 PM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  15. #15
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,637
    i tested it in Opera, FF and IE before i've put it here. everything worked good

    here is the working example http://ilolo.ru/wd/diaz/
    Last edited by Padonak; 04-23-2013 at 01:48 PM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

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