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

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.

Related

Trying to make my social links stay still when hovering over them

Whenever I hover over my social links on my website, they shift to the left. This started happening after I got the scrollToggle function in jQuery to work, so I feel like it might have something to do with that. Does anyone know how I can make it so they can stay still when hovered over? Thanks in advance.
jQuery code:
$(document).ready(function(){
$("#slide").hide();
$("#contact").click(function() {
$(".socials").show();
$("#slide").slideToggle("slow");
});
});
Rest of the code/website example (Click Contact, and then hover over any of the social links. You should notice that it shifts over to the left.)
https://jsfiddle.net/Lc2ob45x/
Remove the following statement from your CSS:
div:hover {
width: 300px;
}
Working version.

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

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.

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.

Safari - Jumpy animation in Safari using jQuery Animate - Fine in FF & Chrome

I'm trying to animate the opening and closing of a menu. I'm doing this in two places on the site. One place is working fine and the other place is not.
http://rob-s-williams.com/development/
For example, here I am opening and closing the menu by clicking 'Project info' (navigated to Ben Eine project)
Great, works fine in Safari.
However, on the homepage when I am trying to open and close the menu - in Safari it's jumpy and not very smooth. Please see this page below and click on projects, about or contact (in Safari)
I am doing this the same way for each.
For example, initially I set the element like this
.mm-info {
width: 400px;
z-index: 1;
left: -1000px;
background: #fff;
position: absolute;
top: 0;
height: 100%;
}
then when I click on the element I am
var mainmenu_info_panel = $(mainmenu_info);
mainmenu_info_panel.animate({"left":"0px"}, "slow").addClass('visible');
$(mainmenu_projects_panel).fadeIn(1000);
Exact code can be found here
https://github.com/twotwentytwo/rob-s-williams/blob/master/scripts/modules/menu.js
Line 73
Please note I am yet to refactor some of this code, so yes it's a little bit repetitive and needs serious refactoring.
I seem to be doing the same thing in 2 places, one works one doesn't.
I have tried :
Removing the elements on the homepage, apart from the menu items and some test content in the menu and this doesn't work
I replaced the animation with CSS animation - that didn't work.
I'm at a bit of a loss.
Anyone able to help please?

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