Develop Reference

Make javascript work on any link

I would like for an effect to happen (a certain <div id="posts"> to translate left) when clicking on any link of my page. I was wondering if there was a way to do this with javascript. The only thing I thought about was the function but to add the attribute onclick="myFunction" to all of my links would be so long..
Maybe there is a pre-made js function that works on any link?
I also thought about using CSS a:active but I don't think that would be the best idea.
Thanks for the replies! :)

You can use jQuery to look for clicks on the <a> element, and call a function from there:
$('a').click(function() {
// code to translate div left
});

You can use jQuery to make things work like this:-
$('a').click(myfunction);
function myFunction() {
//do click event stuff here :)
}
If you need a pure JavaScript alternative, I'm not sure if this will work but here's something you can try:
var a = document.getElementsByTagName("p");
for(var i=0; i<p.length; i++){
p[i].onclick = function(){
myFunction();
}
}
function myFunction() {
//do click event stuff here :)
}
For a better understanding, you can refer to http://jsbin.com/onaci/
I'm sorry if I misunderstood you. If so, please correct me.
Thanks

$this - can't find the correct jQuery selector

I'm having real trouble finding which selectors to use to show some divs on my page as my html structure is overly complicated (wordpress comments system).
Instead of pasting it all here I've created a much simplified version of the layout and created a couple of fiddles.
This is the full page with all div's displayed :
https://jsfiddle.net/e25zvfyg/
This is how I want it to work. Basically the reply box and associated existing comments are hidden until "REPLY" is clicked and then the hidden divs slideDown. I've included my "non-working" JS in this fiddle. Hopefully somebody can show me where I'm going wrong?
https://jsfiddle.net/yf3oagx7/
(function ($) {
$('.single-f3ed-reply').hide();
$('.f3ed-reply').hide();
$('a.this-reply').click(function () {
$('.single-f3ed-reply').hide();
$(this).parents().next('.single-f3ed-reply').slideDown('fast');
$(this).parents().next('.f3ed-reply').slideDown('fast');
return false;
});
})(jQuery);
Any help would be greatly appreciated.

.parents() returns all the elements that are above the selected element. You don't want this, you want to go up only as far as a containing div/wrapper.
.next() returns the next item (filtered), which makes no sense in the context of parents()
Go up to the nearest wrapping div (closest), then down again (find) to the item you want:
$(this).closest(".stream-wrap").find('.single-f3ed-reply').slideDown('fast');
$(this).closest(".stream-wrap").find('.f3ed-reply').slideDown('fast');
https://jsfiddle.net/yf3oagx7/1/

Quick hack:
https://jsfiddle.net/e25zvfyg/2/
Using:
$(this).closest('article').find('.single-f3ed-reply').slideDown('fast');
$(this).closest('article').find('.f3ed-reply').slideDown('fast');

You can try this --
(function ($) {
$('.single-f3ed-reply').hide();
$('.f3ed-reply').hide();
$('a.this-reply').click(function () {
$('.single-f3ed-reply').hide();
$(this).parent().parent().parent().find('.single-f3ed-reply').slideDown('fast');
$(this).parent().parent().parent().find('.f3ed-reply').slideDown('fast');
return false;
});
})(jQuery);
You can also achieve this using jquery closest() function as well..
(function ($) {
$('.single-f3ed-reply').hide();
$('.f3ed-reply').hide();
$('a.this-reply').click(function () {
$('.single-f3ed-reply').hide();
$(this).closest('.stream-wrap').find('.single-f3ed-reply').slideDown('fast');
$(this).closest('.stream-wrap').find('.f3ed-reply').slideDown('fast');
return false;
});
})(jQuery);

How to use javascript example with external js? highlighting a div after scroll

I've been struggling with Javascript, of which I'm very unfamiliar.
I'd like to highlight the div after scrolling. I keep finding references to this highlight example, but anything I try doesn't do anything.
I think the problem is the example is showing how to do it in a simple html file with everything self-contained. I'm working within a PHP ecommerce platform (prestashop) and have to put the JS and CSS in their respective places. I'm not understanding how to call what's in that example correctly. Since I don't get any errors, I don't know how to troubleshoot. No errors, it just doesn't do anything.
In my HTML I have
<div>
<a onclick="test('myID')">test highlight</a>
<div id="myID">Here's the div</div>
</div>
In the JS I have
function test(myId){
$( document ).click(function() {
$( myId ).toggle( "highlight" );
});
}

Well, I fixed your problem buddy ;-)
This is the html
<div>
<a>test highlight</a>
<div id="myID">Here's the div</div>
</div>
the jQuery code
function test(myId) {
$("#" + myId).toggle("highlight");
}
$("a").click(function() {
test("myID");
});
What I did is remove your onclick from the anchor element and binded the click event with jQuery instead. And that did the trick ;-)
Here's a fiddle if you want to see it in action.
EDIT
The reason my highlighting wasn't functioning as you wished for, was because I was using an older version of the UI library. And the update also contains a way to use classes to bind click events. The fiddle above will show you.

Or if you what it more link the Highlight example you linked
you could do it like this:
EDIT
Look at this, it will maybe help you:
Fiddle
This is the HTML:
<div>
<p>Click to toggle</p>
<p>highlight</p>
<p>on these</p>
<p>paragraphs</p>
</div>
This is the Java script:
$('p').toggle(
function () {
$(this).css('background-color', 'yellow');
},
function () {
$(this).css('background-color', 'white')
});
But it is highly dependent on which version of jQuery you end up using.
This example uses 1.8.3

how to make html anchor tag not click able with jquery?

I have html like this
(note -: I included j library on the top of page )
<div class="WIWC_T1">
Level of Course
</div>
to make it not clickable i used jquery like this
$(".WIWC_T1 a").click(function(){
return false ;
});
i tried this too
$(".WIWC_T1 a").off("click");
but onClick="call_levelofcourse();popup('popUpDiv1')" is still working on my page . what is soltuion to do it in very simple way ??

Another aproach (which not uses jQuery) is to use css class:
.disable-anchor{
pointer-events: none;
cursor: default;
}
and then just add this class to your anchor like:
<a href="javascript:void(0);"
class="disable-anchor"
onClick="call_levelofcourse();popup('popUpDiv1')">
Level of Course
</a>
P.S. check the availability of pointer-events before using it because this is the CSS3 feature.

Try this
$(".WIWC_T1 a").click(false);

To prevent events, like a when clicking, prevent that event like this:
$(".WIWC_T1").on("click", function(e)) {
e.preventDefault();
//Do your code, such show a popup
}

Level of Course
function call_levelofcourse(){
if(!$("a").hasClass("unclickable")){
/* your codes here */
}
}

$(".WIWC_T1 a").on("click", function(){
$(this).attr("onClick", false);
});
Please remember to add Jquery prototype
Thanks Vivek

$(".WIWC_T1 a").removeAttr('onclick');

Show Specific DIVs if Selected DIVs are Hidden

Fiddle - http://jsbin.com/udumibO/1/edit
If these divs are hidden (they're hidden by the .hide() event handler) then I want two other divs to show.
I tried the following on document.ready, but it's not working, and I have no idea why.
Here's the code.
if ($(".select-properties, .div-properties, .image-properties, .table-properties").is(':hidden')) {
$(".starter-properties, .canvas-properties").show();
}
Any help is greatly appreciated.

Use this:
if ($('.select-properties, .div-properties, .image-properties, .table-properties').css('display') == 'none') {
$(".starter-properties, .canvas-properties").show();
}

Try this link
It might be helpfull for you.
http://jsfiddle.net/rahulsahu/eveKU/
HTML :
<div id="first-div">first div</div>
<button id="first">hide above div</button><br/>
<button id="second">show another div when first div is hidden otherwise don't show</button>
<div id="second-div" style="display:none;">Second div</div>
JQuery :
$("button#first").click(function(){
$("#first-div").hide();
});
$("button#second").click(function(){
if($('#first-div').is(':visible')) {
// do nothing
alert("first div is not hidden");
}
else{
$("#second-div").show();
}
});

I managed to accomplish the effect I wanted using the following function.
$(".select-tool, .div-tool, .image-tool, .table-tool, .edit-tool").on("mouseup touchend", function() {
if ($(".select-properties, .div-properties, .image-properties, .table-properties").is(':hidden')) {
$(".starter-properties, .canvas-properties").show();
$(".select-properties, .div-properties, .image-properties, .table-properties").hide();
}
});
Here's the fiddle - http://jsbin.com/udumibO/3/edit
I'm sure there's a neater way to write this, but this is the best I could do to accomplish the effect I wanted.

Ok, it looks like a lot of code here. :P
Great, so I think, you just want to create a tab system and initially you want to hide all the tab content and show something else by default.
Well, Here is something which doing same as your code, and also solving your problem.
$("span", ".nav").click(function(){
var target = $("." + $(this).attr("class").replace(/tool$/g, "properties"));
target.show().siblings().hide();
$(this).addClass("active").siblings().removeClass("active");
});
$(".select-properties, .div-properties, .image-properties, .table-properties").hide();
jsfiddle: http://jsfiddle.net/ashishanexpert/c7eJh/2/
JSFiddle code is well commented.
Let me know, if something you want to add or ask about this. Good luck!

You can use
$(".target").toggle(function () {
// your remaining action. something written here
});