Jquery acting different on mobile compared to PC, with the same code - javascript

The problem is in the website I am developing
http://balticpremier.sem.lv/en/
(https://www.virustotal.com/#/url/e2f05f0f4d6fde378f3f784c8c331849caef1e556fb1b173e4ac2f5ba521405c/detection)
Scroll to the bottom and see the Our delivered products section. It is supposed to expand on hover and click, which it does without problem on PC. However, when it is visited through phone, on click, it does the fade effect and doesn't have the correct logic.
This is the only JS that affects this part is here:
$('.deliveredCategory').on('click mouseenter mouseleave', function () {
$(this).find(".expandableClient").toggle();
$(this).find('.plus-minus-toggle').toggleClass('collapsed');
$(this).find('.dotHide').toggle();
});
Help appreciated!!
EDIT: Forgot to say that fade effect is not a part of the code, and only happens on mobile. Is this how toggle(); is interpreted on mobile? Either way, on mobile I also can't close it after it has been expanded. Really weird.

Ok, found the solution. I really hope it satisfies yopu, if not, then sorry :)
So you can check whether there the device is a touch device and if so unbind mouseover event. Or any other event you want to.
var num = 0;
$(".testDiv").on("click mouseover", function() {
num++;
$(".testDiv").text(num)
});
if (!!('ontouchstart' in window)) { //check for touch device
$('.cc').unbind('mouseover');
}
.testDiv {
background: lightgreen;
overflow: hidden;
height: 200px;
color: #fff;
font-size: 40px;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Div below uses "click mouseover"</span>
<div class="testDiv">
<p>
Initial text to test whether hovering this works properly. Initial text to test whether hovering this works properly.
</p>
</div>
I hope this is what you wanted.
Regards, KJ

Apparently, the site I am working on has Cloudflare connected and it cached a part of my JS code before, which explains the problems I am having. I contacted the host manager, they flushed the cache and it works again.
Thank you all for answers.

Related

I'm having trouble understanding why a single click in my code is selecting text

I'm trying to make a little menu, that opens when you click on it, and closes when you click outside it. I managed to do that, mostly. The button I press to open the menu has some padding, and when I click specifically on the padding the menu that opens has all it's text selected, which is weird, and I don't understand why it happens. I have looked through MDN's documentation, my favorite search engine, and IRC(freenode) for a solution, but so far no luck.
I made a minimal working example, which I link to at the bottom, and I added a few comments to it about some lines you can comment to change the behavior. Simply, you can press the blue square, and the letter 'a' will show up selected, the expected behavior is that the letter 'a' should show up, but unselected. If you understand what is going on please let me know. ^_^
Edit: I see some discussion bellow about different results on different browsers. I'm currently using Firefox 59.0.1 64-bit on Linux(Fedora 27). A suggestion was made that this might be a bug, I can't rule that out.
https://jsfiddle.net/16k672tt/4/
function outside_function(event) {
var outside = event.target;
outside.classList.remove("outside");
var menu_list = document.getElementById("menu-list");
menu_list.classList.remove("menu-list-open");
event.stopPropagation();
}
var outside = document.getElementById("outside");
outside.addEventListener("click", outside_function);
function menu_click_event(event) {
var menu_list = document.getElementById("menu-list");
var outside = document.getElementById("outside");
menu_list.classList.add("menu-list-open");
outside.classList.add("outside");
event.stopPropagation();
}
var menu = document.getElementById("menu");
menu.addEventListener("click", menu_click_event);
.menu {
/* If you comment the next line, it renders the way I expect */
display: flex;
width: 2.5rem;
height: 2.5rem;
background-color: #0000ff80;
}
.outside {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.menu-list {
display: none;
}
.menu-list-open {
display: block;
/* If you comment the next line, it renders the way I expect */
/* In fact if you decrease the alpha value to 0 it works as well (#ffffff00) */
background-color: #ffffffc0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="outside"></div>
<div id="menu" class="menu">
<div id="menu-list" class="menu-list">
a
</div>
</div>
</body>
</html>
I had a little talk with emilio on the #servo channel of mozilla's IRC network. He suggested the mouse down event is being triggered on the menu element, and the mouse up event is being triggered on the outside element. The browser assumes this was a drag motion, and selects the text in between. The problem seems to be the mouse up event is placed in the event queue after the click event. So even if the event propagation is stopped, there is already another event on the queue, mouse up, that will end up targeting the newly placed outside element. This could be a bug, so I'm off to https://bugzilla.mozilla.org/ to see if that is the case.
There have been work-arounds suggested, like using CSS's user-select to make the text unselectable, and the use of Javascript's preventDefault() to avoid running the default event handlers. Other stackoverflow users mentioned these but were unfortunately down-voted, and subsequently deleted their answers. I'm leaving these work-arounds here anyway, for anyone that might need them.
Thanks to all the people that helped look into this issue.

Remove swipe away for mobile nav from Jekyll Theme (Sera)

I am trying to remove a nagging feature from a Jekyll theme I am using. The theme is called Sera by Gleesik. In essence, the mobile nabber is toggled by hitting the hamburger, the navbar pops in, and the hamburger turns into an X which can be used to close the navbar. However, it seems there is some CSS or JS that also enables the navbar to be swiped away, this is problematic because I have a rather large navbar now, and so when a user (on a phone) tries to scroll they sometimes cause the navbar to swipe to close. While it is a neat feature, I can live with only the X providing the close functionality.
Link to live preview of the theme - need to use it as mobile to see what I'm talking about
Also, I've not pasted in the CSS as even the scss file for header-responsive is too large for here. I understand this isn't the best question for here, but I am totally stuck. Even if someone could point me towards a css or js feature that does what I describe above, that would be a tremendous help since I don't even know what I am looking for.
On discussion with a friend he suggested I paste this JS from the project:
// Close Mobile Menu
$nav_menu.removeClass('active');
$toggle_menu_button.removeClass('active');
$body.removeClass('no-scroll');
});
// Toggle Mobile Menu
$toggle_menu_button.on('click', function() {
$nav_menu.toggleClass('active');
$body.toggleClass('no-scroll');
$(this).toggleClass('active');
});
Reurning yet again with some CSS this time, I've isolated the following.
// No Scroll - Lock body scrolling.
&.no-scroll {
height: 100vh;
overflow-y: hidden;
.site-header .container {
&:before {
width: auto;
height: auto;
background-color: $black-transparent;
}
}
}
Edit: Not really an answer, but this is what I did, I removed the following which was found down the page:
$window.on('resize', function() {
$nav_menu.removeClass('active');
$body.removeClass('no-scroll');
$toggle_menu_button.removeClass('active');
});
Good enough I guess, kinda bummed that iOS seems to break standards w/r/t this issue. Maybe I'm totally off base, who knows.
Thank You.

I can't scroll to the bottom

You see, for some reasons some times I can't scroll to the bottom of the page (some times it happens in the middle too). Here is a screenshot:
Why does this happen? I can't create a jsfiddle, because I can't reproduce it since sometimes when I reload I have this problem, sometimes it works fine... It happens in a random way. I have no idea what might be causing this. It just stops scrolling before reaching the bottom. I know this might be classified as an open question but I just want to see, if anyone have had this problem. Any suggestions are appreciated..
UPDATED
Ok, here is the code I used to style the scrollbar and the scrolling, in CSS:
body
{
scrollbar-face-color: rgb(0,131,168);
scrollbar-track-color: rgba(0,131,168,0.8);
scrollbar-arrow-color: rgba(0,131,168,0.5);
scrollbar-shadow-color: rgb(0,131,168);
}
::-webkit-scrollbar-track
{
background-color: rgba(0,131,168,0.5);
}
::-webkit-scrollbar
{
width: 5px;
}
::-webkit-scrollbar-thumb
{
background-color: rgb(0,131,168);
}
in the javascript, "vista" is the main container, I wrote:
var vistaProfesional = document.getElementById('vista');
vistaProfesional.style.overflow = "auto";
vistaProfesional.style.overflowX = "hidden";
vistaProfesional.style.height = 100 + '%';
I have been thinking, and I found out that, when I was doing the whole thing, I wanted it to have a smooth scroll, therefore I used the smoothWheel plugin because it is easy to use and since I am new to programming this seems a charm. However, right after the code abode I wrote:
$("#vista").smoothWheel();
to initialize it and though it works, it is when this plugin is active that I have this issue. If I comment that line of code and stay with the normal scroll, the problem described doesn't occur. As for one of the comments, yes, the zoom is already in 100%
I have seen this problem in several websites before. Set your zoom level to 100% to allow you to scroll to the bottom of the page.
Often when the zoom is not equal to 100% there is a partial row that is not shown, so the website thinks that you have not displayed the bottom of the page, so won't fetch the rest, or update the scroll bar properly.
I think you should specify height to body and html because as for as i know Scrolling plugins need that, so
body, html {
height: 100%;
}
If this does'nt solve your issue you may use Nice Scrolling Plugin which has a lot of properties, also it has been documented very well.
Hope this helps you.

Jquery: iphone "slide to unlock"

I want to create a jquery script that works like the iphones "slide to unlock" bar. i want to have 2 divs, the container, and the slider. i want to be able to drag the slider to the right, and when the slider reaches the very right of the container, have it do something.
i don't want to use jqueryUI in doing this, that library is too bloated, i've seen some other drag and drop scripts out there but a lot of what i've tried has utterly failed, so now i'm back to step 1 wondering if there's a really simple way to drag a div and when it reaches the very right of it's container, to 'do something'.
i would REALLY appreciate any help at all, i think my hair is falling out over this.
nick
I'd suggest using a library that already does what you're looking for, in terms of actually sliding an object.
jquery UI
This is of course a link to the JQuery UI library. However, most UI (User Interface) libraries come with the ability to slide objects, so choose whichever one you're most familiar with. If you're not familiar with one, I'd suggest doing some research.
The JQuery library should give you the ability to slide the object and check the slide objects value, so you'll know when to run your lock/unlock script. As mentioned, though, I'm sure most other libraries will give you the same abilities.
Well, you can attach to the mousedown event, then on mousemove set the location of the div to be the location of the mouse (offset by the original offset), until mouseup (revert to original position), or sufficiently to the right "do something". Sounds simple enough?
So I know this post is REALLY old, but I'm trying to execute the solution that McKay proposed. I'm really quite new to jquery so don't roast me for this :D Maybe someone has a hint on how I can get this to work.
EDIT: Oh, and I'm also on a solution for this using jquery UI.
$(".slider-handle").mousedown(function() {
$(".slider-handle").on("mousemove", function(){
$(".slider-handle").css("margin-left" === "event.pageX" + "px");
});
});
.unlock-slider {
background: #d1d1d1;
width: 300px;
height: 50px;
position:relative;
}
.slider-handle {
height: 70px;
width: 70px;
border-radius: 50%;
background: tomato;
position: absolute;
z-index: 10;
}
<div class="slider-wrapper">
<div class="unlock-slider">
<div class="slider-handle">
</div>
</div>
</div>

Firefox page "moves" when hiding/showing divs

We have a web page with this general structure:
<div id="container">
<div id="basicSearch">...</div>
<div id="advancedSearch" style="display: none">...</div>
<div>
With this CSS:
#container { MARGIN: 0px auto; WIDTH: 970px }
#basicSearch { width:100% }
#advancedSearch{ width:100%;}
We have a link on the page that lets the user toggle between using the "basic" search and the "advanced" search. The toggle link calls this Javascript:
var basic = document.getElementById('basicSearch');
var advanced = document.getElementById('advancedSearch');
if (showAdvanced) {
advanced.style.display = '';
basic.style.display = 'none';
} else {
basic.style.display = '';
advanced.style.display = 'none';
}
This all works great in IE.
It works in Firefox too - except - when we toggle (ie: show/hide) from one div to the other, the page "moves" in Firefox. All the text in the "container" moves about 5px to the left/right when you toggle back and forth. Anyone know why?
Is it causing a scrollbar to appear / disappear?
Toggling content can make the page content taller. Check whether this makes a scrollbar appear, as this will affect the page width slightly.
What I ended up doing was this: HTML { OVERFLOW-Y:SCROLL; OVERFLOW-X:HIDDEN; }
Here's a good related SO post.
Check your XHTML is well formed, sounds like a dangling DIV (firebug will help with this).
On a side note jquery has some really nice animations that make this switch much nicer on the eyes.
I don't know why, but if you install Firebug a Firefox plug in you can use it to debug your problem.
Firebug has saved my hours of debugging time when it comes to CSS and showing and hiding divs.
With firebug you can view what may be different between the two divs.
From firefox, just choose the Tools Menu, then click Ad-Ons, then click Get Ad-Ons and search for firebug.
One thing that you could try is to hide before you show, this may have less flicker. If you are causing the page to get taller, this could be the source of your trouble.
I hope this helps.

Categories

Resources