I am currently working on a website. The header is loaded into the main 'search' page using the .load() function from JQuery. However, when I try to iterate through the [href]'s in the page, it cannot find them because the loaded header links haven't been added to the DOM yet (presumably).
function getCurrentPage(){
var count = 0;
$(".navLinks").each(function() {
count+=1
console.log('this.href' + this.href)
console.log('windowloc' + window.location.href)
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
console.log('# of hrefs' + count)
}
This is a function I wrote to add a css class to the current page, but this loop wont work since it cannot find those on the DOM (the .navLinks class is added to all links thats from the loaded header.html file). Thanks for the help!
<header>
<nav class="top-bar nav-desktop">
<div class="wrap">
<div class="top-bar-left">
<div class="logo">
<img class="logo-image" src="repairrepo_logo-02.png" width="250" height="184"></img>
<p class="site-logo">DNA Damage and Repair Database</p>
</div>
</div>
<div class="top-bar-right">
<ul class="menu menu-desktop">
<li><a href="index.html" class = 'navLinks'>HOME </a></li>
<li>
<div class="dropdown">
<button class="dropbtn">BROWSE
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#" class = 'navLinks'>HUMAN </a>
<a href="#" class = 'navLinks'>MOUSE</a>
<a href="#" class = 'navLinks'>ARABIDOPSIS</a>
<a href="#" class = 'navLinks'>PLANT</a>
</div>
</div>
</li>
<li><a href="search.html" class = 'navLinks'>SEARCH</a></li>
<li><a href="download.html" class = 'navLinks'>DOWNLOAD</a></li>
<li><a href="help.html" class = 'navLinks'>HELP</a></li>
</ul>
</div>
</div>
</nav>
Here's the 'header.html' file that is added and appended to a div with id 'header' on the main search page.
you guessed it right,
it cannot find them because the loaded header links haven't been added to the DOM yet
.load() is asynchronous and has a callback that executes when it's done, that's where you should call your function :
$('#someDiv').load('someHtml.html', getCurrentPage);
note that you have to passe the function by reference ( wihtout () ) otherwise it will be executed before the load() is done.
Related
i using this code, here:
http://jsfiddle.net/wyEq7/
But i want to copy those two buttons under the divs BUT i don't know how to change code to achieve this:
when i click on button a -> button is active, when i click on button b -> button b is active
i want my copied buttons under div to be active aswell :)
When i click upper button b and it shows on red i want the same on down button b and same thing with button a (no matter if i click upper or down button) :)
Maybe you will understand my vision and can help me, i hope so - thanks :D
You can do this by adding a new CSS class to the buttons. The "A" buttons need the same class and the "B" buttons need the same class. In your javascript you can switch which classes are active based on the class the current target has.
// set content on click
$('.button').click(function(e) {
e.preventDefault();
setContent($(this));
});
// set content on load
$('.button.active').length && setContent($('.button.active'));
function setContent($el) {
$('.button').removeClass('active');
$('.container').hide();
if ($el.hasClass('a-button')){
$('.a-button').addClass('active');
} else {
$('.b-button').addClass('active');
}
$($el.data('rel')).show();
}
.container {
display: none;
}
.button.active {
color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flr-wrap">
<ul>
<li><a class="button active a-button" data-rel="#content-a" href="#">a button</a></li>
<li><a class="button b-button" data-rel="#content-b" href="#">b button</a></li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">
AAA
</div>
<div class="container" id="content-b">
BBB
</div>
</div>
<ul>
<li><a class="button active a-button" data-rel="#content-a" href="#">a button</a></li>
<li><a class="button b-button" data-rel="#content-b" href="#">b button</a></li>
</ul>
</div>
This can be done by adding another data attribute.
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" data-group="a" href="#">a button</a></li>
<li><a class="button" data-rel="#content-b" data-group="b" href="#">b button</a></li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">
AAA
</div>
<div class="container" id="content-b">
BBB
</div>
</div>
<ul>
<li><a class="button active" data-rel="#content-a" data-group="a" href="#">a button</a></li>
<li><a class="button" data-rel="#content-b" data-group="b" href="#">b button</a></li>
</ul>
</div>
// set content on click
$('.button').click(function(e) {
e.preventDefault();
setContent($(this));
});
// set content on load
$('.button.active').length && setContent($('.button.active'));
function setContent($el) {
$('.button').removeClass('active');
$('.container').hide();
$el.addClass('active');
$('a[data-group="' + $el.data('group') + '"]').addClass('active');
$($el.data('rel')).show();
}
Note: You could remove the data-rel attribute and use the one data attribute to dictate everything.
I'm struggling with a very simple problem that I can't solve.
I'm using Framework7 (JS Framework for mobile application) and I have two list in my page:
First list:
<ul>
<li>
<a id="android" class="link external" target="_blank" href="android_link"></a>
</li>
<li>
<a id="iOS" class="link external" target="_blank" href="ios_link"></a>
</li>
<li>
<a id="windows" class="link external" target="_blank" href="windows_link"></a>
</li>
</ul>
Second list:
<ul>
<li>
<a href="fb_link" target="_blank" class="item-link item-content link external" id="facebook">
<div class="item-media">
<i class="f7-icons">logo_facebook</i>
</div>
<div class="item-inner">
<div class="item-title">Facebook</div>
</div>
</a>
</li>
<li>
<a href=instagram_link" target="_blank" class="item-link item-content link external" id="instagram">
<div class="item-media">
<i class="f7-icons">logo_instagram</i>
</div>
<div class="item-inner">
<div class="item-title">Instagram</div>
</div>
</a>
</li>
</ul>
So, I need to take the href attribute on click event. I wrote this:
Dom7('.link.external').on('click', (event) => {
// First try
href = event.target.getAttribute('href')
console.log(href)
// Second trye
console.log(event.srcElement.href)
// Third try
var href = Dom7('a.link.external').attr('href');
var id = Dom7('a.link.external').attr('id');
console.log(href)
console.log(id)
})
I've tried three different solutions, but none of them work.
The first one and second one works only for the first list, I think because the <a> tag doesn't contains html inside.
The third one always return me the href and id of the first elements of the first list (android), even if I click in the second list.
Can you help me to solve this problem?
Solution 1
<ul>
<li>
<a id="android" class="link external" target="_blank" href="android_link" onclick="linkClicked(this); return false;"></a>
</li>
</ul>
<script>
function linkClicked(object) {
consile.log(object.getAttribute("href"));
return false;
}
</script>
Solution 2
var elements = document.getElementsByClassName('link');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', linkClicked, false);
}
function linkClicked() {
console.log(this.getAttribute("href"));
};
if you can use jquery, use this working code :
$('.link.external').on('click', (event) => {
href = event.target.getAttribute('href');
alert(href);
});
jsfiddle
I want to display NEWS headines on my website. I want to populate it using Jquery. I have written the code but nothing is displayed on webpage.
HTML code:
<div class="col-md-4">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<strong>Latest Headines</strong>
<li>
<a href="" class="title">
<h2> </h2>
</a>
</li>
<li>
<a href="" class="title">
<h2> </h2>
</a>
</li>
<li>
<a href="" class="title">
<h2> </h2>
</a>
</li>
<li>
<a href="" class="title">
<h2> </h2>
</a>
</li>
<li>
<a href="" class="title">
<h2> </h2>
</a>
</li>
</ul>
</div>
</div>
JS code:
$(document).ready(function() {
$.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=my-api-key',function(json) {
console.log(json);
console.log(json.articles.length);
function headlines (json) {
for(var i=0;i<5;i++){
$('.sidebar-nav li a h2').eq(i).html(json.articles[i].title);
}
}
});
});
I have made a class called sidebar then inside class I have placed list and anchor followed by <h2></h2> tag. I want to populate h2 tag with NEWS headlines but nothing is displayed on my webpage.
$('.sidebar-nav li').eq(i).find('h2').html(...)
li is the Nth element you're looking for, not h2.
For that matter, you should cache the nav element or the lis, to avoid hammering the DOM :
var $lis = $('.sidebar-nav li')
for(var i=0;i<5;i++){
$lis[i].find('h2').html(json.articles[i].title);
}
First of all: You don't call your function headlines so nothing goes to output ;)
Second one:
$('.sidebar-nav li a h2').eq(i)
will only work for the first item i think, because there is only 1 H2-Tag within the a-Tag.
I suggest giving all H"-Tag a class like ".headline" and itterating over them.
I hope this helps ;)
I've asked this question here but another problem came up so I decided to keep the old one for reference purposes. Old question here.
The old question was just about updating the class of a main-menu based on the url but now things have changed. I will provide the new sidebar below.
Sidebar without any active class yet
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
It would look like this:
Dashboard
Scheduling
--> Foreign Languages
--> ESL Local
--> Summer Workshops
As you can see Scheduling has a sub-menu.
Then how it would look like if I am on the dashboard. The sidebar would look like this
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu [active]"> //without the []
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
So the Dashboard would be highlighted in this scenario
And how it would look like if Im on any of the sub-menu under Scheduling
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu [active]">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li [class="active"]><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
Since I am in the Foreign Languages section. The main header Scheduling and this Foreign Langauges would be active but different class. The active class of Scheduling is sub-menu active while Foreign Languages would just have active only.
And javascript that I've tried no longer applies here since it only handles menus without any dropdown. And it didn't work anyway
Old javascript
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
//alert($('ul a').length);
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
}
//alert(this.href);
});
});
</script>
The goal here is to put a "active" class to the section of the sidebar based on the url the user is in. I've just include('sidebar.php') this sidebar so I would only change this file rather than put a sidebar in each php page file. But then the main heading and the dropdown menu has different active classes.
Found the solution with the help of gecco. The javascript is below:
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().closest("li").addClass('active'); //added this line to include the parent
$(this).parent().parent().closest("li").addClass('active');
}
});
});
</script>
I was already halfway with using php to do this HAHAHAHA. if current_url = db_page_url then put echo class=active. HAHAHA.
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().parent().closest("li").addClass('active2');
}
});
});
</script>
The only change I have done here is adding another line to your JS
$(this).parent().parent().closest("li").addClass('active2');
And here is my style sheet
.active2 > a{
color:red; //what ever the styles you want
}
OR
You can do it without a style
jQuery(function($) {
var path = window.location.href;
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$( this ).parent().parent().closest("li").addClass('active2');
$('.active2 a:first').addClass('active'); //add the active class to the parent node
}
});
});
I am working on a JavaScript class so when link is clicked that has a class of parent it will remove it and then add a class of .open
I have got addClass working but is not removing parent class when click on.
And when clicked closed should remove class open and revert it back to parent.
JavaScript Code
<script type="text/javascript">
$('.parent').on('click', function() {
$('.parent').addClass('.open').removeClass('.parent');
});
</script>
HTML Code
<div class="site-container">
<header id="header">
</header>
<div id="column_left" class="active">
<nav id="menu">
<ul class="nav">
<li><i class="fa fa-dashboard fa-fw"></i> <span>Dashboard</span></li>
<li><a class="parent" data-toggle="collapse" data-target="#setting"><i class="fa fa-cog"></i> <span>System</span></a>
<ul id="setting" class="nav collapse">
<li><a data-toggle="collapse" data-target="#user">Users</a>
<ul id="user" class="nav collapse">
<li>Users</li>
<li>User Group</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="page-container">
<div class="container-fluid">
<div class="page-header">
<h1>Dashboard <small>Dashboard Stats</small></h1>
</div>
</div>
</div>
</div>
The whole idea is to toggle classes "parent" and "open" on link click.
Because of dynamical element classes it should be $(static_selector).on('click', '.parent,.open'.
JSFiddle example.
$(document).ready(function()
{
$(document).on('click', '.parent,.open', function()
{
$(this).toggleClass("parent open");
});
});
try something like this
<script type="text/javascript">
$('.parent').on('click', function() {
$(this).addClass('open').removeClass('parent');
});
</script>
You shouldn't add the period in addClass() and removeClass():
Replace:
$('.parent').addClass('.open').removeClass('.parent');
With:
$('.parent').addClass('open').removeClass('parent');
Also, it's more efficient to use $(this) instead of $('.parent') in the event listener, since this is the target of the click event. jQuery won't have to look for .parent, then.
No need to apply . as class when you add or remove class, check here
$('.parent').on('click', function() {
$('.parent').addClass('open').removeClass('parent');
});