Develop Reference

(JavaScript ?) Display div with different content on choice?

I'm looking for a solution that will allow me to display a div when I click on a single link (which will change the way css style) with variable content (eg a sub-div with service1, service2, service3 ). This div will be displayed also propose several offers that will only display the div payment when one of these offers will be selected.
It's maybe hard to explain (i'm not english so sorry for really noob level), so maybe with this image you will "understand" a little bit more:
http://image.noelshack.com/fichiers/2015/38/1442422045-fonctionnement.jpg
I confess to being a bit lost with JavaScript for this kind of thing. I know it's probably achievable, but how? :-(
Thank you for your help folks!

If you want to go the way with altering CSS with javascript, assuming you are not creating the variable content on the fly, have the divs css for display set to none.
#divID {
display = none;
}
Then set an event listener on your link to change the display style to block.
document.getElementById("linkID").addEventListener("click", function() {
document.getElementById("divID").style.display = "block";
}

Ok so I created a crude representation of what you asked without much effects. But the fiddle I created completely functions as you intended. If you click buttons on div 1 the content of div 2 gets updated. If you click anything on div2 the information is displayed in div3. Here is the example: Working Example
window.function1 = function(){
var edits = document.getElementById('2');
edits.style.background="aliceblue";
}
//SAMPLE CODE TO EDIT ANY ELEMENT BY REFERRING BY ID. CALL SUCH FUNCTION ONCLICK
Please check the example to understand it fully.

How to display a new image/window when rollover another image/link

I know this will be an easy one for you guys but I couldn't figure out how to do something like this; http://backpack.tf/
On that page, when you take your mouse to any item it opens a new small window displaying some text/image. What are my options for achieving something like that? JavaScript? I tried using "onMouseOut=" with HTML but it is too simple for what I have in mind.

I'd be tempted to say this is almost certainly a duplicate: Is there a JQuery tooltip plugin that supports HTML content and automatically positions tooltips?. To name but one :)
Either way you should look at tooltips, a quick google search found this:
http://jqueryui.com/tooltip/
It should let you use html content inside the tooltop.

you can use Hover event in jQuery or javascript whatever you like and in that even write your code whatever you want to achieve etiher showing block or displaying image:-
$("#idOfElement").on("hover", function()
{
////your code
});

How does the example variableInputs for Processing 2.0 javaScript mode works? How to tweak?

I'm using Processing.org looking at the example variableInputs in javaScript mode (can't find it online, but it is included with the download)
It has two tabs, one java and one .js. And a cool example on how to pass data around both.
In the first tab there are some HTML/CSS commented out. Those are building the page when I hit run...
How's that working?
Is it possible to have for instance more than one drop down menu (selector) side by side? I managed to have them, but always one below the another.
Is the way to go to edit the html in the first tab?
help?
do you need me to copy and paste the example here?
[EDIT]
When I hit export, the PDE exports:
index.html
processing.js //(the library it self)
interface.js //(the second tab in the PDE)
sketchName.pde //(the usual pde)
The html tags from above the code are included in index.html, so it can be edited there. Not sure though this is inserted in the html page. So putting the menus side by side turns out to be a HTML question I think... What i also don't know how to do :), but I'll look for it
[edit2] or perhaps a javaScript question... As is interface.js that is making th econtrols... How to control the position of them?
[edit3] well tuns out that the line
<form id="form-form"><!-- empty --></form>
is doing the link, via th id form-form...
Still is it possible to have some menus side by side inatead of one below another?

It is indeed a css/html issue as bfavaretto suggests. In order to do what you asked for try this:
style section in comments (java tab), essentially you have to make the two drop downs' width smaller (45%) and then css hacks to bring them inline, float:left or right
* <style>textarea,input,label,select{display:block;width:95%}select{width:45%;clear:none;float:left}
* input[type=checkbox],input[type=radio]{width: auto}textarea{height:5em},</style>
setController() method, add another ctrl.addMenu(); as such:
element = ctlr.addMenu( "theMenu", menuItems );
element = ctlr.addMenu( "theMenau", menuItems );
The problem after this is that the two labels block the two menus from coming in-line thus you probably have to remove them from these elements and add them manually. In the javascript tab comment out line 157:
//form.appendChild(label);
This line is in function this.addSelection = function ( l, o ) {

facebook homepage like pull down div

after logging on to facebook, there is a downward arrow symbol after home tab. On clicking it shows a div (?) which just appears on the existing content and on another click it disappears.
How can I make exactly such a thing?
Edit:
I followed this link from TheBlackBenzKid. One thing is clear, on clicking on the button, just 2 divs are toggled.
But AFAIK toggle takes place on mouse click. so the 'click' event should be there in the jquery code.
1) But I didn't find it. where is that?
2)there is some css that makes it possible for the menu to appear on a place without dislocating the existing content there( from the demo this is not visible, but it does happen actually). What is that css code?

There are so many ways to do these things: thefinishedbox.com/files/freebies/dropdown-gui/index.html this is a nice one that already comes with simple clean CSS look and feel

This is how i wouldve done it, but its a pretty basic solution.
div id="arrowid">▼</div>
<div id="dropdownbox" style="display:none;">Dropdownbox</div>
<script type="text/javascript">
$(document).ready(function() {
$('#arrowid').click(){
$('#dropdownbox').toggle();
});
});
</script>
this one does'nt support outside clicks, it just shows and hides when clicking the arrow. Hope it helps!

You can use .slideToggle() to achieve this effect, if you are using jQuery.
Use it to display or hide the matched elements with a sliding motion.
.slideToggle( [duration] [, easing] [, callback] )
duration: A string or number determining how long the animation will run.
easing: A string indicating which easing function to use for the transition.
callback: A function to call once the animation is complete.

How to use onmouseover?

I have a list being displayed on a JSP. On mouse hover on any of the value i need to show a description corresponding that value. Need to show description not as an alert and also cannot make the values as hyperlink.
eg.
suppose the value is ABC so on mouse hover should show AppleBoyCat.
need to use onmouseover. let me know how to do it..

What do you want to do? If you just want to show a tooltip, you can set the title attribute of any element and it will be displayed as a tooltip.
Also, the abbr tag can be used as tooltips too:
<abbr title="test">stuff</abbr>

You can go about it in two ways:
1 - a hidden dom object (a div for instance) which reveals itself when you roll over whatever
or
2 - you can rewrite the html of the particular element you're mousing over.
You can load this data in when you load everything else (either as Javascript objects, or as markup, though that's much bulkier) or you can asynchronously load the description data from a service when you mouse over (though you'll have more lag).
jQuery is a quick and dirty way to achieve this (more quick than dirty), but straight JS or pretty much any other JS library will do as well.

Perhaps not the cleanest solution but something like this:
<a class='hover' rel='tooltip'>Link</a>
//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>
$(function() {
$('.hover').mouseover(function() {
var tooltip = $(this).attr('rel');
$('#' + tooltip).fadeIn();
});
});
And offcourse add a callback hiding it again. It just takes the value from rel of the link and use as an id for the div to show.
This is a quick and dirty solution, can be made alot smoother if you just work with it a little;)
There also alot of plugins out there allowing the same functionality in a cleaner fashion.
*Edit: Just noticed you added a comment on another post that you can't use jQuery.. shouldn't tag a post with something you're not intending to use.

As TJHeuvel already said, you can simply use the title attribute.
Best approach is to build the list with both the value and title attribute from within JSP, if not possible for some reason, you can build client side array of each value and its corresponding description then using JavaScript dynamically assign the title on mouseover.
Show us some more code to get more/better help.

For simple tooltips, the title attribute is most effective, as pointed out by TJHeuvel
If you need more advanced tooltips with HTML and CSS formatting, I'd suggest you use an external library.
One that works nicely without jQuery ist wz_tooltip download here, documentation here
When included correctly, you can add tooltips by calling the functions Tip() and UnTip() as follows:
Homepage