We Keep Coding

:hover on mobile (responive web design)

I'm deveolping a responsive website but i'm finding some issues.
I have a Div with an image and some infos. When the user hover this div, it changes the background and 3 buttons appears.
But the problem is: If i'm using a mobile and click on the div on the position of the button (even before it appears), it is calling the "OnClick" function for the button.
I want to use some function to turn these buttons only clickable after they appears.
This is my JQuery function that control the hover (I've used "this" becaus the div is repeated in a List)
$(this).find(".imovel", this).hover(function(){
$("a.contatos", this).toggle();
$("a.vermais", this).toggle();
$(".local", this).toggle();
$(".valor", this).toggle();
});
So, i will really appreciate any help.
Here is the div before click
Here the div after click
If i first click on the position of the phone, it call it's on click function before the hover and the buttons appears, the same occurs to the others buttons.
Thank you!
As you asked, some parts of my code (I didn't created this file, my job was to implement some changes, but one of them need to deal with this click on mobile)
<script type="text/javascript">
$(document).ready(function () {
$(".youtube").colorbox({iframe: true, width: "80%", height: "80%"});
$('.slider_principal').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
arrows: false,
centerMode: true
});
$('.ham_menu').click(function () {
$("#menugeral").toggle();
});
// --------
$(".abrir_ligamos").click(function (e) {
$(".overlaygeral").show();
$(".modal_ligamos").show();
});
$(this).find(".imovel", this).hover(function(){
$("a.contatos", this).toggle();
$("a.vermais", this).toggle();
$(".local", this).toggle();
$(".valor", this).toggle();
});
$(".propostabt").click(function () {
$(".overlaygeral").show();
$(".modal_proposta").show();
$("html, body").animate({ scrollTop: 0 }, "slow");
});
$(".overlaygeral").click(function () {
$(this).hide();
$(".modal_ligamos").hide();
$(".modal_proposta").hide();
});
$(".fechar").click(function () {
$(".overlaygeral").hide();
$(".modal_ligamos").hide();
$(".modal_proposta").hide();
});
var sliders = {
1: {slider: '#slider_imovel', nav: '#slider_imovel_nav'},
};
$.each(sliders, function () {
$(this.slider).slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
dots: false,
asNavFor: this.nav
});
$(this.nav).slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: this.slider,
prevArrow: $('.prev'),
nextArrow: $('.next'),
centerMode: false,
focusOnSelect: true,
dots: false,
infinite: true
});
});
});
</script>
<li class="item">
<section class="imovel" onclick="">
<figure>
<div class="imagemProduto" style="background:url('<?= PATH ?>imagens/large/<?= $des_1->arquivo ?>');"></div>
<section class="imask"></section>
<section class="selos">
<?php
if ($des_1->situacao == "e")
echo '<p class="mudar">pronto para mudar</p>';
?>
<?php
if ($des_1->lancamento == "s")
echo '<p class="f360">Lançamento</p>';
?>
<?php
if ($des_1->url_videos != NULL)
echo '<p class="video">Vídeo</p>';
?>
</section>
<?php
$banana = true;
foreach ($favoritos as $favorito) {
if ($favorito == $des_1->id) {
?>
<a ><button id="<?=$des_1->id?>" name="1" class="ifavoriteRED"></button></a>
<?php
$banana = false;
}
}
if ($banana) {
?>
<a ><button id="<?=$des_1->id?>" name="2" class="ifavorite"></button></a>
<?php
}
?>
<section class="informa">
<p class="local">
<span><?= $arr_cidade[$des_1->cidade] ?></span>
<span><?= $bairro[$des_1->bairro] ?></span>
</p>
<p class="valor">
<span>a partir de </span>
<strong><?= number_format( $des_1->valor , 2, ',', '.'); ?></strong>
</p>
<a class="contatos abrir_ligamos" id="ligamos">
<img src="public/images/ligamos.png">
<p>ligamos para você</p>
</a>
<a class="contatos" id="maximizeChat" title="Maximizar" onClick="Tawk_API.maximize();">
<img src="public/images/central.png">
<p>plantão de vendas</p>
</a>
<?php
$string = utf8_encode($des_1->titulo);
$tring = strtolower(strip_tags(preg_replace(array('/[`^~\'"]/', '/([\s]{1,})/', '/[-]{2,}/'), array(null, '-', '-'), iconv('UTF-8', 'ASCII//TRANSLIT', $string))));
?>
<a class="vermais" href="<?= PATH ?>imovel/<?= $des_1->id ?>/<?= $tring ?>">VER MAIS DETALHES</a>
</section>
</figure>
<h1><?= ($des_1->titulo) ?></h1>
<h2><?= $categoria[($des_1->categoria)] ?> / <?= ($des_1->quarto) ?> Quarto(s) / <?= ($des_1->wc) ?> wcs / <?= ($des_1->garagem) ?> vaga(s) / <?= ($des_1->areautil) ?> m² / Cod:<?= ($des_1->id) ?> </h2>
</section>
</li>

First, having some sample HTML or JavaScript code will be much more helpful.
For now I can only guess what the problem might be.
My best guess is that the problem is related to how mouse actions are treated in mobile browsers.
Since there is no mouse in mobile phones, but browsers pretend it has one.
When user taps, mobile browser move the simulated mouse pointer to the position you had tapped.
On mobile browsers, this mouse move movement is instantaneous.
It triggers event in the following order:
hover event - cause your buttons to unhide; this make your buttons clickable
click event - Since buttons is now clickable; and fires the button click handler.
All of these are done in sequence and at the same time, thus causing the issue you are observing.
Here is a jsFiddle you can test this behaviour:
https://jsfiddle.net/pw7u039h/
Note: desktop browser's responsive mode may implements this behaviour differently.
I had replicated this issue with Windows Phone 8, Internet Explorer using the jsFiddle provided above.
Chrome's responsive design mode cannot recreate this issue. Version 56.0.2924.87 (64-bit).
Update
I have a temporary solution in this jsFiddle:
https://jsfiddle.net/f1b5e2by/5/
The idea:
When user "hover" over an element in mobile device, JavaScript sets a variable that tells the click handler to ignore the following click.
And clears the ignorance after set amount of time (0.2 second in my example)
This will effectively prevents click handler executes to completion after hover unhides those element and triggered a click event.
Cons
Hard to maintain (e.g. Adding more elements that unhide themselves after hover event)
Depends on user devices performance. (e.g., JavaScript may executes slowly and does not clear the click ignorance after set amount of time; on a slow mobile phone).
I suggest you use a toggle button to hide and unhide the elements.
And here is a good article to read on dealing with :hover event on touch screen devices
Update
I updated my first jsFiddle and attempted to solve the problem.
However I find the behavior of my solution: https://jsfiddle.net/pw7u039h/6/
Differs between mobile browsers and responsive design mode.
Hence, I suggest to use toggle button.
Which has same control as if you are using "onHover" to display information to mobile users.

Use
JQuery.click();
instead of onclick

Flex Slider Teaser thumb image slider

/* Flex Slider Teaser */
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: "fade",
animationLoop: true,
controlNav: "thumbnails",
start: function(slider) {
jQuery( '.flexslider' ).removeClass('loading');
}
});
});
i am using flex slider but in bottom side thoumbnil images is not showing in slider .\
i checked by http://flexslider.woothemes.com/thumbnail-slider.html
but it is not working , where should i edit in js ?? my code JS code is written above.

Can you show what HTML you are using in the slider? You need a data-thumb attribute in each slide that references to the actual thumbnail images.
For example:
<li data-thumb="images/thumb1.jpg">
<img src="images/slide1.jpg" />
</li>

How to combine Infinite Scroll with Photoset Grid?

Update: this is not loading annything: What is wrong with this code?
<script type="text/javascript" src="http://static.tumblr.com/snscsmd/Z3ln6cev3/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
$('#content').infinitescroll({
// infinite scroll settings
}, function(newPosts){
$(newPosts)
.wrapAll('<div class="photoset-grid">') //wrap them in place
.parent() //get .photoset-grid
.photosetGrid({
//photoset grid settings
});
});
</script>
My problem is to combine Infinite Scroll with Photoset Grid. I need a callback but I am not sure how to implement it.
Website: http://sindreolsson.tumblr.com/
HTML
{block:Photoset}
<div class="photoset-grid" data-layout="{PhotosetLayout}" data-id="photoset{PostID}" style="visibility: hidden;" />
{block:Photos}
<img src="{PhotoURL-500}"
{block:HighRes}data-highres="{PhotoURL-HighRes}"{/block:HighRes}
width="{PhotoWidth-500}" height="{PhotoHeight-500}"
{block:Caption}alt="{Caption}"{/block:caption} />
{/block:Photos}
</div><!-- /.tumblr-photoset -->
{block:Caption}<div class="photoset-grid-copy">{Caption}</div>{/block:Caption}
{/block:Photoset}
Script:
<!--Photoset-grid script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/mviqmwg/XyYn59y3a/jquery.photoset-grid.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.photoset-grid').photosetGrid({
rel: $('.photoset-grid').attr("data-id"),
gutter: '0px',
onComplete: function(){
$('.photoset-grid').css({
'visibility': 'visible'
});
}
});
});
</script>
<!-- /Photoset-grid script -->

This should pull the new posts and wrap them in a new div.photoset-grid. At that point you can just call .photosetGrid() with your settings.
$('#content').infinitescroll({
// infinite scroll settings
}, function(newPosts){
$(newPosts)
.wrapAll('<div class="photoset-grid">') //wrap them in place
.parent() //get .photoset-grid
.photosetGrid({
//photoset grid settings
});
});
Previous answer
It's not too clear on Infinite Scroll's repo, but on
infinite-scroll.com you can see the
callback in their second example. Here's a partial solution using
that callback:
$('#content').infinitescroll({
//settings
}, function(newPosts){
//MISSING: reset photosetGrid
$('.photoset-grid').photosetGrid();
});
Unfortunately it seems that an "update" or "reset" method is missing
for Photoset Grid, so perhaps open an issue in their
repo and hope
that if someone adds the functionality, it happens in time.
Alternatively you can look for a different script.

How do I use popover from Twitter Bootstrap to display an image?

The canonical example for Twitter Bootstrap's popover feature is sort of a tooltip on steroids with a title.
HTML:
hover for popover
JS:
<script>
$("#blob").popover({offset: 10});
</script>
I'd like to use popover to display an image. Is this possible?

Very simple :)
hover for popover
var img = '<img src="https://si0.twimg.com/a/1339639284/images/three_circles/twitter-bird-white-on-blue.png" />';
$("#blob").popover({ title: 'Look! A bird!', content: img, html:true });
http://jsfiddle.net/weuWk/

Sort of similar to what mattbtay said, but a few changes. needed html:true. Put this script on bottom of the page towards close body tag.
<script type="text/javascript">
$(document).ready(function() {
$("[rel=drevil]").popover({
placement : 'bottom', //placement of the popover. also can use top, bottom, left or right
title : '<div style="text-align:center; color:red; text-decoration:underline; font-size:14px;"> Muah ha ha</div>', //this is the top title bar of the popover. add some basic css
html: 'true', //needed to show html of course
content : '<div id="popOverBox"><img src="http://www.hd-report.com/wp-content/uploads/2008/08/mr-evil.jpg" width="251" height="201" /></div>' //this is the content of the html box. add the image here or anything you want really.
});
});
</script>
Then HTML is:
mischief

simple with generated links :)
html:
<span class='preview' data-image-url="imageUrl.png" data-container="body" data-toggle="popover" data-placement="top" >preview</span>
js:
$('.preview').popover({
'trigger':'hover',
'html':true,
'content':function(){
return "<img src='"+$(this).data('imageUrl')+"'>";
}
});
http://jsfiddle.net/A4zHC/

This is what I used.
$('#foo').popover({
placement : 'bottom',
title : 'Title',
content : '<div id="popOverBox"><img src="http://i.telegraph.co.uk/multimedia/archive/01515/alGore_1515233c.jpg" /></div>'
});
and for the HTML
<b id="foo" rel="popover">text goes here</b>

Here I have an example of Bootstrap 3 popover showing an image with the tittle above it when the mouse hovers over some text. I've put in some inline styling that you may want to take out or change.....
This also works pretty well on mobile devices because the image will popup on the first tap and the link will open on the second.
html:
<h5>Template Preview 1 <i class="fa fa-external-link"></i></h5>
<h5>Template Preview 2 <i class="fa fa-external-link"></i></h5>
<h5>Template Preview 3 <i class="fa fa-external-link"></i></h5>
js:
$('.preview').popover({
'trigger':'hover',
'html':true,
'content':function(){
return "<img src='"+$(this).data('imageUrl')+"'>";
}
});
https://jsfiddle.net/pepsimax_uk/myk38781/3/

add next & back buttons for custom gallery

I have this javascript code :
$(function(){
$('.words-gallery div:gt(0)').hide();
setInterval(function() {
$('.words-gallery > div:first')
.fadeOut(1000)
.next()
.delay(995)
.fadeIn(1000)
.end()
.appendTo('.words-gallery');},
3000);
});
This code will make a gallery from DIVs and every 3000 will hide the current DIV and show the next one.
I was trying to add next & back buttons but it's not working with me.
here is my fiddle:
http://www.jsfiddle.net/jUrNx
Any idea how to do it?

Why not use the jQuery Cycle plugin? It will let you do everything you're asking and more. There is even a specific example using "next/prev".
Here is a working fiddle: http://jsfiddle.net/3Qz5T/
Essentially, you would set up your code as follows:
HTML
<div class="nav"><a id="prev2" href="#">Prev</a> <a id="next2" href="#">Next</a></div>
<div class="words-gallery">
<div>1</div>
<div>22</div>
<div>333</div>
</div>
JS
$('.words-gallery').cycle({
fx: 'fade',
speed: 'fast',
timeout: 3000,
next: '#next2',
prev: '#prev2'
});