We Keep Coding

jQuery remove only works on the second click after an AJAX call

I have two divs each with a list of links, when a link is clicked an AJAX call is made which appends some JSON data to a separate div. At the same time as the data is appended I want the div with the links where the link that was just clicked to be hidden/removed.
There is a third div with the class "panel-close" that can be clicked which removes the div with data that was just appended and makes the div containing the links reappear again. So everything is back to the original state
The problem I'm having is that once the div containing the data has been removed sometimes the div containing the links does not appear again, sometimes it happens on a second click of the panel close div and sometimes the JSON data does not append again after clicking on a link.
My is the basic set up of my HTML:
<div class="curation-panel">
<div class="curation-contents-list">
<a class="load-article"></a>
</div>
<div class="article-container">
</div>
</div>
<div class="film-panel">
<div class="film-contents-list">
<a class="load-project"></a>
</div>
<div class="project-container">
</div>
</div>
<div class="panel-close">
</div>
I'm a Jquery noob, I've probably taken completely the wrong approach but this is my jquery code:
$(function(){
var element = $('.load-article');
var url = element.data('page') + '.json';
var target = $('.article-container');
$(element).on('click', function(e) {
e.preventDefault();
$.get(url, function(data) {
$('.curation-contents-list').hide();
$(target).append(data);
});
$("body").addClass("load-article-is-open"),
$(this).animate({
scrollTop: 0
}, 300, "easeInOutExpo")
});
}),
$(function(){
var element = $('.load-project');
var url = element.data('page') + '.json';
var target = $('.project-container');
$('.load-project').on('click', function(e) {
e.preventDefault();
$.get(url, function(data) {
$('.film-contents-list').hide();
$(target).append(data);
});
$("body").addClass("load-project-is-open"),
$(this).animate({
scrollTop: 0
}, 300, "easeInOutExpo")
});
}),
$(".panel-close").click(function() {
$("body").removeClass("curation-panel-is-open").removeClass("film-panel-is-open").removeClass("load-article-is-open").removeClass("load-project-is-open"),
$(".curation-panel").animate({
scrollTop: 0
}, 300, "easeInOutExpo"),
$(".film-panel").animate({
scrollTop: 0
}, 300, "easeInOutExpo"),
$('.curation-contents').show();
$('.film-contents-list').show();
$('.article-container').remove();
$('.project-container').remove();
});

You reference an element which you than append the results of the Ajax call to
var target = $('.article-container');
And the problem here is the fact you are removing the elements
$('.article-container').remove();
$('.project-container').remove();
After you remove them, the code that references them can not find them.
I think you want to use empty() and not remove()

JQuery div display, collapse

I am not a jquery specialist but I have managed to make this script working on my website:
<script>
$(document).ready(function() {
$('#open_#div_hidden_1').click(function() {
if ($('#div_hidden_1').is(':hidden')) {
$('#div_hidden_1').show(500);
$('#div_hidden_1').hide(500);
} else {
$('#div_hidden_1').hide(500);
}
});
});
</script>
Basicly it displays and collapses a div (distinguished by id), I have many divs on my wbesite that are displayed this way(its an inline code, for each div separate code) What I would like to do with it is to close all other divs (e.g. from the same class) when I open another one. Could please someone help me to modify this code so that it will collapse all other divs form the same class?

If you have multiple DIVs and class like below,
<div class="divClass">A</div>
<div class="divClass">B</div>
<div class="divClass">C</div>
then, you need to use like,
$(".divClass").click(function(){
$(".divClass").hide(500); //hiding all the element with divClass
$(this).show(500); // showing up the clicked element.
});

This might be able to you
Reference
Just a part of code
$(".header").click(function () {
$(".header").not(this).text('Expand').next().slideUp();
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});

How to fire a unique ID modal when multiple divs with class is clicked using jQuery?

Forgive the strangely worded question, my first StackOverflow post, and I'm a novice to jQuery/JS. I've used the search feature a lot and haven't found exactly what I'm looking for:
I am having an issue essentially, where I have dynamically added divs by the end-user (they pick how many content blocks they want to use), with the same class, that need to hide and show specific divs (with unique IDs) when they are clicked. I finally figured out how to give each div a unique ID, but I'm not sure how to get the child divs of the particular div what was clicked, to fire properly on click. Hope that makes sense.
Here is the HTML I have:
<div class="resource-video">
//Unique thumbnail
</div>
<div class="overlay-container hide" style="width: 50px; height: 50px;">
<div class="video-player hide">
//Included unique video
</div>
</div>
This will end up being duplicated based on how many videos are added.
Here is the JavaScript I am using:
//Generates unique IDs for each of the divs on the page with those classes
var i = 0;
$(".resource-video").each(function(i){
$(this).attr("id","video_"+ (i+ 1) );
});
$(".overlay-container").each(function(i){
$(this).attr("id","container_"+ (i+ 1) );
});
$(".video-player").each(function(i){
$(this).attr("id","player_"+ (i+ 1) );
});
//Currently opens all of them
$(".resource-video").on("click", function(){
openModal(".overlay-container", false, true);
alert($(this).attr("id")); //Alerts the right div clicked
if ($(".video-player").hasClass("hide")){
$(".video-player").removeClass("hide").addClass("show");
$(".overlay-container").animate({ height:'300px', width: '500px' }, "slow");
}
$("#overlay").on("click", function(){
$(".video-player").removeClass("show").addClass("hide");
$(".overlay-container").css({ "height":"50px", "width":"50px",
"display":"none"});
$(this).hide();
});
return false;
});
// Probably not totally necessary, but just in case
function closeModals(){
$("body").find(".modal").hide();
$("#overlay").hide();
$("body, html").removeClass("no-scroll");
};
function openModal(divID, allowScroll, blockScreen){
closeModals();
$(divID).show();
if ( blockScreen == true ){ $("#overlay").show(); };
if ( allowScroll == false ){ $("body, html").addClass("no-scroll"); };
};
As it stands now, all of the overlays open because I am targeting the class not the IDs. Basically, I need to find out a way to have the specific overlay associated with the specific div clicked on to display without hardcoding that, since the number of divs will change all the time. I would think I could use something like $(this) or event.target, but things I tried didn't work.
Hopefully I was clear enough with my issue and made it general enough for other people to use too. Thanks for any help in advance!

This uses DOM traversal functions to find the corresponding DIVs to the one that was clicked.
$(".resource-video").on("click", function(){
var overlayContainer = $(this).next();
var videoPlayer = overlayContainer.children(".video-player");
openModal(overlayContainer, false, true);
if (videoPlayer.hasClass("hide")){
videoPlayer.removeClass("hide").addClass("show");
overlayContainer.animate({ height:'300px', width: '500px' }, "slow");
}
return false;
});
// Only need to bind this once, not every time .resource-video is clicked.
$("#overlay").on("click", function(){
$(".video-player").removeClass("show").addClass("hide");
$(".overlay-container").css({ "height":"50px", "width":"50px",
"display":"none"});
$(this).hide();
});
// Probably not totally necessary, but just in case
function closeModals(){
$(".modal").hide();
$("#overlay").hide();
$("body, html").removeClass("no-scroll");
};
function openModal(div, allowScroll, blockScreen){
closeModals();
div.show();
if ( blockScreen == true ){ $("#overlay").show(); };
if ( allowScroll == false ){ $("body, html").addClass("no-scroll"); };
};

Jquery menu slide up from from bottom of screen on hover

I want to only show the menu phrases "music, newsletter, contact" fixed at the bottom of the screen. On hover I want them to slide up and reveal hidden content. here's exactly what I mean:
http://sorendahljeppesen.dk/
See the bottom of the screen. Anyone know how this would be accomplished? Thank you.
P.S. also, would anyone know what type of MP3 player that is?

Put your hidden content into a div such as;
<div class="hiddenContent">...</div>
Then give your links at the bottom of the page a class such as;
Music
Then tell the Jquery to show the hidden content when you hover over the link;
$('.bottomLink').hover(
function () {
// Show hidden content IF it is not already showing
if($('.hiddenContent').css('display') == 'none') {
$('.hiddenContent').slideUp('slow');
}
},
function () {
// Do nothing when mouse leaves the link
$.noop(); // Do Nothing
}
);
// Close menu when mouse leaves Hidden Content
$('.hiddenContent').mouseleave(function () {
$('.hiddenContent').slideDown('slow');
});

Try this code:
ASPX section,
<div id="categories-menu" class="hover-menu">
<h2>Categories</h2>
<ul class="actions no-style" style="display: none">
<li>//Place your content here that should show up on mouse over</li>
</ul>
</div>
JQuery section,
<script type="text/javascript">
$(document).ready(function() {
function show() {
var menu = $(this);
menu.children(".actions").slideUp();
}
function hide() {
var menu = $(this);
menu.children(".actions").slideDown();
}
$(".hover-menu").hoverIntent({
sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
interval: 50, // number = milliseconds for onMouseOver polling interval
over: show, // function = onMouseOver callback (required)
timeout: 300, // number = milliseconds delay before onMouseOut
out: hide // function = onMouseOut callback (required)
});
});
</script>
Hope this helps...

I have found this great article with live demo and source code to download, the article show how to make a slide out menu from bottom.

Dojo, how to do onclick event on a DIV

There was a fade out sample in the internet..
http://docs.dojocampus.org/dojo/fadeOut?t=tundra
but i want to do something different..
i want people directly click on the text then the text will fade out.
in my code there is a div wrap the text
<div id='parentNode'>
<div id='textDiv' onClick='whenClickAnyWhereWithinThisDiv_performFadeOut()'>
<div id='iconDiv'/>
<div id='messageDiv'/>
</div>
<div>
Code as show below, what i want is, when people click anywhere within the textDiv,
then the whole textDiv will fade away..hmm.....why my code doesn`t work???
function whenClickAnyWhereWithinThisDiv_performFadeOut () {
...
...
dojo.connect(dijit.byId('textDiv'), "onClick", fadeOutAndRemove(parentNode, textDiv));
}
function fadeOutAndRemove (parent, currentDiv) {
// just assume i can get the parent Node, and the current div, which will be textDiv
var objectId = currentDiv.getAttribute('id');
dojo.style(objectId, "opacity", "1");
var fadeArgs = {
node: objectId,
duration: 2000
};
dojo.fadeOut(fadeArgs).play();
setTimeout(function() { parent.removeChild(currentDiv);}, 2000);
}

If I understand what you are trying to do, I think you can accomplish it with this:
HTML
<div id='parentNode'>
<div id='textDiv'>
<div id='iconDiv'>this is icon div</div>
<div id='messageDiv'>this is message div</div>
</div>
<div>
JavaScript
// do it when the DOM is loaded
dojo.addOnLoad( function() {
// attach on click to id="textDiv"
dojo.query('#textDiv').onclick( function(evt) {
// 'this' is now the element clicked on (e.g. id="textDiv")
var el = this;
// set opacity
dojo.style(this, "opacity","1");
// do fade out
dojo.fadeOut({
node: this,
duration: 2000,
// pass in an onEnd function ref that'll get run at end of animation
onEnd: function() {
// get rid of it
dojo.query(el).orphan()
}
}).play()
});
});
The click will bubble up so it'll be caught by textDiv.
Here are some helpful links:
Dojo Animation quickstart
dojo.byId vs. dijit.byId
Let me know if I misunderstood your question and I'll update my answer. Hope this helps.