jquery growY div von der mitte her öffnen

Richard.Laing · 15. Apr 2011, 13:22

hi@all
gestern stand ich noch am abgrund der verzweiflung ... heute bin ich einen schritt weiter ;(

ich versuche krampfhaft mit jquery ein div mit 100% breite, von 0 höhe auf 480px höhe beim laden der seite auffahren zu lassen. es soll so aussehen, als würde sich eine leinwand öffnen aber von der mitte her also 240 nach oben und 240 nach unten.
mit diesem code öffne ich das wrapper div centriert auf der webseite:

Code: Alles auswählen

$
/*
 * 
 * Center Plugin 1.0 - Easy cross-browser centering a div!
 * Version 1.0.1
 * @requires jQuery v1.3.0
 * 
 * Copyright (c) 2010 Matthias Isler
 * Licensed under the GPL licenses:
 * http://www.gnu.org/licenses/gpl.html
 * 
 */
jQuery.fn.center = function(init) {
		
	var object = this;
		
	if(!init) {
			
		object.css('margin-top', $(window).height() / 2 - this.height() / 2);
		object.css('margin-left', $(window).width() / 2 - this.width() / 2);
			
		$(window).resize(function() {
			object.center(!init);
		});
		
	} else {
			
		var marginTop = $(window).height() / 2 - this.height() / 2;
		var marginLeft = $(window).width() / 2 - this.width() / 2;
			
		marginTop = (marginTop < 0) ? 0 : marginTop;
		marginLeft = (marginLeft < 0) ? 0 : marginLeft;

		object.stop();
		object.animate(
			{
				marginTop: marginTop, 
				marginLeft: marginLeft
			}, 
			150, 
			'linear'
		);
		
	}
}

und hiermit wird das div innerhalb von wrapper angesprochen

Code: Alles auswählen

('#my-content').animate({left:0,width:"100%",top:0,height:"100%"},2000);

klappt es aber nur von oben nach unten
kann mir hier jemand unter die arme greifen

danke richy

Ingo · 15. Apr 2011, 14:34

Code: Alles auswählen

<!doctype html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <style>
        #canvas{width: 100%; height: 0; position: absolute; top: 50%; left: 0; background: red;}
    </style>
    <script>
        $(function() {
            $('#canvas').animate({'top': 0, 'height': $(window).height()}, 'slow');
        });
    </script>
</head>
<body>
    <div id="canvas"></div>
</body>
</html>

Bitteschön

Richard.Laing · 15. Apr 2011, 14:44

hi ingo
danke schon mal

leider ist es nicht ganz das was ich vor habe, da die höhe auf 480px begrenzt sein soll..

Code: Alles auswählen

<html>
<head>

<style type="text/css">
*{ margin:0; padding:0;}
    #wrapper { height:480px; width:100%;}
	#my-content {  background:#000000; color:#FFFFFF; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="center-plugin_1.0.1.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$('#wrapper').center();
	$('#my-content').animate({height:"480px"}, 1000 );
});
</script>

</head>
<body>

<div id="wrapper">
    <div id="my-content">
        <h1>Der Content 480px hoch und 100% breit</h1>
    </div>
</div>

</body>
</html>

das habe ich soweit, aber der scrollt von oben nach unten und ich möchte es so wie du es gemacht hast aber halt nur 480 hoch verzweifel...

gruß richy

ps: das ist die center.js

Code: Alles auswählen

/*
 * 
 * Center Plugin 1.0 - Easy cross-browser centering a div!
 * Version 1.0.1
 * @requires jQuery v1.3.0
 * 
 * Copyright (c) 2010 Matthias Isler
 * Licensed under the GPL licenses:
 * http://www.gnu.org/licenses/gpl.html
 * 
 */
jQuery.fn.center = function(init) {
		
	var object = this;
		
	if(!init) {
			
		object.css('margin-top', $(window).height() / 2 - this.height() / 2);
		object.css('margin-left', $(window).width() / 2 - this.width() / 2);
			
		$(window).resize(function() {
			object.center(!init);
		});
		
	} else {
			
		var marginTop = $(window).height() / 2 - this.height() / 2;
		var marginLeft = $(window).width() / 2 - this.width() / 2;
			
		marginTop = (marginTop < 0) ? 0 : marginTop;
		marginLeft = (marginLeft < 0) ? 0 : marginLeft;

		object.stop();
		object.animate(
			{
				marginTop: marginTop, 
				marginLeft: marginLeft
			}, 
			150, 
			'linear'
		);
		
	}
}

Ingo · 15. Apr 2011, 14:51

Code: Alles auswählen

<!doctype html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <style>
        #canvas{width: 100%; height: 0; position: absolute; top: 50%; left: 0; background: red;}
    </style>
    <script>
        $(function() {
            var window_height = $(window).height();
            if (window_height > 480) {
                $('#canvas').animate({'top': (window_height / 2 - 240), 'height': 480}, 'slow');
            } else {
                $('#canvas').animate({'top': 0, 'height': 480}, 'slow');
            }
        });
    </script>
</head>
<body>
    <div id="canvas"></div>
</body>
</html>

center.js brauchst du nicht

Richard.Laing · 15. Apr 2011, 14:57

danke danke danke das war es

gruß richy

jquery growY div von der mitte her öffnen

jquery growY div von der mitte her öffnen

Re: jquery growY div von der mitte her öffnen

Re: jquery growY div von der mitte her öffnen

Re: jquery growY div von der mitte her öffnen

Re: jquery growY div von der mitte her öffnen