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 3 days ago.
Improve this question
Im more of a C++ and plain JS type of dude, and I feel absolutely stupid not being able to find this out.
I tried doing this
<button1 id="coolbutton" type="button">
My JSFiddle Account
</button1>
along with this CSS code
button1 {
font-family: Verdana;
color: purple;
background-color: grey;
text-align: center;
text-decoration-line: overline underline;
}
html {
background-color: #666699;
}
body {
background-color: #666699;
}
Not feeling so good about my "Epic Coding Skills" because I feel like it's easier than I think.
The HTML Living Standard defines what element types exist in HTML (along with a format for naming custom elements.
It defines, for example, button and html. It does not define button1, and button1 does not meet the custom element format.
You have tried to create a button1 element in your HTML, which is invalid HTML and triggers error recovery in browsers.
You have written a CSS type selector to try to select it, and whatever is reporting that error knows you are trying to find an element in an HTML document where button1 elements are not allowed.
Use id and class attributes to define specific (or groups of specific) elements. Select the type based on the semantics it has. Don't invent new types.
there is no <button1> element what you are looking for is simply the <button> </button>. Do your CSS on the coolButton id (or the id of the button you want to change)
Related
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
I am creating custom HTML tags. I want to know if was possible to add CSS properties to HTML tags with JavaScript without adding, use css file or appear the "style" attribute on the HTML tag, example:
NO:
<-my-tag style="color:red">STACKOVERFLOW</-my-tag>
YES:
<-my-tag>STACKOVERFLOW</-my-tag>
And the result like this
You can create a style element in DOM and append anything to it which will automatically apply to your element
const appendStyle = (customStyles) => {
const styleEl = document.createElement('style');
styleEl.innterHTML = `yourTagName {${customStyles}}`;
document.body.appendChild(styleEl);
}
appendStyle('background-color: red; font-size: 15');
Yes you can either add a separate .css file and place there your styles.
Like style.css
yourTagName {
color: red;
}
And then include it within the <head></head> section of HTML using <link> or you could add your styles within the <style> tag in the <head> section as well.
Check W3 HTML Styles - CSS to learn more.
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
I want to disable a href tag when the link of it is # , the reason i want to do this is because i have lots of post on my webpage that have links poiting to other sites that are my partners.
When i make a post i have a template that make it easier on me to put information on it and have the href link ready if anyone site that has to do with the post want a partnership and i link it to them .
Some of my old post have href tags with # value on it and when i click on them they open up my page on another tab so thats why i would like to disable it if possible with javascript (anyone other script language that can do the job is fine too)
Thanks
Simplest way would be:
var emptyAnchors = document.querySelectorAll('a[href="#"]');
for (var i = 0; i < emptyAnchors.length; i++) {
emptyAnchors[i].addEventListener('click', preventDefaultEvent);
}
function preventDefaultEvent(e) {
e.preventDefault();
}
This will prevent the default behavior on a link click (open the href target).
You can select your a tag with the specific # href
ES6 syntax
const elements = document.getElementsByTagName("a[href='#']");
ES5 syntax
var elements = document.getElementsByTagName("a[href='#']");
then add a preventDefault() on the event of each element to make sure the default behaviour won't be executed.
ES6 syntax
elements.addEventListener('click', e => {
e.preventDefault();
});
ES5 syntax
elements.addEventListener('click', function(e){
e.preventDefault();
});
If you want you can just add css to make the a tag lose its default style
a[href="#"] {
color: black;
pointer-events: none;
text-decoration: none;
}
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 am trying to make this website http://quoteswag.ga click through to a random quote just by clicking anywhere on the whitespace or on the quote, but I don't want to have it seem like it is a link with the mouse hand and url status etc for aesthetic purposes. I have searched for a way to do this with javascript, but can't find the correct solution.
I just want the page to navigate to /random whenever a user click on whitespace or the quote, or the div enclosing the whitespace and/or quote div.
I'm assuming this won't be too hard with javascript or jquery, but I'm not a pro at these at all. Thanks.
Seem to be as easy as adding
<script type="text/JavaScript">
$('.redirection').click(function() { window.location.href = 'http://...'; });
</script>
And to add the class redirection to all clickable elements. Or, alternatively, to apply the event to all elements:
<script type="text/JavaScript">
$(document).click(function() { window.location.href = 'http://...'; });
</script>
Please be aware, that using the latter one applies the effect even to things like the logo, the footer etc.
From your website source, there is a div with class named container container-quote this div should be a hyper link as follows:
<a href="#">
<div class="container container-quote">.....
</div>
</a>
Then you have to apply the following CSS:
<style>
a:link, .container.container-quote *{
text-decoration: none;
color:inherit;
cursor: default;
}
</style>
Checkout this DEMO: http://jsbin.com/xevejuvohe/1/
Here try this:
<script type="text/javascript">
document.onclick = function (e) {
window.open("http://www.google.nl", "_blank");
return false;
};
</script>
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 dynamic troublesome website;
Wondering if I could write an if statement with jQuery or raw JS that would hide an element based on if another element is underneath it.
So something like; if an <h1> tag is directly beneath my div id, keep my div element present; all else display: none;
You can use not, has and first-child selector:
$('div:not(:has(>h1:first-child))').hide();
Demo: http://jsfiddle.net/c9emjotg/
You could use css to hide all the appropriate divs, then use jquery to show them if they contain an <h1>
$('h1').parent('.sometimesHeader').show();
.sometimesHeader {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="sometimesHeader">I don't have an h1</div>
<div class="sometimesHeader"><h1>H1 is here!</h1></div>
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 possibility of "linking" two CSS elements in jQuery?
An example from my project:
I'd like to append a .focused class to multiple elements at once when certain things happen. They all have the same prefix in their ID, but there is >1 of those prefixes (like #first-header - #first-button ; #second-header - #second-button and so on). It would probably use some regular expressions, but I can't seem to figure this stuff out.
A more accurate example, because I'm bad at explaining things:
When #first-header is .focused, append the same .focused class to #first-button as well. And that would need to work to any pair of -header and -button.
I hope I explained it well enough and am thankful for any kind of help.
You can easily select all items whose id starts with first- like this
$('[id^="first-"]').addClass('whatever');
It sounds like instead of using patterns in the ID of your HTML elements you should be using classes.
Example HTML:
<div id="first-button" class="button">...</div>
<div id="second-button" class="button">///</div>
Javascript:
$(".button").click(function(){ /*do stuff*/});
That Javascript would attach a click handler to all div elements with the class button.
$('[id$="header"]').on('focus blur', function(e) {
$('#' + this.id.split('-').shift() + '-button').toggleClass('focused', e.type=='focus');
});
FIDDLE
You cannot have multiple ids for one element. The proper way to do what you're doing is to give everything that you want to change a class like "toFocus"
Try this:
$("[name$='header']").focus(function(){
var t = $(this).attr("id").split("-")[0];
$("#"+t+"-button").addClass("focus");
});