In my current project I'm using simple preloader for my report:
function hideLoading() {
var selectedEffect = "scale";
var options = { percent: 0 };
$("div#loading").hide(selectedEffect, options, 1000, function () {
$("div#fullsize").show();
});
}
$(window).load(function () {
setTimeout(hideLoading, 1000);
});
This gives me nice hiding effect, but because of this I must add jQueryUI.
Normally it's OK, but in this project I'm not using anything from jQueryUI.
I would like to remove it and have nice looking hide effect.
I was trying to use jquery.easing (http://gsgd.co.uk/sandbox/jquery/easing/) but without any luck.
This is sample to work with: http://jsbin.com/ukicac/1/
Not sure why you'd want to use JQueryUI for this. This can be done with JQuery easily.
Check the code here - http://jsbin.com/ukicac/8/
You can use this link for reference -http://api.jquery.com/category/effects/fading/
Hope this helps. Cheers !
Related
I'm using a plug-in for my responsive navigation (http://responsive-nav.com). The plug-in works great, the problem I'm having is there is not navigation on every page. When this is the case I've noticed other javascript doesn't load and I get an error in reference to "responsive-nav.js":
Uncaught Error: The nav element you are trying to select doesn't exist
Here's how I load the script in the main.js file.
$(function(){
var navigation = responsiveNav(".site-nav__list", {
customToggle: "#site-nav__toggle",
open: function(){
$("#site-nav__toggle").addClass('open');
},
close: function(){
$("#site-nav__toggle").removeClass('open');
}
});
});;
The file is called on each page (/js/responsive-nav.js) but removing it doesn't resolve the issue, commenting out the code I've typed above does - so I'm guessing it's something to do with that?
Hope someone can help, cheers!
After speaking with the author of the plug-in he advised I just wrap the script in an 'if statement'.
Here's what we ending up using:
$(function(){
if ($(".site-nav__list").length) {
var navigation = responsiveNav(".site-nav__list", {
customToggle: "#site-nav__toggle",
open: function(){
$("#site-nav__toggle").addClass('open');
},
close: function(){
$("#site-nav__toggle").removeClass('open');
}
});
}
});
Simple. Works like a charm :)
I am trying to use tooltip on a View that has reference to both jQueryUI and Bootstrap 3. I have made a sample here. If I load the Boostrap after jQueryUI's js then the tooltip() call is successful but if I call jQueryUI after Bootstrap then I get an error and nothing works. You can try it out yourself. There is a lot of talk going on about this on the Internet and I asked around GitHub but I could not find a solution yet.
Ideal solution will be to take QueryUI without tooltip. This will work. In case you don't want to do that please include Bootstrap after JQueryUI. Ensure you have unique components from each (you can custom build both libraries with required components)
Bootstrap has a way to to reset any component like:
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
The above code will work when bootstrap is loaded after JQueryUI
Ref: http://getbootstrap.com/javascript/
Here is relevant code from Bootstrap:
var old = $.fn.tooltip
$.fn.tooltip = function (option) {
....
}
$.fn.tooltip.noConflict = function () {
$.fn.tooltip = old
return this
}
Instead of including jquery-ui.js, include individual libraries as needed and leave out jquery-ui tooltip.
For example if all you need is jquery-ui sortable then use this:
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/ui/core.js"></script>
<script src="bower_components/jquery-ui/ui/widget.js"></script>
<script src="bower_components/jquery-ui/ui/mouse.js"></script>
<script src="bower_components/jquery-ui/ui/sortable.js"></script>
the simplest solution is put jquery-ui.js first and then bootstrap-datepicker.js
this works for me.
I have posted a relevant answer with more details in this SO thread: https://stackoverflow.com/a/71176542/1932141
Basically, you can do something like this:
<script src="/js/bootstrap.js"></script>
<script>
var bsTooltip = $.fn.tooltip;
</script>
<script src="/js/jquery-ui.js"></script>
and then you can initialize bootstrap tooltips this way:
// initialize tooltips
bsTooltip.call( $( "[data-toggle='tooltip']" ) );
http://405pixels.gowerpowered.com
I have the slider, and I have been trying to figure out how to make the homepage autoslide?
I tried using firebug to locate the files... Located some .js files that contain some information about the homepage slider... but all the changes and everything I make seem to not be working...
This is a free template I found called BigFoot. I am really interested into learning about how this javascript would work that is why I downloaded in the first place... to learn from the template... If you could point me in the right direction that would be awesome.
Thanks,
Alex
You'll need to replace the actual photo swapping code with whatever you use but the rest will swap out each picture every 5 seconds.
$(document).ready(function() {
var next = $('#right-button');
next.click(function() {
$('#current-picture').fadeOut('fast');
$('#next-picture').fadeIn('fast');
...whatever code you use for this.
});
var scroll = setInterval(function() {
next.trigger("click");
if(picture is last) {
clearInterval(scroll);
}
}, 5000);
});
you are using flex slider so you can use the code below.
jQuery(window).load(function() {
jQuery('.flexslider').flexslider( {
pauseOnHover: true,
slideshow: false,
controlsContainer: ".flex-container"
} );
} );
actually this it the param you need to pass to make slider autostart
slideshow: false,
Let me know if you run into any other issues.
I'm using jQuery with the bxSlider plugin, here is the link to it just incase: http://bxslider.com/
I'm trying to reload the slider and my custom pager after I've removed certain slides from it.
Here is what I have tried:
$(function() {
var slider = $('#slider').bxSlider({
pagerCustom: '#bx-pager'
});
$('.list').on('click', '.delete', function() {
image = $(this).closest('li').find('[type="hidden"]');
// image.attr('id') contains a string: image-0, image-1, image-2, etc.
$('#slider, #bx-pager').find('.' + image.attr('id')).remove();
slider.reloadSlider({
pagerCustom: '#bx-pager'
}); // I have also tried: slider.reloadSlider();
});
});
It works partially. What happens is the slider gets reloaded just fine but it removes the pager completely when it runs the reload.
Thank you very much for any help.
As long as I see, this is a bug in bxSlider, in fact, when you call the reloadSlider method, internally are called the methods destroySlider and init.
In the destroySlider method the pagerEl element is destroyed, this is right if you are not using a custom one, because it is recreated programmatically in the init method, but if you are using a custom one it can't be recreated programmatically.
I ended up modifying the destroySlider method to check if a custom pager is used, in this case it must not be deleted.
Here is the before (line 1294):
if(slider.pagerEl) slider.pagerEl.remove();
And after:
if (slider.settings.pagerCustom === '') {
if(slider.pagerEl) slider.pagerEl.remove();
}
I'll post the bug on GitHub as soon as I have the time.
I am working on a template for Joomla 2.5.x, using Twitter Bootstrap. I also want to use the Bootstrap Carousel Plugin for that template.
I got a problem when the Carousel is used with Joomla´s Mootools implementation. The style of the Carousel element is getting changed with a negative margin, making it invisible for the user. To show you exactly whats happening I have prepared a jsfiddle http://jsfiddle.net/U2pHH/11/ for you.
The Carousel is making every second image not visible to the user due to the Carousels changing style attribute, but the user should see every slide.
I have looked already into the sourcecode of the Carousel Plugin and Mootools JS Files but sadly couldnt work out the cause of the problem. I thought maybe its some naming-problem of functions/classes between jQuery and Mootools but couldnt find any problem there.
I hope you can help me out here.
Edit: I figured out it has something to do with the Fx.Slide class of mootools-more.js, deleting the class out of the sourcecode solved the problem. But thats still no really solution, any help is still very appreciated.
Here is the fix specific to Joomla and mootools more ,
add this code after jq call , it can be in any js file
add
if (typeof jQuery != 'undefined') {
(function($) {
$(document).ready(function(){
$('.carousel').each(function(index, element) {
$(this)[index].slide = null;
});
});
})(jQuery);
}
Another implementation of the same thing that Benn provided is
if (typeof jQuery != 'undefined' && typeof MooTools != 'undefined' ) {
Element.implement({
slide: function(how, mode){
return this;
}
});
}
What I finally ended up with - I created custom Mootools More build without Fx.Slide
The problem is that Mootools more is in conflict with twitter bootstrap, that's why its acting weird the carousel. I suggest you using just jQuery or just Mootools. There is a bootstrap Mootools implementation here: https://github.com/anutron/mootools-bootstrap
Having the same issue.
I'm using a plugin called JB Library ( http://www.joomlabamboo.com/joomla-extensions/jb-library-plugin-a-free-joomla-jquery-plugin ) and this has options to remove Mootools and/or Mootools More from the admin.
After turning 'off' Mootools More the issue with the Carousel is 'fixed'. Might be an easier sollution than commenting stuff out with regards to updates. Unless you need mootools-more.js for other stuff on the site of course.
Hopefully a better sollution comes along soon.
Had the same issue: Bootstrap carousel was not working in registered frontend, since mootools-more.js loaded.
My solution:
The Jquery Easy Plugin ( http://www.simplifyyourweb.com/index.php/downloads/category/8-loading-jquery ) with the option "Remove Mootools when possible" under Advanced Options.
(function($)
{
$(document).ready(function(){
var bootstrapLoaded = (typeof $().carousel == 'function');
var mootoolsLoaded = (typeof MooTools != 'undefined');
if (bootstrapLoaded && mootoolsLoaded) {
Element.implement({
hide: function () {
return this;
},
show: function (v) {
return this;
},
slide: function (v) {
return this;
}
});
}
});
})(jQuery);