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 ?
Related
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";
}
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').
I've this markup
<ul id="body">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
</ul>
When an item is clicked, is there a way in jQuery to identify in the DOM, the previous and the next li so that I can use jQuery functions on those elements??
Say, if the person clicks on item 2, i want to hide item 1 and item 3.. similarly, if the user clicks on item 3, hide item 2 and item 4 (previous and next item in the list).
Get a pointer to the previous and next elements.
Select all siblings that are not the previous and next elements.
Hide the previous and next siblings.
Show the other elements.
This allows the code to work more than once :)
$('#body > li').click(function() {
var prev = $(this).prev(),
next = $(this).next(),
siblings = $(this).siblings().not(prev).not(next);
prev.add(next).hide();
siblings.show();
});
jsFiddle.
If you don't care if the other elements are hidden forever once clicked, simply remove the all references to the siblings variable and its relevant code.
$('#body .item').click(function() {
$(this).prev().add($(this).next()).hide();
});
Edit:
$('#body .item').click(function() {
$(this).siblings().show().end().prev().add($(this).next()).hide();
});
From the comment, This will show all before hiding the prev and next li elements.
I am working with scriptaculous' autocomplete. I am returning an unordered list but each element is a link. For example,
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
If you scroll down the list using the arrow keys and hit enter, Autocomplete will only grab the text instead of activating the link, as it is designed to do. What I want, is for autocomplete to go to the new page. Is there any way to do this, and I have no problem editing the scriptaculous code to do so.
Use the afterUpdateElement, as in the example on http://madrobby.github.com/scriptaculous/ajax-autocompleter/
new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "/url/on/server", {
afterUpdateElement : function(text, li){
document.location.href = "http://mypage.com/page/" + li.id;
}
});
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.