I have this hidden link, which is needed for other purposes:
<span id="notitle" style="display: none;">
</span>
The link is generated dynamically and automatically includes the title attribute. But I'd like to remove the title attribute since the value is copied when the user copy-pastes surrounding text.
I thought of using javascript. This is what I've got so far:
<html>
<head>
<script type="text/javascript">
function notitle() {
var mylist=document.getElementById("notitle")
var listitems= mylist.getElementsByTagName("a")
for (i=0; i<listitems.length; i++) {
listitems.setAttribute("title", "");
}
}
</script>
</head>
<body onLoad="notitle()">
<p>Before hidden link:
<span id="notitle" style="display: none;">
This Link should have no title attribute
</span>
After hidden link.</p>
</body>
</html>
But doesn't work. I guess it's about listitems.setAttribute("title", "");
Any idea? Cheers :)
listitems is the collection, so your code is probably throwing an error.
Anyway, you want:
listitems[i].setAttribute("title", "");
First of all, you need to select the one specific item by using listitems[i], second, I think you can do it as simple as this:
listitems[i].title = ""
You need to add the i index:
listitems[i].setAttribute("title", "");
You're doing
listitems.setAttribute("title", "");
i times.
Add an array index into the list.
Related
I have a html content in which a span tag is placed inside multiple div tags.
For example :
<div id="ae_launcher" class="module tipsytip active" tabindex="0" role="button" aria-label="" style="display: none;" original-title="">
<div class="left">
<span class="copy-narrow" aria-hidden="true"></span>
</div>
</div>
Also, please note the class "ae-left" has been used 3 times in the entire page.
I need to add text inside the span tag.
I tried something like this:
<script type="text/javascript">
$('.left:eq(1) .copy-narrow').text('hidshjgdjb');
</script>
But this din't solve the issue.
you can do it via jQuery
$('#ae_launcher .ae-left > span ').text("Hello");
Assuming you have used ae-left div class as the parent of the span in all the 3 places
$('.ae-left span ').text("Text here");
<script>
var l = document.getElementsByClassName("ae-copy-narrow");
l[x].innerHTML = "some text";
</script>
x is the location you want to place between 0-2.
You can do it in this way:
$('.left > .copy-narrow').text("your Text");
This will set the innerText property of all elements with
.copy-narrow
class to your Text.
If you want to select this particular span only, you can always use the id attribute of the parent div as id attribute must be unique.
$('#ae_launcher .copy-narrow').text('your text');
You can call the class and use the .text():
<script>
$(function() {
var sometext = 'This is my text';
$('.ae-copy-narrow').text(sometext);
});
</script>
Or if you want to have html tags you can use .html():
<script>
$(function() {
var sometext = '<img src="myimage.png" />';
$('.ae-copy-narrow').html(sometext);
});
</script>
I am having a html page where i have to add data-fancybox="gallery" to all the links in a page to display a image in a fancybox.
right now i am adding manually to all the links in each page.
how can i add automatically data-fancybox="gallery" to all the links through javascript/Jquery?
Example:
<a data-fancybox="gallery" href="https://example.com/Capture.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="621" data-original-width="603" height="640" src="https://example.com/Capture.JPG" width="620" /></a>
Just use JQuery to loop through each <a> element and add a data attribute like this:
$("a").each(function ()
{
$(this).attr('data-fancybox', 'gallery');
});
EDIT
If you want to add it only to certain <a> elements (like inside a container) look at this example:
(this adds the fancybox data-attribute only to the elements which are inside the .do-add-fancybox container)
$(".do-add-fancybox a").each(function() {
$(this).attr('data-fancybox', 'gallery');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="do-not-add-fancybox">
<p>
Hello World
</p>
test
</div>
<div class="do-add-fancybox">
<p>
Hello World, 2
</p>
test
test
test
test
test
test
</div>
</body>
It might be helpful.
/*data-fancybox="gallery"*/
var all_anchors = document.getElementsByTagName('a');
for (i=0; i < all_anchors.length; i++){
all_anchors[i].setAttribute("data-fancybox", "gallery")
}
console.log(document.getElementsByTagName('a'));
HTML syntax:
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article>
JavaScript access:
var article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
CSS access:
article::before {
content: attr(data-parent);
}
reference link: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
try:
document.body.getElementsByTagName("a").setAttribute("data-fancybox", "gallery");
$("a").attr('data-fancybox','gallery') // this should add gallery to all a link under named data-fancybox
$("a[href]").attr('data-fancybox','gallery') // this should add gallery to a tag with only href inside a link under named data-fancybox
To me Case like this absolute value use above selector instead of
each. You know value to add your a link unless value to add different
for each time use each otherwise above code doing fine
I wanted to copy the texts when the copy button is clicked. But, it copies the last(3rd) paragraph text when pressing any of the three buttons. It suppose to find previous sibling and copy that text when that particular button is clicked.
Here's my code. I think, I went wrong in the sibling thing. Let me know what I did wrong here:
//finding text to copy
$(document).ready(function(){
$(document).on('click', '.phc-hashtags-box-button', function () {
$(this).closest('.phc-hashtags-box').find('.phc-hashtags-box-tags');
copy = copy +$(this).text();
});
});
function copyToClipboard(element) {
var $temp = $('<input>');
$('body').append($temp);
$temp.val($(element).text()).select();
document.execCommand('copy');
$temp.remove();
}
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="phc-home-hashtags">
<div class="container">
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Dog1</h3>
<p class="phc-hashtags-box-tags">#dog #dogstagram #instadog #dogsofinstagram #worldofdogs #dogslove #cutedog #doggy #igdogs #dogs #pet #dogoftheday #myfriend #doglover #ilovemydog #ilovedog #doglove #doglife #mydog #happydog #1st</p>
<button onclick="copyToClipboard('.phc-hashtags-box-tags')" class="phc-hashtags-box-button">Copy</button>
</div>
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Dog2</h3>
<p class="phc-hashtags-box-tags">#dog #dogstagram #instadog #dogsofinstagram #worldofdogs #dogslove #cutedog #doggy #igdogs #dogs #pet #dogoftheday #myfriend #doglover #ilovemydog #ilovedog #doglove #doglife #mydog #happydog #2nd</p>
<button onclick="copyToClipboard('.phc-hashtags-box-tags')" class="phc-hashtags-box-button">Copy</button>
</div>
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Dog3</h3>
<p class="phc-hashtags-box-tags">#dog #dogstagram #instadog #dogsofinstagram #worldofdogs #dogslove #cutedog #doggy #igdogs #dogs #pet #dogoftheday #myfriend #doglover #ilovemydog #ilovedog #doglove #doglife #mydog #happydog #3rd</p>
<button onclick="copyToClipboard('.phc-hashtags-box-tags')" class="phc-hashtags-box-button">Copy</button>
</div>
</div>
</div>
</body>
</html>
Instead of picking by class which gets all of the element with that class, limit your find to the parent() div of the button and it will only get the relevant text:
$(document).ready(function(){
$(document).on('click', '.phc-hashtags-box-button', function () {
$(this).parent().find('.phc-hashtags-box-tags'); // notice the change on this line.
copy = copy +$(this).text();
});
});
EDIT:
Working solution:
Now i noticed - you are not passing a single element to copyToClipboard.
<button onclick="copyToClipboard('.phc-hashtags-box-tags')" class="phc-hashtags-box-button">Copy</button>
is sending the saving to copy the last element from 3 found with this. Try instead:
<button onclick="copyToClipboard($(this).parent())" class="phc-hashtags-box-button">Copy</button>
I believe that when you pass '.phc-hashtags-box-tags' to the onclick attr of the button elements, it is matching all of the elements with that class and returning the last match for the value of your function.
Instead, try changing the button onclick handler to:
copyToClipboard($this)
That said, the execCommand function is not working in the provided snippet so verifying is difficult.
Perhaps try passing IDs or try to architect a more elegant solution. So many relative jQuery selectors will inevitably cause bugs as complexity grows.
I am trying to remove the word "Quantity" from below and I think I am close but obviously something is off since it's not working.
<div class="DetailRow" style="display: ;">
<div class="Label">
<label>Quantity</label>
With:
<script type="text/javascript">
$(document).ready(function(){
$('#text_qty_').parent().parent().remove();
$('#qty_').parent().parent().remove();
$('.QuantityInput').remove();
$('label[for="Quantity"]').css('display', 'none').remove();
});
</script>
Try doing it with pure js after adding an id.
<div class="DetailRow" style="display: ;">
<div class="Label">
<label id ="text">Quantity</label>
<script type="text/javascript">
$(document).ready(function(){
document.getElementById("text").innerHTML = "";
});
</script>
Your label needs an id. In this example, I'll use "quantity" as the id.
$('label[id="quantity"]').hide();
This will work but this will apply the style to all labels.
$('label')
Using Pure JavaScript is best though.
Try this $('label').html('');.
$('label[for="Quantity"]') will not retrieve <label>Quantity</label> since it doesn't have the attribute for. Just use $('label') or $('.Label label') and it will work.
Try this if you want to remove the label element itself:
var labels = $('label');
if( labels.text() == 'Quantity' ){
labels.remove();
}
To just remove the word Quantity without removing the label element:
labels.text('');
If you want to remove its parent:
labels.parent().remove();
Also to remove the parent's parent, the <div class="DetailRow"> use this:
labels.parent().parent().remove();
JSFiddle
You can use plain javascript and existing markup with querySelector:
var el = document.querySelector('.DetailRow .Label label');
if (el) {
// do stuff
}
If you want to remove the content, then:
el.textContent = '';
If you want to remove the element, then:
el.parentNode.removeChild(el);
and so on…
I think you can check the label value, and remove the label if the value equals to "Quantity"
Try this:
<div class="DetailRow">
<div class="Label">
<label>Quantity</label>
</div>
</div>
And the script:
$(document).ready(function(){
$(".DetailRow label:contains('Quantity')").hide();
});
http://codepen.io/Himechi90/pen/rOJYjX
Thank you Griffith! This worked perfectly. Full code for anyone trying to remove the quantity and quantity box from only some of your products on bigcommerce. Note that you need to create a separate product template and add this below %%Panel.Header%%
<script type="text/javascript">
$(document).ready(function(){
$('#text_qty_').parent().parent().remove();
$('#qty_').parent().parent().remove();
$('.QuantityInput').remove();
$('label').filter(function() { return $(this).text() === "Quantity"; }).remove();
});
</script>
Note also that your values for #text_qty_ etc may change depending on your template.
Thank you all for taking the time to help me!
<div class="wrapper">
<p class="text"></p>
</div>
<div class="wrapper">
<p class="text"></p>
<img></img>
</div>
<div class="wrapper">
<p class="text"></p>
<div class="vid"></div>
</div>
Assume above is a list of users' post, and I want to identify type of post of them. To select the image or video type is easy, for example the video, just select like $('.wrapper .vid').
But there is a problem when I want to select plaintext type of post, because the class text also appear in vid and image type of post.
Looks like you want wrapper elements which does not hae vid or img then
$('.wrapper').not(':has(img, .vid)')
If you want the text elements within them
$('.wrapper').not(':has(img, .vid)').find('.text')
You can use filter to get the three different types of posts. Something like this:
var $textPosts = $('.wrapper').filter(function() {
return $(this).find('img, .vid').length == 0;
});
var $imgPosts = $('.wrapper').filter(function() {
return $(this).find('img').length > 0;
});
var $vidPosts = $('.wrapper').filter(function() {
return $(this).find('.vid').length > 0;
});
Also note that the img HTML tag is self closing, eg:
<img src="foo.jpg" title="Foo" />
If i get this right that you want to get all the test in <p> with the class text, then you can do something like this
$('.wrapper > .text').html()
The above code will give you the content of only those element with class "text" that are direct under class "wrapper"
You can use .filter() to filter out the element with class text whose has no sibling:
var text = $('.text').filter(function() {
return $(this).siblings('*').length == 0
}).text();
Fiddle Demo
You can use
$('.wrapper p.text').text()
fiddle demo