I'm using the following GetUIKit: https://getuikit.com/
I want to use the UIKit and JS to do the following:
When a button named "Next" is pressed, the active item on an unordered list is changed to the subsequent item and that content appears. I would also like for a second button to appear, "Previous", if the active item is anything other than the first item in the UL.
Here is what I have so far:
<ul class="uk-subnav uk-subnav-pill" uk-switcher>
<li>Welcome</li>
<li>Get Involved</li>
<li>Sign-Up</li>
</ul>
<ul class="uk-switcher uk-margin">
<li>Welcome!</li>
<li>Here is how you can get involved!</li>
<li>Fill out the following form to be added to our contact list!</li>
</ul>
<button class="uk-button uk-button-default">Previous</button>
<button class="uk-button uk-button-default">Next</button>
UIKit provides navigation from the subnavs. In other words, I can click on those and it will pull up the corresponding item from the subsequent UL.
My issue is how I do this using a Next and Previous button. Are buttons the best choice? If so, using JS, what is the best way to go about manipulating the HTML/CSS to change what appears based on user's selection of "Next" or "Previous"?
I suggest you to use "Tab" in Uikit, Just use that tabbing name as Next/Prev
<ul uk-tab>
<li class="uk-active"></li>
<li></li>
<li class="uk-disabled"><a></a></li>
</ul>
I am trying to work on a project which is using a Layout/Template which uses a lot of jQuery.
I have learned to integrate the template with ReactJS Project, however, I am looking for a solution where I can completely replace the jQuery.
One of my solution is to use jQuery functions inside ComponentDidMount() or Render() function of React.
Is this approach correct? Is it the right way?
I have attached a small example below:
import React, { Component } from 'react';
import '../stylesheets/commonstyles.css';
import '../stylesheets/bootstrap-sidebar.css';
import '../stylesheets/sidebar1.css';
import $ from 'jquery';
class NavBar extends Component {
constructor(props){
super(props);
this.openSidebar = this.openSidebar.bind(this);
}
openSidebar(){
console.log('hello sidebar');
}
componentWillMount(){
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
$('.search-btn').on("click", function () {
$('.search').toggleClass("search-open");
return false;
});
});
}
This is my Render Function.
{/* <!--- SIDEBAR -------> */}
<div class="wrapper" style={{paddingTop:60}}>
{/* <!-- Sidebar Holder --> */ }
<nav id="sidebar">
<div class="sidebar-header">
<h3>Dashboard</h3>
<strong>BS</strong>
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="#homeSubmenu" /*data-toggle="collapse" */ aria-expanded="false">
<i class="ti-home"></i>
Home
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>
<a href="#" style={{color:"white"}}>
<i class="ti-align-justify" ></i>
About
</a>
<a href="#pageSubmenu" /*data-toggle="collapse" */ aria-expanded="false" style={{color:"white"}}>
<i class="ti-text"></i>
Pages
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>
<a href="#" style={{color:"white"}}>
<i class="ti-paragraph"></i>
Portfolio
</a>
</li>
<li>
<a href="#" style={{color:"white"}}>
<i class="ti-control-play"></i>
FAQ
</a>
</li>
<li>
<a href="#" style={{color:"white"}}>
<i class="ti-share-alt"></i>
Contact
</a>
</li>
</ul>
</nav>
{ /* <!-- Page Content Holder --> */ }
<div id="content">
</div>
</div>
Is this approach correct? Is it the right way?
No. No approach is correct and there is no right way to use both jQuery and React/Angular/Vue together.
jQuery manipulates the DOM by, for example, selecting elements and adding/deleting stuff into/from them. Typically, it selects an existing <div> and sets its text.
The other frameworks don't manipulate the DOM; they generate it from data, and regenerate it whenever this data changes (for instance after an Ajax call).
The problem is, jQuery has no clue about React's presence and actions, and React has no clue about jQuery's presence and actions.
This will necessarily lead to a broken application, full of hacks and workarounds, unmaintainable, not to mention that you have to load two libraries instead of one.
For instance, jQuery will select a <button> and add it a .click() listener; but a split second later, React/Angular/Vue might regenerate the DOM and the button in the process, voiding jQuery's .click(). So you'll ask a question on Stackoverflow, wondering why the heck does your .click() not work. You'll end up adding a dirty setTimeout() hack, in order to delay jQuery's click() handler attachment until after React has regenerated your button. It's straight up your highway to hell.
Solution : use jQuery OR (React/Angular/Vue), not both together.
Is this approach correct? Is it the right way?
No. Don't use jQuery to attach event listeners to DOM elements created and managed by React. Use onClick'. I could not find#sidebarCollapse` in your snippet. It could look something like this.
<button id="sidebarCollapse" onClick={state => this.setState({ collapsed: !state.collapsed })>Collapse</button
And the class for <nav id="sidebar"> could dependent on this state
<nav id="sidebar" className={ this.state.collapsed ? "": "active" } >
You'll notice, you hand over running operations like adding removing class, attributes and other DOM operations to React and simply declare how things must react to state changes. Amidst this, if you try to run jQuery operations, your UI could probably end up in an inconsistent state.
Migration could be done like this: replace parts of your UI elements with React. For eg, initially you could do,
<!-- rest of your existing jQuery based code -->
<header id="reactManagedNavbar">
<!-- Nothing here. React will take care of DOM Elements here -->
</header>
<!-- rest of your existing jQuery based code -->
And React side could look like this,
// main.js
ReactDOM.render(<MyNavBar />, document.getElementById('reactManagedNavBar'))
// MyNavBar.js could have the react components
This way you can incrementally migrate to React and still have jQuery side by side. Just dont manipulate the each other DOM elements.
Sometimes you need a jQuery plugins (animations, visualisations charts etc) inside a React component. Use refs!
class MyJQueryDependingComp extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
// this.myRef.current is the dom element. Pass it to jQuery
}
render() {
return (
{/* rest of React elements */}
<div ref={this.myRef} />
{/* rest of React elements */}
);
}
}
Again, refrain from touching your jQuery's DOM in React and vice versa.
I've recommend you to use a provider plugin in your webpack.config:
Is really simple to use, and it allows you to use jquery in all your project without importing the package in every file:
More Info Docs:
https://webpack.js.org/plugins/provide-plugin/?
So you just have to add this plugin in your webpack.config file:
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
});
There is no real way to convert a Jquery template into a React template except literally go through all the selects and rewrite everything in React. The reason being, both these libraries manipulate the dom in different ways
jQuery and react can very well when together only if they don't interact with each other. If you choose to use jQuery use only jQuery to manipulate the dom not both. And way is to use jQuery outside the react Js file in your index.html
Please note: this will work only if the page you query loads first
I can't seem to make it work. when i click on the menu icon, the menu comes out ok
and it closes when i click again.
but how do i toggle when i click and a url within the menu itself?
I tried adding a class to each li and adding the clas on the function i tried meny thing. maybe its because i have angular on the li?
<div class="icomMenu"></div>
<navbar class="">
<nav class="nav">
<ul>
<li><a ui-sref="index" ui-sref-active="active">Home</a></li>
<li><a ui-sref="About" ui-sref-active="active">About</a></li>
<li><a ui-sref="Contact" ui-sref-active="active">Contact</a></li>
<li><a ui-sref="Nested" ui-sref-active="active">Nested</a></li>
</ul>
</nav>
</navbar>
$(document).ready(function() {
$(".icomMenu").click(function() {
$("navbar").toggleClass("NavOut");
});
});
thank you.
Since I see you are using angular I would recommend going against using jQuery and instead using component/view controller to handle this. You can for example add ng-class="{'NavOut': vm.menuVisible}" to your navbar HTML element and then instead of using ui-sref on the li elements you can use ng-click="vm.onMenuItemClick("About")" then in controller you can inject $state and create method onMenuItemClick(link) that will set this.menuVisible = false and go to another route with this.$state.go(link).
EDIT:
Template:
<div class="icomMenu"></div>
<navbar ng-class="{'NavOut: vm.menuVisible}">
<nav class="nav">
<ul>
<li><a ng-click="vm.onMenuClick('Home')" ui-sref-active="active">Home</a></li>
</ul>
</nav>
</navbar>
Controller:
constructor($state) {
this.$state = $state;
}
this.onMenuClick(link) {
this.$state.go(link);
this.menuVisible = false;
}
Something like that, I hope you get the idea. The navbar seems like the ideal candidate for creating an component then use it's controller to handle the logic above.
So what I'm trying to accomplish is I'm building a website using Wordpress. I have a menu and one of the items is "Products" under products I have 4 items, electronics, cars, house supplies, and other. For this example I'm focusing on electronics. So under electronics i have another submenu. So this is the 3rd level, which looks like the code below.
<li class="dropdown menu-products"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="http://mywebsite/products/">Products <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu menu-electronics">Electronics
<ul class="dropdown-menu">
<li class="menu-tv">Tvs</li>
<li class="menu-phones">Phone</li>
<li class="menu-games">Games</li>
<li class="menu-other">Other</li>
</ul>
</li>
Now when I click on any of the links on the 3rd level it will take you to the parent page and open up an accordion for that id. So I set that up and it works. However the problem I'm having is since all of these items example (tv, phones, games, others) are technically on the same page. When I click on one of the links, and i go back to the menu, all the links in the 3rd level are active. So if I were to click on a different item, the url changes but the page doesn't refresh nor does the new target accordion open. Here is what I have so far for this area. I'm assuming I have to add something to this script to check every time a link is clicked?
<script type="text/javascript">
(function( $ ) {
$(document).ready(function() {
var anchor = window.location.hash.replace("#", "");
$(".collapse").collapse('hide');
$("#" + anchor).collapse('show');
});
})( jQuery );
</script>
Tried to set up a JSfiddle to show this but failed at it.
I have a navigation set up where I have a parent element and 3 children, the parent has content as do the three children. In bootstrap 3 however I can't access the parent because of the data-toggle for the children. I have it set to hover instead of click already for computer use which changes to the click for mobile use. Without breaking the mobile click on touch devices is there a way to make the parent element navigate to it's page? I've searched around but everything is either in PHP or the questions go un-answered.
This is the code I have for the navigation:
<ul class="nav">
<li>Home </li>
<li><a class="cms menulink" data-toggle="dropdown" href="/about">About</a>
<ul class="dropdown-menu">
<li>Who we are </li>
<li>Identity Mission </li>
<li>Origins </li>
</ul>
</li>
</ul>
I'm looking to either do this with just html/css or javascript/jquery.
Thanks