We Keep Coding

Wordpress Close theme menu after click

I am using this Wordpress theme, called ichiban.
I have made some custom menu items that links directly to sections on the same page. For these cases I would like the whole menu to un-toggle when the < li > item is clicked. This is the code I have been working on;
jQuery( document ).ready(function($) {
$('#menu-main li a').on("click", function(){
$('.site-overlay-wrapper').hide();
});
});
For now, this code only hides the open menu, the menu button does not reset, and it is not possible to re-ope the menu. Please help me getting this code correct.
SOLUTION
jQuery( document ).ready(function($) {
$('#menu-main li a').on("click", function(){
$("body").removeClass("overlay-open");
});
});
Thank you all :)

You can try using jQuery .toggle() method.
Change this line:
$('.site-overlay-wrapper').hide();
To:
$('.site-overlay-wrapper').toggle();

This help?
jQuery( document ).ready(function($) {
var t = true;
$('#menu-main li a').on("click", function(){
if(t===true){
$('.site-overlay-wrapper').hide();
t=false;
}
else{
$('.site-overlay-wrapper').show();
t=true;
}
});
});
Here is working example:
jQuery( document ).ready(function($) {
var t = true;
$('#button').on("click", function(){
if(t===true){
$('.show').hide();
$(this).text("SHOW");
t=false;
}
else{
$('.show').show();
$(this).text("HIDE");
t=true;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="button">CLICK</button>
<div class="show">HAPY NEW YEAR!!!</div>
You also can have a problem with $('#menu-main li a'). That a tag is wrong. You need to point click statemant to button class directly because you hide your menu on any a tag inside any li.

passing specific radion buttons to a function

I've got a function that applies to all radio buttons on a page, I can't seem to specify it to run only for specific ones.
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
var $divs = $('#divs > div');
$divs.first().show()
$('input[type=radio]').on('change',function() {
$divs.hide();
$divs.eq( $('input[type=radio]').index( this ) ).show();
});
});
});//]]>

Give each radio button a unique id and then just select the ones you want:
$('#id_radio1, #id_radio4, #id_radio9').on('change', function() {...

JavaScript tabs works only when an individual tab is present

I have created a simple tabs widget, here is a working jsfiddle: http://jsfiddle.net/G3eRn/1/
When I add another Tabs widget "as you will see in the example" in the same page, everything get missed up! I really don't know how to describe it... after looking into it and trying to debug it, I have concluded that it is the JavaScript that needs to be looked at, so I have researched, but didn't really find an answer that would fix it. However, I found that using .each might fix it? so I did try it but didn't work - maybe I used it wrong.
What I am doing wrong?
Here is the JS:
//Tabs Navigation
$('.tabs .tabs-menu a:eq(0)').addClass('active');
$('.tabs .tabs-sections .tabs-section:not(:first-child)').hide();
$('.tabs .tabs-menu a').on('click', function() {
$('.tabs-menu a').removeClass('active');
$(this).addClass('active');
$('.tabs .tabs-sections > .tabs-section:eq(' + $(this).index() + ')').show().siblings().hide();
});

You have to make sure only the current tab group is being affected (using .each):
http://jsfiddle.net/G3eRn/2/
//Tabs Navigation
$('.tabs').each(function(){
var $tabs = $(this);
$tabs.find('.tabs-menu a:eq(0)').addClass('active');
$tabs.find('.tabs-sections .tabs-section:not(:first-child)').hide();
$tabs.find('.tabs-menu a').on('click', function () {
$tabs.find('.tabs-menu a').removeClass('active');
$(this).addClass('active');
$tabs.find('.tabs-sections > .tabs-section:eq(' + $(this).index() + ')').show().siblings().hide();
});
});
And here's a version that's a little more performant:
http://jsfiddle.net/G3eRn/7/
//Tabs Navigation
$('.tabs').each(function(){
var $tabs = $(this);
$tabs.find('.tabs-sections .tabs-section:not(:first-child)').hide().end()
.find('.tabs-menu a').on('click', function () {
$tabs.find('.tabs-menu a').removeClass('active').end()
.find('.tabs-sections > .tabs-section:eq(' + $(this).index() + ')').show().siblings().hide();
$(this).addClass('active');
}).eq(0).addClass('active');
});
The second example uses end() which "undoes" the last selector.
So for example
$('.el').find('div').end().addClass('test')
would add the class "test" to the .el element instead of all div's inside it.

In your "click" handler, you have to make sure that you're applying changes only to the relevant group of tabs. As your code is currently written, the handler code will affect all the matching tab groups on the page.
You can use jQuery DOM navigation methods to do it:
$('.tabs .tabs-menu a:eq(0)').addClass('active');
$('.tabs .tabs-sections .tabs-section:not(:first-child)').hide();
$('.tabs .tabs-menu a').on('click', function () {
// find the current menu group and deactivate all tab labels
$(this).closest('.tabs-menu').find('a').removeClass('active');
// activate this tab
$(this).addClass('active');
// find the tab section corresponding to this tab menu
$(this).closest('.tabs').find('.tabs-sections > .tabs-section:eq(' + $(this).index() + ')').show().siblings().hide();
});
The .closest() method walks up the DOM looking for a match. From that point, .find() looks down the DOM in that isolated subtree.
Here's your fiddle, updated.
Personally I'd use a delegated handler setup so that tab groups could be added dynamically without needing to re-run the code:
$('body').on('click', '.tabs-menu a', function() {
// as above
});

You need to apply the functions to every .tabs element.
$('.tabs').each(function() {
var $tabs = $(this);
$('.tabs-menu a:eq(0)', $tabs).addClass('active');
$('.tabs-sections .tabs-section:not(:first-child)', $tabs).hide();
$('.tabs-menu a', $tabs).on('click', function() {
$('.tabs-menu a', $tabs).removeClass('active');
$(this).addClass('active');
$('.tabs-sections > .tabs-section:eq(' + $(this).index() + ')', $tabs).show().siblings().hide();
});
});
The syntax jQuery( 'selector', node ) selects child elements only inside the given HTML element node. In this case an element with the class .tabs. This is similar to do jQuery( node ).find( 'selector' ).
Using $ is just a way for me to always know, which variable is a jQuery object. For example: var $this = jQuery( this );.
If you want more performance in your script store selected node in a variable (e.g. .tabs-menu a in your code). You may even querySelector to get the elements via plain JS instead of jQuery. The jQuery each on the other hand is very comfortable.
An example mixup of different methods:
$('.tabs').each(function() {
var tabs = this,
links = this.querySelectorAll( '.tabs-menu a' );
/* passing a DOMNodeList to jQuery and filter it */
$(links).filter(':eq(0)', tabs).addClass('active');
$('.tabs-sections .tabs-section:not(:first-child)', tabs).hide();
/* setup event handler */
/* without jQuery, one need to itererate over the list of elements */
for( var i = links.length; i--; ) {
var currentLink = links[i];
currentLink.addEventListener('click', function() {
var currentTab = this;
/* jQuery does the loop internally */
$(links).removeClass('active');
currentTab.classList.add('active');
$('.tabs-sections > .tabs-section:eq(' + $(currentTab).index() + ')', tabs).show().siblings().hide();
}, false);
}
});
For documentation and browser support see here:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelector
https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll
https://developer.mozilla.org/en-US/docs/Web/API/Element.classList
There is a JS ployfill for nearly any modern feature:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Remove dynamically generated div with jquery

I would like to add/remove a new div when the corresponding checkbox is checked/unchecked with jQuery. Here's my attempt:
<script type="text/javascript">
$(function() {
$("#form1 :checkbox#checkbox1").click(function() {
var d = document.createElement('div');
if ($(this).is(":checked")) {
$(d).addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
//$(".newdiv").fadeOut(1000);
$(d).fadeOut(1000);
}
});
});
</script>
The fadeIn process comes out smoothly. But when I tried to fadeOut $(d) using the same methodology, it didn't work: the new generated div remained on the page. I did some research and get a work around, with $(".newdiv").fadeOut(1000); (commented in the code above), but that's not the best solution for me I think. And also I really want to know why my first attempt didn't work. Any suggestions? Thanks.

There are few changes you can make
1. No need for the selector #form1 :checkbox#checkbox1 since you have an id for the checkbox, you can just use #checkbox1
2. Create the div using jQuery instead of using createElement $('<div/>')
3. After fading out the div you need to remove it from the dom
$(function() {
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
$('<div/>').addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
$('#mydiv .newdiv').fadeOut(function(){
$(this).remove()
})
}
});
});
Demo: Fiddle
Another solution is to have a static div which will be shown and hidden
$(function() {
var div = $('<div/>').addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide();
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
div.fadeIn(1000);
} else {
div.fadeOut(1000)
}
});
});
Demo: Fiddle

jsFiddle Demo
Every time your click handler runs, you're creating a new variable d with a new element. Instead, do that before the click handler, so each instance will reference the same element. I have included other optional improvements below.
A change event is more appropriate for checkboxes. Also, notice I made your selector just #checkbox1, since that is already unambiguous and maximally specific.
To get a better visual effect, don't add the element, hide it, then fade it in. In most browsers that will show the element flicker before it appears. Instead, use a class to hide it with css: .hidden {display: none;}. You can also use fadeToggle to toggle the visibility, instead of doing if/else. clearQueue removes extra events for multiple clicks during a transition, and makes transitions appear smoother.
Finally, use jQuery to create the element:
$(function () {
var $d = $('<div>', {
"class": "hidden",
text: "This is a new div"
}).appendTo("#mydiv");
$("#checkbox1").change(function () {
$d.clearQueue()
.stop()
.fadeToggle(1000);
});
});

You better make d a jQuery object.
<script type="text/javascript">
$(function() {
$("#checkbox1").click(function() {
var d = $('<div class="newdiv"></div>');
if ($(this).is(":checked")) {
d.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
d.fadeOut(1000);
}
});
});
</script>

Dropdown doesn't work on newly added elements

I have multiple dl elements on a page. At the end of each one I have a dd tag acting as a dropdown which includes options for the element (like edit, delete, etc.)
Here's the jQuery for the dropdown:
$('dd.optiuni').mouseover(function() {
$(this).find('ul').show();
});
$('dd.optiuni').mouseout(function() {
$('dd.optiuni ul').hide();
});
Now before the dl tags I have an input and a submit button to add new dls and use jQuery to add them without reloading the page. The problem is that after the new element is added, the dd at the end doesn't seem to work.
How can I make my previous code recognize that new elements have been added to the page?
$(function() { // ie7 z-index fix
var zIndexNumber = 1000;
$('dl').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});

Use .live or .delegate:
$('dd.optiuni').live("mouseover", function() {
$(this).find('ul').show();
});
$('dd.optiuni').live("mouseout", function() {
$('dd.optiuni ul').hide();
});