I'm trying to toggle the application of <p>...</p> tag around the selection in a contentEditable, for which I'm using
document.execCommand('insertParagraph', false, null);
Forget about toggling the p-tag, I'm not able to apply the tag to the selection. Instead, it is giving
<div>
<br>
</div>
<div>
<br>
</div>
This is happening with all the browsers (chrome, firefox, IE). It is removing the selection and creating the above empty divs.
I know its bit late but i found the solution
document.execCommand('formatblock',false,'p');
It worked for me in both chrome and firefox.
Related
So I was attempting to strip down some mark.js example code and have come across some incredibly quirky behavior
The following code works as it looks (a simple HTML example then highlighted by a mark.js instanse)
<!DOCTYPE html>
<h> text in a header </h>
<div class="panel panel-default">
<div class="panel-body context">
<p>
text ā text
</p>
</div>
</div>
<div>
<p> text in a plain div </p>
</div>
<script src="mark.js"></script>
<script>
console.log("in our script");
var instance = new Mark(document.querySelector("body"));
instance.mark("text", {
"iframes": true,
});
</script>
Now when I remove the 'ā' (which is assumed to be nothing but another character within the ) it breaks the example and instances of 'text' are no longer highlighted
The bigger context of why I am attemping this is to use mark.js in a chrome extension, which I am able to get it in an extension (in content.js) and properly add "mark.js" to the manifest such that the extension is able to create an instance, but I was not seeing it highlight on pages (like when this example is broken)
Any tips / insight as to what's going on here and how it may help my bigger goal of integrating mark.js into a chrome extension?
Thanks!
I'm having to write a scraper using nightmare. On one the links the website is using a div for the user to navigate away from the page. In order to follow the navigation flow, I would like my nightmare instance to "click" the div. However, nothing happens when I'm on chrome, and obtain the element and call click. Unlike Firefox, where this works fine.
The script
let elem = document.getElementByClassName('is-a-div-element')[0];
elem.click()
Works fine on firefox, nothing happens on chrome! Any ideas? The site causing issue is using React. Not sure if that helps or not.
The HTML structure looks like this.
<div class="nav-element">
<div class="is-a-div-element">
<div roll="button">
<span roll="presentation">Hello World</span>
<span class="Exit">Exit</span>
</div>
</div>
</div>
I'm not sure how Nightmare relates to this issue since you mention Chrome and Firefox and appear to be using standard browser Javascript, but I'll try answer anyway.
Since you've edited your question with more specific information I'll edit my answer. Now the main issue I can see is that you're using getElementByClassName, which isn't a function (missing the s).
Do this instead:
let elem = document.getElementsByClassName('is-a-div-element')[0];
Tested working in Chrome and Firefox:
window.addEventListener('load', function() {
let elem = document.getElementsByClassName('is-a-div-element')[0];
elem.click();
});
<div class="nav-element">
<div class="is-a-div-element" onclick="alert('this was clicked frens');">
<div roll="button">
<span roll="presentation">Hello World</span>
<span class="Exit">Exit</span>
</div>
</div>
</div>
A expanding textarea is not clickable in the firefox browser. Chrome, IE and mobile browsers work.
<div id="image-upload" class="panel">
<ul class="imagelist-uploader">
<li>
<textarea class="inputbox image-comment" name="comment_list[0]" placeholder="Description">Default Text</textarea>
</li>
</ul>
</div>
I added the simple code to jsfiddle. Click with chrome at the default text to watch the behavior.
http://jsfiddle.net/9hksezsu/
I think it has something do to with the jscode.
Thank you very much for help.
In your Javascript code, LINE 60 : remove "disableSelection()" and everything works fine ;)
It's because of your list. Remove the textarea from the list and it will work fine.
Remove your ul class and it will work fine.
For some reason, my piece of javascript to remove/add class when clicking on a link only works on Google Chrome. On Firefox, it executes once, then doesn't repeat. On IE, it just straight out doestn't work at all. (latest version of Firefox and Chrome, IE 11)
If anyone could point me in the right direction, that'd be much appreciated!
Simple JSFiddle of the issue here: http://jsfiddle.net/UDxtM/
This is the javascript:
$('[data-toggle="tab"]').click(function() {
$('.tab-pane').removeClass('animated flipInY');
$('.tab-pane').addClass('animated flipInY');
});
Some dummy content:
<ul class="main-nav">
<li>Front</li>
<li>Back</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="front">
<img src="http://lorempixel.com/400/200/" />
</div>
<div class="tab-pane" id="back">
<img src="http://placehold.it/400x200" />
</div>
</div>
Edit #1:
The CSS transition is from animate.css http://daneden.github.io/animate.css/. It works flawlessly on modern web browsers if I just use them without the piece of javascript there. I don't think the CSS is the problem.
Edit #2:
Apparently it works on others' IE10 and IE11 but just not mine. That still leaves the problem with Firefox only play the code once.
You are removing the classes and adding them again immediately after – so if for performance optimization reasons the browser decides not to do a re-paint in between those two actions, there will be no visible effect at all.
By using a small timeout to “de-couple” adding the classes again, it seems to work in FF as well:
$('[data-toggle="tab"]').click(function () {
$('.tab-pane').removeClass('animated flipInY');
setTimeout(function () {
$('.tab-pane').addClass('animated flipInY');
},
10);
});
http://jsfiddle.net/UDxtM/3/
I am modifying the ID of an HTML div element client side with JavaScript. The following code works OK in Internet Explorer but not in Firefox/2.0.0.20. It does work in more recent versions of Firefox.
document.getElementById('one').id = 'two';
Can anyone tell me:
Why this doesn't work in FireFox.
How to make this work in FireFox.
To clarify, I'm changing the element ID to reference a different style in an external style sheet. The style is applied in IE but not in FF.
It does work in Firefox (including 2.0.0.20). See http://jsbin.com/akili (add /edit to the url to edit):
<p id="one">One</p>
Link2
The first click changes the id to "two", the second click errors because the element with id="one" now can't be found!
Perhaps you have another element already with id="two" (FYI you can't have more than one element with the same id).
That seems to work for me:
<html>
<head><style>
#monkey {color:blue}
#ape {color:purple}
</style></head>
<body>
<span id="monkey" onclick="changeid()">
fruit
</span>
<script>
function changeid ()
{
var e = document.getElementById("monkey");
e.id = "ape";
}
</script>
</body>
</html>
The expected behaviour is to change the colour of the word "fruit".
Perhaps your document was not fully loaded when you called the routine?
You can modify the id without having to use getElementById
Example:
<div id="One" onclick="One.id = 'Two'; return false;">One</div>
You can see it here: http://jsbin.com/elikaj/1/
Tested with Mozilla Firefox 22 and Google Chrome 60.0