Develop Reference

Trying to get an alert when I scroll the window using jquery

I have a script.js file that has these functions
$(function(){
$(window).scroll(function (){
alert('you just scrolled!');
});
});
/* ================================
Preloader
=================================*/
$(window).on('load', function () { //wait untill the website is fully loaded
$('#status').fadeOut();
$('#preloader').delay(350).fadeOut('slow');
});
$(function () {
$('#s-stages').owlCarousel({
items: 2,
autoplay: true,
autoplayHoverPause: true,
smartSpeed: 700,
loop: true,
nav: true,
dots: false,
});
});
$(function(){
$('#stages-tabs').responsiveTabs({
animation:'slide'
});
});
all of the above are working except
$(function(){
$(window).scroll(function (){
alert('you just scrolled!');
});
});
the above function can work if it is in the index.html file

Many thanks to all replies. I found the solution. the javascript file wasn't refreshing any updates. the solution is to put ?view=3 in the
and it will reflect any changes

OWL Carousel 2 adding class to item

Im working on a slider that contains two synced owl-sliders.
sync1 is main slider and sync2 is thumbnails slider. When I click on one of elements of second slider sync1 goes to proper slide.
Now goes my issue:
When user clicks on any of thumbnail a green border should appear on clicked elemment and should stay there until another element is clicked.
I've tried to use jquery .addClass and .css but nothing happens.
I think that I should add div with "position: absolute" that holds up to clicked element, but I don't know how to do it. Please help! :)
Here is my js
$(document).ready(function() {
var sync1 = $("#sync1");
var sync2 = $("#sync2");
var index2=0;
var flag=true;
var slides = sync1.owlCarousel({
items: 1,
loop: true,
autoplay: true,
autoplayTimeout:5000,
autoplayHoverPause:true,
nav: false,
mousedrag: false,
touchdrag: false,
pulldrag: false
});
$(document).on('click', '.prevbutton, .nextbutton',function() {
sync1.trigger('stop.owl.autoplay');
});
sync1.on('changed.owl.carousel', function(event) {
var index1=event.item.index;
var index11 = index1-2;
//console.log("index1", index1)
//console.log("index11", index11);
sync2.trigger("to.owl.carousel", [index11, 100, true]);
});
$('.nextbutton').click(function() {
//console.log(sync1);
sync1.trigger('next.owl.carousel');
});
$('.prevbutton').click(function() {
// With optional speed parameter
// Parameters has to be in square bracket '[]'
//console.log(sync1);
sync1.trigger('prev.owl.carousel', [500]);
});
/* thumbnails*/
var thumbnails= sync2.owlCarousel({
items: 6,
loop: true,
autoplay: false,
mousedrag: false,
touchdrag: false,
pulldrag: false,
addClassActive: true
});
/*buttons*/
$('.nextbutton2').click(function() {
sync2.trigger('next.owl.carousel');
});
$('.prevbutton2').click(function() {
// With optional speed parameter
// Parameters has to be in square bracket '[]'
sync2.trigger('prev.owl.carousel', [500]);
});
sync2.trigger("to.owl.carousel", [index2, 100, true]);
sync2.on('changed.owl.carousel', function(event) {
index2=event.item.index;
//console.log("index2", index2);
index22=index2-1;
// sync1.trigger("to.owl.carousel", [index22, 100, true]);
});
// console.log("index2", index2);
sync2.on('click', '.item', function(e) {
e.preventDefault();
sync1.trigger('to.owl.carousel', [$(e.target).parents('.owl-item').index()-6, 300, true]);
// console.log("clicked index", $(e.target).parents('.owl-item').index())
});
$('#stopcontainer').on('mouseover', function(){
if ($('#stopcontainer:hover').length != 0) {
flag=true;
console.log("flaga", flag);
}
if (flag==true) {
sync1.trigger('stop.owl.autoplay');
console.log("mousein");
}
}).on('mouseleave', function() {
setTimeout(
function()
{
if ($('#stopcontainer:hover').length == 0) {
flag=false;
console.log("flaga", flag);
}
if(flag==false){
console.log('mouse leave');
sync1.trigger('play.owl.autoplay');
}
}, 5000)}
);
});

Here is the solution:
sync2.on('click', '.owl-item', function(e) {
e.preventDefault();
$('.some-class').removeClass('active');
$(this).find('.some-class:first').addClass('active');
});
There is empty div with "some-class" inside carousel item, and when you click on this element class "active" is added

Disable mouseover until animation complete

I use jquery caroufredsel to create a slider, and then attach mouseover event to the items so that when mouse over the item it will center the selected one. here is the script
$(document).ready(function(){
$('#carousel-popular').carouFredSel({
width: '100%',
items: 5,
scroll: 1,
auto: false,
prev: '#prev-popular',
next: '#next-popular',
pagination: '#pager'
});
$('#carousel-popular img').off('mouseover').on('mouseover', function(){
var self = this;
$(this).attr('data-url', '<?php echo site_url('video/video_display'); ?>/'+$(this).data('vid'));
$('#carousel-popular').trigger('slideTo', [$(this), -2]);
$('#home-sidebar').load('<?php echo site_url('home/get_imdb');?>/'+$(this).data('vid'), function(){
$('#carousel-popular img').removeClass('selected');
$(self).addClass('selected');
});
// $('.caroufredsel_wrapper').css({
// "background" : "url(<?php echo base_url(); ?>images/shadow.png) center 95% no-repeat"
// });
});
$('#carousel-popular img').on('click', function(){
if($(this).hasClass('selected')){
window.location = $(this).data('url');
}
})
var sbHeight = $('body').height() - $('#header').height();
$('#home-sidebar').css({
"height": sbHeight+'px'
});
setTimeout(function(){
$('#carousel-popular img').eq(0).trigger('mouseover');
}, 500);
});
The problem is when an item is sliding to center another images catch the mouseover because the mouse pointer is still on the track. How to disable this mouseover event untill the selected image is centered?
fiddle

I'm not entirely sure of the issue, but you could try this:
$('#carousel a').on('mouseenter', function(){
$('#carousel').trigger('slideTo', [$(this), -2]);
});
That triggers the animation when the mouse moves over the element

pretty unclear question to me, is this what you want: http://jsfiddle.net/8W25g/2/
$('#carousel').carouFredSel({
items: 4,
scroll: 1,
auto: false,
prev: '#prev-popular',
next: '#next-popular',
pagination: '#pager'
});
var mouseoverFunc=function(){
$('#carousel a').unbind('mouseover');
$('#carousel').trigger('slideTo', [$(this), -2]);
};
var mouseoutFunc=function(){
setTimeout(function(){
$('#carousel a').bind('mouseover',mouseoverFunc);
},400);
};
$('#carousel a').bind('mouseover', mouseoverFunc);
$('#carousel a').bind('mouseout', mouseoutFunc);

Slide out division zooming

$(function () {
$("#clickme").click(function () {
if($(this).parent().hasClass("popped")){
$(this).parent().animate({right:'-280px'}, {queue: false, duration: 500}).removeClass("popped");
}else {
$(this).parent().animate({right: "0px" }, {queue: false, duration: 500}).addClass("popped");}
});
$(document).on('click',function(e){
if($('#slideout').hasClass("popped")){
$('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped");
}
});
$('#slideout').on('click',function(e){
e.stopPropagation();
});
});
<div id="slideout">
<div id="slidecontent">
Yar, there be dragonns herre!
</div>
<div id="clickme">
</div>
</div>
Its for slide out a div. But when i use this scripts, on zooming the website- the horizontal scroller not displayed. How can it solve?
Thanks.

You can try something like this:-
$(document).on('click',function(e){
if($('#slideout').hasClass("popped")){
$('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped");
}
});
JS FIDDLE

$(document).on('click',function(e){ /* Hide on Outside Click*/
if($('#slideout').hasClass("popped")){
$('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped");
}
});
$('#slideout').on('click',function(e){ /*Ignore 'Hide on Outside Click' on clicking #slideout element*/
e.stopPropagation();
});
This code should work
Your final code will be :
$(function () {
$("#clickme").click(function () {
if($(this).parent().hasClass("popped")){
$(this).parent().animate({right:'-280px'}, {queue: false, duration: 500}).removeClass("popped");
}else {
$(this).parent().animate({right: "0px" }, {queue: false, duration: 500}).addClass("popped");}
});
$(document).on('click',function(e){
if($('#slideout').hasClass("popped")){
$('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped");
}
});
$('#slideout').on('click',function(e){
e.stopPropagation();
});
});
JS FIDDLE

jquery fade issue

I'm trying to implement an image slider that displays some text on hover. It's working fine except in IE8 where there is a flash of text everytime the slider changes images.
Here's the current js code:
<script type="text/javascript">
$(document).ready(function() {
/* Hide descriptions. */
$('.description').fadeTo(0, 0);
/* Show descriptions on hover. */
$('.description').hover(
function() { $(this).fadeTo(400, 1); },
function() { $(this).fadeTo(400, 0); }
);
$('#slider').after('<div id="pager">').cycle({
fx: 'fade',
timeout: 5000,
speed: 700,
pager: '#pager',
pause: 1
})
});
</script>
A link to a live example here
A Link to jsFiddle

It seems to work if you force the description to hide during the transition:
$(document).ready(function() {
/* Hide descriptions. */
$('.description').fadeTo(0, 0);
/* Show descriptions on hover. */
$('.description').hover(
function() { $(this).fadeTo(400, 1); },
function() { $(this).fadeTo(400, 0); }
);
$('#slider').after('<div id="pager">').cycle({
fx: 'fade',
timeout: 5000,
speed: 700,
pager: '#pager',
pause: 1,
cleartypeNoBg: true,
before: function() { $('.description').css('display', 'none'); },
after: function() { $('.description').css('display', 'block'); }
});
});