2

I have an HTML Area component on the homepage that contains an iFrame that is toggled either visible or hidden on button click. I'm using the JQuery toggle function to do this. Currently the div for the area is hidden by default through CSS: style="display:none"

A new requirement has come in asking that the user's most recent show or hide (the selected toggle-state) be saved for the next page load, so if they chose to show the iFrame last time they were at the home page, the next time they visited it would be visible by default. Any recommended approaches for tackling this requirement? My code is below:

<meta charset="utf-8">
<title>drop demo</title>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
  #toggle {
    width: 100px;
    height: 100px;
    background: #ccc;
  }
  .button {
    padding-top: 10px;
    padding-right: 20px;
  }
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<button type="button" id="button"
title="Your personalized Sales Dashboard.">Show/Hide</button>
<div id="toggle" style="display:none" frameborder="2">
  <iframe src="https://example.com)" id="myfr" scrolling="no" frameborder="0" height="800px" width="100%">Your Browser Do not Support Iframe</iframe>
</div>
<script>
  $("#button").click(function () {
    $("#toggle").toggle("blind");
  });
</script>
<script>
  $(function () {
    $("#button").tooltip();
    var isVisible = $( "#toggle" ).is( ":visible" );
  alert(isVisible);
  });
</script>
  • JS Remoting method that saves some "state" variable to the user object. – greenstork Mar 31 '14 at 18:43
  • Thanks @greenstork. Can you provide a little more detail? – Matt Santy Mar 31 '14 at 18:51
  • Do you have a requirement to store the state of the toggle as data in salesforce or would a cookie with the toggle state suffice? – Mark Pond Mar 31 '14 at 19:15
  • If a cookie would suffice, then there is no requirement to store the state to the database. – Matt Santy Mar 31 '14 at 19:28
  • 1
    Cookie is totally viable too, hence my comment and not an answer. – greenstork Mar 31 '14 at 19:33
1

Cookie seems to be right approach, here is what I could quickly draft and test in a HTML component.

<a onclick="setColor('red')" style="color:red;"> Give me Red ! </a>
<br/>
<a onclick="setColor('pink')" style="color:pink;"> Give me Pink ! </a>


<script>

var cookieName = 'colorSelection';
var cookieVal ;
var allCookies = document.cookie.split(';');

for ( var idx = 0; idx < allCookies.length; idx++ ) {
    if (allCookies[idx].trim().indexOf(cookieName) == 0) {
        cookieVal = allCookies[idx].trim().split('=')[1];
        break;
    }
}

if (cookieVal) {

    alert('Your last selected color was : ' + cookieVal);

}


function setColor(valColor) {   
    document.cookie=cookieName + "=" + valColor;
    alert('color is ' + valColor + ' now');
}

</script>

Above code sets a cookie via home page component, and reads it back on reload. One can change cookie value from red to pink or vice versa, via hyperlinks.

You don't need jquery as such for manipulating cookies via Javascript. You might want to add "expiries" attribute to cookie, in case your values are time bound.

0

You can use HTML5 sessionStorage see https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

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.