I want to place arrows and small explanations floating over the top of my web page when they first signup to kinda teach them the basics. I want like a tooltip with an integrated pointer/arrow but is not activated on mouseover, it is just loaded on the page when it is loaded and visible. Is there a jQuery or javascript that will do this?
Many thanks
Paul
I don't think you really need javascript for that. Some custom CSS will do just fine!
Or do you want the tooltips to (dis)appear? I mean like a some kind of a tutorial?
I am using this one: http://flowplayer.org/tools/tooltip/index.html and can't be happier with it :)
You can also take a look here to see different types of tooltips.
Related
I just wondered how to get content blocks to slide in horizontally on scroll? It seems quite common on a lot of modern themes and I'm hoping to add this kind of effect on the homepage of http://brokernotes.co where we have the three 'how to' sections.
Any pointers on how to do this would be much appreciated.
There are lots of way to achieve this.
I would highly recommend using JavaScript over anything else to tackle this challenge, and on top of that I would suggest using jQuery where you can find some methods like $.hide() and $.show() which also allow you some nice animated transitions.
I also think that the example you provided relies on jQuery as well (they have jquery.min.js included as a script, etc.) so this is definitly the point where you want to start.
w3schools provides a tutorial series about jQuery where you can get started:
http://www.w3schools.com/jquery/jquery_examples.asp
The best example site I can give about this effect which I'm struggling to articulate is Facebook. When you click a photo, you get a div that floats on the top of everything enlargening the photo and giving extra info. It's kind of similar to something you'd find in a conventional app - like a sub view kind of thing.
http://img.photobucket.com/albums/v282/Ace_of_Spades01/fb_zps2047caf8.png
Is there a framework or other pre-built solution out there or will I have to roll my own.
Shadowbox let's you do this. It can display HTML and is easy to implement.
http://www.shadowbox-js.com/usage.html
The feature you describe is known as a lightbox.
If you use jQuery, you can use something like fancybox - http://fancyapps.com/fancybox/
If not, there are many alternatives if you Google 'lightbox'.
I am looking to create a object that scrolls through different pictures with links to the stories that go with the picture. I am not sure what they are called, but its pretty much a news slideshow with links. Much like the one on leagueoflegends.com, espn.com, liverpoolfc.tv.
Does anyone know where to find a tutorial or something like that? I have not worked with Javascript much before.
You seem to be describing a carousel. There are hundreds of these available for use, including this one that I wrote a while back (it's primarily for video, but is perfectly usable with pictures, too) or JCarousel.
You can try jQuery SerialScroll plugin.
It works great.
I used it in many of my projects.
URL : jQuery SerialScroll Demo
There are hundreds of great sliders out there. Two that I've used many times are the BXSlider and the Anything Slider.
http://bxslider.com
http://css-tricks.com/anythingslider-jquery-plugin/
I'm very very new to Javascript. What I'd like to do is one of those rows of smaller images, that when you click on one it pops up bigger with left and right arrows for sliding through the photos.
What's the easiest way to get started doing something like that?
Any help is greatly appreciated, thanks.
You know we're not your research site, but since you're asking for the easiest way, I'd recommend HighSlide JS. It doesn't require JQuery, is highly personalizable, comes with examples which you can just copypasta and a nice tutorial.
Of course, if you'd include the JQuery lib to your page, you could also try one of these fancier plugins. And there are also some JQuery carousel plugins as noted by #Nupul.
Check out the galleries plugins at Web Resource Depot
I am looking for a straightforward jQuery tooltip script. I have been having troubles finding one that has a fixed position and doesn't move with the user's cursor. If anyone knows of one let me know :) Thanks!
I always use this one here:
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
It has the option to both follow the cursor AND keep it's position, along with a few other helpful options. The css is also very minimal and therfore easy to change.
See there's this thing here called a search engine...
Okay, okay... I'll be more constructive...
My favorite is qTip 2. It does everything you want it to do. and you don't have to leave money on the table...
I use qTip2 from http://craigsworks.com/projects/qtip2.
By default, it does not move with the cursor. There are a bunch of options and some themes. The best part is that the developer answers all questions in his forum within a day or less.
Also here are some good ones meeting your requirement that it not follow the mouse cursor:
http://plugins.learningjquery.com/cluetip/
http://edgarverle.com/BetterTip/default.cfm
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
http://labs.dmlogica.com/dmltip/#more-53
http://www.ajaxdaddy.com/javascript-tooltip-jtip.html
http://plugins.jquery.com/project/bt
http://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/
http://www.dvq.co.nz/jquery/create-a-jquery-popup-bubble-effect/
http://code.drewwilson.com/entry/tiptip-jquery-plugin
http://css-plus.com/2010/04/create-a-speech-bubble-tooltip-using-css3-and-jquery/
http://gdakram.github.com/JQuery-Tooltip-Plugin/
As a side note, I'd stay away from the tool tip plugin that's part of jQuery Tools by Flowplayer. IMHO, jQ Tools is poorly implemented, out of date and not supported very well by the developer or his community.
100 various solutions on this page (however, some are not jQuery):
http://www.webdesignshock.com/showcase/best-tooltip-scripts-plugins/
The one I always use is: http://tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/
It's three short CSS lines to customize colors and easy to work with!