You are not logged in.

DIV over Krpano without WMODE = YES

VN2011

Professional

  • "VN2011" started this thread

Posts: 1,336

Location: Duluth MN

  • Send private message

1

Saturday, March 19th 2011, 1:26am

DIV over Krpano without WMODE = YES

it can be done. wmode cripples performance in IE9 so i had to remove wmode from my html. i still wanted to be able to open windows on top of krpano so i started searching. turns out it can be done. Click to start the tour then in the bottom left corner is an icon click that and it makes the div visible on top of krpano. click it a second time to close div. my mail form is displaying in 2 different sizes in IE and FF which is why i have the large background div. i am still working on making this look better i have to find out why the form is 2 different sizes then i can make a perfectly sized div that looks better. but this opens doors in krpano without having to accept the performance loss of wmode. should be able to add the HTML version of the Facebook "like" button on top of krpano in a corner next.

http://www.virtualnorthland.com/panos/duluth2/

mindlessboss

Professional

Posts: 1,082

Location: Russia, Kaliningrad

  • Send private message

2

Sunday, March 20th 2011, 3:58pm

Hello!
Without wmode it's works much better! *thumbsup*

How did you do that (abou div over pano)??? *confused* Please tell me *love*

Thanks in advance!
VRAP - desktop VR content player based on krpano.
Common tasks in one place in one click! Discussion thread
DOWNLOAD for MAC
DOWNLOAD for WIN

atomicmak

Trainee

Posts: 60

Occupation: E-Media Creative Work

  • Send private message

3

Monday, March 21st 2011, 5:45am

this is wow stuff.

i am looking for same thing for my ipad version of krPanoJS. could you please guide how you manage to get div over player ?
Regards
Mak

Dr. Schneckem

Trainee

Posts: 162

  • Send private message

4

Friday, October 28th 2011, 1:18pm

I'd love to know it, too!
0100011101101100011001010110100101100011 0110100000100000011010110110110001100001 0111010001110011011000110110100001110100 0110010101110100001011000010000001001010 0111010101101110011001110110010100101110 0010000001000101011000110110100001110100 0010000001101010011001010111010001111010 0111010000101110

Dr. Schneckem

Trainee

Posts: 162

  • Send private message

5

Friday, October 28th 2011, 1:52pm

Okay, it's really simple:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1&appId=218535434871997";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

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


<div id="layer" style="width:100px; height:50px; position:absolute; bottom:100px; right:10px; z-index:2;">
<div class="fb-like" data-href="URL TO LIKE" data-send="false" data-layout="box_count" data-width="500" data-show-faces="true" data-font="trebuchet ms"></div>

</div>


<div id="pano" style="width:100%; height:100%; z-index:1;">
	<noscript><table style="width:100%;height:100%;"><tr style="valign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
	<script>
		embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano"});
	</script>
</div>
0100011101101100011001010110100101100011 0110100000100000011010110110110001100001 0111010001110011011000110110100001110100 0110010101110100001011000010000001001010 0111010101101110011001110110010100101110 0010000001000101011000110110100001110100 0010000001101010011001010111010001111010 0111010000101110

Dr. Schneckem

Trainee

Posts: 162

  • Send private message

6

Friday, October 28th 2011, 3:36pm

Actually it isn't as simple as I thought it is, because the buttons disappear when switching to fullscreen mode.

This is my current code:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<!DOCTYPE html>
<html>
<head>
	<title>Swimming Hostel Berlin - Interaktive 360°-Panoramatour</title>
	<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<style>
		html { height:100%; }
		body { height:100%; overflow: hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
		a{ color:#AAAAAA; text-decoration:underline; }
		a:hover{ color:#FFFFFF; text-decoration:underline; }
	</style>
	
	<script type="text/javascript" src="speichern/js/swfobject.js"></script>
		<script type="text/javascript" src="speichern/js/downloadify.min.js"></script>

	
	
</head>
<body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1&appId=218535434871997";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'de'}
</script>

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


<div id="layer" style="position:absolute; top:13px; left:10px; z-index:2;">

   <div style="position:relative; float:left; height:20px; width:75px;"><g:plusone size="medium"></g:plusone></div>

   <div style="position:relative; float:left; height:20px; width:95px;">
       <div class="fb-like" data-href="http://www.panoptikum-berlin.de/tl_files/Panoramen/swimminghostel/praesentation/tour.html" data-send="false" data-layout="button_count" data-width="" data-show-faces="false" data-font="trebuchet ms"></div>
   </div>
		
	<div style="position:relative; float:left; height:20px; width:60px;">	
		<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-lang="de">Twittern</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
	</div>	
		
</div>

<div id="pano" style="width:100%; height:100%; z-index:1;">
	<noscript><table style="width:100%;height:100%;"><tr style="valign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
	<script>
		embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano"});
	</script>
</div>


</body>
</html>


So if anybody knows how to fix it, let me know. *smile*
0100011101101100011001010110100101100011 0110100000100000011010110110110001100001 0111010001110011011000110110100001110100 0110010101110100001011000010000001001010 0111010101101110011001110110010100101110 0010000001000101011000110110100001110100 0010000001101010011001010111010001111010 0111010000101110

Zephyr

Professional

Posts: 1,003

Location: Netherlands

Occupation: Web developer

  • Send private message

7

Friday, October 28th 2011, 5:01pm

to add a HTML layer on top of a Fullscreen Flash tour is inpossible. Flash itself disallows callign javascript (which is needed to control html from within flash) from fullscreen mode. the reason is, one could easily scam/takeover information the user types. Its a security issue.

you should use onenterfullscreen events to handle stuff like that (disable/hide email button, or show warning) or use flash email forms (not incredible hard to make, lots of tutorials across the web)

to have social buttons in flash you have to recreate them using the several API's. Facebook has an outstanding api to like/get likes. Although not real simple.

Dr. Schneckem

Trainee

Posts: 162

  • Send private message

8

Friday, October 28th 2011, 5:32pm

Well, crap. That's too much for me. Thanks for your answer. *smile*
0100011101101100011001010110100101100011 0110100000100000011010110110110001100001 0111010001110011011000110110100001110100 0110010101110100001011000010000001001010 0111010101101110011001110110010100101110 0010000001000101011000110110100001110100 0010000001101010011001010111010001111010 0111010000101110

Sam Rohn

Trainee

Posts: 110

Location: Brooklyn, New York

Occupation: 360° VR Photographer

  • Send private message

9

Sunday, October 30th 2011, 2:58am

here is a solution for a facebook like button all done in flash, not quick or simple...

http://labs.byhook.com/2010/08/03/facebo…utton-in-flash/

sam
Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

Similar threads