Compare resources on mobile sites

Developer
Gyula Szathmary
Size
3,226 Kb
Views
14,168
  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

How do I make an 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 02 November 2022, Wednesday.

Compare resources on mobile sites Previews
IQ Test

Compare resources on mobile sites - Script Codes 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 - Script Codes 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 - Script Codes 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");
});
Compare resources on mobile sites - Script Codes
Compare resources on mobile sites - Script Codes
Home Page Home
Developer Gyula Szathmary
Username gyusza
Uploaded November 02, 2022
Rating 3
Size 3,226 Kb
Views 14,168
Do you need developer help for Compare resources on mobile sites?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gyula Szathmary (gyusza) Script Codes
Name
Modular LP Test
Landing page and HTML snippet translator
Webinar v2
A Pen by Gyula Szathmary
Navigate to coordinates from link in google maps
Rotating Outrageous Predictions 2016
Financial Glossary Converter
Monthly Product Update v2
Saxo Tools Collection
Simple Tabs
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!