Disable Hover Effects on resize using jQuery - javascript

Ok so Im new to jQuery and a little confused how to achieve my goal here. The goal is whenever the browser is less than 780px wide I want to disable all hover effects. So I did a lot of research and still cant figure out a specific way that works for me, though I have come close. Below is the jQuery and HTML. So the class .allHover is what is triggering the hover effects. So I thought to remove the hover effect when the browser is less than 780px I would use a .removeClass method which would break the hover effect. The jQuery code below works, however when I resize the window to less than 780 px then refresh my browser the hover effect comes back and I dont want that. Is there something I can add to ensure the class .allHover doesnt come back when the page is less than 780px wide and the page is refreshed? Thank you in advance.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(window).on("load resize", function mobileViewUpdate() {
var viewportWidth = $(window).width();
if (viewportWidth <= 780) {
$(".allHover").removeClass("allHover").addClass("gallery-mobile");
}
});
</script>
<style>
.stockDesign_image, .customDesign_image {
width: 340px;
height: 382px;
margin: 30px auto;
transition: all 0.2s ease-in-out;
}
div.allHover:hover .stockDesign_image, div.allHover:hover .customDesign_image {
width: 360px;
}
.prodBoxes_header {
background-color: #4c2e90;
}
div.allHover:hover .prodBoxes_header {
background-color: #5E3EA6;
}
.prodBoxes_headerright {
background-color: #ff6600;
}
div.allHover:hover .prodBoxes_headerright {
background-color: #fb8332;
}
.viewAll_button {
background-image: url(images/VIEW-ALL.png);
width: 141px;
height: 34px;
float: right;
overflow: hidden;
position: relative;
margin: 8px 5px 0 0;
}
div.allHover:hover .viewAll_button {
background-position: 0 -34px;
}
</style>
<div class="allHover">
<div class="prodBoxes_header">
<p class="medalHeader_text">CHOOSE FROM<br>1000+Insert designs...</p>
</div>
<div class="stockDesign_image"></div>
<div class="prodBoxes_footer">
<p class="footer_asLOWas">as low as <span class="asLOWas_price">$<?=($prod[1]->sale_price ?: $prod[1]->aslow_price);?></span></p>
<div class="viewAll_button"></div>
</div>
</div>

You need to call the hiding functionality also when the page is loaded. This can be done in the ready-function. I moved the hdiding funtionality to fucntion checkViewportWidth and call in both cases.
It seems that on('load') is not executed on page refresh.
$(document).ready(function() {
function checkViewportWidth() {
var viewportWidth = $(window).width();
console.log(viewportWidth);
if (viewportWidth <= 780) {
$(".allHover").removeClass("allHover").addClass("gallery-mobile");
}
}
$(window).on('load resize', function mobileViewUpdate() {
checkViewportWidth();
});
checkViewportWidth();
});
Please see also Plunker

An example of how to accomplish this with media queries (given the hover effect is done with css.) The style will only work when screen size is <780.
#media only screen and (min-width: 780px) {
.allHover:hover {
...
}
}
But if you need this to be js, you'll just need to add an else:
function checkViewportWidth() {
var viewportWidth = $(window).width();
console.log(viewportWidth);
if (viewportWidth <= 780) {
$(".allHover").removeClass("allHover").addClass("gallery-mobile");
}
else{
$(".allHover").addClass("allHover").removeClass("gallery-mobile");
}
}

A CSS only approach would be to add your :hover CSS in a #media query with min-width: 780px since you want :hover effects to fire when the window is > 780px.
#media (min-width: 780px) {
div.allHover:hover .stockDesign_image,
div.allHover:hover .customDesign_image {
width: 360px;
}
div.allHover:hover .prodBoxes_header {
background-color: #5E3EA6;
}
div.allHover:hover .prodBoxes_headerright {
background-color: #fb8332;
}
div.allHover:hover .viewAll_button {
background-position: 0 -34px;
}
}
.stockDesign_image, .customDesign_image {
width: 340px;
height: 382px;
margin: 30px auto;
transition: all 0.2s ease-in-out;
}
.prodBoxes_header {
background-color: #4c2e90;
}
.prodBoxes_headerright {
background-color: #ff6600;
}
.viewAll_button {
background-image: url(images/VIEW-ALL.png);
width: 141px;
height: 34px;
float: right;
overflow: hidden;
position: relative;
margin: 8px 5px 0 0;
}
<div class="allHover">
<div class="prodBoxes_header">
<p class="medalHeader_text">CHOOSE FROM<br>1000+Insert designs...</p>
</div>
<div class="stockDesign_image"></div>
<div class="prodBoxes_footer">
<p class="footer_asLOWas">as low as <span class="asLOWas_price">$<?=($prod[1]->sale_price ?: $prod[1]->aslow_price);?></span></p>
<div class="viewAll_button"></div>
</div>
</div>

Related

How to disable background scroll on pop-up?

I'm new to the web development world and wanted to know if there is a way to disable background scrolling.
I've tried z-index for the pop-up to display above all the elements, but some background content was getting overlapped with the pop-up.
I'm not much familiar with JS but was not able to get any help.
Below please find my code
body {
height: 200vh;
}
.bg-noscroll {
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
transform: translateY(-60px);
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.content {
height: 250px;
}
.popup .content {
overflow-y: scroll;
}
#media screen and (max-width: 700px){
.popup{
width: 70%;
}
<body class="bg-noscroll bg-scroll">
<span><a class="popupBG-Disable" href="#popup">Full Recipe</a></span>
<div id="popup" class="overlay">
<div class="popup">
<h3>Foxtail Millet Porridge:</h3>
<a class="close" href="#">×</a>
<div class="content">
<span>Ingredients:<br>here are some things that you'd use to make this<br> isn't this amazing?<br>Yes, it is!<br>
this is getting loooooong<br>this will take me a while!<br>oh... yes it will<br>we're getting close<br>and we should be there <br>or not...<br>Im losing hope<br>and patience<br>with how long this is taking<br>I could really cry<br>
but we'll get there soon<br>safe and sound<br>free as pie<br>I dont know what I meant by that<br>
this is taking long mannnn<br>
</span>
Thank you for your help!
I have a live codepen with your original code so you can just copy and paste if you wish.
Using Jquery, we can enable and disable overflow using some simple code:
const modal = document.querySelector("#btn");
const body = document.querySelector("body");
const showModal = function (e) {
modal.classList.toggle("hidden");
if (!modal.classList.contains("hidden")) {
body.style.overflow = "hidden";
} else {
body.style.overflow = "hidden";
}
}; // just reversed for re-enabling scroll, as seen in the codepen
Currently, you have to make use of javascript and add or remove the scrollbar-properties or css-class using a hashchange event-listener for example:
window.addEventListener("hashchange", event => {
const newHash = new URL(event.newURL).hash,
el = document.getElementById(newHash.substr(1));
if (el && el.classList && el.classList.contains("overlay")) {
document.body.style.overflow = "hidden";
// or document.body.classList.add("bg-noscroll");
} else {
document.body.style.overflow = "";
// or document.body.classList.remove("bg-noscroll");
}
});
Starting from chromium 101 the support for the :has()-selector has been implemented (experimental flag only) and the current chromium 105 dev channel brings the :has()-selector enabled by default.
With the has()-selector it will be possible using:
body:has(.overlay:target) {
overflow: hidden;
}
Keep also mind, it may take some more time for other browsers to implement the has()-selector. Therefor the best would be to stick with the javascript method for a while.

The navigation bar should only show when I scroll, but is already visible when I refresh the page, then disappears when scrolling

I'm creating a page where the navigation bar should only appear after scrolling a few thousand pixels. But when I refresh the browser, the navigation bar appears first and disappears as soon as I start scrolling. After that everything works as intended.
How can I make the bar hidden when the page is refreshed?
Here the JS code I have used:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){$(window).scroll(function(){
if( $(this).scrollTop() > 4000){
$('#navigation').fadeIn( "slow", "linear" )
} else {
$('#navigation').fadeOut( "slow", "linear" )
}
})
})
</script>
Here the CSS code I have used:
nav ul {
position:fixed;
list-style: none;
width: 1100px;
height: 40px;
margin: 30px 222px auto;
padding: 20px 20px 20px 20px;
background-color: #798c39;
text-align: center;
}
Maybe try another way. Instead of doing everything with jquery I recommend using pure javascript and css. This method is more efficient and works better.
const nav = document.querySelector('#navigation');
function showNav(){
nav.classList.add('show');
}
function hidewNav(){
nav.classList.remove('show');
}
var currPos = window.scrollY;
document.addEventListener('scroll', () => {
if (window.scrollY < currPos) {
//scroll up
hidewNav();
} else {
//scroll down
showNav();
}
currPos = window.scrollY;
});
body {
margin: 0;
height: 2000px;
margin-top: 100px;
}
nav {
position: fixed;
list-style: none;
width: 100%;
height: 70px;
top: 0;
margin: 0;
background-color: #798c39;
text-align: center;
transform: translateY(-100px);
transition: 0.3s;
}
.show {
transform: translateY(0);
}
<html>
<head>
</head>
<body>
<header>
<nav id="navigation">
<ul>
</ul>
</nav>
</header>
<main>
</main>
</body>
</html>
It depends on whether the navbar's space is to be reserved for it or not on load.
I suspect it is given the JS you have shown, in which case you need to ensure it has opacity: 0 on load.
The only alteration to your code would be in the stylesheet add:
nav {
opacity: 0;
}
This is assuming that the fadeIn/fadeOut keyframes just alter opacity. It they alter some dimension as well, for example, that would also need catering for. Perhaps you could show us those keyframes so we can check?

Div Expand to Full Screen Smoothly on Click

I am trying to make a div expand smoothly to fullscreen when clicked. The final product I am going for is similar to when a user clicks a case study on this website https://infinum.co/
So far my code can make the div fullscreen but it jumps because of the position fixed I add. I am not bothered whether the actual animation is handled by CSS or JavaScript/jQuery.
$(function() {
$(".block").on("click", function() {
$(this).addClass("fullscreen");
});
});
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.block {
width: 50%;
margin: 0 auto 50px auto;
height: 300px;
background-color: red;
transition: all 0.5s linear;
}
.block.fullscreen {
position: fixed;
top: 0;
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block"></div>
All I have so far can be found on this pen: http://codepen.io/anon/pen/RKGeYj
make your #block fullscreen first and then apply the position:absolute; after a delay greater than the fullscreen animation speed.
Here's a working snippet.
var isFullscreen = false;
$("#block").click(function (){
var prop = {};
var speed = 910;
if(!isFullscreen){ // MAXIMIZATION
prop.width = "100%";
prop.height = "100vh";
isFullscreen = true;
$("#block").animate(prop,speed);
setTimeout(function() {
$("#block").css("position","absolute");
}, 920);
}
else{
prop.width = "50%";
prop.height = "250px";
isFullscreen = false;
$("#block").animate(prop,speed);
setTimeout(function() {
$("#block").css("position","relative");
}, 920);
}
});
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
}
#block,#blockTwo{
width:50%;
height:250px;
margin:0 auto;
background-color: red;
}
#block{
z-index:100;
}
#blockTwo{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block"></div>
<div id="blockTwo"></div>
Checkout http://usefulangle.com/post/38/animating-lightbox-with-css-javascript .It contains the animation that you're looking for.
When you're making the position as fixed, you should give the initial top & left properties as well. You can get the initial top & left properties using the getBoundingClientRect method.
Along with animating top & left, you should animate width & height as well for a smoother look.
.in-animation {
animation: inlightbox 0.8s forwards;
position: fixed !important;
}
#keyframes inlightbox
{
50% {
width: 100%;
left: 0;
height: 200px;
}
100% {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
}
I tried a different approach. I used added and removed classlists using a Javascript onclick function. To make so that the image only took the full pages size rather than spreading downward if there was text or contents at the top of page above the image, I put those images in a div and used classlists there too to remove or to add these areas if the picture expanded. For this to work, you will need to stretch your image. If this fits your website, try the following code:
<html>
<head>
<style>
.image {
margin: 0px;
transition: all 0.5s linear;
background-image: url('https://tse2.mm.bing.net/th?id=OIP.4_3Eev4xNVvGA5aRvaevLAHaJa&pid=Api&P=0&w=300&h=300');
background-repeat: no-repeat;
}
.image.small {
width: 200px;
height: 100px;
background-size: cover;
background-size: 100% 100%;
}
.image.fullScreen {
width: 100%;
height: 100%;
background-size: cover;
background-size: 100% 100%;
}
.topContent {
display: contents;
}
.bottomContent {
display: contents;
}
.topContent.remove {
display: none;
}
.bottomContent.remove {
display: none;
}
</style>
</head>
<body>
<div class="topContent">
<h1>Hello</h1>
</div>
<div class="image" onclick="imageChange()"></div>
<div class="bottomContent">
<h1>Hello</h1>
</div>
<script>
window.onload = function() {
document.querySelector('.image').classList.add('small')
}
function imageChange() {
if (document.querySelector('.image').classList.contains('small')) {
document.querySelector('.image').classList.remove('small')
document.querySelector('.image').classList.add('fullScreen')
document.querySelector('.topContent').classList.add('remove')
document.querySelector('.bottomContent').classList.add('remove')
} else {
document.querySelector('.topContent').classList.remove('remove')
document.querySelector('.bottomContent').classList.remove('remove')
document.querySelector('.image').classList.remove('fullScreen')
document.querySelector('.image').classList.add('small')
}
}
</script>
</body>
</html>
If you want the image to stretch all the way to the very edge, that should be very possible. Also, with classlists, you could even turn the background black creating a black border.

How to display background color linearly after scrolling on menu section?

I have to display linearly background color after scroll on menu. In the current section there is no background color but after scrolling a background color should be displayed. How can I achieve this?
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".entry_section").offset().top > 50) {
$(".scroll-menu").addClass("scroll-menu-padding");
$(".scroll-menu").addClass("fixed-entry-field-scroll-bg");
} else {
$(".scroll-menu").removeClass("scroll-menu-padding");
$(".scroll-menu").removeClass("fixed-entry-field-scroll-bg");
}
});
body{
height: 900px;
}
.entry_section
{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 0;
text-align: center;
}
.fixed-entry-field
{
display: inline-block;
color: red;
}
.fixed-entry-field-scroll-bg
{
background-color: #000;
width: 100%;
padding: 25px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="entry_section scroll-menu" >
<div class="fixed-entry-field">
<p>linear background color after scrolling</p>
</div>
</div>
It looks weird as you're attributting height: 0; on your fixed element, that way when you apply padding: 25px it pushes the content down getting that unlinear effect you've mentioned.
By simply removing that constrain you get the desired effect on your menu upon scrolling.
Check this updated snippet for full behaviour.
PS: If you want the height to remain the same, just remove that padding of 20px on your .fixed-entry-field-scroll-bg class that it will do the trick.
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".entry_section").offset().top > 50) {
$(".scroll-menu").addClass("scroll-menu-padding");
$(".scroll-menu").addClass("fixed-entry-field-scroll-bg");
} else {
$(".scroll-menu").removeClass("scroll-menu-padding");
$(".scroll-menu").removeClass("fixed-entry-field-scroll-bg");
}
});
body{
height: 900px;
}
.entry_section
{
position: fixed;
top: 0;
left: 0;
right: 0;
text-align: center;
}
.fixed-entry-field
{
display: inline-block;
color: red;
}
.fixed-entry-field-scroll-bg
{
background-color: #000;
width: 100%;
padding: 25px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="entry_section scroll-menu" >
<div class="fixed-entry-field">
<p>linear background color after scrolling</p>
</div>
</div>
check the css part .fixed-entry-field-scroll-bg here I used transition for the effect and linear-gradient for the color LiveFiddle. For more details read this Linear Gradient & for Transition Effect.
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".entry_section").offset().top > 50) {
$(".scroll-menu").addClass("scroll-menu-padding");
$(".scroll-menu").addClass("fixed-entry-field-scroll-bg");
} else {
$(".scroll-menu").removeClass("scroll-menu-padding");
$(".scroll-menu").removeClass("fixed-entry-field-scroll-bg");
}
});
body{
height: 900px;
}
.entry_section
{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 0;
text-align: center;
}
.fixed-entry-field
{
display: inline-block;
color: red;
}
.fixed-entry-field-scroll-bg
{
/* For browsers that do not support gradients */
background: red;
/* Standard syntax */
background: linear-gradient(#000, #bbb);
/* For Safari this the part */
-webkit-transition: width 0.7s, height 0.8s;
transition: width 0.7s, height 0.8s;
width: 100%;
height: 75px;
padding: 25px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="entry_section scroll-menu" >
<div class="fixed-entry-field">
<p>linear background color after scrolling</p>
</div>
</div>

adding animate to jQuery

I Tried many codes but i dint get the proper output which am expecting, need to add the animate class to the following code in jQuery. am the beginner to jQuery
http://7revolution.com/captain/captain/empty.php
$(function() {
"use strict";
//Enable sidebar toggle
$("[data-toggle='offcanvas']").click(function(e) {
e.preventDefault();
//If window is small enough, enable sidebar push menu
if ($(window).width() <= 992) {
$('.row-offcanvas').toggleClass('active', 1000);
$('.left-side').removeClass("collapse-left", 1000);
$(".right-side").removeClass("strech", 1000);
$('.row-offcanvas').toggleClass("relative", 1000);
} else {
//Else, enable content streching
$('.left-side').toggleClass("collapse-left", 1000);
$(".right-side").toggleClass("strech", 1000);
}
});
right-side, .left-side {
min-height: 100%;
display: block;
}
/*right side - contins main content*/
.right-side {
background-color: #f9f9f9;
margin-left: 220px;
}
/*left side - contains sidebar*/
.left-side {
position: absolute;
width: 220px;
top: 0;
}
.left-side.collapse-left {
left: -220px;
}
.right-side.strech {
margin-left: 0;
}
.right-side.strech > .content-header {
margin-top: 0px;
}
.row-offcanvas-right .sidebar-offcanvas {
right: -220px;
}
.row-offcanvas-left .sidebar-offcanvas {
left: -220px;
}
.row-offcanvas-right.active {
right: 220px;
}
.row-offcanvas-left.active {
left: 220px;
}
body.fixed .row-offcanvas-left.active .navbar {
left: 220px !important;
right: 0;
}
body.fixed .row-offcanvas-left.active .sidebar-offcanvas {
left: 0px;
}
<a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
<i class="el-icon-braille"></i>
</a>
<aside class="left-side sidebar-offcanvas">
<br/><br/> <!-- only to run perfectly in stackoverflow.com -->
some left side content
</aside>
<aside class="right-side">
some right side content
</aside>
Well worth checking to see if you can achieve what you're after with CSS tansitions. Most of the problems with kind of thing have to do with not organising your classes properly and with certain problems to do with unit conversion (i.e. colour: red to any rgba value).
Also, consider #media CSS query for your window.width classes:
#media (min-width: 992px){
//wider screen styles here
}
#media (max-width: 991px){
//narrower screen styles
}
Hard to know with any class info, but have a look at a broken jquery toggleClass example here
Please note that I wouldn't recommend using an #id selector here, I only show it as an example of a potential source of problems!
CSS
#button {
width: 300px;/*#id selector more specific needs to be explicitly overridden by the toggled class.*/
height: 200px;
border: 2px solid black;
background-color: rgba(122,122,122, 0.4);
}
.clicked {
width: 10em; /*change this to !important to see the correct change*/
height: 20em !important; /* unit conversion OK */
background-color: red; /* unit conversion not OK */
}
and the JS
$('#button').on('click', function(){
$(this).toggleClass('clicked', 1000);
});

Categories