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 posted a link to the picture of the layout I am working on. I do not have any experience with jQuery and JavaScript; so is there a way I can create a data toggle like this with pure HTML/CSS3 ?
I think there is no way with pure CSS because css pseudo-classes just allow You to check if the button is active so like when you are pressing it try this and keep it pressed:
JsFiddle
You can give to all buttons a different id for example #button1, #button2, #button3
and to the filters also different ones #filter1, #filter2, #filter3
And then in Your css do something like this
#button1:active ~ #filter1 {
//your changes to the css
}
but this is just temporary, if You really dont want to use JQuery so You can try to use checkboxes and style them in a better way to fit your needs and then use the ':checked' pseudo-class
Like Here
For the close button You will not make it with only css, if You want I can give You the JQuery code :)
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 want to create an input space like the compose question input space of stackoverflow.
I have a blog. In the admin section of my blog I have a compose section. Now it only supports text and 1 paragraph. I want it to have the options to bold the text and make it italics or include some images by the user and also the support of multiple paras.
You can see a very good example of what I am trying to say in the stackoverflow's ask question section. The code should be in vanilla html, css and, js not react or any other framework.
I was not able to find anything over internet related to it.
Any help will be appreciated.
you can use a contenteditable element, see more at https://www.w3schools.com/tags/att_global_contenteditable.asp
You can use ctrl+b, ctrl+u, ctrl+i, etc. to make it bold, underlined, and italicised. You can also use document.execCommand() (https://www.w3schools.com/jsref/met_document_execcommand.asp) to create buttons that do this. document.execCommand() can change any CSS, so you can change size, color, bold, etc.
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 4 years ago.
Improve this question
I'd like to use HTML, CSS, and JavaScript to create a menu that looks like so:
Each Chapter has a little "node" to the left of it that when clicked would bring the user to that chapter's dedicated web page. Is this something that could be done using canvas elements in HTML?
You could create the images for the bullets and then use the list-style-image property when styling list. You can then use JavaScript to keep track of the state. Assign the appropriate image based on what the user has clicked.
If you need a sample of the code to get this working let me see how far you get then I can add pointers.
CSS list-style-image
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 6 years ago.
Improve this question
green fisher here again.
Here is my this time question:
can we use CSS file in javascript?
I indeed know how to do the that: object.style = "";
however, if we can like do something really easy like: import stylesheet.css
then we can do something like object.style = stylesheet.getStyleById('#something')
well, those syntax above are all bullshit by my imagination, however, is there some similar way to do it?
The more appropriate approach would be to add class names to your elements. Then use a regular CSS file to style per class name.
Include in a normal CSS file
.red-text {
color: red;
}
Then add the relevant class name with JavaScript
document.getElementById("element").className += " red-text";
I think an easier way to do this is dynamically adding/removing classes/ids on the elements you want to style. You can do it using the jQuery addClass and removeClass functions, or with the element.className attribute.
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
Hi I'm trying to invert everything on the page except for images? Any help will be appreciated. Thanks.
http://jsfiddle.net/nikita_turing/jVKw6/3/
Bookmarklet
If you can use jQuery, use the pseudo selector :not(img) to select all the elements except images, then set the CSS you want.
Something like
$(":not(img)").css({"-webkit-filter": "invert(100%)","-moz-filter": "invert(100%)","-o-filter": "invert(100%)","-ms-filter": "invert(100%)"});
There are can be two different solutions. Maybe not the best.
The first, Find all images
Then invert elements and invert images back to the first condition.
The second, using jQuery get all img elements and do the same work as in the previous idea.
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 am trying to change CSS elements depending on situations used in javascript.
an example I had tried was:
if ('image'=="clicked")
{blahblahblah}
'image' would be my div id or div tag in CSS.
I know in Jquery I can use $('#image').click, but I don't think it Jquery will be good for my situation.
Consider document.querySelector. It's powerful, accepting any valid CSS selector. You can even start from another element, such as myElement.querySelector, to only get children of that element that match the selector. Very useful!
Just be aware that IE7 and below do not support this function.
Assuming your id as image
document.getElementById('image').onclick = function() {
alert("button was clicked");
};