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).
Related
Quite frankly I don't even know how to describe what I'm attempting to do. "Dynamic Navbar" is the best I have come up with.
Basically, I've created a single page website with 4 "pages" (sections) using purely HTML and CSS (as well as jQuery for smoothScroll).
I want the highlighted link on the navbar (the current page) to change when users scroll between pages. I've seen this done before, such as on this site:
http://thinkpixellab.com/
I have little-to-no experience with JavaScript and jQuery and I'm really not sure where to start. If anyone could point me in the right direction I would greatly appreicate it!
What you're looking for is ScrollSpy. It's made for Mootools originally, I think: Scrollspy
Bootstrap have it as a plugin for their framework: Bootstrap Scrollspy
I found a standalone JQuery plugin for it, though not sure how good it is as I haven't used it myself: plugin
Obviously you could write something yourself, but with not much experience of JS/Jquery I reckon you're better off sticking to a plugin or something.
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 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!
I want to make small image browser like the one used on Myfonts.com (link) in the sidebar under "More fonts like this".
I'm wondering if there is a jQuery plugin that could do that.
I know that this is some kind of carousel, but I couldn't find any with this cool resize function on scroll.
I would suggest you take the jCarousel plugin, as it has a very good base, and modify it to your liking. You could combine it with the jquery ui slider to somehow achieve the same effect as on Myfonts.com.
I did come across something similar although not exactly the same. It might help you figure out how the resizing effect is accomplished. See http://www.eogallery.com/ and http://jquery-ui.googlecode.com/svn/branches/labs/carousel/demo/index.html
As of today I couldn't find any out-of-the-box plugin that does what you are trying to do, but maybe if you build this, you'll post it to the jquery gallery and everyone will live happily ever after :-)
I wrote a module for Joomla! 1.5 which shows the pictures (banners) with the most clicks. Now I want to show this list scrolling on the home-site. With "marquee" there is a break after the last picture.
I've found an advice which said I'll have to create a div-container with overflow: hidden and a second div with javascripte which changes the positions of the pictures.
Can anyone help me to write this code, because I don't get javascripte?
There are plenty of free ones you can get that are already written for you.
Try one of these jquery scripts to do what you are looking for...
http://plugins.jquery.com/project/Plugins/category/48
The best way to implement such feature is looking to this great JQuery Video tutorial and you will have a great product :)
URL: JQuery Spy effect
MOV: Jquery Spy effect
Hope that is exactly what you are looking for.