Element doesn't show in inspect element when using document.write - javascript

I wrote the following JS code:
<script>
function myFunction() {
document.write("<img src=x>")
}
myFunction();
</script>
while my function works fine and adds a new img tag to the page whenever I use Ctrl+Shift+I in Chrome then Ctrl+F then I type <img src=x> and I get 0 of 0 found. How to fix this?

From your comment:
ctrl+shift+i in chrome then ctrl+F then I type and I get 0 of 0 found
There's no need to do that. Just right-click the image and click Inspect. Chrome will take you right to it in the Elements panel.
Re searching in the Elements panel:
The Elements panel doesn't show the exact HTML you wrote, it shows you the DOM, rendered as canonical HTML. So for instance, the src attribute will be in quotes.
But, the search box in the Elements panel doesn't search HTML, it searches the DOM. So typing plain text will match text in text in text nodes, text in attributes, attribute names, tag names, etc., but not exact HTML. So if you search for the URL of the image, it'll find it, but it won't find it if you search for <img src=. This has nothing to do with it having been added via document.write, it's just how Chrome's Elements panel works.
You can find the element by typing XPath or a CSS selector, for instance img[src=x] will find it. Here's an example (I used your Gravatar rather than x):
There, you can see that the selector img[src*=gravatar] found the image, because that selector (using the "contains" attribute selector, *=) matches the element.

Related

Error: Element is not visible comes up when accessing an element using Dynamic Xpath while the relative Xpath works fine

I am trying to get a click on a Save button. Html of Save button:
<div class="button button--large ng-binding" ng-click="params.applyWrapper()">Save</div>
Now, when I use relative xpath to get a click it works fine. No error comes up and click on this element is successful.
driver.findElement(webdriver.By.xpath(".//*[#id='navcontainer']/ons-page[4]/div[2]/div/ng-form/fieldset/ul/li[8]/div")).click();
However, using dynamic xpath as given below yields an error "ElementNotVisibleError: element not visible"
driver.findElement(webdriver.By.xpath(".//div[contains(text(),'Save')]")).click();
What could be the reason and how do I get a click on this element using dynamic xpath?
As you mentioned this absolute xpath worked:
driver.findElement(webdriver.By.xpath(".//*[#id='navcontainer']/ons-page[4]/div[2]/div/ng-form/fieldset/ul/li[8]/div")).click();
This logical xpath should also work as well:
driver.findElement(webdriver.By.xpath("//div[#class='button button--large ng-binding'][text()='Save']")).click();
As you are facing ElementNotVisibleError: element not visible exception, you can add some ExplicitWait for the element to be visible & then click as follows:
WebElement myElement = (new WebDriverWait(driver, 15)).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[#class='button button--large ng-binding'][text()='Save']")));
myElement.click();
Let me know if this helps you.
Explanation as to why Element not visible error came up would be that previous page also has a 'Save' button and since in most implementations we do not destroy previous page and only make it hidden, webdriver was locating the Save button on previous page but could not access it as it is hidden hence the error Element is not visible.
Using the absolute xpath effectively differs the Save buttons on previous and current page whereas Dynamic xpath for both the 'Save' buttons is exactly the same. (Given that there's no attribute that makes the xpath different.)
driver.findElement(By.xpath("//*[text()='Save']")).click();
Now, we need a way to make Dynamic xpath for both the 'Save' buttons different.
This can be done by using the Xpath axes method. In this method we identify an element that precedes or follows the element to be accessed and write an xpath with respect to this preceding/following element.
In my case the 'Save' button on current page is preceded by an input tag and the Save button on previous page is preceded by a span tag. This allows me to differentiate the xpath for both these buttons as follows:
Xpath for Save button on Current page:
driver.findElement(By.xpath("//input[#name='defaults']//following::div[1]")).click();
//following::div[1] in this xpath represents the 'Save' button which is preceded by an input tag.
Xpath for Save button on Previous page:
driver.findElement(By.xpath("//span[text()='Test']//following::div[1]")).click();
//following::div[1] in this xpath represents the 'Save' button which is preceded by a span tag.

How can I check if a nested tag is allowed within it's parent tag?

If I'm adding a tag in JavaScript to another tag how can I check to see if it's valid.
IE I have this block:
Using JQuery:
var fragment = $("<p>Some text is <strong>here</strong></p>");
Is there a way using either JavaScript or some library to query this fragment and get a list of allowable tags?
For instance:
fragment.wrapInner('<em></em>');
Will generate valide HTML, but:
fragment.wrapInner('<div></div>');
Won't as div is not allowed inside a P tag.
The reason I want to do this is related to Range#surroundContents, as it's not letting me insert span tags directly inside divs, only insides p tags and the reverse is true as well, but I need a solution that will insert the correct type element inside the tag. IE div should not insert into p and the reverse, but these are far far from the only cases I need to concern myself with, as I'm dealing with generic content, so I need a general solution.

Manipulations with user's selected text in editMode

I have this HTML code (it is located in contenteditable="true" block):
<ol>
<li>Mozilla Firefox 1.5+</li>
<li>Internet <span>Explorer</span> 6+</li>
<li>Opera 9.6+</li>
<li>Google Chrome 2+</li>
<li>Apple Safari 3+</li>
</ol>
User has selected some text in this list:
exactly the word «Chrome»,
or exactly the word «Explorer» (it is wrapped with span tag).
The main difference between words «Chrome» and «Explorer» is that word «Explorer» is wrapped with span tag, but «Chrome» is not.
So, how do I know if selected text wrapped with some HTML tags or not?
With some regexp? — I don't know how to get selected text with HTML tags (I know only how to get plain text from selection).
With detecting range's commonAncestorContainer.parentNode? — If I have selected word «Chrome», my parentNode will be li tag (but li tag doesn't wrap my selected word directly, I don't want set styles for li tag). So, I cannot use commonAncestorContainer.parentNode 'cos it is useless for me.
Actually, I just want to set some CSS styles for the selected text:
if user's selected text has already directly wrapped with some HTML tag, I want to add CSS rules for this tag (eq. if user has selected word «Explorer» I want to add style="font-weight:bold;" for the span tag; if user has selected Apple Safari 3+ I want to add CSS rules for li tag)
if user's selected text is just plain text (not directly wrapped with some tags, like word «Chrome»), I want to wrap this text with some tags and add some CSS rules. (With this item I have no problems, I know how to do this.)
UPD:
Look, when I select some text and then run document.execCommand('Bold', false, null), browser wraps my selection with b tags. When I select exactly the same text again and run the same document.execCommand('Bold', false, null) command, boldness disappear. So, browser somehow knows that my selection is wrapped with b tags and remove them (unwrap). So, how does browser know, is selection wrapped with tags or not? If browser knows, why it is so hard to make it with JS?
This is a slightly complex area:
IE < 9 has a completely different API for selections and ranges from other browsers
Getting hold of and then styling the selected content requires some careful DOM manipulation
Here are two suggestions:
If you just want to toggle boldness on the selection, you can use document.execCommand("bold", false, null)
If using CSS classes rather than element style properties/attributes, you could use the CSS class applier module of my Rangy library.

Why is my Jquery Tooltip not working?

I am not getting a tooltip to work and I think the problem is with my selector.
I had selected a plugin that is located here: http://flowplayer.org/tools/tooltip/index.html
It says that you can use the title attribute of an element as the selector. I am wanting to select menu items and attach a tooltip to each one (to describe the menu links). It seemed that the easiest way to do this is to use the title attribute. I only need to fit about 10 or less words in each tooltip. Before describing what could be the problem, let me also mention a couple things.
I have on the page a JQuery accordion too, from the jqueryui.com site. That link to the jqueryui is placed after the call to the jquery tools from http://flowplayer.org/tools/tooltip/index.html. I thought this was the jquery ui at first but jqueryui doesn't have a tooltip - though they have a dialog box that is similar but I don't need the header, just room for a few words.
So, let's see where I could have went wrong.
A) The call to the jquery tools comes before the call to the jqueryui. When that was reversed, my accordion didn't work.
B) The plugin documentation says that there is a class .tooltip which is available by default and the code also let me set the class for the tooltip to tooltip. It is definitely not getting any of the styling that I setup for the tooltip. I'm not sure how to confirm that this tooltip class exists because it only shows up when the tooltip appears.
C) My selector. At first I tried a CSS Descendant selector, just like I would in CSS. I even added a containing div with id of tooltip.
1)First selector: $('#tooltip a[title]), to get the a tags that have a title attribute. That was described in the documentation, though to me it seems like you would want to "trigger" on the anchor tag, not it's title attribute
2) Second attempt with descendant selectors $(".art-hmenu a.tt[title]") - I have inside the tag that has a class of art-hmenu an anchor tag with class tt and I want the title attribute. - didn't work.
3) lastly, I tried using ("#tooltip").find('a[title]') - thinking this would find the anchor tag with title attribute.
The documentation page says that this code will take advantage of the element's title attribute:
$("img[title]").tooltip();
That might put a tooltip on every img tag, wouldn't it? My first example above is similar in using ("#tooltip a:[title]") which doesn't work.
Maybe the title shouldn't be on the anchor tag but instead on the li tag.
I could use some help figuring this out - wherever the problem might lay, which I think is how I am making my selection.
Thanks,
Bruce
your looking for an attribute so use the $('#tooltip a').attr("title") instead.
It sounds like you are over-complicating this.
Give the link, phrase, input, button the class of "trigger" and a title. Tools will handle everything else. You can style the tooltip with a .tooltip class. You position the tooltip with the offset and position settings. If you want to get crazy with styling you can layout: or open the plugin source code and wrap html around the Append(title).

Transforming highlighted text inside an element using javascript

My goal is to be able to get the highlighted text within a document, but only if that text is within a given section, and then apply a certain style to that selected text after clicking a div tag. I'll explain what I mean:
So, having looked at window.getSelection() and document.selection.createRange().text, I attempted to use elmnt.getSelection() or elmnt.selection.createRange().text for some HTML element, elmnt. However, it doesn't seem to work, so that idea seems pretty null. This means I can't use this idea to determine the text that is highlighted within a given location. In case this doesn't make sense, essentially, I want html code that looks like this:
<body>
<div id="content">Stuff here will not be effected</div>
<div id="highlightable">Stuff here can be effected when highlighted</div>
<div id="morecontent">Stuff here will also not be effected</div>
</body>
So that whenever I've highlighted text, clicking on a specified div will apply the proper CSS.
Now, on to the div tags. Basically, here's what I've got on that:
$('.colorpicker').click( function(e)
{
console.log(getSelectedText());
}
Eventually, all I want this to highlight the selected text and have the div tag change the color of the selected text to that of the respective div tag that I've selected. Neither of these seems to be working right now, and my only guess for the reason of the div tag is that it unhighlights whatever I've got selected whenever I click on the div tag.
Fallbacks:
If there is more than one time that 'abc' is found on the page and I highlight to color 'abc', I would like that only that copy of 'abc' be highlighted.
I know this is a lot in one question, but even if I could get a little head start on this idea, my next personal project would be going a lot more smoothly. Thanks. :)
The key in the solution to this will be working with the objects that represent text ranges in browsers, not the selected text itself. Look into methods available to you in both the FireFox Range and IE TextRange objects. Both of these contain means of replacing the selected text with your own markup (e.g. a span wrapping your selected text.)
For FF look into Range.getRangeAt(0).surroundContents(element)
For IE look into TextRange.pasteHTML()
I must warn you though... You'll probably end up down a scary path of browser quirks if you go through with this. Already from the get-go you're supporting two different objects for two of the major browsers.

Categories

Resources