I am using nouislider anad it works fine except when I try to link it to a span.
Then I get an error: this.LinkConfirm is not a function. I am doing it like this:
$(function(){
$('#slider').noUiSlider({
start: [ 0, 100 ],
connect: true,
step:20,
range: {
'min': 0,
'max': 100
},
format: wNumb({
decimals: 0,
})
});
$("#slider").Link('lower').to($('#lower-value'));
$('#slider').on('set', onSlide);
Then I have a function:
function onSlide(){
len=$("#slider").val();
len1=len[0];
len2=len[1];
};
In the html I have:
<div id="slider" style="width: 300px"></div>
<br>
<span id="lower-value">Value:</span>
<br>
Thanks in advance
Hildigunnur
You are building your slider on document ready, ($(function()), but you are attempting to Link before that happens.
Move the linking up into the $(function(){ ... }); and it'll work.
Related
I am experiencing some trouble using Openseadragon:
This is my code for the viewer:
<div id="viewer"></div>
<script>
var viewer = OpenSeadragon({
preserveViewport: true,
visibilityRatio: 1,
defaultZoomLevel: 0,
id: "viewer",
sequenceMode: true,
tileSources: {
type:'image',
url:"https://api.digitale-sammlungen.de/iiif/presentation/v2/bsb10200197/canvas/1/view"},
showFullPageControl: false,
showHomeControl: false,
prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon#2.4/build/openseadragon/images/"
});
</script>
As you can see, I have a tileSource from the bayerische Staatsbibliothek in Germany.
Whenever I access the url directly in the browser, the image opens as intended, however, when I'm in my viewer in receive the error
Unable to open [object Object]: Error loading image at https://api.digitale-sammlungen.de/iiif/presentation/v2/bsb10200197/canvas/1/view
Can anyone tell me what I'm doing wrong?
all the best and thanks in advance
Are you looking to use the IIIF tilesources here? If so you will need to use the IIIF Image Information url for the tileSource and not the canvas. I would also remove type: 'image'.
<div id="viewer"></div>
<script>
var viewer = OpenSeadragon({
preserveViewport: true,
visibilityRatio: 1,
defaultZoomLevel: 0,
id: "viewer",
sequenceMode: true,
tileSources: {
url:"https://api.digitale-sammlungen.de/iiif/image/v2/bsb10200197_00001/info.json"},
showFullPageControl: false,
showHomeControl: false,
prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon#2.4/build/openseadragon/images/"
});
</script>
I have a code working pretty well on desktop, but my images on mobiles take too long to load and sometimes isn't loading at all... any help?
code
.js
(function(a) {
var b = a(".grid").masonry({
itemSelector: ".grid-item",
columnWidth: 306,
fitWidth: !0,
transitionDuration: 0
});
b.imagesLoaded().progress(function() {
b.masonry("layout");
a(".loading").hide();
a(".grid").show();
});
a(document).ready(function() {
a("img.imgload").lazyload({
threshold: 430,
failure_limit: 10
});
});
})(jQuery);
.html
<div class="loading"></div>
<div class="grid">
<div class="grid-item"><img class="imgload" src="/img/dummy.jpg" data-original="blablabla" width="300" height="420">
</div>
</div>
.css
.loading {position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 9999;background: url(/img/modal-loader.gif) center no-repeat #fff }
I have found the issue:
a(document).ready(function() {
I'm trying to get noUISlider to show the "tooltip" with € as part of it. Here is a working example of what I have:
https://jsfiddle.net/d4nxcwwu/4/
Javascript:
$(document).ready( function() {
var topSlider = document.getElementById('price_slider');
noUiSlider.create(topSlider, {
tooltips: [wNumb({ decimals: 0 }), wNumb({ decimals: 0 })],
behaviour: 'drag-tap',
connect: true,
range: {
'min': 10,
'max': 500
},
// snap: true,
start: [10, 500]
});
topSlider.noUiSlider.on('update', function ( values, handle, unencoded, isTap, positions ) {
$('#price_from').val(parseInt(positions[0]));
$('#price_to').val(parseInt(positions[1]));
});
});
HTML:
<div style="padding:100px">
<div id="price_slider"></div>
</div>
From: <input type="text" id="price_from" /><br>
To:<input type="text" id="price_to" />
The page works, but what I want / need is for the tooltip to show the value like:
€1234
not just
1234
The values in the input are fine (I don't want them appended to anything)
I've played around with the format function, but it doesn't seem to do what I want / am expecting.
format: {
from: function(value) {
return parseInt(value);
},
to: function(value) {
return parseInt(value);
}
},
FWIW, I came across this post, but couldn't get it working: formatting the tooltip in noUISlider
Any suggestions are much appreciated.
I'm trying to get the jquery masonry script to reshuffle after I animate the size of a div. I had seen some examples but I just can't seem to get it working. I tried:
<script>
$(function(){
$('#container').masonry({
itemSelector: '.box',
columnWidth: 100,
isAnimated: true
});
});
</script>
<script>
$("#test").click( function() {
$("#test").animate ({
"width": 300,
"height": 200
}, 250 );
$('#container').masonry({
itemSelector: '.box',
columnWidth: 100,
isAnimated: true
});
});
</script>
I also tried
<script>
$(function(){
$('#container').masonry({
itemSelector: '.box',
columnWidth: 100,
isAnimated: true
});
});
</script>
<script>
$("#test").click( function() {
$("#test").animate ({
"width": 300,
"height": 200
}, 250 );
$("#container|).masonry("reload");
});
</script>
For some reason I can't get the reshuffle to happen. Here is the page it's not working with http://www.klossal.com/masonry.html
thanks in advance for any help on this.
Masonry("reload") should work but you have an error in your line $("#container|).masonry("reload");. Your need a closing normal quote and not a pipe like so: $("#container").masonry("reload"); I also don't think I don't think you need isotope to shuffle. The easist would be to reorder the tiles before feeding it to masonry. Simple look at my site (http://www.phpdevpad.de). When you click on the menu on the left and try different combinations the tiles are shuffled.
If you want the shuffle method, you need to use Isotope; Masonry's bigger sister. See the github discussion here.
Hi I have a trouble with map code... I use drawingManager to create marks but I want to show or hide depending on a checkbox but I have no idea how to do this... can someone help!! thanks a lot!
you need 3 parts of code to do this.
1) Below is the code for display layer (I assume you have this already):
var parcel_boundary = new google.maps.FusionTablesLayer({
query: {
select: 'parcel_boundary_1_9999',
from: '1ouLS0fm8tPPQNQRpr-bwE4ct-cBkMB-Ru_XttDQ'
},
styles: [{
polygonOptions: {
strokeColor: "#333333",
strokeOpacity: 0.8,
strokeWeight: 0.7,
fillColor: "#36549C",
fillOpacity: 0.3
}
}],
//map: map,
suppressInfoWindows: true
});
google.maps.event.addListener(parcel_boundary, 'click', function(e) {
windowControl(e, infoWindow, map);
});
2) Immediately below display layer code comes this part of code:
$('#parcel_boundary_box').click(function(){
if ($(this).is(':checked'))
parcel_boundary.setMap(map); // show
else
parcel_boundary.setMap(null); // hide
});
$('#parcel_boundary_box').removeAttr('disabled');
3) And inside body you need to add this code:
<div id="panel" style="position:absolute; left:560; top:0px; width:140px; height:30px;">
<input type="checkbox" id="parcel_boundary_box" disabled="true">
<span class="style2">Parcel Boundary</span>
</div>
I hope I helped you.
Best,
Darko