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);
});
Related
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.
I would like to fix my mega menu that I builded a while ago. To build it i used pure css, coz I dont know JS. I was able to find and solve almost all problems with this menu, even on mobile or tablets, but there is still one annoying problem that I cannot solve alone.
When user hovers over main category in mega menu, lower level is showing, then there is another level of menu, also triggered by hover event. Problem is when user tries to go in most direct and straight line to links placed far on the left or right in the lower level menu. Then sometimes other menus are triggered by hovering over other main categories.
I tried to make main div that triggers hover event bigger, but then layout is very ugly, and menu objects are way to far from each other.
I could make click as event, but then i loose main links. Also, I read that I would have to write a lot of custom CSS for all main links, that will use "checkbox". Not the most elegant way. I wrote way to much CSS anyway, there's already a pure "DIV and CSS-inception" in my code :/
Ideal solution would be to use some kind of delay, that would trigger lower levels after lets say 500ms. I tried that with CSS, but its still closing one to immidietlly open other that user just triggered by accident.
Maybe better would be to add some kind of rule in JS that menu will be triggered only if user will hover over link for example for 500ms.? Then if user would go straight to items placed in opposite directions in lower levels, he would not trigger other menus coz "rule 500ms." was not fulfilled. Is it even possible?
Link to the website
I attach my "inception" code just for you guys to laugh :)
/* Main Menu - hover underline */
.menu-item-style {
transition: 0.3s;
}
.mega-menu-main-item:hover .menu-item-style{
color: #8f214b;
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-underline-offset: 40%;
transform: scale(1.15);
}
/* Main Menu */
.sub-mega-menu-container1 {
opacity: 0 !important;
pointer-events: none;
width: 99.2vw;
left: -19.65vw;
}
#media (max-width: 1366px){
.sub-mega-menu-container1{
width: 100vw;
left: -21.1vw !important;
}}
.mega-menu-parent-item1:hover .sub-mega-menu-container1 {
opacity: 1 !important;
pointer-events: auto;
top: 100%;
}
.sub-mega-menu-container2 {
opacity: 0;
pointer-events: none;
width: 99.2vw;
left: -28vw;
}
#media (max-width: 1366px){
.sub-mega-menu-container2{
width: 100vw;
left: -30.75vw;
}}
.mega-menu-parent-item2:hover .sub-mega-menu-container2 {
opacity: 1;
pointer-events: auto;
top: 100%;
}
.sub-mega-menu-container3 {
opacity: 0;
pointer-events: none;
width: 99.2vw;
left: -36.37vw;
}
#media (max-width: 1366px){
.sub-mega-menu-container3{
width: 100vw;
left: -40.35vw;
}}
.mega-menu-parent-item3:hover .sub-mega-menu-container3 {
opacity: 1;
pointer-events: auto;
top: 100%;
}
.sub-mega-menu-container4 {
opacity: 0;
pointer-events: none;
width: 99.2vw;
left: -44.70vw;
}
#media (max-width: 1366px){
.sub-mega-menu-container4{
width: 100vw;
left: -50.05vw;
}}
.mega-menu-parent-item4:hover .sub-mega-menu-container4 {
opacity: 1;
pointer-events: auto;
top: 100%;
}
.sub-mega-menu-container5 {
opacity: 0;
pointer-events: none;
width: 99.2vw;
left: -53.05vw;
}
#media (max-width: 1366px){
.sub-mega-menu-container5{
width: 100vw;
left: -59.6vw;
}}
.mega-menu-parent-item5:hover .sub-mega-menu-container5 {
opacity: 1;
pointer-events: auto;
top: 100%;
}
/* Sub Menu - Products */
.big-sub-menu-container1 {
opacity: 0;
pointer-events: none;
left: 0;
text-shadow: none !important;
}
.big-menu-parent-item1:hover .big-sub-menu-container1 {
opacity: 1;
pointer-events: auto;
top: 100%;
}
.big-sub-menu-container2 {
opacity: 0;
pointer-events: none;
left: -100%;
text-shadow: none !important;
}
.big-menu-parent-item2:hover .big-sub-menu-container2 {
opacity: 1;
pointer-events: auto;
top: 100%;
}
.big-sub-menu-container3 {
opacity: 0;
pointer-events: none;
left: -200%;
text-shadow: none !important;
}
.big-menu-parent-item3:hover .big-sub-menu-container3 {
opacity: 1;
pointer-events: auto;
top: 100%;
}
I appreciate all the help.
In mobile, I'm trying to create a toggle that appears on top of an image, that when tapped on, makes text appear on top of the image too.
I basically want to recreate how The Guardian newspaper handles the little (i) icon in the bottom right corner on mobile.
And on desktop, the the text is there by default under the image and the (i) icon is gone.
So far I've managed to find a similar solution elsewhere online but it's not quite working right as I need it to.
function toggleText() {
var text = document.getElementById("demo");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
#blog {
width: 100%;
}
#blog figure {
position: relative;
}
#blog figure figcaption {
display: none;
position: absolute;
bottom: 0;
left: 0;
box-sizing: border-box;
width: 100%;
color: black;
text-align: left;
background: rgba(0, 0, 0, 0.5);
}
#blog figure button {
position: absolute;
bottom: 0;
right: 0;
color: black;
border: 5px solid black;
}
<div id="blog">
<figure>
<img src="https://cdn2.hubspot.net/hubfs/4635813/marble-around-the-world.jpg" alt="A photo of a slab of marble for example">
<figcaption id="demo" style='display: none'>A photo of a slab of marble for example</figcaption>
<button type='button' onclick="toggleText()">(i)</button>
</figure>
</div>
Don't use IDs. Your code should be reusable!
Don't use inline JS on* handlers, use Element.addEventListener() instead
Don't use inline style attributes.
Don't use el.style.display === "something" to check for display styles. Use Element.classList.toggle() instead
This straightforward example uses JavaScript to simply toggle a className "is-active" on the button's parent, the figure Element.
Everything else (icon symbol change, caption animation etc...) is handled purely by CSS:
document.querySelectorAll("figure button").forEach(EL_btn => {
EL_btn.addEventListener("click", () => {
EL_btn.closest("figure").classList.toggle("is-active");
});
});
/* QuickReset */ * {margin: 0; box-sizing: border-box;}
img {
max-width: 100%; /* Never extend images more than available */
}
figure {
position: relative;
overflow: hidden; /* overflow hidden to allow figcaption hide bottom */
}
figure img {
display: block; /* prevent "bottom space" caused by inline elements */
}
figure figcaption {
position: absolute;
width: 100%;
bottom: 0;
padding: 1rem;
padding-right: 4rem; /* Prevent text going under the button icon */
color: #fff;
background: rgba(0, 0, 0, 0.5);
transform: translateY(100%); /* Move down, out of view */
transition: transform 0.3s; /* Add some transition animation */
}
figure.is-active figcaption {
transform: translateY(0%); /* Move into view */
}
figure button {
position: absolute;
width: 2rem;
height: 2rem;
bottom: 0.5rem;
right: 0.5rem;
border-radius: 50%;
color: #fff;
background: rgba(0, 0, 0, 0.5);
border: 0;
cursor: pointer;
}
figure button::before {
content: "\2139"; /* i icon */
}
figure.is-active button::before {
content: "\2A09"; /* x icon */
}
<figure>
<img src="https://cdn2.hubspot.net/hubfs/4635813/marble-around-the-world.jpg" alt="A photo of a slab of marble for example">
<figcaption>A photo of a slab of marble for example</figcaption>
<button type="button"></button>
</figure>
The above will work for any number of such elements on your website without the need to add any more CSS or JS.
I see a couple things that could mess this up, one is the fact that there is nothing to make your image adjust to your mobile screen, more-over there is also margin that is there by default, so I suggest these changes to the CSS:
First I'd set box-sizing to border-box and margin to 0, this should be a regular practice by the way.
*{
box-sizing: border-box;
margin: 0;
}
Then select the image and make it adjust to your page as such
#blog figure img{
height: auto;
width:100%;
}
Finally, for some styling you can add some padding to your blog div to make the image slightly smaller on your screen
#blog {
width: 100%;
padding: 35px;
}
This is the Fiddle for it.
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>
I tried installing Jquery UI so that I could easily add animation to the toggleClass funciton, but it only animates when adding the class, and not when removing the class (or moving back left to it's original position).
jQuery('#menu').click(function() {
jQuery('#wrap').toggleClass('move-right', 1000);
});
CSS
#wrap {
position: relative;
bottom: 22px;
max-width: 1150px;
margin: 0 auto;
padding: 20px;
}
.move-right {
left: 9%;
}
So How can I get this to animate both ways?
It's just a simple slide to the right, then back left. I thought jQuery UI would be easiest, but if I don't need it even better
add a left position to #wrap
then change your .move-right selector to be more specific
#wrap {
position: relative;
bottom: 22px;
max-width: 1150px;
margin: 0 auto;
padding: 20px;
left:0;
}
#wrap.move-right {
left: 9%;
}
http://jsfiddle.net/TrcLy/
You could try it by using a boolean and if the boolean is true try moving it the other way.
Then your code should be something like this:
JS:
var right = false;
jQuery('#menu').click(function() {
if(!right) {
jQuery('#wrap').toggleClass('move-right', 1000);
right = true;
} else if(right) {
jQuery('#wrap').toggleClass('move-left', 1000);
right = false;
}
});
CSS:
#wrap {
position: relative;
bottom: 22px;
max-width: 1150px;
margin: 0 auto;
padding: 20px;
}
.move-right {
left: 9%;
}
.move-left {
right: 9%;
}
This basically checks whether 'wrap' has moved right on clicking the button. If not, it moves it to the right, otherwise, it moves to the left.
You can use CSS3 transition to define a transition property (left) and time (1s), see: http://jsfiddle.net/m3sEn/1/ This doesn't require jQuery UI.
CSS:
#wrap {
left: 0;
transition: left 1s;
}
#wrap.move-right {
left: 9%;
}