Give link hover same effect as href? - javascript

Is there any way to make hovering over a navigation anchor link act similarly to a href action, where hovering the link for an 'About' link (like in my site below) displays goes directly to the 'About' section of the page, and then moving the mouse away from the link goes back to the original div if the 'About' link is not clicked on?
Codepen: http://codepen.io/anon/pen/zZdzmB.
HTML:
<nav>
<ul id="menu">
<li>
<a>Menu</a>
<div id="dropdown">
<ul>
<li class="navLink active"><div class="navLine"></div>Home</li>
<li class="navLink"><div class="navLine"></div>About</li>
<li class="navLink"><div class="navLine"></div>Skills</li>
<li class="navLink"><div class="navLine"></div>Work</li>
<li class="navLink"><div class="navLine"></div>Contact</li>
</ul>
</div>
</li>
</ul>
</nav>
<main>
<section id="homeSection" class="section" data-anchor="home">
<div class="sectionContent">
<h1 id="intro">Intro text</h1>
</div>
</section>
<section id="aboutSection" class="section" data-anchor="about">
<div class="sectionContent">
</div>
</section>
<section id="skillsSection" class="section" data-anchor="skills">
<div class="sectionContent">
</div>
</section>
<section id="workSection" class="section" data-anchor="work">
<div class="sectionContent">
</div>
</section>
<section id="contactSection" class="section" data-anchor="contact">
<div class="sectionContent">
</div>
</section>
</main>

you could use jQuery
$('.navLink').hover(function(){
$(this).trigger('click');
});

You can just use the .mouseover() function.
I updated your CodePen with these change: http://codepen.io/anon/pen/vxJWVp
Here's the Jquery Mouseover function:
$( document ).ready(function() {
$('#1').mouseover();
});
$('#1').mouseover(function() {
$('#intro').html('Intro');
});
$('#2').mouseover(function() {
$('#intro').html('About Content goes here');
});
$('#3').mouseover(function() {
$('#intro').html('Skills Content goes here');
});
$('#4').mouseover(function() {
$('#intro').html('Work Content goes here');
});
$('#5').mouseover(function() {
$('#intro').html('Contact Content goes here');
});
Then just add the respective ' id = "1" '
<li class="navLink active" id="1"><a href="#homeSection">
<div class="navLine"></div>Home</a></li>

Related

Add class to a div if another div has a class

I did a lot of searching and read dozens of questions and answers on this topic and wrote the following code but it won't work for some reason. I'm looking for help troubleshooting this.
This is what I want to happen:
When the user hovers over a menu item, a dropdown appears.
Then the entire header (currently has the ID #header) gets a new class (.header-new-class)
I found that when they hover over a menu item (li), the site automatically adds the class "open" to the menu item (the menu item already has the class .menu-item)
So my logic is, when the menu item has the class "open", it adds the class "header-new-class" to the div with the ID #header
This is a very cleaned up version of the HTML:
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item open">
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
This is the code I wrote:
$(document).ready(function(jQuery) {
if ($('.menu-item').hasClass('open')) {
$('#header').addClass('header-new-class');
}
});
It's not working. What am I doing wrong?
Thanks in advance.
if you want to add a class on the header when the mouse is on the menu item, do it like this,
if you also want to remove the class then use the commented code below.
if you have questions, feel free to ask
$(document).ready(function(){
$('.menu-item').on('mouseover',function(){
/*$('.menu-item').removeClass('open');
$(this).addClass("open");*/
if($(this).hasClass('open')){
$('#header').addClass('yourNewClass');
}else{
$('#header').removeClass('yourNewClass');
}
});
/*$('.menu-item').on('mouseleave',function(){
$('.menu-item').removeClass('open');
$('#header').removeClass('yourNewClass');
});*/
});
.yourNewClass .menu-item.open {color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item open">
item 1
</li>
<li class="menu-item">
item 2
</li>
<li class="menu-item">
item 3
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
You can use same event many times. So, this is achievable with normal .hover.
$(document).ready(function(){
$('.menu-item').hover(function(){
$('#header').addClass('header-new-class');
},function(){
/* function to remove class when hovering is over */
})
If you absolutely need to check if the class open is present you can do it inside the hover function.
You can also use mouseenter and mouseleave
$(document).on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
}, ".selector");
Why you are set class for hover via jquery. CSS have functionality of :hover which give the same effect that you want.
#header:hover{
background-color : lightBlue;
}
.menu-item:hover{
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item">
Sample Link 1
</li>
<li class="menu-item">
Sample Link 2
</li>
<li class="menu-item">
Sample Link 3
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>

How to show tab with external link from other pages?

I have simple tabs on "single-page.html"...
<div class="tabs">
<div class="tab-opt">
<ul>
<li class="active">Impressum</li>
<li>Datenschutz</li>
<li>AGB</li>
<li>Credits</li>
</ul>
</div>
<div class="tabs-content">
<div id="impressum" class="tab" style="display: block;">
...
</div>
<div id="datenschutz" class="tab">
...
</div>
<div id="agb" class="tab">
...
</div>
<div id="credits" class="tab">
...
</div>
</div>
</div>
$(function () {
$(".content-tabs .tab-opt ul li a").on('click', function (e) {
$(".content-tabs .tab-opt ul li").removeClass('active');
$(this).parent().addClass('active');
$(".content-tabs .tabs-content > div").hide();
var hrefId = $(this).attr('href');
$(hrefId).fadeIn().show();
});
});
I want to put links in footer and be able to show some tab on "single-page.html" from any page.
Example:
On homepage, with link in footer:
AGB
I want to open "single-page.html" and show "AGB" tab...

# url section hide and show

Hi i have simple single page website with # sections. I am using # to hide and show sections.
For example; someurl/index.html/#sectionOne
There is div with "sectionOne" id, so i can show related section.
My question is there a way to prevent or replace "/" path character in url with # like;
someurl/index.html/sectionOne --> someurl/index.html/#sectionOne
Because it gives 404 of course.
i tried beforeunload, window on load, body on load but these didn't solve my problem.
This is simple example
$(document).ready(function() {
window.onload = function(event) {
var hash = "about";
$("section").hide();
$("#" + hash).show();
};
$(".nav").click(function() {
console.log("CLICK");
var hash = $(this).attr('href').substring(1);
console.log(hash);
$("section").hide();
$("#" + hash).show();
});
});
section {display: none;}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul>
<li><a class="nav" href="#about">ABOUT</a></li>
<li><a class="nav" href="#services">SERVICES</a></li>
<li><a class="nav" href="#contact">CONTACT</a></li>
</ul>
<section id="about">
<h1>ABOUT</h1>
<p>About section</p>
</section>
<section id="services">
<h1>SERVICES</h1>
<p>Services section</p>
</section>
<section id="contact">
<h1>CONTACT</h1>
<p>Contact section</p>
</section>
If I understand correctly, target pseudo class could be used here:
section {
display: none;
}
#about:target,
#services:target,
#contact:target {
display: block;
}
<ul>
<li><a class="nav" href="#about">ABOUT</a>
</li>
<li><a class="nav" href="#services">SERVICES</a>
</li>
<li><a class="nav" href="#contact">CONTACT</a>
</li>
</ul>
<section id="about">
<h1>ABOUT</h1>
<p>About section</p>
</section>
<section id="services">
<h1>SERVICES</h1>
<p>Services section</p>
</section>
<section id="contact">
<h1>CONTACT</h1>
<p>Contact section</p>
</section>
With regards to preventing an user from navigating away using / (let it be anything), I believe there is no easy way to accomplish from the client-side alone.
We could use window.onbeforeunload event and let a dialog-box to be displayed to keep the user in based on whether or not they want.
Another option which I see is to use React Router for client-side 404.

Un-clickable sidebar links on bootstrap

I have a sidebar on my website that contains link's to individual divs, but when I try and click on any of them they just highlight without jumping to the div.
The website in question is http://www.ico.mmu.ac.uk/13143651/dip/pages/football.html
the top nav works fine, it's just the side nav that seems to have problems.
Sidebar nav
<div class="row-offcanvas row-offcanvas-left">
<div id="sidebar" class="sidebar-offcanvas">
<div class="col-md-12">
<a class="navbar-brand" href="#intro">Football</a>
<ul class="nav nav-pills nav-stacked text-center">
<li>Men's Training</li>
<li>Women's Training</li>
<li>Section</li>
<li>Section</li>
<li>Section</li>
</div>
</div>
example div
<div class="col-md-9" id="intro">
<div class="text-center">
<p>some text </p>
</div>
</div>
Any help will be greatly appreciated. Thanks
open your smoothscroll.js in path styling/js delete all and paste this to JUMP directly
jQuery(document).ready(function(){
jQuery('a[href^="#"]').click(function(e) {
var hashtag=$(this).attr("href");
window.location=hashtag;
});
});
EDIT:
try to put this on smoothscroll.js
jQuery(document).ready(function(){
jQuery('a[href^="#"]').click(function(e) {
jQuery('#main').animate({ scrollTop: jQuery(this.hash).offset().top}, 1000);
return false;
e.preventDefault();
});
});
this is the problem: ('html,body') you want to scroll the main div

How to repeat fadeItem function?

I have side bar menu with the list of items, when it opened it shows the list of the menu with the fade effect. My question is how can I repeat the effect every time when I click "opener" by the way the fadein works for the first time only.
Here is my code for the effect...
<body>
<div id="st-container" class="st-container">
<div id="main" >
<div class="st-pusher">
<!-- nav menu start -->
<nav class="st-menu st-effect-8" id="menu-8">
<ul>
<li><a class="icon icon-data" href="profile.html"> <div class="icon-menu"><img src="img/user-demo.png" alt="user-picture"></div> Nathen Scott</a></li>
<li><a class="icon icon-data" href="index.html"> <div class="icon-menu"><img src="img/icon-library.png" alt="user-picture"></div> Library</a></li>
<li><a class="icon icon-location" href="#"><div class="icon-menu"> <img src="img/icon-bookstore.png" alt="user-picture"></div> Bookstore</a></li>
<li><a class="icon icon-study" href="#"><div class="icon-menu"> <img src="img/icon-camera.png" alt="user-picture"> </div>Text Capture</a></li>
<li><a class="icon icon-photo" href="#"> <div class="icon-menu"><img src="img/icon-setting.png" alt="user-picture"></div> Setting</a></li>
</ul>
</nav>
<div class="st-content"><!-- this is the wrapper for the content -->
<div id="main"><!-- extra div for emulating position:fixed of the menu -->
<div id="st-trigger-effects" class="tab_bar_index">
<button data-effect="st-effect-8" class="opner"><img src="img/icon-menu.png" alt="icon"></button>
<button class="table_content"><img src="img/icon_setting_small.png" alt="icon"></button>
<div id="titlebar">
<img src="img/logo_text.png" alt-"logo">
<span >Library</span>
</div>
</div>
</div>
</div>
</div>
</div><!-- /main -->
</div>
<!-- fade effect for the nav menu -->
<script type="text/javascript">
function fadeItem() {
$('ul li:hidden:first').stop().hide().delay(50).fadeIn();
$(".st-menu ul li ") .addClass("animate");
}
$('.opner').click(fadeItem);
$('li').hide();
</script>
</body>
Initially hide all the items on click and than use .each to loop through and apply the delay and fade in effect.
function fadeItem() {
// hide menu items
$('.st-menu ul li')stop().hide();
// go through and set each element to fade in
$('.st-menu ul li:hidden').each(function (index, elem) {
$(elem).delay((index + 1) * 50).fadeIn();
});
$(".st-menu ul li").addClass("animate");
}
$('.opner').click(fadeItem);
$('li').hide();

Categories

Resources