Solved

innerhtml

Posted on 2004-08-31
15
3,202 Views
Last Modified: 2012-06-21
<html>
<head>
<script type="text/javascript">
function setInnerHTML( id, str )
{          document.getElementById(id).innerHTML = str;
}
</script>
</head>
<body>
<div id="divA">This Is The Original Contents</div>
<div id="divB">
          <input type="button" value="::. Click Me .::" onclick="setInnerHTML('divA','http://msn.com');">
          <input type="button" value="::. Click Me2 .::" onclick="setInnerHTML('divA'http://yahoo.com');">
          <input type="button" value="::. Click Me3 .::" onclick="setInnerHTML('divA','http://google.com');">
</div>    
</body>
</html>

in above simple code, i just need that i click on one button and see the different page in the same div,, i am missing something in javascript, can someone please correct the code ??

thanks in Advance.
0
Comment
Question by:shafiqrao
  • 5
  • 5
  • 2
  • +2
15 Comments
 
LVL 33

Expert Comment

by:sajuks
ID: 11948657
<html>
<head>
<script type="text/javascript">
function setInnerHTML( id, str )
{          document.getElementById(id).innerHTML = str;
}
</script>
</head>
<body>
<div id="divA">This Is The Original Contents</div>
<div id="divB">
          <input type="button" value="::. Click Me .::" onclick="setInnerHTML('divA','http://msn.com');">
          <input type="button" value="::. Click Me2 .::" onclick="setInnerHTML('divA','http://yahoo.com');">
          <input type="button" value="::. Click Me3 .::" onclick="setInnerHTML('divA','http://google.com');">
</div>    
</body>
</html>
0
 
LVL 7

Expert Comment

by:gam3r_3xtr3m3
ID: 11948675
sorry, but no, you can't place a certain HTML source from other domains on your webpage using JavaScript.

gam3r_3xtr3m3
0
 
LVL 7

Expert Comment

by:gam3r_3xtr3m3
ID: 11948688
if i understood the other statement correctly, you could use iframes instead:

<iframe name="frame1"></iframe>
<a href="http://www.yahoo.com" target="frame1">Yahoo</a>
<a href="http://www.experts-exchange.com" target="frame1">EE</a>
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:shafiqrao
ID: 11948694
any best fit option ?? i actually want my own pages like first.html second.html to be displayed in certain area, i dont want to use frames.
0
 
LVL 33

Expert Comment

by:sajuks
ID: 11948712
0
 
LVL 14

Expert Comment

by:ziffgone
ID: 11948746
You may have to use one iframe or a popup window for this, if you go the way of the popup, it can be popped up way off screen so as not to be seen. Here's a way with a hidden iframe:


<head>
<script type="text/javascript">
function setInnerHTML(frm,id,str)
{          
    document.getElementById(id).src = str;
    var myInner = document.getElementById(frm).document.body.innerHTML;
    document.getElementById(id).innerHTML = myInner;
}
</script>
</head>
<body>
<div id="divA">This Is The Original Contents</div>
<div id="divB">
          <input type="button" value="::. Click Me .::" onclick="setInnerHTML('hiddenFrm','divA','mypage1.htm');">
          <input type="button" value="::. Click Me2 .::" onclick="setInnerHTML('hiddenFrm','divA','mypage2.htm');">
          <input type="button" value="::. Click Me3 .::" onclick="setInnerHTML('hiddenFrm','divA','mypage3.htm');">
</div>
<iframe id="hiddenFrm" src="" style="width:1px;height:1px;border:none;"></iframe>    
</body>
</html>

Regards...
0
 

Author Comment

by:shafiqrao
ID: 11948795
the example code that you proided donot show any change in contents
0
 

Author Comment

by:shafiqrao
ID: 11948806
can u please give me an example code for iframe ? i think i will go for any solution available.
0
 
LVL 14

Expert Comment

by:ziffgone
ID: 11949013
No problem, sorry about that, I didn't take in several factors, here is updated code that should work:

<head>
<script type="text/javascript">
function setInnerHTML(frm,str)
{          
    document.getElementById(frm).src=str;
}
function setDiv(myInner,id)
{
    document.getElementById(id).innerHTML = myInner;
}
</script>
</head>
<body>
<div id="divA">This Is The Original Contents</div>
<div id="divB">
          <input type="button" value="::. Click Me1 .::" onclick="setInnerHTML('hiddenFrm','page1.htm');">
          <input type="button" value="::. Click Me2 .::" onclick="setInnerHTML('hiddenFrm','page2.htm');">
          <input type="button" value="::. Click Me3 .::" onclick="setInnerHTML('hiddenFrm','page3.htm');">
</div>
<iframe id="hiddenFrm" name="hiddenFrm" src="" style="position:absolute;left:-100px;width:1px;height:1px;border:none;" onload="setDiv(document.frames['hiddenFrm'].document.body.innerHTML,'divA');"></iframe>    
</body>
</html>

Regards...
0
 

Author Comment

by:shafiqrao
ID: 11949080
i appriciate your help, but i cannot resolve the following line according to my needs, my mind is messed up for some personal reasons, can you please make it more specific to display the link like hotmail.com to some specific area  of window on a button click and then clicking on another button we can show yahoo.com in same are aof the screen, lets say its a div or a iframe, see http://shafiq.us i want to display different pages in the text area of the web site on menu click.

thanking you,
Shafiq.
0
 
LVL 8

Expert Comment

by:_aaron_
ID: 11949426
This will work for your web page... Just make sure that you place the iframe in the correct location and all will work fine...


<script>
function fn(url)
{
   if ( url )
   {
   document.getElementById('iframe0').src = url
   }
}
</script>

<body>


<iframe id=iframe0 style='position:absolute;top=100px;left=100px'></iframe>

<select onchange=fn(this.options[this.selectedIndex].value)>
<option value=''>Select Link
<option value='http://www.yahoo.com'>Yahoo
<option value='http://www.google.com'>Google
</select>


0
 
LVL 14

Expert Comment

by:ziffgone
ID: 11956458
Here you go, I have set it up with your little Navigation Select menu midway down your left navigation bar.

http://webmastereseller.com/test/shafiqrao/

You can pull the source code from there. Just remember to remove the "<base href="~">" tag located just above the </head> tag. Also, you wont need to use full path urls in the function, just direct paths such as "main.html" or "about.html".

Regards...
0
 
LVL 14

Expert Comment

by:ziffgone
ID: 11956565
Also, if you want to add it to the buttons on the nav bar, simply add the function to an onclick event in each:

<a href="#" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('Image16','','images/m1r.jpg',1);" onclick="setInnerHTML('hiddenFrm','about.html');return false;"><img src="images/m1.jpg" name="Image16" width="151" height="32" border="0"></a>

I did this in the About Us button on the top of the Nav Bar for example.

Regards...
0
 

Author Comment

by:shafiqrao
ID: 11960144
i dont have words to appriciate your help, but i am such a dumbass that i still cannot make it in working state for me. Is is possible that you can siaplay hotmail.com in the body area on click on About us, yahoo.com on a click on Registered Diplomas, and google.com on third button click ?.
The body area is the area that includes the picture of three students in lab and text starts from "Students in our undergraduate teacher ........... ", i.e. right side area of the left navigation buttons and under the globe.
I really really appriciate your help and that you are uploading it for testing on your domain even.

Thanks again.
0
 
LVL 14

Accepted Solution

by:
ziffgone earned 300 total points
ID: 11963048
"Is is possible that you can display hotmail.com in the body area on click on About us, yahoo.com on a click on Registered Diplomas, and google.com on third button click ?." ----> No. Not these pages. This is what we've been telling you all along. You will not be able to display them in the body area using the method we have been, you will receive an "Access Denied" error message when trying to get the innerHTML from these pages, which are not hosted on your domain.

I can do it for your own pages that are located on your own webspace at geocities, such as the ones I used in example on my page, "about.html","contact.html" "main.html" etc. I will give you an example of what I mean.

Go back to my page:
http://webmastereseller.com/test/shafiqrao/

Now, I have placed links in the top few buttons, the "ABout Us" button links to "about.html", hosted on my server, the "Registered Diplomas" button links to "main.html" hosted on my site. The "Career Tracks" button links to "contact.html" on my server, the "Professional Exams" links to "links.html" on my server, and finally, the "Performance Developement Center" button links to "google.com", hosted on google's server.

Click each link and watch the results.

If you want to be able to show pages hosted on a different domain, you will have to go with a solution like aaron's above, using an iframe where you want the body content. For example, this page uses an iframe in the main content area:
http://webmastereseller.com/test/shafiqrao/2/

I hope that I have been clear for you, you can not access the innerHTML from any page that is NOT hosted on the same server as your pages, meaning, if it's not located in a folder on your webspace, you are denied access to it's innerHTML. But...as my first page example shows you, if the pages are hosted on your server, then there is no problem accessing their innerHTML and applying it to the current page.

Hope that helps.

Regards...
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Understanding UserAgent String 2 46
Jquery driving me nuts... 14 28
arrays and buttons with user input 2 34
How to show popup no matter what a user clicks on navigation wise 10 33
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question