style a navigation link when a particular div is shown - javascript

I have JQuery working to show a particular div when a certain link is clicked.
I have managed to apply the effect I'm after with the main navigation bar through id'ing the body tag and using css to style when the id is found.
However, i'd like to apply the same effect to the sub navigation when a certain div is present.
How the main navigation is styled:
HTML:
<nav>
<ul>
<li id="nav-home">Home</li>
<li id="nav-showreel">Showreel</li>
<li id="nav-portfolio">Portfolio</li>
<li>Contact</li>
</ul>
</nav>
CSS:
body#home li#nav-home,
body#portfolio li#nav-portfolio
{
background: url("Images/Nav_Underline.png") no-repeat;
background-position: center bottom;
color: white;
}
(Other links havent been added to styling as those pages are still in development)
How the sub navigation is structured:
<nav id="portfolioNav">
<ul>
<li id="portfolio-compositing"><a id="compositingWork" href="#">Compositing</a></li>
<li id="portfolio-animation"><a id="animationWork" href="#">Animation</a></li>
<li id="portfolio-motionGfx"><a id="GFXWork" href="#">Motion Graphics</a></li>
<li id="portfolio-3D"><a id="3DWork" href="#">3D</a></li>
</ul>
</nav>
As you can see, its similar format to the main navigation, however i've tried the same approach and it doesn't work :(
The Javascript that switches the divs on the navigation click:
<script type="text/javascript">
$(document).ready(function() {
$('#3DWork').click(function(){
$('#portfolioWork').load('portfolioContent.html #Portfolio3D');
});
$('#GFXWork').click(function(){
$('#portfolioWork').load('portfolioContent.html #motionGraphics');
});
$('#compositingWork').click(function(){
$('#portfolioWork').load('portfolioContent.html #PortfolioCompositing');
});
$('#animationWork').click(function(){
$('#portfolioWork').load('portfolioContent.html #PortfolioAnimation');
});
});
</script>
JSFiddle for full HTML & CSS : JSFiddle File
The effect I'm After:

You can modify your script like this:
$('#compositingWork').click(function(){
$(this).addClass('active');
$('#portfolioWork').load('portfolioContent.html #PortfolioCompositing');
});
and add this to css:
.active
{
background: url("Images/Nav_Underline.png") repeat-x;
background-position: center bottom;
}
upd. but the easier way is to combine similar strings:
$(document).ready(function() {
// bind link id and id for load()
var loadDiv = {
'3DWork': 'Portfolio3D',
'GFXWork': 'motionGraphics',
'compositingWork': 'PortfolioCompositing',
'animationWork': 'PortfolioAnimation'
};
var links = $('#3DWork, #GFXWork, #compositingWork, #animationWork');
links.click(function(e) {
e.preventDefault();
// remove effect from all links
links.parent('li').removeClass('active');
// and add to clicked one
$(this).parent('li').addClass('active');
// load you contant using array of ids
$('#portfolioWork').load('portfolioContent.html #'+loadDiv[this.id]);
});
});
also I don't think you need an image for this effect. Why not using border-botom style with width and color you need?
check this example http://jsfiddle.net/vladkras/sJNMR/
(I also added "prevent default" action for your need)

Related

How to change css on click in javascript?

I am having an issue with the links in my dropdown nav menu. I believe that the issue is due to an owl carousel that is in the body, because when I inspect the nav items (right-click inspect element) the console highlights the owl-carousel, also when I change the .owl-carousel display to none in the console, then the links in the nav menu will work (color change on hover, mouse changes to pointer). Therefore, I want to change the .owl-carousel display to none when the toggle menu is active (when the burger menu is clicked).
var burgerMenu = function() {
$("body").on("click", ".js-fh5co-nav-toggle", function() {
$("#fh5co-nav > ul > li").css({ marginLeft: -50, opacity: 0 });
$(this).toggleClass("active");
var mainNav = $("#fh5co-main-nav");
mainNav.slideToggle(400).toggleClass("active");
if (mainNav.hasClass("active")) {
menuAnimate(1, 0, 400, 200);
} else {
menuAnimate(0, -50, 1, 0);
}
});
};
<!-- Mobile Toggle Menu Button -->
<i></i>
<!-- End Mobile Toggle Menu Button -->
<!-- Main Nav -->
<div id="fh5co-main-nav">
<nav id="fh5co-nav" role="navigation">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Products</li>
<li>Location</li>
<li>Cafe</li>
<li>Contact</li>
</ul>
</nav>
</div>
<!-- End Main Nav -->
I don't really have any idea how to go about this. I have tried adding:
$('.owl-carousel').css({display: none});
to the burgerMenu function, but this changed nothing.
Any ideas would be greatly appreciated.
***EDIT:
thanks! .css({"display": "none"}) - this worked, but something i didn't think of - the other pages don't have an owl-carousel and I am still having this problem. I think the best thing would be to just have the body shift down when the nav menu is clicked - is this possible? any ideas? thanks, again.
Alternatively since you don't have dynamic css, you can use another class and the class:
in your css file:
.hidden {
display: none;
}
and in you js:
$('.owl-carousel').addClass("hidden");
$('.owl-carousel').css("display", "none");
try this instead of
$('.owl-carousel').css({display: none})
You can do something like the below code.
$('#hello').click(function() {
$('#hello').css({
'background-color': 'blue',
'color': 'white',
'font-size' : '35px'
});
});
#hello{
cursor : pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="hello">hello world!</div>
Using core JS:
document.getElementById("my_custom_id").style.color="red";
In the above line of code you can set any CSS, I set the color to red for my_custom_id.

How to make navbar disappear when I click on link tag from menu

I have this navbar it works how I want it too but my main problem is I want the dropdown menu to disappear by clicking any links on the menu because I am not sure what to add to my current code to get it to behave as desired. Thanks any help would be appreciated
<nav id="navbar">
<div class="logo">
<img src="log.png">
</div>
<ul>
<li>About</li>
<li>Contact</li>
<li>Project</li>
<li>Home</li>
</ul>
</nav>
Here is my JS
It works fine I just one the additional feature that I mentioned on the title since I don't know how to do it
<script type="text/javascript">
$(window).on('scroll', function()
{
if($(window).scrollTop())
{
$('nav').addClass('black');
}
else
{
$('nav').removeClass('black');
}
}
)
$(document).ready(function() {
$(".menu").on("click", function() {
$("nav ul").toggleClass("active");
});
})
Just add the nav ul li a to your click function. Since I don't know what your markup looks like here is a quick demo:
$(".menu, nav ul li a").on("click", function(e) {
e.preventDefault();
$("nav ul").toggleClass("active");
});
ul{
display:none;
}
ul.active{
display:block;
}
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<nav>
<button class="menu">
Menu
</button>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
With jquery you can comma separate selectors. Since you already have the functionality to toggle the active class just add the nav ul li a to your existing function.
A CSS styling may be a potential solution.
all tags are displayed as blocks so in your CSS file add
.makeDisappear{
display:none
}
Although, I do recommend renaming your id for your navbar something a bit more unique.
so example jQuery would be:
$("a").on("click",function(){
document.getElementById("navbar").classList.add("makeDisappear");
//or simply $("#navbar").addClass("makeDisappear")
})
to make your nav bar reappear
change display:none to display:block

How do I simulate a multi page site using jQuery?

The site I am working on is a single page site but I want to simulate a multipage site using css/jQuery to hide/reveal the different sections of the site when the correct link is clicked in the nav.
Here is the code I am currently working with on JSFiddle.
HTML
<header id="top">
<nav>
<ul>
<li>
About
</li>
<li>
Skills
</li>
<li>
Projects
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<main role="main" id="main">
<section id="about">
</section>
<section id="skills">
</section>
<section id="projects">
</section>
<section id="contact">
</section>
</main>
CSS
.active {
background: $lightest-blue;
color: $blue;
}
.hide-section {
display: none;
}
section {
height: 1em;
background: blue;
}
JavaScript
// Create Variables pointing to all Nav links and the About section link.
var siteNav = $("#top li").children();
var aboutLink = siteNav[0];
// Create Variables poingting to all Sections and the About section.
var siteSections = $("#main").children();
var aboutSection = siteSections[0];
// Hide all major sections by adding CSS class.
siteSections.addClass("hide-section");
// Upon document being ready, make user "arrive" at the About section by removing the hide class on it.
// Add active class to About section link.
$(function() {
$(aboutLink).addClass("active");
$(aboutSection).removeClass("hide-section");
});
// 1. Capture click on Nav anchor.
$("#top a").click(function() {
// 1.1 Remove active class from all links.
siteNav.removeClass("active");
// 1.2 Add active class to clicked link.
$(this).addClass("active");
// 1.3 Identify proper section.
var hrefLink = $(this).attr("href");
// 1.4 Hide all other sections.
siteSections.addClass("hide-section");
// 1.5 Reveal proper section.
});
Right hold up, you're trying to reinvent the wheel here! :)
Have a look at the Jquery tabs library:
http://jqueryui.com/tabs/
Just copy the code into your site,
remove the style sheet link and away you go! :D
Use this javascript to toggle between screens. I added some css so you can see the different sections come and go.
$("#top a").click(function() {
// 1.1 Remove active class from all links.
siteNav.removeClass("active");
// 1.2 Add active class to clicked link.
$(this).addClass("active");
// 1.3 Identify proper section.
var hrefLink = $(this).attr("href");
// 1.4 Hide all other sections.
$('#'+siteSections[0].id).hide();
$('#'+siteSections[1].id).hide();
$('#'+siteSections[2].id).hide();
$('#'+siteSections[3].id).hide();
// 1.5 Reveal proper section.
$(hrefLink).show();
});
and some css
section{
background:red;
}
#about{
background-color:blue;
}
#skills{
background-color:yellow;
}

Using Javascript if statements with and operator and selectors to create navigation bar

i'm trying to create my own navigation bar using Javascript, this is what I have so far.
$(document).ready(function() {
<nav class="menuL">
<ul id="menu">
<li><span></span>portfolio</li>
<ul id="submenu">
<li id="first">Wine</li>
<li id="second">Landscape</li>
<li id="third">Divers</li>
</ul>
<script>
$('#submenu').hide();
</script>
<script>
if ($('#portmenu').mouseover() || $('#first').mouseover() || $('#second').mouseover() || $('#third').mouseout()) {
$('#submenu').show();
} else {
$('#submenu').hide();
}
});
</script>
The submenu is infact being hidden but when I hover over portmenu, the submenu does not appear.. any ideas on what is wrong? I'm new to javascript so I have no idea if im using the selectors, OR operators and the if statements correctly.
Basically what I'm trying to do is, if the main portmenu is hovered over or if first, second and third are being hovered over, then show the sub menu. Otherwise, hide it. I'm trying to do this because if I just create a function which shows the submenu if portmenu is being hovered over, then the moment I hover of the text 'portfolio' the submenu goes away.
You can do it CSS only:
#menu > #submenu{
display: none;
}
#menu:hover > #submenu{
display: block;
}
DEMO: http://jsfiddle.net/Wp5sF/
jsFiddle Demo
You should probably do something more along these lines by taking advantage of jQuery's hover:
$('#submenu').hide();
$('#portmenu, #first, #second, #third').hover(function(){
//in
$('#submenu').show();
},function(){
//out
$('#submenu').hide();
});
Here is my suggestion to fix your code.
(Demo here)
$(document).ready(function(){
$('#submenu').hide();
$('#menu').on('mouseover', function (){$('#submenu').show()});
$('#menu').on('mouseout', function (){$('#submenu').hide()});
});

Active link (the css?)

i've got a problem with the CSS. Normally I can get it right, but now it's just not working for me.
Got the menu-code
<nav>
<ul class="ca-menua">
<li class="home"><div class="ca-icona">O</div><span>Home</span>
</li>
<li class="info"><div class="ca-icona">e</div><span>Info</span>
</li>
<li class="komp"><div class="ca-icona">S</div><span>Kompetencer</span>
</li>
<li class="cases"><div class="ca-icona">F</div><span>Cases</span>
</li>
<li class="kontakt"><div class="ca-icona">#</div><span>Kontakt</span>
</li>
</ul>
</nav>
The i've got the javascript which add's the active class.
<script type="text/javascript">
$(document).ready(function(){
$('.home a.tooltip').addClass('active');
});
</script>
<script type="text/javascript">
$(function() {
$('a.tooltip').click(function(e) {
var $this = $(this);
$("#nav").load($this.attr('href'));
$('a.tooltip').removeClass('active');
$(this).addClass('active');
// prevent default link click
e.preventDefault();
})
});
</script>
This works fine, and adds the class, but I just can't get the CSS right!
I need some help with a prob. small problem.
The website link is: HERE
THE CSS:
a.tooltop.active{
color: #f3cb12;
font-size: 50px;
}
Just add the div part into a.tooltip.active selector so you get something like this:
a.tooltip.active div {
color: #F3CB12;
font-size: 50px;
}
I have assumed that you are trying to get the icon bigger and highlighted if the menu item is active. The problem is that it is not the anchor that should be getting new styles, but the child div element.

Categories

Resources