I am looking at this "Sortable example" and I can see that the user is able to re-arrange numbers, the source for the above example :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Display as grid</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ul>
</body>
</html>
is it possible to sort this example so it sorts the numbers from smallest to largest and does not allow the user to re-arrange the numbers? for example if I try to drag 12 and place it before 1, it automatically goes back to its original place.
Thank you
Don't call sortable, just sort the list in reverse order. The sortable function allows the user to drag an item. If you didn't call disableSelection then them items in the list would be selectable.
$(function() {
try {
var html = $('#sortable').html();
var arr = html.split('</li>');
html = '';
for (var i = arr.length - 1; i >= 0; --i) {
html += arr[i] + "</li>";
}
$('#sortable').html(html);
} catch (e) {
alert(e);
}
});
Related
When I make request I get this.
I want the html to load and the run the scripts to create the full body before I parse it.
I working with flutter(dart).
I tried using the webview but I'm not getting the html from after the page is loaded.
When I make the request to the site, this is what the response looks like.
I need some help guys.
How should I go about it?
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Just a moment...</title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #ffffff;
color: #000000;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.7em;
-webkit-font-smoothing: antialiased;
}
h1 {
text-align: center;
font-weight: 700;
margin: 16px 0;
font-size: 32px;
color: #000000;
line-height: 1.25;
}
p {
font-size: 20px;
font-weight: 400;
margin: 8px 0;
}
p,
.attribution,
{
text-align: center;
}
#spinner {
margin: 0 auto 30px auto;
display: block;
}
.attribution {
margin-top: 32px;
}
#keyframes fader {
0% {
opacity: 0.2;
}
50% {
opacity: 1.0;
}
100% {
opacity: 0.2;
}
}
#-webkit-keyframes fader {
0% {
opacity: 0.2;
}
50% {
opacity: 1.0;
}
100% {
opacity: 0.2;
}
}
#cf-bubbles>.bubbles {
animation: fader 1.6s infinite;
}
#cf-bubbles>.bubbles:nth-child(2) {
animation-delay: .2s;
}
#cf-bubbles>.bubbles:nth-child(3) {
animation-delay: .4s;
}
.bubbles {
background-color: #f58220;
width: 20px;
height: 20px;
margin: 2px;
border-radius: 100%;
display: inline-block;
}
a {
color: #2c7cb0;
text-decoration: none;
-moz-transition: color 0.15s ease;
-o-transition: color 0.15s ease;
-webkit-transition: color 0.15s ease;
transition: color 0.15s ease;
}
a:hover {
color: #f4a15d
}
.attribution {
font-size: 16px;
line-height: 1.5;
}
.ray_id {
display: block;
margin-top: 8px;
}
#cf-wrapper #challenge-form {
padding-top: 25px;
padding-bottom: 25px;
}
#cf-hcaptcha-container {
text-align: center;
}
#cf-hcaptcha-container iframe {
display: inline-block;
}
</style>
<meta http-equiv="refresh" content="35">
<script type="text/javascript">
//<![CDATA[
(function(){
window._cf_chl_opt={
cvId: "2",
cType: "non-interactive",
cNounce: "86849",
cRay: "6a97b753b854da86",
cHash: "31c7b92e6efc7fe",
cPMDTk: "",
cFPWv: "b",
cTTimeMs: "1000",
cRq: {
ru: "aHR0cHM6Ly9nZy5jby51ay9yYWNpbmcvMjctb2N0LTIwMjEvZmFrZW5oYW0tMTI1NQ==",
ra: "UG9zdG1hblJ1bnRpbWUvNy4yOC40",
rm: "R0VU",
d: "kPxE7HAIMaSY0+Q26IXxpuTBsg9MYQ7J/ICHGaynkKTojWIXlwrmVPwT+F9kXDNE8Jc60RxAMi3ET5lG3UfaNS8h7kz8aJbykZ4EwheY/kJcnVBvvndt9WGhXuDvU0FOh9cZ9SAgRuYgtmkn+hRxxi5owt/uhRmgg5MfZWETvbbMY/jCMrFpPhenjJFusWE1eM0Uz1E7p5hOK/W9P9wDRmC4A8f4z9PTWHMJY6EjsHR5GNEOZzHvWUd5uKRmIbQxylvGKD8smzOR1mUYrI+hlAUB8U6wptxbbpDZDcxkEYk7M/bp4oIkQrJNBkPvVGmnVcBvZN2QrSJdUIVFNA9kjKh4AfzpxPMkfqhoJIXOhMQK+lr1R7T3wHf/qRMpzvgN5HD8wSySaGq+ZMUraHmms1bvI3p25Ril83l3CvfGA573nzB0Pl9wBt1Ilj+et9TonO/yCPUT9ncqu/HsuK6zoTsYs1XO9emsj8iGHyH20tEDL/QIQu0Xm+Na2nREmz4LLYNg/y/S/IlGc8LjDv548dVWGJxGuPSzeDWod49nzqXZR6u4otbfcHIIMdEgPjTa",
t: "MTYzNjEzMjQ0Mi4yMDcwMDA=",
m: "UHh8TWbrY8rIVckQYr2DEHf3xtqOy3IWbHpurhKo0Dg=",
i1: "bPb8laPvucq92fuTb8UHJQ==",
i2: "uyNfsEipqDYhS6+qFdYUkA==",
zh: "C039uzYEN6IwJDV7FwZVYsBSveHeK850qjEkkfVJ6vw=",
uh: "q2fUGDQwB25BKEmSOHJOj1NUZxjS6q3TVwtPqObOVZM=",
hh: "nfF1CEMggKTkMnWiuwyIjIi54NW2HaYcu4gV2CdK4ks=",
}
}
window._cf_chl_enter = function(){window._cf_chl_opt.p=1};
})();
//]]>
</script>
</head>
<body>
<table width="100%" height="100%" cellpadding="20">
<tr>
<td align="center" valign="middle">
<div class="cf-browser-verification cf-im-under-attack">
<noscript>
<h1 data-translate="turn_on_js" style="color:#bd2426;">Please turn JavaScript on and reload the
page.</h1>
</noscript>
<div id="cf-content" style="display:none">
<div id="cf-bubbles">
<div class="bubbles"></div>
<div class="bubbles"></div>
<div class="bubbles"></div>
</div>
<h1><span data-translate="checking_browser">Checking your browser before accessing</span>
gg.co.uk.</h1>
<div id="no-cookie-warning" class="cookie-warning" data-translate="turn_on_cookies"
style="display:none">
<p data-translate="turn_on_cookies" style="color:#bd2426;">Please enable Cookies and reload
the page.</p>
</div>
<p data-translate="process_is_automatic">This process is automatic. Your browser will redirect
to your requested content shortly.</p>
<p data-translate="allow_5_secs" id="cf-spinner-allow-5-secs">Please allow up to 5
seconds…</p>
<p data-translate="redirecting" id="cf-spinner-redirecting" style="display:none">
Redirecting…</p>
</div>
<form class="challenge-form" id="challenge-form"
action="/racing/27-oct-2021/fakenham-1255?__cf_chl_jschl_tk__=I4acmyvWUrWbLXAGjYC5HXUh31EzMntIEES9DIs8Yg8-1636132442-0-gaNycGzNBmU"
method="POST" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="md" value="WYgGQTwD0.PlAYN7zN9M7XpYgnUJxpt6W_rYCboneoQ-1636132442-0-AfDISHvT2GBIpWp1EPYu9cdxCuFQpLT_u7UKTH9TL-mj0X8Xxw9raGV2KUlDtB4DX7Z3h-LYRsfmLlNmrV-WstInbyHg2H3gWXOuMU2mnguq0TdSnDmB0MWffohG7RydsDYePGxxBYBAXhJMAYyRLWlbcprMPKCaHVm9zAxWf5tZFgYfCLP-CLdoXXS_HuKNhA0iXqanK-LYFcSJXKuvTr0M7oAx-vhljyX8JW3sJ2sgJlV7vLLB9MPl3l7WgWBZ4q0bW8KKVhNi3WXReGdIZUpIirNA6D2xHAe5oyfDMqUfEyopDE2EFGeNxKb2yI0qPvmmaup4WjHIG0DangljT0VcnK8oR2-lz7tVreiQQS50DcnX_EiDswWlbfXDvz83RI3IDOmSjBJXQZBSClMjhkCPs9yf5wOGXtq2jjd2sIFFWgw3zS5Q0n9dsTfFCNSFRGtOtHmCM2ztI8ivbpfvf27CNK55Xb7b2BPCOICarJUqM16ELz7AAQ6lS0OJymzCU0G1eC58DDvCiMCx6AC7nAI2ce38OjfjYHO5Wq_lI8u8VFrGaS4nZyySvn6-0gGqRA" />
<input type="hidden" name="r" value="i7Mahy4asxjhgyvRAVdQk8RCAO5shxagJMSNb2vkdXM-1636132442-0-Acl9elCj95M0xGc183cGdekXyIhJ+RXABhl9YAfeIxJZd5a0u4EX8e1wb7wJdeYsBwO/e42SiuMP3O5t3PoeEibaVnEIPnLgipqmvVXoSiOuK302AlzY5JmI0Xy80sRBsoyWLglYAEPZft7cFoS+XK3ayn3GMqgoQpnf8nhjeVmOx6g1v25gqwGYoz6MdvE/7Z2GAwvCnqP2Bk7fjp7gBBQ1pWSgzCEP2jXsbYuqcBE7HHlNbMyJF1tqOIAd1Hm7S8KtAQUllGHNfJy7s/L6Ibvg55SCP8XHUlAqASeMvqbJors5HimAx+iZgpjfYhetytGpQTqh8m7BlVyZBUkvVl6HA3r0eR0OSVOOUf/8BmuYTMrZKqkElg+BY4sNTy0UqLeuyLH5RS3zMLdNDx75IkGexDVPx2KXBxPwdmPhVO2jmoJdSl+ocBTzfPqjsXw+XAyo9Sm5id7TZ/Z+xxXYA2RMCpBiGBXPdfu2U+CJI4/S/6TWfmunwpMwRIfEby1fQNmvNCJWJPIybXpZR0tOH/eln7CoeR8qaSrCUjP7H5fNSgiIi/gtH2oxm3D20y5T4Hd1EGEtKf0E1pLUGSeZY8LBsIMtvPlnXr5srsz4965+WZu87RK9w8filse+9rtIT6KM55QcgIE7Cvb4yfI74x7y+uJ0bjUoc8D3ke5GjK4isNsMlh0kxgY9gVJmzxReZ9n9ahT77FOcOJh8eQEQOCPZQ8J9DqUduOkH7775AvPseKj1CPb3+++EJvoaZGdNIfYvUV6PjMAsnthNOaCKDQ8oHiYZLW8A8YxF2AUrQxMBGjeIjvv8OCAkFwk4RhX/JSqNXgWE+mj6x+ySSNFtBJp7cOEdB27Teyx11ImRvTXBZdv09XFIgYRO7WYmI/1sB/qfn65uL1Pr0chh5mCX8FgX1r/CRw/IkvJhLpDPNxq0MiXJK/gUuZK7URNCQI3ep+Dv+7lyuvi9sQgkXl2ne8fSp8Nbh3MogLWFAYx0o7Jz1iZY4Vtryw87I+e6Ditw9eklqURwEiSE7yIJ5foZGLZwClJs9W1pfpZ2G2OIU8HBvN/O4ERCqT2nLRVJH513AUzPv9DpowCMUxANLCAIvJL9XmSbVeUBvUQmdpOK+grZlgFRx6d8/kKepJStd8iuN/P9SGFPmOGKQHmECFiu70JPk4QCS3J08BjhuIpC4uvfLNmAzQi1yYEOpwSfv1XPf4DLS/GO59qg/jbgu0UZyRBQDL/KE4wOiE8Dtw7ACjkUtaON1NDgOS5nKkUu0diqIIRvreQdLCy4ehjuvG7LuWPPdrEmU4ZYS3R+IPHNBEBbak2pszPGm8Xc0GtVWldmtAeRr+sN0K8JeRPIbORtPuhwMPpGGosCiPmqxHshlyS0qPB0kYsykHvjDXzI63E3EccRyo353ByRSLe0wcz0k32Ku4I7uDGN/YmQEcggLEVsShXXUFA+FOgQzuM6PE9o+NPgke/M1mJBIuyyOrBtQFNskIgXQA0jPVVpJz84OeR3ylkTsVDGOvnhj5nYPEk27gDxHVoYc2C6Omi/FwRaZcGQrBrTxCTejlnmEnGTUd+M"/>
<input type="hidden" value="3734809bfba8e7119ff4a9e747f0a631" id="jschl-vc" name="jschl_vc"/>
<!-- <input type="hidden" value="" id="jschl-vc" name="jschl_vc"/> -->
<input type="hidden" name="pass" value="1636132443.207-qh8v/uVVqU"/>
<input type="hidden" id="jschl-answer" name="jschl_answer"/>
</form>
<script type="text/javascript">
//<![CDATA[
(function(){
var a = document.getElementById('cf-content');
a.style.display = 'block';
var isIE = /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent);
var trkjs = isIE ? new Image() : document.createElement('img');
trkjs.setAttribute("src", "/cdn-cgi/images/trace/jschal/js/transparent.gif?ray=6a97b753b854da86");
trkjs.id = "trk_jschal_js";
trkjs.setAttribute("alt", "");
document.body.appendChild(trkjs);
var cpo=document.createElement('script');
cpo.type='text/javascript';
cpo.src="/cdn-cgi/challenge-platform/h/b/orchestrate/jsch/v1?ray=6a97b753b854da86";
document.getElementsByTagName('head')[0].appendChild(cpo);
}());
//]]>
</script>
<div id="trk_jschal_nojs"
style="background-image:url('/cdn-cgi/images/trace/jschal/nojs/transparent.gif?ray=6a97b753b854da86')">
</div>
</div>
<div class="attribution">
DDoS protection by <a rel="noopener noreferrer" href="https://www.cloudflare.com/5xx-error-landing/"
target="_blank">Cloudflare</a>
<br />
<span class="ray_id">Ray ID: <code>6a97b753b854da86</code></span>
</div>
</td>
</tr>
</table>
</body>
</html>
try to move <script> at the top of your app
I used the flutter WebView and it worked.
I wrote the full js script in a file.
The script does the parsing and returns the required data as json.
So I pass the script file content to my WebView controller's evaluateJavaScript and the result will be json. So I can just take that data and work with it.
// webview's controller
WebViewController? _controller;
// setup your webview and get the controller
WebView(
initialUrl: widget.url ?? 'https://www.google.com.tr',
onWebViewCreated: (controller) => _controller = controller,
javascriptMode: JavascriptMode.unrestricted,
gestureNavigationEnabled: true,
onPageFinished: (_) => readJS(),
);
//
void readJS() async {
String js = await fileReader.readFile("lib/js/main.js"); // read script file
String data = await _controller!.evaluateJavascript(js);
print("data\n$data");
}
check out the full code here
I can't find a solution to a problem. I have a page with more swiper.js sliders.
I try to reach the data attributes of the just changed slide, but I get undefended.
<h1>Slider 1</h1>
<div class="mySwiper swiper-h" id="id1">
<div class="swiper-wrapper">
<div class="swiper-slide" data-contetntdata1="contentdata1" data-contetntdata2="contentdata2">Content</div>
<div class="swiper-slide" data-contetntdata1="contentdata1" data-contetntdata2="contentdata2">Content</div>
<div class="swiper-slide" data-contetntdata1="contentdata1" data-contetntdata2="contentdata2">Content</div>
</div>
</div>
<h1>Slider 2</h1>
<div class="mySwiper swiper-h" id="id1">
<div class="swiper-wrapper">
<div class="swiper-slide" data-contetntData1="contentDataTxt1" data-contetntdata2="contentDataTxt2">Content</div>
<div class="swiper-slide" data-contetntData1="contentDataTxt1" data-contetntdata2="contentDataTxt2">Content</div>
<div class="swiper-slide" data-contetntData1="contentDataTxt1" data-contetntdata2="contentDataTxt2">Content</div>
</div>
</div>
<script>
const swiper = new Swiper(".mySwiper", {
on: {
slideChangeTransitionEnd: function () {
*console.log($(this)).find('.swiper-slide-activ').data('contetntData1');
console.log($(this)).find('.swiper-slide-activ').data('contetntData2');*
},
},
});
</script>
One solution is to use swiper api slides[] (array) and realIndex (And get the data attribute value by custom JS dataset).
on: {
realIndexChange: function () {
let index = this.realIndex + 1; /* slide 1 => slides[1] */
let current_data = this.slides[index].dataset.city;
console.log(current_data);
}
}
Demo (Jquery)
let swiperCMSglobalSetting = {
// Optional parameters
slidesPerView: 1,
// Enable lazy loading
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
on: {
realIndexChange: function () {
let index = this.realIndex + 1; /* slide 1 => slides[1] */
let current_data = this.slides[index].dataset.city;
$("#status").text(current_data);
},
}
}
$(".swiper").each(function(index, element){
var $this = $(this);
var swiper = new Swiper(this, swiperCMSglobalSetting);
});
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 50%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/swiper#7/swiper-bundle.min.css"
/>
<!-- Slider main container -->
<h1>status: <span id="status"></span></h1>
<div class="swiper one">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide" data-city="london _ 1.1">london _ 1.1</div>
<div class="swiper-slide" data-city="paris _ 1.2">paris _ 1.2</div>
<div class="swiper-slide" data-city="moscow _ 1.3">moscow _ 1.3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<hr>
<!-- Slider main container -->
<div class="swiper two">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide" data-city="dublin _ 2.1">dublin _ 2.1</div>
<div class="swiper-slide" data-city="amsterdam _ 2.2">amsterdam _ 2.2</div>
<div class="swiper-slide" data-city="madrid _ 2.3">madrid _ 2.3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>
I am trying to add a TIF file to my Mapbox GL JS code which is in html. I haven't found any relevant solution as to how I can add the file to my html code. Can anyone please tell me how to solve this? I need to upload the Georeferenced TIF file to my map in Mapbox GL JS.
Should I convert the TIF file to some other format? It will be better for me if I can upload the whole TIF file to Mapbox.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Change a map's style</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style type='text/css'>
#info {
display: block;
position: relative;
margin: 0px auto;
width: 30%;
padding: 8px;
border: none;
border-radius: 3px;
font-size: 14px;
text-align: center;
color: #222;
background: #fff;
}
</style>
<style>
#menu {
position: absolute;
background: #fff;
padding: 10px;
font-family: 'Open Sans', sans-serif;
}
</style>
<div id='map'></div>
<div id='menu'>
<input id='streets-v11' type='radio' name='rtoggle' value='streets' checked='checked'>
<label for='streets'>streets</label>
<input id='light-v10' type='radio' name='rtoggle' value='light'>
<label for='light'>light</label>
<input id='dark-v10' type='radio' name='rtoggle' value='dark'>
<label for='dark'>dark</label>
<input id='outdoors-v11' type='radio' name='rtoggle' value='outdoors'>
<label for='outdoors'>outdoors</label>
<input id='satellite-v9' type='radio' name='rtoggle' value='satellite'>
<label for='satellite'>satellite</label>
</div>
<pre id='info'></pre>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic2lmYXQ1NzciLCJhIjoiY2p6dXNvN3ZnMGVqZTNjcDRrNWNqcTE5byJ9.Bg8-lwZjjNoswew2k1w2RA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
zoom: 13,
center: [90.3897, 23.7270]
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());
//for displaying the latlon of mouse curson in map
map.on('mousemove', function (e) {
document.getElementById('info').innerHTML =
// e.point is the x, y coordinates of the mousemove event relative
// to the top-left corner of the map
JSON.stringify(e.point) + '<br />' +
// e.lngLat is the longitude, latitude geographical position of the event
JSON.stringify(e.lngLat.wrap());
});
var layerList = document.getElementById('menu');
var inputs = layerList.getElementsByTagName('input');
function switchLayer(layer) {
var layerId = layer.target.id;
map.setStyle('mapbox://styles/mapbox/' + layerId);
}
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
</script>
</body>
</html>
One way to do this (as you spoke about) is to convert the georeferenced image to another format. Here is an example of how to add a georeferenced image, as long as you know the geographic bounds :
map.addSource("myImageSource", {
"type": "image",
"url": "test.gif",
"coordinates": [
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]
});
map.addLayer({
"id": "overlay",
"source": "myImageSource",
"type": "raster",
"paint": {
"raster-opacity": 0.85
}
});
You can also see https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map/ for more reference material.
I have a jsfiddle here - http://jsfiddle.net/eYV4n/
Really simple navigation and a hidden div block beneath it.
When you click the second link in the nav the div block slides down with slideToggle.
When the div block slides down I would like the button clicked to be selected.
I can do this when it's clicked by changing the background color.
Is it possible to deselect the link (change it's color back) when the div block slides again.
jquery.hover() handler hover-in and hover-out. Is it possible to do the same thing with slideToggle.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:#eee;
}
#wrap{
background:#fff;
max-width:800px;
margin:0 auto;
height:1000px;
}
ul{
list-style:none;
overflow:auto;
}
ul li{
display:inline;
}
ul li a {
float:left;
display:block;
color:#222;
padding:10px;
margin:0 5px 0 0;
}
#block{
width:100%;
margin:0 auto;
height:200px;
background:red;
display:none;
}
</style>
</head>
<body>
<div id="wrap">
<nav>
<ul>
<li>One</li>
<li>Two ↓</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<div id="block">
</div>
</div><!-- #wrap -->
<script>
$('#btn').click(function(e){
e.preventDefault();
$('#block').slideToggle('2000')
$('#btn').css('background','red');
})
</script>
</body>
</html>
A better solution is to toggle a class that in turn changes the background. You should make it a best practice to never style elements with Javascript, you should use CSS for that. Adding/removing classes is fine though. This will make the code much easier to maintain in the long run, and it's also more semantic since you're using classes and not inline styling.
Try this:
$('#btn').click(function(e){
e.preventDefault();
$('#block').slideToggle('2000')
$('#btn').toggleClass('active');
})
Then in your CSS.
.active { background: red; }
Edit: Jsfiddle here.
I am trying to implement a simple page with bunch of text fields and using iscroll to scroll.
The issue is when I click on the textfield, the key pad appears but I can't scroll either to the bottom of the screen or to top of the screen.
Here is the code. Any help regarding this is much appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport" content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>sample</title>
<!-- iPad/iPhone specific css below, add after your main css >
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
-->
<!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
// If you want to prevent dragging, uncomment this section
/* function preventBehavior(e)
{
e.preventDefault();
}
document.addEventListener("touchmove", preventBehavior, false);*/
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
// do your thing!
}
</script>
<link rel="stylesheet" type="text/css" href="scrollbar.css">
<script type="application/javascript" src="src/iscroll.js?v4"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<style type="text/css" media="all">
body,ul,li {
padding:0;
margin:0;
border:0;
}
body {
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
font-family:helvetica;
}
#header {
position:absolute;
top:0;
left:0;
width:100%;
height:45px;
line-height:45px;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
padding:0;
color:#eee;
font-size:20px;
text-align:center;
}
#header a {
color:#f3f3f3;
text-decoration:none;
font-weight:bold;
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}
#footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:48px;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
padding:0;
border-top:1px solid #444;
}
#wrapper {
position:absolute;
z-index:1;
top:45px;
bottom:48px;
left:0;
width:100%;
background:#aaa;
overflow:auto;
}
#scroller {
position:relative;
/*-webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
float:left;
width:100%;
padding:0;
}
#scroller ul {
position:relative;
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
#scroller li {
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}
#scroller li > a {
display:block;
}
</style>
</head>
<body>
<div id="header">iScroll</div>
<div id="wrapper">
<div id="scroller">
<ul id="thelist">
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
</ul>
</div>
</div>
<div id="footer"></div>
</body>
</html>
check out this
iScroll 4 not working with form <select> element iPhone Safari and Android browser
i was facing the same issue. worked for me. just a small change. instead of doing for select tag, do for all the tags for which u face the issue.
try to remove -webkit-user-select:none;