JavaScript - Open Page And Display Appropriate Div?

Hey there

I want to know how i can make a page that opens and loads content in a div tag when i click a certain link on my home page.

i have a javscript code to load content into a div tag when the link is on the same page as the div tag, but i want to get a script where it will open a new page and load content into a div tag on that page.

like the link must be something like main.html?div=content.html

i know how to do this with iframes, but i want to work with div tags

thank you

javascript for loading content into the div tag on the same page :

PHP Code:

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function clientSideInclude(containerid, url){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(containerid, page_request)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(containerid, page_request){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
} 

Hi,

I am Aditya. I am explaining below the exact scenario where I need the help:

I am developing a web application in which I need to integrate a javascript/html editor on some of the web pages and then provide 'Edit' buttons on those web pages so that users can edit the content on that partciular html/jsp page (like editing in wiki pages) and then, when they add some content and click on submit button, the new content should appear on the web page with all the formatting (i.e. bold, italics, color and so on) which was applied by user when he was entering the text.
Now, I need help for the below issues:
1. Please suggest me a good javascript/html editor (freely downloadable) which I can use to integrate with my web pages.
2. Once the user has entered some content using the above javascript editor, how to make that content reach the server and update the corresponding web page.

I am new to web development, so may be that these questions are too simple.
But, I need some help from you.

Waiting for your reply,

Thanks,
Aditya

Hello Everybody

I have recently been tasked with a unique task and for the life of me I can not work out how to do it.

Using this website as an example:

http://www.coastalcontacts.com/cFaq.html

You can see that the FAQ questions open and close as you click on them, leaving the page looking clean for the most part.

Now I am writing up a landing page that will be doing something similar, however I would like the page to scroll down as each new question is opened up.

Meaning I click on one of the faq questions closer to the bottom of the page and then it scrolls down to show all the new content.

This does not need to happen for questions that do not go to the bottom of the page and are fully visible.

Any and all ideas would be much appreciated

Thank you

Hi
Im trying to creat a website so when the small image is rolled over a new page opens in the frame ( called main) i will upload it now to http://www.e-z-host.com/GZ/ all help apricated ! at the momment you have to click to open the page in the main frame.

I have a menu that lists all the categories and sub categories, when someone clicks a main category it opens up the sub cats for it. if someone clicks one of the sub cats the page open up to show all items in that category.

But what I would like to find out is how do I get the menu to open up as it was so it shows the category and sub category open?

Code:

			  <!-- start show cat list -->
			  			  <br><div style="font-weight: bold; font-size: 0.825em; padding: 0em 0em 0.3125em;">Select items by category</div>
			  <ul class="catMenuItem">
	<li><a style="background-image: url(&quot;images/triangle_down.gif&quot;);" href="#" class="titleTriangle"><span>cat1</span></a></li>
		<li style="display: block;" class="catSubMenu">
			<a href="?cat=2">sub 1-2</a> (0)<br>
			<a href="?cat=7">sub 1-3</a> (2)<br>
			<a href="?cat=8">sub 1-4</a> (0)<br>
			<a href="?cat=9">sub 1-5</a> (0)<br>
			<br>
		</li>
</ul>
<ul class="catMenuItem">
	<li><a href="#" class="titleTriangle"><span>cat2</span></a></li>
		<li style="display: none;" class="catSubMenu">
			<a href="?cat=3">sub 2-1</a> (0)<br>
			<a href="?cat=4">sub 2-2</a> (0)<br>
			<a href="?cat=5">sub 2-3</a> (0)<br>
			<a href="?cat=6">sub 2-4</a> (1)<br>
			<br>
		</li>
</ul>
<ul class="catMenuItem">
	<li><a href="#" class="titleTriangle"><span>cat3</span></a></li>
		<li style="display: none;" class="catSubMenu">
			<br>
		</li>
</ul>
<ul class="catMenuItem">
	<li><a href="#" class="titleTriangle"><span>cat4</span></a></li>
		<li style="display: none;" class="catSubMenu">
			<br>
		</li>
</ul>
<ul class="catMenuItem">
	<li><a href="#" class="titleTriangle"><span>cat5</span></a></li>
		<li style="display: none;" class="catSubMenu">
			<br>
		</li>
</ul>
<script type="text/javascript"><!--
/*		Categories Menu START	*/
    var prevCat;

    function menu(newCat) {
		var mens;
		var anchors;
        if (prevCat) {
			mens = prevCat.parentNode.getElementsByTagName('li')[0];
			anchors = mens.getElementsByTagName('a')[0].style.backgroundImage='url(images/triangle_right.gif)';
			prevCat.style.display = 'none';
		}
		
		if (newCat != prevCat) {
			mens = newCat.parentNode.getElementsByTagName('li')[0];
			anchors = mens.getElementsByTagName('a')[0].style.backgroundImage='url(images/triangle_down.gif)';
			newCat.style.display = 'block';
			prevCat = newCat;
		} else {
			prevCat = null;
		}
		
    }

    onload = function() {
        var menus = document.getElementsByTagName('ul');
        for (var a=0,x=menus.length; a<x; a++) {
            if (menus[a].className === 'catMenuItem') {
                menus[a].getElementsByTagName('li')[0].getElementsByTagName('a')[0].onclick = function() {
                    menu(this.parentNode.parentNode.getElementsByTagName('li')[1]);
                }
                menus[a].getElementsByTagName('li')[1].style.display = 'none';
            }
        }
    } 

/*		Categories Menu END		*/
--></script>
			  <!-- end show cat list -->

I have a website that is using ajax to keep the page up to date with the database information. I call this page through a file called start.php. Once index.php is loaded it has a menu with selections. I then want it to call a page called query.php in an iframe to update the information, but not open a new window. In the iframe the query.php will run and then redirect itself to blank.php. The code is as follows and any help would be much appreciated. I have tried several methods of doing this and they have been commented out because they didn't work or didn't do what I wanted them to do. I do not want to use window.open since IE doesn't work well with it.

window.open does work by pop up windows but I want to stay away from them.
The main code I am looking to get help on is in red under start.php.

In start.php I will include the entire file. In index.php I'm only going to include the main sections I use for this snippit. In query.php I'm not going to include query.php since I beleive this file isn't important for this snippit.

start.php
Code:

<html>
	<head>
		<title>Countries At War!</title>
      <body style="background-color:#B0C4DE;">
      
		<script language="JavaScript" type="text/javascript">
			//Gets the browser specific XmlHttpRequest Object
			function getXmlHttpRequestObject() {
				if (window.XMLHttpRequest) {
					return new XMLHttpRequest(); //Not IE
				} else if(window.ActiveXObject) {
					return new ActiveXObject("Microsoft.XMLHTTP"); //IE
				} else {
					//Display your error message here. 
					//and inform the user they might want to upgrade
					//their browser.
					alert("Your browser doesn't support the XmlHttpRequest object.  Better upgrade to Firefox.");
				}
			}			
			//Get our browser specific XmlHttpRequest object.
			var receiveReq = getXmlHttpRequestObject();
			//Initiate the asyncronous request
			
function sayHello() {
				//If our XmlHttpRequest object is not in the middle of a request, start the new asyncronous call.
				if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
					//Setup the connection as a GET call to SayHello.html.
					//True explicity sets the request to asyncronous (default).
				    receiveReq.open("GET", 'index.php', true);
					//Set the function that will be called when the XmlHttpRequest objects state changes.
					receiveReq.onreadystatechange = handleSayHello; 
					//Make the actual request.
					receiveReq.send(null);
				 
				}
}
 
			//Called every time our XmlHttpRequest objects state changes.
			function handleSayHello() {
				//Check to see if the XmlHttpRequests state is finished.
				if (receiveReq.readyState == 4) {
					//Set the contents of our span element to the result of the asyncronous call.
					document.getElementById('span_result').innerHTML = receiveReq.responseText;
				}
}

 function openMenu(query) {
  
    var myString = 'query.php?' + query;
   // window.open(myString, 'linkname', 'title=no, height=465, width=400, left=550, top=150,  location=yes, resizable=no, menubar=no, scrollbars=no')
    //document.getElementById('engine').src = myString;
	//document.getElementById('engine').setAttribute('src',myString;);
	//top.frames['engine'].location.href = myString;
	pausecomp(1000);
    sayHello();
} 
 

function pausecomp(millis)
{
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
} 
			</script>
	</head>
	<body>
<a href="javascript:sayHello();">Say Hello</a><br />
         <iframe src="blank.php" MarginWidth="0" transparent="yes" width="30" height="25"
			frameborder="0" scrolling="no" name="engine">
          UPGRADE YOUR BROWSER</iframe>
		<span id="span_result"></span>
        <body onLoad="sayHello();">
	</body>
</html>

index.php
Code:

<table width="100%" border="2" bordercolor="Black">
<tr><center>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=1');">Home</a></td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=2');">Jobs</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=3');">Travel</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=4');">Fight</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=5');">Inventory</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=6');">Properties</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=7');">Rewards<?php if($db_field['rewardpoints'] >= "1") print "(". $db_field['rewardpoints'] . ")";?></td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=8');">Profile<?php if($db_field['profilepoints'] >= "1") print "(". $db_field['profilepoints'] . ")";?></td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=9');">Alliances</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=10');">Options</td>
</tr></center>
</table>

Thanks in advance for all the help.

Hi there!
I am using GlassBox "http://www.glassbox-js.com/" As a light box on a website. Basically, You click an thumbnail image, and a window pops up with a larger version of that image.

Now originally, the window opened X number of pixels from the top of the page. However, My thumbnail images were located mid page, so when you clicked on one, the window would open at the top of the page and the user would not see it unless they scrolled up.

So I attempted to modify the script so that it would get the users page width/height and display it directly in the center no matter the position.

Now my problem is that the script only works when the user has already scrolled down. So if the page is scrolled all the way to the top, and you click on a thumbnail, the window will not open center screen.

Here is an example: http://synaxis.pcriot.com/

When the page loads, DO NOT scroll it, and click on the image. You will see the window pop up, and not centered, like it should be. However, now if you scroll down, and click the image again, you see that it is now centered. I also noticed that when the page is scrolled up, and the image does not center, it always is placed below the thumbnail image, or otherwise where ever the DIV is located. It normally located under the image, but if i place the DIV at the top of the page then the window will pop up there.
And this does happen on every browser that I have tested, Firefox, IE, and Chrome.

So, I am pretty much stumped as to why this is happening. If anyone can shed some light I would be very grateful.

Thank You



Here is a link to the original code:
http://synaxis.pcriot.com/javascript...ox/glassbox.js

And modified code:
http://synaxis.pcriot.com/javascript...ox/glassbox.js

The modified code is at the very bottom of the script.

Original Code:
Code:

/** 
* @public 
*/
if ( typeof($) == 'undefined' ) {
  $ = function (id) {
    return document.getElementById(id);
  }
}

Modified Code

Code:

/** 
* @private 
*/
var removeElement = function(id) {
	var Node = document.getElementById(id);
	Node.parentNode.removeChild(Node);
}

/** 
* @private 
*/
var getDocHeight = function() {
	var db = document.body;
	var ddE = document.documentElement;
    return Math.max(
        db.scrollHeight, db.offsetHeight, db.clientHeight, 
        ddE.scrollHeight, ddE.offsetHeight, ddE.clientHeight
    );
}
/** 
* @public 
*/
if ( typeof($) == 'undefined' ) {
  $ = function (id) {
    return document.getElementById(id);
  }
}

Hi All,
Im new to this forum...need some of your help and advice.

I have a js code like this :

<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {

$("#panel-tab").click(function(e) {
//if(autoTimer) clearTimeout(autoTimer);
//autoTimer = null;
e.preventDefault();
$("#panel").animate({ left: sipPos }, 1764, 'linear', function() {
if(sipPos == 0) { sipPos = -856; }
else { sipPos = 0; }

});
});
});
-->
</script>

what it does is that it hide and show a panel by slidint it to the left.

But my client want that on page load the panel opens automatically for about 2-3 seconds just to let users know that its here. So ive written this :

<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {
var autoTimer = null;
autoTimer = setTimeout(function(){
$("#panel").animate({ left: sipPos });
autoTimer = setTimeout(function(){
$("#panel").animate({ left: sipPos = -856 });
}, 2000);
},1000);

$("#panel-tab").click(function(e) {
//if(autoTimer) clearTimeout(autoTimer);
//autoTimer = null;
e.preventDefault();
$("#panel").animate({ left: sipPos }, 1764, 'linear', function() {
if(sipPos == 0) { sipPos = -856; }
else { sipPos = 0; }

});
});
});
-->
</script>

But when the panel finished showing the button to open it again doesn't work...any help please..really urgent.
thks

//Sam

Hi all , I need some help in altering the location tag and the View Larger Map links to open in a new window, currently it opens in the same window.

I didn't set any links myself, they were already in the code that I got from Google Maps, I placed it on my page as a custom script.

I tried to edit it myself and other frames on my page got all muddle up in preview !!!!!


_THE CODE_
<iframe width="350" height="280" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;ll=37.109574,-8.030563&amp;spn=0.011328,0.022724&amp;t=h&amp;z=16&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/?ie=UTF8&amp;ll=37.109574,-8.030563&amp;spn=0.011328,0.022724&amp;t=h&amp;z=16&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>

Hi, I have some JavaScript that is being used to open a new window and display a PDF file. This is working fine apart from the title of the new window being open. I am using the window.open function and I have set the title of the page using the document.write function (see code below). The code works fine for FF and IE but for some reason Google Chrome just displays 'Untitled - Google Chrome'

Code:

<body>
    <a href="javascript:openNewWindow();">Click Here</a>

    <script type="text/javascript">
        function openNewWindow()
        {
            var pdfWindow = window.open('', "window",
                'resizable=1,scrollbars=0,width=800,height=600');

            pdfWindow.document.write('<html><head><title>Window Title</title></head>');

            pdfWindow.document
                    .write('<body><iframe src="" id="ifrm" name="ifrm" width="100%" height="100%"></iframe>');

            pdfWindow.document.write('</body></html>');

            pdfWindow.document.close();
        }
    </script>
</body>

Note: I have also tried adding - pdfWindow.document.title="Title"; - to the JavaScript, with no luck.

Is there anything specific that is required for Chrome or am I just missing something??

Thanks in advance for any help!

Hi Gurus,

Please find the attached html that i am working on. this has 3 columns and the 3rd column is 'Show Comments' link. when I hover the link it should display the html page on top my existing page like a tooltip.

For Example:
In this forum, when hovered on each topic, the topic description is displayed as tool-tip.

can anyone shed some light?

Thanks!

How could I open a page/popup after closing one?
The objective is to log the user out if they haven't Logged out or clicked Logout.

I am sure there is a simple way to do this. None of my ideas work.

The only answer I could come with (after testing the whole day...)
IE(any version), Firefox, and other browsers don't support this idea, due to the fact that the user clicked close and you can't impose things on them.

Hi there,

I am trying to open some SWF videos from an HTML page. When the user clicks the link, I would like to have the videos open in a transparent window (not a separate browser wndow).

I have figured out how to embed the files and have them open in a transparent window as soon as you load/refresh the page but I want to open the SWF using a link.

Any suggestions?

Thank you all.
B

my password target opens in a new window using the 'open.window' command but i would like a command string that opens this target in the same frame within my frames page that my other pages open in.
thanks in advance manj