Click here to Skip to main content
12,359,102 members (33,014 online)
Rate this:
 
Please Sign up or sign in to vote.
See more: CSS HTML CSS3 HTML5
.section_main_left_square3 {
    height: 77.5%;
    width: 39.5%;
    border-color: #aaa5a5;
    border-width: 1px;
    border-style: solid;
    float: left;
    border-left-color: transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    text-align: center;
}
 
    .section_main_left_square3 .section_main_left_divide_top_3 {
        height: 50%;
        width: 100%;
    }


Inside de .section_main_left_square3 i have the graph and i have divide in the two others div´s in verticly.

.section_main_left_divide_top_3 - here is where i put the text but when i put the text he just go down...


Here it is the HTML:

<div class="section_main_left_square">
                   <div class="section_main_left_divide_top_3"><span id="line1_value3" class="label_divide_top"></span></div>
                   <div class="section_main_left_divide_bottom_3"><span id="line1_value4" class="label_bottom"></span></div>
                   <div id="container" class="graph"></div>
               </div>
Posted 20-Sep-12 0:39am
hh_7643
Updated 24-Sep-12 0:37am
v2
Comments
Sergey Alexandrovich Kryukov 20-Sep-12 12:43pm
   
Sorry, what does it mean, "put text hover a graph"?
--SA
hh_7 20-Sep-12 12:44pm
   
Sorry for my bad english :S weel let me try to explain the graph stays in second plan and the text should be in the first plan but both should be visible...
Sergey Alexandrovich Kryukov 24-Sep-12 13:15pm
   
That clarifies things, no problem, and thanks. I think I know what do you need -- please see my answer.
--SA
Ashraff Ali Wahab 20-Sep-12 14:43pm
   
Post your HTML as well.

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

I would advise to use jQuery JavaScript library for this purpose.

Most likely, you need something like this "input hint box":
http://archive.plugins.jquery.com/project/floating_hint_box[^].

Basically, you would need to use the method .hover:
$(document).ready(function() { // add a handler to call the anonymous method when document is ready
  myGraph = $("#myGraph"); // a jQuery wrapper over the element found by the "id delector", by the attribute id="myGraph"
  myGraph.hover( // add the handlers: two anonymous methods are passed as arguments
    function () { // when mouse goes over the graph
      showHint(myGraph, /* ... */);
    }, 
    function () { // when mouse leaves
      hideHint(myGraph, /* ... */);
    }
  );
});

The methods showHint and hideHint can be developed separately, based on the "input hint control" shown above, or something similar. You will be able to find a great number of so called jQuery plug-ins to get different ways of presenting of you hint text control with different transition effects, etc.

See also:
http://api.jquery.com/category/selectors/[^],
http://api.jquery.com/id-selector/[^],
http://api.jquery.com/hover/[^].

If you need to learn jQuery, please start here:
http://en.wikipedia.org/wiki/JQuery[^],
http://docs.jquery.com/[^],
http://docs.jquery.com/Tutorials[^],
http://docs.jquery.com/Tutorials:How_jQuery_Works[^].

—SA
  Permalink  
v8
Comments
hh_7 24-Sep-12 13:31pm
   
Thanks for the help!
Sergey Alexandrovich Kryukov 24-Sep-12 13:34pm
   
My pleasure.
Good luck, call again.
--SA

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web02 | 2.8.160621.1 | Last Updated 24 Sep 2012
Copyright © CodeProject, 1999-2016
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100