All of a sudden I have unintentionally been causing a piece of code to no longer work. I am using the below in order to show and simultaneously hide content within the same website file:
<script type="text/javascript">
$('.tabs').on('click', 'a', function(){
$('section').hide();
$($(this).attr('data-url')).show();
var $this = $(this),
$ul = $this.parents('ul');
$ul.find('a').removeClass('active');
$this.addClass('active');
});
</script>
Below is the html-code that is being displayed and hidden:
<ul class="tabs">
<li><a class="active" href="javascript:void(0);" data-url="#content1">Content1</a></li>
<li>Content2</li>
<li>Content3</li>
</ul>
<section id="content1">
Some content 1
</section>
<section id="content2">
Some content 2
</section>
<section id="content3">
Some content 3
</section>
Below is the CSS code:
section {
display: none;
}
section:first-of-type {
display: block;
}
ul.tabs {
list-style: none;
text-align: center;
}
ul.tabs li {
display: inline-block;
}
ul.tabs li a {
display: inline-block;
width: 100px;
margin-right: 25px;
margin-bottom: 25px;
padding: 5px 5px 5px 5px;
background-color: #ffffff;
border: 1px;
border-style: solid;
border-color: #000000;
text-align: center;
text-decoration: none;
color: #000000;
}
ul.tabs li a:hover {
color: #349cf0;
}
ul.tabs li a.active {
color: #349cf0;
}
I have no idea why this suddenly stopped working. Now I have not included all the stuff thats on the website. Can anyone of you perhaps explain to me what could possibly be interfering with the code? Maybe I accidentally changed something in the js. I received the code from someone else and am not able to spot any errors myself. I would very much appreciate if anyone here will be able to spot any errors!
Thanks in advance
Looks like it is working: http://jsfiddle.net/L0Lnav2t/1/
<script type="text/javascript">
$('.tabs').on('click', 'a', function(){
$('section').hide();
$($(this).attr('data-url')).show();
var $this = $(this),
$ul = $this.parents('ul');
$ul.find('a').removeClass('active');
$this.addClass('active');
});
</script>
I assume your code causes another error before the onclick listener is initialized, rendering it dysfunctional.
On its own it seems to be fine though
Related
So, on my website's home page I have a list of services. The idea is that when you click on one of them, a description appears alongside it relating to that service. However, clicking on said buttons doesn't do anything and I'm not entirely sure why. This JS function is the same as what I'm using for my menu button, which performs perfectly.
I'm no professional with code and would still describe myself as a beginner so any help on the matter is very much appreciated!
$(document).ready(function() {
$('.video-btn').click(function() {
$('description-video').toggleClass('active');
})
$('.animation-btn').click(function() {
$('description-animation').toggleClass('active');
})
})
.description {
width: 600px;
font-size: 1.4em;
line-height: 1.2em;
font-weight: 400;
color: #f4f4f4;
padding-left: 1em;
border-left: 4px solid #e0bd8c;
}
#description-video,
#description-animation {
display: none;
}
#description-video.active,
#description-animation.active {
display: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="service-list">
<li id="video-btn">Video</li>
<li id="animation-btn">Animation</li>
</ul>
<p class="description" id="description-video">
Text goes here...
</p>
<p class="description" id="description-animation">
Text goes here...
</p>
2 things :
In clicks identifiers they are classes, but you defined it as ids in your html
$('#video-btn').click(function() {
$('#animation-btn').click(function() {
Your forgot the prefix on toggleClass identifiers
$('#description-video').toggleClass('active');
$('#description-animation').toggleClass('active');
.video-btn is a class. You have IDs
You have links but your event handler is on the LI
missing # on the selector
You need to delegate and use data-attributes
$(function() {
$('.service-list').on("click",'.btn a', function() {
$("#"+this.dataset.desc).toggleClass('active');
});
});
.description {
width: 600px;
font-size: 1.4em;
line-height: 1.2em;
font-weight: 400;
color: #f4f4f4;
padding-left: 1em;
border-left: 4px solid #e0bd8c;
}
#description-video,
#description-animation {
display: none;
}
#description-video.active,
#description-animation.active {
display: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="service-list">
<li class="btn">Video</li>
<li class="btn">Animation</li>
</ul>
<p class="description" id="description-video">
Text goes here...
</p>
<p class="description" id="description-animation">
Text goes here...
</p>
I have a page with an initial description, followed by 2 buttons, where the user can choose typeA or typeB. They work by "target": when the user clicks typeA comes the content relative to typeA, bellow the buttons; same to typeB.
typeA is the most common selection, then, when the page loads, a javascript emulates the click to typeA and opens respective content. To avoid hidden the initial description, there is another javascript to put the page at the top. Worked on Chrome and Edge, not on Firefox.
I would like to repeat the same process when the user clicks: opens the respective content, but positioning the page at the top, or, at least, showing the buttons. I thought event onClick calling the same js backToTop would worked - but not.
I put an alert on js and enters there but not execute: always keeps the content of the button selected in its better visibility.
I tried:
window.location.href = '#top';
window.scrollBy(0, -500);
document.html.scrollTop = document.documentElement.scrollTop = 0;
without success.
What am I doing wrong?
<head>
<meta charset="UTF-8">
<title>TOP PAGE TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body,html {margin-left:auto; margin-right:auto;width:70%; font-family:verdana; font-size:1.2em;}
.menuFAQ {background:#aaa; font-size:2em; width:100%;}
.menuFAQ ul {list-style-type:none; position:relative; margin-left:-40px; /* to avoid user agent chrome */}
.menuFAQ li {display:inline-block; margin-top:10px; margin-bottom:10px; width:49%; background:#fff; text-align:center; box-shadow:2px 3px 4px 0px rgba(170,170,170,1); font-weight:400; line-height:80px;}
.menuFAQ li a {display:block; color:#020062; background:#fff; font-weight:400; text-decoration:none;}
.menuFAQ li .active,.menuFAQ li:hover a {color:#fff; font-weight:400; background-image:linear-gradient(#165686, #0f3a5a); }
:target {color:#fff;font-size:1em;}
div.items>div:not(:target) {display:none}
div.items>div:target {display:block; margin-left:auto; margin-right:auto; color:#000; border:1px solid #aaa;}
</style>
</head>
<body>
<div id="top">Top Page</div>
<br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5
<div class="menuFAQ">
<ul>
<li><a id="preferedFAQ" onclick="backToTop()" class="target" href="#typeA">TypeA</a></li>
<li><a onclick="backToTop()" class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p><p>text2B</p><p>text3B</p>
<br>[...]
</nav>
</div>
</div>
<script>
const allTargetLinks = document.querySelectorAll('.target')
allTargetLinks.forEach(targetLink => {
targetLink.addEventListener('click', () => {
allTargetLinks.forEach(targetLink => {
targetLink.classList.remove('active')
})
targetLink.classList.add('active')
})
})
window.onload = function() {assignPreferedFAQ()};
function assignPreferedFAQ() {
document.getElementById("preferedFAQ").click();
backToTop();
};
function backToTop() {
//document.html.scrollTop = document.documentElement.scrollTop = 0;
//document.body.scrollTop = document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
};
</script>
You had a real mess there regarding how you process click events and href attribute, i.e:
You had onclick attribute on your links, and you were adding yet another listener to them in JS
You didn't event.preventDefault() in your function, and default browser behavior when you click on a link is to get you to its href path
I've cleaned up a bit and changed some things. Since we need to prevent default behavior :target selector will no longer work, so instead I did what you've already been doing with links, and added an active class to your content. clickHandler() will now remove and add class active as necessary. At the end just scroll to the top. Here's the snippet:
document.querySelectorAll('.target').forEach(targetLink => targetLink.addEventListener('click', clickHandler, false));
function clickHandler(ev) {
ev.preventDefault(); // prevent browser from automatically scrolling to href pos
if (!ev.currentTarget.classList.contains('active')) {
// disable active elements
document.querySelector('.target.active').classList.remove('active');
document.querySelector('.items div.active').classList.remove('active');
// add class to the clicked on button and its corresponding content tab
ev.currentTarget.classList.add('active');
// to prevent pointless string slicing below, you'd have to store ids somewhere else i.e in the data-id attribute
const id = ev.currentTarget.href.slice(ev.currentTarget.href.lastIndexOf('#') + 1);
document.getElementById(id).classList.add('active');
}
window.scrollTo(0,0);
}
* {
font-family: verdana;
font-size: 1em;
}
.menuFAQ {
background: #aaa;
font-size: 2em;
width: 100%;
}
.menuFAQ ul {
list-style-type: none;
text-align: center;
padding: 0;
/* to avoid user agent chrome */
}
.menuFAQ li {
display: inline-block;
width: 48%;
margin-top: 10px;
margin-bottom: 10px;
background: #fff;
text-align: center;
box-shadow: 2px 3px 4px 0px rgba(170, 170, 170, 1);
font-weight: 400;
line-height: 80px;
}
.menuFAQ li a {
display: block;
color: #020062;
background: #fff;
font-weight: 400;
text-decoration: none;
}
.menuFAQ li .active,
.menuFAQ li:hover a {
color: #fff;
font-weight: 400;
background-image: linear-gradient(#165686, #0f3a5a);
}
div.items>div {
display: none;
}
div.items>div.active {
display: block;
margin-left: auto;
margin-right: auto;
color: #000;
border: 1px solid #aaa;
}
<div id="top">Top Page</div>
<br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5
<div class="menuFAQ">
<ul>
<li><a class="target active" href="#typeA">TypeA</a></li>
<li><a class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div class="active" id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p>
<p>text2B</p>
<p>text3B</p>
<br>[...]
</nav>
</div>
</div>
Note that instead of artificially clicking at the page load, now your content just loads with class active.
Hope this help you.
< script >
window.onload = function() {
document.getElementById("preferedFAQ").click();
backToTop();
};
function backToTop() {
document.documentElement.scrollTop = document.body.scrollTop = 0;
//alert("enter backToTop");
var elmnt = document.getElementById("top");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
}; <
/script>
body,
html {
margin-left: auto;
margin-right: auto;
width: 70%;
font-family: verdana;
font-size: 1.2em;
}
.menuFAQ {
background: #aaa;
font-size: 2em;
width: 100%;
}
.menuFAQ ul {
list-style-type: none;
position: relative;
margin-left: -40px;
/* to avoid user agent chrome */
}
.menuFAQ li {
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
width: 49%;
background: #fff;
text-align: center;
box-shadow: 2px 3px 4px 0px rgba(170, 170, 170, 1);
font-weight: 400;
line-height: 80px;
}
.menuFAQ li a {
display: block;
color: #020062;
background: #fff;
font-weight: 400;
text-decoration: none;
}
.menuFAQ li .active,
.menuFAQ li:hover a {
color: #fff;
font-weight: 400;
background-image: linear-gradient(#165686, #0f3a5a);
}
:target {
color: #fff;
font-size: 1em;
}
div.items>div:not(:target) {
display: none
}
div.items>div:target {
display: block;
margin-left: auto;
margin-right: auto;
color: #000;
border: 1px solid #aaa;
}
<div id="top">Top Page</div> <br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5<br>textExp6<br>textExp7<br>textExp8<br>textExp9<br>textExpA<br>textExpB<br>textExpC<br>textExpD
<br>textExpE
<div class="menuFAQ">
<ul>
<li><a id="preferedFAQ" onclick="backToTop()" class="target" href="#typeA">TypeA</a></li>
<li><a onclick="backToTop()" class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p>
<p>text2B</p>
<p>text3B</p>
<br>[...]
</nav>
</div>
</di
This question already has answers here:
Highlight current page in jquery
(3 answers)
Closed 7 years ago.
Hi I'm trying to make the link of the current page the user is on styled differently to the other links in the navigation bar.
<script src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$('.Global_Nav li').each(function() {
var href = $(this).find('a').attr('href');
if ($(this).attr('href') === window.location.pathname) {
$(this).addClass('current');
}
});
});
})
</script>
This is the jquery i've found which seems to be the code that makes the most sense for what i'm trying to achieve.
.Global_Nav li{
display: inline-block;
text-align: center;
height: 35px;
padding-right: 14px;
padding-left: 14px;
list-style: none;
border-left: 1px solid white;
line-height: 35px;
font-size: 22px;
color: white;
}
.Global_Nav li.current{
display: inline-block;
text-align: center;
height: 35px;
padding-right: 14px;
padding-left: 14px;
list-style: none;
border-left: 1px solid white;
line-height: 35px;
font-size: 22px;
color: #B8B8C7;
text-decoration: underline;
}
The CSS above is what the links should be styled like beforehand and when it's the current page. Below is the HTML of the Navigation bar.
<nav class="Global_Nav">
<ul id="Global_links">
<li>Home</li>
<li>News</li>
<li>Multimedia</li>
<li>Social</li>
</ul>
</nav>
Thanks in advance for your help.
use location.href.
This post url using window.location.pathname : "/questions/28988304/jquery-current-page-link-styling"
This post url using location.href : "Jquery current page link styling"
Use window.location.href instead of window.location.pathname:
if ( $(this).attr('href') == window.location.href ) {
$(this).addClass('current');
}
I am currently developing an ASP.NET webpage and I have run into the most irritating problem I have ever encountered.
I have been researching this problem for the past three days, and cannot find anybody who has even had this problem, let alone any solutions.
I have created a menu/submenu with HTML/CSS, and I am adding some kind of toggling effect to the submenu to make it either slide down or fade in (I've tried both, and both yield the same result).
In Internet Explorer, it works great. I can hover over the menu, it'll slide down or fade in correctly, then when I move the mouse away it'll disappear.
In Chrome/Firefox, I'm not so lucky. The submenu starts out hidden, then if I hover over it once, it will appear. If I move the mouse away, it instantly closes and then re-opens on its own. At this point, it's beyond return. If I hover over it, it disappears, and if I move the mouse away again, it'll re-appear. This will continue to happen until the page reloads.
Here is the menu in HTML...
<ul id="menu">
<li>Home</li>
<li>Services
<ul id="submenu">
<li>Custom CRM</li>
<li>Website Development</li>
</ul>
</li>
<li>About</li>
<li>Contact Us</li>
</ul>
As for the CSS pertaining to this menu, this is it...
#menu
{
padding:0;
text-align: center;
margin: 0;
width: 100%;
}
#menu li
{
height: 35px;
float: left;
list-style: none;
width: 25%;
font-size: larger;
cursor: pointer;
position: relative;
}
#menu li a
{
display: block;
height: 35px;
text-decoration: none;
color: White;
font-weight: bold;
padding-top: 5px;
}
#menu li:hover
{
background-color: #4CC417;
}
#menu li:hover ul
{
display: block;
}
#menu ul
{
margin: 0;
padding: 0;
position: absolute;
z-index: 999;
top: 36px;
width: 140%;
display: none;
list-style: none;
left: 0;
}
#menu ul li
{
text-align: left;
font-size: medium;
width: auto;
float: none;
background-color: #387C44;
color: White;
font-weight: bold;
padding-left: 5px;
}
#submenu ul
{
display: none;
z-index: 999;
}
#submenu
{
display: none;
}
And finally, here is the JQuery code I created for this...
<script type="text/javascript">
$(document).ready(function () {
$("#menu ul").parent().hover(function () {
$("#submenu").stop(true, true).fadeToggle("slow");
});
});
</script>
Any help is greatly appreciated. Thank you!
--Mark
http://jsfiddle.net/9LEMZ/3/
Is this what your after? (If not please feel free to direct me further!)
I've changed the jquery completely to fade in the sub elements, initially hiding the submenu. Also removed the display:none from the css to aid in this (as its now hidden through .hide() )
Cheers,
Primarily, hover accepts two function parameters (one for mouseover and one for mouseout). Second, I'm going to recommend using on:
$('#menu > li').on({
mouseover: function() {
$(this).children('ul').slideDown(300);
},
mouseout: function() {
$(this).children('ul').stop(true, false).hide();
}
});
Through jQuery's checks and balances, it will return if the li has no child ul.
I followed a great example of how to make a sub-menu appear/disappear on click here and made it work. Quite an accomplishment since I'm just starting with javascript. But just as I made it work a few other problems came up, I'll try to explain:
1.- I have a vertical main menu and one of the options, 'Products' has a sub-category that opens on hover below the parent item. When selecting one of its sub-categories, a bigger menu shows up in a new div to the right of the main menu. When this happens, the selected sub-category changes color and displays a bullet so the user knows which sub-category they are viewing. I was doing this using PHP to detect the current page and assign an "active" id. But when I had it like that the sub-menu show/hide didn't work and all the options were showing when first entering the page. So I changed the link reference from "page.php" to "#" ---which makes more sense since that option is not meant to be a link rather than just display another sub-menu but had to include it for the sake of displaying the 'active' id--- and now the show/hide works except after I click a sub-category, the menu to the right opens, but the previously selected sub-category that opens on hover closes and the php detect function doesn't work because I changed the reference to "#" and the link doesn't show an 'active' status; in fact, the 'home' option stays selected even when the second div is already showing.
It sounds confusing, I know. Here's the example, I hope it's clear what I'm trying to do. I'd appreciate if anyone knows a way around this.
2.- Once I can get this fixed, is there a way to make the second div slide from left to right instead of fading in?
Thanks in advance :)
See my update to your code.. http://jsfiddle.net/Jaybles/tkVfX/4/
CSS
.mainNav {
float: left;
width: 200px;
height: 100%;
min-width: 150px;
background-color: #e21a22;
}
.active{
font-weight:bold;
}
.mainSide {
font-size: 14px;
list-style: none;
font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
padding-top: 40px;
width: 143px;
margin-right: auto;
margin-left: auto;
}
.mainSide li a, .mainSide li {
color: #fff;
width: 143px;
display: block;
padding: 2px 0 2px 0;
text-decoration: none;
}
.mainSide ul li a {
width: 125px;
list-style: none;
padding: 6px 0 2px 18px;
}
.mainSide li a:hover {
color: #fdb046;
}
.mainSide li a#active, .mainSide ul li a#active {
color: #fdb046;
background: url("../img/bullet.jpg") right center no-repeat;
}
#subNavSys, #subNavApp, #subNavAcc {
float: left;
width: 200px;
height: 100%;
min-width: 150px;
background-color: #414143;
display:none;
}
#subSideSys, #subSideApp, #subSideAcc {
font-size: 14px;
list-style: none;
font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
padding-top: 163px;
width: 143px;
margin-right: auto;
margin-left: auto;
}
#subSideSys li a, #subSideSys li, #subSideApp li a, #subSideApp li, #subSideAcc li a, #subSideAcc li {
color: #fff;
width: 143px;
display: block;
padding: 2px 0 2px 0;
text-decoration: none;
}
#subSideSys li a:hover, #subSideApp li a:hover, #subSideAcc li a:hover {
color: #fdb046;
HTML
<div class="mainNav">
<img id="top" src="img/metal.jpg" width="143" height="43" alt="Index" />
<ul class="mainSide">
<li>Home</li>
<li>About us</li>
<li>Products
<ul>
<li>By system</li>
<li>By application</li>
<li>Accesories</li>
</ul>
</li>
</ul>
</div>
<div id="subNavSys">
<ul id="subSideSys">
<li>Sub-menu-1.1</li>
<li>Sub-menu-1.2</li>
<li>Sub-menu-1.3</li>
</ul>
</div>
<div id="subNavApp">
<ul id="subSideApp">
<li>Sub-menu-2.1</li>
<li>Sub-menu-2.2</li>
<li>Sub-menu-2.3</li>
</ul>
</div>
<div id="subNavAcc">
<ul id="subSideAcc">
<li>Sub-menu-3.1</li>
<li>Sub-menu-3.2</li>
<li>Sub-menu-3.3</li>
</ul>
</div>
JS
$(document).ready(function(){
$("#sys").click(function() {
$("#subNavApp").hide();
$("#subNavAcc").hide();
$("#subNavSys").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
$("#app").click(function() {
$("#subNavSys").hide();
$("#subNavAcc").hide();
$("#subNavApp").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
$("#acc").click(function() {
$("#subNavSys").hide();
$("#subNavApp").hide();
$("#subNavAcc").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
});