Jump to content
marcelocardoso

click com slidetoggle e ANCORA no TOP do id

Recommended Posts

Fala galera...
Depois de tanto sofrer tentando e pesquisando na internet, não consegui resolver...
A nível de conhecimento, segue código para:::

1) Ao clicar, pegar o id do botão, em seguida abrir com slidetoggle e jogar no TOP tipo ancora.
2) ou seja, expandir a slidetoggle, mas POSICIONAR no id da DIV, SECTION ou etc...

CODE:
 

	$(function () {
		// $("#btn-maps").on("click", function () {
		// 	$('html, body').animate({
		// 		scrollTop: $("#maps").slideToggle('slow').offset().top - 135
		// 	}, 1200, 'linear');
		// });

		$("#btn-maps").click(
			function (event) {
				event.preventDefault();
				if ($("#maps").is(":visible")) {
					$("#maps").slideUp(600).offset().top;

				} else {
					$("#maps").slideDown(600).offset().bottom;
				}
			}
		);
	});

Este código, funciona perfeitamente, adaptado de vários códigos buscados na internet, porém, não consigo com nenhum dos dois, posicionar ao CLICK o SLIDETOGGLE ao expandir deixar examente no inicio do ID;

Dicas, Sugestões como fazer, realizar, agradeço.
Obrigado.

 

Share this post


Link to post
Share on other sites

Você diz um efeito tipo sanfona?

Você clica no item ele expande e e quando clica novamente ele oculta

Só que podemos ter diversos itens desses?

 

Tenho esse script pronto se for o caso.

Share this post


Link to post
Share on other sites

Olha so omar...., 

O code faz isso, so o problema quando expande, ele nao vai para o TOP do item da slidetoggle, queria que ele posicionasse a div expandida pela sua base no topo, tipo no inicio da div quando expandida, tentei com id, mas n consegui.... 

Share this post


Link to post
Share on other sites

Bem... Pelo que eu entendi você quer mover um elemento para outro local e isso é simples:

<div id="topo">Topo</div>
<hr />
<div>Esse é o meio</div>
<hr />
<div id="baixo">Elemento de baixo que vai para o topo</div>

<button onclick="mover();">Mover o de baixo para o topo</button>

<script>
    function mover() {
        var baixo = document.getElementById('baixo');
        document.getElementById('topo').appendChild(baixo);
    }
</script>

 

Sobre o efeito sanfona que acredito que seja o que realmente procura. veja esse script que desenvolvi faz algo similar ao seu objetivo, é bem simples de usar:

https://github.com/Spell-Master/sm-web/tree/master/scripts/Accordion

 

Com o arquivo CSS e JS incluso crie a seguinte situação

<div id="exemplo">
  <button class="acc-button">
    Primeiro
  </button>
  <div class="acc-container">
    Elemento interno do primeiro
  </div>
  <button class="acc-button">
    Segundo
  </button>
  <div class="acc-container">
    Elemento interno do segundo
  </div>
</div>

 

depois basta instanciar a classe:

Isso deve ficar abaixo dos elementos acima pode até ficar no final do "body"
<script>
  var objeto = new Accordion('exemplo');
</script>

Obs.: Não precisa usar jQuery

 

Share this post


Link to post
Share on other sites

a principio teu codigo faz o mesmo efeito accordion que o slideToggle do jquery faz, no que eu preciso, mas ainda peca, falha, no quesito alinhar pelo TOPO, vamos ver se consigo ser mais explicativo...


1) slidetoggle, é clicado, certo.
2) ele, automaticamente, é expandido, abre para baixo e expande o mesmo, com seu conteudo;
3) isso fica perfeito quando é feito com o position BOTTOM, normal dele, 
4) mas QUANDO é feito com o position para expandir para UP, ....
5) aí que está o problema, tentei com OFFSET, ao abrir para CIMA, independente do conteudo do slidetoggle ao ser aberto, deveria a barra de rolagem subir junto e pelo OFFSET, pegar o ID da DIV, e alinhar bem no inicio a div.

ELE EXPANDE CERTO,  mas tipo

Texto inicio
Texto meio
Texto fim

Ele não posiciona no texto início, fica sempre na metade, ou no texto fim, aí tu tens que subir a barra, para o texto início...
Entendeu agora...

Tentei de várias maneiras, pegar o OFFSET e jogar o ID, mas não consegui....
Fica a premissa...

Seu exemplo faz também, mas faz a mesma coisa que eu FIZ, tenho que alinhar no topo quando expande independente do tamanho da DIV pelo slidetoggle sendo aberta.

Se tiver cabeça para dar luz nisso, agradeço.
Obrigado.

Share this post


Link to post
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

  • Similar Content

    • By lumbarque_Oficial
      Tô a procura de uma equipe para participar 
       
      Sou programador, spriter ou músico
       
      meu nome é Gabriel , tenho 18 anos e já participei de uns grupo pequenos
       
      Sei de tudo um pouco mas a área que eu tô mais querendo botar a mão na massa atualmente é programação
       
      ~ alguém? ~
    • By violin101
      Caros amigos, saudações...
       
      Estou com um problema para mostrar o RESULTADO da multiplicação de 3 campos (inputs).
       
      Os Campos são: Comprimento x Largura x Altura.
       
      Quando todos os campos(INPUTS) são informados, a Função de Multiplicar é executada com sucesso.
      Exemplo:
      Comprimento : 1.01
      Largura...........: 2.02
      Altura..............: 3.03
      Resultado......: 6.18
       
      Quando um dos Inputs, tem valor = 0 (zero), o cálculo não é executado.
      Exemplo:
      Comprimento : 1.01
      Largura...........: 0.00
      Altura..............: 3.03
      Resultado......: 0.00
       
      Como consigo executar essa operação matemática ?
       
      Abaixo posto o Código que estou usando:
      /*---Função para Calcular o Total do Volume---*/ function calcVolume(){ //Obter valor digitado do comprimento var comprimento = document.getElementById("comprimento").value; comprimento = comprimento.replace(",","."); //Obter valor digitado da largura var largura = document.getElementById("largura").value; largura = largura.replace(",","."); //Obter valor digitado da altura var altura = document.getElementById("altura").value; altura = altura.replace(",","."); //Executa o Valor do Volume if (comprimento > 0 && largura > 0 && altura > 0) { calc_volume = parseFloat(comprimento) * parseFloat(largura) * parseFloat(altura); var numero = calc_volume.toFixed(2).split('.'); numero[0] = numero[0].split(/(?=(?:...)*$)/).join(''); document.getElementById("volume").value = numero.join('.'); } else { document.getElementById("volume").value = "0,00"; } }  
       
      Grato,
       
      Cesar
    • By alysson122010
      Galera estou com um sistema de jcrop que quando eu coloco imagem jpg e jpeg ele funciona de boa porem quando coloco png a imagem fica toda preta e salva preta.
       
      PHP que salva
       

      <?php
      /*********************************************************************
           Purpose            : update image.
           Parameters         : null
           Returns            : integer
           ***********************************************************************/
           $post = isset($_POST) ? $_POST: array();
           //print_R($post);die;
           switch($post['action']) {
            case 'save' :
              saveAvatarTmp();
            break;
            default:
              changeAvatar();
              
           }
          
           function changeAvatar() {
              $post = isset($_POST) ? $_POST: array();
              $max_width = "500"; 
              $userId = isset($post['hdn-profile-id']) ? intval($post['hdn-profile-id']) : 0;
              $path = 'images/tmp';
              $valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
              $name = $_FILES['photoimg']['name'];
              $size = $_FILES['photoimg']['size'];
              if(strlen($name))
              {
              list($txt, $ext) = explode(".", $name);
              if(in_array($ext,$valid_formats))
              {
              if($size<(1024*1024)) // Image size max 1 MB
              {
              $actual_image_name = 'avatar' .'_'.$userId .'.'.$ext;
              $filePath = $path .'/'.$actual_image_name;
              $tmp = $_FILES['photoimg']['tmp_name'];
              
              if(move_uploaded_file($tmp, $filePath))
              {
              $width = getWidth($filePath);
                  $height = getHeight($filePath);
                  //Scale the image if it is greater than the width set above
                  if ($width > $max_width){
                      $scale = $max_width/$width;
                      $uploaded = resizeImage($filePath,$width,$height,$scale);
                  }else{
                      $scale = 1;
                      $uploaded = resizeImage($filePath,$width,$height,$scale);
                  }
              /*$res = saveAvatar(array(
                              'userId' => isset($userId) ? intval($userId) : 0,
                                                      'avatar' => isset($actual_image_name) ? $actual_image_name : '',
                              ));*/
                              
              //mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
              echo "<img id='photo' file-name='".$actual_image_name."' class='' src='".$filePath.'?'.time()."' class='preview'/>";
              }
              else
              echo "failed";
              }
              else
              echo "Image file size max 1 MB"; 
              }
              else
              echo "Invalid file format.."; 
              }
              else
              echo "Please select image..!";
              exit;
              
              
          }
          /*********************************************************************
           Purpose            : update image.
           Parameters         : null
           Returns            : integer
           ***********************************************************************/
           function saveAvatarTmp() {
              $post = isset($_POST) ? $_POST: array();
              $userId = isset($post['id']) ? intval($post['id']) : 0;
              $path ='\\images\uploads\tmp';
              $t_width = 300; // Maximum thumbnail width
              $t_height = 300;    // Maximum thumbnail height
              
          if(isset($_POST['t']) and $_POST['t'] == "ajax")
          {
              extract($_POST);
              
              //$img = get_user_meta($userId, 'user_avatar', true);
              $imagePath = 'images/tmp/'.$_POST['image_name'];
              $ratio = ($t_width/$w1); 
              $nw = ceil($w1 * $ratio);
              $nh = ceil($h1 * $ratio);
              $nimg = imagecreatetruecolor($nw,$nh);
              $im_src = imagecreatefromjpeg($imagePath);
              imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w1,$h1);
              imagejpeg($nimg,$imagePath,90);
              
          }
          echo $imagePath.'?'.time();;
          exit(0);    
          }
          
          /*********************************************************************
           Purpose            : resize image.
           Parameters         : null
           Returns            : image
           ***********************************************************************/
          function resizeImage($image,$width,$height,$scale) {
          $newImageWidth = ceil($width * $scale);
          $newImageHeight = ceil($height * $scale);
          $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
          $source = imagecreatefromjpeg($image);
          imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height);
          imagejpeg($newImage,$image,90);
          chmod($image, 0777);
          return $image;
      }
      /*********************************************************************
           Purpose            : get image height.
           Parameters         : null
           Returns            : height
           ***********************************************************************/
      function getHeight($image) {
          $sizes = getimagesize($image);
          $height = $sizes[1];
          return $height;
      }
      /*********************************************************************
           Purpose            : get image width.
           Parameters         : null
           Returns            : width
           ***********************************************************************/
      function getWidth($image) {
          $sizes = getimagesize($image);
          $width = $sizes[0];
          return $width;
      }
      ?>
       
       
      Jquery
       
      <script type="text/javascript">
              jQuery(document).ready(function(){
              
              jQuery('#change-pic').on('click', function(e){
                  jQuery('#changePic').show();
                  jQuery('#change-pic').hide();
                  
              });
              
              jQuery('#photoimg').on('change', function()   
              { 
                  jQuery("#preview-avatar-profile").html('');
                  jQuery("#preview-avatar-profile").html('Uploading....');
                  jQuery("#cropimage").ajaxForm(
                  {
                  target: '#preview-avatar-profile',
                  success:    function() { 
                          jQuery('img#photo').imgAreaSelect({
                          aspectRatio: '1:1',
                          onSelectEnd: getSizes,
                      });
                      jQuery('#image_name').val(jQuery('#photo').attr('file-name'));
                      }
                  }).submit();
              });
              
              jQuery('#btn-crop').on('click', function(e){
              e.preventDefault();
              params = {
                      targetUrl: 'profile.php?action=save',
                      action: 'save',
                      x_axis: jQuery('#hdn-x1-axis').val(),
                      y_axis : jQuery('#hdn-y1-axis').val(),
                      x2_axis: jQuery('#hdn-x2-axis').val(),
                      y2_axis : jQuery('#hdn-y2-axis').val(),
                      thumb_width : jQuery('#hdn-thumb-width').val(),
                      thumb_height:jQuery('#hdn-thumb-height').val()
                  };
                  saveCropImage(params);
              });
              
           
              
              function getSizes(img, obj)
              {
                  var x_axis = obj.x1;
                  var x2_axis = obj.x2;
                  var y_axis = obj.y1;
                  var y2_axis = obj.y2;
                  var thumb_width = obj.width;
                  var thumb_height = obj.height;
                  if(thumb_width > 0)
                      {
                          jQuery('#hdn-x1-axis').val(x_axis);
                          jQuery('#hdn-y1-axis').val(y_axis);
                          jQuery('#hdn-x2-axis').val(x2_axis);
                          jQuery('#hdn-y2-axis').val(y2_axis);
                          jQuery('#hdn-thumb-width').val(thumb_width);
                          jQuery('#hdn-thumb-height').val(thumb_height);
                          
                      }
                  else
                      alert("Please select portion..!");
              }
              
              function saveCropImage(params) {
              jQuery.ajax({
                  url: params['targetUrl'],
                  cache: false,
                  dataType: "html",
                  data: {
                      action: params['action'],
                      id: jQuery('#hdn-profile-id').val(),
                       t: 'ajax',
                                          w1:params['thumb_width'],
                                          x1:params['x_axis'],
                                          h1:params['thumb_height'],
                                          y1:params['y_axis'],
                                          x2:params['x2_axis'],
                                          y2:params['y2_axis'],
                                          image_name :jQuery('#image_name').val()
                  },
                  type: 'Post',
                 // async:false,
                  success: function (response) {
                          jQuery('#changePic').hide();
                          jQuery('#change-pic').show();
                          jQuery(".imgareaselect-border1,.imgareaselect-border2,.imgareaselect-border3,.imgareaselect-border4,.imgareaselect-border2,.imgareaselect-outer").css('display', 'none');
                          
                          jQuery("#avatar-edit-img").attr('src', response);
                          jQuery("#preview-avatar-profile").html('');
                          jQuery("#photoimg").val('');
                  },
                  error: function (xhr, ajaxOptions, thrownError) {
                      alert('status Code:' + xhr.status + 'Error Message :' + thrownError);
                  }
              });
              }
              });
          </script>
    • By Marcos RJ
      Olá pessoal, tudo bem?
       
      Tenho um sistema do qual traz em um combobox a relação de grades (masculino, feminino, etc) do banco de dados e a mesma tabela tem chave estrangeira na tabela dos tamanhos. Quando seleciono uma grade, os tamanhos referentes a essa grade aparecem. O problema está quando clico em Incluir nova cor e seleciono uma outra grade. Os tamanhos da nova grade selecionada aparece também na grade já selecionada anteriormente, ou seja, o valor acaba se duplicando. O que está acontecendo é que valor chega até o JQuery, porém quando passo o valor por:
       url: '<?php echo $caminhoAbsoluto; ?>/listar.php?v='+valorEscolhido,  E pego pelo código abaixo:
       
      $grades = $_REQUEST["v"]; echo $metodos->listarTamanhos($grades);   Ele pega o último valor selecionado, porém duplica conforme o anexo. Vejam:
       
      public function listarTamanhos($grades) {     $visualizar = '<table class="table table-bordered">                         <tr>                         <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Tamanho</td>                         <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Quantidade</td>                         <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">EAN</td>                         </tr>';     $sql = mysqli_query($this->conexao,"SELECT * FROM loja_tamanho_grades WHERE IdGrades = '".$grades."';");     //while($isfast = mysqli_fetch_object($sql))     // $i = 0;     while($isfast = mysqli_fetch_assoc($sql))     {         $sqlTamanhos = mysqli_query($this->conexao,"SELECT * FROM loja_tamanhos WHERE IdTamanhos = '".$isfast["IdTamanhos"]."';");         $isfastTamanhos = mysqli_fetch_assoc($sqlTamanhos);         $visualizar .= '<tr>                                 <td style="font-weight: bold; text-align: center; font-size: 20px; font-style:Arial">'.$isfastTamanhos["Tamanhos"].'</td>                                 <td><input type="number" class="form-control" min="0" oninput="this.value = Math.abs(this.value)" value="0"></td>                                 <td><input type="text" class="form-control" maxlength="17" style="width: 100%"></td>                             </tr>';                 $visualizar .= '<tr>';         // $visualizar .= '<td colspan="3"><div class="mostrarGrades_'.$i.'"></div></td>';         $visualizar .= '</tr>';                                                         // $i++;                      }         //  $visualizar .= '<tr><td colspan="3"><div class="mostrarGrades"></div></td></tr>';             //$visualizar .= '</table>';         //return $visualizar;     $visualiza[] = $visualizar;     return json_encode($visualiza); } Como faço para que não tenha duplicidade. Veja abaixo o restante do código:
      <table width="100%" > <tr class="linhas"> <td> <table class="table table-bordered"> <tr>         <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Código de cores</td>         <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Cor Básica</td>         <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Grades</td>     </tr> <tr>     <td style="text-align: center; width: 40%"><input type="text" class="form-control" placeholder="Referência"></td>     <td style="text-align: center; width: 30%">     <select name="CoresBasicas" class="form-control">     <?php echo $metodos->comboCores($key); ?>     </select>             </td>     <td style="text-align: left;">         <select name="Grades" class="form-control grades" style="width: 100%">         <?php echo $metodos->comboGrades(); ?>         </select>         </td>     </tr>     <tr>     <td colspan="3">         <?php //echo $metodos->listarTamanhos(); ?>     <div class="mostrarGrades"></div>     </td> </tr> <tr> <td colspan="3" class="text-left"> <label for='files' class="upload">Selecionar fotos <i class="fa fa-plus-circle fa-lg" aria-hidden="true"></i></label> <input id='files' type='file' name="Fotos[]" multiple> </td> </table> Jquery
      $(function () {   function removeCampo() {     $(".removerCampo").unbind("click");     $(".removerCampo").bind("click", function () {        if($("tr.linhas").length > 1){         $(this).parent().parent().remove();        }     });   }   $(".adicionarCampo").click(function () {     novoCampo = $("tr.linhas:first").clone();     //novoCampo.find("input").val("");     novoCampo.find('input[type="text"]').val("");     novoCampo.find('select').val("");     //novoCampo.find('input[type="radio"]').prop('selected', false);     novoCampo.insertAfter("tr.linhas:last");     removeCampo();   }); }); $(document).ready( function (){ $(document).on('change', '.grades', function(){ valorEscolhido = $(this).find('option:selected').val(); $.ajax({ type:'post', dataType: 'json', url: '<?php echo $caminhoAbsoluto; ?>/listar.php?v='+valorEscolhido, success: function(dados){ /* for(var i=0;dados.length>i;i++){ $('.mostrarGrades').html(dados[i]); } */ $('.mostrarGrades').html(dados); } }); }); }); Obrigado!
       

    • By GabrielSCastro
      Olá pessoa, terminei a faculdade e recebi algumas propostas de projetos web, mas como ainda estou iniciando não tenho muita noção de quanto cobrar.
      Para um site, eu pensei em cobrar um valor razoável de entrada , e além deste valor, definir um contrato de um valor mensal para fazer manutenções necessárias, assim eu terei o cliente e uma renda sempre. Por outro lado, o cliente pode ficar com o site por pouco tempo e não chegar ao valor que eu gostaria pelo projeto. 
      Pensei também em cobrar por projeto, no minimo R$ 1000 por um site simples, já que to começando.

      Ai entra outro falta de experiência minha. Se eu cobrar por projeto, o cliente ficaria responsável por pagar o domínio e hospedagem dele ou eu contrataria uma hospedagem com a possibilidade de hospedar varios sites para quando eu tiver mais clientes.

      Indo mais direto ao ponto, gostaria que me ajudasse em como começar, cobrar, etc.

      Agradeço a quem puder ajudar.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.