any one can help in this?, i want to make a scroll bar to scroll the li underneath a div. in which i made a ui, scroller, but client want the front and back arrow to adjust the slides. like regular scroll bar like browser.
please visit ; http://ikeafamilylive.com/stories/60
and you will witness what i request. And please don't recommend me a plug-in, because i need to use this scroll bar across the site with several customization process.
please give me the sample code / suggestion to make a scroll bar using jquery+css. with full functionality.
If you want to use jquery and css the best way to go is going with a plugin like JScrollPane:
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
If you want to have several customization and looks you can easily do so with this kind of plugin:
Example (different looks on the same page)
http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html
Doing it by scratch will be a little more work, and you need good understanding of javascript and the framework you are going to use.
A plugin like JScrollPane will already have most of the functionality you will need, and if you need something that there isn't you can add the functionality using the basic plugin.
Related
Firstly i must say i am a complete novice in programming! That said, i need some help regarding an issue that seems for me impossible to solve.
What i need is a menu that on a single page remains fixed in the same position, (i'm not that sure but the idea is similar to a sticky menu that wouldn't be at the top) from which it's possible to scroll down to each page section with an anchorlink. I tried to use "scroll to page id" but sometimes it gets stuck, or doesn't even scroll down and worst of all, once the page scrolls the menu is gone. image for reference.
I've been looking for days through plugins, stickymenus and other stuff but still haven't found the right solution. Any suggestions?
You can define your areas as sections instead of "page ids". After that is simple to navigate through those.
The Bootstrap Scrollspy is a nice way to do that simple: Bootstrap Scrollspy example
At first I apologize for my English.
Well, thats the deal
http://www.dotazoneapp.com/site/pt/
this site have a somekind of interesting scroll, when scroll down, the background-image is change his position, with the background-position (I check this on the source). But I don't even know HOW I CAN DO THIS, if is with Jquery or the own CSS. Well, please help me how do that effect
And...
This button have a animation too scrolling up, it acelerate and not automatic to the top like the reference using id Example2
Check out this (fantastically) easy guide on creating parallax effect using only CSS and without JQuery or any kind of Javascript, which can decrease performance, conflict with other plugins and plenty else.
http://davidwalsh.name/parallax
Regarding the cool parallax scrolling- Checked out the site on chrome dev tools and it looks like they're including this scipt: jquery.parallax-1.1.3. Don't know much about it but looks cool. Investigate here:
http://ianlunn.co.uk/plugins/jquery-parallax/
I am trying to create an animated menu bar, in which the background block moves from the current selection to the latest one. For an example, have a look at http://www.creative-jar.com/. I would like to accomplish this in the simplest possible manner (perhaps using only HTML and CSS). Any help will be really appreciated.
As I am new to web development, thoughts on whether this sort of animation is a good or bad idea are also welcome.
There's a jQuery plugin that does exactly what you describe: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
I'm currently teaching myself to create websites - this particular site is for a that business I have. I'm using Dreamweaver CS3 to do so.
I need some help with the horizontal navigation menu I am trying to create. I have three main categories within my website, each with their own small image to represent them. I want to have all three images, side by side underneath my company logo, acting as the navigational menu.
So for example, one section is Alcohol. When the user puts their mouse over the 'alcohol' image, a menu drops down underneath to show the subsections eg spirits, beer etc.
After doing some research, I can't quite decide the best way to do this. Whilst learning Dreamweaver, I have come across Spry Menus, which I thought would do the job. But I have also now learned about pop-up menus in Fireworks CS3 (which I also have available to me).
I'm really looking for some other opinions on the matter and would appreciate any recommendations about the best route to take with this.
Thanks.
I would prefer learning CSS menus instead of having it generated using Dreamweaver. You can try the this one.
I would learn pure CSS menus, and then for more advanced functionality, use jQuery plugins like Superfish
The site I first learned CSS menus from was CSSplay. This same guy also has a newer site aimed only at CSS menus.
I would say going though the source code of some of those will teach you a lot, but ultimately I would recommend using Superfish or some other jQuery plugin for more user-friendly menus, especially for delay on mouseout. A lack of mouseout delay can render most CSS menus completely unusable.
Give http://www.alistapart.com/ a try. Wonderful page with a lot of good tutorials. http://www.alistapart.com/articles/horizdropdowns/ for example shows you how to use a list and css to build a horizontal menu. Maybe a good starting point for you project.
Dreamweaver is really a good tool for getting fast results. But if you are interested in learning implementing websites than it is better to get your hands dirty. Take for example the tutorials from http://www.w3schools.com/ and a good editor of your choice and build your website or a fun project from the scratch. On the long run this investment will pay of.
First, don't use snippets built in dreamweaver. They are awful.
Use JavaScript, maybe even JS framework like jQuery. It offers toggle() function for that kind of situations.
In general, you should apply JS function to mouseover of your image. That function shows or hides div (your dropdown). You can achieve that by setting css parameter display: none (hidden) or display: block (visible).
Example for showing div:
My menu 1
<div id="menu-1">
<ul>
<li>Alcohol</li>
<li>Spirit</li>
</ul>
</div>
And some javascript:
function show(myid)
{
document.getElementById(myid).style.display = "block";
}
function hide(myid)
{
document.getElementById(myid).style.display = "none";
}
I made that in a hurry so it's not perfect.
Can we change the appearance of scroll bar? I mean we want to change the image of the scroll bar, so it can match our web theme. more specifically, i'm pointing at the scroll bar in
<div style=overflow:auto>
If it can't be done, then is there some other way to make our own "scroll bar", which use our own image?
Perhaps if we're insane enough, maybe we'll do it like this.
We make a bunch of <div> which contain an image of up arrow, scroll, down arrow, etc. And then we applied some function to each of them. off course the width of scroll will depend on the amount of the content.
Can somebody help?
Check out this site - I've heard good things about the method implemented, although I have never really bothered to create my own custom scroll bars.
You should be able to style in line with your own theme with a bit of experimentation.
There are plenty of custom scrollbar available in the jQuery plugin here is some
http://designhuntr.com/custom-jquery-scrollers/
I would suggest http://baijs.com/tinyscrollbar/