Jump to content

Mudar Height com javascript


sEnte
 Share

Recommended Posts

eu não sou entendido nisto por isso venho pedir aqui ajuda.

Arranjei este script Slimbox 2.

http://jsfiddle.net/hyhaye6r/

O que acontece é que a altura do pop-up abre mais ou menos a meio da altura do ecrã (por estar dinâmico) e eu queria que abrisse mais a cima. A minha resolução é 1600x900 se for a ajuda de programação do browser ao selecionar mudo a altura. Ajusto para o que quero e meto no CSS, no entanto aquilo não muda.

Podem dar-me uma ajuda sff?

Edited by sEnte

"If It Ain't Broke, Break it and build something Cooler!" Unknown

Link to comment
Share on other sites

Boas,

Penso que tens aqui a tua resposta

Este é o código Javascript

$(document).ready(function () {
$(".togglepopup").click(function (e) {
	 $("#" + $(this).data("target")).fadeIn();
	 var a = $(document).height();
	 $("#" + $(this).data("target")).children().first().animate({ top: 50 + 'px' }, 400)
	 });
	 $(".generic_popup_holder").click(function (e) {
		 if (e.target !== this)
			 return;
		 $(this).fadeOut(600);
		 $(this).children().first().animate({ top: '-800px' }, 400, function (evt) {
		 });
	 });
	 $(".generic_popup_holder").each(function (e) {
		 if ($(this).hasClass("active")) {
			 $("#" + $(this).attr("id")).fadeIn();
			 var a = $(document).height();
			 $("#" + $(this).attr("id")).children().first().animate({ top: 50 + 'px' }, 400)
		 }
	 });

Os codigos HTML são estes:

Esta div é a que vai conter o conteudo que está dentro do teu popup

<div class="generic_popup_holder" id="teste_popup">
 <div class="generic_popup" id="donation" style="width:742px;height: 553px;">
 <p>Qualquer coisa .... bla bla bla xD</p>
 </div>
</div>

E este é o botão que vais clicar para aparecer a janela do popup

<div class="is_btn_frame">
 <a href="#" data-target="teste_popup" class="togglepopup">Aparecer Popup</a>
</div>

Obviamente que vais ter de mudar os dados para como tu queres, mas a base está ai 😄

Cumprimentos

Edited by pexoia
Link to comment
Share on other sites

@HappyHippyHippo.

Faltou a imagem que já mudei aqui http://jsfiddle.net/hyhaye6r/1/ no entanto não aparece como deveria aparecer. A não ser que me tenha esquecido de alguma coisa o código foi tirado do original

@pexoia

http://jsfiddle.net/hyhaye6r/2/ não parece estar a funcionar. o que fiz de mal?

"If It Ain't Broke, Break it and build something Cooler!" Unknown

Link to comment
Share on other sites

HappyHippyHippo

quem calcula a posição é o slimbox, e como o script não tem opções para manipular isso, terás de fazer uma de duas coisas:

- alterares tu o script de modo a fazer o que pretendes

- de alguma forma forçares tu o valor de css "top" do "lbCenter" e do "lbBottomContainer", após a apresentação da imagem pelo slimbox

IRC : sim, é algo que ainda existe >> #p@p
Link to comment
Share on other sites

Pois, o problema é que eu percebo pouco das linguagens que utilizo CSS/HTML/PHP mas de javascript ainda é pior. Não dá para em CSS forçar as medidas para subir isso?

"If It Ain't Broke, Break it and build something Cooler!" Unknown

Link to comment
Share on other sites

@pexoia

http://jsfiddle.net/hyhaye6r/2/ não parece estar a funcionar. o que fiz de mal?

Eu não percebo muito disso de jsfiddle, não costumo usar muito esses simuladores etc

Isso já vem com as chamadas de jQuery feitas etc ?

É que se não vem, deve ser normalmente que num funcione xD

Mas tambem pode ser porque não te passei a parte do css que tambem tem um factor importante nisto xD

Edited by pexoia
Link to comment
Share on other sites

Não vinha com o ficheiro JQuery que deveria vir xD

Não meti noutro lado para não encher aqui o post.

Consegues-me dar uma ajuda?

"If It Ain't Broke, Break it and build something Cooler!" Unknown

Link to comment
Share on other sites

Não vinha com o ficheiro JQuery que deveria vir xD

Não meti noutro lado para não encher aqui o post.

Consegues-me dar uma ajuda?

Aqui está mais organizado:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Popup</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".togglepopup").click(function (e) {
	 $("#" + $(this).data("target")).fadeIn();
	 var a = $(document).height();
	 $("#" + $(this).data("target")).children().first().animate({ top: 50 + 'px' }, 400)
	 });
	 $(".generic_popup_holder").click(function (e) {
		 if (e.target !== this)
			 return;
		 $(this).fadeOut(600);
		 $(this).children().first().animate({ top: '-800px' }, 400, function (evt) {
		 });
	 });
	 $(".generic_popup_holder").each(function (e) {
		 if ($(this).hasClass("active")) {
			 $("#" + $(this).attr("id")).fadeIn();
			 var a = $(document).height();
			 $("#" + $(this).attr("id")).children().first().animate({ top: 50 + 'px' }, 400)
		 }
	 });
});
</script>
</head>

<body>
<div class="generic_popup_holder" id="teste_popup">
 <div class="generic_popup" id="donation" style="width:742px;height: 553px;">
 <img src="http://images.forwallpaper.com/files/thumbs/preview/64/643354__background-nature-scenery-golf-wallpaper-images_p.jpg" />
 </div>
</div>
<a href="#" data-target="teste_popup" class="togglepopup">CARREGA</a>
</body>
</html>

CSS:

* {padding:0;margin:0;}
.generic_popup_holder {
background-color: rgba(0, 0, 0, 0.8);
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
vertical-align: middle;
width: 100%;
z-index: 999999;
}
.generic_popup {
background-clip: padding-box;
box-shadow: 0 3px 7px rgba(255, 255, 255, 0.3);
height: 490px;
left: 50%;
margin-left: -370px;
outline: 0 none;
overflow: hidden;
position: fixed;
top: -10%;
width: 740px;
}

Espero que seja isso que pretendes 😛

No JSFiddle não dá para perceberes a noção do height como pretendes porque o quadrado que mostra o resultado é muito pequeno, por isso é que eu testo sempre em localhost mas de qualquer forma está aqui para veres como está funcional:

http://jsfiddle.net/6p2z22t3/

Cumprimentos

Edited by pexoia
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.