Menu dropdown not working after adding slick.js - javascript

Kindly check this page: https://cutt.ly/mDYu9Nr (I have removed the unwanted section here to make things less complicated).
After adding thumbnail carousal website top menu had stopped working.
After some digs I found out that "slick.min.js" is giving me trouble. If I removed this script menu dropdown work properly.
It will be great if someone help me in this regards. I have already spent 2 days and tried almost every solution which are on internet like adjusting JS sequence, css solution etc.

Related

Bootstrap 3 carousel buttons on top right

I found this article Bootstrap 3 Carousel with buttons which contains the link to https://www.codeply.com/go/bp/113737.
Which is almost, and i would say exactly that im trying to do with my custom carousel.
Im trying to make a carousel which has the button on top right,
something like this
https://imgur.com/a/rBCF9kh
So as you can see there are three buttons Lumpia Longanisa and Tocino
So when the second button is clicked, Longanisa, it will toggle with new image, the same goes for Tocino and so forth, just like a normal carousel.
I'm quite new to bootstrap, and im having a hard time applying the same scenario on the post i found which seems to use an older version of bootstrap.
So if someone could lend a hand please, i would appreciate it and like how to apply the javascript or where to in case.
Or if not bootstrap carousel, maybe a different slider approach can be helpful as well.
Thank you in advance for guiding me.
I tried the one with this post Bootstrap 3 Carousel with buttons using this guide https://www.codeply.com/go/bp/113737 but im not sure if its working with the current version of bootstrap, or if im inputting the correct $('#myCarousel').carousel(); somewhere

Owl Carousel - only scrolls 1 tab

on this site site link there is a owl carousel within a tab system however only the first tab is able to scroll using buttons, when switching tabs the buttons no longer work, any ideas what causes this or how to fix it?
even if the 2 sliders are in different containers, as you can see the bottom containers arrows will slide the content in the top and then stop working for all others.
well i've tried editing the css classes for the .active although i think its most likely javascript, if it didnt load completely id straight guess that but the autoplay and other files are all working and ive run out of options to think of so if anyone else has had this issue or could point me in a different path to look for a solution that would be really helpfu.
fixed now. seems the person who originally coded it used a weird mixture of different scripts all together and different structure, so stripped away those and set it to use the one set of attributes.

jQuery Quicksand grid alignment issue (Bootstrap based website)

i'm having some issues integrating Quicksand filtering into my item list, not sure if it's js or css problem.
This is the URL to the page with the Quicksand filtering integrated:
http://yarday.com/pax
As you can see, if you try to select any filter option, the animation starts as it's going to align properly, then jumps out of grid at the end.
This is how the grid is supposed to show:
http://yarday.com/paxific
I'm assuming it could be a CSS issue, but i am also using two different versions of jQuery (using no conflict) so that's why i thought it could be an issue in the plugin.
Any help would be really appreciated!
Thanks for the info Tyler, i thought the code was visible from the URL.
Anyway, i think the issue was on the css filter navbar float, i got them to align properly now, even though it's still a bit jumpy at the end.

CSS Valid But Not Applying Dynamically

DISCLAIMER: I have searched this topic to no avail, this seems to be a Chrome only issue.
Safari for OSX and Firefox OSX work fine.
So I have some styles for an element which do not dynamically apply, i.e. on page load it works fine but as i use the page, it doesn't.
Here's a pen to demonstrate:
http://codepen.io/craig-wayne01/pen/xcIid
and the selector thats giving me the problem is this one
label.pagination:first-of-type,
label.pagination:last-of-type,
input.pagination[type=radio]:checked+label.pagination,
input.pagination[type=radio]:checked+label.pagination+input[type=radio].pagination+label.pagination
So basically this is an example of a pagination footer area
and what im trying to achieve is simply changing the colour of the next number
so if i click on #4, #5 needs to change colour as well
which doesn't work.
Then pen is quite self explanatory. Additionally I can't fathom why this doesn't work. Any help would be greatly appreciated
The only thing i can think of is that css does not work backwards, but i've used similar selectors in the past and i've had no issue.
From my experience attempting something similar for a CSS only mobile menu, checking or focusing elements doesn't force a redraw for sibling elements. I had this trouble on the iPad.

Mega Menu and tabs with jquery

I need to create a mega menu similar to something used for this website.
this image may give more idea about what i am trying to achieve.
So far i am not able to find anything similar to the one used on website.
I came across jQuery Tools website with nice tabs. I am trying to integrate this my menu so that i can get an impression of mega menus.
So far i am not sure how i can integrate it will my navigation and make it look somthing similar to what is show in the image above.
I tried to make changes to css so that description div will show up next to sub menu but it is not coming up right.
Help in this regard is appreciated.
MY CODE of jsFiddle
I would appreciate help in this reading.

Categories