Need Help with HTML, jQuery, Javascript

Question

0.00/5 (No votes)

See more:

I am using JQuery to create a website. I have used an idea "A Page in a html page" to display one page (for example home.html) in a master page(default.html).
-- Following is the code I have used for Menu in Default.html --

XML

<div id="PSMenu" class="class_MenuTab">
    <ul>
        <li><a id="mnuHome" href=""> Home </a></li>
        <li><a id="mnuTechnology" href=""> Technology </a></li>
        <li><a id="mnuMethodology" href="">Methodology</a></li>
        <li><a id="mnuServices" href="">Services</a></li>
        <li><a id="mnuAboutus" href="">About us</a></li>
        <li><a id="mnuCareers" href="">Careers</a></li>
        <li><a id="mnuContactus" href="">Contact us</a></li>
    </ul>
</div>

-- Following is the code in Default.html for what I meant --

XML

<table id="Table_FrameContainer" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td id="tdIFrameContainer">
            <iframe id="iFrameHome" class="SubPage" src="Home.html" scrolling="no">
            </iframe>
            <iframe id="iFrameCareers" class="SubPage" src="Careers.html" scrolling="no">
            </iframe>
            <iframe id="iFrameContactUs" class="SubPage" src="ContactUs.html" scrolling="no">
            </iframe>
        </td>
    </tr>
</table>

I used this idea with the help of iframe tags in default.html page.

For the same, I have used the jquery script which identifies the frames by there IDs and hide/show them when particular menus are clicked on homepage. This means, if I click 'Contact Us' menu of default html page, it hides all iframes other than iframe containing ContactUs.html sub html page.
-- Following is the code I have put in .js file--

$(document).ready(function(){
    $("#iFrameCareers").hide();
    $("#iFrameContactUs").hide();
    
    $("#iFrameHome").show();
                
    $("#mnuHome").click(function(){
        $("#iFrameCareers").hide();
        $("#iFrameContactUs").hide();
        
        $("#iFrameHome").show();
    });
    $("#mnuCareers").click(function(){
        $("#iFrameHome").hide();
        $("#iFrameContactUs").hide();
        
        $("#iFrameCareers").show();
    });
    $("#mnuContactus").click(function(){
        $("#iFrameHome").hide();
        $("#iFrameCareers").hide();
        
        $("#iFrameContactUs").show();
    });
});

--------------------------------------------------------------------------------
Here, when I press Home menu on menu bar, it should display the iframe with id="iFrameHome" and hide iframes with id="iFrameCareers" and id="iFrameContactUs". In the same manner for all.

Currently, what I want is happening, but for very short time. Means, when we press Home menu in default page it displays iframe with id="iFrameHome" for 1 second and again start displaying all the frames together.

I want following, If the Contact Us menu is clicked, the page should focus only the iframe with id="iFrameContactUs" in Default.html page and same for all the pages.

Please help me out for this issue.
Thank you very much for help in advance.

Posted 14-Jul-11 19:52pm

Nachiket G

Updated 15-Jul-11 2:02am

Not Active

v3

Add a Solution

Comments

Yuri Vital 15-Jul-11 6:46am

What have you tried ? Post some code.

3 solutions

Solution 1

I wouldn't use this approach.

I would use the JQuery Tabs control and switch content on demand, Look at this article Google Chrome Extension - CodeProject Reputation Watcher[^]on how i achieved that, take particular note of the tab control referencing in the "Why Use JQuery UI" section.

The tab has a number of pages, some have local page content, other have externally referenced files.

This would take care of your needs I think, simply and effectively.

Posted 15-Jul-11 2:13am

DaveAuld

Solution 3

Hello,

Off course their are setting inside the javascript file that enables you to keep the iframe for a time longer than one second.Please try to see what settings are available and change them to fit your needs.

Good luck !

Posted 15-Jul-11 2:25am

mhamad zarif

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Not Active · Accepted Answer · 2011-07-15T02:18:00

Why use iFrames at all? You can use ajax to load the contents from other pages.

<div id="PSMenu" class="class_MenuTab">
    <ul>
        <li><span>Home</span></li>
        <li><span>Technology</span></li>
        <li><span>Methodology</span></li>
        <li><span>Services</span></li>
        <li><span>About us</span></li>
        <li><span onclick="ShowCareers">Careers</span></li>
        <li><span>Contact us</span></li>
    </ul>
</div>

<div id="careers" />
<div id="contactus" />

PHP

function ShowCareers()
{
$.get("careers.html", function(data) {
  $("careers").html(data);
});
}

http://api.jquery.com/jQuery.get/[^]