0

I got this damn good thing from internet and need to implement exact thing in my development. Can someone please let me know how to do that? I am extremely new to javascript part and I will implement the whole thing in salesforce org.

Apex page

    <apex:page showheader="false">
<!--  -->
<html>
<head>
 <title>Bootstrap Example</title>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="src/css/lv-ripple.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="js/jquery.ripples.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="{!URLFOR($Resource.jQueryFiles, 'js/jquery-1.4.4.min.js')}"/>
   <script src="{!URLFOR($Resource.jQueryFiles, 'js/jquery-ui-1.8.7.custom.min.js')}"/>
   <apex:stylesheet value="{!URLFOR($Resource.jQueryFiles, 'css/ui-lightness/jquery-ui-1.8.7.custom.css')}"/>
<script src="h//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="src/js/lv-ripple.jquery.js"></script>

<style>
.button {
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


.ripple {
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  position: absolute;
  opacity: 1;
}
.rippleEffect {
    animation: rippleDrop .6s linear;
}

@keyframes rippleDrop {
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
</style>
<script>
div {
  width: 220px;
  height: 120px;
  background: #222;
  color: #fff;
  text-align: center;
  line-height: 120px;
  font-size: 40px;
}
</script>
<script>
(function($) {
    $(document).ready(function() {
        $('body').ripples({
            resolution: 512,
            dropRadius: 20,
            perturbance: 0.04
        });
    });
})(jQuery.noConflict());
</script>

<script type="text/javascript">

$(document).ready(function(){

    $("button").click(function(){

     if($("div").position().left > 700){
        $("div").animate({left: 0});
        }else{

            $("div").animate({left: $("div").position().left + 350 });
        }
    });   
});
</script>

</head>
<body background="{!$Resource.desert}">

<button class="button">Start Animation</button>
<ripple class="r-raised">
You are one move away to Complete!
</ripple>


<div style="position:absolute;border:solid" >
<img src="{!$Resource.Run}"/>
</div>
<!--  $(".target").effect( "shake", {times:4}, 1000 ); -->
<div style="position:right;border:thin" id="info">
<img style="float: right;background-color:black" alt="" src="{!$Resource.success}"/>
</div>

</body>
</html>
</apex:page>

Please help.

http://sirxemic.github.io/jquery.ripples/

3
  • 3
    A place to start: Adding jQuery To Your Force.com Application.
    – Keith C
    Oct 19 '16 at 8:33
  • It is not working I tried to implement as suggested there. It simply doing nothing Oct 19 '16 at 12:00
  • The code posted in the answer should work for you if you cut and paste it exactly. But the only place the ripples appear is in the page header area when you move the cursor over that area; the plugin documentation says it adds ripples to background images and few parts of the screen in Salesforce have background images by default.
    – Keith C
    Oct 19 '16 at 12:27
3

This page produces the ripples when you move the cursor over the page header or footer:

<apex:page>

<apex:sectionHeader title="Test Page"/>
<p>Test Page Body</p>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js"></script>
<script>
(function($) {
    $(document).ready(function() {
        $('body').ripples({
            resolution: 512,
            dropRadius: 20,
            perturbance: 0.04
        });
    });
})(jQuery.noConflict());
</script>

</apex:page>

(Arguably better practice to add copies of the JavaScript as static resources but using CDN locations is the quick way to get going.)

But whether this can be got to work in the main page content area with Classic or Lightning CSS is an open question.

5
  • Keith, thanks it's working there but not in my page. I pasted my page in the question. Can you please help me here? Oct 20 '16 at 8:47
  • 1
    @SFDC_Learner This is a Q and A forum not a place to get ongoing help on your development; most of us have paying jobs that we need to give most of our attention to.
    – Keith C
    Oct 20 '16 at 9:47
  • Thanks for your help! I am trying hard to get it done myself. thats for help u gave to my roadblock. :D Oct 20 '16 at 11:00
  • 1
    @SFDC_Learner No problem - good luck getting it figured out.
    – Keith C
    Oct 20 '16 at 13:06
  • Not yet will let you know. :) Oct 20 '16 at 14:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.