Bug in Bootstrap carousel when click on next and back [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have integrated bootstrap carousel but when i click on next and prev it shows some bug. Can someone help me what am missing ?
here is the link of website http://logmak.justevent.in/ please check 4 product slider.

You placed a function that changes how carousel behaves by default, just after you initiate it. That's what's causing your problem.
A quickfix would be:
.item.next.left {
display: none;
}
but there will be no transition from the old items to the new ones, at the end of the slide transition. My advice is to look for a carousel that allows you to set the step of the slide out of the box, such as slick.js.
(Not endorsing it, feel free to look for better alternatives. I use it because it's easy to style and quite small, pefect for my own needs. Your needs might be different.)

Related

How to get rid of this white effect on the page when clicking the scroll top button [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I'm currently working on this website http://www.test.yanosp.com/, but when I click the Back to Top button on the bottom of the page, the page gets white. How do I get rid of it? Thank you.
I inspected your pagetop__link class and found that in the "http://www.test.yanosp.com/wp-content/themes/lionmedia/style.css" file, where you define that class in the stylesheet, you have the following selector:
.pagetop__link:active::before {
background:rgba(255,255,255,0.9);
z-index:9999;
}
Get rid of the line background:rgba(255,255,255,0.9); and it should work.
remove .pagetop__link::before {position: fixed} solve the problem

:before only working on last element [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have a project which renders multiple spinners and I've noticed that on reload only the last spinner is spinning. All the elements use :before.
I am aware that this is fixable by removing the :before in the css but I would like to know why this was the case.
Here's the example, you'll see all the spinners load then when you click on the "reload" text only the last spinner will spin.
Link to JSFiddle
The issue is you're setting before on .spinner class.
Set it on .spinner-container class and it will work as expected
Check this fiddle
Reach doesn't work in stack snippet. That's why I added a js fiddle

Why does z-index not work with sticky elements? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have some rollover effects in a sticky footer and a responsive menu / nav that sticks to the top. When the nav is opened and is long enough to go over the footer it covers everything except the rollovers.
nav closed http://www.musictheorytutorials.com/navclosed.png
nav open http://www.musictheorytutorials.com/navopen.png
I have tried lots of changes, searched on here and then tried to rebuild a simple version in jsfiddle as an example of it not working and it worked! However making these changes to my actual page do not...
Here is the jsfiddle that does work: /m_d_a/y7Lj3rms/26/
Here is rge jsfiddle that doesn't: /m_d_a/4bLyt681/5/
I can't get the code tags to work properly when cutting and pasting in either, sorry.
I know there is a lot of javascript, most of which is cut and pasted from linked js plug-in files which I don't understand, so I think it's gonna be something in there. If anyone can trudge through this I would really appreciate it. I will also change the title of this question to reflect a working answer to help people in the future.
Thank you.
just modify this selector in your css
from
.menu {
position: relative;
z-indez: 100;
}
to
.menu {
z-index: 100 !important;
}

How can I store particular div id in jQuery var when I scroll that div [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
It should be easy, but I'm having trouble with this issue
I have a variable number of div's with text in them and each with overflow: scroll
I want to be able to detect which div the user is scrolling, and store that div's id into a JS variable, but my attempts are not working...
My code is here: http://jsfiddle.net/7pn85ae8/
Ah, it took me a minute, but I see in your JSFiddle, everything you wrote is fine -!
The problem simply appears to be that you are not including jQuery -
Have a look at the fiddle, and then, in your code, add this snippet somewhere before your code:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
You'll see the only thing that i changed was the alert - and that I added jQuery on the drop-down menu on the left...
Cheers -!
http://jsfiddle.net/7pn85ae8/1/

Menu/Page Zoom Out effect? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
There's this really cool effect I'd like to recreate, however I don't understand how the developer is achieving it. I've looked at the source - but I still don't quite understand.
The site is: http://drewwilson.com and below will be a couple of screenshots of what is happening.
When I click on the ellipsis on the header, a little about element pops up and the actual site 'zooms' backwards, leaving whitespace around it's border and greys out.
I can't see any javascript or jQuery doing it, so i'm assuming it's css?! - Although I might have missed something totally - so any help is appreciated :)
Inactivated
Activated
I think the whole page is wrapped in a div which have a 100% height and 100% width. So you have a control over everything inside that element.
You can achieve that by using css3 transform: scale(value); and of course jQuery
see samples here

Categories

Resources