I'm using the following component:
http://www.jqueryscript.net/menu/Lightweight-Drilldown-Menu-Plugin-with-jQuery-Bootstrap.html
I want to adjust the some built-in functionality:
when an item from the lowest level is clicked,
the menu closes.
when opened again, the menu goes back to the last level that was accessed, as in the level where the last item was clicked before the menu closes.
I would like to prevent that the menu closes # event 1. & I would like to jump back to the 'main menu' as in the highest level of the menu.
I know i have to look in the 'bootstrap-drilldown-select.js' file, but could anyone perhaps shine some light on how this code exactly works and where i should put my adjustments?
Thanks in advance!!
Edit 1
For the redirect to main menu (2.): I found out that the difference between a list item which allows a drilldown to a deeper level, has the class 'hasChild' added to it. #'bootstrap-drilldown-select.js' line 107-108.
I think that there is an on-click event (somewhere) that checks whether or not the clicked item has a 'hasChild' class. If not, the event defined by 'onSelected' is fired. The only thing I'm still looking for is, where this event is. Any suggestions/help?
Because I couldn't find this event, I thought that I might call the initialize function when the 'onSelected' event is fired. Kinda like line 26-43, or more precies line 35 # 'bootstrap-drilldown-select.js'. However, I'm not able to reach the function 'makeDropdown' from my external js-file.
Any comments/advice on this note?
I found that redirect to main menu after selected one item, just call the function makeDropdown after this line: defaults.onSelected(event);
if (!data) {
defaults.onSelected(event);
makeDropdown(element, null, '', true); //this returns to main menu
element.dropdown('toggle');
isVisible = false;
return false;
}
The third variable in this function is the path, so if this is empty, it returns to the original data, like this line when the element is created:
/* create a dropdown object */
makeDropdown(element, null, '', false);
I hope that helps you in your investigation.
Related
I am having problem in overriding the pagination code given by grid. What I need to do is kind of hack the pagination given by my grid.
We are having a lot of records. So, what we are doing we are loading records to a threshold limit.
So, lets assume the threshold limit is 50 and page size is 10 so there will be 5 pages. So, when user comes to 5th page next button provided by the grid will be disabled.
So, what we need to do we need to make it enable and if user clicks on it I need make ajax call and load another 50 records(threshold limit) in the grid.
After that I need to disable this event so that next time user clicks it should not do the make ajax call and it should work like previously (by going from 1st page to 2nd page and so on)
All the above things mentioned I am able to do. But here problem comes when user goes to 5th page and go back to some other page let say 3 without clicking next button. Now, after going to 3rd page
when user clicks on the next page button it is making ajax call as I have make the button enable when user comes to 5th page and provided a click event to it.
So even if I provide a condition to run only on when grid current page is 5 then also it is running because after going to 5th page I will make button enable and bind and event. So, as I provided the event it will run without even specifying the condition.
How do I make the click event work as default and only when the user is at 5 it will make the ajax call.
This is my code -
///grid Current page will tell us which page we are in the grid.
if(gridCurrentPage==5){
query(".dojoxGridWardButton").forEach(function(element) {
query(".dojoxGridnextPageBtnDisable").replaceClass("dojoxGridnextPageBtn", "dojoxGridnextPageBtnDisable");
query(".dojoxGridlastPageBtnDisable").replaceClass("dojoxGridlastPageBtn", "dojoxGridlastPageBtnDisable");
});
callNextButton(gridCurrentPage)
}
And this is the function.
function callNextButton(gridCurrentPage) {
var target = dojo.query(".dojoxGridnextPageBtn");
var signal = on(target, "click", function(event){ ///Adding click event
if (gridCurrentPage ==5 ) {
var deferred = new dojo.Deferred();
setTimeout(function() {
deferred.callback({
called: true
})
}, 2000);
if (checking some conditions) {
////////doing Ajax call
deferred.then(function() {
//calling a callback
})
},
error: function(e) {}
};
})
signal.remove(); //Removing click event
}
Note : My grid is enhanced grid which is part of dojo toolkit. But probably its a design issue so, any comments/advices are welcome.
I really need an advice here. Please anyone can find the problem where it is it will be reqlly helpful.
I have a need for using the actions.mouseMove() fuction to hover over a reactive dropdown element. After doing so and clicking the elemen, that reactive dropdown persists so I now need to find someway to move the mouse away from the hover box. I do this by including a return browser.actions().mouseDown().perform() after I click my link. Here is my full function
this.changeCurrentClient = function() {
var profile = $('[id="hdr-profile-wrapper"]');
var changeClient = element(by.buttonText('Change Client'));
browser.actions().mouseMove(profile).perform();
changeClient.click();
return browser.actions().mouseDown().perform();
};
This works fine, however the problem is that when I run this on the grid, it sometimes does not properly do the moveDown() function to break out of the hover menu. I assume this is because it runs a bit slower on the grid and the DOM takes a bit longer to load. Is there a better way to break out of this rather than refreshing or doing a hard wait?
I have tried implicitly waiting for another element on the page outside of the hover menu before doing the mouseDown(), however it seems like that first action.perform() pretty much isolates you to that hover menu, so no other elements outside of the hover menu can be found. Is a refresh really the only way to do this?
I'm trying to add a button to a GeoExt application. Ideally I want the button workflow to be:
User clicks button. Button is now "Toggled" to on.
User clicks somewhere on the map.
(This always works) Function behind button is called.
Button toggles off.
I have this as my options code:
/* Options to be passed to my create function. */
options: {
tooltip: 'Google StreetView',
iconCls: "icon-streetview",
enableToggle: false,
pressed: false,
toggleGroup: "toolGroup",
id: "streetview_tool"
}
I can add the button to the toolbar, but the toggle doesn't work properly. I've tried just about every combination of parameters I can think of.
a) Using the above, I get a console error from GeoExt:
TypeError: this.control is undefined. Steps 1 to 3 (above) work this way.
b) If I remove the toggleGroup, I don't get the error (unless enableToggle has been set to true), however the button then never toggles in the first place (steps 2 & 3 are the only ones that happen using this method).
There's also a second (Bigger!) problem - it doesn't matter whether the user has toggled the button, every time I click on the map that functionality is triggered!
So my question - how do I get this button-toggle workflow to work?
Thanks.
I don't know enough specifics about geoext, but if I understand the issue correctly you can't untoggle the button when you click on the map. I've setup an example which I hope is somewhat similar enough to your issue: https://fiddle.sencha.com/#fiddle/3ms
The solution simply calls
Ext.getCmp('streetview_tool').toggle(false)
when the body of a panel is clicked. Note that this example uses 3.4. Let me know whether this helps or if there's more to the picture I'm missing.
I am having 2 issues with scrolling, i figured it would just be easier to ask them both in one post.
Before I ask, below is my jQuery code im having issues with.
$("a").click(function() {
if(this.hash){
$("#main").animate({
scrollTop : $("h3[name="+this.hash.substr(1)+"]").position().top - 120
},2000,"easeOutExpo");
}
});
Situation: What I have going on in my page is basically i have a side menu with a couple lists. Each item in each list links to a anchor in my main div section, or my 'content' section. When a list item is clicked, the code above runs and it scrolls to one of the anchors.
Issue 1: When i click on a item in one of the lists, it scrolls down to a anchor which works just fine. But when that same item is clicked again, the main area scrolls back up to the top of the div. My thought to fix this was to check the current 'scrolled to' location of the div, and then not allow the code to run again if the location hadn't changed since the first click but i couldn't get that to work. Any suggestions on how to fix this issue?
Issue 2: Again as stated above, when i click on a item in a list it scrolls down to a anchor. What i then want to be able to to is click on a different list item and have it scroll to that position. The problem is when i click on a different list item, it scrolls to some random position in the main div, positions i haven't even anchored yet. Can anyone explain how I can make it so i can scroll from anchor to anchor?
Note: Please respond by having issue 1 or issue 2 above your explanation so i know which one your referring to. Thanks
EDIT: Thanks to Roko's help i got it working. For future viewers here is the fiddle of a working demo: http://jsfiddle.net/TsUcc/3/ and below is what the finally jquery code looks like
$("a").click(function( e ) {
e.preventDefault();
if(this.hash){
var target = '#'+ this.hash.substr(1);
var destination = $(target).offset().top - 10;
$('#main').stop().animate({
scrollTop : '+=' + destination
}, 1000);
}
});
LIVE DEMO
ISSUE 1:
you probably use something like: goto and you did not prevented the browser default behavior which is simply done by passing the event to the click handler like:
$("a").click(function( e ) {
e.preventDefault();
// .....
});
ISSUE 2
The HTMLelement position you're using is just a passive position of an element relative to it's positioned parent element.
which means that an element can have a position of ie: 30 even if it's at the bottom of your page.
To fix that use
offset().top
Also worth reading: https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect
ISSUE 3
H3 elements are not supposed to have a name attribute.
Use an ID for that purpose.
Why?
if you have a nice web and you have some sexy stuff at the bottom of your page, I can send a link to my friend by referencing your web page and the ID in a link like:
example.com#bottomLady
and he'll get immediately my thoughts without the need to scroll your page all the way down.
Alright, I'm using the UberMenu Plugin for Wordpress. When you click the parent item in a menu, the child-menu slides down into position underneath and stays put. After clicking on a child-menu link, the normal function is for the child-menu to disappear and be reactivated by click on the parent item again.
So, I wanted the child-menu to stay visible after going to a child-page and afterwards continue with the original functionality after that very first instance. Miraculously, I've gotten this far with success.
You can view the working menu/sub-menu here: http://goo.gl/MC8Aw
I added this code to the UberMenu.dev.js:
jQuery('document').ready( function($){
var id = $( '#megaMenu ul.megaMenu > li.current-menu-item, #megaMenu ul.megaMenu > li.current-menu-parent, #megaMenu ul.megaMenu > li.current-menu-ancestor' ).live().first().attr( 'id' );
uberMenu_openMega( '#' + id );
});
You can see the entire .js file here: http://goo.gl/xZd6g
Alright, so the only issue is that when the child-page loads and the child-menu is triggered immediately by the above code, it's retaining the slide transition from the primary functionality. This gives a delayed look/experience to the child-menu that I want to avoid/minimize.
Is it possible to amend the above code (which seems already set up to only affect the first appearance of the menu) so that it also ignores the slide transition needed throughout the rest of the plugin?