CSS version of target attribute [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 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');
}

Related

How to re-write the css class in React JS? [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 2 years ago.
Improve this question
For example, I have a css class in style sheet named 'track-your-order' now on some event trigger I have to update whatever in 'track-your-order' is and apply that updated class in same div. I am not meant to toggle it but I meant to update or change or replace the same css class with new values that a user will gives it to that div.
You can use the state update and a ternary operator.
className={isEventTriggered? "updated-track-your-order": "track-your-order"}
i think you can use StyledWrapper from npm styled-components module.
so if you want to make 'track-your-order' become dynamic, you can simply create state that contain a new value of your css.
then put this inside your render:
const StyledWrapper = styled.div`
${this.state.newStyles}
`;
dont forget to wrap your affected element with <StyledWrapper></StyledWrapper> or just wrap all of your elements inside render. for more documentation: https://github.com/styled-components/styled-components
edit: also dont forget to include the name of your css class inside the state. your state more or less should be look like this .track-your-order:{display:block}

How do I target $0 without getElementById [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 4 years ago.
Improve this question
I am trying to find the appropriate way to edit an element but it seems like their is only one node with an ID. I have thought of
my code looks like:
var root=document.getElementById("app-mount").childNodes;;
var child = root[n].innerHTML;
But this is not reusable to get the path to any element such as $0 used in chrome dev tools. I was wondering if there was a method one could call on $0 to just give me the path so one could know how to target it as one does for an ID document.getElementById('id');
Edit:
after getting help I have updated my code to look like:
document.querySelectorAll('svg')[1].outerHTML="<img id='orb' class='orb' src='https://i.imgur.com/k3d8qMN.gif' width='50' height='60'>"
Its for a theme I am making for discord!
Thanks for the help!
I am not sure that I am following your question very well, but if I understand you correctly, you are looking for something like querySelector or querySelectorAll.
You can use CSS commands to target various HTML elements. eg:
document.querySelector('div'); //returns the first div
document.body.querySelectorAll('div'); //returns all the divs attached to the body element
You can also target ids:
document.querySelector('#app-mount');
or classes:
document.querySelector('.blue');
and query selectors may also be used:
document.querySelector('#app-mount > ul > li:nth-child(3)');

onClick add input field [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I want to add a transparent input text field in the centre of DIV #mainC each time the button is clicked.
JsFiddle
I tried doing this with jquery but did not succeed.
use append():
$("#abc").click(function() {
$("#main").append('<input type="text" />');
});
demo: http://jsfiddle.net/6nkd5/5/
Well there's multiple things wrong with your code:
You use the same ID multiple times (ID's can only be used once, classes can be used multiple times).
Calling a function from a external JavaScript source will result in the function not running.
You're trying to use jQuery when jQuery is not loaded
$('<input type="aText" id="aText">').appendTo('#main') is not a valid jQuery, instead try to use: $('#main').append('<input type="text" id="aText">');
aText is not a valid input type attribute value
There is no library selected at the upper left corner in jsfiddle. Try to select jquery there.
Use append() and try not to specify onclick inline. You can register the event with jQuery when document is ready. Registering methods this way is preferred because you separate logic from your HTML (Check unobtrusive javascript).
This is how you would do it preferably:
$('#abc').on('click', function(){
$('#mainC').append('<input type="aText" id="aText">')
})
Check also jsfiddle
The problem you had with your jsFiddle was also that no jQuery script was selected.

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.

Javascript. document.create [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 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.

Categories