I have 4 or 5 JSON objects that are created dependent on a menu item being click, what I am wanting to do is,
The user clicks a menu item (Walls for example)
A navigation bar is show that show thumbnails of the choice of walls that are available, the navigation bar is long and thin (horizontal across the page), with jCArousel it should show 4 choices ad then on clicking the next button it should scroll to the next 4.
If the user then clicks Doors, the walls navigation should dissapear, the subnav (and jcarousel) should then get populated with doors.
I am not having a problem populating the jcarousel with new data, I am having a massive issue getting it to scroll once it has been repopulated.
For some reason I cannot get the Fiddle working with the JSON object, but click floors and the doors and you should get hte GIST of what I am trying to achieve.
The function is causing a problem I believe is,
function mycarousel_itemAddCallback(carousel, first, last, data)
{
// Simply add all items at once and set the size accordingly.
console.log(data);
for (i = 0; i < data.length; i++) {
$("#secondary ul").add(i+1, '<li><img src="http://placehold.it/141x75"/></li>');
}
$("#secondary ul").size(data.length);
}
Do I need re-initializze the carousel after adding new data or something?
From documentation:
reload
Reloads the carousel. This method is useful to reinitialize the
carousel if you have changed the content of the list from the outside
or want to change options that affect appearance of the carousel at
runtime.
$('.jcarousel').jcarousel('reload', {
animation: 'slow'
})
Related
My e-commerce store requires three tier menu item to achieve the multi-column megamenu appearance that I want, and although its a bit weird I have found a workaround on desktop by simply hiding the "middle" menu item as "shown" here by the red box (as in there are menu items there, but they are display none).
This is honestly fine, as I hover over the parent menu item, and then only see the li menu items. However my issue is actually on mobile, where the expanding of the top menu item requires a click, and then I need to click a second time to expand the "middle" menu item as you can see in the screenshot below:
There is an event attached to both "caret" clicks, and that is:
function(e) {
e.target.closest("li").classList.toggle("dropdown-open"), e.preventDefault()
}
This attaches an event to the menu item as shown in this screenshot:
..and that allows the submenu to appear below "Weighing Categories" like this:
So my goal (on the mobile viewport) is to show all the submenu items (with the exception of the middle one, in this case "weighing categories") when the categories caret is clicked. I have tried a CSS approach (which is what the dropdown-open class is basically adding), but this results in it always showing (whereas I still want to keep the first click, just not the second click requirement).
body .main-navigation ul.menu li.menu-item-has-children > .sub-menu-wrapper { position: inherit; left: auto; opacity: 1; transform: translateX(0); }
I have also tried multiple variations of using JS to insert a class, and I think this is on the right track, but missing something lol.. I must admit that my JS is poor, mainly trying examples I have found during my research and adapting them.
jQuery("nav-menu-item-1247 .caret").click(function() {
jQuery("#nav-menu-item-6721").addClass( "dropdown-open");
});
The above (and note that it is not working) was supposed to add "dropdown-open" proactively to the weighing categories menu item ("6721") when the top menu item (the "1247" is the "categories" one) is clicked. Perhaps the prevent default in the default JS is blocking it, I am not sure and do not have the skill to troubleshoot it lol.
I would really appreciate some help, been fighting with this for almost 4 hours and I am probably doing something stupid lol. I can share the URL if needed, it is just locked behind a user/pass before it goes live, but I can temporarily remove it.
Thanks :)
We are using react-virtualized table in our app. It is an multigrid. Suppose the table has 10000 rows and the table is currently scrolled to the 5000th row. What we want it, by clicking on a button the table should jump to the first row (scroll amount should be 0)
There are existing props such as scrollToRow or functions scrollToPosition or scrollToCell of the Grid, but they help you scroll down, for example you are at the 1.row and using them you can set scroll amount to a specified value and jump to for example 100.row. But you can not go backwards, I mean scroll to first row when currently we are on the 200.
I found a temp. solution by calling:
scrollToTop = () => {
setTimeout(function() {
this.bodyGrid.bottomRightGrid.handleScrollEvent({scrollTop: 0});
}, 100);
}
But it works only when called with setTimeout which does not seem fine.
I could not find any other way to change the scroll amount manually. My scenario is, user fetches 1000 rows and scrolls down to the 800.row. Then user clicks a button and it fetches some totally different new 100 rows for example, when the table is re-rendered (datasource is updated), it still keeps scrolling at the old position, even if whole datasource is replaced with a new one. I want that the scroll position goes to start, first row. But the table remembers the old scroll position at the 800 row, but currently we have only 100 rows so it scrolls a very out of bound location and points to a wrong position.
I am using a SectionList to display a list of data. I have a top menu where a users can click these buttons to display a different set of data on the list, think of it like tabs. All this is working fine, the correct data is being shown and it's refreshing properly.
However the problem is that when a user scrolls down, say halfway, on the list then clicks one of the buttons at the top the list does not show the refreshing animation (the spinning circle) anymore. I have correctly implemented the refreshing property and that works whenever I pull down to refresh.
Also if you scroll to the top of the list then click one of the buttons the refresh icon also shows up as intended. The problem is whenever you scroll down the list and then set the refreshing property the list does not show the icon.
<SectionList
refreshing={this.state.isFetching}
onRefresh={() => this.onRefreshList()}
....
...
/>
Then whenever I make a call to start updating the data...
this.setState({ isFetching: true }, function() {
....
....
//all code in here works fine the list shows activity monitor no problems
//when you scroll down on the list THEN
//call this the activity monitor can't be seen on the list
});
So to counteract this I tried to scroll to the top automatically before calling my actual refresh. This kinda of works but it looks really bad. There is no callback so I don't know when the list has completed scrolling to the top.
//this also works properly and scrolls the list to the top but
//it's really jumpy and looks terrible because the data is immediately
//replaced while it's scrolling to the top, the loading animation can't be seen.
this.sectionListRef.scrollToLocation({
animated: true,
sectionIndex: 0,
itemIndex: 0,
viewPosition: 0
});
Is this a known issue? Are there any workarounds or am I just doing something wrong here?
I am trying to integrate Royal Slider within my website. However I am having trouble with the first slide when the slider is within tabs on my page.
For example, you can see at http://christierichards.co.uk/slidertest/newtemplatefix.php that the slider is working perfectly (there is no styling as of yet).
On this page http://christierichards.co.uk/slidertest/newtemplate.php when you click on before and after (this is the tab I want the slider appearing in) the first slide does not show until you click tab 2 and then the height seems to appear.
I have managed to fix it within the tabs but this is only by adding a fixed height onto .rsOverflow. I cannot use a fixed height as I need the auto-height feature to work for clients to add their own photos. So I need a different way around it.
There must be a piece of conflicting code somewhere however I am stumped! Any help would be appreciated.
Thanks
The slider is being initialised while it is hidden behind a tab. Because of this, it cannot calculate its height and width, and is invisible. When you change to the next item in the slider, the heights and widths are recalculated, which is why you can see it again.
You can either add an initial height to .rsOverflow, or (re)initialise the slider when the tab is clicked, and the contents are made visible.
For example:
var sliderInitialised = false;
$j( "#tabs" ).tabs({
activate: function( event, ui ) {
// Check the activated tab, is the one that contains the slider
if(!sliderInitialised) {
// Initialise slider ...
sliderInitialised = true;
}
}
});
Alternatively, the slider could be initialised before all the tab contents are hidden.
I have created a web page which uses the jQuery Tools' Scrollable component, and the page is based on the minimal setup demo. As in this demo my page also uses scrollable items with room for five thumbnail images, but when my page loads for the first time I want only a single scrollable item containing only three thumbnail images, with the remaining two image slots empty. I assumed that I could simply replace the three scrollable item divs from the demo with a single scrollable item div and everything would look fine, however when I do that I end up seeing inoperable left/previous and right/next icons, even though there are no previous or next scrollable items to scroll to.
I have an example of what I'm trying to do on the jsfiddle site here. It's essentially the above referenced demo with the non-applicable scrollable item divs and child imgs commented out.
How can I initialize the scrollable such that I only have a single scrollable item on the page without having the non-applicable left/previous and right/next icons appear?
Thanks in advance for your help, suggestions, etc.
best I can come up with is
if($(".scrollable .items div").length < 2) $("a.browse").hide();
after the initialization.
I wanted the browse buttons to be hidden by default, then only display them if needed.
In the css, default the a.browse to visibility: hidden
Then in the initialization:
$(".scrollable").scrollable().each( function() {
var scroller = $(this).data("scrollable");
scroller.getNaviButtons().css('visibility', 'visible');
if (scroller.getSize() <= 1) {
scroller.getNaviButtons().addClass('disabled');
}
});
This seems a bit hacky, but avoids temporarily displaying the browse buttons if they are not going to be seen.