Compare resources on mobile sites

What is a compare resources on mobile sites How do you make a compare resources on mobile sites? This script and codes were developed by Gyula Szathmary on 06 January 2022, Thursday.

How do I make an compare resources on mobile sites?
  1. Compare resources on mobile sites Previews
  2. Compare resources on mobile sites HTML Codes
  3. Compare resources on mobile sites CSS Codes
  4. Compare resources on mobile sites JS Codes
Compare resources on mobile sites Previews

Compare resources on mobile sites HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Compare resources on mobile sites</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <label>Compare it with:</label>
<select id="selector">
  <option value=0>Show only Global</option>
  <option value=1>nl.saxobank.com/m</option>
  <option value=2>fr.saxobank.com/m</option>
  <option value=3>uk.saxomarkets.com/m</option>
  <option value=4>it.saxobank.com/m</option>
  <option value=5>dk.saxobank.com/m</option>
  <option value=6>jp.saxobank.com/m</option>
  <option value=7>ae.saxobank.com/ar/m</option>
</select>

<button id="refresh-btn">Refresh all</button>
<button id="show-all-btn">Show all</button>
<button id="hide-btn">Hide all</button>

<div class="flexbox-container">

  <div class="iphone-mockup" id="gl">
    <h2>https://www.home.saxo</h2>
    <section>
      <!-- <iframe src="http://m.saxobank.com/Pages/resource-overview.aspx"></iframe> -->
      <iframe src="https://www.home.saxo"></iframe>
    </section>
  </div>

  <div class="iphone-mockup" id="id-nl">
    <h2>nl.saxobank.com/m</h2>
    <section>
      <!-- <iframe src="http://nl.saxobank.com/m/Pages/resource-overview.aspx"></iframe> -->
      <iframe data-src="http://nl.saxobank.com/m"></iframe>
    </section>
  </div>

  <div class="iphone-mockup" id="id-fr">
    <h2>fr.saxobank.com/m</h2>
    <section>
      <!--  <iframe src="http://fr.saxobank.com/m/Pages/resource-overview.aspx"></iframe> -->
      <iframe data-src="http://fr.saxobank.com/m"></iframe>
    </section>
  </div>

  <div class="iphone-mockup" id="id-uk">
    <h2>uk.saxomarkets.com/m</h2>
    <section>
      <!-- <iframe src="http://uk.saxomarkets.com/m/Pages/resource-overview.aspx"></iframe> -->
      <iframe data-src="http://uk.saxomarkets.com/m"></iframe>
    </section>
  </div>

  <div class="iphone-mockup" id="id-it">
    <h2>it.saxobank.com/m</h2>
    <section>
      <!-- <iframe src="http://it.saxobank.com/m/Pages/resource-overview.aspx"></iframe> -->
      <iframe data-src="http://it.saxobank.com/m"></iframe>
    </section>
  </div>


  <div class="iphone-mockup" id="id-dk">
    <h2>dk.saxobank.com/m</h2>
    <section>
      <!-- <iframe src="http://it.saxobank.com/m/Pages/resource-overview.aspx"></iframe> -->
      <iframe data-src="http://dk.saxobank.com/m"></iframe>
    </section>
  </div>

  <div class="iphone-mockup" id="id-jp">
    <h2>jp.saxobank.com/m</h2>
    <section>
      <!-- <iframe src="http://it.saxobank.com/m/Pages/resource-overview.aspx"></iframe> -->
      <iframe data-src="http://jp.saxobank.com/m"></iframe>
    </section>
  </div>

  <div class="iphone-mockup" id="id-ar">
    <h2>ae.saxobank.com/ar/m</h2>
    <section>
      <!-- <iframe src="http://it.saxobank.com/m/Pages/resource-overview.aspx"></iframe> -->
      <iframe data-src="http://ae.saxobank.com/ar/m"></iframe>
    </section>
  </div>

</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

Compare resources on mobile sites CSS Codes

body {
  background: #474747;
  color: white;
  text-align: center;
  padding-top: 30px;
  font-family: helvetica, arial, sans-serif;
}

.flexbox-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
          justify-content: center;
  /* IE 9 */
  -webkit-transform: scale(0.5, 0.5);
  /* Safari */
  transform: scale(0.8, 0.8);
  margin-top: -70px;
}

.iphone-mockup {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/223496/iphone-mockup.png) no-repeat;
  height: 937px;
  width: 479px;
}

div[id^='id-'],
button#hide-btn {
  display: none;
}

.show {
  display: block!important
}

section {
  width: 375px;
  height: 667px;
  overflow: auto;
  position: relative;
  top: 60px;
  left: 54px;
}

section iframe {
  height: 8100px;
  width: 375px;
  margin: 0;
  padding: 0;
  border: none;
}

section::-webkit-scrollbar {
  display: none;
}

h2 {
  margin-top: 45px;
  margin-bottom: 0;
}

Compare resources on mobile sites JS Codes

// Sections for scrolling
var a = ["#gl section", "#id-fr section", "#id-nl section", "#id-uk section", "#id-it section", "#id-dk section", "#id-jp section", "#id-ar section"].join(", ");

// All the languages
var b = ["#id-fr", "#id-nl", "#id-uk", "#id-it", "#id-dk", "#id-jp", "#id-ar"];

// Without the specific one
var d = _.without(b, "#id-fr").join(", ");
var e = _.without(b, "#id-nl").join(", ");
var f = _.without(b, "#id-uk").join(", ");
var g = _.without(b, "#id-it").join(", ");
var h = _.without(b, "#id-dk").join(", ");
var i = _.without(b, "#id-jp").join(", ");
var j = _.without(b, "#id-ar").join(", ");

// Synced scrolling function
$(a).on("scroll", function() {
  $(a).scrollTop($(this).scrollTop());
});

// Asynchronous loading of iframes
function addSource(x, y) {
  // Find the iframes within our newly-visible element
  $(x + " section").find("iframe").prop("src", function() {
    // Set their src attribute to the value of data-src
    return $(this).data("src");
  });

  $(y).find("iframe").removeAttr("src")

  $(x).addClass("show")

  $(y).removeClass("show")
}

// Show or hide based on selection
$("#selector").change(function() {

  var selection = $("#selector").val();

  if (selection == 0) {
    $(b.join(", ")).removeClass("show")

  } else if (selection == 1) {
    addSource("#id-nl", e)

  } else if (selection == 2) {
    addSource("#id-fr", d)

  } else if (selection == 3) {
    addSource("#id-uk", f)

  } else if (selection == 4) {
    addSource("#id-it", g)

  } else if (selection == 5) {
    addSource("#id-dk", h)

  } else if (selection == 6) {
    addSource("#id-jp", i)

  } else if (selection == 7) {
    addSource("#id-ar", j)

  }
});

// Reload all iFrames
$('button#refresh-btn').on("click", function() {
  $("iframe").each(function() {
    var src = $(this).attr('src');
    $(this).attr('src', src);
  });
});

// Show all iframes
$('#show-all-btn').on("click", function() {
  $("div[id^='id-'] section").find("iframe").prop("src", function() {
    return $(this).data("src");
  });
  $("div[id^='id-']").addClass("show");
  $('#show-all-btn').css("display", "none");
  $('#hide-btn').css("display", "inline-block");
});

// Hide all iframes
$('#hide-btn').on("click", function() {
  $("div[id^='id-']").find("iframe").removeAttr("src")
  $("div[id^='id-']").removeClass("show");
  $('#show-all-btn').css("display", "inline-block");
  $('#hide-btn').css("display", "none");
});
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.