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>

How do you run javascript with only a CSS class?

I am working on a web site project which requires that the web page display tooltips on hover. For reasons I won't go into here, I decided to use a library from a site called dyn-web.com. The library works great but I need to make one small change to the way it works, which will make it a perfect fit for my application. Trouble is, I can't figure out how it works!
Everything I've read says that you can't execute javascript code from within CSS. But that seems to be exactly what this library does. To create a tooltip for any element (anchor, div, span, etc), all this library requires you to do is:
Include a <script src= > tag to the library file
Add two class names to the HTML element that will host the tooltip, one called "showTip" and the other is a key into a JSON object containing the tooltip text
Add the tooltip text to the JSON object mentioned above
Create a style to format the tooltip how you want it to look
If you'll notice, nowhere in these steps is mention of any event handlers. Moreover, there's no class (that I can find) called showTip. There's no JQuery or other dependencies. So how does the javascript get executed?
I don't want to jump in and start changing the library willy-nilly without knowing how it works, and I've been pulling out my hair trying to figure it out. Can one of you smarter-than-me folks explain it?

You can't run JavaScript from a "CSS Class".
The example you give runs JavaScript by including a <script> element.
I'm not going to reverse engineer it because it is not formatted in a way that is particularly human readable. That said, searching the file finds showTip so it presumably searches the DOM for that HTML class (maybe with querySelectorAll since it certainly uses that method for something) and binds event handlers with JavaScript (probably with addEventLister since it contains a call to that method).
If you'll notice, nowhere in these steps is mention of any event handlers.
The JS file uses addEventListener
Moreover, there's no class (that I can find) called showTip.
You said you added it to an HTML element in a previous step. As mentioned above, the string appears in the JavaScript file.

From the steps you listed, it seems as if Dynamic Web Coding library uses the JavaScript to apply CSS attributes into elements. You can not run JavaScript inside CSS, but you can certainly apply CSS using JavaScript!
What the library probably does is look at all of the elements with class showTip with JavaScript using document.getElementsByClassName("showTip"). Then, it looks at the other class on that element and assumes that as the key to the tooltip with the tooltip text.
Then, it probably creates an element for the tooltip using document.createElement() and then injects that into the document using document.appendChild() or document.insertBefore(). They can probably add some class to the tooltip so your CSS rules are applied using the .className property.
It also likely used document.addEventListener() to listen for when the user hovers over and leaves the element. You don't need to add this code because the <script> tag you added has called document.addEventListener() for you.
All of these things require something known as the DOM which is something JavaScript coders use to manipulate the HTML document. This is actually really powerful and cool, so you can check out a good tutorial on it at TutorialsPoint.

It works with event delegation, it listens to events on the entire body and ignores events on elements without the magic class names (showTip).
Excerpt from http://www.dyn-web.com/code/tooltips/js/dw_tooltip_c.js:
initHandlers: function() {
var _this = dw_Tooltip;
if (_this.ready) {
return;
}
if (!_this.forTouch) {
if (_this.activateOnClick) {
dw_Event.add(document, 'click', _this.checkForActuator, true);
dw_Event.add(document, "mouseup", _this.checkDocClick, true);
} else {
dw_Event.add(document, 'mouseover', _this.checkForActuator, true);
}
dw_Event.add(document, "keydown", _this.checkEscKey, true);
if (!_this.activateOnClick && _this.activateOnFocus) {
if (window.addEventListener) {
dw_Event.add(document, 'focus', _this.checkForActuator, true);
} else if (window.attachEvent) {
dw_Event.add(document, 'focusin', _this.checkForActuator);
}
}
} else {
dw_Event.add(document, 'mouseover', _this.checkForActuator, true);
}
_this.ready = true;
}
}

There is one way by which you can make custom tool-tip(s). This is little out of box & requires only HTML and CSS to perform the magic.
"Use JS to add more interactivity".
<html>
<style>
h1 { position: relative; }
h1:hover:after {
content: attr(data‐hover‐response);
color: black;
position: absolute;
left: 250px;
top: -40px;
border: solid 2px gray;
background-color: red;
}
</style>
<body>
<br><br>
<h1 data‐hover‐response="I am tooltip !"> I will show tooltip on Hover! </h1>
<body>
</html>
CodePen : http://codepen.io/anon/pen/bdPQxP

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

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');
);

jQuery - dynamically remove head elements on click

Does anyone know if you can remove head elements on a button click and how to do it with jQuery?
I am trying to get rid of certain script tags from the html head when a button is clicked.
For instance. I have 1 screen view with a slideshow controlled by an external javascript file. When I click on a button "Click to get rid of this elements JS" I want to remove the external javascript path from the HTML Head.
Any ideas. Have been at this thing for a week or so.

You can add an id to a script element then remove that ID:
<script type="text/javascript" src="init.js" id="initJs" ></script>
<span id="removeScript"></span>
$('#removeScript').click(function() {
$('#initJs').remove();
});

You can do this sort of thing using javascript, sure, but before you do it, you might want to ask yourself again why. Here's a link describing how to do it in pure javascript with a jquery example provided by the other answerer:
http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml
But try to keep in mind that most modern browsers will keep these external resources in memory for at least as long as the page is open. Therefore, you won't really be doing much.

I don't think its a good Idea to remove Entire HEAD Element. 'Cause your Page may contain some more Elements (i.e., title, style..) which are appended to Head Element. If you want to remove a particular script Element do something like
$(function() {
$('input[type=button]').click(function() {
$('script[src=path/file.js]').remove();
});
});
Edit :
var flag = false;
function breakTheCode() {
if(!flag) {
//run your code
}else return;
}
$(function() {
$('input[type=button]').click(function() {
flag = true; //flag is set, so we no more using/ running your code
breakTheCode(); //call you function/method
});
});

For my part the best solution is to use ID on the scripts.
I read many page over the web, try many solutions, and the only one who works fine every time is to remove a script like a div with an id !

For remove js file : $("script[src='your.js']").remove();