My bootstrap carousel is not working properly in react - javascript

I don't know why my carousel's not working properly, can anybody tell me how to fix this issue.
My codesandbox link :- https://codesandbox.io/s/nice-heyrovsky-8yucf?file=/src/Prompts.jsx

You are creating carousel-inner multiple times but in reality you only need to render that one time and render carousel-items multiple times
I refactored your code a bit too so it only talks to the relevant dom elements
Also, I somewhat agree and disagree with christ here. Yes you should opt for react-boostrap library for this kind of stuff because they provide components for every item however if you ever use it then do explore the rendered version of it on the browser and then you will realize that its the same as a simple bootstrap library with same class names etc. But its mostly depends on how you use any library.
Anyway, I hope this codesandbox helped you if didn't then let me know. Happy coding
https://codesandbox.io/s/suspicious-tu-55u2h?file=/src/Prompts.jsx

Related

VUE 3 How i can check when element is in viewport?

I am looking for solutions how I can check whether a given element on a page is in viewport. There are a lot of ready-made solutions for Vue version 2 on the Internet, but I can't find something that would work in Vue 3. I can do it in Vanilla JS but I'm just learning the Vue 3 framework and I don't know how to do it right. Please help.
For Vue 3 there is this popular collection of essential Vue Composition Utilities called https://vueuse.org/. Is has the utilty https://vueuse.org/core/useElementVisibility/, that is (probably) what you are looking for. It comes with a great code example how to use it and a link to the source code so you can investigate how it is implemented.

Get a style switcher like on themeforest

I would like to add a style switcher to my site and I like the ones used on themeforest templates.. How is that done and what library are they using?
Example: http://centum.envato.tabvn.com/demo.php
Slides in from the left side.
I use drupal so I'm hoping there is a module but I couldn't find anything like it.
Any ideas?
WHY AM I GETTINGS VOTED DOWN? PLEASE EXPLAIN IF I'VE DONE SOMETHING WRONG HERE
This is fairly easy to create yourself just by adding classes with an onClick handler, and then styling with the classes how you see fit. They're probably not using a plugin for this but is actually a bespoke function they've created them selves with the jQuery library.
For example.
$('.style').on('click',function(){
$('.itemToChange').addClass('styleOne');
});
Please see a basic example with this Fiddle.
Please note this is a VERY basic version, and the example you show is much more indepth
if someone still looking here are two solutions
Blast.js or
JTS
The example you provided is using this
http://drupal.org/project/flexslider
EDIT
I'm sorry I got confused.
The style switcher is custom made by Envato, the company behind themeforest you can find the code here
http://centum.envato.tabvn.com/sites/all/themes/centum/js/switcher.js

How to create 2 Image rotation carousels on the same page using one jquery script file

new to jquery need help please!!... - I'm trying to create two carousels on the home page using the example below but doesn't seem to work.
I realise that the example is using ids, tried to change them to classes but didnt it do much.
http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html
Thanks
An important philosophy in jQuery is "Don't reinvent the wheel."
Just use a plugin for features like this, such as Easy Slider!
Here's a demo of more than one on a single page
Oh, and in the future, be sure to describe what doesn't work as well as your code if you want people to actually be able to help you with your specific problem.

fancybox-like inline popup implementation problem

i'm busy writing my very first jquery plugin and i ran into some problems. I have modified and customized other people's plugins quite succesfully in the past, but i'm more a designer than a programmer and this is my first javascript/jquery experiment build from scratch. with a lot of research and plenty of try and error i managed to realize most of the features i wanted. and besides the code probably being dirty, inconsistent and a pita for every pro, the plugin is working pretty well. the problem i have is, the way i've written it, i apparently cannot use more than one intance of the plugin on one page. if i do, it breaks appart. i tried to wrap the whole thing into a this.each function, but this as well breaks everything appart. right now, i have no clue at all, how to make this work. I'm grateful for any suggestions or hints, as my brain slowly starts to boil.
here's the little sucker: the .js file
you can see it in action here: demo
when you say more then one instance, I'm imagining a clone of your demo, so two of the same thing on one page.
one problem I see is that you are using ID's in your plugin, and you shouldn't be using ID's when you want multiples of the same thing to be able to live on the same page. try and switch to classes.

Tree of checkboxes

I'm looking for a "tree of checkboxes" widget for Javascript. I tried to use jquery-checktree which purports to do exactly what I want, however it has the following problems:
It doesn't recognize checkboxes that are already checked and renders everything as unchecked.
It starts off with everything collapsed and doesn't give an option to start with everything uncollapsed
Each line of my tree starts indented from the line above, even if they are <li> in the same <ul>.
Can anybody recommend one that works, or fixes for this one?
You could try the YUI TreeView. They have an example with checkboxes. It might not be ideal for all uses, but it's pretty good.
ExtJS 3.x has one. I have not used it, but it looks nice. Not sure if you're willing to add ExtJS to your stack...
Another option is jstree which is based on jquery also.
I ended up making a few fixes to jquery-checktree and using it. Some of the changes are probably broadly applicable and I emailed them to the developer, and others are probably only useful to my project.

Categories