keeping an element alive? while browsing the site?_问答_开发者

keeping an element alive? while browsing the site?

开发者 https://www.devze.com 2023-03-30 14:46 出处：网络

I\'m not sure how to ask this, but I hope someone can help me out. Is it possible to have, say, an element (ie: footer or some sor开发者_开发问答t) stay in the viewer page while browsing the site? Not

相关专题：jquery load php

I'm not sure how to ask this, but I hope someone can help me out. Is it possible to have, say, an element (ie: footer or some sor开发者_开发问答t) stay in the viewer page while browsing the site? Not have the footer go away even if the user change pages (or clicks on a link)?

I hope my question is clear?

Thanks!

The way this can be achieved is by making all content loaded through AJAX/jQuery when someone clicks a link around your website.

Something you are looking for is as follows:

    <HTML>
    <HEAD>
    <SCRIPT src="jquery.js"></SCRIPT>

    <SCRIPT>
    function getPage(page) 
    { 
    $("#mainContent").load(page); 
    } 
    </SCRIPT>
    </HEAD>
    <BODY>
    <DIV>
    <a href="Javascript:getPage('aboutus.html')">About Us</a>
    <a href="Javascript:getPage('contactus.html')">Contact Us</a>
    </DIV>

    <DIV id="mainContent">
    Here is the default/home page information
    </DIV>
    </BODY>
    </HTML>

The linking pages only need to have the core information in them, and will be automatically given any css information from the landing page. However you will have the menu and anything outside the mainContent div tag static on the page.

You could use an iframe to display your site, and have the footer remain in the actual file. This has its disadvantages though, so I don't recommend it.

You could also use AJAX to load your pages, which is a more logical approach.

As Joe mentioned, frames are an option, but they're frowned upon these days.

Another option is to use AJAX. This is a more complicated than frames, but results in a much better experience. Basically, what you'd do is have the initial page load, which would also load some JavaScript. The JavaScript would be attached to any link. When the link is clicked, instead of, like a normal link, going to a new page and the whole page refreshing, JavaScript would load the new page into the current page. The other page that would be loaded would only be a partial HTML page, ie, not including the html, head, body tags and the menu etc. Instead it would just have the content.

Here's some basic JavaScript using jQuery to do this:

// attach a click handler to any nav links
$('nav a').click(function(event) {
    event.preventDefault();

    $('#content').load($(this).attr('href'));
});

Another option is to load all the content for the other pages in hidden divs. If you have a lot of content, this can result in a very large initial load. In this case you'd have something like this in your HTML:

<style>
     .content { display:none; }
</style>
<nav>
    <a href="home">home</a>
    <a href="contact">contact</a>
</nav>
<div class="content content_home" style="display:inherit;">...</div>
<div class="content content_contact">...</div>

// attach a click handler to any nav links
$('nav a').click(function(event) {
    event.preventDefault();

    $('.content').hide().filter('.content_' + $(this).attr('href'));
});

Hopefully this helps.

The only real way to do this, is to load the pages with ajax. So you're gonna have a big div that will contain everything inside of it, except for the footer. Then when someone clicks on a link inside of your big div, it will grab the linked page, and refresh the big div with the new page. The other answers are more detailed, this is just a very simplistic explanation. I would start looking into Ajax.

I think you're looking for HTML Frames. There are plenty of resources on the internet. Here's one, http://www.w3schools.com/html/html_frames.asp.