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.

Hiding/appearing widgets

3 posters

Go down

In progress Hiding/appearing widgets

Post by Monikita Thu 21 Feb - 11:40

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
Monikita
Monikita
Forumember

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

http://seoul-arts.123.st/

Back to top Go down

In progress Re: Hiding/appearing widgets

Post by SLGray Thu 21 Feb - 20:17



Hiding/appearing widgets Slgray10

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

Male Posts : 51554
Reputation : 3524
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

In progress Re: Hiding/appearing widgets

Post by Monikita Tue 26 Feb - 6:56

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

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

http://seoul-arts.123.st/

Back to top Go down

In progress Re: Hiding/appearing widgets

Post by _Twisted_Mods_ Fri 1 Mar - 4:40

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>
_Twisted_Mods_
_Twisted_Mods_
Helper
Helper

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

http://liquidcode.forumotion.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum