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
Related
How to solve [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false on JS?
Hello.
I'm working on the front at JS.
If you use the swiper scrollbar to move to the left or right, the following error occurs.
[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
aaa.jsp
<div id="date_hidden" class="aaaaaa swiper-container aaaDiv swiper-container-horizontal swiper-container-android" style="width: 100%; overflow: hidden;">
<ul class="aaaaaaaWhen swiper-wrapper " style="transition-duration: 0ms;">
<li class="swiper-slide">
<span class="Day" <em>27</em></span>
<div class="swiper-scrollbar"><div class="swiper-scrollbar-drag"></div></div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
swiper script
const swiper = new Swiper('.swiper-container.class="aaaaaa', {
slidesPerView : '7.5',
debugger : true,
mousewheel : true,
loop : false,
scrollbar: {
el: '.swiper-scrollbar',
hide: false,
draggable: true,
},
});
How do you solve this?
I tried Google for more than 7 hours, but I couldn't solve it.
I have multiple Owl Carouse sliders in a page. The problem is that when I use the control button from one slider it moves all the sliders in the page.
I initialize the sliders based on a unique id using this function
function property_slider_v2(slider_id){
console.log('we do '+slider_id);
jQuery('#'+slider_id).owlCarousel({
loop:true,
margin:0,
nav:true,
items:6,
dots:false,
mouseDrag:true,
video:true,
autoHeight: true,
autoWidth:true,
stagePadding:0,
// rtl:true,
navText : [
'<i class="fas fa-arrow-left"></i>',
'<i class="fas fa-arrow-right"></i>'
],
});
}
the html markup looks like this (page is in php)
$slider_id='property_slider_carousel_elementor_v2_'.rand(1,99999);
.....
<div class="owl-carousel owl-theme " id="'.$slider_id.'" data-auto="">
......
</div>
print'<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
property_slider_v2("'.$slider_id.'");
});
//]]>
</script>';
Beside the "one button controls all" issue all the sliders works as they should.
So problem in the hashListener function in the OwlCarousel plugin.
When you create your html and you don't need hash navigation - dont put attributes data-hash="..." to your html markup for carousel items.
I was unable to create a codepen to demonstrate this issue (too many dependencies to sort out) so hopefully the description will be enough.
I successfully combined swiper.js with twentytwenty for a project. In all modern browsers, including Microsoft Edge, both pieces work together.
<div class="swiper-container horizontal-slider">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide" data-hash="slide1">
<div class="twentytwenty-container"><img src="./img/projects/slide1_before.jpg" />
<img src="./img/projects/slide1.jpg" /></div>
</div>
<div class="swiper-slide" data-hash="slide2"><img src="./img/projects/slide2.jpg" /></div>
<div class="swiper-slide" data-hash="slide3"><img src="./img/projects/slide3.jpg" /></div>
<div class="swiper-slide" data-hash="slide4"><img src="./img/projects/slide4.jpg" /></div>
<div class="swiper-slide" data-hash="slide5">
<div class="twentytwenty-container"><img src="./img/projects/slide5_before.jpg" />
<img src="./img/projects/slide5.jpg" /></div>
</div>
<div class="swiper-slide" data-hash="slide6"><img src="./img/projects/4English-slide6.jpg" /></div>
<div class="swiper-slide" data-hash="slide7"><img src="./img/projects/slide7.jpg" /></div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination swiper-pagination-white"></div>
</div>
This is all with jQuery 3.2.1.
$(function(){
mainSwiper = new Swiper ('.swiper-container', {
// Optional parameters
loop: true,
spaceBetween: 10,
slidesPerView: 'auto',
loopedSlides: 5,
autoplay: {
delay: 2500,
},
keyboard: {
enabled: true,
},
hashNavigation: {
watchState: true,
},
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
});
$(".twentytwenty-container").twentytwenty({
default_offset_pct: 0.1, // How much of the before image is visible when the page loads
before_label: '', // Set a custom before label
after_label: '', // Set a custom after label
no_overlay: true, //Do not show the overlay with before and after
//click_to_move: true // Allow a user to click (or tap) anywhere on the image to move the slider to that location.
});
And with some jQuery to disable moving from slide to slide when selecting the "handle" you don't get a parallax effect (there are more parts for things like touch devices but that doesn't apply here).
$(".twentytwenty-handle").mousedown(function() {
if (mainSwiper.autoplay.running) { mainSwiper.autoplayWasRunning = true; mainSwiper.autoplay.stop(); }
mainSwiper.allowTouchMove = false;
}).mouseup(function() {
if (mainSwiper.autoplayWasRunning) { mainSwiper.autoplay.start(); }
mainSwiper.allowTouchMove = true;
});
I thought things were all set. And went to move on to testing when I discovered that the jquery.event.move script that twentytwenty needs has polyfill requirements for IE. Once those were sorted out everything loaded in IE. But when I clicked on the handle, nothing happened in regard to twentytwenty. The whole slide moved, and adding console.log inside the events showed they weren't triggering. I re-enabled the click_to_move option in twentytwenty and that works for moving the handle around. But that's obviously suboptimal.
Does anyone have any thoughts? Would you like more info? Should I be filing bug reports? Thanks!
Well, I feel silly.
While IE10 needs more polyfills (which seemed a bit odd). And IE9 is not supported anymore in Swiper. The general issue with IE discussed here is that the twentytwenty-handle lost its ability to be targeted. That is solved by using pointer events.
$(".twentytwenty-handle").on("pointerdown", function() {
if (mainSwiper.autoplay.running) { mainSwiper.autoplayWasRunning = true; mainSwiper.autoplay.stop(); }
mainSwiper.allowTouchMove = false;
})
.on("pointerup", function() {
if (mainSwiper.autoplayWasRunning) { mainSwiper.autoplay.start(); }
mainSwiper.allowTouchMove = true;
});
I'm using the jquery cycle1 plugin for a slideshow with fade transitions between images, no previous or next controls. I need to layer text on top of this slider that changes color based on what slide is showing.
I'm not very fluent in jQuery so I'm having a hard time using the documentation to manipulate the available options. I've gotten this far thanks to this post and this one but the color changes slightly before or after depending on if I use before or after, obviously. How can I make the text color change at the same exact time the slide does?
Note: I have to use the cycle 1 plugin as my site uses jQuery 1.3.2 with no hope of upgrading.
here is a fiddle, and code below. Thanks in advance for any help!
here is my html:
<div id="text">this is some text over the slider</div>
<div id="switch-it">
<div id="slide1">
<a href="link1.html">
<img src="hp_hero_010114_01.jpg" height="500" width="980" border="0" />
</a>
</div>
<div id="slide2">
<a href="link2.html">
<img src="hp_hero_010114_02.jpg" height="500" width="980" border="0"/>
</a>
</div>
</div><!--//END switch-it-->
and here is the jQuery
$(document).ready(function(){
$('#switch-it').after('<div id="switch" class="switch">').cycle({
fx: 'fade',
speed: 800,
timeout: 500,
cleartypeNoBg: true,
height:'500px',
width:'980px',
pager:'#switch',
pause:1,
before: function (prev, current, opts) {
var current_id = $(current).attr('id');
if( current_id.match("slide1")){
$('#text').css('color','white');
}
else if( current_id.match("slide2")){
$('#text').css('color','red');
}
else if( current_id.match("slide3")){
$('#text').css('color','blue');
}
else if( current_id.match("slide4")){
$('#text').css('color','green');
}
},
pagerAnchorBuilder: function(index, el) {
return '•'; // whatever markup you want
}
});
});
It's not very elegant, but adding a timeout inside the before for half of your speed makes the change exactly in the middle of your transition.
setTimeout(function () { ...change text color }, 400);
JSFiddle
EDIT OR
Add a transition to your css for the #text for the same amount of time as your speed
#text {transition: color .8s linear}
JSFiddle
You might want to update to Cycle2 plugin it has what you are looking for
link
Down in "misc. bits" look for the state variable named 'busy';
On my webpage I have this link:
<\a onclick="#" class="compose"></a>
By clicking the link, this script gets activated:
$(function(){
$('.compose').click(function() { // Button which will activate our modal
$('#popup_bestanden_edit_name').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: true, // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
});
return false;
});
});
The script above will make this DIV visible, wich is a popup:
<div id="popup_bestanden_edit_name">
<div id="popupheading">
Naam wijzigen
</div>
<div id="popupcontent">
<p><form action="" method="post" name="naamwijzigen"><input name="naam" type="text"></form></p>
<img src="<?php echo $domein.'/images/confirm_popup/tick.png'; ?>">Ja, wijzigen
<img src="<?php echo $domein.'/images/confirm_popup/cross.png'; ?>">Nee, annuleren
</div>
The popup that opens gives people the opportunity to edit a name of a document on the website.
So when the link <\a onclick="#" class="compose"></a> is clicked, it has to send an id ($fetch_row['id']) to the popup, so I can use this in the further scripting.
Does anyone know how to do this?
Add the id to your a tag like this
<a onclick="#" class="compose" data-id="<?php echo $fetch_row['id']?>"></a>
Then fetch the id and send it to your popup with Jquery:
id = $(this).attr("data-id");
Now use this id wherever you want.
jQuery reveal plugin has many callback functions in which opened callback function that triggers 'after' the modal is opened. See docs at foundation.zurb.com
echo "<a onclick='#' class='compose' id='".$fetch_row['id']."'></a>";
$(function(){
$('.compose').click(function() {
var id = $(this).attr('id'); //getting id from clicked anchor tag
$('#popup_bestanden_edit_name').reveal({
animation: 'fade',
animationspeed: 600,
closeonbackgroundclick: true,
dismissmodalclass: 'close',//missing comma (,) added
opened: function(id) {
$("#popup_bestanden_edit_name").append("<input type='hidden' name='myid' id='myid' value='"+id+"'>");
}
});
return false;
});
});
Your id will set in myid element in popup get this from here.
add id to the anchor tag only i.e
<a id = '2' class='compose' ></a>
then you can get it like jQuery('.compose').attr('id');
now everything is working i have one more question.
This is the code i use now:
echo "<a onclick='#' class='compose' id='".$fetch_row['id']."'></a>";
$(function(){
$('.compose').click(function() {
var id = $(this).attr('id'); //getting id from clicked anchor tag
$('#popup_bestanden_edit_name').reveal({
animation: 'fade',
animationspeed: 600,
closeonbackgroundclick: true,
dismissmodalclass: 'close',//missing comma (,) added
opened: function(id) {
$("#popup_bestanden_edit_name").append("<input type='hidden' name='myid' id='myid' value='"+id+"'>");
}
});
return false;
});
});
But when the link is clicked while people are on the bottom of the page, the popup will open on the top of the page.
But people need to scroll back to the top to see this.
How can i automatically send the user back to the top where the popup is being showed?