Jump to content

Kaue Galvão

Members
  • Content count

    2
  • Joined

  • Last visited

Community Reputation

0 Comum

About Kaue Galvão

  1. Ao clicar em uma categoria no index, será redirecionado para a pagina categories. html e preciso que faça um efeito de scroll até a <li> respectiva dessa página. Segue as imagens abaixo para exemplificar: Primeira imagem: Clico na categoria Furnitures por exemplo. Segunda imagem: Efeito scroll até a <ul> específica. Ja possui um script que abre essa <ul> automaticamente após redirecionamento. Abaixo segue uma parte do código fonte: Index.html <div class="main-content"> <div class="w3-categories"> <h3>Browse Categories</h3> <div class="container"> <div class="col-md-3"> <div class="focus-grid w3layouts-boder1"> <a class="btn-8" href="categories.html" class="scrollSuave"> <div class="focus-border"> <div class="focus-layout"> <div class="focus-image"><i class="fa fa-mobile"></i></div> <h4 class="clrchg">Mobiles</h4> </div> </div> </a> </div> </div> <div class="col-md-3"> <div class="focus-grid w3layouts-boder2"> <a class="btn-8" href="categories.html#parentVerticalTab2"> <div class="focus-border"> <div class="focus-layout"> <div class="focus-image"><i class="fa fa-laptop"></i></div> <h4 class="clrchg"> Electronics & Appliances</h4> </div> </div> </a> </div> </div> <div class="col-md-3"> <div class="focus-grid w3layouts-boder3"> <a class="btn-8" href="categories.html#parentVerticalTab3"> <div class="focus-border"> <div class="focus-layout"> <div class="focus-image"><i class="fa fa-car"></i></div> <h4 class="clrchg">Cars</h4> </div> </div> </a> </div> </div> <div class="col-md-3"> <div class="focus-grid w3layouts-boder4"> <a class="btn-8" href="categories.html#parentVerticalTab4"> <div class="focus-border"> <div class="focus-layout"> <div class="focus-image"><i class="fa fa-motorcycle"></i></div> <h4 class="clrchg">Bikes</h4> </div> </div> </a> </div> </div> <div class="col-md-3"> <div class="focus-grid w3layouts-boder5"> <a class="btn-8" href="categories.html#parentVerticalTab5"> <div class="focus-border"> <div class="focus-layout"> <div class="focus-image"><i class="fa fa-wheelchair"></i></div> <h4 class="clrchg">Furnitures</h4> </div> </div> </a> </div> Categories.html <div class="categories-section main-grid-border"> <div class="container"> <h2 class="w3-head">All Categories</h2> <div class="category-list"> <div id="parentVerticalTab"> <div class="agileits-tab_nav"> <ul class="resp-tabs-list hor_1"> <li>Mobiles</li> <li>Electronics & Appliances</li> <li>Cars</li> <li>Bikes</li> <li>Furniture</li> <li>Pets</li> <li>Books, Sports & Hobbies</li> <li>Fashion</li> <li>Kids</li> <li>Services</li> <li>Jobs</li> <li>Real Estate</li> </ul> <a class="w3ls-ads" href="all-classifieds.html">View all Ads</a> </div> <div class="resp-tabs-container hor_1"> <span class="active total" style="display:block;" data-toggle="modal" data-target="#myModal"><strong>All USA</strong> (Select your city to see local ads)</span> <div> <div class="category"> <div class="category-img"> <img src="images/cat1.png" title="image" alt="" /> </div> <div class="category-info"> <h4>Mobiles</h4> <span>5,12,850 Ads</span> <a href="all-classifieds.html">View all Ads</a> </div> <div class="clearfix"></div> </div> <div class="sub-categories"> <ul> <li><a href="mobiles.html">mobile phones</a></li> <li><a href="mobiles.html">Tablets</a></li> <li><a href="mobiles.html">Accessories</a></li> </ul> </div> </div> <div> <div class="category"> <div class="category-img"> <img src="images/cat2.png" title="image" alt="" /> </div> <div class="category-info"> <h4>Electronics & Appliances</h4> <span>2,01,850 Ads</span> <a href="all-classifieds.html">View all Ads</a> </div> <div class="clearfix"></div> </div> <div class="sub-categories"> <ul> <li><a href="electronics-appliances.html">Computers & accessories</a></li> <li><a href="electronics-appliances.html">Tv - video - audio</a></li> <li><a href="electronics-appliances.html">Cameras & accessories</a></li> <li><a href="electronics-appliances.html">Games & Entertainment</a></li> <li><a href="electronics-appliances.html">Fridge - AC - Washing Machine</a></li> <li><a href="electronics-appliances.html">Kitchen & Other Appliances</a></li> </ul> </div> </div> <div> <div class="category"> <div class="category-img"> <img src="images/cat3.png" title="image" alt="" /> </div> <div class="category-info"> <h4>Cars</h4> <span>1,98,080 Ads</span> <a href="all-classifieds.html">View all Ads</a> </div> <div class="clearfix"></div> </div> <div class="sub-categories"> <ul> <li><a href="cars.html">Commercial Vehicles</a></li> <li><a href="cars.html">Other Vehicles</a></li> <li><a href="cars.html">Spare Parts</a></li> </ul> </div> </div> <div> <div class="category"> <div class="category-img"> <img src="images/cat4.png" title="image" alt="" /> </div> <div class="category-info"> <h4>Bikes</h4> <span>6,17,568 Ads</span> <a href="all-classifieds.html">View all Ads</a> </div> <div class="clearfix"></div> </div> <div class="sub-categories"> <ul> <li><a href="bikes.html">Motorcycles</a></li> <li><a href="bikes.html">Scooters</a></li> <li><a href="bikes.html">Bicycles</a></li> <li><a href="bikes.html">Spare Parts</a></li> </ul> </div> </div> <div> <div class="category"> <div class="category-img"> <img src="images/cat5.png" title="image" alt="" /> </div> <div class="category-info"> <h4>Furniture</h4> <span>1,05,168 Ads</span> <a href="all-classifieds.html">View all Ads</a> </div> <div class="clearfix"></div> </div> <div class="sub-categories"> <ul> <li><a href="furnitures.html">Sofa & Dining</a></li> <li><a href="furnitures.html">Beds & Wardrobes</a></li> <li><a href="furnitures.html">Home Decor & Garden</a></li> <li><a href="furnitures.html">Other Household Items</a></li> </ul> </div> </div> <div> SCRIPT dentro de categories.html <script type="text/javascript"> $(document).ready(function() { //Vertical Tab $('#parentVerticalTab').easyResponsiveTabs({ type: 'vertical', //Types: default, vertical, accordion width: 'auto', //auto or any width like 600px fit: true, // 100% fit in a container tabidentify: 'hor_1', // The tab groups identifier activate: function(event) { // Callback function if tab is switched var $tab = $(this); var $info = $('#nested-tabInfo2'); var $name = $('span', $info); $name.text($tab.text()); $info.show(); } }); }); </script> Encontrei essa documentação: https://github.com/jellekralt/Responsive-Tabs#scroll-to-accordion-panel Parte da documentação: Scroll to Accordion panel This options can be used to enable automatic scrolling to the accordion panel that has been opened scrollToAccordion: false, // (default) disables the auto scrolling to the accordion panel scrollToAccordion: true, // enables the auto scrolling to the accordion panel Scroll to Accordion panel on load This option can be used to disabling the scrolling to an accordion panel on load scrollToAccordionOnLoad: true, // (default) enables scrolling to accordion on load scrollToAccordionOnLoad: false, // disables scrolling to accordion on load You can define an offset in pixels for the scroll to accordion panel by setting the scrollToAccordionOffset option. scrollToAccordionOffset: false, // (default) disables the auto scrolling to the accordion panel scrollToAccordionOffset: true, // enables the auto scrolling to the accordion panel porem não consegui utilizar esse efeito de scroll. Obs.: Devo manter o código fonte do mesmo jeito, ordens do meu Boss.. ;S Desde já agradeço.
  2. Preciso pegar a localização atual do usuário(solicitar permissão) e calcular a distância até o outro ponto que ja está definido (conforme deixei no exemplo html o formato do layout) e devolver a distancia entre os dois em KM no html. Segue o link https://jsfiddle.net/c8utaqb5/ Agradeço pela ajuda.
×

Important Information

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