For changing the .nav-link activate state I wrote
$(".nav-link").on("click", function(){
$(".nav-link.active").removeClass("active");
$(this).addClass("active");
});
But this won't work because the page reloads when clicking on the .nav-link. I can do something like:
var current_url = location.href;
if (current_url == "https://xyx.com/home") {
$('.nav-link.home').addClass('active');
} else {
$('.nav-link.home').removeClass('active');
}
But when I was looking for another method I found this
<li class="nav-item">
<a href="{{ route('home') }}"
class="nav-link dropdown-toggle {{ request()->routeIs('home') ? 'active' : '' }}">Home</a>
</li>
<li class="nav-item">
About
</li>
This is Laravel code but I am looking something like this for Django.
Related
I have followed a Microsoft template to get an ASP.NET Core React JS project in visual studio 2022. The end product displays a list of weather forecasts with no navigability in the website. I am trying to convert the site to be more adaptable and start building my own project. I have attached a navbar file that I would like to implement, and the removal of the weather forecast. Please can someone tell me how to do this?
App.js
import React, { Component } from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from './Navigation/Navbar.js';
export default class App extends Component {
static displayName = App.name;
constructor(props) {
super(props);
this.state = { forecasts: [], loading: true };
}
componentDidMount() {
this.populateWeatherData();
}
static renderForecastsTable(forecasts) {
return (
<table className='table table-striped' aria-labelledby="tabelLabel">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
{forecasts.map(forecast =>
<tr key={forecast.date}>
<td>{forecast.date}</td>
<td>{forecast.temperatureC}</td>
<td>{forecast.temperatureF}</td>
<td>{forecast.summary}</td>
</tr>
)}
</tbody>
</table>
);
}
render() {
let contents = this.state.loading
? <p><em>Loading... Please refresh once the ASP.NET backend has started. See https://aka.ms/jspsintegrationreact for more details.</em></p>
: App.renderForecastsTable(this.state.forecasts);
return (
<div>
<h1 id="tabelLabel" >Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
{contents}
</div>
);
}
async populateWeatherData() {
const response = await fetch('weatherforecast');
const data = await response.json();
this.setState({ forecasts: data, loading: false });
}
}
Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
Navbar.js
import React from "react";
const Navbar = () => {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">
Navbar
</a>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavDropdown">
<ul className="navbar-nav">
<li className="nav-item active">
<a className="nav-link" href="#">
Home <span className="sr-only">(current)</span>
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Features
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Pricing
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown link
</a>
<div
className="dropdown-menu"
aria-labelledby="navbarDropdownMenuLink"
>
<a className="dropdown-item" href="#">
Action
</a>
<a className="dropdown-item" href="#">
Another action
</a>
<a className="dropdown-item" href="#">
Something else here
</a>
</div>
</li>
</ul>
</div>
</nav>
);
};
export default Navbar;
im having a problem on implementing the login FB on my framework7 code. It just doesnt display the button, as follows:
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left panel content goes here</p>
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<button class="btn-default" scope="public_profile,email" onlogin="checkLoginState();">Login fb</button>
</div>
</div>
Any sugestion on how to tackle this problem?
Does your project is in cordova environment ? , I would suggest You using cordova fb plugin
https://github.com/Wizcorp/phonegap-facebook-plugin
Mine work like a charm
Login page
<li class="item-link">
<a class="signin button button-raised">Sign In</a>
</li>
<li class="item-link">
<a class="registerpage button button-raised">Register</a>
</li>
<li class="item-link">
<span id="facebookLogin" class="button button-fill color-blue">Login With Facebook</span>
</li>
<li class="item-link">
<span id="googleLogin" class="button button-fill color-red">Login With Google</span>
</li>
</ul>
</div>
init function
$('#facebookLogin').on('click', function () {
facebookLogin();
})
facebookLogin function
function facebookLogin() {
facebookConnectPlugin.login(["public_profile", "user_birthday", "user_hometown", "email"],
fbLoginSuccess,
function (error) { app.app.alert(JSON.stringify(error)) }
);
var fbLoginSuccess = function (userData) {
// use token from userData to your existing login system
//userData.authResponse.accessToken
};
}
I'm checking the routes inside my blade template, to add an active class to a specific li in my menu with this code:
<ul>
<li class="{{ Request::is('*/sobre') || Request::is('*') ? "active" : "" }}">
Sobre o salão
</li>
<li class="{{ Request::is('*/servicos') ? "active" : "" }}">
Serviços
</li>
<li class="{{ Request::is('*/avaliacoes') ? "active" : "" }}">
Avaliações
</li>
<li class="{{ Request::is('*/galeria') ? "active" : "" }}">
Fotos
</li>
</ul>
And those are the routes:
Route::group(['prefix' => '{domain}', 'middleware'=>'salao'], function () {
Route::get('/', 'Frontend\FrontendSalaoController#sobre');
Route::get('sobre', 'Frontend\FrontendSalaoController#sobre');
Route::get('servicos', 'Frontend\FrontendSalaoController#servicos');
Route::get('avaliacoes', 'Frontend\FrontendSalaoController#avaliacoes');
Route::get('galeria', 'Frontend\FrontendSalaoController#galeria');
});
When i access the route http://website/x or the route http://website/x/sobre, the active class is positioned correctly. But, if I access the http://website/x/servicos route, the class will be added in the first li and in the servicos li.
How can i handle this?
Request::is('*') actually matches everything so the first item will always have the active class. Instead you should check for '/':
<li class="{{ Request::is('*/sobre') || Request::is('/') ? "active" : "" }}">
The is method even supports multiple parameters, of which only one has to match, so you can shorten it to this:
<li class="{{ Request::is('*/sobre', '/') ? "active" : "" }}">
I'm using ember.js with handlebars, and it seems external URL cannot be reached without a script. I put a link to www.google.com to test and it never fires! Is there something I am missing on?
<script type="text/x-handlebars" data-template-name="subusers">
<div class="click-nav" {{action 'toggleDdSubusers'}}>
<ul class="no-js" >
<li>
<a class="clicker">
{{render 'currentsubuser'}}
</a>
<ul class="filter-options">
{{#each subuser in model}}
{{#unless (equals subuser.id currentSubuserInfos.id)}}
<li>
<a href="http://www.google.com">
<span class="profileimg">{{{subuser.profileImage}}}</span>{{subuser.name}}<span class="numbers"> ({{subuser.openedConvCount}})</span>
</a>
</li>
{{/unless}}
{{/each}}
</ul>
</li>
</ul>
</div>
</script>
I still don't know why I got this behavior on my app. What I did to solve my problem is I put an action on my li and send the wanted redirect URL as a function parameter.
In this action, I simply manually redirect with : window.location.href = paramUrl.
I do not know how to set even spacing in my navbar:
there is a bigger gap between Articles and User Profil than User Profil and Admin.
There is a bigger gap between Admin and DB than User Profil and Admin.
My code is:
<li class="blog-nav-item">
<a class="blog-nav-item" href="#" class="blog-nav-item active" data-toggle="dropdown" role="button" aria-expanded="false">Articles<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>All</li>
<li>Create New</li>
</ul>
</li>
<a class="blog-nav-item" href="/accounts/profil/">User Profil</a></li>
<a class="blog-nav-item" href="/admin/">Admin</a></li>
<li class="blog-nav-item">
DB<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>DB: JSON</li>
<li>DB: XML</li>
</ul>
</li>
That is because, by default, there is different margin spacing for a simple list element and a drop down menu.
Override the settings by:
.blog-nav-item > a{
margin-right:10px;
}
.blog-nav-item > .dropdown-menu{
margin-right:10px;
}
Adding these classes to the css will help