Is it possible to change the element's node name in GWT? I mean something like this:
HTML h = new HTML();
h.getElement().setNodeName("mydiv")
while there is no setNodeName() method for Element.
I'd like to acquire <mydiv>some contents</mydiv> instead of default tag <div>some contents</div>
Thanks for any hints.
You can't change the element node name of the HTML widget. However, you can create your own tag with Document.get().createElement("mydiv"), and use that to create a new Widget by extending Composite. However, I'm not sure why you want to do this, because adding new tags to the DOM and thereby extending HTML doesn't sound as something you should want. Setting the content in this tag isn't possible via methods like innerText because they are only available for valid tags.
change the tag name while keeping content and attributes
function changeTagName(elm,new_tag_name){
var newElm = document.createElement(new_tag_name)
var atr = elm.attributes;
for(var i=0;i<atr.length;i++){ // copy all atributtes
newElm.setAttribute(atr[i].name,atr[i].value)
}
document.body.insertBefore(newElm,elm)
newElm.innerHTML=elm.innerHTML; //copy the content
elm.parentNode.removeChild(elm) // remove original
}
for example:
<span id='sp1' class='cl1 cl2'> some t e x t with (\n) gaps .... and etc</span>
changeTagName(document.getElementById('sp1'),'pre');
Related
How to remove anchor tag '' in java script?
When I inspected the page, below is the screenshot of what I got
Here is my code:
<div class="dropdownm1-content">
<b>SHOP ALL</b>
<b>SHOP BY CATEGORY</b>
<p class="mn_category">
Just get the Element by using the ID of it and then remove it with the remove() function. Like so:
var removeanchor = getElementById('YOURANCHORTAGID');
removeanchor.remove();
or without creating a variable:
getElementById('YOURANCHORTAGID').remove();
(replace YOURANCHORTAGID with the id of your anchortag). If you want to trigger this after an action just create a function and trigger it with the action you want :).
for further information check the mdn docs:
https://developer.mozilla.org/de/docs/Web/API/ChildNode/remove
You may should add some more information to your question for a more precise answer. However, for the time being this may helps you out.
If you try to use it, pay attention to the fact, that I only adressed the first Element with the class 'text_main' and only the first of its children with 'a' Tag. You may need to change this, according to your code.
// Removing a specified element without having to specify its parent node
container = document.getElementByClass("text_main")[0];
var node = document.getElementsByTagName("a")[0];
if (node.parentNode) {
node.parentNode.removeChild(node);
}
Further information:
https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
For that specific link you showed:
document.querySelector('.dropdownm1-content .text-main a:first-child').remove()
Though I'd highly recommend curing the sickness, not the symptom.
Can I edit a HTML-tag's CSS using DART?
I have done some searching but I couldn't really find out how to do it, or if it even is possible.
The reason to do this because I would like to change a button's location on a page.
You can change or view css properties through Element.style. The Element.style is an instance of CssStyleDeclaration. You can do the following:
Element element = document.querySelector("div")
..style // edit any of the properties of this variable
..style.background = "orange";
I guess you are looking for something like
var el = document.querySelector('.somediv');
// or '#someid' or other CSS selector to get hold of an element
el.style.color = 'blue';
You may want to look at the dart class CssStyleSheet which can grab a sheet and delete, insert and add rules. You need to know the index of the rule in the style sheet.
I need to specify a different color for each character of the text in an HTML page. The text is long and the generated HTML file size should be as small as possible. In other words, the color formatting tags used should be as minimal as possible. How do you suggest to perform this task?
You need to wrap each character in an element, so it seems that the minimal code is like
<a style=color:#123456>x</a>
or alternatively
<font color=#123456>x</font>
for each character x. The codes are of equal length, but in the latter, the number sign '#' can in practice be omitted (it is an error to omit it, but by browser practice and HTML5 drafts, there is error handling that effectively implies the # provided that the value does not constitute a color name known to the browser. This is risky, so I would go for the first alternatively.
If the colors are not in fact all different but may repeat, then the use of
<a class=¿>x</a>
together with CSS definitions like
.¿{color:#123456}
could result in shorter code. You would then need a class name generator; you could keep the class names to single characters, but care would be needed to make sure that the class selectors will conform to CSS syntax.
I can't realy tell if there is a way to do it into CSS
but here is my code in JavaScript
var textID = document.getElementById("text"); // go and take the Text from the ID
var text = textID.innerHTML; // Take the text from the
var toChange = text.split(""); // Separrate each letter into array
var newText = ""; // buffer text
var aClassName = ["red", "green", "blue"]; // class name that you want
var colorNumber = 0; // counter to loop into your class
for (var i=0, ii=toChange.length; i<ii; i++){
if(colorNumber == aClassName.length){ // if you reach the end of your class array
colorNumber = 0; //Set it back to 0
}
// Add between each letter the span with your class
newText += "<span class="+aClassName[colorNumber]+">"+toChange[i]+"<\/span>";
colorNumber++
}
// Output your text into the web
textID.innerHTML = newText;
http://jsfiddle.net/WPSrX/
I am taking the chance of attempting to answer this. This is admittedly not a direct answer, but another way of looking at it that would keep your code to an absolute minimum:
If what you want is a sort of non-intrusive watermark; I would suggest the simplest solution to set opacity on the text, and a text-shadow in the css.
You could try something like this:
.myText
{
color: white; (or whatever)
opacity:0.5;
text-shadow:....
}
There is a massive amount of options for text shadow; but here is a generator you can play with.
I suppose you could also generate the two colours via javascript, should you wish to alter the colours depending on the image.
You shared no code so there is nothing I can improve upon so the best that can be done is to show you some shorthand CSS and minimal length CSS classes...
HTML
<span class="r">red</span>
CSS
.r {color: #f00;}
I have an iframe and in order to access parent element I implemented following code:
window.parent.document.getElementById('parentPrice').innerHTML
How to get the same result using jquery?
UPDATE: Or how to access iFrame parent page using jquery?
To find in the parent of the iFrame use:
$('#parentPrice', window.parent.document).html();
The second parameter for the $() wrapper is the context in which to search. This defaults to document.
how to access iFrame parent page using jquery
window.parent.document.
jQuery is a library on top of JavaScript, not a complete replacement for it. You don't have to replace every last JavaScript expression with something involving $.
If you need to find the jQuery instance in the parent document (e.g., to call an utility function provided by a plug-in) use one of these syntaxes:
window.parent.$
window.parent.jQuery
Example:
window.parent.$.modal.close();
jQuery gets attached to the window object and that's what window.parent is.
You can access elements of parent window from within an iframe by using window.parent like this:
// using jquery
window.parent.$("#element_id");
Which is the same as:
// pure javascript
window.parent.document.getElementById("element_id");
And if you have more than one nested iframes and you want to access the topmost iframe, then you can use window.top like this:
// using jquery
window.top.$("#element_id");
Which is the same as:
// pure javascript
window.top.document.getElementById("element_id");
in parent window put :
<script>
function ifDoneChildFrame(val)
{
$('#parentPrice').html(val);
}
</script>
and in iframe src file put :
<script>window.parent.ifDoneChildFrame('Your value here');</script>
yeah it works for me as well.
Note : we need to use window.parent.document
$("button", window.parent.document).click(function()
{
alert("Functionality defined by def");
});
It's working for me with little twist.
In my case I have to populate value from POPUP JS to PARENT WINDOW form.
So I have used $('#ee_id',window.opener.document).val(eeID);
Excellent!!!
Might be a little late to the game here, but I just discovered this fantastic jQuery plugin https://github.com/mkdynamic/jquery-popupwindow. It basically uses an onUnload callback event, so it basically listens out for the closing of the child window, and will perform any necessary stuff at that point. SO there's really no need to write any JS in the child window to pass back to the parent.
There are multiple ways to do these.
I) Get main parent directly.
for exa. i want to replace my child page to iframe then
var link = '<%=Page.ResolveUrl("~/Home/SubscribeReport")%>';
top.location.replace(link);
here top.location gets parent directly.
II) get parent one by one,
var element = $('.iframe:visible', window.parent.document);
here if you have more then one iframe, then specify active or visible one.
you also can do like these for getting further parents,
var masterParent = element.parent().parent().parent()
III) get parent by Identifier.
var myWindow = window.top.$("#Identifier")
I have a bit different task to do,
first, i have add an iframe tag dynamically, which i was able to do easily using the code->
function getFrame()
{
var iframeTA = document.createElement("IFRAME");
iframeTA.setAttribute("src", "iframeTakeAction.html");
iframeTA.style.width = "200px";
iframeTA.style.height = "200px";
document.getElementById("status").appendChild(iframeTA);
}
now, want i want to do is to access the elements of iframeTA (i.e. elements within the body tag of 'iframeTakeAction.html' which is the source of iframeTA),
something like this ->
iframeTA.body.getSomeElement......
Hope this kind of operation is possible, if so please put some light.
Thanks.
You should be able to access it with:
document.getElementById("TOUR IFRAME ID")
However, this only holds as long as your iframe src is a relative path on the same domain. If you change the domain then your browser will prevent you to do this.