I'm trying to build an SPA using jquery. I have some html (nothing special).
I just have a menu and some divs. Depending on which menu item you click, a specific div should be displayed.
I can use .show() and .hide() and make use of id's and data-attributes.
But I was wondering if there are better ways to perform this kind of functionality.
I have simplified your code to the bone to show it easier
Since your ID on the triggers kind of matches your sub-menu, I have used them to target the content. You would put the code in doc ready.
$( "#" + this.id.replace("-tab", "-menu") ) this line simply uses the clicked ID and replaces the -tab with -menu. This is done to work with your current html
var $menu = $('#menu');
var $subMenu = $('.sub-menu');
$('.menu-item').on("click", function() {
$menu.hide();
$( "#" + this.id.replace("-tab", "-menu") ).show();
});
$('.back-btn').on( "click", function() {
// hide all sub-menu, no need to be specific
$subMenu.hide();
$menu.show();
});
.sub-menu {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid" id="menu">
<div id="weed-tab" class="menu-item">
<p class="menu-name">Wiet</p>
</div>
<div id="indica-tab" class="menu-item">
<p class="menu-name">Indica</p>
</div>
</div>
<div class="container-fluid sub-menu" id="weed-menu">weed
<div class="back-btn">
back
</div>
</div>
<div class="container-fluid sub-menu" id="indica-menu">indica
<div class="back-btn">
back
</div>
</div>
Related
I`m trying to build a carousel/rondell with glide.js.
I want the left and right arrows to be displayed outside of the glide-track.
The carousel/rondell should be fully responsive.
Here is a picture of how it should be.
Can somebody help me with that?
Thank you!
You have to write the logic for arrows by yourself as Glide only looks for controls inside its root element.
Use a Glide API and the .go() method on previously queried HTML elements.
var nextButton = document.querySelector('#next');
var prevButton = document.querySelector('#prev');
var glide = new Glide('#glide');
nextButton.addEventListener('click', function (event) {
event.preventDefault();
glide.go('>');
})
prevButton.addEventListener('click', function (event) {
event.preventDefault();
glide.go('<');
})
glide.mount();
Visit Glide API documentation for more informations
You can now customize the buttons by CSS
let glide =new Glider(document.querySelector('.glider'), {
slidesToShow: 1,
dots: '#dots',
draggable: true,
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js#1/glider.min.css">
<script src="https://cdn.jsdelivr.net/npm/glider-js#1/glider.min.js"></script>
<div class="glider-contain">
<div class="glider">
<div>your first content here</div>
<div>your second content here</div>
<div>your third content here</div>
<div>your content here</div>
</div>
<button aria-label="Previous" onclick="glide.scrollItem(glide.slide-1)" >«</button>
<button aria-label="Next" onclick="glide.scrollItem(glide.slide+1)">»</button>
<div role="tablist" class="dots"></div>
</div>
I am in the middle of building my portfolio. What I would like to do:
I would like to let my user 'ask questions' by clicking a chain of divs, depending on each div clicked, possible options connected to that div will then highlight and when the question has been asked, a answer depending on the specific chain would then appear (what type of answer is not important).
So if I have 5 divs:
<div class="what">What</div>
<div class="would">Would</div>
<div class="like">Like</div>
<div class="you">You</div>
<div class="i">I</div>
And my user clicks on the 'What' div, the 'Would' div would highlight (add a class), if then clicked, the 'You' and 'I' divs would highlight and so forth. This would enable my user to ask a question based on the original word/div clicked and which words I then have chosen to 'connect' to that word/div.
I would then like to be able to use the specific string (of words) to fun a function, append a class or such. So that the question 'What', 'Would', 'You' and 'Like' would, as an example show a choice of 3 sentences to choose from, but the question of 'What', 'Would', 'I' and 'Like' would, as an example show a picture of a hotdog or some sort.
I do know a bit of JavaScript, but a little more jQuery, so I would prefer to work in that language if possible. I know that the question is a little complex and that I have not included any code, but I really did not know how to go around this.
Hope this will help:
<style type="text/css">
.highlighted{
background-color:yellow;
}
.container2 , .container1{
cursor:pointer;
margin-bottom: 3%;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".Common").click(function(){
var classes = $(this).attr("data");
$( ".highlighted" ).removeClass( "highlighted" );
$( "."+classes ).addClass( "highlighted" );
});
});
</script>
<div class="container1">
<div data="FRUITS" class="Common">FRUITS</div>
<div data="VEGETABLES" class="Common">VEGETABLES</div>
<div data="ANIMALS" class="Common">ANIMALS</div>
<div data="BIRDS" class="Common">BIRDS</div>
</div>
<div class="container2" >
<div class="BIRDS" >Parrot</div>
<div class="FRUITS" >Apples</div>
<div class="VEGETABLES" >Cucumber</div>
<div class="FRUITS" >Oranges</div>
<div class="VEGETABLES" >Carrot</div>
<div class="ANIMALS" >Lion</div>
<div class="BIRDS" >Dove</div>
<div class="ANIMALS" >Tiger</div>
</div>
I don't understand your question. Maybe like this?
<style type="text/css">
.highlighted{
background-color:yellow;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".test").click(function(){
var id = this.id ;
id++;
if(id>5){
id =1;
}
$( ".test" ).removeClass( "highlighted" );
$( "#"+id ).addClass( "highlighted" );
});
});
</script>
<div class="what test" id="1">What</div>
<div class="would test" id="2">Would</div>
<div class="like test" id="3">Like</div>
<div class="you test" id="4">You</div>
<div class="i test" id="5">I</div>
The goal its to have a menu activated by a button.
This menu can have any type of content inside, so it must adapt according to its content.
In this example i have an accordion, but could be just a grid, or a form, since i'm making it as a bootstrap/jquery widget.
The problem is that the menu changes size after opening and closing it several times.
How can i improve it to make it adaptable to content and consistent, regarding that it will accept different contents.
Code
http://jsfiddle.net/fpmsusm5/
Javascript:
var button = $('#button');
var dialog = $('#modal');
button.on('click', function () {
dialog.toggleClass('hide');
dialog.position({
my: "right top",
at: "right-2 bottom",
of: button
});
})
$("#openpanel1").on("click", function () {
var curr_panel = $("#panel1")
curr_panel.toggleClass('show hide');
curr_panel.collapse(curr_panel.hasClass('show') ? 'show' : 'hide');
});
...
/* ensure any open panels are closed before showing selected */
$('#accordion').on('show.bs.collapse', function () {
$('#accordion .in').collapse('hide');
});
HTML:
<div class="pull-right">
<a id="button" class="btn">Settings</a>
</div>
<div id="modal" class="modal hide" style="overflow- y:hidden;width:auto;height:auto;max-height:100%; max-width:100% ">
<div class="modal-body" style="overflow-y:hidden; width:auto; height:auto; max-height:100%; max-width:100%">
<div id="accordion">
<button id="openpanel1" type="button" class="btn" style="width:100%;text-align:left"><i
class="icon-search"></i>Page Information
</button>
<div id="panel1" class="collapse">
<div class="panel-body">
Contents panel 1
</div>
</div>
....
</div>
</div>
</div>
Thanks for your insights.
Every time you position the dialog, it's changing the left property, and that's causing it to resize.
You don't have to reposition it every time you show/hide it, you can just do it once:
var dialog = $('#modal');
dialog.position({
my: "right top",
at: "right-2 bottom",
of: button
});
button.on('click', function () {
dialog.toggleClass('hide');
});
Then it stays the same size. Updated fiddle: http://jsfiddle.net/fpmsusm5/1/
I was wondering how would I be able to make a sub nav where only the sub nav changes once I've clicked one of the links in the navigation bar instead of the whole page refreshing if you can help me much appreciated
http://jsfiddle.net/qrn8Q/
Thank you.
HTML Code:
<header class="header">
<div class="container">
<div class="header-primary_container">
<a class="header_brand" href="#"></a>
<div class="navigation-primary_right">
<div class="navigation-primary">
<nav class="navigation-primary_links"> Home
Designs
About Us
</nav>
</div>
</div>
</div>
</div>
</header>
<nav class="sub_nav">
Home
Sign in
Sign up
</nav>
</div>
What you need to do is to use either Ajax or iFrame. For onclick event of those links, you can write your javascript codes to load the new content.
You can accomplish this with jQuery. check out my code. it's pretty simple and easy:
http://jsfiddle.net/mELsr/
$('.nav_icon').click(function() {
$('nav.sub_nav:visible').fadeOut(300); // 1
$('.selected').removeClass('selected'); // 2
var classKey = $(this).attr('id'); // 3
$('nav.'+classKey+'_sub_nav').fadeIn(500); // 4
$(this).addClass('selected'); // 5
return false; // 6
});
In plain english: whenever on of the .nav_icon's is clicked, fade out the visible sub_nav (1) and remove .selected class from the .nav_icon that was selected (2). fetch the clicked item's id attribute (3) and find the sub_nav related to it and fade it in (4) and then add .selected class to the clicked item (5). at last return false; in order to ignore the links default behavior (6).
Hope it help you get started.
How can i get a listener woking for buttons inside a data-content=""
No problen getting the a within the li but not the ul > li > a > data-content > a
<div class="row">
<div class="span12">
<div class="tabbable indent-1">
<ul class="nav nav-tabs">
<li class="active"><a class="bgw" href="#psusel" data-toggle="tab">TAB 1<span style=" font-size:18px;">>></span></a></li>
<li>TAB 2</li>
</ul>
</div>
</div>
</div>
---JS Script----
var make_active = $('#make_active');
var make_li_active = make_active.attr('data-content');
var listen_here = $('#listen_here');
make_active.click(function () {
alert(make_li_active)
});
listen_here.click(function () {
alert("GOT IT")
});
This is not so obvious to achieve. Bootstrap plugins has very poor implementation. Particularly tooltip and popover don't trigger any events and has no any methods to reach their content. At least in the official documentation.
But there are some tricks that you can apply to attach events to popover content. Popover stores it's object at the .data('popover') of the element. And that object itself has a method to get a popover html object:
make_active.popover();
var popoverBox = make_active.data('popover').tip();
Unfortunately it is not yet populated with the content that you defined in the data-content attribute. But you can attach delegated events on it:
popoverBox.on('click', '#listen_here', function(){
alert('POPOVER B1');
});
Profit. Live example: http://jsfiddle.net/3FzDL/