Pricing widget generator project

Developer
Gyula Szathmary
Size
4,409 Kb
Views
18,216
  1. Pricing widget generator project Previews
  2. Pricing widget generator project HTML Codes
  3. Pricing widget generator project CSS Codes
  4. Pricing widget generator project JS Codes

How do I make an pricing widget generator project?

What is a pricing widget generator project? How do you make a pricing widget generator project? This script and codes were developed by Gyula Szathmary on 02 November 2022, Wednesday.

Pricing widget generator project Previews
IQ Test

Pricing widget generator project - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pricing widget generator project</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<header> <div class="header-container"> <a href="http://www.saxobank.com" target="_self"> <img src="http://www.saxobank.com/Style%20Library/saxoTraderGO-2-24092015/logo.jpg" alt="Saxo Bank logo" class="logo left-margin"> </a> <h2>Price widget generator tool</h2> </div>
</header>
<div class="list-container"> <ol> <li>Select instruments to be shown (green = selected)</li> <li>Drag and drop them to fit the order you need</li> <li>The topofthebook7.html widget supports max 40 intruments</li> <li>The marketdepth.html widget supports max 15 intruments</li> </ol>
</div>
<section id="instruments"> <input type="button" class="button" align="middle" onclick="select_all()" value="SELECT ALL" style="margin-left:14px;"> <br> <br> <div id="sortable"> <label> <input type="checkbox" name="AUDCHF" value="AUDCHF:AUD%20CHF:fx" checked><span><i class="icon-move"></i> AUDCHF</span></label> <label> <input type="checkbox" name="AUDJPY" value="AUDJPY:AUD%20JPY:fx"><span><i class="icon-move"></i> AUDJPY</span></label> <label> <input type="checkbox" name="AUDNZD" value="AUDNZD:AUD%20NZD:fx"><span><i class="icon-move"></i> AUDNZD</span></label> <label> <input type="checkbox" name="AUDUSD" value="AUDUSD:AUD%20USD:fx"><span><i class="icon-move"></i> AUDUSD</span></label> <label> <input type="checkbox" name="CADCHF" value="CADCHF:CAD%20CHF:fx"><span><i class="icon-move"></i> CADCHF</span></label> <label> <input type="checkbox" name="CHFPLN" value="CHFPLN:CHF%20PLN:fx"><span><i class="icon-move"></i> CHFPLN</span></label> <label> <input type="checkbox" name="CNHJPY" value="CNHJPY:CNH%20JPY:fx"><span><i class="icon-move"></i> CNHJPY</span></label> <label> <input type="checkbox" name="EURAUD" value="EURAUD:EUR%20AUD:fx"><span><i class="icon-move"></i> EURAUD</span></label> <label> <input type="checkbox" name="EURCAD" value="EURCAD:EUR%20CAD:fx"><span><i class="icon-move"></i> EURCAD</span></label> <label> <input type="checkbox" name="EURCHF" value="EURCHF:EUR%20CHF:fx"><span><i class="icon-move"></i> EURCHF</span></label> <label> <input type="checkbox" name="EURCZK" value="EURCZK:EUR%20CZK:fx"><span><i class="icon-move"></i> EURCZK</span></label> <label> <input type="checkbox" name="EURDKK" value="EURDKK:EUR%20DKK:fx"><span><i class="icon-move"></i> EURDKK</span></label> <label> <input type="checkbox" name="EURGBP" value="EURGBP:EUR%20GBP:fx"><span><i class="icon-move"></i> EURGBP</span></label> <label> <input type="checkbox" name="EURHUF" value="EURHUF:EUR%20HUF:fx"><span><i class="icon-move"></i> EURHUF</span></label> <label> <input type="checkbox" name="EURJPY" value="EURJPY:EUR%20JPY:fx"><span><i class="icon-move"></i> EURJPY</span></label> <label> <input type="checkbox" name="EURNOK" value="EURNOK:EUR%20NOK:fx"><span><i class="icon-move"></i> EURNOK</span></label> <label> <input type="checkbox" name="EURNZD" value="EURNZD:EUR%20NZD:fx"><span><i class="icon-move"></i> EURNZD</span></label> <label> <input type="checkbox" name="EURPLN" value="EURPLN:EUR%20PLN:fx"><span><i class="icon-move"></i> EURPLN</span></label> <label> <input type="checkbox" name="EURSEK" value="EURSEK:EUR%20SEK:fx"><span><i class="icon-move"></i> EURSEK</span></label> <label> <input type="checkbox" name="EURTRY" value="EURTRY:EUR%20TRY:fx"><span><i class="icon-move"></i> EURTRY</span></label> <label> <input type="checkbox" name="EURUSD" value="EURUSD:EUR%20USD:fx"><span><i class="icon-move"></i> EURUSD</span></label> <label> <input type="checkbox" name="GBPAUD" value="GBPAUD:GBP%20AUD:fx"><span><i class="icon-move"></i> GBPAUD</span></label> <label> <input type="checkbox" name="GBPCAD" value="GBPCAD:GBP%20CAD:fx"><span><i class="icon-move"></i> GBPCAD</span></label> <label> <input type="checkbox" name="GBPCHF" value="GBPCHF:GBP%20CHF:fx"><span><i class="icon-move"></i> GBPCHF</span></label> <label> <input type="checkbox" name="GBPJPY" value="GBPJPY:GBP%20JPY:fx"><span><i class="icon-move"></i> GBPJPY</span></label> <label> <input type="checkbox" name="GBPNZD" value="GBPNZD:GBP%20NZD:fx"><span><i class="icon-move"></i> GBPNZD</span></label> <label> <input type="checkbox" name="GBPPLN" value="GBPPLN:GBP%20PLN:fx"><span><i class="icon-move"></i> GBPPLN</span></label> <label> <input type="checkbox" name="GBPUSD" value="GBPUSD:GBP%20USD:fx"><span><i class="icon-move"></i> GBPUSD</span></label> <label> <input type="checkbox" name="NZDCAD" value="NZDCAD:NZD%20CAD:fx"><span><i class="icon-move"></i> NZDCAD</span></label> <label> <input type="checkbox" name="NZDCHF" value="NZDCHF:NZD%20CHF:fx"><span><i class="icon-move"></i> NZDCHF</span></label> <label> <input type="checkbox" name="NZDUSD" value="NZDUSD:NZD%20USD:fx"><span><i class="icon-move"></i> NZDUSD</span></label> <label> <input type="checkbox" name="USDCAD" value="USDCAD:USD%20CAD:fx"><span><i class="icon-move"></i> USDCAD</span></label> <label> <input type="checkbox" name="USDCHF" value="USDCHF:USD%20CHF:fx"><span><i class="icon-move"></i> USDCHF</span></label> <label> <input type="checkbox" name="USDCNH" value="USDCNH:USD%20CNH:fx"><span><i class="icon-move"></i> USDCNH</span></label> <label> <input type="checkbox" name="USDCZK" value="USDCZK:USD%20CZK:fx"><span><i class="icon-move"></i> USDCZK</span></label> <label> <input type="checkbox" name="USDHKD" value="USDHKD:USD%20HKD:fx"><span><i class="icon-move"></i> USDHKD</span></label> <label> <input type="checkbox" name="USDHUF" value="USDHUF:USD%20HUF:fx"><span><i class="icon-move"></i> USDHUF</span></label> <label> <input type="checkbox" name="USDJPY" value="USDJPY:USD%20JPY:fx"><span><i class="icon-move"></i> USDJPY</span></label> <label> <input type="checkbox" name="USDNOK" value="USDNOK:USD%20NOK:fx"><span><i class="icon-move"></i> USDNOK</span></label> <label> <input type="checkbox" name="USDPLN" value="USDPLN:USD%20PLN:fx"><span><i class="icon-move"></i> USDPLN</span></label> <label> <input type="checkbox" name="USDRUB" value="USDRUB:USD%20RUB:fx"><span><i class="icon-move"></i> USDRUB</span></label> <label> <input type="checkbox" name="USDTRY" value="USDTRY:USD%20TRY:fx"><span><i class="icon-move"></i> USDTRY</span></label> <label> <input type="checkbox" name="USDZAR" value="USDZAR:USD%20ZAR:fx"><span><i class="icon-move"></i> USDZAR</span></label> <label> <input type="checkbox" name="XAGUSD" value="XAGUSD:XAG%20USD:fx"><span><i class="icon-move"></i> XAGUSD</span></label> <label> <input type="checkbox" name="XAUEUR" value="XAUEUR:XAU%20EUR:fx"><span><i class="icon-move"></i> XAUEUR</span></label> <label> <input type="checkbox" name="XAUUSD" value="XAUUSD:XAU%20USD:fx"><span><i class="icon-move"></i> XAUUSD</span></label> <label> <input type="checkbox" name="SWISS20.I" value="SWISS20.I:SWISS20.I:cfd"><span><i class="icon-move"></i> SWISS20.I</span></label> <label> <input type="checkbox" name="GER30.I" value="GER30.I:GER30.I:cfd"><span><i class="icon-move"></i> GER30.I</span></label> <label> <input type="checkbox" name="EU50.I" value="EU50.I:EU50.I:cfd"><span><i class="icon-move"></i> EU50.I</span></label>
</div>
</section>
<section id="dropdowns"> <select id="pricing"> <option value="">Select pricing structure</option> <option value="Saxo" selected>Saxo</option> <option value="Saxo2">Saxo2</option> <option value="SaxoActive">SaxoActive</option> <option value="SaxoFeeBased">SaxoFeeBased</option> <option value="SaxoJPClassic">SaxoJPClassic</option> <option value="SaxoNY4">SaxoNY4</option> <option value="SaxoRetail">SaxoTY3</option> <option value="SaxoUK">SaxoUK</option> </select> <select id="widget"> <option value="">Select widget type</option> <option value="topofbook7.html" selected>topofbook7.html</option> <option value="marketdepth.html">marketdepth.html</option> </select>
</section>
<section id="buttons"> <input type="button" class="button" align="middle" onclick="get_iframe_code()" value="Get widget"> <input type="button" class="button" align="middle" onclick="resetAll()" value="Reset">
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pricing widget generator project - Script Codes CSS Codes

body { padding: 0px; margin: 0px auto; height: 100%; color: #002956; font-family: FrutigerLTW02-45Light, Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 15px; width: 100vw; overflow-x: hidden; line-height: 1.4; -webkit-text-size-adjust: 100%; -webkit-overflow-scrolling: touch;
}
header { height: 100px; background-color: #001225; top: 0px; width: 100%;
}
header .logo { padding-top: 16px; height: 68px; width: 91px; margin-left: 30px;
}
.list-container,
.header-container { max-width: 1150px; min-height: 100px; margin: 0 auto;
}
header h2 { display: inline; color: white; font-weight: normal; line-height: 100px; vertical-align: top; margin-left: 30px;
}
section { width: 90%; max-width: 1150px; margin: 0 auto 25px auto; text-align: left;
}
section#instruments { margin-top: 30px; -webkit-column-count: 6; -moz-column-count: 6; column-count: 6;
}
.list-container {}
@media screen and (max-width: 903px) { section#instruments { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; }
}
@media screen and (max-width: 852px) { section#instruments { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; }
}
@media screen and (max-width: 702px) { section#instruments { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; }
}
@media screen and (max-width: 563px) { section#instruments { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
}
section#buttons,
section#dropdowns,
section#preview { text-align: center;
}
label { display: block; padding-left: 15px; cursor: pointer; margin-bottom: 10px; border: 0px; background-color: white;
}
input[type='checkbox'] { display: none;
}
input[type='checkbox']:checked+span { font-weight: bold; color: white; border: 5px solid green; background-color: green;
}
.xmpContainer { padding: 10px; color: #ddca7e; background-color: #343436; text-align: center; border-right: 5px solid #fff;
}
xmp { white-space: pre-wrap; /* CSS 3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; padding: 10px;
}
#code,
#preview { display: inline-block; vertical-align: top; width: 435px;
}
.results { display: block; text-align: center; border-bottom: 2px solid #001225;
}
.ui-state-highlight { height: 1.5em; line-height: 1.2em;
}

Pricing widget generator project - Script Codes JS Codes

function get_iframe_code() { var x = $('input[type=checkbox]:checked').length; var height = (x + 1) * 30 + 16; var codeheight = height - 29; var widget = $('#widget option:selected').val(); var pricing = $("#pricing option:selected").val(); event.preventDefault(); var instrumentList = $("#instruments input:checkbox:checked").map(function() { return $(this).val(); }).get().join(','); var iframeCode = '<iframe frameborder="0" height="' + height + '" src="http://prices-saxo.fxbluelabs.com/dom/saxo/' + widget + '?id=' + pricing + '&amp;syms=' + instrumentList + '" width="435"></iframe>' $('body').append('<section class="results"><section id="code" class="xmpContainer" style="min-height:' + codeheight +'px"><xmp contenteditable="true">' + iframeCode + '</xmp></section><section id="preview" class="preview">' + iframeCode + '</section></section>');
}
function resetAll() { location.reload();
}
function select_all() { $("input[type='checkbox']").attr('checked', 'checked');
};
$(function() { $( "#sortable" ).sortable({ placeholder: "ui-state-highlight" }); $( "#sortable" ).disableSelection(); });
Pricing widget generator project - Script Codes
Pricing widget generator project - Script Codes
Home Page Home
Developer Gyula Szathmary
Username gyusza
Uploaded November 02, 2022
Rating 3
Size 4,409 Kb
Views 18,216
Do you need developer help for Pricing widget generator project?

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
Monthly Product Update v2
Webinar v2
Navigate to coordinates from link in google maps
Get 23 thumbnail
Rotating Outrageous Predictions 2016
Saxo Tools Collection
Replace text string jQuery
Landing page and HTML snippet translator
Simple Tabs
Comparison table SC
Create amazing blog posts 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!