Compare resources on mobile sites
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 - 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");
});
Developer | Gyula Szathmary |
Username | gyusza |
Uploaded | November 02, 2022 |
Rating | 3 |
Size | 3,226 Kb |
Views | 14,168 |
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!
Name | Size |
A Pen by Gyula Szathmary | 5,177 Kb |
Slimscroll | 4,090 Kb |
Pricing widget generator project | 4,409 Kb |
Saxo Tools Collection | 1,993 Kb |
Webinar v5 Style | 9,282 Kb |
Rotating Outrageous Predictions 2016 | 14,585 Kb |
Landing page and HTML snippet translator | 4,380 Kb |
Navigate to coordinates from link in google maps | 1,805 Kb |
Simple Tabs | 5,071 Kb |
Sitemap generator for Sharepoint | 2,518 Kb |
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!
Name | Username | Size |
Animate a paper plane along an SVG path, looking ahead | PotatoDie | 3,734 Kb |
Simple content swap | Snografx | 1,859 Kb |
Hexagons | Ashmind | 4,360 Kb |
Importable Clearfix | Corysimmons | 1,411 Kb |
Simple Responsive Text | Fbrz | 2,282 Kb |
Perspective Origin Demo | Agelber | 3,614 Kb |
Bubble animation | Ftabor | 6,565 Kb |
Border image | JohnRiordan | 2,120 Kb |
Pure CSS albums gallery | Renaudtertrais | 2,978 Kb |
Speech bubbles | Something | 1,547 Kb |
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. Hide Your IP Now!