Develop Reference

using css class in js to redirect after certain number of clicks

I'm trying to expand on previous js code you all helped me out with in the past. The code creates a slideshow of cars and their pricing on a webpage, pulling the data from a mysql db. I had it working where it would redirect to a new page after a minute of time, but now I want the redirect to happen when the total number of plays equals the number of slides * 2. I am not experienced with js and any help would be great...
Here is the code that creates slideshow... (jscript.js)
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 1280;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl"></span>')
.append('<span class="control" id="rightControl"></span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
}, function() {
// if last slide then move the pointer to 1st slide
if(currentPosition == numberOfSlides-1) {
currentPosition = -1;
}
});
});
window.setInterval(function() {
$('#rightControl.control').click();
}, 3000);
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{$('#rightControl').show() }
}
});
Im thinking the code to redirect would be something like... (nextpage.js)
$(document).ready(function(){
var currentPosition = 0;
var slides = $('.slide');
var numberOfSlides = slides.length;
var clicks = $('.control');
var slidesPlayed = clicks.length;
if(numberOfSlides == (slidesPlayed * 2)){
window.location.href = "https://www.cars.com";
}
});
Any help would be greatly appreciated.
Thank you!

Freshly tested:
$(document).ready(function(){
var slidesPlayed = 0;
var whatever = 5; //that would be the total slides * 2 if I understand what you want, but let's say it's 5 for this example
$('#thetrigger').on("click", function() {
slidesPlayed++;
console.log(slidesPlayed);
if(slidesPlayed >= whatever){
window.location.href = "https://www.cars.com";
}
});
});
If you click #trigger whatever times, you get redirected.

detect a position of an article, and activate the menu with current class

I am making a website in two column, on the left is the menu, on the right is the content.Here is a full preview of the website When you click a link, the content align itself on the right.I search for a way to reverse process :
when you scroll on the right, the article you are reading is detect by jquery and it activate the link on the left. How could I achieve that ?
$('.expander').click(function(e) {
e.preventDefault();
$('.expander ').removeClass('current');
$(this).addClass('current');
var container = $(this).parents('.menu-content').attr('data-id');
$desc = $(this).parents('.titre-soustitre');
console.log("click");
$("#scrollingaside").customScrollbar("scrollByY", $desc.offset().top - ($(window).width() / 100 * 3.6));
$("#scrollingontheright").customScrollbar("scrollByY", $("#" + container).offset().top - ($(window).width() / 100 * 7.2));
console.log("");
});
$('.article').click(function(e) {
var idproj = $(this).find('span:first').attr('id');
$('.menu-content[data-id="' + idproj + '"]').find('.expander').trigger('click');
});
EDIT : A test that doesn't work yet
function checkActiveSection()
{
var fromTop = jQuery(window).scrollTop() ;
var idproj = $(this).find('span:first').attr('id');
jQuery('#scrollingontheright .article').each(function(){
var sectionOffset = jQuery(this).offset() ;
if ( sectionOffset.top <= fromTop )
{
jQuery('.menu-content[data-id="'+idproj + '"]').addClass('current') ;
}
}) ;
}

Jquery not recognize on click function second time

I really need help.
Here's what I'm trying to do: I wanna create 3 div elements which are flying from top to bottom of div (#lang_flying_objects) and when i click "the right one" (by Id), I need to create three more. When I create them I assign them all class "snowflakes".
But I am only able to click on the first group and my onclick function recognize the right id, but when other group is created it won't trigger the onclick function.
PLEASE HELP ME.
Here is the code I'm using:
<script>
function fallingStuff() {
var $snowflakes = $(),
createFallingStuff = function () {
var $snowflake = $('<div class="snowflakes" id="first"></div>');
$snowflake.css({
'left': (Math.random() * ($('#lang_flying_objects').width()/3 - offset)) + 'px',
'top': (-(20 + offset)) + 'px'
});
// add this snowflake to the set of snowflakes
$snowflakes = $snowflakes.add($snowflake);
var $snowflake2 = $('<div class="snowflakes" id="second" ></div>');
$snowflake2.css({
'left': (Math.random() * ($('#lang_flying_objects').width()/3 - offset) + $('#lang_flying_objects').width()/3) + 'px',
'top': (-(20 + offset)) + 'px'
});
// add this snowflake to the set of snowflakes
$snowflakes = $snowflakes.add($snowflake2);
var $snowflake3 = $('<div class="snowflakes" id="third"></div>');
$snowflake3.css({
'left': (Math.random() * ($('#lang_flying_objects').width()/3 - offset) + 2*$('#lang_flying_objects').width()/3) + 'px',
'top': (-(20 + offset)) + 'px'
});
// add this snowflake to the set of snowflakes
$snowflakes = $snowflakes.add($snowflake3);
$('#falling_zone').prepend($snowflakes);
},
runFalling = function() {
$snowflakes.each(function() {
var singleAnimation = function($flake) {
$flake.animate({
top: "500px",
opacity : "0"
}, 10000);
};
singleAnimation($(this));
});
};
createFallingStuff();
runFalling();
}
fallingStuff();
</script>
And here is my onclick function:
<script>
$('.snowflakes').on('click', function() {
var idInputed = $(this).attr('id');
if(idInputed == "first") //for example
{
fallingStuff();
}
});
</script>
Why it won't recognize the onclick function for second group of created divs?

Since the elements are created dynamically, you should use event delegation:
$(document).on('click', '.snowflakes', function() {
var idInputed = $(this).attr('id');
if(idInputed == "first") {
fallingStuff();
}
});

JavaScript Onclick Dropdown Menu not working

I am trying to make an onclick dropdown menu for a website. I want my .sublink elements to slide down when I click on the .dropdown element and then for the .sublink to slide back up when I click on anywhere else on the page.
The menu drops down, but it does not slide back up when I click somewhere else on the website.
Following is the code that I currently have for the menu. Can someone please help me on this? Thank you!
$(function() {
$('.dropdown').click(function() {
$('.sublinks').stop(false, true).hide();
var submenu = $(this).parent().next();
submenu.css({
position: 'absolute',
top: $(this).offset().top + $(this).height() + 'px',
left: $(this).offset().left + 'px',
zIndex: 1000
});
submenu.stop().slideDown(300);
//click anywhere outside the menu
$(document).click(function() {
var $el = $(this);
$el.not('.dropdown') && $el.slideUp(300);
});
});
});

Try to use blur event:
$('.dropdown').blur(function () {
var $submenu = (...); // <- get submenu selector here
$submenu.slideUp();
});

In your code, which is for click anywhere in document, this will point to a document, not to an actual element where event happened. You can modify your code like below (use e.target instead of this):
$(function() {
$('.dropdown').click(function() {
$('.sublinks').stop(false, true).hide();
var submenu = $(this).parent().next();
submenu.css({
position: 'absolute',
top: $(this).offset().top + $(this).height() + 'px',
left: $(this).offset().left + 'px',
zIndex: 1000
});
submenu.stop().slideDown(300);
});
//click anywhere outside the menu
$(document).click(function(e) {
var $el = $(e.target);
if(!$el.hasClass('.dropdown') && $el.closest(".dropdown").length == 0 && !$el.hasClass('.sublinks') && $el.closest(".sublinks").length == 0)
$('.sublinks:visible').slideUp(300);
});
});
See also $el.closest(".dropdown").length == 0 it is to ensure that click happens not in child element of .dropdown
Here is a demo for it. Click in different locations and check console: http://jsfiddle.net/2ryWF/. You will find that this always points to document

Looks like your hook for click anywhere is inside the dropdown click hook,
try something like this(not tested);
$(function() {
//click on menu(dropdown div)
$('.dropdown').click(function() {
$('.sublinks').stop(false, true).hide();
var submenu = $(this).parent().next();
submenu.css({
position: 'absolute',
top: $(this).offset().top + $(this).height() + 'px',
left: $(this).offset().left + 'px',
zIndex: 1000
});
submenu.stop().slideDown(300);
});
//click anywhere in document
$(document).click(function() {
var $el = $(this);
$el.not('.dropdown') && $el.slideUp(300);
});
});

jQuery change on click even to on load event

I've got the following code which I've put together, and I need to change it from the onclick event to onload, so it loads the modal window automatically when the page is loaded. However, for the life of me I can't work out how do it, i've tried many a permutation it just doesn't seem to work!
$(document).ready(function() {
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel');
var popURL = $(this).attr('href');
var query = popURL.split('?');
var dim = query[1].split('&');
var popWidth = dim[0].split('=')[1];
$('#' + popID)
.fadeIn()
.css({ 'width': Number( popWidth ) })
.prepend('<img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" />');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
});
return false;
});
});
This loads it at the moment:
Popup
Any help will be really appreciated, thanks

If you look up the documentation for the plugin you can move the logic for the popup into it's own function (called popOpen() in the example) and call that on load like this:
$('a.poplight[href=#?w=200]').popOpen();

Try:
$('a.poplight[href^=#]').trigger("click");
Or:
$('a.poplight[href^=#]').click();
These should be in your DOM Ready.

If I understood you correctly, you could try this:
$(document).ready(function() {
$this = $('a.poplight[href^=#]');
var popID = $this.attr('rel');
....