Compare resources on mobile sites

3,226 Kb

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

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">
<body> <label>Compare it with:</label>
<select id="selector"> <option value=0>Show only Global</option> <option value=1></option> <option value=2></option> <option value=3></option> <option value=4></option> <option value=5></option> <option value=6></option> <option value=7></option>
<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></h2> <section> <!-- <iframe src=""></iframe> --> <iframe src=""></iframe> </section> </div> <div class="iphone-mockup" id="id-nl"> <h2></h2> <section> <!-- <iframe src=""></iframe> --> <iframe data-src=""></iframe> </section> </div> <div class="iphone-mockup" id="id-fr"> <h2></h2> <section> <!-- <iframe src=""></iframe> --> <iframe data-src=""></iframe> </section> </div> <div class="iphone-mockup" id="id-uk"> <h2></h2> <section> <!-- <iframe src=""></iframe> --> <iframe data-src=""></iframe> </section> </div> <div class="iphone-mockup" id="id-it"> <h2></h2> <section> <!-- <iframe src=""></iframe> --> <iframe data-src=""></iframe> </section> </div> <div class="iphone-mockup" id="id-dk"> <h2></h2> <section> <!-- <iframe src=""></iframe> --> <iframe data-src=""></iframe> </section> </div> <div class="iphone-mockup" id="id-jp"> <h2></h2> <section> <!-- <iframe src=""></iframe> --> <iframe data-src=""></iframe> </section> </div> <div class="iphone-mockup" id="id-ar"> <h2></h2> <section> <!-- <iframe src=""></iframe> --> <iframe data-src=""></iframe> </section> </div>
</div> <script src=''></script>
<script src=''></script> <script src="js/index.js"></script>

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( no-repeat; height: 937px; width: 479px;
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
Create amazing SEO content 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!