I am using jCarousel to show a list of items. Lets say there are 8 items. I am showing 4, waiting 10 seconds, then scrolling to show the last 4. I'd like it to then show the first four and then throw a trigger that tells it to rebind data. The items would update and continue cycling like this.
These items are being loaded through jquery.load [ajax]. I want the items to rebind after they all show. It'd be even better if I could get them to rebind after cycling twice. I was rebinding the data using setInterval (time based), but I'd like it to be dynamic so I don't have to change the javascript timer later down the road when more items are added.
My calling code looks like this:
$(document).ready(function () {
updateConsoles();
$("#tableapp").ajaxStop(function () {
scrollwindow();
});
});
function updateConsoles() {
$('#tableapp').load('AjaxPages/ApplicationMonitor.aspx #application');
}
function scrollwindow() {
$("#tableapp").jCarouselLite({
vertical: true,
hoverPause: true,
visible: 4,
auto: 6000,
speed: 500,
scroll: 4
});
};
Ideally I am looking to be able to add something like:
function scrollwindow() {
$("#tableapp").jCarouselLite({
vertical: true,
hoverPause: true,
visible: 4,
auto: 6000,
speed: 500,
scroll: 4,
whenFinishedCyclingItems: updateConsoles()
});
};
I am pretty new to javascript and jQuery.
It looks like jCarouselLite has an afterEnd function.
So you should be able to do something like this:
function scrollwindow() {
$("#tableapp").jCarouselLite({
vertical: true,
hoverPause: true,
visible: 4,
auto: 6000,
speed: 500,
scroll: 4,
afterEnd: updateConsoles()
});
};
I'm not positive if you'd have to wrap that function inside another function or not, but just in case, the code would be:
afterEnd: function(){updateConsoles();}
Related
I am attempting to fire a click event when the page loads but only once on each page load. What is happening is that in localhost it works fine, but when I upload to server it dosen't fire at all.
The idea was to set a counter to 0 when the page loads then inc the counter by 1 to disable further clicks. Obviously, there is an error somewhere but I cannot solve it.
I am using jqwidgets jqxgrid to display the data and getting the class as a variable. I am also using jquery 1.11.1
I would be grateful if someone could help me solve this as I seem to have tried many combinations, but ok on localhost but nothing on server. I am using php v5.3.13 wamp and 5.4 on server. Many thanks
var counter = 0;
window.onload = function() {
var calendaricons = document.getElementsByClassName('jqx-icon-calendar');
for (var i = 0; i < calendaricons.length; i++) {
calendaricons[i].addEventListener('click', function() {
if (counter === 0) {
notif({
type: "info",
msg: "Test Message",
width: 650,
height: 99,
multiline: true,
position: "center",
fade: true,
//timeout: 3000,
autohide: false,
clickable: true
});
counter++;
} else {
return false;
}
});
}
}
If you are using jQuery, which it seems the case, you can use the one function that allows your handler to be runt only once.
Here is your code with the use of the one function:
$(window).load(function() {
$('.jqx-icon-calendar').each(function(index, item) {
$(this).one("click", function() {
notif({
type: "info",
msg: "Test Message",
width: 650,
height: 99,
multiline: true,
position: "center",
fade: true,
//timeout: 3000,
autohide: false,
clickable: true
});
});
});
});
Opening and then closing a popup using Magnific Popup on a fullPage.js site seems to stop the autoScrolling: false, option working.
So once the pop up closes you can no longer scroll manually up and down the site. You can use the menu anchors to snap to sections but not scroll. Its normal again once refreshed but will happen again after opening a popup.
Any ideas why this happens and how to resolve it?
Magnific Popup
https://github.com/dimsemenov/Magnific-Popup
fullPage.js https://github.com/alvarotrigo/fullPage.js/
fullpage code:
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['section1','section2'],
navigation: false,
scrollOverflow:false,
showActiveTooltip:true,
slidesNavigation: false,
menu:'.menu',
fixedElements: '#header, #footer',
paddingTop:'140px',
autoScrolling: false,
scrollOverflow: false
});
</script>
Magnific Popup code
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('.media').magnificPopup({
removalDelay: 500, //delay removal by X to allow out-animation
gallery:{enabled:true},
image:{titleSrc: 'title'},
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: true,
midClick: true
});
});
//]]>
</script>
MagnificPopup HTML
<img src="image.png" width="100%">
Add the plugin's initialization inside the afterRender callback as per fullPage.js FAQs:
My other plugins don't work when using fullPage.js
Short answer: initialize them in the afterRender callback of fullPage.js.
Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as "dynamically added content" and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.
Like this:
$(document).ready(function () {
$('#fullpage').fullpage({
anchors: ['section1', 'section2'],
navigation: false,
scrollOverflow: false,
showActiveTooltip: true,
slidesNavigation: false,
menu: '.menu',
fixedElements: '#header, #footer',
paddingTop: '140px',
autoScrolling: false,
scrollOverflow: false,
afterRender: function () {
$('.media').magnificPopup({
removalDelay: 500, //delay removal by X to allow out-animation
gallery: {
enabled: true
},
image: {
titleSrc: 'title'
},
callbacks: {
beforeOpen: function () {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: true,
midClick: true
});
}
});
});
I have a carousel in a hidden box. The div gets shown onclick which initializes the plugin which works.
Only problem is when i close the box then open it again it initialiazes the plugin again which gives me two carousels. Is there a way to kill the carousel when i close the div ?
// show hide dropdowns
$("#category").click(function(e){
e.preventDefault();
$('.style-dropdown, .brand-dropdown').hide();
$(".category-dropdown").fadeToggle();
$(this).toggleClass("active");
$('a#style, a#brand').removeClass("active");
$("#category-slider").flexisel({
visibleItems: 6,
animationSpeed: 1000,
autoPlay: true,
autoPlaySpeed: 6000,
pauseOnHover: true,
enableResponsiveBreakpoints: true,
responsiveBreakpoints: {
portrait: {
changePoint:480,
visibleItems: 1
},
landscape: {
changePoint:640,
visibleItems: 2
},
tablet: {
changePoint:768,
visibleItems: 3
}
}
});
});
The flexisel plugin doesn't seem to have a destroy() method like for example the jCarousel plugin does. So it is probably not possible to let the carousel kill itself.
But instead of initializing a new carousel on every opening click, why don't you just hide the carousel on closing and showing the same carousel again on opening? Maybe calling the method initializeItems() again (this is called by init() method).
With your updated code I can see that you are calling the flexisel() method on every click event. You should make sure to call it only once. Try something like this:
if (!carousel) {
var carousel = $("#category-slider").flexisel({
...
});
}
Separation of concerns.
Move the initialization method out of the .click() function. It should be initialized once on window load (according to the documentation), that's all. Showing and hiding the container that it's in is all that's necessary. If the slider is not in the box, target that element during your click event as well.
$("#category").click(function(e){
e.preventDefault();
$('.style-dropdown, .brand-dropdown').hide();
$(".category-dropdown").fadeToggle();
$(this).toggleClass("active");
$('a#style, a#brand').removeClass("active");
});
$(window).load(function() {
$("#category-slider").flexisel({
visibleItems: 6,
animationSpeed: 1000,
autoPlay: true,
autoPlaySpeed: 6000,
pauseOnHover: true,
enableResponsiveBreakpoints: true,
responsiveBreakpoints: {
portrait: {
changePoint:480,
visibleItems: 1
},
landscape: {
changePoint:640,
visibleItems: 2
},
tablet: {
changePoint:768,
visibleItems: 3
}
}
});
)};
EDIT: To clarify, you can call $("#category-slider").hide(); or toggle some class that will hide show it as well in your click method.
I would like to use smoothdivscroll (http://smoothdivscroll.com/index.html) for a scrolling block of images which users can open using the http://sachinchoolur.github.io/lightGallery/index.html lightbox. Unfortunately these scripts do not function when using the same selector.
<script type="text/javascript">
if (Modernizr.touch) {
$(".scroll-banner").smoothDivScroll({
hotSpotScrolling: false,
touchScrolling: true,
manualContinuousScrolling: true,
mousewheelScrolling: false
});
} else {
$(".scroll-banner").smoothDivScroll({
mousewheelScrolling: "horizontal",
mousewheelScrollingStep: -1,
easingAfterMouseWheelScrollingFunction: "easeOutCirc",
manualContinuousScrolling: true,
autoScrollingMode: "onStart",
scrollingHotSpotLeftClass: "prev",
scrollingHotSpotLeftVisibleClass: "prevVisible",
scrollingHotSpotRightClass: "next",
scrollingHotSpotRightVisibleClass: "nextVisible",
});
}
$(function() {
$(".scroll-banner").lightGallery({
loop:true,
auto:false,
pause:1000,
counter:true,
vimeoColor: "000000"
});
});
</script>
How do I get two plugins to use the same selector?
is it possible to use it this way:
$(document).ready(function() {
var scrollbanner = $(".scroll-banner");
scrollbanner.smoothDivScroll({
mousewheelScrolling: "horizontal",
mousewheelScrollingStep: -1,
easingAfterMouseWheelScrollingFunction: "easeOutCirc",
manualContinuousScrolling: true,
autoScrollingMode: "onStart",
scrollingHotSpotLeftClass: "prev",
scrollingHotSpotLeftVisibleClass: "prevVisible",
scrollingHotSpotRightClass: "next",
scrollingHotSpotRightVisibleClass: "nextVisible",
});
scrollbanner.lightGallery({
loop:true,
auto:false,
pause:1000,
counter:true,
vimeoColor: "000000"
});
});
In your code one of the functions is called when DOM is ready and the other is not. Does the behaviour/error change when changing the order of execution for adding the functionality to the divs?
I've HTML tag like this:
<div id="user-detail"></div>
That's for jQuery.dialog container. And the dialog script...
$('#user-detail').dialog({
autoOpen: false,
width: 700,
show: {
effect: 'fade',
duration: 500
},
hide: {
effect: 'slide',
duration: 500
}
});
When I call a function to show it, I adding .attr() to give the tag new attribute title.
function user_detail(id){
var output = call_ajax('/customer/ajax_get_detail', 'id=' + id);
$('#user-detail').attr('title', 'User Detail')
.dialog('close')
.html(output)
.dialog('open');
}
and blah.... the .attr() not work. What is the problem??
You can hack it like that:
$("span.ui-dialog-title").text('User Detail');
If User Detail string is common for all,Do not mess up.
use
<div id="user-detail" title="User Details"></div>
Your script is working fine here http://jsfiddle.net/yeyene/GnpQ8/3/
Make sure your variable output has data.
$(document).ready(function(){
$('#user-detail').dialog({
autoOpen: false,
width: 700,
show: {
effect: 'fade',
duration: 500
},
hide: {
effect: 'slide',
duration: 500
}
});
$('#user-detail').attr('title', 'User Detail')
.dialog('close')
.html('HI, I am a dialog.')
.dialog('open');
});