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/
Related
I am practising creating websites and I have found a template which I am working on right now.There is a fancy scale bar on the page.Anyone can help me??I do not know how to create this,it looks hard to create.I have tried several times and I failed.
The image of scale bar is right here
The <meter></meter> tag should be okay for this, though you'll need to style it to get the effect you want. This site can give you pointers on that.
Hi guys, in the above image there is a screenshot of a UI I am working on for the purposes of a college assignment which involves manipulating the DOM using JQuery.
Currently I have the logic working and I am now trying to tidy my code and enhance the UI. I'm not sure if this is the correct place to ask this question as strictly speaking I do not think it is a programming issue but I thought I'd take my chances!
For some reason the slider in the image above is being pushed out of place and I have no idea why. Does anyone know what might be causing this??
The stylesheet is huge so I don't want to include it, unless you need to see a certain part.
Any help is much appreciated.
In the image the circle shows the slider trailing off the UI. The arrow points to where It should be located. The underlined slider is how it should also be appearing.
Ok, so im creating a website and to make it look fancier, I need to make the image responsive to the mouse (i.e. when the cursor is over the image, when the image is click, etc.) Does anyone know the code or another way of doing it? I am using google sites. Thanks!
I would recommend using JQuery to select and add some actions to your images have a look at this tutorial it is quite good.
You can take the idea and change it to your liking.
I'm currently working on making my Swing application look better. I want to achieve something along these lines:
The idea is for each box to have a pretty header with a background similar to the above image. The closest I can get to anything like this using basic Swing components is adding a TitledBorder but this is nothing close to what I want.
I have experiment with JXTaskPane from SwingX, which is close:
http://img411.imageshack.us/img411/6866/image431.png
And near perfect, except for the fact that it's collapsible and it doesn't appear possible to make it not collapsible.
Are there any obvious solutions I'm missing here? Otherwise I figure extending JPanel and creating a special header for it using a image for the background of the header.
Any pointers greatly appreciated. Thanks.
Since you already looking into SwingX components, why don't you use JXTitledPanel? I think it is very close to what you want to achieve. You can set your own colors there.
Yes, why not write your own custom border or JPanel for that? You customize the painting by overriding the paintComponent-method.
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.