Ir para conteúdo

Arquivado

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

Philippe Luis

Galera ScrollLeft Não quer funcionar

Recommended Posts

Galera estou desenvolvendo um app com PhoneGap juntamente com Jquery Mobile. 

Estou tentando colocar um carousel mais não sei por qual motivo meu scrollLeft não quer funcionar. Alias nenhum scroll quer funcionar.

Alguem poderia ajudar por favor ??

segue o codigo abaixo

(function( $ ){
    $.fn.carousel = function() {
        return this.each(function(){
            var $wrapper = $('> div', this),
                $slider = $wrapper.find('> ul'),
                $itens  = $slider.find('> li'),
                $single = $itens.filter(':first'),
                
                singleWidth = $single.outerWidth(),
                visible = 3,
                currentPage = 1,
                pages = Math.ceil($itens.length / visible),
                containerWidth = visible * singleWidth;
            
           $(this).css({'width': containerWidth});
            
            $itens.filter(':first').before(
                $itens.slice(-visible).clone().addClass('clone')
            );
            
            $itens.filter(':last').after(
                $itens.slice(0, visible).clone().addClass('clone')
            );
            console.log(singleWidth  *  visible);
            
            $wrapper.scrollLeft(singleWidth  *  visible);
            
        });
    }; 
})( jQuery );

 

codigo ainda com continuação...

 

Muito obrigado a quem responder.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por PeeWee
      Estou aprendendo phonegap e por mais simples que pareça estou tendo muita dificuldade, peguei um código para testes e mesmo ja estando pronto nao rodou como deveria exibindo o erro: net::ERR_CONNECTION_REFUSED, pesquisei, fiz alterações, coloquei o ip ca maquina conforme recomendado mas sem exito, segue o código:
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
          <script  src="http://code.jquery.com/jquery-latest.js"></script>
          <title>AJAX + JSON + PHP</title>  <!--    192.168.1.20  -->
          <script type="text/javascript">
              var dato1="";
              var dato2="";
              var dato3="";
              function traer() {
                  $.getJSON('http://192.168.15.3:8080/JSON/traer.php',
                      
                      function(data){
                          dato1=data[0].Id;
                          dato2=data[0].Nombre;
                          dato3=data[0].Apellido;
                                    }
                        );
              }
              function mostrar() {
                  $("#dato-1").text(dato1);
                  $("#dato-2").text(dato2);
                  $("#dato-3").text(dato3);
              }
          
          
          </script>
      </head>
      <body>
          <div class="container">
              <h1>Traer datos de BD con JSON</h1>
              <hr>
              <br>
              <input type="button" name="" value="Traer datos" onclick="traer()">
              <input type="button" name="" value="Mostrar datos" onclick="mostrar()">
              <h3 id="dato-1">DATO 1</h3>
              <h3 id="dato-2">DATO 2</h3>
              <h3 id="dato-3">DATO 3</h3>
          </div>    
       
       
       
       
      <?php 
                  $host = "localhost";
                  $usuario = "root";
                  $pass = "";
                  $bd = "demostracion";
                  
                  $servidor = mysql_connect($host, $usuario, $pass);
                  
                   mysql_set_charset("utf8", $servidor);
                  $conexion = mysql_select_db($bd, $servidor);
                      
                  $consulta = "SELECT * FROM datos";
                  $sql = mysql_query($consulta);
               
                  $datos= array();
                  while ($obj = mysql_fetch_object($sql)) {
                      $datos[] = array('Id' => $obj->Id,
                                        'Nombre' => $obj->Nombre,
                                        'Apellido' => $obj->Apellido,
                          );
                      }
                      
                      echo '' . json_encode($datos) . '';
                      mysql_close($servidor);
                      header('Content-type: application/json');
                      header("Access-Control-Allow-Origin: *");
          ?>
       
      o BD está correto, não sei mais o que fazer, se alguém puder ajudar agradeço muito, fico no aguardo por sugestões.
       
    • Por tiagosp
      Olá, estou iniciando o aprendizado de programação para android e ios; realizando uma pesquisa no Google, me deparei com o PhoneGap, logo segui o passo a passo para a instalação, baixei o PhoneGap, instalei, baixei o visualizado no celular (android) e editei o arquivo index.html como informado!
      Porém em nenhum momento me foi solicitado para apontar o java, sdk, imagem do android, nada....
      Além disso, há muitas referências ao cordova, porém eu não entendo qual a funcionalidade dele.... estou perdido!
    • Por Dani_Santos
      Olá,
       
      desenvolvi um app para testar requisição ajax ao php.
      Quando eu executo o app através do browser (desktop) ele funciona sem problemas, porém, ao gerar o apk do app e instalar no smartphone, a requisição ajax não funciona.
      Já fiz vários testes e segui recomendações de alguns fóruns, mas ainda sim, não obtive sucesso.
      Fiz o teste em 2 servidores. Em alguns momentos um deles não estava detectando o cors apesar de estar liberado no código.
      Acredito que esse seja o problema. Mas não sei mais o que fazer...
      Sou novata no assunto e agradeceria qualquer ajuda.
       
      Vou deixar os códigos abaixo.
       
      [index.html]
      <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>Cadastro de Cliente</title> </head> <body> <form id="formCliente"> <div id="control"> <div class="control-group"> <label class="control-label">Nome</label> <div class="controls"><input type="text" name="nome" id="nome"></div> </div> <div class="control-group"> <label class="control-label">E-mail</label> <div class="controls"><input type="text" name="email" id="email"></div> </div> <div class="control-group"> <div class="controls"><input type="button" name="btn" id="btOk" value="Salvar"></div> </div> <div class="resp"></div> </div> </form> </body> </html> <script src="js/jquery.js"></script> <script> $(document).ready(function(){ $("#btOk").click(function (){ $.ajax({ type: "POST", url: "http://site.com.br/cadastro.php", data: { email: $("#email").val(), nome: $("#nome").val() }, dataType: "json", success: function (json) { if (json.result == true){ $(".resp").html(json.dados); }else{ //console.log(json.msg); $(".resp").html(json.msg); } },error: function(xhr,e,t){ //console.log(xhr.responseText); $(".resp").html(xhr.responseText); } }); }); }); </script>  
      [cadastro.php]
      <?php header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Headers: *"); try{ $conexao = new PDO("mysql:host=localhost;dbname=banco", "usuario", "senha"); $conexao->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION ); } catch(PDOException $e){ //echo "Erro!: " . $e->getMessage() . "<br>"; $erro = "Erro ao efetuar conexao."; $arr['result'] = false; $arr['msg'] = $erro; exit; } $rs = $conexao->prepare("INSERT INTO cliente (nome, email, data) VALUES ('{$_POST['nome']}', '{$_POST['email']}', now() ) "); if ($rs->execute()){ $arr['result'] = true; $arr['dados'] = 'cadastrado'; }else{ $arr['result'] = false; $arr['msg'] = "Erro ao salvar."; } echo json_encode($arr); ?>  
      [config.xml]
      <?xml version='1.0' encoding='utf-8'?> <widget id="com.phonegap.helloworld" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0"> <name>helloworld</name> <description> Hello World sample application that responds to the deviceready event. </description> <author email="support@phonegap.com" href="http://phonegap.com"> PhoneGap Team </author> <content src="index.html" /> <preference name="DisallowOverscroll" value="true" /> <preference name="android-minSdkVersion" value="14" /> <platform name="android"> <icon density="ldpi" src="www/res/icon/android/drawable-ldpi-icon.png" /> <icon density="mdpi" src="www/res/icon/android/drawable-mdpi-icon.png" /> <icon density="hdpi" src="www/res/icon/android/drawable-hdpi-icon.png" /> <icon density="xhdpi" src="www/res/icon/android/drawable-xhdpi-icon.png" /> <icon density="xxhdpi" src="www/res/icon/android/drawable-xxhdpi-icon.png" /> <icon density="xxxhdpi" src="www/res/icon/android/drawable-xxxhdpi-icon.png" /> <splash density="land-ldpi" src="www/res/screen/android/drawable-land-ldpi-screen.png" /> <splash density="land-mdpi" src="www/res/screen/android/drawable-land-mdpi-screen.png" /> <splash density="land-hdpi" src="www/res/screen/android/drawable-land-hdpi-screen.png" /> <splash density="land-xhdpi" src="www/res/screen/android/drawable-land-xhdpi-screen.png" /> <splash density="land-xxhdpi" src="www/res/screen/android/drawable-land-xxhdpi-screen.png" /> <splash density="land-xxxhdpi" src="www/res/screen/android/drawable-land-xxxhdpi-screen.png" /> <splash density="port-ldpi" src="www/res/screen/android/drawable-port-ldpi-screen.png" /> <splash density="port-mdpi" src="www/res/screen/android/drawable-port-mdpi-screen.png" /> <splash density="port-hdpi" src="www/res/screen/android/drawable-port-hdpi-screen.png" /> <splash density="port-xhdpi" src="www/res/screen/android/drawable-port-xhdpi-screen.png" /> <splash density="port-xxhdpi" src="www/res/screen/android/drawable-port-xxhdpi-screen.png" /> <splash density="port-xxxhdpi" src="www/res/screen/android/drawable-port-xxxhdpi-screen.png" /> </platform> <platform name="ios"> <icon height="57" platform="ios" src="www/res/icon/ios/icon.png" width="57" /> <icon height="114" platform="ios" src="www/res/icon/ios/icon@2x.png" width="114" /> <icon height="40" platform="ios" src="www/res/icon/ios/icon-40.png" width="40" /> <icon height="80" platform="ios" src="www/res/icon/ios/icon-40@2x.png" width="80" /> <icon height="50" platform="ios" src="www/res/icon/ios/icon-50.png" width="50" /> <icon height="100" platform="ios" src="www/res/icon/ios/icon-50@2x.png" width="100" /> <icon height="60" platform="ios" src="www/res/icon/ios/icon-60.png" width="60" /> <icon height="120" platform="ios" src="www/res/icon/ios/icon-60@2x.png" width="120" /> <icon height="180" platform="ios" src="www/res/icon/ios/icon-60@3x.png" width="180" /> <icon height="72" platform="ios" src="www/res/icon/ios/icon-72.png" width="72" /> <icon height="144" platform="ios" src="www/res/icon/ios/icon-72@2x.png" width="144" /> <icon height="76" platform="ios" src="www/res/icon/ios/icon-76.png" width="76" /> <icon height="152" platform="ios" src="www/res/icon/ios/icon-76@2x.png" width="152" /> <icon height="29" platform="ios" src="www/res/icon/ios/icon-small.png" width="29" /> <icon height="58" platform="ios" src="www/res/icon/ios/icon-small@2x.png" width="58" /> <icon height="87" platform="ios" src="www/res/icon/ios/icon-small@3x.png" width="87" /> <splash height="1136" platform="ios" src="www/res/screen/ios/Default-568h@2x~iphone.png" width="640" /> <splash height="1334" platform="ios" src="www/res/screen/ios/Default-667h.png" width="750" /> <splash height="2208" platform="ios" src="www/res/screen/ios/Default-736h.png" width="1242" /> <splash height="1242" platform="ios" src="www/res/screen/ios/Default-Landscape-736h.png" width="2208" /> <splash height="1536" platform="ios" src="www/res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" /> <splash height="768" platform="ios" src="www/res/screen/ios/Default-Landscape~ipad.png" width="1024" /> <splash height="2048" platform="ios" src="www/res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" /> <splash height="1024" platform="ios" src="www/res/screen/ios/Default-Portrait~ipad.png" width="768" /> <splash height="960" platform="ios" src="www/res/screen/ios/Default@2x~iphone.png" width="640" /> <splash height="480" platform="ios" src="www/res/screen/ios/Default~iphone.png" width="320" /> </platform> <platform name="wp8"> <icon height="99" platform="wp8" src="www/res/icon/wp8/ApplicationIcon.png" width="99" /> <icon height="159" platform="wp8" src="www/res/icon/wp8/Background.png" width="159" /> <splash height="1280" platform="wp8" src="www/res/screen/wp8/screen-portrait.jpg" width="768" /> </platform> <platform name="windows"> <icon height="150" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-100.png" width="150" /> <icon height="30" platform="windows" src="www/res/icon/windows/Square30x30Logo.scale-100.png" width="30" /> <icon height="50" platform="windows" src="www/res/icon/windows/StoreLogo.scale-100.png" width="50" /> <splash height="300" platform="windows" src="www/res/screen/windows/SplashScreen.scale-100.png" width="620" /> <icon height="120" platform="windows" src="www/res/icon/windows/StoreLogo.scale-240.png" width="120" /> <icon height="44" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-100.png" width="44" /> <icon height="106" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-240.png" width="106" /> <icon height="70" platform="windows" src="www/res/icon/windows/Square70x70Logo.scale-100.png" width="70" /> <icon height="71" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-100.png" width="71" /> <icon height="170" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-240.png" width="170" /> <icon height="360" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-240.png" width="360" /> <icon height="310" platform="windows" src="www/res/icon/windows/Square310x310Logo.scale-100.png" width="310" /> <icon height="150" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-100.png" width="310" /> <icon height="360" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-240.png" width="744" /> <splash height="1920" platform="windows" src="www/res/screen/windows/SplashScreenPhone.scale-240.png" width="1152" /> </platform> <access origin="*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="sms:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <platform name="android"> <allow-intent href="market:*" /> </platform> <platform name="ios"> <allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> </platform> <engine name="browser" spec="~5.0.3" /> <plugin name="cordova-plugin-battery-status" spec="~1.2.4" /> <plugin name="cordova-plugin-camera" spec="~2.4.1" /> <plugin name="cordova-plugin-media-capture" spec="~1.4.3" /> <plugin name="cordova-plugin-device" spec="~1.1.6" /> <plugin name="cordova-plugin-dialogs" spec="~1.3.3" /> <plugin name="cordova-plugin-file" spec="~4.3.3" /> <plugin name="cordova-plugin-geolocation" spec="~2.4.3" /> <plugin name="cordova-plugin-globalization" spec="~1.0.7" /> <plugin name="cordova-plugin-inappbrowser" spec="~1.7.1" /> <plugin name="cordova-plugin-network-information" spec="~1.3.3" /> <plugin name="cordova-plugin-vibration" spec="~2.1.5" /> <plugin name="cordova-plugin-whitelist" spec="~1.2.2" /> </widget>  
    • Por Wesley Santos
      E ai pessoal, alguém aqui já desenvolveu alguma coisa com o PhoneGap e precisou utilizar o plugin de AdMob?
      No momento estou tentando fazer essa implementação e estou sofrendo horrores D:
    • Por kamin
      Olá a todos, estou desenvolvendo um APP MOBILE usando cordova/phonegap com Jquery Mobile, porém estou a 2 dias quebrando a cabeça com a lógica e estruturação de páginas e transições.   em todo lugar eu vejo a mesma coisa:   <body> <div data-role="page" id="home"> <div role="main" class="ui-content"> <a href="#login" data-transition="slide">FAZER LOGIN</a> </div> </div> <div data-role="page" id="login"> <div role="main" class="ui-content"> <a href="#home" data-transition="slide">Voltar para Home</a> </div> </div> </body>   Só que desta maneira, se o App tiver muitas páginas, ex. 100 páginas, todas as 100 páginas ficariam apenas no index.html?! oque iria dificultar muito o entendimento do código e seria uma home page extremamente pesada...   Se eu organizar as páginas em outro diretório, ex: /view/ -> home.html login.html cadastro.html etc.html   e na index.html,   <a href="view/login.html" data-transition="slide">FAZER LOGIN</a>  
      ficaria aceitável e legível, porém as transições entre uma página e outra fica horrível quando compilado para ADNROID OU IOS), fica horrível porque está chamando outro HTML e não carregando conteúdo da mesma página, ou seja, tem um atraso no carregamento do HTML...   Eu gostaria de uma lógica de paginação onde eu pudesse organizar os arquivos HTML em uma pasta separada (ou algo do tipo) e quando necessário chama-los com uma transições fluidas e não quebradas...   Alguém me da uma luz?
×

Informação importante

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