<div class="container-fluid">
<div class="sidebar left">
<div id="app-navigation" class="well">
<h5>Administration</h5>
<ul class="administration-list">
<li class="user">User</li>
<li class="emails">Emails</li>
<li class="settings">Settings</li>
<li class="logs">Logs</li>
<li class="help">Help</li>
</ul>
<h5>Managing tools</h5>
<ul class="tools-list">
<li class="ressource"><i class="icon-home icon-white" </i>Ressources</li>
<li class="playlist">Playlist</li>
<li class="schedule">Schedule</li>
<li class="stations">Stations</li>
</ul>
</div>
</div>
</div>
I don't understand why my icon doesn't show up. I'm starting a new project and decided to try out initializr with bootstrap. Just can't make those icon appear. It's seems there's an invisible icon just before my text... I have check the documentation too, here. I also checked within my boostrap.less, sprites.less and variables.less (everything seems okay...).
My variable are correctly set and my image (PNG) are in my ../img folder.
// Sprite icons path
// -------------------------
#iconSpritePath: "../img/glyphicons-halflings.png";
#iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
The file variables.less is at the bootstrap folder, so you need one more level to get to root.
Try to set the path to:
#iconSpritePath: "../../img/glyphicons-halflings.png";
#iconWhiteSpritePath: "../../img/glyphicons-halflings-white.png";
In the newest Bootstrap icons are included with the new class glyphicon:
<i class="glyphicon glyphicon-heart"></i>
In some cases that will probably be the problem.
I had to copy the img folder from bootstrap in the less folder... or you could change the variable to point to root/img folder.
Open the rewrites.php file in the 'lib' folder. Add the following line within the function 'roots_add_rewrites($content)':
'assets/fonts/(.*)' => THEME_PATH . '/assets/fonts/$1',
The function should look like this:
function roots_add_rewrites($content) {
global $wp_rewrite;
$roots_new_non_wp_rules = array(
'assets/css/(.*)' => THEME_PATH . '/assets/css/$1',
'assets/js/(.*)' => THEME_PATH . '/assets/js/$1',
'assets/img/(.*)' => THEME_PATH . '/assets/img/$1',
'assets/fonts/(.*)' => THEME_PATH . '/assets/fonts/$1',
'plugins/(.*)' => RELATIVE_PLUGIN_PATH . '/$1'
);
$wp_rewrite->non_wp_rules = array_merge($wp_rewrite->non_wp_rules, $roots_new_non_wp_rules);
return $content;
}
Related
Okay .. I want to create a button once it's clicked it allows you to add a photo .. like the input tag of attribute type = "file" .. I've already designed the button shape .. all what is remained is to click on it so a window blows up .. and choose a photo to display in the post box ..
enter image description here
<div class="extras">
<ul class="icons">
<li class="photos">
<i class="fa-solid fa-image">
</i>
</li>
<li class="tag"> <i class="fa-solid fa-user-tag"> </i> </li>
</ul>
<div class="button">
<button>launch</button>
</div>
</div>
here is the element of class photos which I want it to display the window of adding a photo once it's clicked .. exactly like .. just different button style ..
If I understand well, what you have to do is this: first you'll need to add an id to your <li class="photos"> and your <button>launch</button>. And also remove your <i id="up"> component since you'll add it with JavaScript. See the html bellow.
<div class="extras">
<ul class="icons">
<li id="photos-component" class="photos">
<!-- there used to be an <i> tag here! -->
</li>
<li class="tag">
<i class="fa-solid fa-user-tag"> </i>
</li>
</ul>
<div class="button">
<button id="launch-button">launch</button>
</div>
</div>
After adding the ids, you'll need to call a JavaScript file by inserting a <script src="insert-your-file-name.js"></script> at the bottom of your <body>. Probably, you already have done this. If not, do it.
In that file, you'll want to add the following code.
// This constant bellow contains your photos component
const photosComponent = document.getElementById("photos-component");
// This constant bellow contains your launch button
const button = document.getElementById("launch-button");
// This whole chunk of code bellow is a function that will run whenever
// you click the button
button.addEventListener("click", () => {
// Here we create a new empty <input> tag
const fileInput = document.createElement("input");
// Here we add all the attributes for the <input> tag
fileInput.id = "up";
fileInput.type = "file";
fileInput.classList.add("fa-solid fa-image");
// Here we add the input to the photos component
photosComponent.append(fileInput);
// Here we change the style of the button
button.classList.add("insert-button-style");
})
Hopefully it helps. You can always read more about the JavaScript HTML DOM (Document Object Model) by googleing it.
These links might help you in your search:
https://www.w3schools.com/js/js_htmldom.asp
https://www.javascripttutorial.net/javascript-dom/
I am creating a Tizen Web App for wearable device and i want to route to a certain point on a separate page but anchor tags don't seem to be working. They route me to the page, but just to the top of the page.
I've tried these 3 options, the first one routes me to the top of the page no matter how far down the tag is and the other two don't work at all.
I've also tried doing it with the second page in a seperate HTML using href="flags.html#A" and this also routed to the top of the page.
I also tried using 'name' instead of 'id' and a 'div' tag in place of an 'a' tag with the same results.
<div class="ui-page ui-page-active" id="main">
<div class="ui-content">
<ul class="ui-listview">
<li><a href="#flags">A
<i>Alfa</i></a></li>
<li><a href="#flags#B">B
<i>Bravo</i></a></li>
<li><a href="#flagsC">C
<i>Charlie</i></a></li>
</ul>
</div>
</div>
<div class="ui-page" id="flags">
<header class="ui-header">
<h2 class="ui-title">Select Flag</h2>
</header>
<div class="ui-content">
<a id="A">A-Alfa</a><br>
<a><b>International Call Signals</b><br>I have a diver down; keep well clear at slow speed</a><br>
<a id="B">B-Bravo</a><br>
<a><b>International Call Signals</b><br></a><br>
<a id="flagsC">C-Charlie</a><br>
<a><b>International Call Signals</b><br>Affirmative</a><br>
</div>
</div>
Any help would be hugely appreciated
Not the cleanest solution but i ended up using a javascript function to achieve my goal.
function loadPage2(flagSelection) {
window.localStorage.setItem("flagSelected", flagSelection);
location.href="flagsPage.html";
}
triggered by;
<li><a onclick=loadPage2("#A");>A
<i>Alfa</i></a></li>
<li><a onclick=loadPage2("#B");>B
<i>Bravo</i></a></li>
<li><a onclick=loadPage2("#C");>C
<i>Charlie</i></a></li>
and on the second page;
var flagSelection = window.localStorage.getItem("flagSelected");
function jumpToFlag() {
location.href="#";
location.href=flagSelection;
}
const load = () => {
console.log("load event detected!");
}
window.onload = jumpToFlag();
We upgraded from Angular 4 to Angular 8.1 and a lot of our drop downs are broken. From what I can tell they all contain these two style classes: the class js-dropdown and js-dropdown-menu. We can't find where these style classes are coming from or how they work. It's hard to search these terms on google because there's no way to have a must-include for hyphens, that I know of. Here's an example of the html:
<div class="select-wrapper" id="searchOption">
<li class="dropdown nav__item is-parent" tabindex="0" style="outline: 0" (blur)="closeDropdown($event)">
<div class="select-dropdown js-dropdown">
<span class="selection">{{ searchType }}</span>
<i class="nav__icon nav__icon--dropdown"></i>
</div>
<ul class="details-search nav__menu js-dropdown-menu">
<li (click)="optionSelected($event, 1)">
<a class="nav__link">Option 1</a>
</li>
<li (click)="optionSelected($event, 2)">
<a class="nav__link">Option 2</a>
</li>
<li (click)="optionSelected($event, 3)">
<a class="nav__link">Option 3</a>
</li>
</ul>
</li>
</div>
Does anyone have any insight to the class js-dropdown and js-dropdown-menu and how to fix them after this upgrade?
Update: so i think i found out where the js-dropdown style class comes from.... it doesn't come from any style... it's just used as a label and component.js looks for that label to show or hide it. The now is that component.js function isn't getting called. Anyone know how to fix this?
$('#app-container').on('click', '.js-dropdown, .js-dropdown-menu > *', function(event){
event.preventDefault();
var that = this;
var parent = $(this).closest('.is-parent');
//is our dropdown open?
if(!parent.hasClass('is-open')){
//... then open it.
parent.addClass('is-open');
//handle clicking away
$(document).one('click', function closeMenu(docEvent){
//if the parent does not contain the clicked element...
if($(parent).has(docEvent.target).length === 0) {
//close it.
parent.removeClass('is-open');
} else {
// else, set up another listener to check the next user click.
$(document).one('click', closeMenu);
}
});
} else {
// ...else we close it.
parent.removeClass('is-open');
}
event.stopPropagation();});
Figured it out. We were not loading a components.js file (as well as other scripts) in the angular.json file. Our previous version of angular did not contain an angular.json file.
I'm working with Bootsrtap 4 and I'm trying to add the class active to my nav-item elements whenever their nav-link href attribute is the same as the current url.
On the html side, I uesd a basic url generator as shown below:
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{{ url('/brands') }}" role="button">Brands</a>
</li>
<!-- ... -->
</ul>
And then I used a jQuery method to compare them with the current url:
$('.navbar-nav .nav-item .nav-link').each( () => {
// If the current path and the link url are the same...
if ($(this).attr('href').indexOf(location.pathname) !== 1) {
// ...then add the class 'active' to 'nav-item', its parent
$(this).parent().addClass('active')
}
})
However, I noticed that $(this).attr('href') was undefined, probably because it's a generated url, and therefore nav-item doesn't get the active class.
EDIT: as an example, for now it's a very basic url, without parameter, which looks like this:
http://domain.example/brands
Does anyone know how to solve this problem? Thanks in advance.
I'd recommend you to go another way. Instead of "activating" the link with jQuery, you could easily do it server-side with Laravel:
<ul class="navbar-nav">
<li class="nav-item">
<a class="{{ Request::is('brands*') ? 'nav-link active' : 'nav-link' }}"
href="{{ url('/brands') }}"
role="button">Brands</a>
</li>
<!-- ... -->
</ul>
Explanation:
Laravel uses the template-engine twig for rendering the HTML server-side. Instead of manipulation the DOM client-side, you can easily add an conditional to check for the current request parameters. Laravel gives you nativeliy the possibility to check the request path even with a wildcard.
Your problem is most likely caused by the difference between using () => {} or function () {}
When you use the arrow syntax the prop this is unbound. Meaning that also $(this) will return an empty jQuery object instead of returning the anchor. Any follow up jQuery chaining will return something empty/undefined.
So, changing .each( () => { to .each(function() { will at least fix your undefined problem.
Information about the arrow syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Okay this is what i do generally do in all my laravel projects when it comes to make sidebar or any link "active" on click :-
<li class="nav-item {{ in_array(Route::currentRouteName(),[
'admin.dashboard',
'admin.updates',
])? 'active show' : ''}}">
<i class="typcn typcn-clipboard"></i>Dashboard
<nav class="nav-sub">
Home
</nav>
</li>
Now notice this {{ BladeHelper::sideBar_link_isActive('admin.dashboard') }}
I created dynamic helper function to get the current url and return "active" class
Path : app\Helpers\BladePageHelper
<?php
namespace App\Helpers;
use Route;
class BladePageHelper
{
public static function sideBar_link_isActive($selectedLink){
$currentRouteName = Route::currentRouteName();
if($selectedLink === $currentRouteName){
return 'active';
}else{
return '';
}
}
}
I'm using route name here like
Route::("/","MyController#mymethod")->name("myname")
You can do this with url too.
I hope this helps.
Happy Coding
It's 3:40AM and I'm going to give up trying for tonight.
The tabs will not update the page outside of the navigation area.
The PanelController looks like this:-
app.controller('PanelController', function($scope) {
$scope.tab = 1;
$scope.selectTab = function(setTab) {
$scope.tab = setTab;
};
$scope.isSelected = function(checkTab) {
return $scope.tab === checkTab;
};
});
and the nav pane looks like this:-
<div class="navbar-collapse collapse" ng-controller="PanelController">
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active:isSelected(1) }">
<a href ng-click="selectTab(1)">Blog</a>
</li>
<li ng-class="{ active:isSelected(2) }">
<a href ng-click="selectTab(2)">About{{tab}}</a>
</li>
<li ng-class="{ active:isSelected(3) }">
<a href ng-click="selectTab(3)">Contact</a>
</li>
</ul>
</div>
and the placeholder HTML for my two tabs is as follows:-
<div ng-controller="PanelController">
<div ng-show="isSelected(1)">
<p>Hello</p>
</div>
<div ng-show="isSelected(2)">
<p>Please work</p>
</div>
</div>
As you can see, the {{tab}} next to 'About' in my navbar is updating in my view as I click the tabs, as is the active class. When I place a {{tab}} expression outside of the navbar it isn't updating whenever it's clicked. Obviously this is something related to the scope of the variable, but I am using the PanelController on the parent of both the nav and my main area.
I can't see what I'm doing wrong.
I'd appreciate a fresh pair of eyes -- I've already some help with this already and any more will be graciously accepted.
The problem diagnosis is fairly simple, 2 controllers means 2 instances that each have their own scope
You would need to use a service or events to have them communicate together