I am new to jquery and was wondering how I can point one html element equal to another. I want to make it so that whenever something in the h2 tag changes, the text within the p tags will copy the change. Below is how my tags are set up within the class fc-center.
var title = $('div.fc-center h2').text();
$('.fc-center').append('<p>'+'' +'</p>');
with the html looking something like
<div class = 'fc-center'>
<h2> text text</h2>
<p> </p>
</div>
essentially what I want to do is something like this :
$('div.fc-center p').equalto $('div.fc-center h2')
But I am not quite sure how to go about it
I propose this solution:
var title = $('.fc-center').find('h2').text();
var elementsP=$('.fc-center').find('p');
if (elementsP.length > 0) {
$.each(elementsP, function(i, val) {
$(this).empty().html(title);
});
}
https://jsfiddle.net/julian9319/grc0y6qf/1/
Related
Is there a way to insert a field on the post for the H1 of that page? The page has an H1 - I want to put it in the body of the post. I know it's a weird question - and hard to explain.
What I'd like to do is put something on posts, in the html/text part of the editor in the body of the post that pulls the H1 on that page. Not to format it as an H1, but to add the text of the H1 elsewhere in the body of the post.
So for example, in the text editor within my content at the end of a post, I'd have:
"We hope you enjoyed our list of the 10 best [H1 text here]"
Is there something that would do [H1 text here]???
Thank you!
Although html isn't as strict, it's better to use lowercase characters for its elements; H1 ==> h1.
To answer your question you can get text of the h1 element or any element as follows (using jQuery):
//adding jQuery to page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
//getting and appending h1 text
<script>
$(document).ready(function(){
var h1Text = $("h1").text();
// now the text in h1 will be stored in the h1Text variable
// you can use it to append to any element
// append by tag name:
$("span").text(h1Text);
// append by id:
$("#title").text(h1Text);
// append by class:
$(".all-titles").text(h1Text);
});
</script>
Then putting the title in your html:
<div>
We hope you enjoyed our list of the 10 best <span></span>
<!-- or -->
We hope you enjoyed our list of the 10 best <h5 id="title"></h5>
<!-- or -->
We hope you enjoyed our list of the 10 best <span class="all-titles"></span>
</div>
Get the h1 using tag selector... or define an id within the h1 and get it that
way...
$(document).ready(function() {//--> make sure the document is ready
var heading = $('h1').text(); //--> We use the tag selector "h1" and get the text inside using '.text()'
var heading = $('#heading').text(); //--> or use id selector
var div = $('#div'); //--> Get the element to place the value within # -> is for an ID
var span = $('.span'); //--> Get the element to palve the value within . -> is for a class
div.text(heading); //--> placing the variable `heading`s text value inside the text of the declared variable/element `#div`
span.text(heading); //--> placing the variable `heading`s text value inside the text of the declared variable/element `.span`
var p = $('#yes');
p.append(heading); //append or `add to` the variable `p` with the id of "yes" => `#yes`
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="heading">
Yes there is a way
</h1>
<div id="div"></div>
<span class="span"></span>
<!-- Maybe you want to append the H1 to the end of a p tag? -->
<p id="yes">Is there something that would do => </p>
first am sorry for bad English / grammar
am creating something where you show and hide.
but my problem is that when I click show/hide it only brings input box 1 on both buttons. and I want it to show/hide each box.
my problem is that. I don't want to use the id to define show/hide Element
because if I have more than 10 div with input boxes I have to define them all by getElementById I don't want that.
I want when I click on the show/hide it brings input box without getElementById
so that even if I have more then 10 input box to show I only click and show/hide without defining its id
function myFunction(event) {
var x = document.getElementById("mydv");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
x.parentNode.insertBefore(x, event.target.nextSibling);
}
document.addEventListener('click', function(event){
if(event.target.className.includes("dv1")){
myFunction(event);
}
});
<!DOCTYPE html>
<html>
<head>
<title> SHOW / Hide </title>
</head>
<body>
<ul>
<li>
<div id="mydv" style="display:none;">
<p>input box 1
<input type="text" name="textfield">
</p>
</div>
<button class="dv1">SHOW/HIDE</button>
</li>
<li><div id="mydv" style="display:none;">
<p>input box 2
<input type="text" name="textfield">
</p>
</div>
<button class="dv1">SHOW/HIDE</button></li>
</ul>
</body>
</html>
If you want to specify an element on a page, that can be similar in every way to other elements except perhaps text content or something else, realistically you need an id, as this is how JavaScript defines a unique element.
But what you can do, is change your HTML button, to contain a rel, which is an attribute, and then get that attribute and use that to specify which element id you're looking for.
You can then call a function and simply pass "this" as an argument.
HTML :
<button onclick="hideShow(this)" rel="mydv">Show/Hide</button>
JavaScript :
<script>
function hideShow(elem){
var ele = document.getElementById(elem.getAttribute("rel"));
if(ele.style.display == "none"){
ele.style.display = "block";
}
else{
ele.style.display = "none";
}
}
</script>
If you are absolutely abhorrent to using ID's, you can use child nodes and specify which child by number, but this means if ever you change anything, you will break your code, which is foolish. I recommend using unique ID's and simply changing your code in the above ways.
Short and lazy answer to your problems - if you are going to keep your current hierarchy, you can simply find DIV tag inside your LI parentNode (since its the only DIV tag).
Basically it goes like this - button press -> change focus from button to parentNode LI -> finds DIV.
in short - in function myFunction(event) change
var x = document.getElementById("mydv");
to
var x = event.target.parentNode.getElementsByTagName("DIV")[0];
Working example:
https://jsfiddle.net/w2a9zg46/1/
The problem is that getElementById refers to the first element with that id. It simply ignores everything else. Using the same id for more than one element is a bad practice. An id should be a unique reference to that element, use class instead.
I'm noot good in english, so the title may seem a bit odd.
I want to use css function attr() like this:
I mean i have a container <div> and an inner <div> that i want to have width depending on data-width attribute. For example this would be great, but this doesnt work:
<div class="container">
<div data-width="70%">
</div
</div>
.container {
width: 600px;
height: 200px;
}
.container div {
width: attr(data-width);
height: 100%;
}
Is there any noJS way to use attributes like that?
UPDATE: Guys convinced me that the JS is the only way to do this :)
That's not a big problem (but that's bad. CSS, why youre so illogical? Is the difference between content:attr(data-width) and width: attr(data-width) so big ?).
One of the guys had an idea to go through the all elements with jQuery.
That's ok, but it is very... local? Don't know how to say it in english.
Anyway, i remaked his code a little bit and here it is:
allowed = ['width','color','float'];
$(document).ready(function () {
$('div').each(function (i, el) {
var data = $(el).data(),style = '';
if (!$.isEmptyObject(data)) {
$.each(data, function (attr, value) {
if (allowed.indexOf(attr) != - 1) {
style += attr + ': ' + value + '; ';
}
})
if (style.length != 0) {
$(el).attr('style', style);
}
}
})
})
Idea is simple:
1. We suppose that style we want to add to an element is the only one. I mean there are no scripts that will try to add some other styles,
2. We create an array of allowed attribute names, we need to avoid using wrong names at the style attribute, for example style="answerid: 30671428;",
3. We go through each element, save its data attributes in an object, check if object is empty, and if not - check every attribute if it is allowed, create a string that contains all styles that we need, and - finally - add our style string to the element as the content of style attribute.
That's all, thanks everybody
I would not advise to use CSS alone since it will not allow you to do what you're looking for... instead use a scripting language (in my case jQuery) to accomplish this functionality for you like so: jsFiddle
jQuery
jQuery(document).ready(function(){
var dataElem; // to store each data attribute we come accross
jQuery('div').each(function(){ //loop through each div (can be changed to a class preferably)
dataElem = jQuery(this); //get the current div
if(dataElem.data('width')){ //make sure it exists before anything further
dataElem.width(dataElem.data('width')); //set the element's width to the data attribute's value
dataElem.css("background-color", "yellow");
}
});
});
HTML
<p>The links with a data-width attribute gets a yellow background:</p>
<div>
w3schools.com
</div>
<div class="me" data-width="50"> <!-- change value to see the difference -->
disney.com
</div>
<div>
wikipedia.org
</div>
Notes on the above:
each, data, width.
Instead of doing data-width, use a class attribute. An html tag can have mutliple classes separated by spaces, so if you wanted to be very precise, you could set up as many classes as you need. For instance:
<div class="w70 h100">
</div>
Then in your css:
.w70{
width: 70%;
}
.h100{
height: 100%;
}
And so on.
Is there any noJS way to use attributes like that?
No, you cannot use CSS to set the width of the element to it's data-width attribute. CSS does not allow for this as attr() is only currently available for the CSS content property which is only available on css pseudo elements (::before and ::after).
How can you achieve this with as little javascript as possible?
This is extremely easy to do using the native host provided DOM API.
Select the elements using Document.querySelectorAll().
Iterate the elements and apply the styles using Element.style which can be retrieved from the data-width attribute using Element.dataset
(Demo)
var items = document.querySelectorAll('#container div'), item, i;
for(i = 0; (item = items[i]); i++) item.style.width = item.dataset.width;
I'm using a script to do a mouseover effect with images and also highlighting text in a different color using the getElementById phrase. I understand that an ID can only be used once, and if it needs to be used more than once I should use class. But there is no getElementByClass function. I have 2 areas of type that I want to highlight, one is centered, the other is left justified. Is there a way to use the same id for both styles?
<div id="georgia">
<style="text-align: center;">
<strong>Headquarters:
</strong>
</style>more text here
</div>
This is the script I am using:
<script type="text/javascript">// < ![CDATA[
function on(el) {
if (document.getElementById(el)) {
document.getElementById(el).style.color="green";
};
};
function off(el) {
if (document.getElementById(el)) {
document.getElementById(el).style.color="";
};
};
// ]]></script>
So what you are saying is I can replace the getElementById with getElementByClassName then it will work?
This is the format I'm using, the first part of the text (Headquarters) is not showing up, but the second part (more text here) is fine.
You need to use document.getElementsByClassName, which returns a list of the objects with that class name:
var all = document.getElementsByClassName("bar");
for(var i = 0; i < all.length; i++){
var obj = all[i];
obj.style.fontWeight = 'bold';
}
<div id="foo" class="bar">hi</div>
<div class="bar">bye</div>
<div id="bar">sup</div>
i am trying to Append spans in a div. Below is my div code
<div
id="paragraph"
class="paragraph"
name="paragraph">
</div>
This is code i am implementing in my Controller
$scope.style_Text = {color:'#F00'};
for(var i = 0; i< $scope.paragraph.length; i++)
{
var span = "<span ng-style='style_Text' id='c"+i+"'>"+$scope.paragraph[i]+"</span>";
$( ".paragraph" ).append($(span));
console.log(span);
}
Spans are added in the div, but style is not applied. When i copy the span from console and place it above div. This span is working fine. Style is applied on it.
I have tried putting style='color:red;' instead of ng-style, It also works.
Please help how to use ng-style here. Thank
What for u doing this? Thats bad pattern.
Your HTML:
<div
id="paragraph"
class="paragraph"
name="paragraph">
<span ng-repeat="elem in list">{{ elem.xxx }}</span>
</div>
In controller just add objects in your $scope.list after some action
$scope.addToList = function() {
$scope.list.push({...});
}
And angular add them to DOM inside your div tag.
If you use not angular event model for refresh DOM use $scope.$apply().
Do not mix jQuery to Angular, you really not need to
Do all the DOM manipulation in directives!
Now to your question, if you really want to it your way
You wanted this $scope.style_Text = {color:'#F00'}; to be a string I guess, so $scope.style_Text = '{color:\'#F00\'};' and then var span = "<span ng-style=" + $scope.style_Text + " id='c"+i+"'>"+$scope.paragraph[i]+"</span>";
But really please do a directive
Edit: in such a case like this, what is the point of using ng-style and not style itself?