# JQuery & HTML & CSS - IPad und Apple-like Retina Effect



## andreano (10. Juli 2012)

Hallo liebe freunde der Sonne,

ich habe eine "Vision" ;-) ich möchte bzw habe vor zwei Projekte in einem zu verbinde.

Wenn ihr euch Fragt welche es sind? Hier:

*iPad Peek* - Homepage - Source Code
*Apple-like Retina Effect With jQuery* - Homepage - Source Code
*UPDATE:*
*Scrollbars* - Homepage - Source Code


Mein Zwischenstand:

habe geschaft beide .js datein zu einer zu verbinden
mache mich gerade an .css Dateien dran und versuche die zu verbinden

Im Großen und ganzem stehe ich auf den absoluten Boden.
Ich habe zwar noch eine weitere Idee aber ich kann die nicht verwirklichen bevor ich das nicht Geschäfts habe.
Für jede mögliche Idee und Hilfe währe ich Sehr dankbar.

*Update:*
In der Zwischenzeit bin ich auf den Ergebnis gekommen.
Anhang anzeigen 60432

Die Lupe habe ich extra für den Screenshot rot eingefärbt, damit es besser sichtbar wird.

*Problem*:
-ich kriege die "Lupe" nicht hin das die Lupe den eingezeigten inhalt von dem _iFrame_ vergrößerst
-den eingezeigte Inhalt ist in einem _iFrame_
-und die "Lupe" ist in einer _div-box_ einfach oberhalb
-die Lupe ist mithilfe von einem _z-index_ oberhalb von dem _iFrame mit dem Inhalt_


Gruß Aleks

Ps. Unten sieht ihr meine "Vision"


----------



## andreano (11. Juli 2012)

*Update:*
In der Zwischenzeit bin ich auf den Ergebnis gekommen.


Die Lupe habe ich extra für den Screenshot rot eingefärbt, damit es besser sichtbar wird.

*Problem*:
-ich kriege die "Lupe" nicht hin das die Lupe den eingezeigten inhalt von dem _iFrame_ vergrößerst
-den eingezeigte Inhalt ist in einem _iFrame_
-und die "Lupe" ist in einer _div-box_ einfach oberhalb
-die Lupe ist mithilfe von einem _z-index_ oberhalb von dem _iFrame mit dem Inhalt_
-da die "Lupe" in einem sich unterhalb liegenden _iFrame_ befindet kann ich dann auf die Links in dem _iFrame_ nicht draufklickt
-und beim neuladen von der Seite sieht es so aus das die "Lupe" in dem Oberen linke Ecke sich automatisch befindet ohne zu verschinden.


----------



## andreano (11. Juli 2012)

Mein Zwischenstand von dem Quellcode:


```
<!DOCTYPE html>
<html>
<head>
<title>iPad Peek</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.url.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="shortcut icon" href="favicon.png" type="image/png" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="ipad" class="landscape">
  <div id="reload"></div>
  <div id="kbd"></div>
  <input id="url"></input>
  <input id="bing"></input>
	<div id="iphone">
		<div id="webpage">
			<div id="retina"></div>
			<iframe id="frame"></iframe>
		</div>
	</div>
</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-15639638-2");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>
</html>
```

*style.css*

```
body { background: #000; color: #fff; font-family: 'Droid Sans', 'Liberation Sans', FreeSans, 'Helvetica Neue LT Std', 'Helvetica LT Std', Helvetica, Arial, Tahoma, 'Lucida Grande', 'Lucida Sans', sans-serif; }
a { color: #29f; }
#ipad { margin-left: auto; margin-right: auto; position: relative; left: 0px; top: 0px; }
#ipad.landscape { background: url('orig/landscape.png'); width: 1108px; height: 852px; }
#ipad.landscape #rotate { width: 1108px; }
#ipad #reload { width: 18px; height: 18px; position: absolute; cursor: pointer; top: 89px; }
#ipad.landscape #reload { left: 745px; }
#ipad #kbd { position: absolute; left: 42px; top: 116px; display: none; z-index: 10; }
#ipad.landscape #kbd { background: url('orig/landscape_kbd.png'); width: 1024px; height: 694px; }
#ipad #url { position: absolute; left: 282px; top: 87px; height: 21px; background: #fff; border: none;
  font-family: 'Droid Sans', 'Liberation Sans', FreeSans, 'Helvetica Neue LT Std', 'Helvetica LT Std', Helvetica, Arial, Tahoma, 'Lucida Grande', 'Lucida Sans', sans-serif;
}
#ipad.landscape #url { width: 460px; }
#ipad #bing { position: absolute; top: 87px; height: 21px; background: #fff; border: none;
  font-family: 'Droid Sans', 'Liberation Sans', FreeSans, 'Helvetica Neue LT Std', 'Helvetica LT Std', Helvetica, Arial, Tahoma, 'Lucida Grande', 'Lucida Sans', sans-serif;
}
#ipad.landscape #bing { left: 785px; width: 260px; }
#ipad #frame { border: none; position: absolute; left: 42px; top: 120px; z-index:1;}
#ipad.landscape #frame { width: 1024px; height: 690px; margin-left:-42px; margin-top:-120px; }
#ipad.portrait #frame { 
  width: 1024px;   /* 768 * 4 / 3 - 1*/ height: 1261px;  /* 946 * 4 / 3 */ 
  -moz-transform: scale(0.75); -moz-transform-origin: 0 0; 
  -webkit-transform: scale(0.75); -webkit-transform-origin: 0 0; -o-transform: scale(0.75); -o-transform-origin: 0 0; 
 }

#webpage	{ /* Contains the webpage screenshot */ width: 1024px; height: 690px; position:absolute; margin-left:42px; margin-top:120px; border:2px solid red; }
#retina		
{											z-index:2;
	/* Für IE */							filter:alpha(opacity=50); 	
	/* Für Gecko-Browser */					-moz-opacity:0.5; 			
	/* Für Konqueror, Opera 9+, Safari */	opacity:0.5; 				

	/* The Retina effect */									background:url('') no-repeat center center red;
	/* A blank cursor, notice the default fallback */ 		cursor:url('img/blank.cur'),default;	
	/* CSS3 Box Shadow */ 									-moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset; -webkit-box-shadow:0 0 5px #777; box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
	/* CSS3 rounded corners */ 								-moz-border-radius:90px; -webkit-border-radius:90px; border-radius:90px;
}
#retina			{ border:2px solid white; position:absolute; height:180px; width:180px; }
#retina.chrome	{ /* A special chrome version of the cursor / kleiner punkt - cursor */ 	cursor:url('img/blank_google_chrome.cur'),default; }
```

*script.js*

```
var setFrameUrl = function(url) {
  if (!url || url == 'undefined') return;
  if (!url.match('^https?://')) {
    url = 'http://' + url;
  }
  $('#url').val(url);
  $('#frame').attr('src',url);
};

var rotate = function() {
  $('#ipad').toggleClass('landscape').toggleClass('portrait');
}

$(function(){

setFrameUrl($.url.param('url'));
if ($.url.param('portrait')) rotate();

$('#reload').click(function(){
  $('#frame').attr('src',$('#frame').attr('src'));
});

$('#url').focus(function(){
  $('#kbd').show();
});

$('#url').blur(function(){
  $('#kbd').hide();
});

$('#url').keyup(function(evt){
  if (evt.keyCode != 13) return;
  $('#url').blur();
  setFrameUrl($(this).val());
});

$('#bing').focus(function(){
  $('#kbd').show();
});

$('#bing').blur(function(){
  $('#kbd').hide();
});

$('#bing').keyup(function(evt){
  if (evt.keyCode != 13) return;
  $('#bing').blur();
  setFrameUrl("http://www.bing.com/search?q="+escape($(this).val()));
});

$('#show_about').click(function(){
  $('#about').slideToggle();
  return false;
});

});



$(document).ready(function(){

	/* This code is executed on the document ready event */

	var left	= 0,
		top		= 0,
		sizes	= { retina: { width:190, height:190 }, webpage:{ width:1024, height:690 } },
		webpage	= $('#webpage'),
		offset	= { left: webpage.offset().left, top: webpage.offset().top },
		retina	= $('#retina');

	if(navigator.userAgent.indexOf('Chrome')!=-1)
	{
		/*	Applying a special chrome curosor,
			as it fails to render completely blank curosrs. */
			
		retina.addClass('chrome');
	}
	
	webpage.mousemove(function(e){

		left = (e.pageX-offset.left);
		top = (e.pageY-offset.top);

		if(retina.is(':not(:animated):hidden')){
			/* Fixes a bug where the retina div is not shown */
			webpage.trigger('mouseenter');
		}

		if(left<0 || top<0 || left > sizes.webpage.width || top > sizes.webpage.height)
		{
			/*	If we are out of the bondaries of the
				webpage screenshot, hide the retina div */

			if(!retina.is(':animated')){
				webpage.trigger('mouseleave');
			}
			return false;
		}

		/*	Moving the retina div with the mouse
			(and scrolling the background) */

		retina.css({
			left				: left - sizes.retina.width/2,
			top					: top - sizes.retina.height/2,
			backgroundPosition	: '-'+(1.6*left)+'px -'+(1.35*top)+'px'
		});
		
	}).mouseleave(function(){
		retina.stop(true,true).fadeOut('fast');
	}).mouseenter(function(){
		retina.stop(true,true).fadeIn('fast');
	});
});
```


----------

