We Keep Coding

How to capture a new group of selector after loading a div with .load() of Jquery

Currently, my website http://benoitmignault.ca/english/english.html works well on Chrome or Firefox, but on IE the fetch functions doesn't work...
I started to understand Jquery because the .load () function works well on IE because the fetch function doesn't work...
I managed to display each of my links in the "header" section in the div_center section.
When I click on the pictures section, my 5 links are displayed.
When I come to click on one of the 5 pictures it does not display the content in the section «div_photo», but rather the content of the page html is displayed as a new page ...
const listeSections = document.querySelectorAll('.header div a');
function affichageSection(){
$(listeSections).each(function(){
$(this).on('click', function(evt){
evt.preventDefault();
if (evt.target.href === "http://localhost:8080/english/english.html"){
window.location.assign("/english/english.html");
} else if (evt.target.href === "http://localhost:8080/index.html"){
window.location.assign("/index.html");
} else if (evt.target.href === "http://localhost:8080/pageAccueuil/partie_photos_EN.html"){
$(div_Center).load(evt.target.href);
affichageSectionPhoto();
} else {
$(div_Center).load(evt.target.href);
$(div_Photo).append("");
}
});
});
}
This is my function that does not work well and I can not understand where my mistake is, it's been days that I'm going around in circles ...
function affichageSectionPhoto(){
var allListElements = $(".unePassionPhoto a");
$(div_Center).find(allListElements).each(function(){
$(this).on('click', function(e){
e.preventDefault();
$(div_Photo).load(e.target.href);
}
});
});
}
Here is the portion of my code from my index.html page:
<div class="middle">
<div class="header">
<div>Accueil
</div>
<div>Projets
</div>
<div>Photos
</div>
<div>À propos
</div>
<div>English</div>
</div>
<div class="center"></div>
<div class="photo"></div>
</div>
I tried to find the information on https://learn.jquery.com/ but without success or to use the "console.log ()" function
thank you in advance
This is my console.log(div_Center)
My console log

I can't get the animation speed to work

I'm trying to make a menu (with buttons) that open links.
when you hover on the buttons, a slideDown reveals more information on that link.
I've gotten all those features to technically work, however i can't get the animation speed to go any slower than instantly.
I'm really new to javascript and Jquery, and it took me 2-3 days to get the javascript and CSS to do what i have so far... and yeah it's probably bloated... but i'm still proud i got this done so far :D
PS, I know most menus are made w/ul's but I really like the way the buttons look and detested trying to put the list together. last time i tried used a seperate ul for the information and it kept styling the second list like the first because it was inside it... so annoying. I also tried vertical-link list w/CSS but still think flat 'buttons' are so boring. i really like the 3D esk of the actual html
HTML:
<div class="mainmenu">
<div id="homemenu">
<button id="home" class="mmbutton active">Home</button>
<div id="homesub" class="sub active">-just a bit about this page</div>
</div>
<div id="photosmenu">
<button id="photos" class="mmbutton">Photos</button>
<div id="photossub" class="sub inactive">-just a bit about this page
</div>
</div>
</div>
javascript/jquery:
$(function(){
var mmbutton = $('.mmbutton');
var start = "http://";
var address = "[my web address"; //add "http:
var about = "[web address]/aboutme.html";
var id = 0;
var rel = 0;
var mmsub = 0;
//<click link buttons:
$(mmbutton).click(function(){
var id = $(this).attr('id');
if (id === "home") {
location.replace(start+address);
}else if (id === "about") {
window.alert("I'm sorry I don't have this page set up yet. Thank you for visiting my page!");
//add additional buttons here under 'else if' unless its a subdomain
}else {
location.replace(start+id+'.'+address);//goes to any subdomain by id
}});
//>detect hover
$(mmbutton).hover(function(){
id = $(this).attr('id');
rel = '#'+id+'sub';
mmsub = '#'+id+'menu';
console.log('mouseenter'+rel);
$(rel).removeClass('inactive');
$(rel).stop().slideDown(500000);
}, function(){
console.log('mouseleave'+rel);
$(rel).addClass('inactive');
if ( $(this).hasClass('active')) {
$(rel).removeClass('inactive');
console.log('this is active');
}if ($(rel).hasClass('inactive')){
$(rel).stop().slideUp(500000);
}});});
relevante CSS:
.inactive {
display: none;
}
.sub {
transition-duration: 1s;
}

You can do it setting all that info divs to display:none and use slideToggle() function for that. Considering you want to keep the subdiv's opened when you're over them, one option is create a span element that include the button and the subdiv, and apply the hover to that span. So...
HTML:
<div class="mainmenu">
<div id="homemenu">
<span class="subcontainer">
<button id="home" class="mmbutton active">Home</button>
<div id="homesub" class="sub">-just a bit about this page</div>
</span>
</div>
<div id="photosmenu">
<span class="subcontainer">
<button id="photos" class="mmbutton">Photos</button>
<div id="photossub" class="sub">-just a bit about this page</div>
</span>
</div>
</div>
CSS:
.sub {
display: none;
/*transition-duration: 1s; IMPORTANT: REMOVE THIS!!*/
}
JQUERY:
$('span.subcontainer').hover(function() {
$(this).find('div.sub').slideToggle('slow');
});
IMPORTANT: Check that to make it work you have to remove the transition style you've created for .sub divs (it interfeers with the jquery function).
NOTE: I don't use the div.homemenu or div.photosmenu as the containers for the hover because div's normally have some styles pre-applied by default and can interfeer with the desired behaviour (for example, they normally have width=100% so the hover applies even when you're outside of the button or subdiv in the same line). span is normally more innocuous to use it just as a wrapper.
I hope it helps

Oh! i got it. i was trying to do too much (show off.../ using what im learning).
I removed the line that added and removed the class 'inactive' and just toggled the SlideUp and slideDown when i wanted it too. now i can adjust the animation speed:
(HTML remains unchanged)
CSS: removed the "transition-duration: 1s;"
JavaScript:
$(function(){
var mmbutton = $('.mmbutton');//any/all buttons
var activebut= 0; //detect button classes
var mmdiv = $("div[id$='menu']");//detect button sub info
var start = "http://";
var address = "[address]/index.html"; //add "http://" + [blog or games] + address
var about = "http://[address]/aboutme.html";
var id = 0;
var sub = 0;
var slidespeed= 450; //slideUP/slideDown animation speed //added var for speed
//<click link buttons: (unchanged)
$(mmbutton).click(function(){
id = $(this).attr('id');
if (id === "home") {
location.replace(start+address);
}else if (id === "about") {
location.replace(start+'[address]/aboutme/index.html')
//add additional buttons here under 'else if' unless its a subdomain
}else {
location.replace(start+id+'.'+address);//goes to any subdomain by id
}
});
//<hover display:
//<detect mouse ON button
$(mmbutton).hover(function(){
id = $(this).attr('id');
sub = '#'+id+'sub';
activebut= $(this);
if ( $(activebut).hasClass('active')) {
}else {
$(sub).stop().slideDown(slidespeed);
}
});
//<detect mouse off button AND div
$(mmdiv).mouseleave(function(){
if ( $(activebut).hasClass('active')) {
}else {
$(sub).stop().slideUp(slidespeed);
}
});
});

Show only 10 items using jquery infinite scroll within the div

Hi I found lots of examples related to this question, but so far the examples that I see they don't match my needs.On my div at the moment I load all the list content retrieved from my function,My goal is I want to be able to only show 6 items and keep on appending the other 6 until the list is exhausted using the infinite scroll in jQuery.
This is how my list look within the div.
<div class="listOfAnything">
<div class="all">apple</div>
<div class="all">Banana</div>
<div class="all">Guava</div>
<div class="all">Pear</div>
<div class="all">mango</div>
<div class="all">Grapes</div>
<div class="all">Avocado</div>
<div class="all">Orange</div>
<div class="all">Lemon</div>
<div class="all">Nartjie</div>
<div class="all">Granadilla</div>
<div class="all">pawpaw</div>
<div class="all">Ginger</div>
<div class="all">Watermelon</div>
<div class="all">potato</div>
<div class="all">Sweet Potato</div>
<div class="all">Peach</div>
</div>
I've tried to follow the tutorials on http://scrollmagic.io/examples/advanced/infinite_scrolling.html but I had no luck because i got stuck here
function addBoxes (amount) {
for (i=1; i<=amount; i++) {
var randomColor = '#'+('00000'+ (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
$("<div></div>")
.addClass("box1")
.css("background-color", randomColor)
.appendTo(".dynamicContent #content");
}
// "loading" done -> revert to normal state
scene.update(); // make sure the scene gets the new start position
$("#loader").removeClass("active");
}
// add some boxes to start with.
addBoxes(18);
Because I already have the content on my div.

Added the scroll function
function addBoxes (amount) {
for (i=1; i<=amount; i++) {
var randomColor = '#'+('00000'+ (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
$("<div></div>")
.addClass("box1")
.css("background-color", randomColor)
.appendTo(".dynamicContent #content");
}
// "loading" done -> revert to normal state
scene.update(); // make sure the scene gets the new start position
$("#loader").removeClass("active");
}
// add some boxes to start with.
addBoxes(6);
// do things on mousescroll
$(window).bind('mousewheel DOMMouseScroll', function(event)
{
if (event.originalEvent.wheelDelta < 0 || event.originalEvent.detail > 0) {
setTimeout(function(){
addBoxes(6);
}, 1000);
}
});

Jquery slide down only if not already visible

I have a simple problem using Jquery. I want to display detailed information under menu headings, but the interface isn't so smooth. After a few hours of trying some things out, I've come back to the beginning to see if there is a simple answer
Look at this example
Two problems:
If you mouse over several categories at once to get to the category you want, the animation still runs through all of the other animations instead of stopping the other ones and only animating the one that the mouse is currently hovered over.
If you mouse over a category that is already open, it still runs the animation, but I only want the animation to run if the content is not already visible. Is there a simple if statement that can do this?

$('.content').hide();
var $elms = $('.fruit, .vegetable, .dairy');
$elms.hover(function() {
var $content = $(this).next('.content');
$content.stop(1, 1).slideToggle(400);
});
http://jsfiddle.net/elclanrs/GBkMB/1/
Edit:
To prevent the content from sliding back up you can nest the divs like so:
<div class="fruit">fruit
<div class="content fruit_types">apple<br/>bannana<br/>orange</div>
</div>
<div class="vegetable">vegetable
<div class="content vegetable_types">celery<br/>lettuce<br/>cucumber</div>
</div>
<div class="dairy">dairy
<div class="content dairy_types">milk<br/>cheese<br/>butter</div>
</div>
jQ:
$('.content').hide();
var $elms = $('.fruit, .vegetable, .dairy');
$elms.hover(function() {
var $content = $(this).children('.content'); //<-`children()` not `next()`
$content.stop(1,1).slideToggle(400);
});
Example: http://jsfiddle.net/elclanrs/GBkMB/5/

I've edited your fiddle now to look like this. Should give you an idea of what you want to move forward:
http://jsfiddle.net/GBkMB/4/
$("body").on("hover", ".fruit, .vegetable, .dairy", function(event){
if(event.relatedTarget != $(this).next(".content")[0]){
if(event.type == "mouseenter"){
$('.content').slideUp('slow');
$('.'+$(this).attr("class")+'_types').slideDown('slow');
}else if(event.type == "mouseleave"){
$('.content').slideUp('slow');
}
}
});
$("body").on("mouseleave", ".content", function(event){
if(event.relatedTarget != $(this).prev("div")[0]){
$(this).slideUp('slow');
}
});
or: http://jsfiddle.net/GBkMB/6/ #elclanrs answer ++
$('.content').on("mouseleave", function(event){
if(event.relatedTarget != $(this).prev("div")[0]){
$(this).slideUp('slow');
}
});
var $elms = $('.fruit, .vegetable, .dairy');
$elms.on("hover", function(event) {
var $content = $(this).next('.content');
if(event.relatedTarget != $content[0]){
$content.stop(1,1).slideToggle(400);
}
});

Jquery Expand Collapse all divs on Click

I know this has been asked a thousand times but I'm still having trouble figuring it out. I have a simple according following this tutorial and I'm trying to add an "expand/collapse all" link. I have found a way to expand all but can't figure out how to collapse them. The problem with a slideToggle() solution is if I open one then click the link it will close/open all of them but the one that was previoiusly active.
I set up a jsFiddle here.
Here is an overview of the code:
HTML:
<h2 class="acc_trigger">Div 1</h2>
<div class="acc_container">
<div class="block"> Yay content!</div>
</div>
<h2 class="acc_trigger">Div 2</h2>
<div class="acc_container">
<div class="block">More Content, Score!</div>
</div>
<h2 class="acc_trigger">Div 3</h2>
<div class="acc_container">
<div class="block">Even More Content</div>
</div>
Expand/Collapse All
JS:
jQuery(document).ready(function($) {
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
//On Click
$('.acc_trigger').click(function(){
$('.acc_trigger').removeClass('active').next().slideUp();
//Remove all "active" state and slide up the immediate next container
$(this).toggleClass('active').next().slideDown();
return false; //Prevent the browser jump to the link anchor
});
$('.acc_expand-all').click(function(){
//expand all on click
$('.acc_trigger').addClass('active').next().slideDown();
return false;
});
});

You have to check in your expand/collapse handler to see how many are open, etc., something like this (updated fiddle):
$('.acc_expand-all').click(function(){
var all = $('.acc_trigger'),
active = all.filter('.active');
if (all.length && all.length === active.length) {
// All open; close them
all.removeClass('active').next().slideUp();
}
else {
// At least some are closed, open all
all.not('.active').addClass('active').next().slideDown();
}
return false;
});
Regarding your question in the comments, you can check to see whether you should be in "exclusive" mode or not by checking how many are open and whether the clicked one is open, e.g. (updated fiddle):
$('.acc_trigger').click(function(){
var $this = $(this),
thisActive = $this.hasClass('active'),
active;
// If this one is active, we always just close it.
if (thisActive) {
$this.removeClass('active').next().slideUp();
}
else {
// Is there just one active?
active = $('.acc_trigger.active');
if (active.length === 1) {
// Yes, close it
active.removeClass('active').next().slideUp();
}
// Open this one
$this.addClass('active').next().slideDown();
}
});