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;}

Clicking a div changes another div's content

I'd like the content inside <div class="tcw-content"> to change, when another div is clicked, however I have never used Ajax (maybe it doesn't have to be done in Ajax, but I can't think of a JS/CSS way, examples appreciated :) ), would anyone have any examples for me please? For example, the user will click onto <li id="tab-tab_700964" class="grp"><a>Group A</a></li> and as soon as the hotspot is clicked, the content inside the above mentioned div will change.
How can I achieve this?

You can use jQuery, example:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tab-tab_700964 a').on('click', function(){
$('.tcw-content').html('hey');
});
});
</script>
<li id="tab-tab_700964" class="grp"><a>Group A</a></li>
<div class="tcw-content">
hello
</div>

Go take a look at jQuery. It makes this pretty easy. Your example would look like this:
$('.grp a').click(function(e) {
e.preventDefault();
$('.tcw-content').html('new content goes here');
});
To explain, $ is the jQuery object. When you use it as a function with a string, it finds all elements matching that selector, almost exactly the same way CSS selectors work. Then, there are a variety of functions you can call on these matched elements. In this case, we call click() and pass it a function that will be run when the link is clicked on. Inside of that function, we find the div using $('.tcw-content') and update its contents by using the html() function.
jQuery's documentation is quite good. Start playing with it, maybe using jsFiddle as a sandbox.

Maybe you are looking for a content slider.
HTML Content Slider
:: Featured Content Slider v2.5
Examples
40 examples

do it with jquery. Include the jquery library, and then add a new javascript file with a document.ready event. Inside the document ready, just add something to listen for when your div is clicked. Read here:
http://www.w3schools.com/jquery/event_click.asp
http://api.jquery.com/click/

Adding text to a speech bubbles in real time

I have an image that will form the background of an html page, and I want to superimpose speech bubbles over it. I've figured out how to make bubbles with css, and set their placement. But I cannot figure out how I will populate the bubbles (the div elements). Text messages will populate files, and I need to grab the strings and display them in the bubbles, refreshing the bubble content as messages come in. Any thoughts?

Assuming one of your bubbles contains a DIV which looks like this:
<div id="bubble1">This is the text</div>
You can use Javascript to easily change the text content. Using a JS library like jQuery is recommended. Here is a code example which changes the text:
<script>
$(document).ready(function()
{
$('#bubble1').text('This is the changed text'); // to change the text
$('#bubble1').html('This has <b>some</b> formatting'); // to change the html
});
</script>
Don't forget to include jQuery itself with a line like:
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
I couldn't understand where you are getting your strings from, if you let me know, I could update the answer.
If you are unfamiliar with jQuery, take a look here.

I think this will answer your question:
http://nicolasgallagher.com/pure-css-speech-bubbles/
Keep in mind that this is css3, so older browsers can have problems with that.

jQuery Fade-In OnLoad?

Okay what I am simply looking for is a short/easy script that will allow me to replace the DIV name so that I can have multiple divs on a page fadein once loaded (including images within them).
Any ideas?
Thank you!

Give the divs a common class (e.g. "fade") and use code similar to this
$(document).ready(function(){
$(".fade").hide(0).delay(500).fadeIn(3000)
});
http://jsfiddle.net/5td73/

Put this code in your javascript file, for each element you want to fade it add the class="fadeOnLoad" code and make sure to add display: none to the css for any elements you want to have hidden on load:
$(document).ready(function() {
$('.fadeOnLoad').fadeIn('slow');
);