We Keep Coding

JQUERY CSS: Is it possible to trigger css filters through JQuery?

I'm working on a popup menu for mobile devices and would like for the website to blur and lighten in opacity when the menu pops up and go back to normal when it's closed. I figured a good way to go about doing it would be by triggering a css filter which led me to be unsure of the proper syntax to use in JQUERY. I looked into the matter more and so far I haven't been able to find examples of css filters being triggered in jquery so I continued playing with it to see if I could get it to work and so far have been unsuccessful.
Here are the scripts I came up with.
$("#menu").click(function(){
$("#popup").fadeIn('slow');
$("#close").css("display", "block");
$("#menu").css("display", "none");
$("p").css("opacity", 0.33);
);
$("#close").click(function(){
$("#popup").fadeOut('slow');
$("#close").css("display", "none");
$("#menu").css("display", "block");
$("p").css("opacity", 1);
});
The way I was trying to add in the css filter is
//This one shows no sign of the blur working but opacity works
$("p").css({"opacity": "0.33",
"filter": "blur(88%)",
"-webkit-filter": "blur(88%)",
"-moz-filter": "blur(88%)"
});
//These two break the whole code from working at all
$("p").css({"opacity": "0.33",
"filter: blur(88%)",
"-webkit-filter: blur(88%)",
"-moz-filter: blur(88%)"
});
$("p").css({"opacity": "0.33",
"filter: blur()" "88%",
"-webkit-filter: blur()" "88%",
"-moz-filter: blur()" "88%"
});
Of course these are attempts to create the blur which I added to the "menu" button. Here's a fiddle of it https://jsfiddle.net/Optiq/hsvvpfzu/5/
The more I looked and couldn't find anything made me wonder if this is at all possible. Maybe it's just me not knowing specific enough stuff to search for in order to find something relevant. Any source of info talking about using css filters in jquery are welcome.
UPDATE
The fiddle just simulates the code I've been working with on my site so it wasn't clear as to the element I was trying to effect. I have each page wrapped in a div that has a class name but no id. The reason I didn't give it an id is because I use it over and over on each page, so I figured it would be cleaner to just use the jquery to target the class and add attributes that way rather than giving each div a unique id then passing them all into a variable or something.

Of your three examples, the first one uses the correct syntax. The problem is that blur doesn't accept percentage values, only pixels. Defining them as pixels as such appears to have the desired effect for me:
$("p").css({
"opacity": "0.33",
"filter": "blur(1px)",
"-webkit-filter": "blur(1px)",
"-moz-filter": "blur(1px)"
})
Hope this helps! :)

Why not you assign and remove clss instead of css, implement with class is better one, you can also assign CSS but it require more code.
$(document).ready(function(){
$("p").addClass("myClass");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.myClass{
opacity: 0.33;
filter: blur(88%);
-webkit-filter:blur(88%);
-moz-filter: blur(88%);
color:red;
}
</style>
<p>Sandip Patel</p>

Access class with specific text content and display:none

I have a large Joomla CMS Website I'm working on.
Problem: I need to hide a menu tab globally across the entire site. The menu item I need to have does not have a unique ID or class; but instead shares the same class as the other tabs I need to keep on the page. 70% of the tab I need to remove shows in 4th order so I started with the below.
.tabs:nth-of-type(4)
{
display:none !important;
}
But! Seeing as how the rest is in different order, this wont work. The tab in question I need to remove looks like the below across the mark-up.
Update: This is what I currently have via the suggestions below but it isn't working:
$(document).ready(function() {
$('.djaccTitle:contains("Location").css( "display: none;" )')
});
<span class="tabs">Location</span>
Is there a way to write an if statement or similar lightweight solution that can sniff out text content within the class, so if it says Location, then hide?
I would like to find a solution like this, as opposed to going through 1000 files of mark-up removing manually. Cheers for any pointers
Update: This is what I have via the current suggestions below but it isn't working!
$(document).ready(function() {
$('.tabs:contains("Location").css( "display: none;" )')
});

I do not believe what you are asking for exists with pure CSS at this time.
What I would do is use jQuery's :contains() selector:
$('span.tabs:contains("Location")')
or even better:
$('#idOfTabsContainer span.tabs:contains("Location")')
And of course, don't forget to put this in a document.ready to ensure that your DOM element has been loaded successfully:
$(document).ready(function() {
$('#idOfTabsContainer span.tabs:contains("Location")')
});

Jquery :contains() Selector should work. I think you have an error in .css() function syntax.
Please try with:
jQuery(document).ready(function(){
$( '.tabs:contains("Location")' ).css( 'display', 'none' );
});
Hope this helps

There used to be a :contains selector that they were going to add to CSS.
But alas, you may have to resort to some JS, as addressed already here
jQuery's got your back though:
$('.tabs:contains("Location")')

Problem: I need to hide a menu tab globally across the entire site.
Solution 1: Disable the menu item. Boom, it is gone from your menus, site wide.
Solution 2: Hide the menu item with css by adding a unique class to the menu item itself and then hiding it with css.
.hide-me-with-css {display: none;}

Script issue on website

When I use dynamic options, the second option looks strange when the script is run.
I've made a fiddle with the problem http://jsfiddle.net/niklasro/GqGGA/ but it won't run the script that should activate the dynamic option:
function cities(obj){
if(obj.value == '3'){
//undisplay cities options municipality_control2
document.getElementById('municipality_control').style.display='none'
}else{
$('#cities').load('/cities?regionId='+obj.value);
}
}
How can my problem be resolved?

The problem is a pseudo css class that jQuery adds a style called active and then forces it to behave. Because this is the active control it has the active styling. You can see it in your example if you click on the dropdowns.
If you force remove this styling with code like this http://jsfiddle.net/mGAs4/5/ it will go away. You can also add CSS to change what the active class does for this type of element.
Something like
select:active { background:white; }
I think this will also work
select.active { background:white; }
But I have not played around with jQuery's active support much.

jquery set element hover

I have a page with 6 menu buttons. Each button has he's own background for hover event (CSS). Everything works fine, but now I want to make that when I'm selecting a page, I want to make that background static. Is it possible to make it with javascript? This would help the visitor to know what type of buttons he was selected.
If you don't get what I mean, I'll wrote a small code in jquery (is this just an example):
$(document).ready(function(){
$("#button-index1").makeItStaticBackground();
});

You must add a class (Ex menu-element) to element you want apply css hover effect and remove this class when the element is active.
CSS:
.menu-element:hover{
...
}
javascript:
$(document).ready(function(){
$("#button-index1").removeClass('menu-element');
});

I usually solve this by adding a active class on the server, or via JavaScript. Via JavaScript you can use some location.href === a.href magic. And in CSS it's simple:
.menu a:hover,
.menu a.active {
// definitions..
}

Press button to "Bold" & press again to "Unbold"

I am new to javascript. I want to make a button in html using javascript. When user try to press the button
the specific <#id> is going to be "Bold" and press again to "Unbold".
How can I do this ? please refer any helping material.
Thanks !

Since the learning experience is vital, especially for Javascript, I'll guide you in the right direction.
First, you should look into event binding and mouse event handling with jQuery. You can do some powerful stuff with this knowledge, including what you would like to do.
Second, look into basic jQuery selectors. It's not hard to learn the simple CSS-based selectors that you can use to select your desired id.
Third, look at the css() function of jQuery, which falls under jQuery's CSS category. You can use this to set different properties of elements, including font weight.

I am guessing, you are trying to build something like RTE, So, applying class to give bold effect would be better and efficient solution to this.
It can be done as simple as this
$(".boldtrigger").click(function() { //boldTrigger being the element initiating the trigger
$(".text").toggleClass("bold"); //text being the element to where applied to it.
});
CSS
.bold { font-weight: bold; }
Demo

JQuery's toggle() method should take care of this.
$('#foo').toggle(function() {
$('#bar').css('font-weight', 'bold');
}, function() {
$('#bar').css('font-weight', 'auto');
});
When you click #foo, it will do the next function in sequence, so this is exactly what you want.

here's another question that uses the .toggleClass for a vice versa effect. you need to create a class for that certain element since it adds and switches classes back and forth.
Using JQuery to toggle between styles
for a one way change:
$('button_selector').on('click',function(){
$('item_to_bold_selector').css('font-weight','bold');
});
references for this:
selectors
.on for event handling
.css for adding styles on the go

here is the code to bold & unbold text
<div id="contentDiv">
content of the page.
</div>
<input type="button" value="Bold" id="font-button"></input>​
jQuery("#font-button").on("click",function(){
var button = $(this);
var contentDiv= $("#contentDiv");
if(button.val() == "Bold"){
contentDiv.css("font-weight","bold");
button.val("UnBold");
}else{
contentDiv.css("font-weight","normal");
button.val("Bold");
}
});​
DEMO

$('button_selector').on('click',function(){
var itemToBold = $('item_to_bold_selector');
if (itemToBold.css('font-weight') == 'bold') {
$('item_to_bold_selector').css('font-weight','normal');
} else {
$('item_to_bold_selector').css('font-weight','bold');
}
});
Based off of Joseph's answer, but with the unclick criteria.

Since you tagged this post with jQuery I assume you are looking for a jQuery approach.
If you want to use a CSS class to add the bold style, I recommend you look at using toggleClass: http://api.jquery.com/toggleClass/
Lots of samples on that page...

I like using toggleClass() (API reference)
$("#button").click(function(){
$("#element").toggleClass("bold");
});
If it has ".bold" when clicked it will unbold and vice versa.