I'm facing a challenge trying to integrate a bootstrap collapsible element into a bxslider slide without success.
Does anyone have any suggestions on how to resolve this issue?
Feel free to check out my sample code on the following link:
I'm facing a challenge trying to integrate a bootstrap collapsible element into a bxslider slide without success.
Does anyone have any suggestions on how to resolve this issue?
Feel free to check out my sample code on the following link:
After receiving a helpful explanation from Daved about the root cause of the issue, I delved deeper into it and reached my own conclusion.
I discovered that Bxslider offers an infiniteLoop option which, when set to false, prevents the creation of clones for slides, allowing the IDs to remain unique.
The reason why the collapses may appear not to open is due to bxslides lacking dynamic height (which differs from adaptiveHeight that calculates the slide's height before displaying it). Adding content below the slide reveals that the collapsible functionality does indeed work.
In my example, clicking on the second slide initially opens it. If you navigate away to another slide and then return, adaptiveHeight adjusts so that the content displays properly.
Currently, the only missing element is dynamic slide height - I have submitted a request on GitHub in hopes that it will be considered. This feature would greatly benefit users as it enhances usability.
You can view my updated example with the provided code here:
Upon reviewing the code, it appears that bxSlider is cloning elements for the slider without including their data and events. Due to this, the collapse functionality is not working because the Bootstrap event handler is not applied to the cloned elements.
A suggested solution would be to utilize the "onSliderLoad" event to directly trigger the collapse from Bootstrap.
Here’s an updated example:
$(function () {
var sideslider = $('#sideslider').bxSlider({
adaptiveHeight: true,
touchEnabled: false,
pager: false,
slideWidth: 270,
onSliderLoad: function () {
$('.bx-viewport').on('click','a.collapse-toggle', function () {
//var ele = $(this).parent().find('.collapse-box'); // element to to collapse (UL)
//ele.collapse('toggle');
$(this).parent().find('.collapse-box').collapse('toggle'); // one liner
});
}
});
});
UPDATE: After further examination, I realized that my previous example using the ID was flawed due to the cloning issue I mentioned earlier. doh
The generated markup can be viewed here:
It is important to note that IDs cannot be reused as they are unique per item per page according to specifications. Although clicking the DROP button may seem functional, the action is triggered on the first element matching the ID, typically hidden within the slider.
For a visual demonstration, refer to this video: - Pay attention to the yellow highlights on the left indicating the changes taking place in elements not visible on screen.
Furthermore, upon closer inspection, another issue arose when attempting to use the Bootstrap collapse feature. When triggering collapses via JavaScript, avoid using Bootstrap classes and data-toggle attributes to prevent conflicts.
To resolve this, remove the Bootstrap data-toggle attributes and classes, introduce custom ones, and reference the specific element within the slider. This process is simpler than it may appear. Additionally, you may consider binding the "click" event to the sideslider using "on" instead of solely relying on the onSliderLoad event.
View the Fiddle for a live demo: http://jsfiddle.net/yJTJf/2/
I am currently developing an application within the SharePoint platform that requires making three distinct AJAX requests: Firstly, a call to the Search API is made to retrieve all individuals with a specific job title associated with the account ID (sea ...
I have a link that, when clicked by the user, triggers a page reload. I accomplished this using the method below...... HTML <div data-ng-hide="backHide" class="offset6 pull-right"> <a href="" data-ng-click="backLinkClick()"><< Back ...
Be sure to check out this interesting link: There are six drop down boxes available on the page. These include options for STATE, DISTRICT, LOCATION, MEDICINE, SPECIALTY, and GRADE. I successfully retrieved all the necessary data from the SQL database to ...
I recently set up a react router in order to display my Navbar on all routes except the login page. To achieve this, I created a Layout component that ensures users are redirected back to the Login page if they are not authenticated. Currently, I'm st ...
I am experiencing an issue where the dialog box is displaying when I use the button tag, but not when I use the image tag. Can someone please assist? <img src='image.png' height='200px' widht='200px' id='1'> ...
I wrote a function that fetches arraybuffer data from my API, generates a temporary anchor element on the webpage, and then triggers a click event to download the file. Interestingly, this function performs as expected in Chrome. @action async loadVouc ...
Currently working on a test site that aims to function as a video playlist player pulling videos from the VIMEO API based on URL numbers (like vimeo.com/7100569) The setup involves storing a list of these URLs in a MySQL table. At this stage, I have manag ...
This response mentions that the issue occurs when it sends twice. In my case, the problem arises when a user modifies the value in a selection box, so it's not related to that particular scenario. If you check out this link, you'll find my prev ...
Hey everyone! Take a look at this code snippet: <body> <div id="slidemenubar"> <a href="">1</a> </div><br> <div id="slidemenubar2"> <a href="">2</a> </div> </body> When hovering over the ...
Is there a method to show an error message in red until a choice is selected? ...
I am facing an issue with my Ajax script that displays images sent by the admin to clients. The problem is, every time the admin uploads a new image, the script duplicates and sends the image twice. For example, if the admin uploads the first image, it sho ...
When authenticating using a phone number received as a parameter in the API to fetch data from a specific user, I encountered an issue. I want to handle scenarios where the API receives a number that is not in the system by displaying a Material UI alert ...
Here is the code snippet I am currently working with: $(document).ready(function () { VerifyCustomerFilter(); $("#ToDateStor").on("DateSet", function () { ... ); function VerifyCustomerFilter() { if(toDate != "") ...
Whenever I make a post request from my phonegap app (using ajax in javascript) to my rails server, the post goes through successfully. However, I do not receive any response from the server which ultimately leads to failure. It's puzzling why I'm ...
I've been attempting to integrate custom components into my .mdx posts using the mdx-components.js file, however, the custom components are not being displayed. Here's the code from my mdx-components.js file, which I created following the guidel ...
Experiencing issues with Vue watch methods not triggering for certain objects even when using deep:true. Within my component, I am passed an array as a prop containing fields used to generate forms. These forms are dynamically bound to an object named cru ...
I've managed to display results in a table format, creating a grid layout by using td tags for each element. However, when I tried to filter the results based on text inputted into a textbox using JS code, only the labels are showing up. What I reall ...
I'm having trouble figuring out how to stop the video from playing when I close the modal by clicking outside of it. I've managed to make it work when the user clicks the "x" inside the modal box. The video is in mp4 format and embedded using HTM ...
Having a dilemma with my HTML form connected to a jQuery function that sends data to a PHP script. The issue arises as the ajax call is sent twice, resulting in duplicate entries in the database. Upon inspection using Firebug, it confirms two identical POS ...
Encountering an issue with jQuery where it waits for additional javascript to finish executing before updating the DOM. In the provided code snippet, there is a delay of over 5 seconds before the h1 element gets updated after calling the SlowUpdate functio ...