Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

ckcesar

Criar uma div que posso ajustar o tamanho do Height

Por , em Javascript

Recommended Posts

ckcesar    7

ckcesar
Postado

Bom pessoal eu quero criar uma div que eu possa ajustar o tamanho do height ao clicar na div.

 

Exemplo: na linha de baixo da div eu quero poder pegar e arrasta para baixo ou para cima e mude o tamanho do meu height automatico.

 

Alguém sabe? Se tem algum JS que trabalhe com isso? Alguém para me ajudar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

ckcesar    7

ckcesar
Postado

Galera eu fiz aqui uma div mais eu quero que a parte de puxar seja de baixo pra cima, alguém pra me dar uma dica?

 

Seguem o código:

 

html:

<div id="cont">
<div id="drag"></div>
</div>

 

css:

<style>
#cont{
width: 200px;
height:200px;
margin: 260px auto;
border: 1px solid #444;
position: relative;
}

#drag{
position: absolute;
width: 100%;
height: 5px;
background-color: #444;
cursor: pointer;
}
</style>

 

JavaScript:

$(document).ready(function(){
$('#drag').on('mousedown', function(e){
var $dragable = $(this).parent(),
startHeight = $dragable.height(),
pY = e.pageY;

$(document).on('mouseup', function(e){
$(document).off('mouseup').off('mousemove');
});
$(document).on('mousemove', function(me){
var my = (me.pageY - pY);
$dragable.css({
top: my,
height: startHeight - my
});
});
});
});

Compartilhar este post

Link para o post
Compartilhar em outros sites

ckcesar    7

ckcesar
Postado

Arrumei eu estou trabalhando com uma biblioteca JQuery.

 

Segue a div funcionando.

 

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<style>
#div_playlist {
width: 396px;
border-radius: 5px 5px 5px 5px;
-moz-opacity: 0.6;
opacity: 0.6;
height: 200px;
}
#div_playlist h3 { text-align: center; margin: 0; }
</style>

<script>
$(function() {
$( "#div_playlist" ).resizable({
maxWidth: 396,
minWidth: 396
});
});
</script>

</head>

<body>
<div id="div_playlist" class="ui-widget-content">
<h3 class="ui-widget-header">Primeiro Teste</h3>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito