Retired script, but I still want it, and it does not work...

**LarryJohnson** · 05-13-2021, 04:57 AM

1) Script Title: Browser Earthquake!

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...earthquake.htm

3) Describe problem:
Sorry, I tried posting this earlier, but the question never showed in the list, like I was expecting it too, and so I thought maybe I did something wrong, so I am reposting to make sure...Anyway, on to my question...

I used to have this script on a personal website, and recently came across that site again, but the script is no longer working. I believe it may have to do with the fact I created it in IE (6.0, maybe 7.0?) but now I am using Chrome browser.
I have also tried to open this page in Microsoft EDGE browser, but the effect is still not working.

My question is this: Is this script not able to work in Chrome, even though I have settings to allow Javascript? AND if that is the reason, Is there another script that would do the same thing in Chrome? IF the script is working, is there some other setting I need to adjust?

Many Thanks,

Larry

**coothead** · 05-13-2021, 10:46 AM

Hi there LarryJohnson,

How about using CSS instead of JavaScript?

Here is an example...

Code:


<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Page Shaker</title>

<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->

<style media="screen">
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
 } 

html, body {
    height: 100%;
    background-color: #f0f0f0;
    font: normal 1em / 1.5em sans-serif;
}
#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height:100%;
    padding:1em;
 }
h1 {
    color: #555;
    font-weight: normal;
    text-align: center;
    text-transform: capitalize;
    text-shadow: 2px 2px 2px rgba( 0, 0, 0, 0.4 );
 }
input {
    position: absolute;
    left: -999em;
 }
input:checked + #container {
    animation: shake 1s 1s infinite;
 }
input:checked + #container label {
    background-color: #f00;	
 }
input:checked + #container label::before {
    content: 'stop';	
 }
#container label {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 15em;
    padding: 1em;
    margin: auto;
    border: 1px solid #000;
    border-radius: 0.75em;
    background-color: #0f0;
    box-shadow: 0.3em 0.3em 0.3em rgba( 0, 0, 0, 0.4 );
    font-size: 2em;
    cursor: pointer;
    transition: 1s ease-in-out;
 }
#container label::before {
    content: 'start';
    margin-right: 0.5em;
 }
@keyframes shake {
  0%	{ margin: 0; }
 10%	{ margin: -2px 0 0 -2px; }
 20%	{ margin: 0; }
 30%	{ margin: -2px 0 0 -2px; }
 40%	{ margin: 0;}
 50%	{ margin: -2px 0 0 -2px; }
 60%	{ margin: 0; }
 70%	{ margin: -2px 0 0 -2px; }
 80%	{ margin: 0; }
 90%	{ margin: -2px 0 0 -2px; }
100%	{ margin: 0; }
 }
</style>

</head>
<body>

 <input type="checkbox" id="cb">

 <div id="container">

  <h1>a little page shaker</h1>

  <label for="cb">shake</label>

 </div>

</body>
</html>

You can see a Demo here...

A little page shaker

coothead