The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Sticky-Glitchy MouseOver Issue, MouseOver is sticky-glitchy, meaning that when I mouseover it is not r
Furthark
post Sep 20 2020, 10:03 AM
Post #1





Group: Members
Posts: 2
Joined: 20-September 20
Member No.: 27,547



Hello

New Member and First Post. I am not sure if we can post Salutations and Gratitude in this forum - please edit out if questions cannot be combined with such pleasantries.

The code below is a sample of a section I am working on for a COVID website. The issue with the code is that the MouseOver is sticky-glitchy, meaning that when I mouseover it is not responding as it should - it sometimes stays in its natural state or it bounces in and out or responses as it should when you pass the cursor over the target areas.

Could someone help me identify where I am failing here?

Thank you.

CODE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky-Glitchy MouseOver Issue</title>

<style>
* {
    box-sizing: border-box;
}

body {
    background-color: #f1f1f1;
}

h1, h2, h3, h4, h5, h6, p {
    text-align: center;
    font-family: "Raleway";
}
.top {
    padding: 10px;
    text-align: center;
    background-color: #f1f1f1;
    color: black;
    font-size: 20px;
    font-family: "Raleway";
    display: block
}
.quiz {
    border-radius: 8px;
    margin: 9px;
    float: left;
    width: 24%;
    padding: 15px;
    height:  250px;
    background-color: #f9f9f9;
    display: inline-block;
    text-align: center;
    font-family: "Libre+Baskerville";
    font-size: 20px;    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.buttonrow {
    float: left;
    width: 25%;
    padding: 10px;
    height:  auto;
    background-color: #f1f1f1;
    display: inline-block
}
.row {
    column-gap: 20px;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}
.button {
    position: relative;
    font-family: "Raleway";
    font-weight: bold;
    background-color: #000;
    border-radius: 5px;
    border: none;
    color: white;
    padding: 12px 28px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    transition-duration: 0.4s;
}
.button1:hover {
  box-shadow: 0 10px 14px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>

</head>
<body>

<div class="top">
    <h2>Quiz</h2>
</div>
<div class="row">
    <div class="quiz">
        <div onmouseover="qone_Over(this)" onmouseout="qone_Out(this)"><strong>Question One</strong> <br><br> The Spanish Flu was a Pandemic.<br><br> <br><br> <strong>True or False?</strong> <br><br> Mouse Over - To Reveal The Answer</div>
    </div>
    <div class="quiz">
        <div onmouseover="qtwo_Over(this)" onmouseout="qtwo_Out(this)"><strong>Question Two</strong> <br><br> The term - A Slippery Slope - is a general fallacy of logic that plays no role in Denialism.<br> <br><br> <strong>True or False?</strong> <br><br> Mouse Over - To Reveal The Answer</div>
    </div>
    <div class="quiz">
        <div onmouseover="qthree_Over(this)" onmouseout="qthree_Out(this)"><strong>Question Three</strong> <br><br> COVID19 is the 19th version of the Coronavirus Disease.<br> <br><br> <strong>True or False?</strong> <br><br> Mouse Over - To Reveal The Answer</div>
    </div>
    <div class="quiz">
        <div onmouseover="qfour_Over(this)" onmouseout="qfour_Out(this)"><strong>Question Four</strong> <br><br> Washing your hands thouroughly for 20 to 30 seconds with regular soap, helps slow the spread of COVID. <br><br> <strong>True or False?</strong> <br><br> Mouse Over - To Reveal The Answer</div>
    </div>
</div>
<div class="row">
    <div class="buttonrow">
    <h2><a href="" class="button">Read More</a></h2>
    </div>
    <div class="buttonrow">
    <h2><a href="" class="button">Read More</a></h2>
    </div>
    <div class="buttonrow">    
    <h2><a href="" class="button">Read More</a></h2>
    </div>
    <div class="buttonrow">    
    <h2><a href="" class="button">Read More</a></h2>
    </div>
</div>

<script>
// MouseOver Message One Show
    function qone_Over(obj_ov1) {
      obj_ov1.innerHTML = "<strong>True</strong> - <i>The Spanish flu pandemic of 1918, the deadliest in history, infected an estimated 500 million people worldwide—about one-third of the planet's population—and killed an estimated 20 million to 50 million victims, including some 675,000 Americans.</i>"
    }
// MouseOver Message One Hide
    function qone_Out(obj_ot1) {
      obj_ot1.innerHTML = "<strong>Question One</strong> <br><br> The Spanish Flu was a Pandemic.<br><br> <br><br> <strong>True or False?</strong> <br><br> Mouse Over - To Reveal The Answer"
    }
// MouseOver Message Two Show
    function qtwo_Over(obj_ov2) {
      obj_ov2.innerHTML = "<strong>False</strong> - <i>Denialism employs five basic approaches: conspiracy, selectivity (cherry-picking), fake experts, impossible expectations, and general fallacies of logic.</i>"
    }
// MouseOver Message Two Hide
    function qtwo_Out(obj_ot2) {
      obj_ot2.innerHTML = "<strong>Question Two</strong> <br><br> The term - A Slippery Slope - is a general fallacy of logic that plays no role in Denialism.<br> <br><br> <strong>True or False?</strong> <br><br> Mouse Over - To Reveal The Answer"
    }
// MouseOver Message Three Show
    function qthree_Over(obj_ov3) {
      obj_ov3.innerHTML = "<strong>False</strong> - <i>COVID19 means that this string of the Coranvirus Disease emerged or was discovered in the year 2019.</i>"
    }
// MouseOver Message Three Hide
    function qthree_Out(obj_ot3) {
      obj_ot3.innerHTML = "<strong>Question Three</strong> <br><br> COVID19 is the 19th version of the Coronavirus Disease.<br> <br><br> <strong>True or False?</strong> <br><br> Mouse Over - To Reveal The Answer"
    }
// MouseOver Message Four Show
    function qfour_Over(obj_ov4) {
      obj_ov4.innerHTML = "<strong>True</strong> - <i>Hygiene, regardless of pandemics-epidemics and what not – having good hygiene practice is an essential part of maintaining a healthy lifestyle and killing off illness causing bacteria reducing the risk for diseases.</i>"
    }
// MouseOver Message Four Hide
    function qfour_Out(obj_ot4) {
      obj_ot4.innerHTML = "<strong>Question Four</strong> <br><br> Washing your hands thouroughly for 20 to 30 seconds with regular soap, helps slow the spread of COVID. <br><br> <strong>True or False?</strong> <br><br> Mouse Over - To Reveal The Answer"
    }
</script>

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 20 2020, 02:08 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,587
Joined: 10-August 06
Member No.: 7



I suspect it's caused by the DIVs changing size. For example, hovering over the first question reduces its DIV height, so that the mouse cursor then ends up over the next question. You might avoid this by giving each question DIV a fixed size, or maybe display the answer in a separate box that's outside the normal flow (for example by using absolute positioning).
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Furthark
post Sep 20 2020, 03:20 PM
Post #3





Group: Members
Posts: 2
Joined: 20-September 20
Member No.: 27,547



QUOTE(Christian J @ Sep 20 2020, 02:08 PM) *

I suspect it's caused by the DIVs changing size. For example, hovering over the first question reduces its DIV height, so that the mouse cursor then ends up over the next question. You might avoid this by giving each question DIV a fixed size, or maybe display the answer in a separate box that's outside the normal flow (for example by using absolute positioning).



Christian,

Thank you for the feedback. Greatly appreciated it. I went ahead and found a work-around, which fixed the glitch - however, at the cost of loosing the formatting. I am not sure how to format the text within the division tag, Example:

CODE
<div id="quiz" onmouseover="changeThis2('   --> How do I format the Text within this space <--   ')" onmouseout="returnThis2('   --> That would resolve my new conundrum <--   ')" >


So, for now it is staying the way it is, unless I find another solution. Btw, I am totally new to this and truly trying to grasp it. If your prior feedback comes with examples - that would be greatly appreciated.

Thanks,

Provided is the what I changed the code to.

CODE

<!DOCTYPE html>
<head>
<title>Fixed Glitch, however Formatting was affected</title>

<style>
* {
    box-sizing: border-box;
}

body {
    background-color: #f1f1f1;
}

h1, h2, h3, h4, h5, h6, p {
    text-align: center;
    font-family: "Raleway";
}
.top {
    padding: 10px;
    text-align: center;
    background-color: #f1f1f1;
    color: black;
    font-size: 20px;
    font-family: "Raleway";
    display: block
}
.row {
    column-gap: 20px;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}
#quiz {
    border-radius: 8px;
    margin: 9px;
    float: left;
    width: 24%;
    padding: 15px;
    height:  125px;
    background-color: #f9f9f9;
    display: inline-block;
    text-align: center;
    font-family: "Libre+Baskerville";
    font-size: 20px;    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.buttonrow {
    float: left;
    width: 25%;
    padding: 10px;
    height:  auto;
    background-color: #f1f1f1;
    display: inline-block
}
.button {
    position: relative;
    font-family: "Raleway";
    font-weight: bold;
    background-color: #000;
    border-radius: 5px;
    border: none;
    color: white;
    padding: 12px 28px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    transition-duration: 0.4s;
}
.button:hover {
  box-shadow: 0 10px 14px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>

</head>
<html>
<body>

<div class="top">
    <h2>Quiz</h2>
</div>

<div class="row">
    <div id="quiz" onmouseover="changeThis1('True - The Spanish flu pandemic of 1918, was the deadliest Pandemic in history.')" onmouseout="returnThis1('Question One:  The Spanish Flu was a Pandemic. (True or False?) To Reveal The Answer - Mouse Over this box')" >
    <div id="text-display1" > Question One:  The Spanish Flu was a Pandemic. (True or False?) To Reveal The Answer - Mouse Over this box </div></div>
    
    <div id="quiz" onmouseover="changeThis2('False - Denialism employs five basic approaches: conspiracy, selectivity (cherry-picking), fake experts, impossible expectations, and general fallacies of logic.')" onmouseout="returnThis2('Question Two:  The term, A Slippery Slope, is not part of Denialism. (True or False?) To Reveal The Answer - Mouse Over this box')" >
    <div id="text-display2" > Question Two:  The term, A Slippery Slope, is not part of Denialism. (True or False?) To Reveal The Answer - Mouse Over this box </div></div>
    
    <div id="quiz" onmouseover="changeThis3('False - COVID19 means that this string of the Coranvirus Disease emerged or was discovered in the year 2019.')" onmouseout="returnThis3('Question Three:  COVID19 is the 19th version of the Coronavirus Disease. (True or False?) To Reveal The Answer - Mouse Over this box')" >
    <div id="text-display3" > Question Three:  COVID19 is the 19th version of the Coronavirus Disease. (True or False?) To Reveal The Answer - Mouse Over this box </div></div>
    
    <div id="quiz" onmouseover="changeThis4('True - Hygiene, regardless of pandemics-epidemics and what not reduce the risk of contracting a disease.')" onmouseout="returnThis4('Question Four:  Washing your hands thoroughly helps prevent contracting COVID. (True or False?) To Reveal The Answer - Mouse Over this box')" >
    <div id="text-display4" > Question Four:  Washing your hands thoroughly helps prevent contracting COVID. (True or False?) To Reveal The Answer - Mouse Over this box </div></div>
</div>

<div class="row">
    <div class="buttonrow">
    <h2><a href="" class="button">Read More</a></h2>
    </div>
    <div class="buttonrow">
    <h2><a href="" class="button">Read More</a></h2>
    </div>
    <div class="buttonrow">    
    <h2><a href="" class="button">Read More</a></h2>
    </div>
    <div class="buttonrow">    
    <h2><a href="" class="button">Read More</a></h2>
    </div>
</div>

<script>
    function changeThis1(text)
        {
            var display = document.getElementById('text-display1');
            display.innerHTML = "";
            display.innerHTML = text;
        }
          function returnThis1(text)
        {
            var display = document.getElementById('text-display1');
            display.innerHTML = "";
            display.innerHTML = text;
        }

    function changeThis2(text)
        {
            var display = document.getElementById('text-display2');
            display.innerHTML = "";
            display.innerHTML = text;
        }
          function returnThis2(text)
        {
            var display = document.getElementById('text-display2');
            display.innerHTML = "";
            display.innerHTML = text;
        }

    function changeThis3(text)
        {
            var display = document.getElementById('text-display3');
            display.innerHTML = "";
            display.innerHTML = text;
        }
          function returnThis3(text)
        {
            var display = document.getElementById('text-display3');
            display.innerHTML = "";
            display.innerHTML = text;
        }

    function changeThis4(text)
        {
            var display = document.getElementById('text-display4');
            display.innerHTML = "";
            display.innerHTML = text;
        }
          function returnThis4(text)
        {
            var display = document.getElementById('text-display4');
            display.innerHTML = "";
            display.innerHTML = text;
        }        
</script>

</body>
</html>



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 20 2020, 07:01 PM
Post #4


Computer says no.
********

Group: WDG Moderators
Posts: 19,186
Joined: 9-August 06
Member No.: 6



Do you mean you want the answer to be formatted differently than the question?

First, you shouldn't have changed from class to id. An id can occur exactly once in a page. Change back to class.

Set up a new rule with the styling you want for the answers. Let's say you want the text to be red and bold.

CODE
.answer  { color: red; font-weight: bold }


Then you can add and remove that class on mouseover like this.

CODE
<div class="quiz" onmouseover="changeThis1('True - The Spanish flu pandemic of 1918, was the deadliest Pandemic in history.'); classList.add('answer')" onmouseout="returnThis1('Question One:  The Spanish Flu was a Pandemic. (True or False?) To Reveal The Answer - Mouse Over this box'); classList.remove('answer')">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 20 2020, 07:28 PM
Post #5


Computer says no.
********

Group: WDG Moderators
Posts: 19,186
Joined: 9-August 06
Member No.: 6



BTW you may want to change "bacteria" in the below to "bacteria and viruses".

"Hygiene, regardless of pandemics-epidemics and what not – having good hygiene practice is an essential part of maintaining a healthy lifestyle and killing off illness causing bacteria reducing the risk for diseases."

Just happened to notice. I don't think all of them are killed off by soap and water either even if this corona virus is, but hopefully those that aren't killed off are washed off. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 31st October 2020 - 05:30 PM