We Keep Coding

Fullcalendar - external event on click

I have a problem with fullcalendar script. I cant get attributes of clicked divs.
I need to get id attribute of an external event
this is the div
<div id="1303" class="fc-event" data-color="#9900cc">
<span class="mr-1 badge bg-orange" style="width: 5%; padding-left: 0px;padding-right: 0px;">-26</span>Some text
</div>
this is the code on click
$('#external-events').on('click', '.fc-event', () => {
const element = $(this);
console.log(Object.keys(element));
console.log(Object.values(element));
console.log(Object.entries(element));
})
and this is the result
Screenshot
How can i get attributes of these divs(there are more that 1)? Where is my mistake? if i do element.attr('id') i get 'undefined'
Thanks in advance

Unfold Submenu conditions (jQuery)

I'm stuck with a jQuery issue that I don't manage to solve.
I've created a menu with sub menu elements. I would like to toggle the height of content by clicking in menu items. The thing is when I click on other item, the content collapse. Kind of tricky to explain, I've put two websites doing the job
http://www.polerstuff.com/ -> When you click on 'shop' and then on 'info', the sub menu stays open. The same trick was seen here http://topodesigns.com/
I guess these two websites are using Shopify.
$(document).ready(function() {
$(".button").on("click", function() {
if($(".content").height() == 0) {
$(".content").animate({height: "300px"});
}
else if($(".content").height() == 300) {
$(".content").animate({height: "0px"});
}
});
});
Here is my jsfiddle
-> Thank a lot in advance.

Here's version of your fiddle that uses the data attribute to target divs with desired content, and another data tag containing desired heights to animate (but there are many other ways).
Clicking on the same button toggles it shut, this is achieved by adding an indicative class.
The 'hiding' divs may contain further divs with classes and layout as required.
$(document).ready(function (){
$(".b").on("click", function (){
var $this = $(this),
target = $this.data('target'),
tall = $this.data('tall'),
content = $(".content");
target = $('.'+target).html(); // get the html content of target divs
content.html(target); // insert said content
if (!$this.hasClass('on')) { // if it hasn't been clicked yet..
$(".b").removeClass('on'); // say that none have been clicked
$this.addClass('on'); // say that just this one has been clicked
content.animate({height: tall}, 200); // animate to the height specified in this buttons data attribute
} else {
content.animate({height: "0px"});
$this.removeClass('on');
}
});
});
.content {
background: coral;
width: 100%;
height: 0px;
overflow:hidden;
}
.hiding{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="b" data-target="alpha" data-tall="4em">Button</button>
<button class="b" data-target="bravo" data-tall="7em">Button</button>
<button class="b" data-target="charlie" data-tall="5em">Button</button>
<div class="content">Le contenu</div>
<div class="hiding alpha"> some stuff </div>
<div class="hiding bravo"> other things </div>
<div class="hiding charlie"> bits and pieces </div>

Load a new div into exiting div with load more button

I wanna like that some plugin just one thing must be different there is have 2 links for 2 div i wanna show there example 10 div but with only one button like "Load More" how i can do this ?
html
Click1
Click2
<div id="outer">
<div id="inner">Initial content</div>
</div>
<div style="display:none" id="hidden1">After click event showing hidden 1</div>
<div style="display:none" id="hidden2">After click event showing hidden 2</div>
Js
$(document).ready(function() {
$('.link').click(function()
{
var id = $(this).attr('href');
$('#inner').fadeOut('slow', function() {
$('#inner').html($(id).html());
$('#inner').fadeIn('slow');
})
})
})
CSS
#hideMsg{
text-align:center;
padding-top:10px;
}
http://jsfiddle.net/G5qGs/2/

You can do it something like this.
Create a load more button
Load More
Use javascript like below
var count = 1;
$('#loadmore').click(function() {
$('#inner').fadeOut('slow', function() {
$('#inner').html($("#hidden" + count).html());
$('#inner').fadeIn('slow');
count++;
})
});
Working example
http://jsfiddle.net/G5qGs/25/
P.S : You might want to display "No more content" at the end. that can be achieved using a simple if else condition

How make a popup work

I am trying to develop a popup feature when you click on an Image the image opens up as a popup. Here is the example
http://soumghosh.com/otherProjects/natalierosscms/175-2/
Click on the first image and close it. Then click on the second image. The images are repeating. Any ideas what I am doing wrong? For some reason I am not able to post code here.
JavaScript:
$('.alignnone').click(function(){
$('.overlay').appendTo('body');
$('.overlay').show();
var popImage = $('.projectContainer').show();
var thumbHolder = $(this).parent();
thumbHolder.css('position', 'relative');
$(this).clone().appendTo('.projectContainer');
var cssAtrOne = {
padding:'10px',
width:'110%'
};
popImage.appendTo(thumbHolder).css(cssAtrOne);
});
$('.closeButton').click(function(){
$('.overlay').hide();
$('.projectContainer').hide();
});
HTML:
<!-- clickable image -->
<img src="http://soumghosh.com/otherProjects/natalierosscms/wp-content/uploads/2013/03/T1Main.jpg" alt="T1Main" width="559" height="745" class="alignnone size-full wp-image-181">
<!-- popup -->
<div class="projectContainer" style="padding: 10px; width: 110%; display: block;">
<img class="closeButton" src="/otherProjects/natalierosscms/wp-content/themes/twentyeleven/images/closeButton.png">
</div>

You have this:
$(this).clone().appendTo('.projectContainer');
You're appending the image to the projectContainer without clearing the projectContainer first (So images just continue to build up each time). So what you'll need to do is clear out the previous images, then insert the new one.
But inside projectContainer is your close button, which makes things a wee bit tricker. There are many ways to work around this issue, but a straight-forward solution would be to introduce another <div>, imageContainer inside projectContainer:
HTML:
<div class="projectContainer" style="display: none; padding: 10px; width: 110%;">
<img class="closeButton" src="/otherProjects/natalierosscms/wp-content/themes/twentyeleven/images/closeButton.png">
<div class="imageContainer"></div>
</div>
Then modify your JS:
Change JS:
//REPLACE the contents of imageContainer, not append to it.
//$(this).clone().appendTo('.projectContainer');
$('.projectContainer > .imageContainer').html($(this).clone());
Something to that effect should work.

jquery, find div class name at a certain position while scrolling

A fixed div (fixed_div) stays at the top to display a Google map inside it. Then a big div (big_div) stays beneath it. The big div has inside it many small divs with class small_div. Each small div has an id small_div_n where n=0,1,2,3.. consecutively. The big div is scrolled beneath the fixed div.
HTML:
<div class="fixed_div" >
</div><!-- end of class fixed_div -->
<div class="big_div">
<div class="small_div" id="small_div_0">
</div><!--end of class small_div -->
<div class="small_div" id="small_div_1">
</div><!--end of class small_div -->
<div class="small_div" id="small_div_2">
</div><!--end of class small_div -->
</div><!--end of class big_div -->
css:
.fixed_div {
position:fixed;
height:100px;
}
.big_div {
padding-top:100px;
}
.small_div {
min-height:80px;
}
Small divs have a variable height property.
If I am able to know that a new small_div has reached the lower part of the fixed div , I can find the corresponding id of the small div and can understand which google map is to be shown in the fixed div through an ajax call.
How to sense that a new small_div has reached the lower part of the fixed div?
EDIT: the big div has a min-height property.

<script>
(function() {
var fixed = $('div.fixed_div');
$(window).on('scroll',function() {
var currentFixedDivPosition = fixed.position().top + fixed.height() + $(window).scrollTop();
var temp, whichOne;
$('div.small_div').each(function(i,s) {
var diff = Math.abs($(s).position().top - currentFixedDivPosition);
if(temp) {
if(diff < temp) {
temp = diff;
whichOne = s;
}
}else {
temp = diff;
whichOne = s;
}
});
console.log(temp, $(whichOne).attr('id') + ' was closest');
});
})();
</script>
Here is a fiddle : http://jsfiddle.net/s3JKk/ , I'm not sure I understood correctly what you wanted, but I hope this will at least give you some start. :) Good Luck!

Hope that following code fulfills the purpose,
I have added a code to dynamically append a small DIV element to a big_div element
Then I added an event listener which detects any new entries to big_div
// the system will append a new DIV when the button is clicked
document.getElementById("add").addEventListener("click", function(){
addDiv();
});
// an event listener which listenes to any new added element to big_div
$('#big_div').on('DOMNodeInserted', function(e) {
// here I am getting the id of the last added element
var newdivid = document.getElementById("big_div").lastChild.id;
document.getElementById("div_status").innerHTML = "new small div added, id: " + newdivid;
});
function addDiv() {
var smalldiv = document.createElement("div");
// here I am setting the id of the newly created DIV to any random string
smalldiv.setAttribute("id", Math.random().toString(36).slice(-5));
smalldiv.appendChild(document.createTextNode("small div"));
document.getElementById("big_div").appendChild(smalldiv);
}
.fixed_div {
position:fixed;
height:100px;
}
.big_div {
padding-top:100px;
}
.small_div {
min-height:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fixed_div" >
fixed div
<p id="div_status">No Status</p>
</div><!-- end of class fixed_div -->
<div class="big_div" id="big_div">
<div class="small_div" id="small_div_0">
div 0
</div><!--end of class small_div -->
</div><!--end of class big_div -->
<button type="button" id="add">Add Small DIV</button>