Print Page | Close Window

alternating text color triggered by mouseover

Printed From: openElement Website
Category:

openElement


Forum Name: Websites Created with OpenElement
Forum Description: Submit a website you created using the software and share feedback with other users.
URL: https://forums.openelement.uk/en/forum_posts.asp?TID=1838
Printed Date: Mar 29 2024 at 4:25am
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com


Topic: alternating text color triggered by mouseover
Posted By: WattJet
Subject: alternating text color triggered by mouseover
Date Posted: May 29 2021 at 1:51pm
 
Hi,

I created this website with OE https://datamilling.com/
It is based on the senslight template but I did change structure and limited some functionalities, and avoid using others

I have a question on how to create a feaure:
in the section https://datamilling.com/Services.htm currently there three text boxes with bullet point questions.
  • Do we have data? Is data available?
  • Where is the data?
I would like to give answers to those questions through a mouseover or mouseclick, in such way that with a mouseover and/or click, the corresponding  answer to each question  appears.

i.e. If the mouse goes over the "Do we have data?...," then the response text for that question only appears
  • Do we have data? Is data available?
 - Analysis of data repositories   
  • Where is the data?

If the mouse then goes over "Where is the data?" then the previous answer blends with background and the new answer appear
  • Do we have data? Is data available?
 - Analysis of data repositories   
  • Where is the data?
- Data Management Architecture  
-----------

I do not think that buttons are functional here. Alternartively, I tried to use the customization, but it only allows me to select the entire field/box, and not part of it (again, for me the important thing is that only the specific answer to the question appears.... otherwise user will perceive it as a long text and will go elsewhere

Any suggestions will be welcome
Wattjet



Replies:
Posted By: Hobby001
Date Posted: May 29 2021 at 2:19pm
can be done ith javascript and/or css 

Are you comfortable with any of them?


-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: WattJet
Date Posted: May 29 2021 at 2:27pm
not really..... I was hoping there was element/feature something within OE to achieve this result.

I will look on the internet to see if there is a similar CSS available (after all it is a common feature in many sites)

Regards


Posted By: Hobby001
Date Posted: May 29 2021 at 3:31pm
add a group of element to a blank page and give it question as custom class

add a text blok with your question in it and another one with your answer

give the answer text block answer for custom class

create a css code block in header position

add the following code:

.question .answer{
opacity:0;
transition: 1s;
}
.question:hover .answer{
opacity:1;
}


Here is the result:  https://denislafrance.net/Dev1.htm" rel="nofollow - https://denislafrance.net/Dev1.htm



-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: WattJet
Date Posted: May 29 2021 at 3:59pm
Wow!  Thanks so much!


Posted By: Hobby001
Date Posted: May 29 2021 at 5:45pm
You may use something else like

.question .answer{
opacity:0.05;
transition: 1s;
}
.question:hover .answer{
opacity:1;
width:auto
}


This will tell visitors that they might have to hover or click to see wht's behind. see tghe example on my site.




-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: WattJet
Date Posted: May 29 2021 at 8:19pm
It looks great indeed. Thanks again for all your help!

It took me some time, but I have made it work (see https://datamilling.com/TestQandA.htm)
Now the question is how to I make it work in the desired location  (https://datamilling.com/Services.htm , see the same Q&A in the light blue field)

As in your example, I assume that I will need to do one frame for each question. Since each of the text boxes containing the set of questions is part of a group element of the original Senselight template (PAN_INFO_01; PAN_INFO_02; PAN_INFO_03), to keep the same configuration, I will have to
a) Create a group element in each of the pannels, that I will fill with the corresponding background color
b) Within each of those group elements, I will create a number the group elements, one for each Q&A

Is this right? or is it there another way to group the Q&A so that they show as they do now?


Posted By: Hobby001
Date Posted: May 29 2021 at 9:24pm
Since there is no identifyable difference between two lines in a multi-line text element, there is no easy way to do it with pure CSS.

You will have to redo your text as shown.




-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: WattJet
Date Posted: May 29 2021 at 9:41pm
Yes, I understand that point.
The question is if I can group a set of questions and answers (each of these with a specific frame, and two text eelements each as you showed), so that they show all part of a "box" that will act as a frame (each of the three colored boxes I show in the page https://datamilling.com/Services.htm


Posted By: Hobby001
Date Posted: May 29 2021 at 11:16pm
I added a group of elements and included all the other in it.

I surrounded all the components with a border to make it more visible.

Here is the result:  https://denislafrance.net/Dev1.htm" rel="nofollow - https://denislafrance.net/Dev1.htm



-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: WattJet
Date Posted: May 30 2021 at 8:37am
Thanks so much for that Hobby001!

I did it like that, only changing the background instead of the border.

The issue that I am not able to modify is the distance in height

See the test-site https://mydatamygain.co.uk/Services.htm
You will note that in the top light blue square I included the feature , but that the vertical space between each of the questions (and also between each question and answer) is too large.

I would like to make it appear as it shows in the light blue square square below (which is just a text field).
I have been trying to move fields etc with no success







Posted By: Hobby001
Date Posted: May 30 2021 at 12:43pm
Did you adjust the margins?

-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: Hobby001
Date Posted: May 30 2021 at 2:33pm
If you don't find the solution, make a copy of your project.

In this copy, right click on the page in the site explorer and switch it with the home page

Remove all pages but the new home page

empty the project's recycle bin

Make a back-up using OE's utility and send it to me I will send you my email trough your site's contact address


-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: WattJet
Date Posted: May 30 2021 at 3:16pm
I have now.
I've tested in both in PC & in Mobile and it works now. https://mydatamygain.co.uk/Services.htm
One of the three  boxes is ready. Two to go
Thanks again for all your help


Posted By: Hobby001
Date Posted: May 30 2021 at 5:36pm
The down arrow helps understand that there is more to see.  Good idea!

-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: WattJet
Date Posted: May 30 2021 at 8:10pm
Site is now live with all the additions https://datamilling.com/Services.htm

Thanks again for all your help Hobby001


Posted By: Hobby001
Date Posted: May 30 2021 at 8:22pm
Nice looking site. I hope that you have copyright on each image used on it.

-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video


Posted By: WattJet
Date Posted: May 30 2021 at 9:27pm
Yes,
Most are free images from pixabay.com & unsplash.com and the cover and logo is bought
Thanks for the head's up


Posted By: Hobby001
Date Posted: May 30 2021 at 10:18pm
Closing subject

-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video



Print Page | Close Window

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net