I have created boxes of different colors. When the user clicks on one of the box, the background color changes.
I found a code to do this and everything works fine.
But now the menu links no longer work.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="color-boxes">
<div data-color="#000000" class="Black"></div>
<div data-color="#7E392F" class="BurntHenna"></div>
<div data-color="#AE856C" class="TawnyBirch"></div>
<div data-color="#DAB58F" class="Sheepskin"></div>
</div>
<script>
$(document).ready(function(){
$("div").click(function(){
var Color = $(this).attr("data-color");
$("body").css("background", Color);
return false;
});
});
</script>
my navbar:
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">
<img src="media/logo-bressana.png" width="250px" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="bio.html">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="press.html">Press</a>
</li>
</ul>
</div>
</nav>
Related
My dropdown is working as in desktop and in movile version and ipad plus it toggle and collapse.
The issues is when i press it it only show the button but it doenst shwo the dropdown list after it is ipad version even i added javascrip jquery and css.
This is my code:
<script type="text/javascript">
$(document).ready(function() {
$('dropdown-toggle').dropdown()
});
</script>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">APIzoid</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data- target="#navbarToggleButton" aria-controls="navbarToggleButton" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerButton">
<ul class="navbar-nav ms-auto me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Fitness</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="jquery/jquery.js"></script>
<script type="text/javascript" src="./javascript/script.js"></script>
I would prefer a strictly JavaScript way of doing this if possible. Not really wanting to introduce a JavaScript framework into my project.
Layout:
./index.html
./about.html
./crew.html
./flights.html
./events.html
I want every page to have the same navbar such that I don't have to repeat myself and fix every page every time the order of the links change.
Here's my example navbar:
<nav class="navbar navbar-expand-xl navbar-light">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-expanded="true" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse show" id="toggleMobileMenu">
<ul class="navbar-nav mx-auto">
<li class="nav-item text-center">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="crew.html">Crew</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="flights.html">Flights</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="events.html">Events</a>
</li>
</ul>
</div>
</nav>
Depending on what kind of browser support you need you could use a template literal (back ticks) to define your navigation. Then use insertAdjacentHTML to place it where you need it on all your html pages. If your page is fairly simple you could just insert the nav after begin on the body tag.
const navigation = `
<nav class="navbar navbar-expand-xl navbar-light">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#toggleMobileMenu"
aria-controls="toggleMobileMenu"
aria-expanded="true"
aria-label="Toggle Navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse show" id="toggleMobileMenu">
<ul class="navbar-nav mx-auto">
<li class="nav-item text-center">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="crew.html">Crew</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="flights.html">Flights</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="events.html">Events</a>
</li>
</ul>
</div>
</nav>
`
document.getElementById("nav-container").insertAdjacentHTML('afterbegin', navigation);
<div id="nav-container"></div>
I have a implemented boostrap 4 navbar, and have a function that creates links.
It works and is there any efficient method to do in javascript.
I have three function that creates link for each hyperlinks .
Is it possible to do using cookie or any other efficient method using javascript
<script>
function setAboutLink(lang){
var url = lang+"/aboutus"; // will be xyz.com/en/aboutus
window.location.href= url;
}
function setContactLink(lang){
var url = lang+"/contact"; // will be xyz.com/en/contact
window.location.href= url;
}
function setListLink(lang){
var url = lang+"/list"; // will be xyz.com/en/list
window.location.href= url;
}
</script>
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top pb-0">
<a class="navbar-brand" href="/"+selectedLanguageName><img src="/images/logo.png" alt="" class="logoC mr-4"
style="max-width: 100px"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:" onclick="setAboutLink(window.location.href)"
>About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:" onclick="setContactLink(window.location.href)"
>Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:" onclick="setListLink(window.location.href)"
>List</a>
</li>
</ul>
</div>
</nav>
I don't know why cookie comes into the picture, you just need to need efficient method here, You can write a generic function for that, In the whole entire website you may use it.
function redirection(slang){
window.location.href = window.location.href + '/' + slang
}
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top pb-0">
<a class="navbar-brand" href="/"+selectedLanguageName><img src="/images/logo.png" alt="" class="logoC mr-4"
style="max-width: 100px"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="JavaScript:Void(0)" onclick="redirection('aboutus')" >About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="JavaScript:Void(0)" onclick="redirection('contact')"
>Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="JavaScript:Void(0)" onclick="redirection('list')"
>List</a>
</li>
</ul>
</div>
</nav>
<script>
var lang = 'en'; // default is en
if (localStorage.getItem('lang') === null){
localStorage.setItem('lang', 'ch'); // tou can have any condition for lang and set it here
} else {
localStorage.getItem('lang')
}
function setLink(path){
// if lang var is there in localStorage lang var is ch otherwise en
var url = window.location.origin + '/' + lang + '/' + path
window.location.href= url;
}
</script>
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top pb-0">
<a class="navbar-brand" href="/"+selectedLanguageName><img src="/images/logo.png" alt="" class="logoC mr-4"
style="max-width: 100px"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:" onclick="setAboutLink('aboutus')"
>About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:" onclick="setLink('contactus')"
>Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:" onclick="setLink('list')"
>List</a>
</li>
</ul>
</div>
</nav>
I write localStorage in first of your script. If localStorage lang var not exist, you set localStorage lang var with ch, otherwise for first time you set it for user in localStorage.
If localStorage not exist, default lang is en.
I have a main menu on my site using Bootstrap 4's navbar.
I also have another div (.social-navbar) with some additional menu items that I would like to MOVE from where they are and place INTO the Bootstrap menu on mobiles only. Basically when the menu collapses on mobile, I want the social-navbar items (facebook/twitter icons) and the LOGIN button to appear inside the navbar-nav menu from Bootstrap.
See Codepen Below...
https://codepen.io/anon/pen/KeXZJL
<div class="social-navbar clearfix">
<ul class="social-icons">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
</ul>
<ul class="login float-right">
<li class="join">Join Now</li>
</ul>
</div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMain">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Item 4</a>
</li>
</ul>
</div>
</nav>
https://codepen.io/anon/pen/KeXZJL
Is this possible?
You can add this javascript at the very end of the BODY tag:
<script>
var x = window.matchMedia("(max-width: 465px)")
function mobileMenu(x) {
if (x.matches) {
document.getElementById("navbarMain").prepend(
document.querySelector(".social-navbar")
);
document.querySelector(".social-navbar").style.backgroundColor = "inherit";
} else{
document.querySelector("body").prepend(
document.querySelector(".social-navbar")
);
document.querySelector(".social-navbar").style.backgroundColor = "#000";
}
}
mobileMenu(x)
x.addListener(mobileMenu)
</script>
When the screen width is 465px or narrower .social-navbar will be moved into the navbar collapsed menu and its backgroundColor changes to match the collapsed menu.
This is my navbar code and i am using bootstrap 4. Any solution with either javascript or jquery will be useful. I want my navbar to expant on hovering hamburger icon.
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agency</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Careers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact US</a>
</li>
</ul>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
$(document).ready(function() {
$('.navbar-toggler').mouseover(function() {
if($('.collapse').css('display') == 'none')
$('.collapse').show();
else
$('.collapse').hide();
})
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agency</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Careers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact US</a>
</li>
</ul>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
Thats how i will do it
$('.navbar-toggler').on('mouseenter', function(){
$('.collapse').addClass('show');
});
$('.pos-f-t').on('mouseleave', function(){
$('.collapse').removeClass('show');
});
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agency</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Careers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact US</a>
</li>
</ul>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
I think it's better using ids to show and hide the nav:
$('.navbar-toggler').mouseenter(function()
{
$('#navbarToggleExternalContent').css("display")!="block"?
$('#navbarToggleExternalContent').show():
$('#navbarToggleExternalContent').hide()
});