I am trying to use classic
Jumo .... <div id="jump">some content</div>
and with this some javascript code ....
if ( ! window.console ) console = { log: function(){} };
$('.single-page-nav').singlePageNav({
offset: $('.single-page-nav').outerHeight(true),
filter: ':not(.external)',
updateHash: true,
beforeStart: function() {
console.log('begin scrolling');
},
onComplete: function() {
console.log('done scrolling');
}
});
But it slide not exactly on the top of the div, but some pixels above ... can you help me with this? Thanks.
Related
I want to add class to navbar when active slide has got attribute set for example "navbar-dark". I tried with class but my function doesn't work perfect. It is when I changed slide the class was adding to the second slide not to first slide.
$(document).ready(function () {
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
loop: false,
mousewheel: {
invert: false,
},
});
mySwiper.on('slideChange', function (realIndex) {
if ($('.swiper-slide.swiper-slide-active').hasClass('dark')) {
$('#navbar').addClass('darknav')
} else {
$('#navbar').removeClass('darknav');
}
});
});
I googled for "swiper jQuery plugin", opened the first suggested page and went to the API.
And there's the Events section, and there's the .on init method. Let's try it
jQuery(function($) {
function darkNav() {
//if ( $('.swiper-slide.swiper-slide-active').hasClass('dark') ) { // `this` rather?
if ( $(this).find('.swiper-slide-active').hasClass('dark') ) {
$('#navbar').addClass('darknav')
} else {
$('#navbar').removeClass('darknav');
}
}
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
loop: false,
mousewheel: {
invert: false,
},
on: {
init: darkNav, // do also on init
slideChange: darkNav // is this needed?
}
});
});
Also, instead of $('.swiper-slide.swiper-slide-active').hasClass('dark') you could rather try with $(this).find('.swiper-slide-active').hasClass('dark')
I am trying to remove a slide in my slick carousel when it is on mobile/tablet.
Here is the basic version of the HTML that I have;
<div class="wrapper hero-slider" id="myCarousel">
<div class="hero__item hero__item-home hide-on-mobile">
<img src="image" alt="" class="hero__bottle hero__bottle-
showcase">
<img src="image"
alt="" class="hero__bottle hero__bottle-showcase">
<img src="image" alt="" class="hero__bottle hero__bottle-
showcase">
</div>
<div class="hero__item hero__item-home">
.....
</div>
<div class="hero__item hero__item-home">
.....
</div>
<div class="hero__item hero__item-home">
.....
</div>
</div>
I found this and am trying to get it working with my code, here is the script that I am using to hide the slide.
var breakpointMobile = 700,
isChanging = false,
isFiltered = false;
$('#breakpointMobile').text( breakpointMobile );
$('#myCarousel').on('init breakpoint', function(event, slick){ /** 2. and 5. **/
if ( ! isChanging ) { /** 4. **/
$('#breakpointValue').text( String(slick.activeBreakpoint) );
isChanging = true;
if ( slick.activeBreakpoint && slick.activeBreakpoint <= breakpointMobile) {
if ( ! isFiltered ) {
slick.slickFilter(':not(.hide-on-mobile)'); /** 3. **/
isFiltered = true;
}
} else {
if ( isFiltered ) {
slick.slickUnfilter();
isFiltered = false;
}
}
isChanging = false;
}
})
$(document).ready(function(){
$('.hero-slider').slick({
autoplay: false,
arrows: false,
responsive: [
{ breakpoint: 500 },
{ breakpoint: 700 },
{ breakpoint: 900 }
]
});
The code doesn't break anything it seems to just not work. I did realise that I had some class names wrong (might still have) which I thought was the problem but still no luck.
This is the answer that I was following;
How to remove slick slide on mobile?
The only thing that I can see differently is how slick is called;
$(document).ready(function(){
$('.hero-slider').slick({
});
I feel like this must be an issue but I don't see why it would be.
Any help would be great.
Thanks,
Zack
You'll first have to determine is a user is browsing the website on a mobile device. You can achieve this by using the Navigator header passed by the browser. You can do this by:
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
and then use if(isMobile.any()) to find out if the user is on mobile.
To make use of this with your slider, you can use:
$(document).ready(function(){
if(!isMobile.any()) {
$('.hero-slider').slick({ /* slider code here */ });
}
});
Semantic-ui ver. 2.0.8.
I currently use the following method to load dynamic content in a pop-up
JAVASCRIPT
var popupContent = null;
var popupLoading = '<i class="notched circle loading icon green"></i> wait...';
$('.vt').popup({
inline: true,
on: 'hover',
exclusive: true,
hoverable: true,
html: popupLoading,
variation: 'wide',
delay: {
show: 400,
hide: 400
},
onShow: function(el) { // load data (it could be called in an external function.)
var then = function(r) {
if (r.status) {
popupContent = r.data; // html string
} else {
// error
}
};
var data = {
id: el.dataset.id
};
ajax.data('http://example.site', data, then); // my custom $.ajax call
},
onVisible: function(el) { // replace popup content
this.html(popupUserVoteContent);
},
onHide: function(el) { // replace content with loading
this.html(popupLoading);
}
});
HTML
<h2 data-id="123" class="vt">10</h2>
<div class="ui popup" data-id="123"></div>
There 's a way to simplify the whole process?
For example with a element.popup ('refresh') after loading the new content?
I tried:
JAVASCRIPT
...
if (r.status) {
$('.ui.popup[data-id="123"]').html(r.data);
}
...
but it does not work.
I also tried using (replace) data-content into h2.vt but nothing.
The only improvement that comes to mind is to make the code a little cleaner (you only really need the onShow event, which fires before the popup shows) and avoid using a global variable (popupContent).
That said, the main idea is mostly the same - when the popup is supposed to show, you replace its content with some fake content (the loading animation), then trigger $.ajax and update the popup content as soon as the request completes.
var popupLoading = '<i class="notched circle loading icon green"></i> wait...';
$('.vt').popup({
inline: true,
on: 'hover',
exclusive: true,
hoverable: true,
html: popupLoading,
variation: 'wide',
delay: {
show: 400,
hide: 400
},
onShow: function (el) { // load data (it could be called in an external function.)
var popup = this;
popup.html(popupLoading);
$.ajax({
url: 'http://www.example.com/'
}).done(function(result) {
popup.html(result);
}).fail(function() {
popup.html('error');
});
}
});
I'm trying to use lightbox_me as a message alert but, I'm having some problems getting the element to close after a few seconds. Is this possible?
Here's my code
$('#message').lightbox_me({
centered: true,
closeSelector: "#close-message",
overlayCSS:{background: 'black', opacity: .8},
onLoad: function() {
$('#message').find('input:first').focus()
$ele.lightbox_me();
}
});
Ended up using this after help from Dunli, thanks
// test message
$('#message').lightbox_me({
centered: true,
overlayCSS:{background: 'black', opacity: .8},
onLoad: function() {
$('#message').find('input:first').focus()
setTimeout(lightbox, 5000);
function lightbox() {
$('#message').trigger('close');
}
}
});
Try this:
setTimeout(function(){
$('#lightbox_elem_id').trigger('close');
}, seconds*1000);
I'm trying to keep working onStart and onComplete methods using FancyBox (jquery plugin)
I can't seem to get any of it to work for me. Do any of you know what I'm doing wrong?
This is what I'm trying now:
$(document).ready(function(){
//top-menu highlight link
$(".photos").removeClass().addClass("active");
$("a.fancybox").fancybox({
'overlayShow' : true,
'0opacity' : true,
'overlayOpacity': 0.6,
'onStart' : function(){ $("body").css('overflow','hidden');},
'onComplete': function(){ $("body").css('overflow','auto');}
});
});
I was also trying to get onStart working...
I got fancybox v2.1.5, but when I do a search on 'onStart' in the javascript file it's not found. When I searched for '.trigger' I found: 'beforeLoad'
Maybe this could help someone out, in my case this is what I needed :)
I also saw there was an 'onReady' triggered somewhere which can be used instead of the 'onComplete' I guess!
P.S. I used it like this
$("a.popup").fancybox({
beforeLoad: function() {
return window.confirm('Continue?');
}
});
FancyBox < version 2
FROM EXAMPLE (fancybox.net):
$("#various7").fancybox({
onStart: function() {
return window.confirm('Continue?');
},
onCancel: function() {
alert('Canceled!');
},
onComplete: function() {
alert('Completed!');
},
onCleanup: function() {
return window.confirm('Close?');
},
onClosed: function() {
alert('Closed!');
}
});
EDIT: 06-2015
FancyBox >= version 2
FROM EXAMPLE (fancyapps.com):
$("#various7").fancybox({
onUpdate: function() {
alert('update!');
},
onCancel: function() {
alert('cancel!');
},
onPlayStart: function() {
alert('play start!');
},
onPlayEnd: function() {
alert('play end!');
},
beforeClose: function() {
alert('before close!');
},
afterClose: function() {
alert('after close!');
},
beforeShow: function() {
alert('before show!');
},
afterShow: function() {
alert('after show!');
},
beforeLoad: function() {
alert('before load!');
},
afterLoad: function() {
alert('after load!');
}
});
Notice that the callback methods are different in fancybox2. It uses beforeLoad, afterShow, etc. Please consult fancybox2's documentation here.
Try this:
$(document).ready(function(){
$("a.fancybox").fancybox({
'overlayShow' : true,
'opacity' : true,
'overlayOpacity': 0.6,
'onStart' : function(){
$("body").css('overflow','hidden');
},
'onCleanup': function(){
$("body").css('overflow','auto');
}
});
});
fancybox onStart onComplete status not working working with jquery 1.9.1 try jquery 1.6.4.