I am working in my senior project which is a web-based system and I want to dedicate one page of the website for some useful links that are related to my website. I tried to present them in such an innovative way like showing a brief description (in a balloon or a new line or anything) about the link when the mouse comes over it.
I heard there are some JQuery templates for that. I tried to search about them but I did not get anything.
So could you please help me in this issue?
Please provide me with any guide that is helpful to do this issue.
Also, please provide me with your suggestions for presenting the useful links in somehow a nice way.
What you're talking about is a tooltip. I like the tooltip component from jQuery Tools quite a lot, and the documentation is excellent.
There's no need to use JQuery!
What you want can be achieved using only CSS.
Utilizing the :hover selector, its possible to display a box over your link when you move your mouse over it.
Here's a good link to get started.
How about something like Simpletip: http://craigsworks.com/projects/simpletip/, or it's successor qTip: http://craigsworks.com/projects/qtip2/ (hat tip #Edmund Y).
If you look at this Xmarks page, it pretty much lists all of the most popular JQuery tooltip plugins: http://www.xmarks.com/topic/jquery_tooltip, sorted by the number of people that have bookmarked them!
Related
I'm using a "PHP website" and i'm not being able to give to user a "drop down filter" to filter the content... In resume, i would like to give to user the same experience as in this website: https://www.hidglobal.com/products/rfid-tags/identification-technologies
If you change the options at the right side, on the Dropdown menus, the content will be filtered. Is exactly what i need to do in my website, but i'm not 100% familiar with javascript, so, if someone perhaps can help me... I'm searching on the web for more than 4days and all the answers that i find is always for tables, and this is not exactly a table, so, if someone peharps can help me, would be wonderfull!
Thanks a lot!
To implement this kind of dynamic web content the easiest way is to use a data-binding front-end library such as AngularJS or backbone.js. Of course you can always write your own js code for this but that just won't cut it. I suggest getting familiar with one of these libraries and use for example an ng-model binding with the select dropdowns to the right bound to the content you show on the left hand side (AngularJS).
Yes, i understand that no ones will come with a "free code" to me, that's not my intention...
I already take a look into their code, but as their website is giant, to me it's a little bit hard to understand it all, as i'm not a "Pro".
I would just like that someone tells the right way to approach the problem, and what should i search, don't know, something that helps me finding the solution...
Thanks.
The tip text which highlighted in below image serves wells for giving some instruction to first time user. And I notice such pattern several times in different web apps, I guess there must be some javascript libraries to help generating such tip visualize? But I just fail to find the correct keywords to capture them. Any one give some suggestions please?
[1]: http://farm7.static.flickr.com/6071/6031668602_9c7fcf70be_m.jpg ""
------------------updated----------------
Thx for the suggestions for recommending jquery tooltip plugins.
But other than tooltip widgets, what this questions requests is a more specified “tip plugin” which could be used to generate a transparent tip image which contains simply some words in casual font and an arrow points to parent context. Yes, this is a tooltip but not a ordinary tooltip which comes in the form of a box or bubble.
Traditional tooltip are useful for displaying detail info on the fly, while the tip I mean here performs better to attract attentions to user for providing some quick tutorial instructions without adding too much visual noises**
You can try this: http://codylindley.com/blogstuff/js/jtip/
This plugin is great for tooltips in jQuery: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
Demos are available here.
You are looking for some sort of tooltip plugin. Here are a few http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/
http://www.dennys.com
I'm wondering how the top navigation was programmed, From the source code I see javascript but I am hoping someone could recommend a resource / tutorial in learning how they built both the top navigation and the siding feature.
Many thanks.
You should investigate Path.js ( https://github.com/mtrpcic/pathjs ) as the url's suggest they are using it.
I doubt anyone has written a tutorial on how Denny's made a website.
But through some playing in the console, I found they use jQuery, which comes with many effects. To bring the navigation down, they probably use something like..
$('#navigation-button').mouseenter(function () {
$('#navigation').slideDown();
});
I have something similar set up here.
Don't use any of that code directly. It's just quickly written garbage. It'd need quite a bit of tweeking for production.
It's easy with javascript/jquery. Create a main div with fixed witdh where you put all your pages (menu, home, etc) and overflow:hidden. Then, with jquery's plugin Animate slide the position of the div's content.
Search for jquery controls. There are several available on the net free of charge which help you get this functionality.
i was wondering if anybody knows (and if there is such a thing) a javascript plugin that can do to following:
on the website http://www.worldofmerix.com/ click on any of the menu buttons on top for eg. "about us"; then you see a line appear in the middle and expand so that you can see the entire div...
I need a similar animation effect, flash is out of the question, so i have to use javascript...
i have some ideas on making it with some "smooth div fade in/out" js plugins, but i was wondering if there is a plugin SPECIFIC to the thing i need?
thanks very much in advance for the anwsers!
Ok, since you didn't state any jQuery "dont-wanting" I'd recommend you to check out jQuery. It is a set of JavaScript libraries that help you manage your HTML and CSS with some light code.
You can see HERE, HERE and HERE how it can animate divs and other elements (I see that it is what you need).
You can check out the official web site and there you can find all kinds of examples and documentation that you will ever need. I recommend you to see THIS (click RUN).
I'm currently working on a search box for my site that will hopefully use a slide-bar instead of tabs to conduct the search. Users will enter a search query and instead of choosing from the conventional tabs above the box, they will have the option to search based on the position of the slider (ie. a "stronger" or "weaker" range of search). Does that make sense?
Anyway, has anyone come across a plugin to help me build such a slide? jQuery? Ajax? CSS? Not sure how to go about it. Has anyone any experience or ideas with what I'm trying to achieve?
Let me know what you think, and if you need me to elaborate on anything :)
Thanks, David
jQuery UI has a Slider control that you could use for this.
You can see from the demo's on the page that there are numerous different ways that you can use this, look at the "Snap to Increments" demo. You could use this method and snap it to "weak", "strong", "very strong" etc?