I'm ready to make a tool to improve my work. Please look at the code.
<div class="container width-200"></div>
<div class="container width-300"></div>
I want to set the first div width to 200px and second to 300px using jquery dynamicaly.
I don't know how to handle it in Javascript.
How can i do this work?
You need to find element has class width-* that * should be only digit. You can use .match() to check class name. If class name is right, add digit of class to width of element.
$("[class*=width-]").each(function(){
var match = $(this).attr("class").match(/width-([\d]+)/);
if (match)
$(this).css("width", match[1]);
});
div {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="width-100">100</div>
<div class="width-200">200</div>
<div class="width-300">300</div>
Please use below in js:
$(document).ready(function(){
$('.width-300').css({'width':'300px','border':'1px solid #000' });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container width-300">
Width 300
</div>
.container
{
margin:0 auto;
}
.width-300
{
width: 300px;
}
I think you should use custom attributes.
HTML 5 explicitly allows custom attributes that begin with data. So, for example, <p data-date-changed="Jan 24 5:23 p.m.">Hello</p> is valid. Since it's officially supported by a standard, I think this is the best option for custom attributes. And it doesn't require you to overload other attributes with hacks, so your HTML can stay semantic.
Source: http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
Related
I'll make to quick. I'm trying to position an element wrt my target. Normally we have prepend (before the target) and append (after the target). But is there smth along those lines that helps us place that element ON what we’re targeting, instead of putting it before (prepend) or after(append)?
If you want new HTML Elements add to target... I don't know if this is what you want.
$('.target-x').html('<div class="target-b">new elements</div>')
.target-x {background:#bbb;padding:10px;}
.target-b {background:#fff;color:#222;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="target-top">Elements</div>
<div class="target-x">New Elements Target</div>
<div class="target-bottom">Elements</div>
</body>
You can use position:absolute on a :before to place it ON the actual content.
HTML
<div class="example">This is an example div</div>
CSS
.example {
background-color: #5BC8F7;
}
.example::before {
position:absolute;
content: "Above!";
background-color: #FFBA10;
}
I am required to use a specific plugin in Wordpress for a project. It outputs several DIVs, each with identical IDs.
However, I need to isolate them individually, so that I style them in CSS separately.
Normally I would either alter the PHP or use nth-child...but this plugin basically makes both of these options impossible...long (and frustrating) story.
So I am looking for a Javascript/jQuery solution that I can plug into a global .js file and execute using a $(document).ready statement after page load instead.
I just can't seem to figure it out. The js/jquery code would need to alter the html output by this plugin after it's finished loading. It would scan the page, locate each instance of #commonName, and append a number onto it OR add a class name to it. Doesn't matter how it's done, as long as each DIV becomes unique in name.
The plugin outputs something like this on the page (simplified):
<div id="commonName"></div>
<div id="commonName"></div>
<div id="commonName"></div>
I would like my Javascript or jQuery code to locate and change every instance of this ID, and turn it into this:
<div id="commonName" class="copy-1"></div>
<div id="commonName" class="copy-2"></div>
<div id="commonName" class="copy-3"></div>
Or this would be fine too:
<div id="commonName-1"></div>
<div id="commonName-2"></div>
<div id="commonName-3"></div>
Thanks for your help everyone!
This will take all of the ids that have the id value of commonName
The using an each loop, we can change the id value using the attr function.
Hope this helps :>
$("[id='commonName']").each((i,el)=>$(el).attr('id','commonName-'+i))
console.log($("body").children())
body div {
width: 50px;
height: 50px;
display: inline-block;
}
#commonName-0{
background: red;
}
#commonName-1{
background: green;
}
#commonName-2{
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="commonName"></div>
<div id="commonName"></div>
<div id="commonName"></div>
$('[class*=" col-"], [class^="col-"]').css('text-decoration','underline');
[class*=" col-"], [class^="col-"]
{
background: #39F;
color: #FFF;
border: 10px solid #16A;
height: 50px;
text-align: center;
line-height: 28px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="first-class col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="start-with-something-else col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="so many classes
col-xs-6">.col-xs-6</div>
<div class="bootstrap spam helper classes
col-xs-6">.col-xs-6</div>
</div>
</div>
So a very similar question has been asked in the past, but I guess my question involves a little more, namely I'm wondering if this is yet another example that using bootstrap on a production site is a bad idea.
In jQuery( or CSS) you can use the [class^="foo-"] to select elements via the beginning of their selector. But sometimes the target class I'm looking for isn't the first class in the array of classes.
For instance in bootstrap you use a number of helper classes to build up your site. And I'd like to test if an element has any one of the numerous col-* classes that bootstrap uses. But the same elements could have any number of other classes applied. So using mySelectedJqueryElement.is('[class^="col-"]') almost always returns false even when the item has a class that starts with col-.
In this answer to this very similar question they first suggest making a class for just that prefix, however for the same reason you select a framework like bootstrap, I'd rather not edit the core bootstrap code. It that answer they then go on to suggest using a starts with and a contains selector... While that might work, I was wondering if there is any way to explicitly look through the array of classes for any class that starts with col- or foo-, if you will. I do realize that I could write a function that extracts the array of classes and runs a regex function to manually check the beginning of each of the classes in the array to see if any of them start with a predetermined pattern. This just seems like something that should exist in javascript or jQuery.
There are a few other questions and answers that are similar, but none of them solve this problem entirely and accurately.
Marked as a duplicate of an included question... And I know it is similar, but I guess I'm asking two questions here which is bad practice. One, I was wondering if there was any better answer to the problem of selecting the elements by checking the prefix of all classes. The current answer is using two selectors to accomplish a single task if this is really the only way then I guess I can live with it however it seems inefficient and non-specific. In theory the wildcard selector with whitespace should never find anything that you don't want it to, but it seems heavy handed. Secondly I assumed that the virtual DOM stored classes in an array, but apparently I was mistaken. I definitely feel that this is a bad practice to store a series of variables as a single string.
My second question is if there is any quick fix to bootstrap that could solve this problem more like what was suggested in the "duplicate" question where they suggest to make "apple-" a new class. Would there be a quick regex replace I could run that would make "col" a class on its own? That sounds like a better solution to this problem, but that would make Bootstrap classes even less "object-oriented" which is why I think I'll be dumping them all together.
Atribute contains string selector:
http://api.jquery.com/attribute-contains-selector/
from the jQuery api:
This is the most generous of the jQuery attribute selectors that match against a value. It will select an element if the selector's string appears anywhere within the element's attribute value. Compare this selector with the Attribute Contains Word selector (e.g. [attr~="word"]), which is more appropriate in many cases.
The contains word selector (for comparison):
http://api.jquery.com/attribute-contains-word-selector/
From the research I've done and the responses to this question, I've determined that at this point in time there is no clean way to perform this action. So I have resigned to using a hack job that breaks the classes down into an array and performs a check on the start of each class for the string.
$.fn.hasClassStartingWith = function(needle){
var found_match = false;
$(this).each(
function(i){
var classlist = this.className.split(/\s+/);
$.each(classlist,function(){
if(this.startsWith(needle))
{
found_match = true;
}
});
}
);
return found_match;
}
$("*").each(function(){
if($(this).hasClassStartingWith('col-'))
{
$(this).css('background','#39F');
}
});
[class*=" col-"], [class^="col-"]
{
background: red;
color: #FFF;
border: 10px solid #16A;
height: 50px;
text-align: center;
line-height: 28px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="first-class col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="start-with-something-else col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="so many classes
col-xs-6">.col-xs-6</div>
<div class="bootstrap spam helper classes
col-xs-6">.col-xs-6</div>
</div>
</div>
<p>If the javascript worked then the above column elements have a background of blue instead of red.</p>
I need to add a CSS/HTML 'fragment' to a page to change the text in the following:
<div>
<h3 class="category-heading">Keep this text:</h3>
</div>
<div>
<h3 class="category-heading">**Change this text**:</h3>
</div>
I have tried the following:
<style>
h3.category-heading {
text-indent: -9999px;
}
h3.category-heading::after {
content: “New and Featured Products”;
text-indent: 0;
display: block;
line –height: 120%;
}
</style>
But this changed both instances of the text.
Is it possible to specify the second instance of the css class to be changed? or is it possible to select and change the wording in the second css class by adding a html fragment?
Supposing you can use Javascript by including it an HTML fragment :
Depending on the inclusion mecanism (we need to know more about the tools you use), something containing :
<script>
window.onload = function(){
document.getElementsByClassName("category-heading")[1].innerHTML = "New and Featured Products";
}
</script>
If the first solution breaks some features of your website (because It could override defined behaviour), you should use :
<script>
document.getElementsByClassName("category-heading")[1].innerHTML = "New and Featured Products";
</script>
Why not to use an id attribute?
<h3 class="category-heading" id="itemThatShouldBeChanged">**Change this text**:</h3>
and than just
#itemThatShouldBeChanged {content:"other text"}
You should take a look at nth-child
Be aware that this is CSS3
this will give you the following css selector :
div:nth-child(2) h3.category-heading::after
I am trying to remove the css of an image. My actual code doesn't include this CSS, but it comes from a generate code. I can't touch that neither modify anything that is related to the generared code.
This is my real code
<div class="bubble">
<img id="one" src="/static/webupload/MyronArtifacts/images/descarga.png" style='float: left;' alt="Quotes">
<p id="comment11">I was very impressed with the unique design and high quality of this pen.
</p>
</div>
<div class="quote_speech">
<div class="name" id="author11">By PEDE</div>
<div class="company" id="company11">September 25,2013</div>
</div>
This code is added to a div from the generated code name rightCol
And there is a CSS class declare the following way
#rightCol img{
display:block;
float:none;
margin:0 auto 0 auto;
position:relative;
border:0;
padding:3.5px 0;
backgroun-color:#fff;
width:166px
}
The issue is on width:166px.
The bad new for me is I can't remove it manually(Generated code).
So I was thinking to use javascript for this.
using this $('#one').hasClass('img')
But this returns me false.
I did a demo getting in JS FIELD getting the CSS. DEMO
If I remove the 166px from the CSS it works, but that solution is not available for me. And the has class returns me false. Wondering why?
Thanks in advance
Actually you can use !important to override this behavior but it is better to declare more specific rule rather than using !important
#rightCol img#one {
width: auto;
}
Demo
Hi I checked your demo page and just added one line to your document.ready function.
$(document).ready(function () {
$('#one').css('width', 'auto');
randomtip();
});
check and let me know if still problem exist.