Develop Reference

How to add, then reference a div with ID and then remove it on JS. (Web)

I am trying to hide the scrollbar when opening a fullscreen menu. That part I got working, what Im missing is getting the same button that hides the scrollbar to make it appear back again (removing the .no-scroll from the body). Here is my failed attempt, looks like the second function is not working.
$('.menu_container').on('click', function(){
$('body').addClass('no-scroll');
$('.menu_container').attr('id', 'menu_close');
});
$('#menu_close').on('click', function(){
$('body').removeClass('no-scroll');
$('#menu_close').removeAttr('menu_close');
});

Your event handlers are attached as soon as the DOM is loaded. And when this happens, there's no element with id #menu_close yet (since it's added only after you click on .menu_container), so the second event handler is not attached to anything.
You could move it up inside the first function like this:
$('.menu_container').on('click', function(){
$('body').addClass('no-scroll');
$('.menu_container').attr('id', 'menu_close');
$('#menu_close').on('click', function(){
$('body').removeClass('no-scroll');
$('#menu_close').removeAttr('menu_close');
});
});

It's because you've removed the id which is how you're finding the element.
If you want to add and remove a class that makes your scrollable use:
$( 'body' ).addClass( 'no-scroll' );
And:
$( 'body' ).removeClass( 'no-scroll' );

Hide div when the page is loaded and show when link is clicked

I took this simple code for drop down menu and it's working so far. The problem is that when I load the page, #drop menu is displayed, which is obviously not what we want. The goal is to show the #drop menu when #submenu link is clicked, not immediately.
I modified my code below, because I need a div element, not a list.
js
$(document).ready( function(){
$('#submenu').click( function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click( function(){
$('#drop').hide();
});
});
html
Products
<div id = "drop" >
DROP DOWN MENU
</div>

Add some css:
#drop { display: none; }

just put this code in your dropdown.
Products
<div id = "drop" style="display:none;">
DROP DOWN MENU
</div>
and your problem will be resolved when page load drop div will be hidden that u can use toggle or show command in jquery function.
Regards
Imran Qasim

Since you don't want your element to be displaced when the page first loads, why not set its visibilty to hidden in the html, like style="visbility:hidden",and assign submenu link an action listener function and reference this element via getElementById and set its visibility to visible.
document.getElementbyId("dropDownMenu").style.visibility = "visible"

If you dont't want to use css then you can do it with jquery.
Products
<div id = "drop" >
DROP DOWN MENU
</div>
<scitpt type="text/javascipt">
$(document).ready( function(){
$('#drop').hide();
$('#submenu').click( function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click( function(){
$('#drop').hide();
});
})
</script>
Fiddle

jQuery Tabs manual activation

How can I activate a particular tab programmatically? I tried the following code after reading online jQuery docs:
$("#MyTabsDiv").tabs( "option", "active", 1 );
This does bring up the specified tab contents, but it doesn't highlight the selected tab's header, which is what happens when I manually click on the tab header. I have tried the "refresh" option too, without any success. I am using Bootstrap 3's TAB css on top of jQuery's tabs()

You can hack a user manually clicking the tab by firing a .click() event on the desired tab.
You can also see bootstrap's own jQuery plugin to manage your tabs .

Since Bootstrap's CSS for tabs uses a class of active, add class when tab is activated - Demo
$( "#MyTabsDiv" ).tabs({
activate: function( event, ui ) {
$(ui.newTab).addClass('active')
$(ui.oldTab).removeClass('active')
}
});
or attach to event using on() - Demo
$("#MyTabsDiv").on( "tabsactivate", function( event, ui ) {
$(ui.newTab).addClass('active')
$(ui.oldTab).removeClass('active')
});

Try this in the CSS:
#tabs .ui-tabs-active {
background: yellow;
}
::source::

jQuery newsitems hide and collapse

I am using a nice script to hide and show several divs
// Catch all clicks on a link with the class 'link'
$('.link').click(function(e) {
// Stop the link being followed:
e.preventDefault();
// Get the div to be shown:
var content = $(this).attr('rel');
// Remove any active classes:
$('.active').removeClass('active');
// Add the 'active' class to this link:
$(this).addClass('active');
// Hide all the content:
$('.content').hide();
// Show the requested content:
$('#' + content).show();
});
This works great on a single div with several items I like to hide.
But I use a template the retrieves news items and I like to make this work on all the divs induvidual. Also hide the second div by default.
<div class="content" id="div[[+idx]]-1">
<p>Show content by default</p>
<a class="link-[[+idx]]" href="#" rel="div[[+idx]]-2">
Link to show div id="div[[+idx]]-2" and hide id="div[[+idx]]-1"
</a>
</div>
<div class="content hide" id="div[[+idx]]-2">
<p>Hide content by default</p>
<a class="link-[[+idx]]" href="#" rel="div[[+idx]]-1">
Link to show div id="div[[+idx]]-1" and hide div id="div[[+idx]]-2"
</a>
</div>
Problem is I use this template for every iteration and the script does not support an undefined number of items and closes all my other divs. As does the second div does not hide on default.
I changed the link to link1 and then you get the follwoing unwanted bahavior:
http://jsfiddle.net/Vh7HR/8/
if I leave out the 1 it does nothing

make use of .parent()
// Catch all clicks on a link with the class 'link'
$('.link').click(function(e) {
// Stop the link being followed:
e.preventDefault();
// Get the div to be shown:
var content = $(this).attr('rel');
// Remove any active classes:
$('.active').removeClass('active');
// Add the 'active' class to this link:
$(this).addClass('active');
// Hide all the content:
$(this).parent('.content').hide();
// Show the requested content:
$('#' + content).show();
});

You need to use delegation if you are adding new .link dynamically.
By using .on() you can listen for a click on document (or another element that is ancestor to .link and is present when the click handler is attached) and when the click is fired it will look for .link.
Try this:
$(document).on('click', '.link', function(e) {

I recommend you to use the on method provided by jquery to handle click events, the classic click method not works with elements that you create after rendering the DOM.
$( "your-selector" ).on( "click", function() {
alert( "Hello world!");
});

hide dynamically generated <p> using Jquery

I'm dynamically getting hyperlinks and paragraphs from the database, and I wish to hide/show the paragraphs. How can I use jquery to show/hide only a hidden paragraph of a particular link, instead of showing all the paragraphs?
<body>
first link
<p>Show this when I click first link</p>
second link
<p>Show this when I click second link</p>
<script>
$( "p" ).hide();
$( "a" ).click(function( event ) {
event.preventDefault();
$( "p" ).show();
});
</script>
</body>

Change:
$( "a" ).click(function( event ) {
event.preventDefault();
$( "p" ).show();
});
to:
$( "a" ).click(function( event ) {
event.preventDefault();
$(this).next().show();
});
jsFiddle example
Note, you could also toggle between show/hide by using .toggle() instead of .show() if you like.

The most easy way is to give each paragraph a unique id and store that in the link as well. Like this (fiddle here)
html
first link
<p id="p-1">Show this when I click first link</p>
second link
<p id="p-2">Show this when I click second link</p>
javascript
$('a').on('click', function(e) {
e.preventDefault();
$('#'+$(this).attr('rel')).slideToggle();
});
Other options may be, for example, to find the first child of a certain type (eg a p, or a p with a specific class). Whatever way finding the element you want suits you. What is most appropriate for you mostly depends on how your page is structured.