Hiding/appearing widgets Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
3 posters

    Hiding/appearing widgets

    Monikita
    Monikita
    Forumember


    Female Posts : 63
    Reputation : 0
    Language : English
    Location : Lithuania

    In progress Hiding/appearing widgets

    Post by Monikita February 21st 2019, 12:40 pm

    Dear community,

    For quite some time I am searching for a possibility to create widget that are hidden, but that also appears on screen when a cursor is moved to a specific area.
    I have found a relatable topic and did try to do some coding according to the information given, yet... I didn't manage to get any result Sad
    So I was wondering maybe someone could help me with providing any relevant information/tutorial about the possible way to do this hide/reveal widget coding?

    My forum link: www.seoul-arts.com
    Version: phpBB2

    Thank you for your time and any possible help
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51498
    Reputation : 3523
    Language : English
    Location : United States

    In progress Re: Hiding/appearing widgets

    Post by SLGray February 21st 2019, 9:17 pm




    Hiding/appearing widgets Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    Monikita
    Monikita
    Forumember


    Female Posts : 63
    Reputation : 0
    Language : English
    Location : Lithuania

    In progress Re: Hiding/appearing widgets

    Post by Monikita February 26th 2019, 7:56 am

    Dear @SLGray, thank you for your suggestion. Sadly, it's not exactly what I was looking for Sad
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    In progress Re: Hiding/appearing widgets

    Post by _Twisted_Mods_ March 1st 2019, 5:40 am

    Try this
    Code:
    <style>
    .hiddenstyle{display:none;}
    </style>

    <h1 id="demo">Mouse over me</h1>

    <div id="hiddenwidget" class="hiddenstyle">
      something hidden
    </div>

    <script>
    document.getElementById("demo").addEventListener("mouseover", mouseOver);
    document.getElementById("demo").addEventListener("mouseout", mouseOut);

    function mouseOver()
    {
        var element = document.getElementById("hiddenwidget");
        element.classList.remove("hiddenstyle");
    }

    function mouseOut()
    {
        var element = document.getElementById("hiddenwidget");
        element.classList.add("hiddenstyle");
    }
    </script>