How to double click on partial value of the text from a element using javascript.
Example:
Site : https://www.crm.com/resource-category/all/
Xpath of Html element : (//div[#class='col-12 offset-md-1 col-md-11'])[2]
text value : Helpful resources to get you oriented around CRM.COM
Now, I want to go to the above Site and get the text of the element with the above xpath. until this point its fine. Its a tag with simple text. But now, I want to double click on the partial text of the div element which is "Resources" in javascript
Attached image. tag has whole text value as "Helpful resources to get you oriented around CRM.COM" but I want code to double click the partial text which can be "resources to get".
please help
Inspected value on the website
#skr, Its a simple text element within tag. when I double click on partial text, a popup appears and I need to automate the scenario. Thanks –
Here is what you asked. I used jQuery, but you can use vanilla if you want.
$('.clickable span').click(function(){
alert('do something');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clickable">
<p>A small text so you can <span><u>click here</u></span></p>
</div>
Related
I've checked all relating questions here, but haven't find something that would resolve my issue.
I have a textarea input element is intended for email message. I need to have a button so that when you click on that it would insert a template from database (header/footer having a lot of html tags such as body, table, div etc). So it's supposed to render this html code after clicking the button so an user can see a result of template applying straight away (images, formating etc).
First of all, when I try to put it though innerHTML it doesn't change the textarea itself (it stays empty). When I try to insert it through value attribute, it inserts the code as it is (i.e. without rendering).
Secondly, I have a lot of different quotation marks in this html code and I can't know in advance where there are located and so on. How to insert a such piece of html code properly then?
Could anybody help me with this task, please?
Sounds like a job for contenteditable:
document.querySelector('button').addEventListener('click', function() {
document.querySelector("div[contenteditable]").innerHTML += `<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">`;
})
div {
border: 1px solid;
}
<div contenteditable="true">
</div>
<br/>
<button>Insert template</button>
I am creating a JavaScript bookmarklet to toggle the visibility of an HTML Element on a page, but it seems like just hiding the element is troublesome:
http://codepen.io/anon/pen/HtkzL
Code:
<div id="hideme">
<p>I am a div that needs to be hidden</p>
</div>
<p>I am a paragraph that doesn't need to be hid.</p>
<blockquote>
I am a blockquote that the whole world must see
</blockquote>
Click me to hide the div.
what's happening is that every the anchor link is clicked, the entire page goes blank and says "none".
When I inject the exact same code in the <a> ... </a> in a JS console, it works just fine.
Any possible fixes for the problem?
It actually is hiding the element, but it's also following your anchor right after (to nowhere). You can return false, or a falsy value. I'd wrap it in void which will return undefined, but either will work. Here's your codepen and the code: http://codepen.io/anon/pen/dsgKk
Click me to hide the div.
(This would also work, but is less clean, imo):
Click me to hide the div.
getElementById('hideme');a.style
Offhand, I'd say because the browser is confused with your variable name;
also, the code would be:
getElementById('hideme').style.display.....
For my current project i am creating a html editor.
How its needs to work
Elements Inside
Text Area - To type the HTML as text
Iframe - To show the typed HTML as real [rendering the string HTML to UI]
Some Buttons
Working Logic
A registered user typing something inside the text area :
ex :
<div style="border:1px solid red;">This is a div</div>
after that user clicks on a button [Converting to UI],so that we need to change the iframe content to the new value [value of text area]
after converting the iframe elements html will be
<html>
<head>
<style>
.mydiv{
}
</style>
</head>
<body>
<div class="mydiv" style="color:red">This is a div</div>
</body>
</html>
There is another button that which give back the iframe HTML to text area ,
All these works good [No big problems now except the firebug issue],But i need to integrate a better UI to customize the iframe content - >
ex : User clicks on a DIV on iframe ,so that time a pop up will arise to change the color and font of that div [it will be some color picker for choosing color and drop down for to choose font][i need to implement some more like this]. hope that it will not be a big pain.
So after that i need to get the modified value.
Ex: i changed the color of a div ,
so the returned value will be something like this
<html>
<head></head>
<body>
<div class="mydiv" style="color:gray;">Hello World !</div>
</body>
</html>
TO DO
Please note the style attribute [above ] ,its in inline style ,i
need to convert it into the class scope if the element have a class
defined
so i need to add/update the css class "mydiv" with new style's .
Assume that we are changing something on the body element of iframe ,body is a common element so i need to add/update the BODY scope in the css style block
ex:
BODY{
color:gray;
}
I hope that you guys got my idea,i need to implement something like this on my current project.
Is there anything slimier this ? [so that no need to worry ,i can use that]
or
How can i achieve this ? especially the grouping of css class.
I hopes that i need to use some kind of regular expressions ,but i am very weak on this.
Please help me to complete.
What i tried is here : http://jsfiddle.net/5PKXq/3/
Thank you.
Much as I think you're really reinventing the wheel here, I don't see what's keeping you from getting the contents of the textarea, and then just appending it directly to, I don't know, a container div (it doesn't even have to be an iframe, which I personally think is a bad way to go).
var $textarea = $('textarea'),
$container = $('div#container'),
$refresh = $('button#refresh'), // or something
;
$refresh.on('click', function () {
$container.empty()
.html($textarea.val())
;
// or something
});
Do note that that's untested code.
i was wondering how does on many websites when i add a smile on textarea appears image instead of ex. :), so i want to ask you how it is possible, i need a simple example...
for example
i have :
<img class="smile" src="smiles/smile1.gif" alt=":)" onclick="add_smile(1);"/><br/>
<textarea></textarea>
so i want onclick of image (.smile) to be added image on textarea, then to be possible to insert some words after image, or just explain me how does it may be done ( is there an <div> element or it is a <textarea> or idk what it can be.. )
thanks
What you are seesing on many sites is not a textarea. It's a div with contentEditable attribute which acts like a textarea. That's how wysiwyg editors are created.
<div contentEditable="true"> Type here. You can insert images too </div>
Check working example at http://jsfiddle.net/6bCRJ/
I have a contentEditable iframe with line numbers and text. The line numbers are contained in a div and all text is in a <pre>-element.
It looks like this:
<body>
<div id="line_numbers">
<div>1</div><div>2</div><div>3</div>
</div>
<pre>
Text
</pre>
</body>
Now, when someone presses Ctrl+A everything is selected, including the line numbers. I would like to change this behaviour to only include the contents of the <pre>.
I have set up a function that captures Ctrl+A and prevents the default operation. Now, how do I set the selection to contain everything within the <pre>?
This answer will help you out I think; you should be able to select the pre element using jQuery and pass it into the function supplied:
SelectText($('pre')[0]);
Have you $("#iframe_id").contents().find('pre').text()?