I want to create one short userscript because I hate this annoying yellow smileys!
There are two html lines witch turns the normal smiley ( :) ) into the yellow icon
<span class="emoticon_text" aria-hidden="true"> :) </span>
<span title=":)" class="emoticon emoticon_smile"></span>
So, in the first line I have to remove the class and the aria-hidden
And in the second the whole line, it can be class="emoticon emoticon_smile", but also something like class="emoticon emoticon_cool"
I tried with:
document.getElementsByClassName("emoticon_ text").removeAttribute("aria-hidden"); document.getElementsByClassName("emoticon_ text").className = "";
but it failed, so I hope you guys can help me, because my Javescript/jQuery skills are bad..
Thank you
sorry for my grammar mistakes
document.getElementsByClassName returns a HTMLCollection, which is basically a array of elements matched. You have to iterate trough that collection and run your code for each of the elements matched.
Secondly, you'll need to find the emoticon itself and remove it, for that you need to get each emoticon's parent and tell it to remove the element. In the end, your code will look similar to this:
//Finds all emoticon texts
var emoticonTexts = document.getElementsByClassName("emoticon_text");
//Iterate over the results and remove the desired attributes
for (var i = emoticonTexts.length-1; i >= 0; i -= 1) {
var element = emoticonTexts[i];
element.removeAttribute("aria-hidden");
element.className = "";
}
//Find all emoticon images
var emoticons = document.getElementsByClassName("emoticon");
//Iterate over the results and remove them from the page
for (var i = emoticons.length-1; i >= 0; i -= 1) {
var element = emoticons[i];
element.parentNode.removeChild(element);
}
Also available as an example on JSFiddle
I would look into using jQuery. Once you have the jQuery library referenced in your project your solution should be as simple as:
$(".emoticon_text").removeAttr("aria-hidden").removeClass("emoticon_text");
Related
I have this javascript/jquery code that deletes sections of a html file
var divs = document.getElementsByTagName('div');
var d = divs.length;
for (var i = 1; i < d; i++) {
if( $('.section'+i).innerHTML.includes("textfind")==true || $('.section'+i).innerHTML.includes("textfind2")==true){
$('.section'+i).remove();
}
}
I would like write the same function as vba code for word
I have this code so far
Dim i as Long
For each objSect in ActiveDocument.sections
if objSect.Range.Text like "textfind +i" Or "textfind2+i" then objSect.range.delete
Next objSect
how would I got about deleting those particular section where i find the strings
Can you please elaborate the question here?? And, you want to remove html or word elements using VBA??
EDIT :- You can create a variable and store an array of strings in it to find and replace. (note: If you want to just clear the text then, use an empty string in place of the 'replace' string.)
Refer to this link for VBA find and replace code VBA To find and replace a string in MS Word
RemoveTextfinders: will remove both of there elements
<div class="section1">textfind2</div>
<div class="section2"><input name="textfind2" value="" /></div>
But neither of these elements
<div class="section1" name="textfind2"></div>
<div class="">textfind2</div>
Sub RemoveTextfinders()
Dim d, divs
Set divs = document.getElementsByTagName("div")
For Each d In divs
If InStr(d.className, "section") And InStr(d.innerHTML, "textfind2") Then d.ParentNode.RemoveChild d
Next
End If
Update I combined the two if statements they where redundant.
InStr(d.className, "section") will evaluate to true if any of the div's class contain the "section".
This code ran fine for me. I must be mistaken about the structure of your html. Could you please post a sample of the html?
Is there a way to hide all hashtags on the page with javascript?
For instance, I have a tag cloud underneath each post on a website I'm making. Each tag looks something like: #myhashtag
I want javascript (possibly css?) to run through the document and hide the "#" so that the tag ends up simply looking like: myhashtag
is this possible?
Let the hash tags be elements with a specific class. (Just edit the CSS selector accordingly if you have other identification marks.) Than 8 lines jQuery should do the trick:
$('.my-hash-tag').each(function(i, elem) {
var $elem = $(elem), text = $elem.text();
if(text.length > 0 && text.charAt(0) == '#') {
$elem.text(text.substring(1));
}
});
This will do the job, comments explain how it works. Currently it assumes the tags are inside anchors and inside a div with id #cloud however this is easily edited, just use a different element selector the concept remains the same.
var tagCloud = document.getElementById("cloud"); // Get tag cloud element
var tags = tagCloud.getElementsByTagName('a'); // Find all anchors within cloud (If they aren't anchors change this to containing elements or replace with a class search .etc
for (var i=0, max=tags.length; i < max; i++) { // Loop through tags
tags[i].innerHTML = tags[i].innerHTML.replace("#", ""); // Remove #'s
}
Working fiddle: http://jsfiddle.net/3ayhA/1/
var doc = document.body;
doc.innerHTML = doc.innerHTML.replace(/(\B)#(\w+)\b/g, '$2');
I have a dynamic div which can generate over 1000 different classes... its a wordpress theme.
Now i am wanting to check if a div has one of 52 classes.
.bg1, .bg2, .bg3 etc etc...
I know that you can use hasClass();
But how do I check for each one and then get the value. For instance here is the div as it stands
<div id="wordpresspost" class="bodyclass post-id-193 wordpresswrap bg1"></div>
Please bare in mind I dont really know jquery :D
I was thinking it would be something like this but logically this does not make sense to me :(
var divclass = $("#wordpresspost").hasClass('bg1, bg2, bg3, bg4, bg5, bg6');
if(divclass == true){
var divsclass = $(this);
}
I need to know the class because I want to change it, for instance i would like to .removeClass and then addClass a new class without changing the others as they are dynamic
Thanks in advance for the advice :)
Use .is():
var divclass = $("#wordpresspost").is('.bg1, .bg2, .bg3, .bg4, .bg5, .bg6');
You can use starts with selector.
Caveat with this is that if you have another class starts with bg[something] it would be impacted
if($("#wordpresspost[class^=bg]").length > 0)
{
....
}
In order to remove it probably regex might help.
$("#wordpresspost[class^=bg]").each(function(){
this.className = this.className.replace(/\bbg.*?\b/g, 'newclass');
});
var el = document.getElementById('wordpresspost');
var regxpr = /\b(bg(?:[1-9]|[1-4]\d|5[0-2]))\b/g, match;
while(match = regxpr.exec(el.className)){
// match[1] contains the current matching class
console.log(match[1]);
// Then you can do:
$(el).removeClass(match[1]).addClass(replacementForMatch);
}
JSFiddle
If you are searching for bg* in only one element, you could just use simple regex.
var hasBg = /bg[\d]+/.test(document.getElementById("mydiv").className);
I want to swap two html div tags entirely, tags and all. I tried the code below code but it does not work.
jQuery('#AllBlock-'+Id).insertAfter('#AllBlock-'+Id.next().next());
How to swap two div tags entirely.
You have some bracket mismatching in your code, it looks like you might be trying to do this:
jQuery('#AllBlock-'+Id).insertAfter($('#AllBlock-'+Id').next().next());
Which would take something like:
<div id="AllBlock-5"></div>
<div id="AllBlock-6"></div>
<div id="AllBlock-7"></div>
And, if called with Id 5, turn it into this:
<div id="AllBlock-6"></div>
<div id="AllBlock-7"></div>
<div id="AllBlock-5"></div>
This is because you're taking block 5, and moving it (using insertAfter) to the place after the block that's next().next() (or next-but-one) from itself, which would be block 7.
If you want to always swap #AllBlock-Id with #AllBlock-[Id+2], so they switch places and end up like the following:
<div id="AllBlock-7"></div>
<div id="AllBlock-6"></div>
<div id="AllBlock-5"></div>
You might want to try:
var $block = jQuery('#AllBlock-'+Id);
var $pivot = $block.next();
var $blockToSwap = $pivot.next();
$blockToSwap.insertBefore($pivot);
$block.insertAfter($pivot);
You can't do this because you can't concatenate a string and a jQuery object.
Try this:
var div = $('#AllBlock-'+Id);
div.insertAfter(div.next().next());
it should be like this
you should close the bracket after Id,
jQuery('#AllBlock-'+Id).insertAfter('#AllBlock-'+Id).next().next());
You'll need to detach the existing dom object first, then re-use it later:
$('#divid').detach().insertAfter('#someotherdivid');
What I understand is you want to swap a div when clicked with the last div. What will you do if it is the last div? move it to the top?
This solution should solve the problem, furthermore, you can modify this regex to match the format of your ID. This can probably be made more concise and robust. For example, you could get the last ID a bit more sophisticatedly. This may just be modifying the selector or something more. I mean, you do not want to go rearranging the footer or something just because its the last div on the page.
$('div').click(function() {
//set regex
var re = /(^\w+-)(\d+)$/i;
//get attr broken into parts
var str = $(this).attr('id').match(re)[1],
id = $(this).attr('id').match(re)[2];
//get div count and bulid last id
var lastStr = $('div:last').attr('id').match(re)[1],
lastID = $('div:last').attr('id').match(re)[2];
//if we have any div but the last, swap it with the end
if ( id !== lastID ) {
$(this).insertAfter('#'+lastStr+lastID);
}
//otherwise, move the last one to the top of the stack
else {
$(this).insertBefore('div:first');
} });
Check out this working fiddle: http://jsfiddle.net/sQYhD/
You may also be interested in the jquery-ui library: http://jqueryui.com/demos/sortable/
I need a little help with (probably) something really simple.
I want to use a script which converts images from color to grayscale.
I got it working partially — the first image turns gray, but the second won’t.
I know this is because an id cannot be used multiple times:
var imgObj = document.getElementById('grayimage');
I tried this:
var imgObj = $(’.grayimage’)[0];
But it didn’t work. Changing it to getElementByClass also does not work. (Before people ask, I did change the id to class in the <img> tag.)
I really could use some help here. Thanks in advance!
$('.grayimage').each(function(idx,imgObj){
<do your code here>
});
$('.grayimage') gives you a list of all elements with grayimage as a class. If you add '[0]' you're accessing the first element, so any changes you make will apply to only the first image that it finds with this class.
You should loop through all elements:
var images = $('.grayimage');
for(i = 0; i < images.length; i++) {
var image = images[i];
// Do stuff
}