jQuery and CSS selectors - javascript

In the past I used the following code to take the take the text in the data-placeholder attribute and use it as a placeholder text for my div.
[contentEditable=true]:empty:not(:focus):before {
content:attr(data-placeholder)
}
This worked great, but in my current project we need to do the same thing except it's entirely built using jQuery. I know jQuery has .empty(), .before(), :not(), and .focus() functions. With the way the jQuery selectors work, is it possible to use the CSS selector in the jQuery selector like so?
var div = $([contentEditable=true]:empty:not(:focus):before);
If not, then is there a better way to do this when working with so many functions?

Simple solution is to append a style tag:
var rule ='[contentEditable=true]:empty:not(:focus):before {'+
' content:attr(data-placeholder)'+
'}';
$('head').append('<style>'+rule +'</style>');

Related

javascript - Append multiple elements to the <input> tag when focused using jQuery

I came to this tutorial site for their awesome Material Design input boxes. The implementation was very easy, but I just don't like the idea of including two <span> elements (please do check the code to know what I'm talkin' about) so instead I like to append those two elements to the <input> tag when it is focused with the use of jQuery's append() method. But as a newbie to the jQuery world, coding it myself was difficult so I will be needing some help here.
The following example code (below) is what I currently have but they don't work for me.
$("input").focus(function() {
var $elem = '<span class="firstClass"></span>' + '<span class="secondClass"></span>';
$("input").append($elem);
});
Any help?
Thanks.
If you read your link and the html they are not appending a span in an input which is not possible because input cannot contain children elements in html.
You might mean to append to the parent of the input though and that would be simpler.
$("input").parent().append($elem);

Avoid inline styling in jquery while appending elements dynamically?

I'm experimenting with jQuery and I made this fiddle. What it basically does is wherever you click, a div element is appended on the body to that clicked coordinates.
I've managed to do it but I would like to avoid the inline styling, i.e.;
this line : $('body').append('<div style="top:'+y+'px; left:'+x+'px;"></div>');
Is there any way I could do this with any jQuery methods where the CSS can be set for every particular div as soon as it is appended?
If it is to function as your fiddle does, stick with inline styles. To dynamically write CSS into a style tag in the dom for every element, while possible, would be hyper-wonky.
If you like it more jQuery like, you can write it like this:
$('<div/>').css({'top' :y, 'left':x}).appendTo('body');
but that essentially does the same thing you're already doing.
See it here
After appending all dynamic elements you can append a style tag directly to the head to avoid any inline style in your code.
E.g.:
$('head').append(
'<style type="text/css">' +
'div{ top: y; left: x}' +
'</style>'
);
You can also use style sheets for performance purposes. See: https://learn.jquery.com/performance/use-stylesheets-for-changing-css/

Use JavaScript to rewrite CSS with class and tag at the same time

I am able to easily change the style or the tag of an element based on certain criteria using JavaScript:
document.getElementsByTagName("mainclass")[0].style.color:#ffffff;
However, is there a way to do this is the style contains multiple classes and a tag like so
.mainclass .secondaryclass div td {
color: #000000;
}
The following is not working for me so im sure there is a totally different way of doing it:
document.getElementsByTagName(".mainclass .secondaryclass div td")[0].style.color:#ffffff;
...
The other option if easier is to figure out how to use JS to embbed a external style sheet (and not at the end of head, just where the JS code is thats where the CSS should go)
Thanks!
getElementsByTagName does not accept CSS selector syntax. You're looking for querySelectorAll but you'll have to iterate over the returned list to assign the style, and it's not completely supported across browsers.
...which is why everyone uses jQuery.
Example, assuming you want to modify just the first matched element:
document.querySelectorAll(".mainclass .secondaryclass div td")[0].style.color = '#ffffff';
Note the change from : to =, and wrapping the color value in quotes. JavaScript has different syntax from CSS; I suggest that you take some time to learn it.

jQuery change text in button

I need to change the text in a button but it's not working. This is what I've come up with thus far:
var newElemen = $(<button text='Text changed..'></button>);
document.append$(newElemen);
I've also prepared a jsFiddle example.
Don't spend too many horses on this.
You need to first look at how jQuery's selector works. It works similar to CSS selectors (if you're not familiar with that I suggest you start with something more basic).
If you need a quick review on jQuery syntax. In your example you need to use the element selector $('button') and then you'll want to apply the .text() function to change the text for the button. So if you put it together. You'll want to select the button and then apply the text() function, passing in the string you want to change the text to, to change it's text.
$('button').text('Insert Text Here');
Use .text method using button selector
$("button").text('Text changed..');
$('button').text('new text');
fiddle: http://jsfiddle.net/zLf3k/3/
jQuery selector must be String
created new DOM element when you use html element on jQuery selector
use $(document).append instead of document.append$
$('button').text('some text');

How to access this element with jQuery

I've got this element that's not precisely defined as a div or anything but just white space popping up inside the html. Can't get to it with jQuery to remove it.
Type of element is highlighted in the screenshot.
Im not expert, but maybe you could use .prev() method.
Something like
$('#main .content').prev();
Pure Javascript to select it:
var textNode = document.getElementById("main").getElementsByClassName("filter-navigation")[0].nextSibling;
and remove it:
textNode.parentElement.removeChild(textNode);
jQuery simplifies the selection a bit, but the removal has to be done the same way since jQuery doesn't like removing text nodes:
var textNode = $("#main").find("filter-navigation")[0].nextSibling;
textNode.parentElement.removeChild(textNode);
The answer is not simply.
jQuery can map objects with structure. It's very hard to catch just whitespaces as DOM elements and remove them.
I cant suggest 2 alternatives:
Use jQuery to get parent tag, extract innerHTML and user regex to remove "extra whitespaces" between tags:
$(document).ready(function(){
var container = $('.product-container');
container.html(container.html().replace(/>\s+</i, '><'))
});
Use css to clean how looks my content inside that tag as suggests thirtydog here
Hope this help!

Categories