Hello I'm having some trouble trying to save the current selected tab when the page is reloaded,
I have a bootstrap 3.0 nav nav-tabs setup as my markup, like this:
<ul class="nav nav-tabs" id="feedtab">
<li class="active" id="atlasstab">Atlass</li>
<li id="aviationtab"><a onclick="swapfeeds(2);" href="#avi" data-toggle="tab">Aviation</a></li>
<li id="ittab"><a onclick="swapfeeds(3);" href="#proc" data-toggle="tab">IT&S</a></li>
<li id="processingtab"><a onclick="swapfeeds(4);" href="#it" data-toggle="tab">Plan&Proc</a></li>
</ul>
I am storing the lastactive variable into a cookie, the values are correct so it seems my jquery is incorrect, I'm simply trying to set the active tab to the corresponding 'lastactive' variable, IE : 1, 2, 3, 4
I'm aware that tab index starts at zero so i tried to increment the value +!, but still not working, can someone point out my problem?
this is the javascript im using to try set the active tab:
var lastactive = $.cookie("lastactive") != undefined ? $.cookie("lastactive") : 1;
$(document).ready(function() {
$("#feedtab").tabs({active: lastactive + 1 });
});
Reworked bootstrap example : http://bootply.com/107082
You have to select the child from the cookie as a jquery object and then call .tab('show').
Related
I'm very new to programming & working on creating a website for a work project.
In it, there will be a multi-level (w/sub-menus) vertical sidebar on each page.
The problem I'm facing is that every time a user clicks on one link, the sidebar resets to its original state & will have to redo the same thing & not very UX friendly.
I took the template of the accordian sidebar from here.
I've looked at various search results on both stack overflow & google, but can't seem to understand how to get it working to retain the state of the sidebar, regardless of how many levels are opened.
Can someone please help me with the JS code to get it working?
UPDATE:
Nathan, thanks for writing mate! I really appreciate the help.
So based on your suggestion, I've written the following (shoddy) code that injects the 'checked' attribute to the input element.
But it isn't transferring over to the new/redirected html page when a user clicks on one of the sub-menus. What am I missing here?
var menuIndex = -1;
//extract all the input elements
var inputs = document.querySelectorAll('.parent-menu');
//Find index of the element from the array that has "checked == true"
function indexFinder() {
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked == true) {
menuIndex = i;
console.log(menuIndex);
}
};
}
//Function to set/inject the attribute
function attributeSetter() {
inputs[menuIndex].setAttribute('checked', 'checked')
}
//When a user clicks literally anywhere, it'll run the indexFinder function
//to check if any of the input elements were expanded (i.e. checked == true)
window.addEventListener('click', () => {
indexFinder();
});
//Run the attributeSetter function when a page loads
window.addEventListener('DOMContentLoaded', () => {
attributeSetter();
});
Welcome to the world of programming! Hopefully I can help you out a little!
So what you're asking is something that can easily get a little complicated.
In order to achieve what you're trying to do you need to specify how you want your menu to look on each individual page!
Allow me to present a few menu options for an imaginary site:
Home
Contact
Email
Mail
About
The Company
Our Owner
I've indented the page names based on how we want them to show up in our menu.
So for example you may click on "Contact" and it drops down with the Email and Mail options.
Well, if you take your regular code from that webpage and copy and paste it everywhere. Any time you reload a page (or travel to another page with the same code) it's gonna reset the code! Thus "closing" the menu. Think of it as some sort of multi-dimentional sci-fi. When you load a webpage, you are accessing the main flow of time, any time you make an update to that page it takes you to an alternate reality with that change! but once you reload the webpage you jump back to the main timeline as if you never made that change (when you get into more advanced web dev, this analogy will break down but it should work to help your understanding for now.)
So let's say I click on the Contact > Email option and it takes me to the Email page. Well, in order to make it seem like my changes to the menu bar (clicking "Contact" to expand the dropdown) are still active. I need to hardcode the change into the Email page!
Here's some sample code:
<nav class="nav">
<a class="navOption">Home<a>
<a class="navOption">Contact<a>
<div class="navDropdown">
<a class="navOption">Email<a>
<a class="navOption">Mail<a>
</div>
<a class="navOption">About<a>
<div class="navDropdown">
<a class="navOption">The Company<a>
<a class="navOption">Our Owner<a>
</div>
<nav>
By default the .navDropdown will be closed. However when we add a class to them .active they will expand! If this is my base menu, then how should I make it so that the "About" dropdown is expanded when you are on one of the About pages?
Simply by adding .active to that dropdown!
<nav class="nav">
<a class="navOption">Home<a>
<a class="navOption">Contact<a>
<div class="navDropdown">
<a class="navOption">Email<a>
<a class="navOption">Mail<a>
</div>
<a class="navOption active">About<a>
<div class="navDropdown">
<a class="navOption">The Company<a>
<a class="navOption">Our Owner<a>
</div>
<nav>
Now, my example is different from yours because it's meant more for JavaScript. However, you can use the same concept in your code too.
For you, instead of having a .active class to expand a dropdown menu. You are using a checkbox element! In your codem you have CSS which is checking to see if the checkbox is checked and then it is opening the dropdown menu if it is:
<input class="cd-accordion__input" type="checkbox" name ="group-1" id="group-1">
So, if we use this method on our example webpage. We could set it to be open by setting the checkbox to start out being checked. Like so:
<input class="cd-accordion__input" type="checkbox" name ="group-1" id="group-1" checked>
It's important to note that as you get better and better at web development (eventually learning JavaScript and a server side language such as PHP). You will be able to piece together more advanced methods to doing what we're trying to accomplish! But for now, I hope I was able to break this down for you!
I have many dropdown lists which I created and work properly .When I click on its list title element (here on City ) it opens or shows its dropdown menu below .
Below is an illustration to let you know how all my dropdown list are made .
<div class="dropdown-container">
<div class="title">City </div>
<ul class="dropdown-menu" >
<li class="glist_item">Calgary</li>
<li class="glist_item">Miisssauga</li>
<li class="glist_item">Winnipeg</li>
<li class="glist_item">Vancouver</li>
<li class="glist_item">Surrey</li>
</ul>
</div>
My problem is how to save the state (opened or closed) of each dropdown list after the page reloads so that those who were opened or closed keep their respectives state before reload.
NB: I tried localStorage or sessionStorage before but these cannot store complex data or data with many records since the number of list is undefined .
So I need a persistent data storage capability as well as an ability to store data like array does .
CAN YOU HELP ME ?
You can do it in this way. Just create an array includes information of lists states.
let states = {
list1: "opened",
list2: "opened",
list3: "closed",
list4: "opened",
list5: "opened",
}
Here, I think you can change listx to list id.
You can save this to localStorage by converting it to string.
Then, you can get that string from localStorage and parse it to js object and do what you are going to do.
I am using WooCommerce 3.5.7 , and WordPress 5.0.4.
I have a number of products attached to multiple categories:
e.g.
Product 1, attached to categories A,B, C
Product 2, attached to categories A,Y, C
etc...
I want to hide category C from the site so that it is not visible when the categories are displayed in the site category menu navigation on the front-end.
I have tried numerous approaches but none seem to work,
First Approach:
Hiding via CSS.
The structure of the navigation menu is as follows:
<li class="cat-item ">
<span class="icon-toggle"></span>
category-text
</li>
I attempted to hide the element using the below CSS:
a[href="https://siteurl.com/product-category/category-url/"]
{
display: none!important;
}
The problem with this is it removed the hyperlink and text but the category still 'took up space' on the page. This was because this only hides the anchor element and not the entire <li class="cat-item "> that is the parent of that element.
I was unable to find any way to target the parent of a child element in CSS.
Second Approach: Using pre_get_posts:
https://wordpress.stackexchange.com/questions/90923/pre-get-posts-for-exclude-category
$catid = "-1031";
$excludeCategory = function ($catid)
{
return function ($query)
{
if (
$query->is_home()
&& $query->is_main_query()
) {
$query->set('cat', $catid);
}
};
};
add_action('pre_get_posts', $excludeCategory($catid));
In the above example, the category ID I want to hide is '1031'. But this did not work.
Any suggestions, how I can remove this product category so that it does not display in the front end, but is preserved in the backend?
You could try adding onclick="hide()" to the link, then add the following javascript:
function hide() {
document.getElementsByClassName("cat-item ").style.display = "none!important";
}
I have a set of images for each background page and I am using an array to load each image based on the menu item I click. The menu items have sub menus too and the whole menu system shoudl be in "sync" with the array items:
html menu:
Home (page 1) (menu item hidden but should be "Menu 1" if it would be displayed)
<ul id="menu">
<li>Menu 2</li>
<li>Menu 3
<ul id="sub-menu">
<li>Menu 4</li>
</ul>
</li>
<li>Menu 5</li>
</ul>
Array:
[0] 1.jpg (image for the home where the menu name item isn't displayed)
[1] 2.jpg (this should be for Menu 2)
[2] 3.jpg (this should be for Menu 3)
[3] 4.jpg (this should be for Menu 4)
[4] 5.jpg (this should be for Menu 5)
When the site loads it reads [0] 1.jpg, which is for the home page. But the first item we can click is "Menu 2" since the "Home" button isn't displayed in the menu it should go to [1] 2.jpg.
This is the jQuery I use:
jQuery (function($) {
$("#menu .menu li").each(function (index) {
var item = $(this);
$("a", item).click(function (e) {
e.preventDefault();
api.goTo(index+1);
});
});
});
With "api.goTo(index+1);" (using supersized plugin here) I'm saying (or i think I am) on the first click of the menu item, go to index+1 which supposed to be [1] but it isn't, it looks like it is still [0] which is used for the home page tho. Also, i thougth nested items would still follow the index sequence.
Basically I can't get the correct image for the correct page. It's like I'm not navigating the array according to the menu item i click.
P.s. Index in this case is the 0 based index of the item in jquery loop
I have no idea what you're doing, but you are binding click functions inside a loop using a variable, the variable will change, and the result will not be what you expected.
Maybe this will help ?
$('a', 'li').on('click', function(e) {
e.preventDefault();
var index = this.href.replace('page', '');
api.goTo(index);
});
Because of the submenu just getting the right number from the href on click seems easiest.
When referencing values in an array you have do :
var index = ['1.jpg', '2.jpg', '3.jpg'] //an array, starts with zero
var firstimage = index[0]; //this variable is now the string "1.jpg"
I'm guessing you are just passing a number to the api.goTo(number) function, and that function finds the image link in your array, at least that's what it looks like to me ?
I am trying to enhance my page with a jquery right mouse menu, but am having trouble building the correct structures to populate it easily.
Currently my page contains (among other things) a list of items for the user to review. (an html table) Based on the users role, and the current state and context of the row, the user may take one of various actions on each row of data. (approve, reject, refer it to someone else, ect.) My ASP.Net page handles this by setting the visibility of an imagebutton within the row to true, if the option is available. I can control the Cssclass of each button, and am setting the class of for example the "approve" button to “approvebtn”.
Now I want to enhance my site with a right menu.
I am extending my site with Cory S.N. LaViska’s jQuery Context Menu Plugin -
http://abeautifulsite.net/notebook/80
This plugin allows the default right mouse behavior for any elelement to be overridden with a user controlled context menu. The menu is inserted into your page as an unordered list and becomes visible when it is needed.
<ul id="rightMenu" class="contextMenu">
<li class="details">Details </li>
<li class="addnote">AddNote </li>
<li class="listnote">ShowNotes </li>
<li class="approve">Approve </li>
<li class="reject">Reject </li>
<li class="release">Release </li>
<li class="takeover">Takeover </li>
</ul>
Your app gets a callback when something on the right menu is clicked, and you can interrogate the action (the bogus href element) to see which item it was.
I really like this menu because it is simple to use and is completely CSS styled.
However, I need to do something that this plugin does not nativly seem to support. I need to change which items are available on the menu from row to row. Basically if an Imagebutton (for say approve) is avaiable in the row, then its corrisponding menu item should exist as well.
I was able to gain access to the menu just before it is displayed by altering the plugin slightly, to call my function right before the menu is displayed.
This works, but the logic I had to write seems so brute force, that there must be a better way….
In my callback:
function jimsbuggeredfunction(menu,el)
"el" is the element that was right clicked on (usually a table cell), and "menu" is the menu that this right click is bound to. (so I should be using that name and not hardcoding to #rightMenu')
So, the “if” line finds out if the table row containing the element that was “right clicked” contains a specific button (by its class name) if it does the menu item is enabled, otherwise it is disabled. This process continues for every menu item that I want to be flexable row-to-row.
function jimsbuggeredfunction(menu,el) {
if($(el).parents("tr:eq(0)").find('.approvebtn').length > 0)
$('#rightMenu').enableContextMenuItems('#approve');
else
$('#rightMenu').disableContextMenuItems('#approve');
if($(el).parents("tr:eq(0)").find('.rejectbtn').length > 0)
$('#rightMenu').enableContextMenuItems('#reject');
else
$('#rightMenu').disableContextMenuItems('#reject');
if($(el).parents("tr:eq(0)").find('.releasebtn').length > 0)
$('#rightMenu').enableContextMenuItems('#release');
else
$('#rightMenu').disableContextMenuItems('#release');
if($(el).parents("tr:eq(0)").find('.takeoverbtn').length > 0)
$('#rightMenu').enableContextMenuItems('#takeover');
else
$('#rightMenu').disableContextMenuItems('#takeover');
if($(el).parents("tr:eq(0)").find('.revertbtn').length > 0)
$('#rightMenu').enableContextMenuItems('#revert');
else
$('#rightMenu').disableContextMenuItems('#revert');
if($(el).parents("tr:eq(0)").find('.removebtn').length > 0)
$('#rightMenu').enableContextMenuItems('#remove');
else
$('#rightMenu').disableContextMenuItems('#remove');
if($(el).parents("tr:eq(0)").find('.addnotebtn').length > 0)
$('#rightMenu').enableContextMenuItems('#addnote');
else
$('#rightMenu').disableContextMenuItems('#addnote');
if($(el).parents("tr:eq(0)").find('.listnotebtn').length > 0)
$('#rightMenu').enableContextMenuItems('#listnote');
else
$('#rightMenu').disableContextMenuItems('#listnote');
};
There must be a better way to set this up, so that it also just ignores menu items that I want to display all of the time) but it is escaping me at the moment. Is there a better way to accomplish this?
Thanks,
Jim
I would find some way to create a mapping between the two IDs and some more systematic way of finding the relevant button. For example, if the button always belongs inside a certain cell that has a class, let's say "buttonclass", then something like this should work:
var mapping = {
takeoverbtn: '#takeover',
listnotebtn: '#listnote'
// ...
};
function jimsbuggeredfunction(menu,el) {
var buttontype = $(el).parents("tr:eq(0)").find('.buttonclass').children().attr("class");
$('#rightMenu').disableContextMenuItems(mapping[buttontype]);
}
My jQuery is a little rusty, there's probably a cleaner way of retrieving the buttontype, but that general idea ought to work.