I am learning Bootstrap, and I am stuck at creating a sidebar panel just like the following:
There are two things I have not figured out how to do.
In the above image, when you click on the "+" icon, this section slides down. Should I specify some properties in CSS as to when it is clicked or in javascript/jquery?
I want to have exactly 5 checkboxes and the rest should be seen through a slider, like sliding down. I tried to do it but the section just keeps getting longer:
This is what I have done so far. I just wanted to test if it will work.
I am new to this and I do not know JavaScript or jQuery. I want to strengthen Bootstrap first and then will go for Javascript.
Related
I have a slider gallery on slick.js, in addition to this, there is a kind of menu. In the menu there is a button "landscapes". It is necessary that when you click on this button, everything will disappear except for landscapes, that is, certain slider-elements that I will set. I would like to implement using slick.js or vanilla js. But it can be otherwise.
I almost have no experience with JAVASCRIPT, so I've searched a lot for a carousel with right & left arrows & lightbox (fancybox). & finally I found it ... but when I click left or right arrow , the all images row slide left or right. I need it to slide normally one image by one. How can I modify that, please ?
Here is an image describe how the carousel look
I already done with copying the carousel to my website, but the only issue is that the all images row slide left & right ... so when the user click left, the current four images got replaced with the next four images.
it's hard to write all needed codes here, I think the others Javascript files make effect on the final result. So, I attached all the needed files.Website's Files
First, I recommend you practice implementing the carousel following this instruction (be sure that you incorporate Bootstrap 4 accordingly).
https://v4-alpha.getbootstrap.com/components/carousel/#with-controls
My experience with carousel is that you would have to nest <div> deep in each image to control their placement and sliding. I had to create container per image for my carousel, so that was at least three levels deep. If you only use images alone per slide, you may be able to just use div containers alone.
Now, if you are using LightBox framework as well, then there are likely to be conflicting javascript functions. My suggestion is that if you really want the carousel, to just use images alone, and then style it accordingly by CSS scripts and not use the Lightbox. Otherwise, it is going deep in javascript and make custom adjustments.
https://jsfiddle.net/rkrameshkumar71/qs6z1o4u/
se angle brackets to force linking: Have you seen https://jsfiddle.net/rkrameshkumar71/qs6z1o4u/
enter code here
I am working on a job for a client that requires two carousel photosets that will toggle back and worth when clicked.
I have tried a number of approaches but can't quite seem to crack it.
is there a logical way to do this using the bootstrap carousel?
I'd need some help with pure CSS, JS and jQuery slide down list that can be animated with jQuery or with the methods themselves. 3 hidden lists would be visible showing "CSS" "JavaScript" and "jQuery". On click a list would move down with all the content, showing part of the code that works as the slide down list function. Only one list can be active or shown at a time. I have no idea how to manage to do pure CSS or JavaScript slide down menu, jQuery won't be a problem. Also I can't seem to manage to get all of the content below active list to slide down also, instead of hovering over the text and covering it. I'd be greatful for some help.
I have a div selector script with icons as pagination that I'm working on. So far everything is working well, the question I have is how can I change the active state of a an icon dependent on the div or "page" that is currently being shown. Here is a simple example of what I have so far. The images being used for the navigation right now are clickable as well.
Here is the example:
http://jsfiddle.net/Rua2B/
Thanks for any possible help!
EDIT: Just to clear things up I mainly trying to get active states to change when the "prev" and "next" buttons are hit.
Your code for pagination isn't the most efficient - you should look into tidying this up. But a simple fix for you for next/prev buttons is this line:
$("#pager img").removeClass("active").eq($("#container .boxes:visible").index()).addClass("active");
DEMO: http://jsfiddle.net/Rua2B/1/