I have a request to change the old website which uses jQuery OwlCarousel v1.3.3 and the client wants that when the user reaches the last item in the list it should go to custom page or blog list page where it will show all the items of the blog
When Item reaches the last item '' disabled class is added to this <div class="owl-next disabled"> at this point it should go to the blog list page from the home page such as www.example.com/blog
Codepen Demo
How can I observe the owl-next item inside owl-demo so that when class **disabled** is added to owl-next so I can trigger a function that will take it to a different page?
You can just add a callback to the afterAction option of Owl Carousel and check the visibleItems if it contains the last element of the carousel.
So the code will look like this:
$(document).ready(function () {
var owl = $("#owl-demo");
owl.owlCarousel({
itemsCustom: [
[0, 2],
[450, 4],
[600, 7],
[700, 9],
[1000, 10],
[1200, 12],
[1400, 13],
[1600, 15]
],
navigation: true,
afterAction: afterAction
});
function afterAction() {
if (this.owl.visibleItems.includes(this.owl.owlItems.length - 1))
setTimeout(function () {
location.href = "https://codepen.io/dreambold"; //=> Add the desired URL here
}, 500);
}
});
For the documentation, you can have a look at https://github.com/sergey-ovdienko/owlcarousel-v1
Live demo here: https://codepen.io/dreambold/pen/PoBJvdJ?editors=1011
Related
I am using Gridster widget for webpage.I have widgets which have images on them.JSON gives data about what image should be there on each grid(I get text from JSON and then get corresponding image from database).
I have textarea field on my widgets which extracts the value of "html" field from the JSON.This value is corresoponding to image present on the widget.
I have a button on each image which deletes the image.I want to delete the content of textarea when I remove the image dynamically.So that when I use Serialize. again there should be updated values in JSON
My JS:
var gridster;
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 100],
widget_margins: [5, 5],
helper: 'clone',
serialize_params: function($w, wgd) {return {images: $w.find('textarea').val().trim() , col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y}},
resize: {
enabled: true
}
}).data('gridster');
//Function for deleting images
$('.removediv').on('click', function () {
$(this).closest('div.imagewrap').remove();
//something that will update textarea by removing the deleted image
//address.
});
HTML:
<button class="js-seralize btn btn-success mr-2">Serialize</button>
<textarea id="log"></textarea>
Fiddle will explain it in a good way
I am using owl carousal to show youtube videos and when use click on the video it show video in nivo lightbox $('a').nivoLightbox();
Which all works fine but the problem i am facing is that when i close the popup this particular carousal keep moving item left or right based on the mouse position on any part of page.
i am not sure how unbind mouse with owl i tried few thing that didnt work such as $("owl-carousel").trigger('refresh.owl.carousel');
Any thing else i can do to stop move from scrolling items left right
$("#content-slide-videos").owlCarousel({
//autoPlay: 5000, Set AutoPlay to 5 seconds
items: 3,
itemsDesktop: [1199, 3],
itemsDesktopSmall: [980, 3],
itemsTablet: [768, 2],
itemsTabletSmall: false,
itemsMobile: [479, 1],
pagination: false,
dots: false,
//video:true,
// autoplayHoverPause: false,
lazyLoad: true,
navigation: true,
navigationText: [
"<i class='fa pe-7s-angle-left'></i>",
"<i class='fa pe-7s-angle-right'></i>"
],
afterInit: function (elem) {
var that = this;
that.owlControls.prependTo(elem);
}
});
Solved the issue, I was using by using js file from https://s3-us-west-2.amazonaws.com/s.cdpn.io/669264/owl.carousel.js
not sure what could be the problem while both files are v1.3.3 after comparing both file only different was 'use strict'; line was not present in the other file.
I found an image slider on here and attempted to modify my existing slider I had to be more like the one I found. After tinkering with it, I am unable to get anything with it even working.
I created this to show what I am trying to do:
https://jsfiddle.net/xeud0rw6/
I'm basing it around this...http://gualini.adostudio.it/realizations_2.html#
I have added in my id's of
#thumb
and
#big
in attempts to modify this to make it work, but I think I am missing something. Does anyone see what I'm doing wrong?
Don't ask us to make your buggy code work, this question will not help anyone but yourself. I suggest you approach the authors of your plugin or at least specify the plugins you are speaking of.
Try this:
$(document).ready(function(){
var realSlider= jQuery("#big ul").bxSlider({
speed:1000,
pager:false,
nextText:'',
prevText:'',
infiniteLoop:false,
hideControlOnEnd:true,
onSlideBefore:function($slideElement, oldIndex, newIndex){
changeRealThumb(realThumbSlider,newIndex);
}
});
var realThumbSlider=jQuery("#big ul").bxSlider({
minSlides: 4,
maxSlides: 4,
slideWidth: 156,
slideMargin: 12,
moveSlides: 1,
pager:false,
speed:1000,
infiniteLoop:false,
hideControlOnEnd:true,
nextText:'<span></span>',
prevText:'<span></span>',
onSlideBefore:function($slideElement, oldIndex, newIndex){
/*jQuery("#thumb ul .active").removeClass("active");
$slideElement.addClass("active"); */
}
});
linkRealSliders(realSlider,realThumbSlider);
if(jQuery("#thumb li").length<5){
jQuery("#thumb .bx-next").hide();
}
// sincronizza sliders realizzazioni
function linkRealSliders(bigS,thumbS){
jQuery("#thumb ul").on("click","a",function(event){
event.preventDefault();
var newIndex=jQuery(this).parent().attr("slideIndex");
bigS.goToSlide(newIndex);
});
}
//slider!=$thumbSlider. slider is the realslider
function changeRealThumb(slider,newIndex){
var $thumbS=jQuery("#thumb");
$thumbS.find('.active').removeClass("active");
$thumbS.find('li[slideIndex="'+newIndex+'"]').addClass("active");
if(slider.getSlideCount()-newIndex>=4)slider.goToSlide(newIndex);
else slider.goToSlide(slider.getSlideCount()-4);
}
});
I'm trying to find out how I can add a button to right before the copy button that will always be a link to the create page of the resource. So if its on /users and in the list of buttons if a user clicks Add then it goes to /users/create. How would I do that with my code below. I also have a couple of errors and researched it and found out my errors might be due to the order in which my files are rendered. I have included the order below. I'm hoping someone can help me out somehow.
TypeError: jQuery[g3g][((((Y2 + Z3) + G4) + p1) + F9e)] is undefined
...((Y2+G4+d6g+Z3+G4+A1e+U2+y8g))):jQuery&&!jQuery[g3g][(Y2+Z3+G4+p1+F9e)][(y8+t5e+...
dataTab...itor.js (line 475, col 170)
TypeError: DataTable.Editor is undefined
DataTable.Editor.defaults.display = "bootstrap";
editor....trap.js (line 8)
$('document').ready(function() {
$('#myDatatable').dataTable({
"pagingType": "full_numbers",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [-1] },
{ 'sWidth': '30px', 'aTargets': ['idTH'] },
{ 'sWidth': '150px', 'aTargets': ['actionsTH', 'subTH'] },
{ 'sClass': 'text-center', 'aTargets': ['idTH', 'actionsTH', 'subTH'] }
],
"iDisplayLength": 10,
"aLengthMenu": [
[5, 10, 25, 50, -1],
[5, 10, 25, 50, "All"]
],
dom: '<"dt-panelmenu clearfix"Tfr>t<"dt-panelfooter clearfix"ip>',
"oTableTools": {
"sSwfPath": "vendor/plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf"
}
});
});
<script src="http://myapp.app/vendor/jquery/jquery-1.11.1.min.js">
<script src="http://myapp.app/vendor/jquery/jquery_ui/jquery-ui.min.js">
<script src="http://myapp.app/assets/js/bootstrap/bootstrap.min.js">
<script src="http://myapp.app/assets/js/utility/utility.js">
<script src="http://myapp.app/assets/js/main.js">
<script type="text/javascript">
<script src="http://myapp.app/vendor/plugins/datatables/media/js/jquery.dataTables.js">
<script src="http://myapp.app/vendor/plugins/datatables/media/js/dataTables.bootstrap.js">
<script src="http://myapp.app/vendor/plugins/datatables/extensions/TableTools/js/dataTables.tableTools.min.js">
<script src="http://myapp.app/vendor/plugins/datatables/extensions/Editor/js/dataTables.editor.js">
<script src="http://myapp.app/vendor/plugins/datatables/media/js/dataTables.bootstrap.js">
<script src="http://myapp.app/vendor/plugins/datatables/extensions/Editor/js/editor.bootstrap.js">
<script src="http://myapp.app/assets/js/my-datatables.js">
Well one, in your <script> tags section, you open a tag but never close it. That is likely your odd error you're not defining. Not so much as the placements of the scripts or the order they are in.
As for adding a button to your UI, sometimes the way datatables explains it, it won't always work in your favor, more so as those buttons are flash based.
I'd say for the sake of example:
after your call to $('#myDatatable').dataTable({});
Simply append the element via standard jquery methods..
ie:
$('#myDatatable').append('<div style="width:100px;height:30px;background-color:#F60;color:#fff;position:absolute;top:2px;right:275px;">Hello</div>');
Again primarily for the sake of example, you can tweak as needed but you can basically get this right up snug next to those buttons should you like you could likely get it in the button container, but then your going to mess with extra styling, positioning, etc.. easiest to go next to all around if your getting a feel for things overall.
First of all, I'm pretty new to jQuery but with the help of http://css-tricks.com/examples/Circulate/ I managed to figure out how to create ellipses in my code.
Here's the thing though, I want to create an input field/text box for users to type in their own "speed" value (which is now set at "500") and then click a submit button to start the ellipse.
$("#ball").circulate({
speed: 500,
height: 500,
width: 200,
loop: true,
zIndexValues: [1, 1, 1, 1]
});
I figured out the submit button part, but I keep running in circles when it comes to finding a way for a visitor of my website to manually input the "speed". I would be much obliged if someone could point me in the right direction/could give me a starting point.
Try this:
$('#submitButton').click(function() {
var userSpeed = +$('#inputBox').val();
if (!userSpeed) {userSpeed == 500};
$("#ball").circulate({
speed: userSpeed,
height: 500,
width: 200,
loop: true,
zIndexValues: [1, 1, 1, 1]
});
});
Then, when the user clicks on the submit button, your code gets the new value and sets the speed for the function. If the user clicks the button without having entered a number, a default speed is used.
You have to use .val() function to get the value from an input and then use it to set the speed.
var input = $("#YOUR_INPUT_ID");
$("#ball").circulate({
speed: input.val(),
height: 500,
width: 200,
loop: true,
zIndexValues: [1, 1, 1, 1]
});