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.
Related
As soon as you open my website, you are greeted with a T&C's and GDPR modal box see here. However, the background still scrolls when this is open, I have tried code to stop the scrolling, but that prevents scrolling across the whole website. Any help is greatly appreciated.
OUR WEBSITE
html,body.modal-open {
overflow: hidden;
}
.allowScroll {
overflow: scroll !important;
}
jQuery(function($) {
$(".termsagree").on("click", function() {
$("html, body.model-open").addClass("allowScroll");
});
});
EDIT Once you click agree the pop up won't show again unless you reload the website in another incognito page!
I couldn't find the css selector "modal-open" on your website but maybe something like this would work?
Replace your example code with this.
jQuery:
jQuery(document).ready(function ($) {
if($('#tlight').length){
$('body').css('overflow', 'hidden');
}
});
From the looks of it, once you click the agree button the page reloads and removes the '#tlight' element from the DOM. So what this will do is check if it exists on page load, and if it does set body overflow to hidden. You may need to add "important" to it depending on your current CSS.
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.
My issue is available at http://www.jeremiahbenes.com/#/portfolio by clicking on one of the tiles. I tested this in the latest release of Chrome for Mac and experienced the issue described below.
I have implemented fancybox, but when the iFrame appears, I am unable to close it. The "x" in the top-right corner appears to be unclickable. Here is what I have for my implementation:
<a data-fancybox-type="iframe" class="fancybox fancybox.iframe plink" href="http://gegarageenvy.com">
<span>GE Garage Envy</span>
</a>
The code I have for Fancybox is:
<script type="text/rocketscript" data-rocketoptimized="true">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
Why does it not close?
(On another note, how can I set it to automatically take up 95% of available height and width? I tried using autosize, but that does not work).
Thanks for your help.
There is a class in your body tag which is disabling pointer events, which is stopping you from being able to click anything inside that fancybox,
.impress-enabled {
pointer-events: none;
}
If you remove this class from the body, then everything inside of fancybox become clickable.
Otherwise you can add,
pointer-events: auto !important;
to the CSS of .fancybox-wrap.
Ok, after googling a bit I found this solution. It's similar to that what #NZ Mikey said:
Add following CSS...
.fancybox-wrap {
pointer-events: auto;
}
The problem is a known one and can be found here:
https://github.com/jmpressjs/jmpress.js/issues/85
https://github.com/bartaz/impress.js/issues/172
Good day guys. I just wanna ask from you how can I make the pagination control box as shown in the image below appear.This will appear only when I hovered in the testimonial div. The control is along with the theme features(wordpress) and it seems it don't have the option to make it appear by default. I tried to apply styles Opacity:1 and Visibility:visible but these didn't work. I think it is on the javascript and I don't know how to trace down its code. This is the link of the site is http://67.222.16.144/~lasikoma/.
Any help would greatly appreciated.
<style>
.ether-ctrl-wrap {
display: block !important;
}
</style>
Add this style somewhere convenient.
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.