Develop Reference

Prevent default link behaviour when click somewhere in <a> element

Lets say we have a like this structure:
document.querySelector(".container").addEventListener("click", e => {
e.stopImmediatePropagation();
}
<a href="page2.html" class="container">
<div class="preventGoToLinkWhenClick">
button for open video modal
</div>
</a>
When I click on the div inside, it should not go to the link. Is this possible? I have tried stopImmediatePropagation() but does not works.
But should work <a> element when click outside the div

Use an event listener to prevent default action if the clicked element contains class preventGoToLinkWhenClick (or any criterium you define), otherwise just return
document.addEventListener("click", evt => {
if (evt.target.classList.contains("preventGoToLinkWhenClick")) {
evt.preventDefault();
}
return;
});
<a href=//www.google.com" class="container">
<div class="preventGoToLinkWhenClick">
button for open video modal
</div>
[click to open]
</a>

anchor tag data not accessible when clicking on glyphicons inside the anchor tag

How do I get the data when there is only a glyphicon in the anchor tag? Below is a demonstration of the problem...
http://jsfiddle.net/sua0yp4y/2/
HTML:
<h1 id="output1">OUTPUT1</h1>
<h1 id="output2">OUTPUT2</h1>
<a class="withIcon" href="#" data-taskid="1123" data-userid="5813"><span class="glyphicon glyphicon-time"></span></a>
<h1 id="output3">OUTPUT3</h1>
<h1 id="output4">OUTPUT4</h1>
<a class="withoutIcon" href="#" data-taskid="1123" data-userid="5813">without icon</a>
JS:
$('body').on('click','a.withIcon',function(e){
e.preventDefault();
$("h1#output1").text($(e.target).data('userid'));
$("h1#output2").text($(e.target).data('taskid'));
});
$('body').on('click','a.withoutIcon',function(e){
e.preventDefault();
$("h1#output3").text($(e.target).data('userid'));
$("h1#output4").text($(e.target).data('taskid'));
});

Add the closest('a') to find the closest anchor tag and get the data values:
$("h1#output1").text($(e.target).closest('a').data('userid'));
$("h1#output2").text($(e.target).closest('a').data('taskid'));
http://jsfiddle.net/sua0yp4y/3/

The user clicks over the image you can change the event:
$('body').on('click','.glyphicon',function(e){
e.preventDefault();
$("h1#output1").text($(e.target).parent().data('userid'));
$("h1#output2").text($(e.target).parent().data('taskid'));
});
fiddle

Use this instead of e.target to referece the element you clicked on.
Updated Fiddle - http://jsfiddle.net/sua0yp4y/5/
$('body').on('click','a.withIcon',function(e){
e.preventDefault();
$("h1#output1").text($(this).data('userid'));
$("h1#output2").text($(this).data('taskid'));
});
$('body').on('click','a.withoutIcon',function(e){
e.preventDefault();
$("h1#output3").text($(this).data('userid'));
$("h1#output4").text($(this).data('taskid'));
});

replace $(e.target) with $(this) your problem get resolved.
demo http://jsfiddle.net/sua0yp4y/8/

jquery tabs access from urls

hello i have jquery tabs and want to access them from url using # but know know how can I full fill with it
requirement is mywebsite.com/#show_page1 will show the page 1 content
and if access from mywebsite.com/#show_page2 will show the page 2 content
here is the my js code
$(window).load(function(){
$(document).ready(function(){
$("#nav_tabbed a").click(function(){
var id = $(this).attr('id');
id = id.split('_');
$("#menu_container div").hide();
$("#menu_container #show_"+id[1]).fadeIn();
// remove classes from all
$("a").removeAttr("style");
// add class to the one we clicked
$(this).css("background-color","#1aaede");
// stop the page from jumping to the top
return false;
});
$("#menu_container #show_page1").show();
});
});
and html i have is
<div id="nav_tabbed">
<a id="show_page1" style="background-color:#1aaede;">Page 1</a> <a id="show_page2">Page 2</a>
</div>
<div id="menu_container">
<div id="show_page1">
<!-- content here -->
</div>
<div id="show_page2">
<!-- content here -->
</div>
</div>

location.hash; will give you the hash value added in the addressbar and you can use it the way you need to. My suggestion is added below.
What seems to me you want to hightlight your link with the hash located in the browser's addressbar and respective div you want to show. If this is what you want to implement then you can try this with slight changes in the markup and js:
CSS:
.active {
color:red;
}
#menu_container div {
display:none;
}
HTML:
<div id="nav_tabbed">
<a href="#show_page1" class='active'>Page 1</a> <!--This lets you add hash in the addressbar-->
Page 2
</div>
<div id="menu_container">
<div id="show_page1" style='display:block;'>Page 1</div>
<div id="show_page2">Page 2</div>
</div>
JS:
$(function () {
// below works for hash added in the browser.
var hash = location.hash;
if(hash.length){
$('#nav_tabbed a').removeClass('active');
$('#menu_container div').hide();
$('#nav_tabbed a[href*="' + hash + '"]').addClass('active');
$('#menu_container div[id*="' + hash.slice(1) + '"]').show();
}
$(document).scrollTop(0);
// below works for click of the anchors
$('#nav_tabbed a').click(function(e){
e.preventDefault();
$(this).addClass('active').siblings('a').removeClass('active');
$('#menu_container div').hide();
$('#menu_container div[id*="'+this.getAttribute('href').slice(1)+'"]').show();
});
});
A sample fiddle.

your posts shows a little confusion on the topic.
so first for explanation:
there are two meanings of a #
in a url, the # is a reference to the location hash.
in jquery, the # is a reference to an element id.
you want to use the hash change in this case.
first of all... why do you wrap the window.load around the dom.ready event?
as far, as i understood, jquery's dom ready fires when the dom is ready, jquerys window.load fires, after all images, iframes, plugins etc. have been loaded. so a dom.ready inside a window.load is kind of unnecessary ...
next: ID's have to be unique - you can't give your anchor the same id as the assigned div!
so let's get down to business - the html:
<div id="nav_tabbed">
Page 1
Page 2
</div>
<div id="menuContainer">
<div id="page1" class="contentTab activeTab">123</div>
<div id="page2" class="contentTab">456</div>
</div>
we use activeLink and activeTab classes to determine which tab is currently open
the css just sets the background of the activeLink:
.activeLink {
background-color:#1aaede;
}
the js:
$(window).load(function(){
$(".contentTab:gt(0)").hide(); //on initial load, we hide all content tabs, despite the first one
$("#nav_tabbed a").click(function () { //the click handler for the navigation only toggles the class to change the background color
$(".activeLink").removeClass("activeLink");
$(this).addClass("activeLink");
})
if(location.hash) //here we check, if there already is a location hash set onload and then change to the desired tab
{
$(".activeTab").hide();
$(location.hash).show().addClass("activeTab");
}
});
//our hashchange event handles the loading of the desired tabs:
window.onhashchange = function () {
if(location.hash!=null) //this checks, wether the hashchange event has been fired, due to a deletion of the hash via url
{
$(".activeTab").hide().removeClass("activeTab"); //hide the current tab
$(location.hash).show().addClass("activeTab"); //show the clicked tab
}else //and per default show the first tab
{
$(".activeTab").hide().removeClass("activeTab"); //hide the current tab
$(".contentTab:first").show().addClass("activeTab"); //show the clicked tab
}
};
http://jsfiddle.net/ex46ndg1/3/

Get id of element when click ( php, jquery, ajax, javascript )

I'm sorry, this is my first project and I'm learning a lot. So if someone can help me, I will be grateful.
I have this sidebar on my project, which contains rss links. I have to use ajax so each time when user click on any rss link, feeds will appear on screen.
This is my code for sidebar:
<div class="col-md-3">
<div class="well" style="width:300px; bottom: 0; top: 50px; position: fixed;">
<div id="sidebar-wrapper" style="overflow-y: scroll; overflow-x: scroll; height: 100%;">
<ul class="list-unstyled">
<li class="nav-header">
<a href="#" data-toggle="collapse" data-target="#userMenu">
<h5><b>Subscriptions </b><i class="glyphicon glyphicon-chevron-down"></i></h5>
</a>
<ul class="list-unstyled collapse in" id="userMenu">
<li><a id="id_1" href="#">Sub_1</a></li>
<li><a id="id_2" href="#">Sub_2</a></li>
<li><a id="id_3" href="#">Sub_3</a></li>
<li><a id="id_4" href="#">Sub_4</a></li>
<li><a id="id_5" href="#">Sub_5</a></li>
<li><a id="id_6" href="#">Sub_6</a></li>
<li><a id="id_7" href="#">Sub_7</a></li>
</ul>
</li>
</ul>
</div>
</div>
There is any chance to get id for each link when any of those links are clicked ?
Or I have to write a different function where to use ajax for each id ?
Can someone show me how to use ajax on this only once, not seven times ?
I have a div in my body tag : div id="changebodywithaxaj" and I want to change it with properly feeds for each link.
Thank you in advance.

You can get the ID by this way, for more details and ajax part, check this fiddle, good luck.
http://jsfiddle.net/ea51y1j5/
$("#userMenu").children('li').click( function() {
var rssId = $(this).children('a').attr('id');
});

Attach a click event listener to the li a elements; in the click handler you can get the id of the element click from the id property of this this.id. Then you can use that id as data in your ajax call. Also, pass the event object, e, and call e.preventDefault() to prevent the click from trying to follow the link -- in your case it would jump upto the top.
$('li a').on('click', function(e) {
e.preventDefault();
var Id = this.id;
// use id in ajax call
});

Just retrieve the value on click by using the $('clickedEl').attr('id')
link to jsfiddle -> http://jsfiddle.net/6ov1ydzv/

If I underestand correctly, you want to add a click event to all the links:
$('#userMenu a').on("click", ajaxCall);
and in the click event get the id of the clicked element and call an ajax function to paint the feeds on the screen:
function ajaxCall(){
var id = $(this).attr('id');
$.ajax({
url: "url",
data: { id : id },
success: paintFeedsOnScreen
})
}
It's that or I'm missing something?

How about this?
$('ul.list-unstyled').on('click', 'a', function() {
var ID = this.id;
//use the ID for your ajax call...
});
Even better, you could also use the element id since you have one, as below:
$('#userMenu').on('click', 'a', function() {

You can try this
$('li a').click(function(){
var id = this.id;
$.ajax({
url: // your url goes here
data:{id:id},
success: function(result){
}
});
});

So if you only want the ID from the link click on you can do:
$("#userMenu li a").on("click", function(){
var id = this.id;
// This is where you can do what ever with your id from that element.
return false; // This is so that it won't follow the link you're clicking and reload the page
// when you don't want to.
});
But perhaps you actually want the href from the link you click. Since it's a link you want to follow (with ajax) any way? You'd pretty much do the same thing:
$("#userMenu li a").on("click", function(){
var href = $(this).attr('href');
// do your ajax stuff here perhaps. With href as a link in your ajax call.
return false;
});

Add this code as a JS script on the page :
$("#userMenu a").click(function() {
$("#changebodywithajax").html(updateRSSWithID($(this).attr('id')));
});
Where updateRSSWithID(IDGoesHere) is a function that takes in the ID of the element and returns the appropriate body of text that corresponds to it.

How can I swap an image on click and show it onclick or when clicked elsewhere?

My HTML structure is:
<div class="box_container">
<a class="box_one entire_sprite_image" href="#"></a>
<a class="box_two entire_sprite_image" href="#"></a>
</div>
Onclick of box_one or box_two I want them to go to an active state. I intend to use JQuery to do that. So when box_one or box_two is clicked the image color changes to reflect active state.
I am not sure how I can use JQuery to do this because instead of having two different images for each box I am using a sprite image.
I am new to Jquery but got up to this point:
(function ($) {
$(document).ready(function() {
$(".box_one, .box_two").click(function () {
});
});
})(jQuery);
How can I still use Jquery to change the image when clicked and change back to original when clicked on that image again and when something else is clicked?

My assumption is that your asking how to change the sprite on the element that was clicked. To do that you'd adjust the background-position of the clicked element as shown here:
$(document).ready(function(){
$(".box_one, .box_two").click(function () {
$(this).css('backgroundPosition', '0 -54px'); // replace values with appropriate sprite values
});
});
Please clarify if you're use case is different from this.
UPDATE: use an active class and toggle it. toggle active class by clicking on other elements.
<div class="box_container">
<a class="box_one active" href="#"></a>
<a class="box_two" href="#"></a>
</div>
$(document).ready(function(){
$(".box_one").click(function () {
$(this).toggleClass('active');
});
$(my_selected_elements).not(".box_one").click(function () {
$(this).toggleClass('active');
});
});

use classes for the swap
.box_one{
background : 'imgUrlOne'
}
.box_one.swap{
background : 'imgUrlOneSwap'
}
.box_two{
background : 'imgUrlTwo'
}
.box_two.swap{
background : 'imgUrlTwoSwap'
}
<div class="box_container">
<a class="box_one entire_sprite_image" href="#"></a>
<a class="box_two entire_sprite_image" href="#"></a>
</div>
Javascript
(function ($) {
$(document).ready(function() {
$(".box_one, .box_two").click(function () {
$(this).hasClass('swap') ? $(this).removeClass('swap')
: $(this).addClass('swap')
});
});(jQuery);
Updated Check Fiddle