SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    combination of CSS and javascript?? Something isn't working

    Hi all,

    I would like to style a button in such a way that when hovering over, a string of text will apear a little above the image. The image is a replacement for the default button. The idea is that you have a button as normal but now without any text just the image and when on mousover you will see the text telling what the button can do.

    The problem is that I do not fully understand how to do this in the code I have to deal with. I guesse the only solution of doing this is with putting the value="Select Column Layouts" in between span elements position it a little above the button image and then only displaying when hover.

    The thing is, in the first lines of code the button is made up but I do not have any idea how to incorporate span in it so that it will be printed in the second code block (which is the output users will see)

    1) lines of code creating the button
    return '<input type="button" class="button" onclick="document.getElementById(\'' . $this->pager_name . '_widget\').style.display=\'block\'; location.href=\'#' . $this->pager_name . '_select_columns\';" value="' . _("Select Column Layouts") . '">';

    2) how the button is presented to the user
    <input type="button" class="button" onclick="document.getElementById('CompanyPager_widget').style.display='block'; location.href='#CompanyPager_select_columns';" value="Select Column Layouts">

    The things I tried made the code red before the value= statement so I guess that I did something wrong or that it is not allowed to put in a span in combination with javascript.

    Any ideas?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Did you mean something like this.

    http://www.pmob.co.uk/temp/input-popup.htm

    Roll your mouse over the input.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes that is what I mean. The thing is, want to use the value= "statement" because the button is from an online program that is using severall languages. So by using that text string in the box as in your example would result in a flexible solution which will work in every language without changing or adding addition text trings.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    If I understand you correctly you want the text that is in the value attribute to be presented in that hover text box.

    You would need to write a script that gets the attribute value of the input and then writes it dynamically inside the span.

    This is more of a javascript question and if that's what you mean I will move this to the JS forum where I'm sure they can sort you out.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes that is what I mean but had no idea how -and therefore where- to put it. It would be great if you could easily put it where this question needs to be answered. Thanks Paul

  6. #6
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use a <button> element, not an input button.

    A button can contain child elements, like spans and images, which can be displayed or hidden with css and javascript in event handlers.
    The onclick event can remain the same.

    But some day you ought to get all that script out of the html, and put it in a script element.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for replying. The problem is, I have zero knowledge of javascript so I have no idea what you mean. Could you explain it to me using the two blocks of code presented in this thread?

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tried to do something with <button> in my code but it breaks javascript. I have realy no idea how to do this so it would be great if someone could show it.

    1) lines of code creating the button
    return '<input type="button" class="button" onclick="document.getElementById(\'' . $this->pager_name . '_widget\').style.display=\'block\'; location.href=\'#' . $this->pager_name . '_select_columns\';" value="' . _("Select Column Layouts") . '">';

    In the above code I need value="' . _ etcetc in between a span element.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Sorry that no one has answered your question here so I will try to offer some limited help

    You could get the attribute value and paste it into the span above like this.

    http://www.pmob.co.uk/temp/input-popup2.htm

    However that code requires that you ID each span that holds the message to identify it and I'm sure someone else can offer the correct code to traverse the dom and find the correct element automatically and unobtrusively.

    However it may give you a start


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •