Javascript. document.create [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Is the if statement saying if placeholder is not in document.create(input)? Why is it using document.create.
<input type="text" placeholder="john Doe">
<input type="email">
<script>
if( !'placeholder' in document.createElement('input'){
// do something
}
</script>

It's seems to be trying to perform feature detection to determine support for placeholder properties on <input> elements, which are new with HTML5.
The document.createElement('input') is used to create an unmodified <input> element for the test. And the in operator tests for the presence of a property on that DOM element.
Though, it doesn't quite achieve what it seems to be trying. The ! will act before the in, so this ends up testing whether such elements have false properties, which they don't.
It'll need another group of parenthesis to ensure that the in is evaluated first so ! can negate its result for the condition.
if (!('placeholder' in document.createElement('input'))) {
// `<input>` elements don't have `placeholder` properties
}
Note: It was also missing the closing ) for the if condition.

What your code would do, if it was syntactically correct, would be to check if the browser has native support for the placeholder attribute introduced with HTML5.
The if-statement create a new input element and then check if the newly created element has a placeholder-property. If it has, then the browser support the placeholder attribute.
A syntactically correct example would be:
if(!('placeholder' in document.createElement('input'))) {
// This browser lack native support for the
// placeholder attribute, do something
}
Example: http://jsfiddle.net/eAy3Y/

Try :
var input = document.createElement("input");
if(!('placeholder' in input)){
input.setAttribute("placeholder", "Your place holder");
}
document.createElement creates a new attribute node, and returns it.
Hope this helps you.

Related

With jQuery why is document not passed as a string? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
In jQuery why is document not passed as a string to select it like everything else and is there anything else that isn't passed as a string?
For example if I have an h1 element.
$("document").click(function(){
$("h1").after("<p>lorem ipsum</p>"); //doesn't work
})
$(document).click(function(){
$("h1").after("<p>lorem ipsum</p>"); //works
})
document is a variable in JavaScript (comes from window.document, but window is default scope). Wrapping it with the jQuery Selector transforms it into a jQuery object.
If you use a string then jQuery thinks you gave it a selector. jQuery (or JavaScript actually) tries to find the element in the DOM but there is no such element in the DOM of type "document" hence it fails.
Because document is a property of window and is an Object.
You can check by logging it out console.log(window.document)
The jQuery selector function selects a valid select as a string or a Dom Node Object. $("document") won't work because there is no element called document. $(document) or $(window.document) will work because it is a valid Dom Node.
If first you ran document.createElement('document') to create an element called document then $("document") would work but you would be select the new element and not window.document

Does anyone know which script would cause placeholder text to be removed from text inputs and put into spans? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have a page that I added to a project that was already underway, and when I added the masterpage, it was given a whole bunch of scripts. Among these scripts is something that is messing with the styles on my page.
There are several different bugs, but the two biggest things are
It moves my placeholder text into external spans, and these spans are all positioned wrong.
It is adding a keypress function to my searchbar that goes to the wrong place.
The thing is, it looks like I have about 20 scripts on the page thanks to the masterpage, so I don't know where to even start putting breakpoints.
Is there any simple way I can find out which scripts are responsible for doing these weird things? Does anyone know of a specific script that would cause that placeholder text issue?
If you haven't tried out the break on dom attribute modification in chrome dev tools or don't have chrome installed. or it might be an IE specific Then you could do it with plain javascript by monkey patching the setter method with object.defineProperty
If it is using setAttribute("placeholder", "") or removeAttribute("placeholder") try monkey patching that one instead.
here is an example:
// select the target node
var target = document.querySelector('input');
// change the setter method
Object.defineProperty(target, 'placeholder', {
set: function(newValue) {
// log the code that made the change
throw (new Error()).stack;
}
});
function updateDom() {
changeInput();
}
function changeInput() {
target.placeholder = ""
}
setTimeout(updateDom, 100);
<input id="input" type="text" placeholder="foo">
if that doesn't help cuz it's a deep minified jQuery hook that doesn't trace back to your code, than you only choice is to "cut and trace"

javascript select by CSS and toggle display [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm a javascript newbie so go easy on me. I'm wanting to select a bunch of text that is identifiable only by inline CSS (not classes or ids or anything), and create a toggle that turns it on and off. So -- find everything with backgroundColor = '#eed6b4' and toggle display='none' / 'inline-block'
Needing the javascript and html... thx
=====================
This is what I tried originally:
<script type="text/javascript">
function toggleVisibility() {
var codeNum = document.getElementsByClassName('syntaxHighlightingPlugin');
i = codeNum.length;
while(i--) {
codeNum[1].style.backgroundColor = '#eed6b4';
if(codeNum.style.display == 'inline-block')
codeNum.style.display = 'none';
else
codeNum.style.display = 'inline-block';
}
}
</script>
<button type="button" onclick="toggleVisibility();"> Hide numbers (for copying) </button>
Oh, and as I replied to a comment, the twist on this is that it's for text rendered by a TWiki plugin, so I have no control over the resulting CSS --- which, as I said, has no classes --- also, since it's rendered, I think I may need to use something like getComputedStyle (?).
It's generally bad practice to use inline css, and to make your Javascript dependant on that inline CSS is also not a good idea. However, if you wanted to select an element based on the value of an attribute, you can use the attribute value selector like this:
$("[style='backgroundColor *= #eed6b4']").hide();
Reminder: This uses jQuery.
You could set a class to that background color and then filter by class name $(".classname").
OR
You could add a new selector like explained here:
Is there a style selector in jQuery?
Not necessarily a great idea, but you could add a new Sizzle selector for it:
$.expr[':'].width = function(elem, pos, match) {
return $(elem).width() == parseInt(match[3]);
}
which you could then use like so:
$('div:width(970)')
//That's going to be horrifically slow, though, so you'd want to narrow down on the number >of elements you're comparing with something like :
$('#navbar>div:width(970)')
//to only select those divs that are direct descendants of the navbar, which also have a >width of 970px.

return javascript function in JSP form [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a javascript function (get_deviceprint()) that return UI data such as ip, resolution, device, etc. I need to return it as part of a form to the servlet. I know the function works because console.log(get_deviceprint()); correctly displays the info in the web console.
so the problem is passing this back as a string to the server. I tried
<input type="hidden" name="devicePrint" value="<script type="text/javascript"> get_deviceprint()</script>"/>
but that returns <script type=.
I also tried "return get_deviceprint()"
but that returns "return get_deviceprint() literally.
so what should I put as the value?
Thanks!
It seems like you're confused about a basic part of html, and programming languages in general: Contexts. html is constructed out of tags. A tag may contain attributes, which may have a value.
In a tree-like form:
tag
| attribute = value
| attribute
tag
| attribute = value
tag
tag
| attribute
...
Or more concretely:
<input type="password" hidden />
<img src="goat.png" />
<div>Blah</div>
When the browser (and you) go over a tag and try to understand it, it expects certain characters. it knows that < starts a tag, that > ends it, that after the < comes the tag name, and so forth. Going over some text and extracting meaning is called "parsing", and the rules you follow are called "grammar".
In our example above, the browser sees <input type="password" hidden />, and can break it down into the following:
<input type="password" hidden />
^-------------^ ^----^
attr=value attr
^------------------------------^
tag
The html grammar does not allow you to specify a tag within an attribute's value. It just treats it like a regular value.
<input type="password" value="<div>blah</div>" />
^-------------^ ^---------------------^
attr=value attr=value
^-----------------------------------------------^
tag
When you think about it, it makes much more sense: What does it mean for a value to be a tag? What does value="<div>blah</div>" do? How do you make sense of it?
So we reach our problem: html is static, but you want to change it dynamically. Enter javascript and the DOM (Document Object Model):
var input = magically_get_the_input_element();
input.value = get_deviceprint();
The DOM is the result of parsing the html into objects you can interact with using javascript. That means that you can manipulate a page, which is exactly what you want. It's a big topic, and I won't endeavour to cover it in here, but here are some pointers to where you can learn about javascript and the DOM:
Intro to JavaScript (Mozilla Developer Network)
Intro to the DOM (MDN)
The javascript tag wiki

CSS version of target attribute [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Is there a css-version of the target attribute like , instead of writing
Link
i could have wrote :
<style type="text/css">
a { target:something; }
</style>
No, there isn't.
Firstly, target is an HTML attribute, not a CSS style property. CSS cannot modify or create a new attribute. You can, however, style all a elements that have target attributes with the selector:
a[target] {
...
}
You can't for the moment, but there was a working draft by the W3C called CSS3 Hyperlink Presentation Module, now abandoned. It defines a CSS property named target which is meant to substitute the HTML attribute, and actually is way more specific and allows to do more than the old HTML target. Unfortunately, as fas as I know, no browser tried to implement it, I think that's the cause of abandonment. However, in the future could be proposed again (I hope, at least).
As others have stated - there is not a way to do this with CSS yet.
A way to do this is with jQuery+css.
If you have given all of your links a specific class, use this jQuery to set the target, and if you want to set the target for ALL links, use the second set of code:
$(document).ready(function(){
if($('a').hasClass('CLASSNAME')) {
$(this).attr("target", "TARGET");
}
}
If no class is set and you want all of the links on your page (that aren't internal links) to have a set target, use this:
$(document).ready(function(){
$('a[href^=http]:not([href^=http://YOURSITEURLWITHWWW],[href^=http://YOURSITEURLWITHOUTWWW])')
.add('a[href^=www]:not([href^=YOURSITEURLWITHWWW])')
.attr('target','_blank');
}

Categories