
JQuery bxslider and hide/reveal content bugs
- or -
Post a project like this4616
£20/hr(approx. $27/hr)
- Posted:
- Proposals: 2
- Remote
- #350268
- Awarded
Description
Experience Level: Intermediate
Estimated project duration: 1 day or less
I have a site using sliders and hidden/revealed content and there are a couple of bugs in the jQuery. It works, but sometimes the hidden content isn't revealed properly. Please have a look at the following and get back to me with an idea of how long it should take you to get it working properly. Most of the code is there, it jsut needs some expertise to make it right.
See this link:
http://guitarlessonsbrighton.org.uk/example/small-group-tour.html
In this page there are some tabs in a green bar across the middle of the screen:
Map & Destinations, Day by Day, Accommodation, Experiences, Dates & Booking.
By default, at desktop size, "Map & Destinations" tab is selected and the content of the div with ID "map-destinations-content" is visible when the body loads. Below the map are several links under the title "destinations". Each one, when clicked, a large picture with some slider controls
The slider that is revealed has been created using the bxslider plugin. We have renamed it responsiveSlider for this job.
At mobile landscape & portait screen width, just the "overview-content" div (introductory text) is showing by default, and the "map-destinations-content" div is already hidden.
JOB: So what I need is for a coder to make it behave 100% correctly instead of sometimes not working and to ensure that it behaves at each break point. Currently to make it work properly at the lower screen sizes (mobile landscape and portrait), I have to reload the page. It needs to work without having to do this.
The plugins.js file and the main.js file contain all the jquery.
Look for the following functions in main.js:
initTourPage() - this function controls how the tabs behave and what content is revealed when you click on them
initResponsiveSlider() - bxslider
If you can get this done I also need to get the following page working in a similar way. This should use part of the previous functions to make it work... I have already put the right classes on the divs.
There is a slider half way down the page with the title: "Family accommodation across Japan" - When you click "read more", it should open up the content below and slide to the corresponding slide. This isn;t working at all but should hopefully be easy to get going.
By default, this layer should be hidden with the class "themes-category carousel.tour-accomodation" and it should be revealed with the read more link... Then it should have a slider working inside.
http://guitarlessonsbrighton.org.uk/example/theme-category.html
If you can get this working properly, please get back to me with a quote for how long you think this will take.
Many thanks
jamie
See this link:
http://guitarlessonsbrighton.org.uk/example/small-group-tour.html
In this page there are some tabs in a green bar across the middle of the screen:
Map & Destinations, Day by Day, Accommodation, Experiences, Dates & Booking.
By default, at desktop size, "Map & Destinations" tab is selected and the content of the div with ID "map-destinations-content" is visible when the body loads. Below the map are several links under the title "destinations". Each one, when clicked, a large picture with some slider controls
The slider that is revealed has been created using the bxslider plugin. We have renamed it responsiveSlider for this job.
At mobile landscape & portait screen width, just the "overview-content" div (introductory text) is showing by default, and the "map-destinations-content" div is already hidden.
JOB: So what I need is for a coder to make it behave 100% correctly instead of sometimes not working and to ensure that it behaves at each break point. Currently to make it work properly at the lower screen sizes (mobile landscape and portrait), I have to reload the page. It needs to work without having to do this.
The plugins.js file and the main.js file contain all the jquery.
Look for the following functions in main.js:
initTourPage() - this function controls how the tabs behave and what content is revealed when you click on them
initResponsiveSlider() - bxslider
If you can get this done I also need to get the following page working in a similar way. This should use part of the previous functions to make it work... I have already put the right classes on the divs.
There is a slider half way down the page with the title: "Family accommodation across Japan" - When you click "read more", it should open up the content below and slide to the corresponding slide. This isn;t working at all but should hopefully be easy to get going.
By default, this layer should be hidden with the class "themes-category carousel.tour-accomodation" and it should be revealed with the read more link... Then it should have a slider working inside.
http://guitarlessonsbrighton.org.uk/example/theme-category.html
If you can get this working properly, please get back to me with a quote for how long you think this will take.
Many thanks
jamie
Jamie F.
0% (0)Projects Completed
-
Freelancers worked with
-
Projects awarded
17%
Last project
16 Jul 2026
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies