I created a List in a Dropdown panel from Foundation. In that List I have links. This is my List:
<button class="button plzddmenu" type="button" data-toggle="PLZdropdown">Postleitszahl Suche</button>
<div class="dropdown-pane" id="PLZdropdown" data-dropdown data-auto-focus="true">
<ul class="plzlist">
<li><a class="plzclick">10000 - 19999</a></li>
<li><a class="plzclick">20000 - 39999</a></li>
<li><a class="plzclick">40000 - 59999</a></li>
<li><a class="plzclick">60000 - 79999</a></li>
<li><a class="plzclick">80000 - 99999</a></li>
</ul>
</div>
Now I'm using a jQuery script to detect, if the elements were clicked, and when they're clicked, to write them into the Button. This is my script:
<script type="text/javascript">
$(document).ready(function(){
$('.plzclick').on("click", function(){
$('.plzddmenu').html(this);
});
</script>
It all works fine, besides that my Elements disappear from my List, once I clicked them. Anyone know, why they dissapear and how I can fix this to make them stay?
You are moving your items to the button, You need just to change your button html to the clicked a tag html content.
$(this).html();// retruns the html content of the elemtent.
$(document).ready(function() {
$('.plzclick').on("click", function() {
$('.plzddmenu').html($(this).html());
console.log(this);
console.log($(this));
console.log($(this).html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button class="button plzddmenu" type="button" data-toggle="PLZdropdown">Postleitszahl Suche</button>
<div class="dropdown-pane" id="PLZdropdown" data-dropdown data-auto-focus="true">
<ul class="plzlist">
<li><a class="plzclick">10000 - 19999</a>
</li>
<li><a class="plzclick">20000 - 39999</a>
</li>
<li><a class="plzclick">40000 - 59999</a>
</li>
<li><a class="plzclick">60000 - 79999</a>
</li>
<li><a class="plzclick">80000 - 99999</a>
</li>
</ul>
</div>
<script type="text/javascript">
</script>
Related
i using this code, here:
http://jsfiddle.net/wyEq7/
But i want to copy those two buttons under the divs BUT i don't know how to change code to achieve this:
when i click on button a -> button is active, when i click on button b -> button b is active
i want my copied buttons under div to be active aswell :)
When i click upper button b and it shows on red i want the same on down button b and same thing with button a (no matter if i click upper or down button) :)
Maybe you will understand my vision and can help me, i hope so - thanks :D
You can do this by adding a new CSS class to the buttons. The "A" buttons need the same class and the "B" buttons need the same class. In your javascript you can switch which classes are active based on the class the current target has.
// set content on click
$('.button').click(function(e) {
e.preventDefault();
setContent($(this));
});
// set content on load
$('.button.active').length && setContent($('.button.active'));
function setContent($el) {
$('.button').removeClass('active');
$('.container').hide();
if ($el.hasClass('a-button')){
$('.a-button').addClass('active');
} else {
$('.b-button').addClass('active');
}
$($el.data('rel')).show();
}
.container {
display: none;
}
.button.active {
color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flr-wrap">
<ul>
<li><a class="button active a-button" data-rel="#content-a" href="#">a button</a></li>
<li><a class="button b-button" data-rel="#content-b" href="#">b button</a></li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">
AAA
</div>
<div class="container" id="content-b">
BBB
</div>
</div>
<ul>
<li><a class="button active a-button" data-rel="#content-a" href="#">a button</a></li>
<li><a class="button b-button" data-rel="#content-b" href="#">b button</a></li>
</ul>
</div>
This can be done by adding another data attribute.
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" data-group="a" href="#">a button</a></li>
<li><a class="button" data-rel="#content-b" data-group="b" href="#">b button</a></li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">
AAA
</div>
<div class="container" id="content-b">
BBB
</div>
</div>
<ul>
<li><a class="button active" data-rel="#content-a" data-group="a" href="#">a button</a></li>
<li><a class="button" data-rel="#content-b" data-group="b" href="#">b button</a></li>
</ul>
</div>
// set content on click
$('.button').click(function(e) {
e.preventDefault();
setContent($(this));
});
// set content on load
$('.button.active').length && setContent($('.button.active'));
function setContent($el) {
$('.button').removeClass('active');
$('.container').hide();
$el.addClass('active');
$('a[data-group="' + $el.data('group') + '"]').addClass('active');
$($el.data('rel')).show();
}
Note: You could remove the data-rel attribute and use the one data attribute to dictate everything.
Is it possible to hide Bootstrap's .dropdown-backdrop element for a certain dropdown (not all on the page) by using CSS only?
I've determined that this is possible using Javascript, with JSFiddle here. However, I would like to accomplish this without using additional JS if possible.
<!-- First dropdown: no backdrop -->
<div id="firstDropdown" class="dropdown">
<button class="btn-dropdown-add btn btn-blue" data-toggle="dropdown">
First Dropdown ▼
</button>
<ul class="dropdown-menu" role="menu">
<li><a class="a_dropdown_item" href="#business">Business</a></li>
<li><a class="a_dropdown_item" href="#my-events">Event</a></li>
</ul>
</div>
<!-- Second dropdown: yes backdrop -->
<div id="secondDropdown" class="dropdown">
<button class="btn-dropdown-add btn btn-blue" data-toggle="dropdown">
Second Dropdown ▼
</button>
<ul class="dropdown-menu" role="menu">
<li><a class="a_dropdown_item" href="#business">Business</a></li>
<li><a class="a_dropdown_item" href="#my-events">Event</a></li>
</ul>
</div>
<script type="text/javascript">
// Hide backdrop from #firstDropdown.
// This can be done with JS as below. Can it be done with only CSS?
$('#firstDropdown').on('show.bs.dropdown', function () {
$(".dropdown-backdrop").hide();
});
</script>
Found solution: .dropdown-backdrop is a descendant of its .dropdown, which can have a unique ID, so simply using display:none; in CSS works fine, as in:
#firstDropdown .dropdown-backdrop {
display:none;
}
And then all other dropdowns (except #firstDropdown) will still have a backdrop as normal.
See JSFiddle updated.
I've asked this question here but another problem came up so I decided to keep the old one for reference purposes. Old question here.
The old question was just about updating the class of a main-menu based on the url but now things have changed. I will provide the new sidebar below.
Sidebar without any active class yet
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
It would look like this:
Dashboard
Scheduling
--> Foreign Languages
--> ESL Local
--> Summer Workshops
As you can see Scheduling has a sub-menu.
Then how it would look like if I am on the dashboard. The sidebar would look like this
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu [active]"> //without the []
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
So the Dashboard would be highlighted in this scenario
And how it would look like if Im on any of the sub-menu under Scheduling
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu [active]">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li [class="active"]><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
Since I am in the Foreign Languages section. The main header Scheduling and this Foreign Langauges would be active but different class. The active class of Scheduling is sub-menu active while Foreign Languages would just have active only.
And javascript that I've tried no longer applies here since it only handles menus without any dropdown. And it didn't work anyway
Old javascript
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
//alert($('ul a').length);
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
}
//alert(this.href);
});
});
</script>
The goal here is to put a "active" class to the section of the sidebar based on the url the user is in. I've just include('sidebar.php') this sidebar so I would only change this file rather than put a sidebar in each php page file. But then the main heading and the dropdown menu has different active classes.
Found the solution with the help of gecco. The javascript is below:
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().closest("li").addClass('active'); //added this line to include the parent
$(this).parent().parent().closest("li").addClass('active');
}
});
});
</script>
I was already halfway with using php to do this HAHAHAHA. if current_url = db_page_url then put echo class=active. HAHAHA.
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().parent().closest("li").addClass('active2');
}
});
});
</script>
The only change I have done here is adding another line to your JS
$(this).parent().parent().closest("li").addClass('active2');
And here is my style sheet
.active2 > a{
color:red; //what ever the styles you want
}
OR
You can do it without a style
jQuery(function($) {
var path = window.location.href;
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$( this ).parent().parent().closest("li").addClass('active2');
$('.active2 a:first').addClass('active'); //add the active class to the parent node
}
});
});
I am having a terrible time with the first of the following scripts. I'm not sure if the issue is that there are two similar scripts on the page or if my HTML5 code is incorrect. Any help would be appreciated:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('.btn').click(function(){
$('.btn').removeClass('active');
$(this).addClass('active');
});
</script>
<script type="text/javascript">
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
</script>
</head>
And the targeted HTML:
<div class=links>
<ul>
<li>
<a href="#" onclick="MM_showHideLayers('what_we_do','','show');MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','hide')" class="active btn" >WHAT WE DO</a> |
</li>
<li>
<a href="#" onclick="MM_showHideLayers('who_we_are','','hide');MM_showHideLayers('our_mission','','show');MM_showHideLayers('what_we_do','','hide')" class="btn" >OUR MISSION</a> |
</li>
<li>
<a href="#" onclick="MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','show');MM_showHideLayers('what_we_do','','hide')" class="btn" >WHO WE ARE</a>
</li>
</ul>
</div>
As stated, the problem is in the first script where my intention is that the active anchor should change back to the default anchor attribute as the others are clicked by the user.
Thanks again.
Wrap all into document.ready()
<script>
$(document).ready(function(){
$('.btn').click(function(){
$('.btn').removeClass('active');
$(this).addClass('active');
});
}):
</script>
I am working on a JavaScript class so when link is clicked that has a class of parent it will remove it and then add a class of .open
I have got addClass working but is not removing parent class when click on.
And when clicked closed should remove class open and revert it back to parent.
JavaScript Code
<script type="text/javascript">
$('.parent').on('click', function() {
$('.parent').addClass('.open').removeClass('.parent');
});
</script>
HTML Code
<div class="site-container">
<header id="header">
</header>
<div id="column_left" class="active">
<nav id="menu">
<ul class="nav">
<li><i class="fa fa-dashboard fa-fw"></i> <span>Dashboard</span></li>
<li><a class="parent" data-toggle="collapse" data-target="#setting"><i class="fa fa-cog"></i> <span>System</span></a>
<ul id="setting" class="nav collapse">
<li><a data-toggle="collapse" data-target="#user">Users</a>
<ul id="user" class="nav collapse">
<li>Users</li>
<li>User Group</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="page-container">
<div class="container-fluid">
<div class="page-header">
<h1>Dashboard <small>Dashboard Stats</small></h1>
</div>
</div>
</div>
</div>
The whole idea is to toggle classes "parent" and "open" on link click.
Because of dynamical element classes it should be $(static_selector).on('click', '.parent,.open'.
JSFiddle example.
$(document).ready(function()
{
$(document).on('click', '.parent,.open', function()
{
$(this).toggleClass("parent open");
});
});
try something like this
<script type="text/javascript">
$('.parent').on('click', function() {
$(this).addClass('open').removeClass('parent');
});
</script>
You shouldn't add the period in addClass() and removeClass():
Replace:
$('.parent').addClass('.open').removeClass('.parent');
With:
$('.parent').addClass('open').removeClass('parent');
Also, it's more efficient to use $(this) instead of $('.parent') in the event listener, since this is the target of the click event. jQuery won't have to look for .parent, then.
No need to apply . as class when you add or remove class, check here
$('.parent').on('click', function() {
$('.parent').addClass('open').removeClass('parent');
});