when I click on nav links it redirects to another page as I have href in li a tags, but the active link still remains at home. For example, If I click on profile the active link it shows on Home page rather profile or if I click on about page the active link is still on home page. How can I change the active link depending on whatever navbar content user clicks on? If user clicks on profile the active should be removed from home and set to profile. How can I achieve that?
What I have tried till now:
My code:
<html>
<head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.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.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<?php
echo ' <nav class="navbar navbar-expand-md navbar-dark bg-dark p-4 sticky-top">';
echo '<div class="container-fluid">';
echo ' <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" >';
echo ' <span class="navbar-toggler-icon"></span>';
echo ' </button>';
echo ' <div class="collapse navbar-collapse" id="navbarResponsive">';
echo ' <ul class="navbar-nav ml-auto">';
echo ' <li class="nav-item active">';
echo ' Home';
echo ' </li>';
echo '<li class="nav-item">';
echo ' Profile';
echo '</li>';
echo ' <li class="nav-item">';
echo ' About';
echo '</li>';
echo '</div>';
echo ' </div>';
echo ' </nav>';
echo '<script>
$(document).on("click", "ul li",(function(event) {
event.preventDefault();
$(this).addClass("active").siblings().removeClass("active)
});
</script>';
?>
</body>
</html>
You're only ever setting/removing the active class when the button is clicked.
You'll also need javascript code that:
runs on page load
checks the current url
removes the 'active' class from all nav links
then adds the 'active' class to the nav link that matches the current url
Something like this:
$(function() {
let pageName = location.pathname.split('/').slice(-1)[0];
let currentLink = $('.navbar-nav .nav-item a[href="' + pageName + '"]');
if (currentLink) {
$('.navbar-nav .nav-item').removeClass('active');
currentLink.parent().addClass('active');
}
});
Related
I want to show popover but I don't see it.
CODE
echo '
<a data-toggle="popover"
data-trigger="hover"
data-html="true"
data-placement="top"
data-content="HTML MARKUP"
class="cf_box popover-extra-balik ' . $this->custom_fields[ 34 ]->name . ' ' . $i->fields[ 34 ] . ' ">
';
echo '<span class="field_value">' . JText::_( 'COM_DJCLASSIFIEDS_EXTRA_BALIK_PREMIUM' ) . '</span>';
echo '</a>';
Website Link: link
Image: Image
Thanks!!
Add below Javascript in your code.
$(function () {
$('[data-toggle="popover"]').popover()
});
Example
I removed some PHP code because it's not supported here.
$(function() {
$('[data-toggle="popover"]').popover()
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<a data-toggle="popover" data-trigger="hover" data-html="true" data-placement="top" data-content="<strong>BALÍK PREMIUM obsahuje :</strong>
<ul>
<li>sezónne pneumatiky</li>
<li>najbližšiu servisnú prehliadku so zľavou</li>
<li>dezinfekcia vozidla</li>
<li>1 x čistenie a doplnenie klimatizácie počas leta zdarma</li>
<li>povinná výbava zdarma</li>
<li>zvýhodnené financovanie</li>
</ul>" class="cf_box popover-extra-balik">
<span class="field_value">BALIK_PREMIUM</span>
</a>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
I want to add a link to the menu items which are called from the database dynamically using AngularJs.
Please check my code then only you will understand What I'm struggling.
There is no way to give it directly add links using <href>.
So far I have successfully completed the fetching menu and sub menus dynamically from the database and it is displaying without any error.
Here I am showing my code, please check:
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>Assets/js/angular_app.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js" >
</script>
<script
type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-route.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>Assets/css/angularmenu.css" />
</head>
<div ng-app="menuApp">
<div ng-controller="menuController">
<div id="wrapper1" class="container">
<div id="nav1">
<div><span></span> </div>
<ul>
<li ng-repeat="menu in menus" ng-class="{'has-children': (menu.post_title ==='News')}" ng-click="changeClass(menu)" >
<a>{{menu.post_title}}</a>
<ul ng-if="menu && (menu.post_title ==='News')" ng-controller="subController">
<li ng-repeat="submenu in submenus" class="has-children" ng-controller="subController">
{{submenu.post_title}}<span ></span></a>
<ul ng-if="submenu" ng-class="submenu.class">
<li ng-repeat="subsubmenu in submenu.menus">
{{subsubmenu.title}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
app. js
var app = angular.module('menuApp', []);
app.controller("menuController", function($scope,$http)
{
var baseUrl = 'http://localhost:8080/samplepage/';
$http.get(baseUrl+'Home/getmenu').then(function(response)
{
console.log(response);
$scope.menus = response.data;
});
});
app.controller("subController", function($scope,$http)
{
var baseUrl = 'http://localhost:8080/samplepage/';
$http.get(baseUrl+ 'Home/getsubmenu').then(function(response)
{
console.log(response);
$scope.submenus = response.data;
});
});
RESULT
The problem needs to add links to all these menu items how is it possible using angularJs.
I've searched for weeks already and don't seem to progress any further. Any suggestions will be greatly appreciated.
I suggest you use routerLink instead of href,
<!-- Exemple -->
<li ng-repeat="subsubmenu in submenu.menus">
<a [routerLink]="subsubmenu.link">{{subsubmenu.title}}</a>
</li>
I hope it will help you.
I want to make an id reference "logout" work when clicked from my php code. Please this would aid me very well in continuing the project. this method is important because it involves phonegap
php file
The php file gets user details from the database. the logout id is used to call the php page through an AJAX request and then log the user out and redirect them.
<?php
session_start();
$con = mysqli_connect("localhost", "*****", "*****", "*****");
//check connection...
if ($con === false) {
die ("couldn't connect to SQL Server");
}
if (isset($_SESSION['people_email'])){
$selectdata = "SELECT * FROM people WHERE people_email = '".$_SESSION['people_email']."'" ;
$query = mysqli_query($con, $selectdata);
while ($row = mysqli_fetch_array($query)) {
echo '<div class="ui fluid card">';
echo '<div class="extra content">';
echo '<div class="left floated meta">';
echo '<a href="#" id="logout">';
echo '<i class="remove circle icon"></i>';
echo "Log out";
echo '</a>';
echo '</div>';
echo '<div class="right floated meta">';
echo '<a>';
echo '<i class="plus icon"></i>';
echo "Upload a photo";
echo '</a>';
echo '</div>';
echo '</div>';
echo '<div class="image">';
echo '<img src="/images/avatar2/large/kristy.png">';
echo '</div>';
echo '<div class="content">';
echo '<a class="header">'.$row['people_name'].'</a>';
echo '<div class="meta">';
echo '<span class="date">'.$row['people_name'].'</span>';
echo '</div>';
echo '<div class="description">'.$row['people_email'].'</div>';
echo '</div>';
echo '<div class="extra content">';
echo '<a><i class="send icon"></i>'.$row['people_username'].'</a>';
echo '<a><i class="alarm icon"></i>'.$row['people_username'].'</a>';
echo '</div>';
echo '</div>' ;
}
}
else {
echo "no";
}
?>
this is the HTML file.
the html file graps the user data for php echo and displays them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- Path to your custom app styles-->
<link rel="stylesheet" href="css/my-app.css">
<link rel="stylesheet" href="Semantic/semantic.min.css">
<!--<link rel="stylesheet" type="text/css" href="css/index.css" />-->
<title>MyApp</title>
</head>
<body>
<!-- Views -->
<div class="views">
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<!-- Pages container, because we use fixed navbar and toolbar, it has additional appropriate classes-->
<div class="pages navbar-fixed toolbar-fixed">
<!-- Page, "data-page" contains page name -->
<div class="page " data-page="profile">
<!-- Top Navbar. In Material theme it should be inside of the page-->
<div class="navbar bar-color">
<div class="navbar-inner">
<div class="left"><i class="bell icon"></i>
</div>
<div class="center"><form><input size="50px" type="search" placeholder="Search"/></form></div>
<div class="right">
<!-- Right link contains only icon - additional "icon-only" class-->
<i class="building outline icon"></i>
</div>
</div>
</div>
<!-- Toolbar. In Material theme it should be inside of the page-->
<div class="toolbar toolbar-bottom bar-color">
<div class="toolbar-inner">
<!-- Toolbar links -->
<i class="eye icon"></i>
<i class="calendar icon"></i>
<i class="plus icon"></i>
<i class="user icon"></i>
</div>
</div>
<!-- Scrollable page content -->
<div class="page-content" >
<div id="profile" style="height:90%; width:90%;margin:auto;position:relative;top:20px;"></div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="Semantic/semantic.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
type: 'get',
url: 'profile.php',
dataType: 'html',
success: function (response) {
$('#profile').html(response);
}
});
$("#logout").click(function() {
$.ajax({
type: 'get',
url: 'logout.php',
success: function (response) {
if (response == "success") {
window.location.href="login.html";
}else{
alert("You were not logged out");
}
}
});
});
});
</script>
</body>
</html>
You can include data attributes like data-page-id in the log out button html and use jQuery's attr() function to fetch that data.
<div id='logout' data-info='some_info'></div>
$('#logout').attr('data-info'); //returns the value
But I don't see why you need this extra info since it's just a log out button and you can bind it's id to click event.
I am trying to loop in jquery tab code but not working i am using this plugin for that https://jqueryui.com/tabs/ its not working in loop what am i doing wrong?
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs">
<ul>
<?php
$camps=20;
for($i=1; $i<=$camps; $i++)
{
echo 'Campaign ' . $i . '';
}
?>
</ul>
<?php
$camps1=20;
for($i1=1; $i1<=$camps1; $i1++)
{
echo '<div id="tabs-'.$i1.'">';
echo $i1;
echo '</div>';
}
?>
</div>
In this case, IDs no need to be unique in order to make the tab working. The problem is you did't wrapped the a tag with li element. Try wrapping first loop tab with li element :
<div id="tabs">
<ul>
<?php
$camps=20;
for($i=1; $i<=$camps; $i++) {
echo '<li>Campaign ' . $i . '</li>';
}
?>
</ul>
<?php
$camps1=20;
for($i1=1; $i1<=$camps1; $i1++) {
echo '<div id="tabs-'.$i1.'">';
echo $i1;
echo '</div>';
}
?>
</div>
DEMO(with same id)
But hey, of course you need to make the IDs unique. :)
I have created an array with 8 items.
Now on page 1 I have for each array-item a html link. Each array-item has a different color. When clicked on one of the 8 html links it will redirect to page 2. There I want that a div-background gets the color linked to an array item.
My php-code generates for each array item a classname: .feeling1, .feeling2, .feeling3, .feeling4, .feeling5, ...
Now this seemed easy by simply saying when clicked on an element with class name (for example) .feeling1 then change the background-color of the div (id="resultaat") on page 2. But apparently this code won't work...
Anyone a solution for this? Thanks in Advance.
Example of one array item:
[
"mood" => "social",
"number"=>"feeling4",
"name"=>"DOK FLEA MARKET",
"picture" => "images/treasures/social.png",
"about" => "Every Sunday till the end of September there's a flea market full with people selling their odds and ends, homemade stuff and art ",
"street"=>"Koopvaardijlaan 4",
"city"=>"GHENT",
"days"=>"opening days: Sunday",
"hours"=>"opening hours: 10:00AM-6:00PM "
],
Page 1:
<body>
<!--CONTAINER-->
<div id="container">
<!--HEADER-->
<header>
<h1 id="headertitel">PICK YOUR MOOD</h1>
</header>
<!--SECTION-->
<section id="middenstuk">
<ul class="list">
<?php foreach ($arr_artist as $key=> $artist) { echo "
<li class='".$artist[' number ']."'><a href='3.php?id=".$key."' class='feeling".$artist[' mood '].", trala'>".$artist['mood']."</a>
</li>"; } ?>
</ul>
<script>
$(".feeling").mousedown(function () {
$(this).addClass('slideright');
});
</script>
</section>
<!-- FOOTER -->
<footer>
<a class="linkhome1" href="4.php">
<div class="locatie"></div>
</a>
<a class="linkhome1" href="index.php">
<div class="home"></div>
</a>
</footer>
</div>
The Jquery code:
$(".feeling2").click(function () {
$("#resultaat").css("background-color", "red");
});
If interpret question correctly , two html exist. At "page1" click on <a> element should render specific element #resultaat background red at "page2" ?
Try
at "page1"
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.js">
</script>
</head>
<body>
<ul>
<li><a class="feeling2" href="page2.html">feeling 2</a>
</ul>
<script>
$(".feeling2").click(function (e) {
// pass settings to `page2` by appending `"?id=resultaat&background=red"`
// to `.feeling2` `.href`
e.target.href = e.target.href + "?id=resultaat&background=red";
});
</script>
</body>
</html>
at "page2"
<!DOCTYPE html>
<html>
<script src="jquery-1.11.3.js">
</script>
</head>
<body>
<div id="resultaat">
<img src="images/moods/lazy180.png" alt="Logo" />
<img src="" class="moodpics" alt="artist name" />
<!--<p>description</p>-->
<p class="about">about</p>
<p class="street">street</p>
<p class="city">city</p>
<p class="days">days</p>
<p class="hours">hours</p>
<a class = "vernieuwen" href="3.php?id=1" ><div class=""></div></a>
</div>
<script>
$(document).ready(function() {
// parse `location.search` `?id=resultaat&background=red` ,
// set at `click` of `.feeling2` at `page1`
var mood = location.search.slice(1).split(/=|&/);
// select element having `id` `resultaat` ,
// set `$("[id=resultaat]")` `css` `background`:`red`
$("["+mood[0]+"="+mood[1]+"]").css(mood[2], mood[3]);
})
</script>
</body>
</html>
I have found the solution for my "problem" simply by adding this code on page 2:
<div class="<?php echo $arr_artist[$artist_id]['number']?>" id="resultaat">