General developer forum

Making 2D icons "shake" during MouseOver in Moodle

 
 
Frankie's the name, Moodle's my game!
Making 2D icons "shake" during MouseOver in Moodle
Group Particularly helpful Moodlers

Hi y'all!

Question: How can I apply the a Javascript mouseOver shake effect to ALL icons and images on my Moodle pages?

I've used the code found here:
http://www.dynamicdrive.com/dynamicindex4/shake.htm
to make certain icons "shake" on screen when a mouseover is done.

Step 1: Insert the below into the <head> section of your page:

<style>
.shakeimage{
position:relative
}
</style>
<script Xlanguage="JavaScript1.2">

/*
Shake image script (onMouseover)-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

//configure shake degree (where larger # equals greater shake)
var rector=3

///////DONE EDITTING///////////
var stopit=0
var a=1

function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}

function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector+"px"
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector+"px"
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector+"px"
}
else{
shake.style.left=parseInt(shake.style.left)-rector+"px"
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}

function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}

</script>

Step 2: Add the below inside the <img> tag of all of the images you want the effect applied to:

class="shakeimage" XonMouseover="init(this);rattleimage()" XonMouseout="stoprattle(this);top.focus()" XonClick="top.focus()"

For example, in my course, I've managed to get the clock to shake and shimmer whenever I do a mouse-over.

Which brings me to my original question: How can I apply the same effect to ALL icons and images on my Moodle pages?

See attached image.

 

Now WHY would anyone want to do this????

Well, in the Spirit of BumpTop (now acquired by Google, the lucky and talented devils!!!), having icons that shake bring about a more visceral 3D object experience to Moodle which is dominated by 2D icons.

Awaiting your answer....

Frankie Kam, Melaka, Malaysia.

 
Average of ratings: -
Frankie's the name, Moodle's my game!
Re: Making 2D icons "shake" during MouseOver in Moodle
Group Particularly helpful Moodlers

It took me more than a YEAR to find a related solution for this.
http://moodurian.blogspot.com/2011/12/wiggly-icons-on-your-moodle-site-to.html

Now to extend the same method and trick to all Moodle static icons.
Ah, one step closer to Moodle Heaven!

If anyone knows how I can close this ticket, please contact me at boonsengkam@gmail.com.

 
Average of ratings: -
Frankie's the name, Moodle's my game!
Re: Making 2D icons "shake" during MouseOver in Moodle
Group Particularly helpful Moodlers

OK! Now ALL Moodle activity icons can wiggle too!

How you can make it happen on your Moodle 1.9.15+ site as well:
http://moodurian.blogspot.com/2011/12/wiggly-icons-on-your-moodle-site-to.html

(warning! Not tested on Moodle 2.x environment!)

and

ENJOY it from this Sunday Christmas morning and onwards!
Frankie Kam
Melaka, Malaysia 

 
Average of ratings: -
Frankie's the name, Moodle's my game!
Re: Making 2D icons "shake" during MouseOver in Moodle
Group Particularly helpful Moodlers

Hi. I'm trying to make the activity icons in Moodle 2.4 to wiggle. Previosly successful with Moodle 1.9.15 but I hit a brickwall with Moodle 2.x code. I'm guessing that I need to put the javascript code:

<style>
.shakeimage{
position:relative
}
</style>
<script language="JavaScript1.2">

/*
Shake image script (onMouseover)-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

//configure shake degree (where larger # equals greater shake)
var rector=3

///////DONE EDITTING///////////
var stopit=0
var a=1

function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}

function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector+"px"
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector+"px"
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector+"px"
}
else{
shake.style.left=parseInt(shake.style.left)-rector+"px"
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}

function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}

</script>

 inside my the <header> ... </header> portion of Moodle 2.x theme file, i.e., inside the files named

/moodle/theme/moodlebook/layout/general.php
/moodle/theme/moodlebook/layout/frontpage.php
/moodle/theme/moodlebook/layout/embedded.php

because I didn't know which file to insert the javascript code into. Is this correct?

I then inserted the shakeimage bold text code inside the filename moodle/lib/weblib.php (around line 2272 ):

$menu[] = '<li class="'.$class.'">'.
'<img class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()" src="'.$OUTPUT->pix_url('icon', $mod->modname) . '" title="haha" alt="haha" />'.
'<a href="'.$CFG->wwwroot.'/mod/'.$url.'">'.$mod->name.'</a></li>';

Despite my best efforts thus far, the Moodle activity/resource icons still don't wiggle on mouseover. Is it because the images are svg files?

"Uh, need a little help here" (Neo in The Matrix)

 
Average of ratings: -
Picture of Ray Morris
Re: Making 2D icons "shake" during MouseOver in Moodle
Group DevelopersGroup Particularly helpful Moodlers

I didn't know which file to insert the javascript code into. Is this correct?

Don't embed Javascript into themes.  See:

http://docs.moodle.org/dev/JavaScript_guidelines

 

I'm trying to make the activity icons in Moodle 2.4 to wiggle

Oh dear.  What do people think, is that worse than making the text on your geocities page blink?

 

 

 

 

 
Average of ratings: -
Picture of Joseph Rézeau
Re: Making 2D icons "shake" during MouseOver in Moodle
Group DevelopersGroup Particularly helpful MoodlersGroup TestersGroup Translators

"I'm trying to make the activity icons in Moodle 2.4 to wiggle"

Are you sure that's a good idea?

 
Average of ratings:Useful (1)
It's only an avatar...
Re: Making 2D icons "shake" during MouseOver in Moodle
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi Frankie,

This is what you need to do...

  1. CREATE a javascript directory in your theme: isometric/javascript
  2. Using Notepad copy/paste your JavaScript (less the <script></script> tags) into a new page and save it to isometric/javascript/shake.js
  3. ADD the following to isometric/config.php
    $Theme->javascripts = array('shake');
  4. ADD the CSS rule to the end of your isometric/style/isometric.css
  5. Using Notepad COPY the funcion, that you want to add that sipit of JS code to, from lib/weblib.php and PASTE into a new page and SAVE as isometric/lib.php don't forget to ADD <?php at the start of this function.
  6. Now you can add the code to your own isometric/lib.php

I think this will work...1 - 5 is how you would normaly use JS in a theme, although I'm not sure about the lib.php, but you can give it a try. If you get an Error message well you know its wrong! I think you really need a renderer but there does not look to be one. sad

Mary

 

 
Average of ratings:Useful (1)
Frankie's the name, Moodle's my game!
Re: Making 2D icons "shake" during MouseOver in Moodle
Group Particularly helpful Moodlers

Hi Mary

Thanks for the helpful tips. I followed your advice. Steps 1 to 4 were easy. I then did Step5 and created my own lib.php which I stored inside the /theme/isometric folder, however I received this error message:

Fatal error: Cannot redeclare navmenulist() in /home/frankie/public_html/m24/theme/isometric/lib.php on line 26

So it seems to me that I can't override the navmenulist() which already exists inside '/course/lib.php'.

Cheers, Frankie.

 
Average of ratings: -