Develop Reference

I can't get a filter to work on a customized tumblr page

I'm fairly new to coding, and I thought I had a good enough grasp on it to add a filter to a premade page, but I'm having issues getting the filter to work on the code below. The two infoboxes are supposed to be visible when you click "all" or "verse a" but not when you click "verse b" or any of the other buttons. If anyone can help, I'd be really grateful! The page itself is here.
#filters {
top: 10;
left: 0;
height: 50px;
width: 100%;
position: fixed !important;
z-index: 999999;
text-align:center;
}
#filters a:visited {
color:#ffffff;
text-transform:uppercase;
font-style:italic;
background:#6fc8de;
padding:3px 10px 3px 10px;
margin-left:3px;
margin-right:3px;
text-decoration:none;
letter-spacing:1px;
}
#filters a:hover {
color:#6fc8de;
background:#202020;
}
<script>
$(document).ready(function() {
$('a.filters').click(function() {
e.preventDefault();
$(".media").not("." + $(this).attr("rel")).hide(500);
$("." + $(this).attr("rel")).show(500);
});
});
</script>

It looks like there were two errors on your page originally (sorry we had you condense your code but it was too much to try and decipher, looking for flaws). If you look at this plunker you will see I have taken your original code (available from your earlier revisions) and modified two lines:
1. Include the infinite scroll plugin
//add this line to include the infinite scroll plugin
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js">
2.In the click function - accept event argument
We need to accept the event argument e as a parameter:
//accept argument e here, to avoid an error where 'e' is undefined in the call to preventDefault()
$('a.filters').click(function(e) {
e.preventDefault();
$(".media").not("." + $(this).attr("rel")).hide(500);
$("." + $(this).attr("rel")).show(500);
});
Edit:
We discovered that omitting the time parameter on the call to .hide() got the elements to hide as desired.

How to enable javascript mouse events on overlapping html elements?

This probably cannot be done, but I have a fixed-position div on top of inline html in the page body. The inline html has clickable elements, and the fixed div has a hover event.
The fixed element is an empty div, so it is invisible.
Currently, the fixed element is blocking click events on the item under it.
Is it possible?
This solution is too complicated
https://stackoverflow.com/a/9616491/209942
Possible solution?
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Thx

The fixed element should not be prevent the clicks from the item under it unless you are stopping the event propagation.
See this fiddle: https://jsfiddle.net/pv0mygz5/
-- it demonstrates that without event.stopPropagation the event should be intercepted by the listener on the span element.
$('#click-me').on('click', function (e) {
console.log('click triggered');
});
$('.box').on('mouseover', function (e) {
//don't stop event from bubbling
console.log('hover triggered');
});
Could you also include a code snippet that demonstrates your problem?

although IE10 doesn't support it you can use
pointer-events: none;
http://jsfiddle.net/leaverou/XxkSC/light/
In this fiddle you can see a drop down being covered with other elements, the other elements has pointer-events: none so you can click on the arrow down button and the click actually goes to the select element itself.
BR,
Saar

You can also try using z-index. Depending on your layout it may not be a solution, but if your front div is invisible, then it shouldn't create unwanted effect. Like this for example:
document.querySelector('#under').addEventListener('click', function(e) {
e.target.style.color = "blue";
});
document.querySelector('#notunder').addEventListener('click', function(e) {
e.target.style.color = "blue";
});
#fix {
width: 60px;
height: 200px;
position: fixed;
z-index: -1;
top: 0px;
border: 1px solid black;
}
#under {
display: inline;
}
#fixnozindex {
width: 100px;
height: 200px;
position: fixed;
left: 75px;
top: 0px;
border: 1px solid black;
}
#notunder {
display: inline;
}
<div id="fix"></div>
<div id="under">Clickable</div>
<div id="fixnozindex"></div>
<div id="notunder">Not clickable</div>

Change DIV display value using Javascript/Jquery function

Update: Fixed and working. Thanks everyone for the help.
Hello I'm making a javascript/jQuery button that when its clicked, a Div appears (display: inline-block), and when its clicked again the Div goes back to display: none. Ideally I would want to animate the movement, but I really just want to get it working first.
My button...
<button> Menu Test </button>
My function (updated)...
<script>
$("button").click(function(){
$("#flexMenu").toggle("slow", function() {
});
});
</script>
The CSS for flexMenu...
#flexMenu {
/* display: inline-block;*/
position: fixed;
float: left;
background: #1f1f1f;
margin: 3.9em 0 0 0;
padding: .25em;
width: 15%;
height: 6em;
border: 2px solid #fff;
z-index: 100;
}
I'm really just to sure how to grab the display property of the ID and change it. I've done a hover function before using CSS ease-out to make divs grow in size when hovered and change class by using $(this).toggleClass(nameOfClass), but I have never tried just changing an element. The other questions like this didn't really fit just changing the display value. Thanks for any help.

you should use jquery :
$("button").click(function(){
$("#flexMenu").toggle();
});

Updated with the jQuery .on() method which allows you to bind specific events to that button (event listeners).
$("button").on('click', function () {
$('#flexMenu').toggle("slow");
});
Fiddle

Change ID of class back after .toggleClass() is changed

jq(".1st").click(
function() {
jq(this).next("div").slideToggle("normal");
jq(this).toggleClass(this).attr("id","standfeat2");
}
);
When I click on the drop button it drops down a message, then I want it to switch back to the original class "standfeat" when its clicked again. I swear I have tried everything and I know its something simple. I'm switching between 2 css id's.. One has a + and one has a - . Thanks for all the help in advance!
This is my CSS:
#standfeat {
color:#185596;
font-size:24px;
padding-left:40px;
background: url(../images/standfeat.png) no-repeat 4px 50%;
line-height:24px;
cursor:pointer;
margin:30px 0px;
}
#standfeat2 {
color:#185596;
font-size:24px;
padding-left:40px;
background: url(../images/standfeat2.png) no-repeat 4px 50%;
line-height:24px;
cursor:pointer;
margin:30px 0px;
} ​

It's probably not a good idea to modify the element id on click, it would be much cleaner to use classes for that purpose (which is why there is a toggleClass method but no toggleId method).
Modify your css to be:
.standfeat { color:#185596; font-size:24px; padding-left:40px; background: url(../images/standfeat.png) no-repeat 4px 50%; line-height:24px; cursor:pointer; margin:30px 0px; }
.standfeat2 { color:#185596; font-size:24px; padding-left:40px; background: url(../images/standfeat2.png) no-repeat 4px 50%; line-height:24px; cursor:pointer; margin:30px 0px; }
And then you can use the following jsL
jq(".1st").click(
function() {
jq(this).next("div").slideToggle("normal");
jq(this).toggleClass("standfeat standfeat2");
}
);
Working demo (not including your images)

I assume you mean classes, not IDs. toggleClass does not toggle between two classes, it either adds or removes a class, f.ex:
jq(this).toggleClass('open');
First time this function is called, it adds the class open. Next time it removes it, etc. You can use that logic in your CSS to style the different states, f.ex:
li{ background: url('plus.png') no-repeat; }
li.open{ background-image: url('minus.png'); }
If you really want to toggle IDs, you could do something like:
this.id = this.id == 'standfeat' ? 'standfeat2' : 'standfeat';

You need to pass in a class name to toggleClass(), not a reference to an object.
jq(".1st").click(
function() {
jq(this).next("div").slideToggle("normal");
jq(this).toggleClass("someClassName").attr("id","standfeat2");
}
);

jQuery override css hide on mouse out

I have a hidden div that I show when the mouse hovers.
Then when I click the text changes and I want the div to be permanently shown. The problem is that it disappears again when the mouse moves off.
Is there a way in jQuery to override the mouse out hide in the css?
Thanks
CSS
.saveCompare {
display:none;
margin-left: 10px;
background-color:#BDD455;
color:#ffffff;
padding: 2px 8px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.listingContainer:hover .saveCompare {
display: inline;
}
jQuery
$("div.saveCompare").click(function() {
$(this).text('Compare Added');
$(this).show();
return false;
});

Thats probably because of your "display:none" in the ".saveCompare". The div still has this class. So its going to hide the div.
Maybe you can write a new class:
.saveCompareNew {
display:inline;
margin-left: 10px;
background-color:#BDD455;
color:#ffffff;
padding: 2px 8px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
And then use this call to remove your old class and add your new class
.removeClass("saveCompare").addClass("saveCompareNew")
Thats probably no the best solution, but it should work.

Before you hide the form on mouseout do a check
$('#yourElement').hover(function(){
//show your form
},function(){
if (!textHasChanged)
//hide your form
});

As far as I know it is not possible to manipulate pseudo-classes in JavaScript (correct me if I'm wrong). You could go for a all-jQuery solution with sth like this:
$('.saveCompare').hide(); //you could do this in the CSS as well
$('.listingContainer').hover(function(){
$(this).children('.saveCompare').show(); //on mouse over show child .saveCompare
},function(){
$(this).children('.saveCompare').hide(); //on mouse out hide child .saveCompare
});
$('.saveCompare').click(function(){
$(this).append('<p>Added</p>').parent('.listingContainer').unbind(); //remove parent element's hover handler when clicked and show .saveCompare forever
});