PDA

View Full Version : My Box



jscheuer1
07-16-2007, 02:26 PM
I've been working on my own take of lightbox/slimbox/interstitial content box/et al - and am ready for some feed back. I wasn't going to call it My Box, until I did a search on Google and found that no one appears to have such a named script yet. That and the fact that there was this hilarious video . . .

Anyways here's the link to the demo page:

http://home.comcast.net/~jscheuer1/side/mybox/

The script is really very easy to use, but I think I could explain it more simply. So, in addition to any critique of the code, help in making the explanation seem simpler and clearer would also be appreciated.

alexjewell
07-16-2007, 02:30 PM
Wonderful! I may use the iFrame one.

djr33
07-16-2007, 02:39 PM
Works fine in Mozilla 2.0 for Mac.
The only trouble was with the extra large image when it overlapped the lower textbox, and the scrollbars popped up through the image.
I'm not sure if this is a bug or your script or of the browser, as I have seen this before, though not frequently. (The other time I've seen this is with the IM windows in www.meebo.com.)

Now... for Safari 2.0 for Mac.
The script works identically for the first two links, and the link from 'hi' to 'bye'.
However, all of the rest (images, ajax, iframes) fail, simply loading in a new window. This proves, at least, that the script IS backwards compatible without any negative feedback, etc.


One thing I note about the script is its lack of fancy sliding/loading effects. This is good, or bad, depending on how you look at it.
I don't particularly like all of these effects and think there should at least be a way to disable them (if you were to add them).
But there are a lot of users out there who might want such and effect.

Just something random-- would it be possible to enable the escape key to exit the viewer?

kobo1d
07-16-2007, 02:43 PM
hey lol.. i just thought about a script like that, for some stuff on my page..
and then i saw your post.. nice.. goana try it out !

:)

djr33
07-16-2007, 02:48 PM
Another thought came to mind--
I've seen your scripts, so I can only assume this is coded as well as or better than other similar scripts.
However, is there anything else that makes this worthwhile? What does this have that other scripts don't have?
I suppose it does certainly allow for various types of content. That's very convenient.

(I'm not challenging it with this question, but just suggesting that you may want to try to think of something you could do to set it clearly one step above any similar options.)

jscheuer1
07-16-2007, 03:26 PM
Well, thanks folks. Um, lessee, the idea for this was first of all, none of the implementations of boxes that I saw around handled videos very well. That's because videos will continue to play unless you navigate away from them. Using an iframe wasn't even enough in and of itself. The iframe handling in this code actually navigates to a blank (about:blank) page whenever an iframe box is closed, and does so effectively for stopping a video. Navigating an iframe brings with it the issue of the history stack. Working out a way around this was the real trick to the code. That, and finding a way to get all the browsers I tested on to follow it, as well as to follow the Ajax routine without looking odd while doing so.

Then I figured, why not do everything else that these scripts offer - at least from the point of view of the types of content that can be loaded. I didn't want to load it up with special (ala scriptaculous or mootools) effects though. I wanted the code to be about as light weight as possible, while still providing an engaging interface. I copied the basic look of the box from DD's interstitial content box - without looking at the code, just figured out how I'd do it. That is css driven and can be customized. However, owing to the necessity of IE specific styles, getting IE and all others to follow the changes will be tricky if anything more than basic color and font changes are desired.

I also wanted to make the interface for a page designer to be as simple as possible. Lightbox has that, but does only images, some of the other scripts out there require you to write a mini script to initialize each box. I came up with the four similar and fairly simple methods outlined on the demo page as well as easy ways to call up a box or to close one with javascript code to be used anywhere on the page.

So, nothing really special here, it's just done the way I think it should be.

I'm still looking forward to code critiques and information on making the explanation of how to use it easier. I also want to go through the code again after a bit of time to see if I can cut it down a bit more or improve it in some way(s).

Twey
07-16-2007, 03:52 PM
Rather nice, well-constructed. Just a few qualms:
if(window.opera||/Apple/.test(navigator.vendor))Browser detection bad :) Also, I don't like your extensive use of the string form of the Function constructor. This is similar to using eval(), and as everyone knows, eval() is evil (http://blogs.msdn.com/ericlippert/archive/2003/11/01/53329.aspx).

mwinter
07-16-2007, 04:15 PM
http://home.comcast.net/~jscheuer1/side/mybox/

The script is really very easy to use, but I think I could explain it more simply.

The whole explanation, or are there some specific parts you don't like?



So, in addition to any critique of the code, [...]

I've had a cursory glance, though I'd reformat the code before critiquing it: if you want critiques, making the code pretty first would be nice. :)

I don't like the escaped new lines in the initial string literal: these are actually illegal, though tolerated in most browsers. I'd either settle for string concatenation or joining an array (below). The two other escapes are unnecessary, too - the first always is, no matter how the script is included.



document.write(['<style type="text/css">',
'#boxcontent {',
' position: absolute;',
' top: -80000px;',
' left: -80000px;',
'}',
'</style>'].join('\n'));


As someone might call a "box" mybox, you should declare the global with the same name properly using a variable declaration. If you don't, an exception will occur in MSIE as it will create its own read-only global. A variable declaration will give priority to the script - this is why globals should always be explicitly declared.

Not a problem, but curious: why use the DOM 0 Image constructor function if you're depending upon the DOM 1 createElement method? It seems strange to mix the two unnecessarily.

I'm sure you know that I'd appreciate feature detection and a defensive style, which seems absent.

The regular expression could be simplified to:

&#160;&#160;^(img|iframe|ajax|id)$

The initialisation portion of the for loop that follows is redundant.

The default for getAttribute in MSIE is a case-insensitive attribute search so the second (kludgy) argument isn't necessary. However, I would recommend that you drop use of the method entirely and use property equivalents.

Rather than obtain the value of the rel attribute repeatedly, cache the value and avoid the overhead of all of those method calls (or property look-ups). This applies to similar code patterns.

Drop the call to overrideMimeType and the related code. As discussed previously, this method is really only of use when wanting to have the response parsed as XML so that the responseXML property can be used to access the document using DOM methods. If you're only using the responseText property, attempting to change the media type is redundant.

jscheuer1
07-16-2007, 04:15 PM
Rather nice, well-constructed. Just a few qualms:
if(window.opera||/Apple/.test(navigator.vendor))Browser detection bad :) Also, I don't like your extensive use of the string form of the Function constructor. This is similar to using eval(), and as everyone knows, eval() is evil (http://blogs.msdn.com/ericlippert/archive/2003/11/01/53329.aspx).

The browser detection is simply to disallow the changing of the font-weight on hover of the close button. Both Safari and Opera handled it poorly, yet it looks so nice in others. If I could find another way, I will go with it - ideally a way that allows those two browsers to handle the effect. Safari moved the close link in response to its changing font-weight, even though it is positioned absolutely. Opera didn't do that, but did shift the contents of some iframe loaded pages slightly when this hover effect was applied - a very strange and virtually impossible to track down response.

I may rip out the new Function() and replace it with a direct assignment of a function. I had it like that at one point, but I think I like it better this way. You can assign your own onclick events to the links without them being overwritten by the script. The eval like component of it isn't very open to problems though, as any errors that arise would (I think only) be due to a weird URL with math operators in it (in the case of Ajax) being used - however, as it would be a string, maybe not even that would be a problem. The rest of the assignments are carried out in a controlled fashion and can only be the type of values expected. The other option, attaching/adding a function, would involve extra code and properties (if doable), but might be worth looking into.

Twey
07-16-2007, 04:39 PM
The eval like component of it isn't very open to problems though, as any errors that arise would (I think only) be due to a weird URL with math operators in it (in the case of Ajax) being used - however, as it would be a string, maybe not even that would be a problem.Performance is more of an issue really. eval() and new Function() both create a new compiler instance to compile the code, something that's done on every iteration. This is horribly inefficient. A closure would be much more efficient, and only slightly more code.
The browser detection is simply to disallow the changing of the font-weight on hover of the close button. Both Safari and Opera handled it poorly, yet it looks so nice in others.Handled it poorly how? I see the difference in it between Konqueror and Firefox (the letters shift outwards to accommodate their new weights in Konq) but they both look rather ugly to me :p Also, a prime example of why this approach to working around the problem is bad is demonstrated right here: it also exhibits what I presume is the unwanted behaviour in other browsers that you haven't considered. In fact, since Presto and KHTML are known for their standards-compliance, I'd suspect that that behaviour is probably actually correct.
If you can't find a more flexible way of deciding whether the effect will work or not, don't use the effect.

jscheuer1
07-16-2007, 06:52 PM
Performance is more of an issue really. eval() and new Function() both create a new compiler instance to compile the code, something that's done on every iteration. This is horribly inefficient.

How do you mean every iteration? Once the script initializes, these functions are used over and over. I guess you mean during the initialization process. Mike - any comment on this?


I see the difference in it between Konqueror and Firefox (the letters shift outwards to accommodate their new weights in Konq) but they both look rather ugly to me :p Also, a prime example of why this approach to working around the problem is bad is demonstrated right here: it also exhibits what I presume is the unwanted behaviour in other browsers that you haven't considered. In fact, since Presto and KHTML are known for their standards-compliance, I'd suspect that that behaviour is probably actually correct.

You should see how Opera handles it. Opera, or as you put it Presto, has no problem with the effect. It does a weird thing inside of an iframe in response to the change of the font-weight of an absolutely positioned element outside of the iframe. This cannot possibly be 'standards compliant', and only happens on some pages in the iframe. The KHTML script engine of my Safari 3 doesn't even do location.replace correctly, but Safari 3 Win may be a poor example. Anyways, I think I will keep it, as most folks have one of the browsers in question. The rest are used to slightly odd things like that happening. If it broke the script, that would be another thing. I may even put it back for Opera, as I think the problem is really with the layout of the page in the iframe. A well laid out page doesn't make the shift that I mentioned in my last post on this.

A note to Mike (mwinter) while I'm typing this. I do appreciate your observations, that wasn't a gratuitous Thanks I made on your post. and when I have a chance to go over them will get back to you.

killerchutney
07-16-2007, 06:59 PM
Cool, I will use this for my games site, if its alright with you js.

Trinithis
07-16-2007, 07:12 PM
The ones with images bring up the box with the images, but the script seems to continue running indefinitely afterwards, as if caught in a loop. This is bad because of the lag associated with it and because you can't close the box without exiting the page:

Carrot Island (image w/caption & title)
Nanner Tubes (image w/caption & title)
test remote loaded image (image w/caption & title)
Groundhog (image w/long caption & title)
Huge Image (image w/caption & title)

I suspect that it is Fx1 that is causing the problem because it they work fine in my IE6

Twey
07-16-2007, 07:21 PM
How do you mean every iteration? Once the script initializes, these functions are used over and over. I guess you mean during the initialization process.Actually, I seem to recall reading somewhere that new Function() compiled the string again every time the function is executed. I can't remember where I found that, though, so take it with a pinch of salt. Mike will probably know more.

jscheuer1
07-16-2007, 10:48 PM
The ones with images bring up the box with the images, but the script seems to continue running indefinitely afterwards, as if caught in a loop. This is bad because of the lag associated with it and because you can't close the box without exiting the page:

Carrot Island (image w/caption & title)
Nanner Tubes (image w/caption & title)
test remote loaded image (image w/caption & title)
Groundhog (image w/long caption & title)
Huge Image (image w/caption & title)

I suspect that it is Fx1 that is causing the problem because it they work fine in my IE6

Great catch, Trinithis! I had been testing on older Moz browsers, but things were working out well. So, I neglected to test some of the more recent additions to the script on them, assuming things would be OK. They obviously are not. I've found a fix and will be uploading it shortly. This goes back to an old bug in earlier Moz browsers as regards images and loading. With the fix, the browser will still appear to be loading the image, but at least it will not hang. If something is then later loaded into an iframe, the 'false loading state' of the already loaded image will also stop. The fix I am using involves removing the image's onload function after it has been used once. I don't like doing it this way, but it does no real harm to other browsers that I can see as yet. If the cache were cleared while on the page, and the page were not refreshed, this could cause a problem, perhaps not, I'll see.

jscheuer1
07-17-2007, 03:23 AM
The whole explanation, or are there some specific parts you don't like?

I'm not too sure. I think that the way the iframes get their attributes from their initializing links needs some fleshing out. I was hoping that folks with less experience than you or I could point out areas where the instructions seem vague or incomplete, but welcome this type of information from anyone.


I don't like the escaped new lines in the initial string literal: these are actually illegal . . .

OK, it is now just a single line string, thanks.


As someone might call a "box" mybox, you should declare the global with the same name properly using a variable declaration. If you don't, an exception will occur in MSIE as it will create its own read-only global. A variable declaration will give priority . . .

Good point, just a minor oversite on my part. Changed to:


var mybox = {

from:


mybox = {

That's what you meant, right?


I'm sure you know that I'd appreciate feature detection and a defensive style, which seems absent.

The script as is will not even initialize on browsers without at least addEventListener or attachEvent. If I were to add:


if(document.createElement)

before the mybox object declaration, I think I would be in pretty good overall shape that way. Maybe add a few, or one well placed:


if(document.images)


The regular expression could be simplified to:

**^(img|iframe|ajax|id)$

The initialisation portion of the for loop that follows is redundant.

The default for getAttribute in MSIE is a case-insensitive attribute search so the second (kludgy) argument isn't necessary. However, I would recommend that you drop use of the method entirely and use property equivalents.

I've adopted your RegExp and thrown out getAttribute. I've kept setAttribute for the iframe only, as it is the best, all other things being nearly equal, because it will convert frameborder, FRAMEBORDER, and any other variant to frameBorder, or whatever IE requires in assigning that and any other attribute that IE may have case issues with.

I've actually now made the for loop a little more convoluted, thinking that on a page with numerous links that don't need initialization, it would be best to get out of the loop as early as possible.


Rather than obtain the value of the rel attribute repeatedly, cache the value and avoid the overhead of all of those method calls (or property look-ups). This applies to similar code patterns.

Good one, that and using the properties/attributes directly saved a lot of code.


Drop the call to overrideMimeType and the related code. As discussed previously, this method is really only of use when wanting to have the response parsed as XML so that the responseXML property can be used to access the document using DOM methods. If you're only using the responseText property, attempting to change the media type is redundant.

At least for the time being I am leaving this in as a just in case. I can't see it doing any harm.

jscheuer1
07-17-2007, 03:37 AM
Cool, I will use this for my games site, if its alright with you js.

Fine by me, but you may want to wait till it appears in the submission section. That way more of any bugs that may turn up will have been fixed.

jscheuer1
07-17-2007, 05:19 AM
OK, all - round three has arrived. The latest revisions from the current feed back above have been made to the script. One thing I added that I am not 100% pleased with is a kludge for early Mozilla. In those browsers, when an image is added via the DOM (Yes Mike, I tried using DOM 1 createElement and it made no difference to this), the browser goes into this endless routine of appearing to load. I had already fixed the aspect of this that caused these browsers to hang, but they were still looking like they were trying to load something, even after the image was dismissed and removed from the document tree. Anyways, I hit upon kludge where, if I had an iframe appended to the end of the document - visibility hidden, position absolute and tucked out of the way, I could just do a location.replace('about:blank') to it. For some reason this stopped these older Mozilla browsers from continuing to look like they were loading. The bad part is that I can't tell which Mozilla browsers need this treatment and which do not, so I used:


if(!document.all&&!/Apple/.test(navigator.vendor))

The good news is that it doesn't seem to hurt any browser that doesn't need it.

Anyways folks, have a look at the new code if you would be so kind, and/or try out the demo and see how it is working for you now:

http://home.comcast.net/~jscheuer1/side/mybox/

Thanks again for all of your kind words and insights on this project.

wsalam
07-17-2007, 11:56 PM
Hi,
Great script, if I can make it to work. Unfortunately its not working for me.

code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link rel="stylesheet" href="css/mybox.css" type="text/css">
<!--[if IE]>
<link rel="stylesheet" href="css/mybox_ie.css" type="text/css">
<![endif]-->
<script src="scripts/mybox.js" type="text/javascript">
/*
* My Box script &#169; 2007 John Davenport Scheuer
* A kinder, gentler, yet versatile 'Box' script
* This notice must remain for legal use
*/
</script></head>

<body>

<!-- Begin Mybox Contents for above links with rel="id" - Don't remove opening division tag and with id="boxcontent" -->
<!-- Enclose each 'rel="id"' content in a division tag with an id equal to its link's rev value -->
<div id="boxcontent">
<div id="box1" class="id" style="width: 650px;">
Hi<br>
<a href="#" onclick="return mybox.show(1);">See Bye</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus lorem
lacus, blandit vel, consectetuer id, euismod tempor, orci. Integer tempus
dolor pharetra sem. Curabitur tristique semper quam. Aenean ut augue. Duis
porta. Donec augue tellus, facilisis at, ultricies non, mollis et, tortor.
Nam est lorem, porta et, bibendum in, fringilla vitae, dui. Nulla odio urna,
consequat at, imperdiet eu, tristique egestas, ante. Praesent turpis sapien,
tempus ac, euismod auctor, rutrum a, mi. Mauris ac turpis vitae purus dignissim
tempor. Vivamus lacinia pharetra massa. Sed nec justo sed erat laoreet iaculis.
Donec volutpat magna sit amet sem. Duis id odio vel libero imperdiet tincidunt.
Duis non velit quis nunc lobortis luctus. Pellentesque dapibus, erat vel
condimentum tincidunt, turpis lectus venenatis purus, non malesuada enim
orci nec mauris.</p>
<p>Etiam ac elit nec mauris vehicula consequat. Etiam est. Nullam ante magna,
volutpat nec, facilisis placerat, accumsan nec, elit. Proin id libero. Aenean
sit amet neque. Praesent a tortor. Nulla a velit. Proin non dolor. Sed volutpat
mi et quam. Cras lorem metus, iaculis sit amet, egestas quis, convallis
eu, nulla. Fusce cursus metus et nunc. Duis hendrerit pede at nibh. Nunc
lectus. </p>
<p>Etiam ornare justo vel arcu. Integer feugiat sapien ut erat. Quisque
arcu nisi, malesuada eu, lacinia at, facilisis ac, justo. Proin non odio.
Praesent nonummy mauris sed neque. Duis justo eros, porta et, rutrum vitae,
euismod ac, dui. Fusce massa. Nam id lorem. Aliquam tincidunt condimentum
pede. Pellentesque magna diam, consequat ac, interdum et, ultricies sed,
pede. Cras vitae nisi. Fusce condimentum scelerisque risus.</p>
<p>Sed placerat malesuada nibh. Integer magna odio, faucibus eu, gravida
sed, tincidunt sed, tellus. In eleifend varius sapien. Cras suscipit dolor.
Duis auctor mattis libero. Morbi pellentesque eros ullamcorper orci. Aliquam
magna nulla, consectetuer eu, viverra non, sodales non, sem. Donec feugiat
nunc a lacus. Mauris semper. Nulla rhoncus fermentum augue. Mauris et nisi
sed diam suscipit posuere. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Morbi tempor turpis in orci. Suspendisse fringilla nisi et purus viverra
rutrum. Cras scelerisque dui gravida massa. Duis tempor massa ac dolor.
Cras consequat, augue eget aliquet laoreet, eros augue faucibus sapien,
in posuere risus justo et orci. </p>
</div>
<div id="box2" class="id">
<p class="rb">Bye</p>
</div>
</div>
<!-- End Mybox Contents - Don't remove Closing </div> tag -->

</body>

</html>


Thats what I have in test page. I would like to use the script in a menu, where it will fetch the content from a differnt page to the top page.
I am a novic in this matter, please advice how i can learn more. any good book to read?

Thanx.

jscheuer1
07-18-2007, 02:41 AM
Hi,
Great script, if I can make it to work. Unfortunately its not working for me.

. . .


Thats what I have in test page. I would like to use the script in a menu, where it will fetch the content from a differnt page to the top page.
I am a novic in this matter, please advice how i can learn more. any good book to read?

Thanx.

A good book. Do you like mysteries? Biography? Anyways, your code won't work without any links for the script to initialize. You need at least one link of the four possible types mentioned on the demo page. Examples are in its source code.

As far as learning more about javascript and web presentational coding, here is a recent response I gave on that topic:


See:

http://www.dynamicdrive.com/forums/showthread.php?t=15425

and:

http://www.dynamicdrive.com/forums/showthread.php?t=21570

This is one good site that I am not sure if it is covered in the above discussions:

http://www.anybrowser.org/campaign/abdesign.html

Other than that, it really depends upon your style of learning. If you are more comfortable in the classroom, take a course. However, that will probably only get you the basics and may or may not be the best source of accurate and/or up to date information. The same is generally true of books. O'Reilly's books are generally fairly good and you can look at:

http://online-books.oreilly.com/

and:

http://www.oreilly.com/

to help you decide if they are for you.

kobo1d
07-19-2007, 11:21 PM
hey there i played around with your script, but it seems to have a problem in combination with ajax..
i mean i have a ajax driven page (dynamic content)..

and i wanted to use your script in a "included" page which is called dynamically by ajax...
but the code doesnt work there..

i also tried to write the code manually in the page, instead of calling the css&javascript from other locations..
both ways didnt worked..


is there any other good script, which does the same thing .. i need it for image displaying.. thx!

jscheuer1
07-20-2007, 05:17 AM
hey there i played around with your script, but it seems to have a problem in combination with ajax..
i mean i have a ajax driven page (dynamic content)..

and i wanted to use your script in a "included" page which is called dynamically by ajax...
but the code doesnt work there..

i also tried to write the code manually in the page, instead of calling the css&javascript from other locations..
both ways didnt worked..


is there any other good script, which does the same thing .. i need it for image displaying.. thx!

Actually, any script of this sort would have to be initialized to the Ajax added content at some point if it is meant to work with it. Also, any script of this sort would need to be prevented from initializing the same added content a second time (or least not fully a second time, if you catch my drift). I've worked this out with at least one other script, but I'm not certain if I have the time to go into the details as it would apply here at this time. For one thing My Box is still under development, so the final version's way of doing this may be different than the current version, which in my opinion still needs work.

One way would be to initialize all possible added content as the page loads by having hidden links that duplicate what is wanted on the added page(s). Once these are initialized on page load, when the Ajax added content arrives, it could use the:


return mybox.show(#);

and the:


return mybox.show('url', 'optional_caption');

methods mentioned on the demo page.

tech_support
07-20-2007, 06:40 AM
No fancy effects?

Twey
07-20-2007, 10:50 AM
return mybox.show(#)Error!
return mybox.show('#');

jscheuer1
07-20-2007, 02:25 PM
No fancy effects?

That really depends upon what you mean by fancy, though I can easily guess. I previously mentioned in this admittedly long thread that this was intentional. My intention being to keep the script lightweight:


I didn't want to load it up with special (ala scriptaculous or mootools) effects though.



return mybox.show(#)Error!
return mybox.show('#');

Not in the context of an onclick event, no. There it is a preference, but I normally would have just thrown it in anyway (must have been in a rush, or tired) and will go back now and add it.

Demonicman
07-20-2007, 02:39 PM
very nice, i enjoyed the box video

kobo1d
07-20-2007, 04:10 PM
One way would be to initialize all possible added content as the page loads by having hidden links that duplicate what is wanted on the added page(s). Once these are initialized on page load, when the Ajax added content arrives, it could use the:

return mybox.show(#);
and the:

return mybox.show('url', 'optional_caption');
methods mentioned on the demo page.


edit: ok i checked it now..

i need it to display a single image, not a box.
so i tried it with following line ->


<a href="#" rel="img" rev="Back Cover" title="#bkL_002 Back-Cover" onclick="return mybox.show('bkl_002_back.jpg', 'Back Cover');">Back</a> Picture

when i click the link, the box opens, but instead of an image, i get alot of code displayed..
like when i open a image with notepad..

any ideas ?


SIDE NOTE: i noticed another problem with the script... it doesnt overlay flash movies and some dhtml..
my flash header shines trough the gray overlay and my dhtml side-menu also does not get hidden...

Twey
07-20-2007, 04:27 PM
Not in the context of an onclick event, no.Huh? # isn't a valid identifier; there's no way it can fail to throw an error, as far as I'm aware.

jscheuer1
07-20-2007, 05:30 PM
Huh? # isn't a valid identifier; there's no way it can fail to throw an error, as far as I'm aware.

See the demo page. # is a stand in for the number representing the content. I did refer to the demo page in my post where that appeared, and that did not appear to be what you were complaining about, if I misunderstood, my apologies.

mwinter
07-20-2007, 07:11 PM
Changed to:


var mybox = {

from:


mybox = {

That's what you meant, right?

Yes, exactly.



Actually, I seem to recall reading somewhere that new Function() compiled the string again every time the function is executed.

I can't imagine why as the function body is represented by an immutable string.

Twey
07-20-2007, 07:35 PM
Oh, of course. My apologies, I took you literally.

jscheuer1
07-21-2007, 03:56 AM
edit: ok i checked it now..

i need it to display a single image, not a box.
so i tried it with following line ->


<a href="#" rel="img" rev="Back Cover" title="#bkL_002 Back-Cover" onclick="return mybox.show('bkl_002_back.jpg', 'Back Cover');">Back</a> Picture

when i click the link, the box opens, but instead of an image, i get alot of code displayed..
like when i open a image with notepad..

any ideas ?

That's not exactly what I suggested. What you've done is to fetch the image as Ajax content, which is why it shows you the code that comprises the image file. You could put the image on a page and fetch the page. Then all you would need is (Method One):


<a href="bkl_002_back.jpg" onclick="return mybox.show('bkl_002_back.htm', 'Back Cover');">Back</a>

Where bkl_002_back.htm is a page that holds the image and only the image.

Another method would be to have, on the top page (Method Two):


<a style="display:none;" href="bkl_002_back.jpg" rel="image" rev="Back Cover"></a>

Then, if that was the first mybox link on the top page, you could do:


<a href="bkl_002_back.jpg" onclick="return mybox.show(0);">Back</a>

in the Ajax loaded content. The first link is invisible and on the top page, and initializes the content. The second can be added later via Ajax and will launch the previously initialized content.


SIDE NOTE: i noticed another problem with the script... it doesnt overlay flash movies and some dhtml..
my flash header shines trough the gray overlay and my dhtml side-menu also does not get hidden...

With DHTML, it is the z-index values that are out of whack, you would need to either raise the z-index values in mybox or lower them in the other DHTML content. With Flash, z-index can play a role. However, it is also required that Flash content have its wmode set to transparent if it is to be overlaid by other page elements.

kobo1d
07-21-2007, 03:49 PM
hey !! thx for your very informative post !
this helped me alot and it works now..

i used method 1 :)

also the z-index thingy worked out... but this part here ->



With Flash, z-index can play a role. However, it is also required that Flash content have its wmode set to transparent if it is to be overlaid by other page elements.


edit: lol ok i got it... works now.. everything is fine.. thx again !! :)

jscheuer1
07-22-2007, 05:10 AM
OK folks! Thanks again for all of your helpful feed back! I've just finished updating (7/22/07) all the files for this script. The css files are now about as well commented and simplified as possible. The script code has been changed (in addition to reflecting many of your wonderful ideas) to remove all script objects from page elements and to add an extensive onunload event for IE to reduce/eliminate memory leaks. The demo page itself has been upgraded to explain more of the usage of the script and to give an example of a thumbnail image used as a trigger.

I think I am about ready to submit the script to DD, but want to sit on it for a little while. If there are any ways to further reduce leaks in IE, I am all ears, but I'm not even certain if it still has any because there are no indications in task manager and Drip is in my opinion not all that reliable (misses some things and can give false positives).

I'm still looking for feed back and would recommend anyone using the script already to download all the files again to take advantage of the improvements.

Again, thank you all for your help so far!

kobo1d
07-22-2007, 03:51 PM
updated to the latest version and still everythings looks nice..
thx for ya nice script :)

jscheuer1
07-25-2007, 03:54 PM
There is a new update to include:

Optional Onload Display & Cookie at:

http://home.comcast.net/~jscheuer1/side/mybox/

IgorV
07-27-2007, 07:13 PM
Hey John,

When i added the .loadit {display:none;}, i get a really bad effect.

Half the screen has opacity and the other have shows the background.

heres a print screen...please help. thank you :)

http://www.racerco.on.ca/images/untitled.jpg

jscheuer1
07-27-2007, 07:49 PM
Hey John,

When i added the .loadit {display:none;}, i get a really bad effect.

Half the screen has opacity and the other have shows the background.

heres a print screen...please help. thank you :)

Though it would make no difference to this particular thing, make sure you have all the latest files. I will be updating again soon. That image looks bad. Where did you put:


.loadit {display:none;}
?

It should go in your stylesheet. In any case, I can't tell too much from a picture, other than that it looks bad. Please supply a link to your problem page.

IgorV
07-30-2007, 02:01 PM
I put it at the bottom of your mybox.css file.

The page looks bad yes lol. i don't have a link to it but basically just picture what yours looks like but only half the page has the grey opacity. Thats the only difference. It doesnt do the 100% of the width.


.close a:hover {
color:#2D7F00; /* Color of text for the word CLOSE in the close link of the box (hover state) */
font-weight:bold; /* This style disabled in the script for several browsers */
}
.close a span {
font-weight:bold;
font-size:140%;
color:black; /* Color of text for the X in the close link of the box (resting state) */
}

.loadit {display:none;}

/* End Mybox Styles */

jscheuer1
07-30-2007, 03:11 PM
I put it at the bottom of your mybox.css file.

That much is fine. There must be something else about the markup and/or style of your page that is causing this. Most likely it is a style associated with the body and/or html element. I would need to see the page to be more specific, as it could be so many things. If you have some web space, put up a demo of the problem and post a link to it here. Otherwise, make up a zip of all the files required (including images, stylesheets, etc.) to demonstrate this problem and attach it to a message here.

IgorV
07-30-2007, 03:47 PM
Thanks John for the help. I'm gonna take an alternative approach but either way once i finally uploaded I'll pass along the link.

kobo1d
08-10-2007, 02:32 PM
hey again :)

i have some problems with your script in combination with another one, i added today... so i run mybox and it works sweet...
but if i add following script to my site, mybox stops working... ->

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

this is the javascript part of it ->
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.js

so sumthing in the code of this script crashes mybox...
plz help me !!

thx

jscheuer1
08-10-2007, 02:46 PM
hey again :)

i have some problems with your script in combination with another one, i added today... so i run mybox and it works sweet...
but if i add following script to my site, mybox stops working... ->

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

this is the javascript part of it ->
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.js

so sumthing in the code of this script crashes mybox...
plz help me !!

thx

The two work together fine here.

kobo1d
08-10-2007, 03:17 PM
thx for ya fast answer!

hmmm.. well im a special dynamic-ajax user, if u can remeber me...

http://www.dynamicdrive.com/forums/showpost.php?p=101526&postcount=32

and now if i include the collapsable div, i got my old problem again..
the image gets dispalyed, but not in your mybox...

:confused:

jscheuer1
08-10-2007, 03:43 PM
thx for ya fast answer!

hmmm.. well im a special dynamic-ajax user, if u can remeber me...

http://www.dynamicdrive.com/forums/showpost.php?p=101526&postcount=32

and now if i include the collapsable div, i got my old problem again..
the image gets dispalyed, but not in your mybox...

:confused:

I remember you, that (how you are using it) shouldn't make any difference. My best guess is that you either have broken up the markup of one script with another or have created a conflict of some type. I can't really be any more specific without a link to your problem page.

Please post a link to the page on your site that contains the problematic script so we can check it out.

kobo1d
08-10-2007, 07:59 PM
lol :eek:

dumb me strikes again...
its all well now.. i had a typo in the page header...

i love these typos.. :cool:

pantrikki
04-13-2009, 03:06 AM
Hello.

I love this script... can I call it from an iframe?

I'm using the script in an iframe, and I want the windows or pop-ups to open in the page that contains the iframe. Is it possible?

Thanks :D

SPOKMIK
05-01-2011, 07:14 PM
Hello.

I have been trying for hours now, to no avail. Finally I got the basic structure in place, but the popup window does not start upon loading, one has to click on "link_text_or_image" to open the square.
Further more, I cannot find a sollution to center my text and image in the popup window.
I enclose my coding so you can see where the error is.
Any help will be largely apreciated.
Thanks
KIM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>LA MIRAGE, TUNQU&Eacute;N, ALGARROBO - PARADOR &bull; Hotel &bull; Restaurant &bull; Sal&oacute;n de T&eacute; &bull; Boutique &bull; &bull; &bull; Hotel &bull; Restaurant &bull; Tea Room &bull; Boutique &bull; &bull; &bull; H&ocirc;tel &bull; Restaurant &bull; Salon de T&eacute; &bull; Boutique &bull; &bull; &bull; Hotel &bull; Restaurant &bull; Tesalon &bull; Boutique</title>
<!--LA MIRAGE, TUNQU&Eacute;N, ALGARROBO - PARADOR &bull; Hotel &bull; Restaurant &bull; Sal&oacute;n de T&eacute; &bull; Boutique &bull; &bull; &bull; Hotel &bull; Restaurant &bull; Tea Room &bull; Boutique &bull; &bull; &bull; H&ocirc;tel &bull; Restaurant &bull; Salon de T&eacute; &bull; Boutique &bull; &bull; &bull; Hotel &bull; Restaurant &bull; Tesalon &bull; Boutique.-->
<meta name="description" content="Hotel & Restaurant en hermoso Tunquén, Chile. Socio de la Ruta del Vino de los Andes al Pacífico ~ Hotel & Restaurant in beautiful Tunquén, Chili. Member of the Wine Route De los Andes al Pacífico."/>
<meta name="keywords" content="Tunquén, Algarrobo, parador, hotel, hôtel, restaurant, salón de té, tea room, tesalon, guesthouse, agroturismo, agritourism, wine-tourism, vinturisme, bar, boutique, shop, slow food, cocina chilena, Chilean cuisine, Chilean food, eventos especiales, special events, Chile" />
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #C60000;
margin-top: 0;
margin-right: 0;
margin-bottom: 30px;
margin-left: 0;
}
.thrColFix #container {
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
margin-top: 30px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.thrColFix #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 190px; /* padding keeps the content of the div away from the edges */
background-color: #999966;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
}
.thrColFix #sidebar2 {
float: right; /* since this element is floated, a width must be given */
width: 190px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #999966; /* padding keeps the content of the div away from the edges */
padding-top: 15px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
}
.thrColFix #mainContent {
margin-top: 0;
margin-right: 200px;
margin-bottom: 0;
margin-left: 200px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 50px;
padding-left: 10px;
height: 500px;
}
#footer {
background-color: #999966;
height: 40px;
width: 500px;
background-position: center;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.style1 {
font-family: "Allegro BT";
font-size: 48px;
text-align: center;
}
a:link {
text-decoration: none;
border-bottom-style: solid;
border-bottom-color: #351B00;
border-bottom-width: 0px;
display: block;
font-family: Georgia, "Times New Roman", Times, serif;
letter-spacing: 0.1em;
text-align: center;
color: #351b00;
padding-bottom: 5px;
padding-top: 5px;
}
a:visited {
text-decoration: none;
border-bottom-color: #351B00;
border-bottom-style: solid;
border-bottom-width: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: center;
letter-spacing: 0.1em;
padding-bottom: 5px;
padding-top: 5px;
display: block;
color: #351b00;
}
a:hover {
text-decoration: none;
font-weight: bolder;
color: #999966;
background-color: #C60000;
}
a:active {
text-decoration: none;
}
.style3 {color: #339933; font-weight: bold; font-family: Pristina; font-size: 24px; }
.style5 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #333300;
}
.style6 {
color: #333300;
font-family: "Rage Italic";
font-weight: bold;
font-size: 50px;
}
-->
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFix #sidebar1 { width: 180px; }
.thrColFix #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFix #sidebar2, .thrColFix #sidebar1 { padding-top: 30px; }
.thrColFix #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->

<link rel="stylesheet" href="css/mybox.css" type="text/css">
<!--[if IE]>
<link rel="stylesheet" href="css/mybox_ie.css" type="text/css">
<![endif]-->
<script src="scripts/mybox.js" type="text/javascript">
/*
* My Box script © 2007 John Davenport Scheuer
* A kinder, gentler, yet versatile 'Box' script
* This notice must remain for legal use
*/
</script>

<a href="COMMON/popup.html" rel="iframe" rev="width::600::height::450::scrolling::auto::frameborder::1" title="optional_caption">Link_Text_or_Image</a>



</head>

<body class="thrColFix">

<div id="container">
<div id="sidebar1">
<div align="center">
<p>&nbsp;</p>
<p><img src="IMAGES/flag_ES_a.gif" width="75" height="50" /></p>
</div>
<p><a href="SPANISH/HOTEL_ES/H_main_es.html">Hotel</a></p>
<p><a href="SPANISH/RESTAURANT_ES/R_main_es.html">Restaurant</a></p>
<p><a href="SPANISH/TEAROOM_ES/tearoom_es.html">Sal&oacute;n de T&eacute;</a></p>
<p><a href="SPANISH/BOUTIQUE_ES/boutique_es.html">Boutique</a></p>
<p>
<!-- end #sidebar1 -->
</p>
<div align="center">
<p>&nbsp;</p>
<p><img src="IMAGES/flag_FR.gif" width="75" height="50" /></p>
</div>
<p><a href="FRENCH/HOTEL_FR/H_main_fr.html">H&ocirc;tel</a></p>
<p><a href="FRENCH/RESTAURANT_FR/R_main_fr.html">Restaurant</a></p>
<p><a href="FRENCH/TEAROOM_FR/tearoom_fr.html">Salon de T&eacute;</a></p>
<p><a href="FRENCH/BOUTIQUE_FR/boutique_fr.html">Boutique</a></p>
</div>
<div id="sidebar2">
<div align="center">
<p>&nbsp;</p>
<p><img src="IMAGES/flag_UK.gif" width="100" height="50" /></p>
</div>
<p><a href="ENGLISH/HOTEL_UK/H_main_uk.html">Hotel</a></p>
<p><a href="ENGLISH/RESTAURANT_UK/R_main_uk.html">Restaurant</a></p>
<p><a href="ENGLISH/TEAROOM_UK/tearoom_uk.html">Tea Room</a></p>
<p><a href="ENGLISH/BOUTIQUE_UK/boutique_uk.html">Boutique</a></p>
<p>
<!-- end #sidebar2 -->
</p>
<div align="center">
<p>&nbsp;</p>
<p><img src="IMAGES/flag_DK.gif" width="66" height="50" border="0" /></p>
</div>
<p><a href="DANISH/HOTEL_DK/H_main_dk.html">Hotel</a></p>
<p><a href="DANISH/RESTAURANT_DK/R_main_dk.html">Restaurant</a></p>
<p><a href="DANISH/TEAROOM_DK/tearoom_dk.html">Te-salon</a></p>
<p><a href="DANISH/BOUTIQUE_DK/boutique_dk.html">Boutique</a></p>
</div>
<div id="mainContent">
<p class="style1"><span class="style6"><img src="IMAGES/patio_sepia_100.jpg" width="350" height="263" border="0" />La Mirage <br />
<span class="style5">PARADOR</span></span></p>
<p class="style1"><img src="IMAGES/fleur-de-lis_index.jpg" width="40" height="48" /></p>
<p class="style1"><span class="sendForm"><img src="IMAGES/flag_gay.jpg" alt="" width="50" height="31" /></span></p>
</div>
</div>


</body>
</html>