Sign in to follow this  
twistie

Javascript/Ajax overlays

Recommended Posts

In IPB, my assistant and that type of thing appear as a box ontop of the page which is rendered as part of the page. I know this is done using a mixture of CSS and Javascript but how can I do it for onr of my sites? All i want is users to be able to click on an image and one of these little boxes will pop-up with the full sized image in it because i don't wanna have to use pop-ups. Can anyone tell me where there might be a prewritten script or a tutorial for this?

Share this post


Link to post
Share on other sites

Look through the IPB Javascript files and you'll find it. When I want to integrate any Javascript feature from IPB into my website, I find it there.

Share this post


Link to post
Share on other sites

Yer, unofrtunatly I don't own a license for the most recent version of IPB and I don't think it was integrated into IPB 2.0 or earlier 'free' versions.

Share this post


Link to post
Share on other sites

you could always just view source (crtl+u in firefox) on the page where it shows and see how they do it; either the javascript or a src link to the js file will be there.

Share this post


Link to post
Share on other sites

My God! Why didn't I think of that?

However, i am not at my wits end trying to work out what the hell this script is actually calling. Here it is:


/*-------------------------------------------------------------------------*/

// Pop up MyAssistant window

/*-------------------------------------------------------------------------*/


function buddy_pop()

{

	var not_loaded_yet = 0;


	if ( use_enhanced_js )

	{

		try

		{

			xml_myassistant_init();

			not_loaded_yet = 1;

		}

		catch( e )

		{

			//alert(e);

			not_loaded_yet = 0;

		}

	}


	if ( ! not_loaded_yet )

	{

		ipb_var_base_url = ipb_var_base_url.replace( '&', '&' );

		window.open( ipb_var_base_url + 'act=buddy','BrowserBuddy','width=250,height=500,resizable=yes,scrollbars=yes');

	}



}



What the hell is this calling?
xml_myassistant_init();

Share this post


Link to post
Share on other sites

i think it might be ipb's way to call the javascript/ajax function xmlhttp. But i might be wrong. I am also working on something like this were you can just click and a box will appear.

Share this post


Link to post
Share on other sites

Here is an example to do it with your own code. You cant move the box but u can open and close it.

The HTML


<html>

<head>

<title>The Title</title>

<script src="js.js"></script>

<style>

#overlay {

display: none;

<!-- put the rest of your css for the overlay box here -->

}

</style>

</head>

<body>

<div id="overlay"></div>

.......

....And The Rest of the page

</body>

</html>

The js.js source


<!--save the js file as php and include it as php instead of js to have dynamic content -->

function showOverlay() {

overlay = document.getElementById('overlay');

overlay.InnerHTML = "put the html here that you want to have in the overlay";

overlay.style.display = "block";

}


function hideOverlay() {

overlay = document.getElementById('overlay');

overlay.style.display = "none";

}



hope that gives you an idea

Share this post


Link to post
Share on other sites

search on google for javascript popup box i found a good one on sourceforge once it didnt open a new window/tab but a little box that you can move and im not sure but i think you can resize it too

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this