Compare resources on mobile sites

Developer
Gyula Szathmary
Size
3,226 Kb
Views
14,161

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,161
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
Saxo Tools Collection
Sitemap generator for Sharepoint
Monthly Product Update v2
Simple Tabs
Get 23 thumbnail
Financial Glossary Converter
Navigate to coordinates from link in google maps
Replace text string jQuery
Slimscroll
Pricing widget generator project
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!