Need JS help (not really SU-related, but it could be)

derei · 3 Dec 2011, 13:24

I need a overlay div for something I am trying to do and I found this: http://flowplayer.org/tools/overlay/index.html . Actually, I want to open some external page in that overlay.The example for doing that is here: http://flowplayer.org/tools/demos/overlay/external.html .
Anyway, I failed. the overlay is unpredictable, I could make it to open, but no page was loaded inside.
I tried to copy the whole "standalone page", but no success. I'm sure there is something that I don't do.

Maybe someone here, skilled in JS is willing to help me and build an example for me?

Thank you very much.

driven · 3 Dec 2011, 14:32

hi,

for the example to work locally, you need to save to a folder/directory on your machine.

you need to make 2 new .htm files and put them in the same folder.

they need to contain an iFrame and it's src, and be named "external-content.htm", "external-content.htm2", they should also work on their own if double clicked.

when all three are working, the example should open the others in it's sudo-modal window.

simple "external-content.htm"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>

	<head>
		<title></title>
	</head>
	<body>
<iFrame src="http://codemirror.net"></iFrame>

	</body>
</html>

You can sort out the css when their all running.

Note: some sites will not open in an iFrame, hence the test first approach.

john

driven · 3 Dec 2011, 15:51

hi,

that version was missing the img file so I grabbed it off the page and added it into the folder.. ../js_overlay_bad/img/overlay/close.png

now it all works locally [here] exactly the same as the online example.

I didn't change anything else,
your browser must be blocking same something. use a web inspector and see what's happening.

when you move onto using a different link for your version, you will likely need an iFrame in a local page, as above.

john

derei · 3 Dec 2011, 15:53

I guess I haven't made myself clear I need that overlay from http://flowplayer.org/tools/overlay/index.html to work. The page I want to load externally exists. But, if I save the whole standalone page (this one http://flowplayer.org/tools/demos/overlay/external.htm ) and I run it from my station, it fails to work. The overlay div is opened, but no (x) button and no page loaded... Though, on the website, everything works fine.

I'm a newbie, I'm just learning JS... so it's very possible that I'm missing something obvious.

Thanks again. I attached the files, dowloaded from the website.

EDIT - added print-screen images:

js_overlay_bad.7z

derei · 3 Dec 2011, 16:06

I thought that image is somehow provided from a third party location. (like the transparent red background).. and I hoped that will be available when I ran the file from my local host. Now the (X) is shown (i had to add the image src), as there was nothing, but the page is not loaded. I'll try to make a custom page (with iframe), not that existing one... but I doubt it will work different I tested it with IE9, FF, Chrome... same result on all of them. The black overlay is loaded... but the page is completely missing.

driven · 3 Dec 2011, 16:39

the simple html I added above should work if saved locally and opened.

if it doesn't, you've got some MS system blocking happening.

john

derei · 4 Dec 2011, 10:09

Still can't get it right In Chrome it doesn't even show the iFrame's border...
What I want to open in that overlay div is a Google Site Search Element

I'm attaching here the actual files.
js_overlay.zip

Any suggestions/solutions ?

driven · 4 Dec 2011, 11:56

couple of things, your key needs to be in the link src or the rest never gets to Google....
and you're shouting, in some of your additions... i.e. ALL_UPPERCASE. don't do it.
JS uses medial capitals for specificFunctionality and breaks if you yell at the wrong place.

<script type="text/javascript" src="https://www.google.com/jsapi?key=0110....editedOut......aww"></script>
<script type="text/javascript"> 
  google.load('search', '1', {language ; 'en', style ; google.loader.themes.minimalist});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl(
      '0110.......editedOut.........aww');
    customSearchControl.setResultSetSize(google.search.Search.filtered_cse_resultset);
    var options = new google.search.DrawOptions();
    options.setAutoComplete(true);
    customSearchControl.draw('cse', options);
  }, true);
</script>

the page works here in Webkit, but haven't tested if it searches...
john

derei · 4 Dec 2011, 11:59

Wow, thanks ! It searches, I tested it in the "classic way" ... now I had some trouble with the implementation.

EDIT - the CAPS were actually the original code copied from google. The entire gse.html is almost unaltered (except the line height, css modified - but I will restore it to actual size)

derei · 4 Dec 2011, 17:20

It seems like it doesn't work in Google Chrome ... and as I could read on internet, it seems to be a problem with loading the iFrame. Isn't any approach, to avoid iFrames? Or to make sure that it loads in Chrome too?

driven · 4 Dec 2011, 17:27

try it in a div, maybe the key will let that work...

derei · 4 Dec 2011, 17:59

@driven said:

try it in a div, maybe the key will let that work...

I made further tests... something blocks the loading of the search element in Chrome... I have no clue what it can be The iframe works in Chrome with static pages, but not with some loaded dynamical.

Div doesn't accept src, neither as html attribute nor as css . I tried, I documented on internet... I guess it would be possible with Ajax, but that is just too much for me

Any more suggestions?

derei · 4 Dec 2011, 23:01

The search is working, but from some reason it freezes IE and still don't load the search bar in Chrome. I just have no more ideas about what to do...
Here are the files.
js_overlay.zip