I'm using Cycle2 with its carousel plugin. I tried to add their pager functionality to my page, like this:
First, I created the container div:
<div id="concluidos-navigation" class="cycle-pager"></div>
Then, I set the plugin options like this:
<ul class="cycle-slideshow"
data-cycle-slides="> li"
data-cycle-fx=carousel
data-cycle-allow-wrap=false
data-cycle-pager="#concluidos-navigation"
>
The resulting HTML is this, for the first slide:
<span class="cycle-pager-active">•</span>
But for every other slide, the result is:
<span style="display: none;">•</span>~
Where does this "display: none" comes from? Am I missing something? If I inspect the element on Chrome and remove the "display: none", all links show up and work perfectly to navigate between slides.
Here's the fiddle
Ok, I was able to fix it with a workaround by overriding the default style. First I added this to the plugin initialization:
data-cycle-pager-template="<strong class='cycle-pager-nav-circle'><a href=#></a></strong>"
And then I added a CSS rule to the "cycle-pager-nav-circle" class:
display: inline-block !important;
However, if anyone as a more clean solution, please give your suggestions.
hide-non-active could be the reason perhaps. It defaults to true. [Link].
Related
Before marking this question as a duplicate, I know there is one exact same question with the exact same problem but the solution isn't working for me. Here is the link to that question.
The problem is, I know tooltips are being initialized because when I hover over my button, this markup shows up in my DOM.
<div class="tooltip fade top in" style="top: -34px; left: 20.5px; display: block; "><div class="tooltip-arrow"></div><div class="tooltip-inner">Add Quotation.</div></div
But it isn't showing up in the browser! In case of inspect element, It shows me the exact tooltip but it isn't appearing. It's transparent! The JSfiddles and all are working but it's not working in just my code.
I am using Laravel Mix with Vue.js. Anything extra is to be done or I am missing something?
UPDATE: I have already added data-toggle, data-placement and title in my element on which I want a tooltip.
Although we need additional information ...
what you are describing is usually related to the parent position.
Try attaching the tooltip to the body when initializing it like so.
// AN EXAMPLE ELEMENT
<div class="tip" title="Some tooltip"></div>
// THE JQUERY
$('.tip').tooltip({
container: 'body'
});
Let me know if this changes things and please add your initialization code
and the item your attaching the tooltip to css position
Live Example:
https://jsfiddle.net/sagive/aq9Laaew/137936/
I have a small issue with a series of non-bootstrap popover made by me that contains social buttons each one and have to be shown when hovering or clicking an element that contains the popover.
The html of one of the items is like this:
<li class="social__list-item js-show-popover">
<div class="media social__popover">
<div class="media-left">
<span class="popover__img"></span>
</div>
<div class="media-body">
<p class="popover__title">Síguenos en Google+</p>
<div class="g-follow" data-annotation="bubble" data-height="20" data-href="https://plus.google.com/104645458102703754878" data-rel="community"></div>
</div>
</div>
</li>
I am hiding .social__popover with opacity: 0; and visibility: hidden; and turn visible with jquery.
Everything works as expected, the problem is when you hover over the area where the iframe embedded buttons are when the popover is hidden and they make the popover to show.
Using display:none on the popover solves the issue, but it makes to break the rendering of some of those embedded buttons (mainly google buttons)
I prepared a Jsfiddle example: https://jsfiddle.net/victorRGS/dcv2g973/1/
It seems that we can live with it but I would like to work as expected, also the area of the facebook widget (not working in the example, idk why) is quite bigger and this one could be a real annoyance.
Any help will be welcome
If I am understanding your problem right, you should try this.
Adjust pointer-events:none; to the popover when they are hidden, and set back to auto when you hover the icon.
See example: https://jsfiddle.net/y6Ldjuwd/
Is this what you want?
I solved this adding the z-index property and worked fine, with no behavior problems in touch devices.
Updated example: https://jsfiddle.net/victorRGS/dcv2g973/2/
This problem can be exhibited in all (that I know of) Twitter Bootstrap versions. So, I have a navbar and when the screen is smaller, it becomes a collapsable tray. This behaviour can be seen on the bootstrap demo site. I also have submenus, which appear collapsed on the initial navbar expansion. The problem is, on the first collapse, the collapsable gets an explicit height set. If you close and expand again, the collapsable gets a height:auto;
So, when I click a submenu item, the dropdown is expanded, but it overflows due to the height being explicitly set.
My attempted solution was adding:
$(function() {
$('.nav-collapse').on({
shown: function() {
$(this).css('height', 'auto');
},
hidden: function() {
$(this).css('height', '0px');
}
});
});
This doesn't seem to affect it at all, I've deleted that code and it still has the same effect. If a JS Fiddle would help, I'd be happy to provide one, but you can see all of this on the Bootstrap demo site.
Thanks in advance,
Charles.
It bothered me a little, and after some searching, I found that the problem can be solved by adding the .collapse class to the .nav-collapse element.
Working demo (jsfiddle)
One of those time when we just say Meh.. I should have followed the doc to the letter (see Responsive navbar):
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>
For posterity :
Found out thanks to this issue : https://github.com/twitter/bootstrap/issues/3788
I'm not sure if it really is related, but my debugging showed the problem on the first transition height resetting anyway (source) :
$.support.transition && this.$element[dimension](this.$element[0][scroll])
Bootstrap is setting the element style height to 280px on initialization of the collapse element.
I added this JQuery line in my ready() function right after my call to .collapse()
$("#avail_detail").collapse();
$("#avail_detail").css("height","auto");
And, now things behave as I expect.
I'm quite new to this all so sorry for my lack of terminology.
I was looking at this site and I was wondering how I do the content/page change without reloading the page.
Could someone point me in the right direction? What is that JavaScript? CSS transitions? jQuery? Or could you show me some code? Any help would be amazing; I've been looking around for a while can't find anything like it...
That's a simple slider, just instead of slide images, it slide content (nested divs, img, lists). I checked the code for you and is using this jQuery plugin: SudoSlider plugin
Do not reinvent the wheel by writing your own plugin, you can see few demos here, but this one is very close to the example using auto height. This is how you can use it on your site:
Jquery
<script type="text/javascript" >
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider();
});
</script>
HTML
<div id="slider" >
<ul>
<li><div> .... </div></li>
<li>Lorem ipsum text + image</li>
<li>List, maps, ...</li>
</ul>
</div>
It's JQuery animation. It's a (very slick, but still) typical carousel effect, where you have a slider div that extends beyond the visible screen, and its left margin is animated to create the effect.
It's straightforward to create the basic effect (but of course a lot of work to create something that looks as good as the link):
Set overflow-x: hidden to a container div
Add a slider div inside the container, and slide elements within the slider
Add navigation buttons, and on click animate the slider's left offset (keeping track of the current position)
Here's a really basic example.
I could say that it's possible to use all of the mentioned options :)
Basically you can use something like http://bxslider.com/ to achieve what you want just instead using of img elements inside list items use some content items.
I have an issue with scrollspy, recreated in this fiddle:
http://jsfiddle.net/jNXvG/3/
As seen in the demo, the ScrollSpy plugin always keeps the last menu item selected no matter the scrolling position. I've read other questions and answers and tried different combinations of offset, etc., but none of them have helped. I can't figure out what's wrong.
I don't want to edit my template to include ugly html 'data' tags, so I am calling scrollspy() via JavaScript to activate the plugin.
The next step would be to remove the fixed content height and use 'affix' on the sidebar.
I had the exact same problem and for me, adding height: 100% to the body element was the fix.
(stricly nothing else seemed to make it work)
You need to attach the ScrollSpy to the element that is going to trigger scroll events, rather than the menu that is going to reflect the scroll position:
$('#content').scrollspy();
JSFiddle
FYI: To get my desired effect (same one as on the Twitter Bootstrap docs page) I needed to set 'body' as my target element...I could not get scrollspy'ing to work by using the immediate parent of the elements I wanted to spy as the target.
(It just auto-selected the my last element always)
In my case, Firefox was always selecting the last element and it was NOT the
height:100%;
on the body that was causing the problem (as I didn't have anything like that).
It was a
position:absolute;
on a container div.
Hope it helps someone out there...
I fixed it using body height 100% but it didnt work on Firefox. After wasting so much time found the answer on github page. Applying height 100% to HTML tag fixes the issue both for Chrome and Firefox.
https://github.com/twbs/bootstrap/issues/5007
When calling the scrollspy method you typically specify the body tag and the nav element.
<script>
$(function() {
$('body').scrollspy({ target: '#faq_sidebar' });
});
</script>
The JavaScript above is equivalent to:
<body data-spy="scroll" data-target="#faq_sidebar">
The only situation where you do not specify the body tag is if you want to track an element with a nested scrollbar like in the JSFiddle above.
If anyone else's issue wasn't solved by the suggestions above try adding <!DOCTYPE html> to the first line of your page. This was a simple step which solved the problem for me.
I had this same problem; removing the height: 100% from the <body> element fixed this for me.
I had a similar issue where scroll spy would not work on anything but a body tag so I actually went into the bootstrap js found the Scroll spy (SCROLLSPY CLASS DEFINITION) section and changed this line:
, $element = $(element).is('body') ? $(window) : $(element)
to this:
, $element = $(element).is('body') ? $(window) : $(window) //$(element)
(note that the element after the // is a comment so I don't forget I changed it)
And that fixed it for me.
ScrollSpy is pretty unforgiving and the documentation is sparse to say the least...there are different and conflicting fixes for this based on your implementation...
Nested content was my problem. This fixed it for me:
(1) make sure all hrefs in your nav match a corresponding ID in your spied upon target container.
(2) If the items in your spied upon content container are nested then it won't work...
This:
<ul class="nav" id="sidebar">
<li>
<a href="#navItem1" />
</li>
<li>
<a href="#navItem2" />
</li>
</ul>
<div id="spiedContent"> <!-- nested content -->
<div id="navItem1">
<div id="navItem2"></div>
</div>
</div>
To This:
<ul class="nav" id="sidebar">
<li>
<a href="#navItem1" />
</li>
<li>
<a href="#navItem2" />
</li>
</ul>
<div id="spiedContent"> <!-- flat content -->
<div id="navItem1"></div>
<div id="navItem2"></div>
</div>
All good!
My guess if you looked at the scrollspy code its not looking past the first child of the spied container for the ids.
Make sure you're not mixing implementations. You don't need $('#content).scrollspy() if you have data-spy="scroll" data-target=".bs-docs-sidebar" on your body tag.
I think that this might be a bug in ScrollSpy.
I also had the same problem and when I stepped through the code I could see that the offset for all the targets were the same (-95px). I checked where these were being set and it was using the position() function. This returns the position of the element relative to the offset of the parent.
I changed this to use the offset() function instead. This function returns the position of the element relative to the offset of the page. Once I did this then it worked perfectly. Not sure why this isn't the default behaviour.
The reason that the position() function wasn't working in my case was because I had to have an empty div which was actually absolutely positioned 95px above the top of its container. I needed this as my target so that the headings weren't hidden behind my header that was fixed to the top of the page.
When I was trying to figure out this issue, I used some of what Mehdi Benadda said and added position: relative; to the body. I added this to the stylesheet:
body {
position: relative;
height: 100%;
}
Hopefully this helps someone in the future.
You don't have to call method scrollspy().
Also you don't need set height: 100% anywhere.
All you need is:
position: relative; for body
add data-bs-spy="scroll" to your content or body
add data-bs-target with navbar id
https://i.imgur.com/M5jib0t.png
It helps me.
It seems that scroll spy work only when used container has a scrollbar (Tested with bootstrap 5).
You can put data-bs-spy="scroll" and data-bs-target="#target-nav" attributes in the nearest parent having a scrollbar.
In my case, i had added the scrollspy component of bootstrap version 5.2.3 but my bootstrap js cdn was 5.0. After i added the 5.2.3 js cdn, it worked!
You may also add the downladed bootstrap js files as well.
And make sure to add the bootstrap css cdn too!