I have this gallery the designer handed to me, and I have to put it on my twig. The thing is the slider is not working. This is the code (the js with the problem):
$(function () {
var demo1 = $("#demo1").slippry({
transition: "fade",
useCSS: true,
speed: 2e3,
pause: 4e3,
auto: true,
preload: "visible"
});
$(".stop").click(function () {
demo1.stopAuto()
});
$(".start").click(function () {
demo1.startAuto()
});
$(".prev").click(function () {
demo1.goToPrevSlide();
return false
});
$(".next").click(function () {
demo1.goToNextSlide();
return false
});
$(".reset").click(function () {
demo1.destroySlider();
return false
});
$(".reload").click(function () {
demo1.reloadSlider();
return false
});
$(".init").click(function () {
demo1 = $("#demo1").slippry();
return false
})
});
The error is in the part where it includes one of my css files, the one called "slippry". The error says: "Undefined function or method". My question is: Do I have to call this css file in another way to make the slider work? Do I have to change the path?
Instead of trying to answer your question directly, I would first recommend that you use Twitter Bootstrap's Carousel (slider), as you won't have to worry about binding your click events to controls. In addition to its robust design/extensibility that includes events.
You can fully customize the css to make the slider look like whatever you want it too... Plus the bootstrap package provides a very nice responsive framework, and you should be using one of these anyways.
Related
I'm using this awesome plugin "Cropper" to upload Images of a specific size.
So far, evertything works fine, but:
When I call:
function moveImageToZero() {
$("#target").cropper('moveTo',0,0);
}
from a button click or inside the
on('ready') event of the cropper element like this
$("#target").on('ready', function () {
moveImageToZero();
});
the canvas DOES move to the top-left corner.
Anyway, calling the 'moveTo' function from inside an Event-Handler of a cropper element:
$("#target").on('zoom',function () {
moveImageToZero();
});
nothing actually happens.
Functions are invoked properly and do not throw errors or exceptions.
Does someone have a solution for this?
I'm trying to keep the Image/Canvas always fixed to the top-left corner.
Any help is highly appreciated!
Try this:
$("#target").on('ready', function () {
moveImageToZero(this.cropper);
});
function moveImageToZero(cropper) {
cropper('moveTo',0,0);
}
I'm not sure it works, but when I used cropper last time, I used native js cropper lib, and code looked like that:
const cropper = new Cropper(imageEl, {
aspectRatio: this.aspectRatio
background: false,
rotatable: true,
zoomable: !!this.aspectRatio,
movable: false,
checkCrossOrigin: false,
crop: (e) => {
// on cropp event
},
ready: function () {
self.cropper = this.cropper; // so I use it outside in my function/class
}
});
I want to produce a manual tooltip based upon some user input. The easiest way was to hide all tooltips and then show the relevent ones.
I've reduced my code down to the bare essentials, and my tooltip keeps disappearing after the second "show".
I'm using bootstrap 3.3.4 and jquery 2.1.3
Is there a problem with doing a show immediatly after a hide or am I missing something in my code?
<input id="check" type="checkbox">
<script>
var toolTipData = {
placement: 'right',
title: 'Checkmark checked',
trigger: "manual"
};
$('#check').tooltip(toolTipData);
$(document).on('change', '#check', function () {
$('#check').tooltip("hide");
if (document.getElementById("check").checked) {
$('#check').tooltip("show");
}
});
</script>
Here's a jsfiddle: https://jsfiddle.net/bbrally/4b9g0abh/
You're experiencing a race condition between when the "hide" event happens and when the "show" event happens. Per the documentation the "hide/show" events actually return to the caller before the "hidden/shown" events fire.
http://getbootstrap.com/javascript/#tooltips
Scroll down to the "Methods" section under tooltips
...Returns to the caller before the tooltip has actually been hidden...
...Returns to the caller before the tooltip has actually been shown...
I'm not suggesting the code below is a solution (though, it might be good enough?), but an explanation as to what you're running into. Specifically the timeout value of 250ms will slow it down enough such that it works as you're intending.
var toolTipData = {
placement: 'right',
title: 'Checkmark checked',
trigger: "manual"
};
$('#check').tooltip(toolTipData);
$(document).on('change', '#check', function () {
$('#check').tooltip("hide");
if (document.getElementById("check").checked) {
setTimeout(function() {
$('#check').tooltip("show");
}, 250);
}
});
Hope this helps.
$(document).on('change', '#check', function () {
if (document.getElementById("check").checked) {
$('#check').tooltip("show");
}
else{
$('#check').tooltip("hide");
}
});
It was trying to hide, even though it shouldn't, separate both cases.
I have the following javascript function which works nicely on a single html file.
jQuery.noConflict();
jQuery(function() {
$('#focus-init').click(function() {
$('#map1').vectorMap('set', 'focus', 1, 0, 0);
});
});
The issue appears when I try to integrate the above function into my wordpress theme. It seems that any other page I browse the above function is always called which I don't expect it to happen.
Since the #focus-init only exist on one page how can I specify that the above function should only be called when the element ID is found ?
UPDATE
I am afraid this wordpress theme does not have a concept of page title, since any other page has the same title tag
jQuery(function() {
if ($('#focus-init').length !== 0) {
$('#focus-init').click(function() {
$('#map1').vectorMap('set', 'focus', 1, 0, 0);
});
}
});
I'm trying to fade out a div on a click but also change some css values.
the issue im having is that the values change while the fade out is happening (too early). I need the values to change once the fade out has finished:
<script type="text/javascript">
$('#r_text').click(function() {
$(".box1_d").fadeOut();
$(".box1_c").css("top","0px");
});
</script>
Now when i run that, everything works but just not exactly how i'd like it.. I need the css values to be changed once the fadeout has finished, not while it's still happening.
is this possible?
if so, any ideas how?
thank you.
Use a callback function to modify the .css() as the second parameter to fadeOut(). It will fire when the fade completes.
<script type="text/javascript">
var fadeTime = 500;
$('#r_text').click(function() {
$(".box1_d").fadeOut(fadeTime, function() {
$(".box1_c").css("top","0px");
});
});
</script>
Provided you use jQuery version >= 1.5, you can/should utilize the Deferred object instead of using the callback parameter:
$('#r_text').click((function () {
var animations = {
initial: function () {
return $(".box1_d").fadeOut(1500);
},
following: function () {
return $(".box1_c").css("top","0px").animate({fontSize: '150%'});
},
onDone: function () {
alert('DONE!');
}
};
return function(e) {
$.when(animations.initial())
.pipe(animations.following)
.done(animations.onDone);
e.preventDefault();
};
}()));
JsFiddle of it in action: http://jsfiddle.net/wGcgS/2/
I'm trying to something like this if in the html there is a div called "#super" load it in the simple modal if not do nothing. I managed to do this with the my skill :D which is none: to load the modal if the #super exists, but it still loads doesn't matter if it exitst or not. PLease help I'm absolute noob on jquery.
if( $('super') ){ $("#super").modal({onOpen: function (dialog) {
dialog.overlay.fadeIn('slow', function () {
dialog.container.slideDown('slow', function () {
dialog.data.fadeIn('slow');
});
});
}});
I'm using this jquery plugin link text
If #super does not exist, nothing will happen. So, the following should fit your needs:
$("#super").modal({onOpen: function (dialog) {
dialog.overlay.fadeIn('slow', function () {
dialog.container.slideDown('slow', function () {
dialog.data.fadeIn('slow');
});
});
});
I'm not quite sure what it is that you want to do, in the if/else conditions, but to test for the existence of something:
if ($('#super').length) {
// it exists, do stuff
}
else {
// it doesn't exist, do other stuff. Or nothing
}
I'm sorry I can't be more specific, but I've not worked with the dialog/modal plugin.
The problem is this check
if( $('#super') )
will always return true, since the jQuery function always return a jQuery object which is not a false value.
Instead try this
if( $('#super').length > 0 )