I've just recently started using bootstrap and am working on part of my Christmas present to my girlfriend - a puzzle for her to figure out what her real present is (tickets to Hamilton in London).
However, I've run into an issue with the bootstrap tooltips. I'm expecting to see a tooltip next to the span word that is clicked, on hover or click. But for some reason the tool tip is up in the top-left of the body.
Could anyone help me out here?
Here is a pen that shows the error:
Link to CodePen
I'm using the suggested example of initializing with:
$("[data-toggle='tooltip']").tooltip();
Try using the same version of Bootstrap. Either go for v3 or v4 completely. The problem should be resolved once you use compatible files.
Im trying to implement a bootstrap thumbnail slider, there should be 4 tiles showing and with a click of the arrow it advances by 1 thumbnail. There are lots of examples of these available online however after trying to implement about 5 of them, I have the same problem with them all.
For some reason the slider only shows a single thumbnail when I copy all code and run it myself, I am used to using bootstrap normally can sort little issues, however this is just not making any sense to me.
This is the example I have implemented on my own private site, : http://www.bootply.com/94452
Here is a screen shot of how it looks for me :
Here is an entire cut off all code used on the example :
pastebin.mozilla.org/8972187
All code is exactly the same, however it just does not work, if anything else if needed from me to help resolve this, please let me know.
Thankyou very much for any help
There are a few problems with the code..
jQuery 1.7.1 is very old, use 1.9.1 or later.
You've included bootstrap.js and jquery.js twice, and they should only be included once
http://www.codeply.com/go/60oCFBwyPk
I am trying to use a bootstrap theme (Worthy) as the base for a website. The theme works very well, however I am having problems adding this scrolling timeline feature to it.
Here's what I know:
I can get the demo of the timeline working
I can get the template working
I can get the timeline implemented in the template w/ the .css working
I CANNOT get the animations of the timeline working in the template
I have traced the issue to one of the timeline's required files, namely a customized version of modernizr. (The template uses the standard version of modernizr). When I remove the the reference to the custom modernizr, the site generally works, but the timeline animations do not. When I add the reference to the custom modernizr back in, all of the site's content disappears.
Does anybody have any suggestions of how I can go about diagnosing and debugging the problem? I know that I have not posted any code, as I'm not sure what is and is not relevant. If somebody can please point me in the right direction, then I can follow up with more targeted questions.
UPDATE: I have also tried removing the template's version of modernizr and only using the one from the timeline, but that also results in all of the site's content disappearing.
Thanks a lot!
Modernizr has an build tool that you can customize to be exactly what you need it to be. What you would want to do is get a list of all of the detects that you need, then build a new custom one that contains everything.
I use Highcharts 2.2.5 to draw a number of area and bar charts.
I Just upgraded my app to jQuery 1.8 and started testing all my charts.
All appear ok, but when I zoom an area chart, I get tons (literally hundreds) of JavaScript errors saying "Error: Problem parsing d=0.99030204037363" (numbers change, sometimes d=1) and on the screen all I see are a bunch of dots where the chart was.
Resetting the zoom doesn't work either (yielding more errors, and no result). The only recourse at that point is to reload the page.
I tried looking online for any clashes between HC 2.2.5 and jQuery 1.8 but couldn't find anything. Switching back to jQuery 1.7.2 solves the problem, but still, one must look ahead...
Any assistance is appreciated,
Guy
After reporting the bug on github, per #MrObrian's suggestion, I got this reply:
It is already fixed for the next release - see
http://jsfiddle.net/highcharts/GJ4wR/. We're running the final tests
on that code now, hope to have it out by next week.
So all I have to do is wait 1 week :)
Does anyone know how to achieve the cover-flow effect using JavaScript to scroll through a bunch of images. I'm not talking about the 3D rotating itunes cover-art, but the effect that happens when you hit the space bar in a folder of documents, allowing you to preview them in a lightbox fashion.
http://www.jacksasylum.eu/ContentFlow/
is the best I ever found.
a true 'CoverFlow', highly configurable, cross-browser, very smooth action, has relections and supports scroll wheel + keyboard control. - has to be what your looking for!
Not sure if you're talking about Coverflow (scroll through images) or Quicklook (preview files in lightbox), try editing your question.
Here's some JS Coverflow implementations:
MooFlow - Coverflow for MooTools
Coverflow in JS proof of concept
Coverflow using JS and CSS Transforms (Webkit only)
I think this is what you want http://addyosmani.com/blog/jqueryuicoverflow/
I tried using the the Jack's Asylum cover flow but it wouldn't let me easily remove and re-add an entire coverflow. I eventually found http://finnrudolph.de/ImageFlow and not only is it more reliable, it's easier to hook into, uses less markup, and doesn't jitter when flipping through images. It's by far the best I've found, and I've tried several on this page.
There is an Apple style Gallery Slider over at
http://www.jqueryfordesigners.com/slider-gallery/ which uses jQuery and the UI.
jCoverflip was just released and is very customizable.
colorbox has such amazing features..loving it.
Also like this one http://www.webappers.com/2008/03/05/galleria-simple-but-nice-jquery-image-gallery/
Is this what you are looking for?
"Create an Apple Itunes-like banner rotator/slideshow with jQuery" is an article explaining how you can make such effect using jQuery.
You can also view the
live demo.
Try Jquery Interface Elements here - http://interface.eyecon.ro/docs/carousel
Here's a sample. http://interface.eyecon.ro/demos/carousel.html
I looked around for a Jquery image carousel a few months ago and didn't find a good one so I gave up. This one was the best I could find.
Check out momoflow: http://flow.momolog.info
True coverflow effect, and performant on Webkit (Safari and Chrome) and Opera, ok on Firefox.
Just to let you all know, xFlow! has had some major work done on it and is vastly improved.
Go to http://xflow.pwhitrow.com for more info and the latest version.
i am currently working on this and planning on releasing it as a jQuery-ui plugin.
-> http://coulisse.luvdasun.com/
please let me know if you are interested and what you are hoping to see in such a plugin.
gr
the effect that happens when you hit the space bar in a folder of
documents, allowing you to preview them in a lightbox fashion
Looks like a classic lightbox plugin is needed. This is my favorite jQuery lightbox plugin: http://colorpowered.com/colorbox/. It's easy to customize, etc.
This one looks really promising, and closer to the actual Apple coverflow effect than the other examples:
blarnee.com/projects/cflow