We Keep Coding

Show/Hide Divs when clicking on donut chart Section

I have a donut raphael donut chart that I would like when clicked to show a cooresponding div of text.
I tried to set id's for each section and then trigger them with jquery using this code but it is not working.
jQuery(document).ready(function() {
jQuery(".div1, .div2, .div3, .div4").hide();
jQuery("#arched1, #arched2, #arched3, #arched4").bind("click", function () {
jQuery(".div1, .div2, .div3, .div4").hide();
if (jQuery(this).attr("id") == "oxbowarc1") {
jQuery(".div1").show();
} else if ($(this).attr("id") == "oxbowarc2") {
jQuery(".div2").show();
} else if (jQuery(this).attr("id") == "oxbowarc3") {
jQuery(".div3").show();
} else {
jQuery(".div4").show();
}
});
});
What can I do to make this work?
Here is the fiddle http://jsfiddle.net/dll416/17j9Lhwg/1/

Delegate. The elements are added, or assigned ids dynamically, in your code, the jQuery would not recognize them when creating the handler.
Try something like
jQuery(container).on("click", "#arched1, #arched2, #arched3, #arched4", function () {
...
In essence, your attaching the handler to the container (can be document, "body" or a more specific element), only for the ids mentioned in selector. That way the handler is attached to an element which does exist on documentReady.
I didn't add it to you fiddle since it seems the assignment of ids is missing there.

jquery load() is duplicating div layer instead of re-populating the content

as the title says, having a bit of a problem on a page thats using jquery's load function.
if you click the 'about' icon on the page it use the jquery load function, here's a demo of whats going wrong http://goo.gl/CaQqy1
you can see the #homepage-slider bugging out by displaying a div inside a div with the same id's so it duplicates the backgrounds.
here's the code:
jQuery(document).ready(function() {
jQuery('#nav-icons a').click(function(){
jQuery('#nav-icons a').removeClass("active-icon");
jQuery(this).addClass( "active-icon" );
var toLoad = jQuery(this).attr('href')+' #main-content';
var toLoadSlider = jQuery(this).attr('href')+' #homepage-slider';
jQuery('#main-content , #homepage-slider').hide('fast',loadContent);
function loadContent() {
jQuery('#homepage-slider').empty().load(toLoadSlider)
jQuery('#main-content').empty().load(toLoad,'',showNewContent())
}
function showNewContent() {
jQuery('#main-content , #homepage-slider').show('normal');
}
return false;
});
});

I managed to find a workaround for this issue by removing the id and class on the div layers
function showNewContent() {
jQuery('#main-content , #homepage-slider').show('normal').removeAttr('id class');
}

Use unwrap() to remove the duplicated parent element:
function showNewContent() {
jQuery('#main-content , #homepage-slider').show('normal').unwrap();
}
DOCUMENTATION
Or add a wrapper div inside your content and load that, for example:
var toLoadSlider = jQuery(this).attr('href')+' #homepage-slider .wrapper';

jQuery slideToggle breaking when you press a link inside a div

I have having a little trouble with the slideToggle when I have a link inside of the slideup panel. What I am trying to do is have the ability to press a button and a div will slide up and display related posts and once you press another or the related project button on the page it will close the toggle and reveal another effect that I am using (100% width and heigh popup). The script I am using works perfect but I am running into one problem. When I click a related post inside of the slideToggle it causes the div to slide down instead of going to the page that represents the link.
Here is my code below and an example http://jsfiddle.net/K8vBg/15/.
$(document).ready(function(){
// build a variable to target the #menu div
var menu = $('#menu')
// bind a click function to the menu-trigger
$('#menu-trigger').click(function(event){
event.preventDefault();
event.stopPropagation();
// if the menu is visible slide it up
if (menu.is(":visible"))
{
menu.slideUp(1000);
}
// otherwise, slide the menu down
else
{
menu.slideDown(400);
}
});
$(document).not('.projectHolder-small,#projectSpecs').click(function(event) {
event.preventDefault();
if (menu.is(":visible"))
{
menu.slideUp(400);
}
});
})
If I change .projectHolder-small,#projectSpecs in the .not function to just read #menu then I am able to click the link inside of the panel but the panel will not slideDown when I click another button on the page. The popup from #project specs will just go over the panel instead of closing it.
Is there something I am missing in my script?
Thank you

Try changing the $(document).not().click() to:
$(document).click(function(event){
if(!$(event.target).closest('.projectHolder-small,#projectSpecs').length){
if (menu.is(":visible")){
menu.slideUp(400);
}
}
});
I am using closest() instead of the usual is(), so that even clicking on the children elements of '.projectHolder-small,#projectSpecs' the panel won't close.

I rewrote the script to the following and it works perfect
$(document).ready(function () {
var $frm = $('#menu').hide();
var $bts = $("#menu-trigger").on('click', function () {
var $this = $(this)
$bts.filter(".selected").not(this).removeClass('selected');
$this.toggleClass('selected');
if ($this.hasClass('selected') && $frm.is(':visible')) {
$frm.stop(true, true).slideUp(function () {
$(this).slideDown()
});
} else {
$frm.stop(true, true).slideToggle();
}
});
$bts.filter('.selected').click();
$("#projectSpecs, #menuButton").click(function () {
$bts.filter(".selected").removeClass('selected');
$frm.slideUp();
});
});

How to hide a div on document ready, and then call it dynamically from Javascript?

I'm using this code to hide a div container where I'm placing text dynamically.
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
The problem I have is that I want to trigger the show div from a javascript function instead of a predefined click event. I've found this example which mateches the function I want, but I'm not sure how to trigger it from javascript instead of a click function.
JSFiddle Here

just hide the div using css
display:none;
.slidingDiv{
display:none;
}
and show it when ever you want using
.show()
$(".slidingDiv").show();
edit:
after you question edit, you can always trigger the click event programatically like
function yourFunction(){
$(".show_hide").click();
}

At any point in your script you can call the jQuery object with your div's id/class and run the show() function. i.e.
var javascript = "cool";
var foo = "I'm doing stuff";
var bar = "And some more stuff";
if (javascript === "cool")
jQuery(".slidingDiv").show();
else
$(".slidingDiv").show();

<script>
$(document).ready(function(){
$("input[type='file']").on("change", function () {
if(this.files[0].size > 1000000) //file size less than 1MB {
{
$("#fileAlert").show(); //calling a bootstrap 4 alert
}
$(this).val('');
}
});
});
</script>

Hide div with javascript when no link

I have a website into modx cms, I'm trying to remove or hide a div when into that div there is no tag.
How can I do this?
I tried this but no luck:
jQuery(function($) {
if ($(".pages a")) {$(".pages").remove();}
});
< div class="pages">[+previous+] [+pages+] [+next+]< /div>

If you are trying to check if the <a> tag exists inside the div then you could try:
if($(".pages a").length == 0) {
// links don't exist
$(".pages").remove();
} else {
// links exist
}

another shorter answer would be
$('.pages:not(:has(>a))').css("display", "none");
click to see...
reference jQuery.not()

I'm not sure if this is what you want:
$(function($) {
$(".pages").each(function(){
if(!$(this).find('a').length)
$(this).remove();
});
});

Hide it this way, so that you can show them up when there are links:
if ($(".pages a").length == 0) {
$(".pages").hide();
}
And when the links are there, or you making an AJAX call, do this:
$(".pages").show();