I have a sub menu div which has a cart span in it. When the user hovers over it, it displays my hidden cart DIV. The user can then move the mouse to the DIV to remove an item.
If the user displays and moves the mouse into the hidden DIV then moves out of this, the DIV is re-hidden
The issue i'm having is that if the user displays the DIV but instead of moving into hidden DIV, goes back to the sub/main menu the DIV is not re-hiding and i have tried everything i can think.
Please check my fiddle
If you dont go to the div first it wont hide it
$('#subMenuCartBox').mouseover(function () {
$('#cartBox').show();
$('#cartBox').mouseleave(function () {
$('#cartBox').hide();
});
}).mouseleave(function () {
setTimeout(function () {
if (!$('#cartBox').length) {
$('#cartBox').hide();
}
});
})
.mainMenu {
width: 100%;
height: 75px;
background-color: lightblue;
}
.subMenu {
width: 100%;
height: 45px;
background-color: gray;
text-align: right;
padding: 10px;
}
.subMenuOptionSpan {
display: inline-flex;
}
.subMenuCartBox {
background-color: deepskyblue;
padding: 5px;
width: 100%;
cursor: pointer;
}
.cartBox {
float: right;
padding: 15px;
background-color: lightgray;
display: none;
left: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainMenu">
Main menu options
</div>
<div class="subMenu">
<div class="row justify-content-end align-items-center">
<span class="subMenuOptionSpan col-12 col-sm-auto">
<i class="fas fa-user fa-lg"></i>
<div id="username">Test of long username</div>
</span>
<span id="subMenuCartBox" class="subMenuOptionSpan col-12 col-sm-auto">
<i class="fas fa-shopping-cart fa-lg"></i>
<div id="cartAmountBox" class="subMenuCartBox">
<span id="cartAmountText" class="subMenuCartAmount">0 item(s) - £0.00</span>
</div>
</span>
</div>
</div>
<div id="cartBox" class="cartBox">
<b id="emptyCart">There are currently no items in your cart.</b>
</div>
I need the hidden DIV to re-hide if the user goes anywhere on the page without having to go inside it and then out of it.
With Jquery you can check on which side the mouse leaves the button and keep the div open when you leave the button on the bottom.
$('#subMenuCartBox').mouseover(function () {
$('#cartBox').show();
$('#subMenuCartBox').mouseleave(function (e) {
var $this = $(this);
var bottom = $this.offset().top + $this.outerHeight();
if(e.pageY < bottom) {
console.log("CLOSE");
$('#cartBox').hide();
}
});
$('#cartBox').mouseleave(function () {
$('#cartBox').hide();
});
}).mouseleave(function () {
setTimeout(function () {
if (!$('#cartBox').length) {
$('#cartBox').hide();
}
});
})
$('#subMenuCartBox').mouseover(function () {
$('#cartBox').show();
}).mouseleave(function () {
$('#cartBox').hide();
})
.mainMenu {
width: 100%;
height: 75px;
background-color: lightblue;
}
.subMenu {
width: 100%;
height: 45px;
background-color: gray;
text-align: right;
padding: 10px;
}
.subMenuOptionSpan {
display: inline-flex;
}
.subMenuCartBox {
background-color: deepskyblue;
padding: 5px;
width: 100%;
cursor: pointer;
}
.cartBox {
float: right;
padding: 15px;
background-color: lightgray;
display: none;
left: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainMenu">
Main menu options
</div>
<div class="subMenu">
<div class="row justify-content-end align-items-center">
<span class="subMenuOptionSpan col-12 col-sm-auto">
<i class="fas fa-user fa-lg"></i>
<div id="username">Test of long username</div>
</span>
<span id="subMenuCartBox" class="subMenuOptionSpan col-12 col-sm-auto">
<i class="fas fa-shopping-cart fa-lg"></i>
<div id="cartAmountBox" class="subMenuCartBox">
<span id="cartAmountText" class="subMenuCartAmount">0 item(s) - £0.00</span>
</div>
</span>
</div>
</div>
<div id="cartBox" class="cartBox">
<b id="emptyCart">There are currently no items in your cart.</b>
</div>
Do you mean you want to archive this? please clarify your question.
Related
In the code below, the default main content is empty. Unless I click on any of the bottom navbar buttons, no content will show up.
I'd like to set content-1 and menu-1 (its respective button) to be the default, i.e. when the user opens the webpage it would be the first thing they see and the button would be black indicating that it is active.
I tried to use an else statement but it did not work:
// set menu-1 as default
else {
$('.menu-1').addClass('default')
$('.content').addClass('default')
}
Find the entire code below:
$(document).ready(function() {
// only show menu-1
$('.menu-1').click(function() {
if ($('.menu-2, .menu-3').hasClass('active')) {
$('.menu-2, .menu-3').removeClass('active');
$('.content-2, .content-3').removeClass('active');
}
// set menu-1 as default
// else {
// $('.menu-1').addClass('default')
// $('.content').addClass('default')
// }
$('.menu-1').addClass('active');
$('.content-1').addClass('active');
});
// only show menu-2
$('.menu-2').click(function() {
if ($('.menu-1, .menu-3').hasClass('active')) {
$('.menu-1, .menu-3').removeClass('active');
$('.content-1, .content-3').removeClass('active');
}
$('.menu-2').addClass('active');
$('.content-2').addClass('active');
});
// only show menu-3
$('.menu-3').click(function() {
if ($('.menu-2, .menu-1').hasClass('active')) {
$('.menu-2, .menu-1').removeClass('active');
$('.content-2, .content-1').removeClass('active');
}
$('.menu-3').addClass('active');
$('.content-3').addClass('active');
});
});
.container {
margin: 0 auto;
background-color: #eee;
border: 1px solid lightgrey;
width: 20vw;
height: 90vh;
font-family: sans-serif;
position: relative;
}
header {
background-color: lightgreen;
padding: 5px;
text-align: center;
text-transform: uppercase;
}
.bottom-navbar {
position: absolute;
bottom: 0;
width: 100%;
padding: 6px 0;
overflow: hidden;
background-color: lightgreen;
border-top: 1px solid var(--color-grey-dark-3);
z-index: 50;
display: flex;
justify-content: space-between;
> a {
display: block;
color: green;
text-align: center;
text-decoration: none;
font-size: 20px;
padding: 0 10px;
&.active {
color: black;
}
}
}
.menu-1.default,
.menu-1.active,
.menu-2.active,
.menu-3.active {
color: black;
}
.content-1,
.content-2,
.content-3 {
display: none;
}
.content-1.default,
.content-1.active,
.content-2.active,
.content-3.active {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<header>My header</header>
<div class="main-content">
<div class="content-1">House content</div>
<div class="content-2">Map content</div>
<div class="content-3">Explore content</div>
<div class="bottom-navbar">
<i class="fa fa-home"></i>
<i class="fa fa-map"></i>
<i class="fa fa-search"></i>
</div>
</div>
In case you find it easier, here's my CodePen:
https://codepen.io/fergos2/pen/vYYaRzN
All that is going on to set up each menu and content item to display on the page is adding the class active. So it looks to me like all you need to do is add that class to the HTML. That way when the page loads it's already "active" and when you click something else you already have it set up to remove the class and set something else as active. So basically, your HTML would look like this:
<header>My header</header>
<div class="main-content">
<div class="content-1 active">House content</div>
<div class="content-2">Map content</div>
<div class="content-3">Explore content</div>
<div class="bottom-navbar">
<i class="fa fa-home active"></i>
<i class="fa fa-map"></i>
<i class="fa fa-search"></i>
</div>
</div>
All I did was give .menu-1 and .content-1 the class of active.
You'll also need to get rid of the css bit which references .content-1.default and .menu-1.default and also set your JS to add the .active back when you click that menu button which you already have. Don't worry about the else statement inside that click function
Let me know if this works out for you!
The banner should stay close to the info buttons like in this example:
I want to move this "Ads by Google" label left away from the buttons.
function removeHeader() {
var list = document.getElementById("main");
list.removeChild(list.childNodes[0]);
}
body {
margin: 100px;
}
.banner-buttons {
display: inline-block;
position: relative;
font-size: 14px;
width: 50px;
overflow: hidden;
}
.showme {
display: none;
font-size: 10px;
}
.infoLink:hover .showme {
display: inline-block;
float: left;
}
.closeBtn {
cursor: pointer;
display: inline-block;
}
i:hover {
color: #d075f4;
}
<div id="main">
<div class="nanoSaturnBanner">
<p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink" href="https://support.google.com/adsense/#topic=3373519" target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close"></i>
</div>
</div>
</div>
HTML code: Here is the html, you will find the two buttons and icons there. If there is something missing just ask and I will update the post.
Try changing your p to a div and moving it after the other stuff. Then adding CSS to move the ad part:
<div id="main">
<div class="nanoSaturnBanner">
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink"
href="https://support.google.com/adsense/#topic=3373519"
target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close"></i>
</div>
</div>
<div id="text">teteasdasdasdsadasds sad asdasdasdasdasdas</div>
</div>
then add this to the new div class
float: right;
margin-right: 50%;
I have several form buttons positioned in a div using display: flex.
Upon clicking the "Save" button I want to hide the original content of the save button and show a centered spinning icon. However, I do not want the width of the button to change since that causes the page other elements (buttons) around it to shift. Here's what happens with that I have now:
How do I ensure that the button keeps it's original width and does not shrink? I know I could set a min-width on the button, but that would require me to specify a different width for each button this behavior is on since the text could be shorter or longer each time. I have also tried adding various combinations of flex-shrink: 0 styles to the buttons, but that doesn't seem to work either.
Code Pen Example
https://codepen.io/kspearrin/pen/eVNeMX
HTML
<div class="wrapper">
<button type="button" id="save">
<span id="savetext"><i class="fa fa-save"></i> Save</span>
<i class="fa fa-spinner fa-spin hide" id="spinner"></i>
</button>
<button type="button" id="cancel">Cancel</button>
<div class="right">
<button type="button"><i class="fa fa-star"></i></button>
<button type="button"><i class="fa fa-trash"></i></button>
</div>
</div>
CSS
.wrapper {
display: flex;
width: 400px;
align-items: center;
background-color: lightblue;
padding: 10px;
}
button {
margin-right: 10px;
text-align: center;
padding: 5px 10px;
}
button:last-child {
margin-right: 0;
}
.right {
margin-left: auto;
display: flex;
align-items: center;
}
.hide {
display: none;
}
JS
document.getElementById("save").onclick = () => {
document.getElementById("savetext").classList.add("hide");
document.getElementById("spinner").classList.remove("hide");
};
document.getElementById("cancel").onclick = () => {
document.getElementById("savetext").classList.remove("hide");
document.getElementById("spinner").classList.add("hide");
};
As said in comments, it is not related to flexbox: the behavior is normal. A box that is not display will fit its content width.
You can use visibility and flexbox to set the layout of your spinner.
Here, I just set the upper div to position:relative, it does nothing except it becomes the reference for #spinner which is absolute.
I stretch it to the maximum and center its content with the flexbox :)
document.getElementById("save").onclick = () => {
document.getElementById("savetext").classList.add("hide");
document.getElementById("spinner").classList.remove("hide");
};
document.getElementById("cancel").onclick = () => {
document.getElementById("savetext").classList.remove("hide");
document.getElementById("spinner").classList.add("hide");
};
.wrapper {
display: flex;
width: 400px;
align-items: center;
background-color: lightblue;
padding: 10px;
}
button {
margin-right: 10px;
text-align: center;
padding: 5px 10px;
}
button:last-child {
margin-right: 0;
}
.right {
margin-left: auto;
display: flex;
align-items: center;
}
.hide {
visibility: hidden;
}
#save {
position: relative;
}
#spinner {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
<div class="wrapper">
<button type="button" id="save">
<span id="savetext"><i class="fa fa-save"></i> Save</span>
<i class="fa fa-spinner fa-spin hide" id="spinner"></i>
</button>
<button type="button" id="cancel">Cancel</button>
<div class="right">
<button type="button"><i class="fa fa-star"></i></button>
<button type="button"><i class="fa fa-trash"></i></button>
</div>
</div>
The updated codepen (font-awesome does not work here): https://codepen.io/anon/pen/vdOpJd
You can use position:absolute here for the icon so that they dont interface in the flow of button then set opacity:0 and on click event set opacity:1 and hide the text.
Remember to set the position:relative of parent
And I will also suggest you to add the class to the parent not to every inner elements separately to reduce the code.
Stack Snippet
document.getElementById("save").addEventListener("click", function() {
this.classList.add("hide");
});
document.getElementById("cancel").addEventListener("click", function() {
this.classList.add("hide");
});
.wrapper {
display: flex;
width: 400px;
align-items: center;
background-color: lightblue;
padding: 10px;
}
button {
margin-right: 10px;
text-align: center;
padding: 5px 10px;
position: relative;
}
button:last-child {
margin-right: 0;
}
.right {
margin-left: auto;
display: flex;
align-items: center;
}
button .fa-spinner {
position: absolute;
top: 6px;
left: 10px;
opacity: 0;
}
button.hide .fa-spinner {
opacity: 1;
}
button.hide #savetext {
visibility: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="wrapper">
<button type="button" id="save">
<span id="savetext"><i class="fa fa-save"></i> Save</span>
<i class="fa fa-spinner fa-spin hide" id="spinner"></i>
</button>
<button type="button" id="cancel">
<span id="savetext"><i class="fa fa-times"></i> Cancel</span>
<i class="fa fa-spinner fa-spin hide" id="spinner"></i>
</button>
<div class="right">
<button type="button"><i class="fa fa-star"></i></button>
<button type="button"><i class="fa fa-trash"></i></button>
</div>
</div>
I wrote a custom drop down for a phone-gap project. It has 3 entries: Enterprices Routing & Switches, Junos Security and Service Provider Routing and Switching. Whenever I select any one of 3 entries, it gets selected successfully, however It shows selected entry twice. I want selected entry to be shown only once. My JavaScript code is:
$(".current_track").click(function() {
if ($('.track').is(':visible')) {
$(".track").hide();
$(".trackIcon").removeClass("trackOpenIcon").addClass("trackCloseIcon");
if ($('.trackName').text() != "Select Track") {
$(".category").show();
$('.lock_hide').show();
$('#TrackBuy').show();
}
} else {
$(".category").hide();
$('.lock_hide').show();
$('#TrackBuy').hide();
$(".track").show();
$('.lock_hide').show();
$(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon");
}
});
$('.trackDiv').on("click", ".track", function() {
$('.trackName').text($(this).text());
$('.trackName').attr("id", $(this).attr("id"));
$(".track").hide();
$(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon");
$('.lock_hide').show();
// saving user selected/clicked trackid and track name to local stroage
localStorage.setItem("mainTrackid", $(this).attr("id"));
localStorage.setItem("mainTrackname", $(this).text());
localStorage.setItem("selectedTrackPayStatus", $(this).attr("payStatus"));
localStorage.removeItem("selectedTrackPrice");
// check first paper exist or not if exist means load exams list
checkTrackpapersExist();
});
Entire code example.
Updated fiddle.
You could use an extra class selected to do the trick.
Remove selected class from all the track's and add it to the clicked one :
$('.trackDiv').on("click", ".track", function() {
$('.track').removeClass('selected');
$(this).addClass('selected');
$('.trackName').html($(this).html()); //Use '.html()' to show the icon
....
});
Hide the selected track from the dropdown :
$(".current_track").click(function() {
.....
$('.track.selected').hide();
});
Hope this helps.
$(".current_track").click(function() {
if ($('.track').is(':visible')) {
$(".track").hide();
$(".trackIcon").removeClass("trackOpenIcon").addClass("trackCloseIcon");
if ($('.trackName').text() != "Select Track") {
$(".category").show();
$('.lock_hide').show();
$('#TrackBuy').show();
}
} else {
$(".category").hide();
$('.lock_hide').show();
$('#TrackBuy').hide();
$(".track").show();
$('.lock_hide').show();
$(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon");
}
$('.track.selected').hide();
});
$('.trackDiv').on("click", ".track", function() {
$('.track').removeClass('selected');
$(this).addClass('selected');
$('.trackName').html($(this).html());
$('.trackName').attr("id", $(this).attr("id"));
$(".track").hide();
$(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon");
$('.lock_hide').show();
});
.trackDiv > .track > .fa-lock {
margin-top: 3px;
}
.fa-lock {
color: #fff;
font-size: 23px;
}
.lock_category {
padding-right: 0px;
padding-top: 3px;
}
.lock_hide {
display: none;
}
.fa-unlock {
color: #fff;
font-size: 17px;
}
.trackDiv {
background-color: #374550;
border-radius: 4px;
height: 40%;
margin: 2% 0 0;
padding: 3% 2.7% 2.9%;
width: 100%;
}
.trackName {
color: #fff;
font-family: "robotRegular";
font-size: 16px;
font-weight: 500;
}
.trackOpenIcon {
background-image: url("../JunosImages/mob/down-arrow_normal1.png");
background-image: url("../JunosImages/mob/front-arrow_normal_tab.png");
background-repeat: no-repeat;
background-size: 100% 100%;
display: block;
height: 11px;
margin-top: 1.5%;
width: 19px;
}
.trackCloseIcon {
background-image: url("../JunosImages/mob/front-arrow_normal_tab.png");
background-repeat: no-repeat;
background-size: 100% 100%;
display: block;
height: 18px;
margin-top: 0.7%;
width: 12px;
}
.track {
color: #fff;
display: block;
font-family: "robotRegular";
font-size: 16px;
font-weight: 500;
padding: 5% 0 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="categorylist">
<div class="trackDiv">
<div class="current_track">
<span class="trackName">Select Track</span>
<span class="trackIcon trackOpenIcon pull-right"></span>
<div><span class="label label-primary Buy" id="TrackBuy" style="display:none">Buy $24</span></div>
</div>
<span id="t1" class="track">Enterprices Routing & Switches <span class="fa fa-lock pull-left"></span></span>
<span id="t2" class="track">Junos Security</span>
<!-- <span id="t3" class="track">Data Center Design</span> -->
<span id="t4" class="track"> Service Provider Routing and Switching</span>
</div>
<div class="category">
<span class="ctgryName">JNCIs - SEC</span>
<span class="ctgryIcon pull-right"></span>
</div>
<div class="category">
<span class="ctgryName">JNCIS - ENT</span>
<span class="ctgryIcon pull-right"></span>
</div>
<div class="category">
<span class="ctgryName">JNCIS - ENT</span>
<span class="ctgryIcon pull-right"></span>
</div>
<div class="category">
<span class="ctgryName" id="ctgryName">JNCIA - Junos</span>
<span class="ctgryIcon pull-right"></span>
</div>
</div>
I am using this code for scroll on an anchor link. It works one time and if click on anchor again it is not working.
$("#erly").on("click", function() {
$(".table-responsive").scrollLeft(0);
});
$("#late").on("click", function() {
$(".table-responsive").scrollLeft(50);
});
You may try unbinding the previous event handlers, like this.
$("#erly").unbind().on("click", function() {
$(".table-responsive").scrollLeft(0);
});
$("#late").unbind().on("click", function() {
$(".table-responsive").scrollLeft(50);
});
div.table-responsive {
background: #ccc none repeat scroll 0 0;
border: 3px solid #666;
margin: 5px;
padding: 5px;
position: relative;
width: 200px;
height: 100px;
overflow: auto;
}
p {
margin: 10px;
padding: 5px;
border: 2px solid #666;
width: 1000px;
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<a id="erly" href="#1">Early</a>
<br />
<a id="late" href="#2">Late</a>
<div class="table-responsive">
<h1>lalala</h1>
<p>Hello 1</p>
</div>
<div class="table-responsive">
<h1>lalala</h1>
<p>Hello 2</p>
</div>
</body>
<div class="col-xs-12 early_late">
<ul class="list-inline">
<li class="pull-left">
<a id="erly" class="erlier" onclick="scrollWin2()">
<span class="glyphicon glyphicon-menu-left span_left"></span> Earlier</a>
</li>
<li class="pull-right" onclick="scrollWin()">
<a id="late">Late <span class="glyphicon glyphicon-menu-right span_right"></span></a>
</li>
</ul>
function scrollWin() {
document.getElementById('scroll').scrollBy(100 , 0);
}
function scrollWin2() {
document.getElementById('scroll').scrollBy(-100 , 0);
}