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

A

andreano

Mitglied
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"
 

Anhänge

  • hilfe.png
    hilfe.png
    331,3 KB · Aufrufe: 39
  • hilfe.jpg
    hilfe.jpg
    93,4 KB · Aufrufe: 33
Zuletzt bearbeitet:
Update:
In der Zwischenzeit bin ich auf den Ergebnis gekommen.
zwischenstand.jpg
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.
1.jpg
 
Zuletzt bearbeitet:
Mein Zwischenstand von dem Quellcode:

HTML: 
<!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
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
Java: 
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');
	});
});
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück