Show function not working with :before [duplicate] - javascript

This question already has answers here:
Setting CSS pseudo-class rules from JavaScript
(12 answers)
Closed 8 years ago.
Hi I have this click function to show a :before and for some reason it wont show it ? Here is my code thank you!
Also the .cart-toggle:before class is display:none; so it can show.
$( ".cart-toggle" ).click(function() {
$( ".cart-toggle:before" ).show( "slow", function() {
// Animation complete.
});
});
Thank you !

jQuery (and javascript in general) does not support CSS pseudo classes as they are not part of the DOM.
The workaround depends on what you're trying to do, but animating a pseudo class with jQuery is pretty much not possible, so I'm guessing you would have to create an actual element instead of the pseudo class.

Every CSS selector is not allowed in jQuery. Only a little bit of them are allowed, for example . class selector, # id selector, :first-child child selector.
Other than that, jQuery has its own methods of selecting elements of type. Like :checkbox (https://api.jquery.com/checkbox-selector/)
Other CSS selectors are not valid in jQuery.

So you can't do exactly what you want, but you can show/hide your :before in CSS based on a class, and then add that class later on to show it. Example:
Fiddle
HTML
<p>Example</p>
CSS
p.toggled:before {
content: "show-me";
}
JQUERY
$("p").on("click", function() {
$(this).toggleClass("toggled");
});

Related

Using the fadeout method with append() [duplicate]

This question already has answers here:
jQuery - Appending a div to body, the body is the object?
(6 answers)
Closed 7 years ago.
I have the following code:
$('body').on('click' , function(){
$('body').append('<div class="ajax-success"><p>Its Done !!!</p></div>').fadeOut(2000);
});
My intent was to add the div and then remove it with a fadeout effect using the fadeout() function , now obviously the above code fades out the entire html document.
I have seen a few similar threads of SO, but they are with the fadeIn effect and the solution does't apply , also i checked the documentation and there is no callback function available for the append() and appendTo() which could have been a posible solution to my problem, so how do i go about fading the div that i added using the append() method ?
Use appendTo as this will return the appended div instead of body:
$('body').on('click', function(){
$('<div class="ajax-success"><p>Its Done !!!</p></div>').appendTo( this ).fadeOut(2000);
});
Your target is body so that is what fades out. Find a way to target the div you want. One of the easiest ways would be:
$('body').append('<div class="ajax-success"><p>Its Done !!!</p></div>')
.find('.ajax-success')
.fadeOut(2000);
This presumes there is only one 'ajax-success'-classed element on the page. If more, find a way to make your addition unique.

jquery function applying css to image

Well this is my code:
(function($) {
var images = $( "img" );
$("div.featured-card-box").find(images)[1].css("display", "none");
});
It is supposed to apply some css to an image but it doesn't work and as I'm very new to this I have no idea what's wrong. Big thanks for any answers!
Your code looks a little more complicated that necessary:
1) Note that jQuery [1] will be the second image because it starts counting at 0. It will also be a DOM object instead of a jQuery one, so you will not be able to use jQuery methods on it (like you are trying to do).
2) With jQuery, you can access the images using the same method as CSS selectors:
$("div.featured-card-box img")[1]
Assuming you want the second image in the div with the class of "featured-card-box" to be hidden, this should do the trick:
$("div.featured-card-box img:eq(1)").hide();
Although, you could equally well replace .hide() with .css('display','none')
Edit: Here's a Fiddle: https://jsfiddle.net/vf8d9ske/

How to remove this HTML?

I'd like to remove the following HTML:
Buy It
This HTML is added dynamically (not by me).
How is this done in jquery? Or is it better done in AngularJS?
i would solve this by using css..
.css-button {display: none !important} 
since it is added dynamically you would need a trigger function or search repedetly for that special container -> slows down the page
//EDIT with jQuery if necessary
if you really want to do it with jquery, is it always a certain container where the button appears? you could do something like this:
function removeButton() {
$('.css-button').remove();
}
// Listen DOM changes
$('.theContainer').bind("DOMSubtreeModified", removeButton);
see here: http://davidwalsh.name/dom-events-javascript
You can use .remove():
$('.css-button').remove();
In this case you should use :contains to find the button, keep in mind that is a string search:
$( "a:contains('Buy It')" ).remove()

Values of "class" attribute implicitely expand for certain markup elements

I'm experimenting with a third party library written on top of jQuery.
I noticed, for a number of their widgets, that when your source says, for example,
<div id="myWidgetInst" class="their-widget-class-0" ... </div>
Firebug shows that the resulting DOM element reads:
<div id="myWidgetInst" class="their-widget-class-0 their-widget-class-1 ..." ... </div>
How do they do it? Many thanks.
it's probably jquery !
there's probably a function running adding classes to the elements
Not sure I fully understand your question but when looking at the "regular" source of the website, this source doesn't show any modifications to the DOM that happened due to javascript modifications. Firebug does show these updates.
using jQuery, you can add/remove classes simply by using .addClass("className") or .removeClass("className") function on the element you want to modify
They would add classes to the element with jQuery. For example, if the plugin's purpose was to hide all elements on the page (innovative and highly practical, I know), they could use the following:
$(document).ready(function() {
$("*").addClass("my-widget-made-your-element-invisible");
});
With the CSS:
.my-widget-made-your-element-invisible { display: none; }
The methods in which you can manipulate the class attribute in jQuery include the following:
$("#elem").addClass("a"); // adds the class "a" to elem
$("#elem").removeClass("a"); // removes the class "a" from elem
$("#elem").attr("class", "a"); // gives elem a complete class of "a"
$("#elem").attr("class", ""); // removes all classes from attribute

Alternating Row in HTML table Using jQuery

Alternating Row in HTML table Using jQuery with out tocuhing the existing code.
hope this will help you
$(document).ready(function() {
$('#Students > tbody > tr:odd').css("background-color", "green");
});
Since the question is tagged with jQuery, I guess a jQuery solution would work.
You can use the element selector for jQuery, and select all tr elements - $("tr").
Then you can use the appropriate method or methods, to do what you want to do with it.
.css() to change some styling
.hide() to hide it,
.animate() to apply some animation to it and so forth.
To name a few...
One example would be:
$("tr").css("color", "#ccc"); // Change the font color
To get more specific code, you will have to clarify your question and describe what you want to do with the table rows.

Categories

Resources