Develop Reference

Setting default content with jQuery

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!

Removing Class Using Javascript

I'm trying to teach myself a little javascript for project I am working on and just wanted to see if I could get some help. I use 3 different drop down menus and I use the below function to hide one menu when another is clicked. It worked
function DropDownMenuNavigation() {
document.getElementById("DropDownMenuNav").classList.toggle("show");
document.getElementById('DropDownMenuChart').classList.remove('show');
}
The above code worked well when I had 2 different drop down menus. But now that I have 3 it doesn't seem to see the 3 line I've added below.
function DropDownMenuNavigation() {
document.getElementById("DropDownMenuNav").classList.toggle("show");
document.getElementById('DropDownMenuChart').classList.remove('show');
document.getElementById('DropDownMenuCat').classList.remove('show');
}
If I switch the bottom line with the middle line it will regonize that line, I'm guessing there is something wrong with the format I'm writing it in? Something tells me I'm not including a separator or something. Anyways, I know its something small, maybe someone could point it out to me.
EDIT:
JAVASCRIPT
<script>
function DropDownMenuNavigation() {
document.getElementById("b2DropDownMenuNav").classList.toggle("show");
document.getElementById("b2DropDownMenuCat").classList.toggle("remove");
document.getElementById("b2DropDownMenuCha").classList.toggle("remove");
}
function DropDownMenuCategory() {
document.getElementById("b2DropDownMenuCat").classList.toggle("show");
document.getElementById("b2DropDownMenuNav").classList.toggle("remove");
}
function DropDownMenuCharts() {
document.getElementById("b2DropDownMenuCha").classList.toggle("show");
document.getElementById("b2DropDownMenuNav").classList.toggle("remove");
}
</script>
HTML
<div class="dropbtn" style="float: left;">
<button onclick="DropDownMenuNavigation()" class="dropbtn">☰ MENU</button>
</div>
<div class="dropbtn" style="float: left;">
<button onclick="DropDownMenuCategory()" class="dropbtn">CATEGORIES</button>
</div>
<div class="dropbtn" style="float: left;">
<button onclick="DropDownMenuCharts()" class="dropbtn">CATEGORIES</button>
</div>
<div class="dropdown">
<div id="b2DropDownMenuCategory" class="dropdown-content">
1
</div>
</div>
<div class="dropdown">
<div id="b2DropDownMenuCharts" class="dropdown-content">
2
</div>
</div>
<div class="dropdown">
<div id="b2DropDownMenuNavigation" class="dropdown-content">
3
</div>
</div>
CSS
/* Dropdown Button */
.dropbtn {
background-color: #0066a2;
color: white;
padding: 1px;
font-size: 15px;
font-weight: bold;
border: none;
cursor: pointer;
}
.dropbtn a {
color: #FFFFFF;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
float: left;
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #0066a2;
min-width: 260px;
max-width: 960px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #000000;
text-decoration: none;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

The code you posted has mismatches between the actual ids of the content and the document.getElementById() lines, but assuming that you correct that, your code does in fact work, but each bit of content just winds up going under the other, so you never see the correct content.
function DropDownMenuNavigation() {
document.getElementById("b2DropDownMenuNav").classList.toggle("show");
document.getElementById("b2DropDownMenuCat").classList.toggle("remove");
document.getElementById("b2DropDownMenuCha").classList.toggle("remove");
}
function DropDownMenuCategory() {
document.getElementById("b2DropDownMenuCat").classList.toggle("show");
document.getElementById("b2DropDownMenuNav").classList.toggle("remove");
}
function DropDownMenuCharts() {
document.getElementById("b2DropDownMenuCha").classList.toggle("show");
document.getElementById("b2DropDownMenuNav").classList.toggle("remove");
}
/* Dropdown Button */
.dropbtn {
background-color: #0066a2;
color: white;
padding: 1px;
font-size: 15px;
font-weight: bold;
border: none;
cursor: pointer;
}
.dropbtn a {
color: #FFFFFF;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
float: left;
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #0066a2;
min-width: 260px;
max-width: 960px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #000000;
text-decoration: none;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
<div class="dropbtn" style="float: left;">
<button onclick="DropDownMenuNavigation()" class="dropbtn">☰ MENU</button>
</div>
<div class="dropbtn" style="float: left;">
<button onclick="DropDownMenuCategory()" class="dropbtn">CATEGORIES</button>
</div>
<div class="dropbtn" style="float: left;">
<button onclick="DropDownMenuCharts()" class="dropbtn">CATEGORIES</button>
</div>
<div class="dropdown">
<div id="b2DropDownMenuCat" class="dropdown-content">
1
</div>
</div>
<div class="dropdown">
<div id="b2DropDownMenuCha" class="dropdown-content">
2
</div>
</div>
<div class="dropdown">
<div id="b2DropDownMenuNav" class="dropdown-content">
3
</div>
</div>
But, since you are new to this, it's best not to start off with bad habits, so don't use inline HTML event attributes (i.e. onclick, etc.), there are many reasons why and you can review them here.
Next, you have a lot of unneeded HTML and the structure of the HTML should be altered to represent the hierarchy of the content.
Also, you don't need separate functions for each menu click as trying to keep track of what should be hidden and what should be shown in an ever-increasing list of menu items is not a scaleable result.
When these changes are made, the HTML is much cleaner and less involved and the JavaScript is also much simpler:
// First, get references to the HTML elements your code will need.
// You could get individual references, like this:
/*
var b2DropDownMenuNav = document.getElementById("b2DropDownMenuNav");
var b2DropDownMenuCat = document.getElementById("b2DropDownMenuCat");
var b2DropDownMenuCha = document.getElementById("b2DropDownMenuCha");
*/
// But in your case, a single reference to the collection of menus will do.
// We'll also want that collection to be converted to a JavaScript array.
var menus = Array.prototype.slice.call(document.querySelectorAll(".dropbtn"));
// Now, we can just loop over the array and give the buttons a common function
// to perform when they are clicked (no need for multiple functions.
menus.forEach(function(menu){
menu.addEventListener("click", function(){
// Hide any currently showing menu content
Array.prototype.slice.call(document.querySelectorAll(".dropdown-content")).forEach(function(content){
content.classList.remove("show");
});
// Show the content of the menu that was clicked:
menu.querySelector(".dropdown-content").classList.toggle("show");
});
});
/* Dropdown Button */
.dropbtn {
background-color: #0066a2;
color: white;
padding: 1px;
font-size: 15px;
font-weight: bold;
border: none;
cursor: pointer;
float:left; /* no need to write this inline with the HTML, just put it here */
}
.dropbtn a {
color: #FFFFFF;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
/* I can't see any need for this class at all:
.dropdown {
float: left;
position: relative;
display: inline-block;
}
*/
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
background-color: #0066a2;
min-width: 260px;
max-width: 960px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
position: absolute;
/* z-index: 1; <-- NOT NEEDED */
}
/* Links inside the dropdown */
.dropdown-content a {
color: #000000;
text-decoration: none;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show { display:block; }
<!-- There is no need to nest button elements inside of div elements.
Just get rid of the buttons completely and make the divs the clickable
elements. -->
<div class="dropbtn" id="b2DropDownMenuNav">☰ MENU
<div class="dropdown dropdown-content">1</div>
</div>
<div class="dropbtn" id="b2DropDownMenuCat">CATEGORIES
<div class="dropdown dropdown-content">2</div>
</div>
<div class="dropbtn" id="b2DropDownMenuCha">CATEGORIES
<div class="dropdown dropdown-content">3</div>
</div>

How to align two span elements separately but in same line

I am working on aligning two span elements should be present in same line but have separated as shown in below. The code i am using is below.
If I do not use float:right the both texts are coming in single line with attaching one each other.
If I use float:right; they are not aligning in same line, having some misalignment between them.
with float:right; the result will be this
without float:right; the result will be this
Please give me suggestions for this
.clearSpan {
color: $alt-dark-blue;
float: right;
cursor: pointer;
clear: both;
font-size: 10px;
}
.saveSpan {
color: $alt-dark-blue;
clear : both;
cursor: pointer;
font-size: 10px;
}
<div>
<span class="saveSpan" >Save as Default Filters</span>
<span class="clearSpan" >Clear All Filters</span>
</div>

you can use flexbox for that
div {
display: flex;
justify-content: space-between;
border-bottom: 1px solid grey
}
span {
color: blue;
cursor: pointer;
font-size: 10px;
}
<div>
<span class="saveSpan">Save as Default Filters</span>
<span class="clearSpan">Clear All Filters</span>
</div>

Maybe you can do:
.clearSpan {
margin-left: 15px;
}
or
.saveSpan {
margin-right: 15px;
}
That should separate it.

You need to define a style for your span tags as,
span {
display: inline-block;
}

How to trigger mouse hover event on anchor tags of drop down list

.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #0000FF;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ff0000
}
.show {
display: block;
<div class="dropdown">
<button id="myButton" onclick="PrintHello()" class="dropbtn">click</button>
<div id="myDropdown" class="dropdown-content">
<a class="link" id="Home" href="#home">Home</a>
<a class="link" id="About1" href="#about">About</a>
<a class="link" id="Contact" href="#contact">Contact</a>
</div>
</div>
I'm trying to trigger mouse 'hover' event on one of the anchor tag when the drop down menu pop-ups,
I'm using:
$("#About1").trigger('hover');
It doesn't trigger any event. I have written some event handler for anchor tag for "hover"event. When I use:
$("#About1").trigger('mouseover');
it calls the event handler but there is no hover effect seen on the web page. I was expecting it to be hovered as same as when you physically hover the mouse on it.
Am I missing something? Is it possible to create such effects by triggering the events? Please do suggest a solution.

You can just use hover() DEMO
$('button, #myDropdown').hover(function() {
$('#myDropdown').toggleClass('show');
})
Or you can trigger custom event on when you hover (mouseenter) over element DEMO
$('#About1').mouseenter(function() {
$(this).trigger('customEvent');
});
$('#About1').on('customEvent', function() {
alert('Lorem Ipsum');
});

If you try to change styles only it's better to use selector :hover in css.
If you require anything else use hover: $('selector').hover(functionOnHover,FunctionOnHoverOut);

If you want to trigger mouse hover event on drop down items like for example "About" without physically hovering the mouse on it, you can add
$(document).ready(function(){
$("#About1").trigger('mouseenter');
});
DEMO

Replace Text with a Button

I can't seem to find the answer to this; when I google it, all I get are "replace button text".
I want to hover over some text, and have that text replaced with a button. I've tried the fadeIn/fadeOut technique and the Show/Hide technique. However, the button becomes visible, it is in a different space.
Here's my Jquery:
$(document).ready(function(){
$('#hidedsl6').hide();
$('#showdsl6').hover(function(){
$('#hidedsl6').fadeIn();
}, function(e){
e.preventDefault();
$('#hidedsl6').fadeOut();
});
$('#showfttn10').hover(function(){
});
$('#showfttn15').hover(function(){
});
$('#showfttn25').hover(function(){
});
$('#showfttn50').hover(function(){
});
});
My HTML:
<div class="DSL6">
<h3 class="DSLLocation" id="showdsl6">DSL 6</h3>
<button class="btn btntruespeed" id="hidedsl6" type="button">Order Now!</button>
</div>
My CSS:
.DSLLocation {
margin-top: 110px;
}
.DSL6 {
background-color: #dbdbdb;
width: 300px;
height: 250px;
border-style: solid;
border-width: 1px;
border-color: #D3D3D3;
float: left;
display: inline;
}
So if anyone can help me. I don't care if it's with Jquery, or just simple HTML/CSS

Are you simply trying to make some text appear as a button on hover? if so this should work nicely for you:
div {
padding: 10px;
display: inline-block;
transition: all 200ms ease
}
div:hover {
background: red
}
<div>Psuedo button</div>
Or if you want to hide the text and show the button on hover:
.container {
padding: 10px;
display: inline-block;
background: red;
}
button {
display: none;
}
.container:hover button {
display: block;
}
.container:hover .text {
display: none;
}
<div class="container">
<div class="text">Text</div>
<button>Psuedo Button</button>
</div>

You should understand that since you are replacing one element with another they might move due to the different content. Or you can style both elements the same way so that the change is not abrupt.
You could use just CSS for this
.DSL6 {
background-color: #dbdbdb;
width: 300px;
height: 250px;
border-style: solid;
border-width: 1px;
border-color: #D3D3D3;
float: left;
display: inline-block;
}
.DSL6 h3, .DSL6 button{margin:110px 0 0;padding:0;}
.DSL6 h3{display:block;}
.DSL6 button{display:none;}
.DSL6:hover h3{display:none;}
.DSL6:hover button{display:block;}
<div class="DSL6">
<h3 class="DSLLocation" id="showdsl6">DSL 6</h3>
<button class="btn btntruespeed" id="hidedsl6" type="button">Order Now!</button>
</div>