Print Page | Close Window

alternating text color triggered by mouseover

Printed From: Forum openElement
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: http://forum.openelement.com/fr/forum_posts.asp?TID=1838
Printed Date: 22 Sep 2021 at 13:07
Software Version: Web Wiz Forums 10.11 - http://www.webwizforums.com


Topic: alternating text color triggered by mouseover
Posted By: WattJet
Subject: alternating text color triggered by mouseover
Date Posted: 29 Mai 2021 at 14:51
 
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: 29 Mai 2021 at 15:19
can be done ith javascript and/or css 

Are you comfortable with any of them?


-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: WattJet
Date Posted: 29 Mai 2021 at 15:27
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: 29 Mai 2021 at 16:31
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-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: WattJet
Date Posted: 29 Mai 2021 at 16:59
Wow!  Thanks so much!


Posted By: Hobby001
Date Posted: 29 Mai 2021 at 18:45
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-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: WattJet
Date Posted: 29 Mai 2021 at 21:19
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: 29 Mai 2021 at 22:24
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-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: WattJet
Date Posted: 29 Mai 2021 at 22:41
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: 30 Mai 2021 at 00:16
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-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: WattJet
Date Posted: 30 Mai 2021 at 09:37
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: 30 Mai 2021 at 13:43
Did you adjust the margins?

-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: Hobby001
Date Posted: 30 Mai 2021 at 15:33
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-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: WattJet
Date Posted: 30 Mai 2021 at 16:16
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: 30 Mai 2021 at 18:36
The down arrow helps understand that there is more to see.  Good idea!

-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: WattJet
Date Posted: 30 Mai 2021 at 21:10
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: 30 Mai 2021 at 21:22
Nice looking site. I hope that you have copyright on each image used on it.

-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: WattJet
Date Posted: 30 Mai 2021 at 22:27
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: 30 Mai 2021 at 23:18
Closing subject

-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big



Print Page | Close Window

Forum Software by Web Wiz Forums® version 10.11 - http://www.webwizforums.com
Copyright ©2001-2012 Web Wiz Ltd. - http://www.webwiz.co.uk