Hello!
Have you ever wondered how to create a friendly pop-up box without creating a pop-up window? well here it is:
mobox is a simple stylish box that appears on the top of a grayed out background.
There are three types of mobox:
1. Frame box
2. Round box
3. Blank box
Features:
1. Display Page contents - mobox can read another page contents and displays that in a box. you can specify the page through the HREF attribute in <a> tag.
2. Fix or auto size - You can specify the size of the box or letting the mobox to auto size to the page contents. If the specify box dimensions smaller than the page contents, mobox adds scroll bars where needed.
So what are you waiting for... check it out here... http://momoemail.googlepages.com/mobox.html
Blog Archive
49 comments:
The popup box you've designed should be perfect for me. However I'm having a problem making it work. I've uploaded the two files and in the same directory have a page in which I'd like a popup available. I get the page to load but not in a popup box. Here's the link I've tested: *p*a rel="mobox[450,350]&type=2" href="http://cnn.com" title="Form"*cnn.com*/a**/p* (*=>or<). Is that incorrect? Do I need to edit the .js file? Can you help me understand what I'm doing wrong or need to change? Thanks a ton. Bill, Atlanta
Hi, after trying a few of these solutions, I really like yours. But... I need to open and close the window from a function. I assume I can close the window by calling 'hideBox()' but I can't fiqure out how to open the window or turn the link: 'a rel="mobox[450,350]&type=2" href="testform.html" title="Form"' into a function call that works. I hope you can help me with this. Nice work and thanks for any help you can offer.
Scott
Hi Bill,
Sorry for not replying anytime earlier as i was traveling.
The mobox currenlty does not support cross domain links. if you are running the script localy or from a domain such as http://www.abcde.com then you cannot load contents from a site/page that reside in another domain such as http://cnn.com
try to point the link to a file from within the same site or from accessible directory.
i.e. < a rel="mobox[450,350]&type=2" href="testform.html" title="Form">
Hi Scott,
Here's how mobox is called/initiated:
On loading the page, the script scans the whole document to find all < a> tags with rel=mobox. getBoxTags()
for each found link it adds a listener waiting for the onclick event to be triggered. boxTag.onclick = function()
...
if you would like to call it from a function, then create a function containing what the boxTag.onclick = function() does. that should do it.
hope that helps
mo
Thanks for the script!
One question - is it possible to set the height to a 'percentage' of the visitor's screen?
My popups are large, and I'd like to have as little vertical scrolling as possible.
Thoughts?
:Stacey
Hi Stacey,
Yes, it is possible to make the pop-up to fit a certain width and height based on the client window's dimensions.
in the mobox script, there is a function getPageSize that returns the window's dimensions. use it to set boxFrame.style.width and height considering to divide/multiply the value by the percentage required.
i.e. width = 500px => (500*0.5) for 50%.
hope that helps
That's great news.
Unfortunately, I'm pretty new to scripting, and am having trouble figuring out the code to modify.
I'm guessing the code to modify is the snippet in the html file. For example, right now I have...
a rel="mobox[400,500]&type=1" href="boxcontent.html"
This produces a popup that is 400px wide and 500px tall.
If I wanted to change this so the box scales to 50% of the visitor's screen height, would I change it to...
a rel="mobox[400,500*0.5]&type=1" href="boxcontent.html" ?
Thank you so much for the clarification.
You can ignore my last email - the solution was easier than I was making it.
Looks like all you have to do put a percentage where the height number is...
rel="mobox[450,80%]
I tried it, and works like a charm :-)
Thanks again for your help!
is it possible to use this to display jsp pages as popups using mobox.. I was trying to do that. It doesnt seem to work. The Javascript error console says unknown property filetr but i guess thats a pretty common error mesaage and has nothing to do with it
Hi Chetan,
It should work as long your href points to the jsp file. could you post your link so i can check it?
Hey,
This looks like a great bit of kit and I'm looking forward to getting it working!
I can make the code work from a link like a dream, but would like the window to popup automatically, preferably after a set period of time...
My javascript knowledge is fairly basic so I'm after a bit of help if possible.
I noticed that someone else asked how to fire this from a function and you answered, but I can't unravel the code to figure this out. Can someone help?
Thanks very much in advance,
Glenn
(Feel free to email me at glenn[at]publicitymatters.com)
Cheers
Glenn,
it is simple..
create the following function in the mobox.js file:
function autoMoBox(boxTag){
boxDimensions = getBoxDimension(boxTag);
// create the box in the page.. only one box.
createBox(document.getElementsByTagName("body")
[0],boxTag);
// set box objects
box = document.getElementById(boxID);
boxFrame = document.getElementById(boxFrameID);
boxHeader = document.getElementById(boxHeaderID);
boxTitle = document.getElementById(boxTitleID);
boxContents = document.getElementById(boxContentsID);
indicator = document.getElementById(indicatorID);
overlayBG = document.getElementById(overlayBGID);
showIndicator(); applyOverlay(); showBox(boxTag); hideIndicator(); window.onscroll = maintPos; window.onresize = maintPos;
}
on your html page do the following
* create a link with an id that will holds the file that you would like to display(for example: autoPageLink)
such as:
< a id="autoPageLink" rel="mobox[450,350]&type=2" href="testform.html" title="Form"/>
Then on the body tag do this:
onload="autoMoBox(
document.getElementById('autoPageLink')
);"
That's it .. ;)
Hi,
I am wondering if it is posible that when you click on the link that this js is just showing popup window (with lats say some gif file) till the next page is not loaded?
I'd just like to thank you heaps momo for your help. This works a treat. Great script.
Cheers.
Milutin Jokic,
I am afraid, it may not be possible to do what you are after. you may wish to find alternative script for doing what you are after.
sorry,
Mo
Nice work!
Works great on my Joomla/php web site, but the background around the content box doesn't grey-out the undelying page with a semi-tranparent layer like it does when I test it on static pages.
Any idea where in the script I should concentrate? I really like the effect of having a greyish transparent "window-pane" surrounding the popup.
Joomla php website..
check on two things:
in the CSS: check the #overlayBG
in the javascript, check the applyOverlay() method.
you could use firebug firefox extension to debug through the javascript. it is really useful
Hey this mobox really works. Made my life a lot easier when writing an application. Many thanks
Hello. This post is likeable, and your blog is very interesting, congratulations :-). I will add in my blogroll =). If possible gives a last there on my blog, it is about the Celular, I hope you enjoy. The address is http://telefone-celular-brasil.blogspot.com. A hug.
I can not seem to get this to open a page where the contents are longer than the window I want and it add scroll bars. The window I want to be 450 x 450 of so and I want scroll bars to scroll down. I do not want it to be partially transparent, I want more like Form - mobox[450,350]&type=1 but when I use that one it goes full page length instead of clipping and adding scroll bars to go down.
would you like to post the contents of the page you want to open with scroll bar? can you also mention what browser you're using and what version?
momo
I like the code and it has helped me out with in issue I have been having for additional text.
However, I have noticed that any page that I have that has graphics, the graphics do not display inside the mobox.
Any ideas on how to fix it so my images show up with the text?
graphics should appear in the mobox if you made sure the path to the images is accessible from with in the page that calls the mobox.
for example:
* the index.html uses a mobox to display page1.html which are both in a folder called web.
page1.html displays images in folder called images inside the web folder. the path to the images from page1.html is similar to the path from index.html
Therefore index.html can read the images and hence mobox can display them.
hope that explains..
Yes, thank you.
I am using the box in a Course Management System for a class I am teaching, so it was just a matter of tracking down the right pathing.
Exellent! Just like what i wanted.
Got some questions...
1)Is it possible to change the grayout fade effect into blackish?
2)Can i use it to popup Images, instead of HTML files?
Hi Vicky,
Yes you can.
1. change the fading color from background-color:#F0F0F0;in the #overlayBG class within the mobox.css.
2. make the link point to an image instead of a file. i.e.
rel="mobox&type=1" href="images/london.jpeg" title="some thing"
Thanks bro!
Got another question... :)
Is it possible to execute the popup automatically when the page loads, rather than clickin a link?
Vicky, it is possible, however you need to create a new function that has the same code as boxTag.onclick = function(). in that new function, create a link type object and replace "this" with that created object. call this function on page load.
make sure that a link type object has the rel, dimension and href attributes.
hope that helps.
Hi
We are using mobox & it is great. However, it does cause an issue with the design layout in IE 6 - it moves the design header down the page. Are you aware of any fixes for this? Thanks Carmelk. UK
carmelk, can you provide more information please? and perhaps a sample of the design you are referring to?
Just implemented mobox on a test page for a client and am having one problem.
The browser is jumping from the mobox page to the intended page almost instantly. Is there a way to slow down the process?
This is the code being used:
a rel="mobox[450,350]&type=1" href="http://www.xxx.com/Blank.html" title="Form" Watch Live /a
I can send you the url off-line.
da, I understand that the mobox is poping up with the contents of the targeted url with no problems. if that is the case and you want to delay the pop up, then you will need to add a timer or a loop before showBox(this);
I've configured mobox to work with a live videostream.
It's going live in less than 5 minutes:
http://intheirboots.com/
mobox works when a user clicks a link to open a new window. is it possible to configure mobox to work automatically when a viewer goes to a site's homepage?
thanks,
da
Hi Da,
Yes It is possible to lunch mobox when a user goes to a homepage. what you need to do is this:
1. create a function that contains the code which appears inside the boxTag.onclick = function()
2. replace the "this" with an A tag variable.
3. on your homepage < body onload="the name of the function you have created">
hope this helps
momo,
are these lines from the mobox.js files the one's you're referencing? If so, which "this" is the one that gets replaced with an A tag?
--------------
// create click event listener
boxTag.onclick = function() {
boxDimensions = getBoxDimension(this);
// create the box in the page.. only one box.
createBox(document.getElementsByTagName("body")[0],this);
// set box objects
box = document.getElementById(boxID);
boxFrame = document.getElementById(boxFrameID);
boxHeader = document.getElementById(boxHeaderID);
boxTitle = document.getElementById(boxTitleID);
boxContents = document.getElementById(boxContentsID);
indicator = document.getElementById(indicatorID);
overlayBG = document.getElementById(overlayBGID);
showIndicator();
applyOverlay();
showBox(this);
hideIndicator();
window.onscroll = maintPos;
window.onresize = maintPos;
return false;
----------------
david
all the three of them inside the function.
Is there a way to make this popup work with image maps?
Yes... points the a tag to html file that containts the image map.
Great Script! Can it also be used with a "form" tag instead of an "a" tag?
Fly
Yes.. you can modify the script to look for a form tag instead of A tag. but you may want to think on how to lunch the mobox.
*Love* it - great job. I have it onload as a pop up window, but I have two questions - 1) how do you stop the horizontal scroll and 2) can you have more than one instance?
We want it to pop up onload, but we need people to also be able to click an image and have it pop up - it is only doing one or the other.
(please remove string before approving)
http://turbosonicusa.com/box/index.html
Do you have any place for $ donations for the script? Thanks.
summermcfarland -at- aol -dot- com
Hi Summer, Thanks for the comment.
1. To stop the horizontal bar, you need to increase the size of the mobox to cover the whole contents so no scroll is needed.
2. You can have both onload and onclick to lunch the mobox in the same file, but you cannot have two boxes lunched at the same time or trying to lunch the second one while the first one is still open.
hope this explain it.
regarding the donation, i have updated the blog so now you can make donation using paypal.
Please check the last URL I sent. It opens automatically just fine, but if you click on the regular link, as on your examples, it does not work, it goes to a page within the same frame.
The pop up is beautiful. I just can't get them to work on the same page.
Summer,
in your html, in the onload function
change it to
onload="initiation();autoMoBox( document.getElementById('autoPageLink') );"
Is there a way to make it a pop under instead of a pop up? We are losing more than 50% of visitors to a pop up using the onload function.
i am afraid that won't be a mobox. look it up on the web, but if you can't find anything then get in touch and i could create you one for small fee.
Love this pop up!! One question though - I have this as a contact form on a site and it interferes with the validation script - function checkform ( form ) - using method="POST" onsubmit="return checkform(this);" - and it interferes here. Should it be combined in the mobox.js file?
Sorry - got it. Because the form pops up in another window, the javascript needs to be referenced on the page where you are calling mobox, and not the external page of the pop up.
Post a Comment