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 1 year ago.
Improve this question
I've been perusing the internet learning more advanced aspects of CSS, and with moderate knowledge of both languages I was able to quickly realize that CSS pseudo-classes are all capable of being performed through javascript event listeners. For example, Javascript has an onfocus event listener that allows you to make changes to controls based on whether or not the user has focused into a textbox, select control, etc. So it comes to a decision of whether it would be better to create a pseudo class in CSS to change the styling of the control, or use javascript to change the class/styling on these events.
My question is, is there a best-practice for this? or is this a situation where it's just best to remain consistent throughout your code but one way is not better than the other? Since Javascript is typically more bloated than CSS, would that make it slightly better to use CSS?
I would advice you to use CSS instead of Javascript for something simple as changing the styling of the focused element. If you insist on using javascript or if the context is appropriate. It is easier to read and maintain the code if you add/remove classes to change the styling.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
Suppose that I have a blob of HTML, CSS and JS that I wish to repeat on a page. Logically this blob of HTML/CSS/JS is a "control" and I wish to repeat this control on the page. Inside this HTML/CSS/JS blob are some IDs, such as tab1, tab2, and tab3 and the JS refers to tab1, tab2 and tab3 using jQuery.
Now of course this works fine when it is repeated only once. But in order to repeat it more than once and have it not break, I need to change the IDs to something like instance1_tab1, instance2_tab1, instance3_tab1 and so on and also change the Javascript as well.
Now of course I can do this but it feels painful.
So the question is - is there a modern way to simply isolate each of these repeats without using an iFrame?
Right now I am using iFrame to separate them and it is kind of gross so would like to make it better. Any help would be greatly appreciated.
Update: Edited to remove the word "best". It is not very helpful how the moderators are closing the question as "opinion based" when it is clearly not. This question does not have a good answer currently on Stackoverflow and is a valuable addition to SO
I think, you could look into Web Components. In particular Lit Element library. Web Components encapsulates HTML, CSS and JS into single custom element. As example, you can have <tab-group> and <tab-group-tab> HTML elements. You can pass objects as attributes as well.
If you don't want to use any library, it is still possible, but requires bit more boilerplate.
Browser support is pretty good already and many large companies are adopting web components at scale.
There are link to some examples - https://stackblitz.com/edit/open-wc-lit-demos
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 remove JavaScript. But it does not work without JavaScript. What is the solution for this, please any modified code?
CSS is used to style the content and JS is the proper way to handle clicks and go some logic. Explain what you mean by damaging the system and I will try to help you fix it.
CSS means casacade style sheets, how do you want to create forms and functions with it? You definitely need js.
In other words, css is for the visuals, javascript to give it functionality. You just can't create methods using css.
CSS is for styling only (colours, font style etc.) as mentioned by others. Adding 'interactivity' by css would be somthing like this
.search-button a:active{background-color:#000;}
Change style on active or hover etc, but thats about it.
Personally I wouldn't say this is interactive. Javascript shouldn't slow down your website as its used by thousands of websites extensively eveyday. If it is then you need to take a look at the javascript code and debug it.
Regards
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
I Couldn't find anything on this so maybe you guys could give me some clues if this is possible using JavaScript or not.
Like the question asks, how can I pop an entire block into my html with just using SJ or maybe JQuery?
No not just a div saying Hello and with pretty colors and stuff but an entire block. Meaning a Div with actual content like forms, buttons, spans, links, images and other stuff.
I wanted a temporary popup that wouldn't save data and make the entire project really heavy but instead just appear with some preset values that's called by a JSON script.
Like a temporary form of some sorts.
Everything you are describing is pretty common use of Javascript so it is strange that you did not find anything about it.
There are entire sites written on pure Javascript.
Nevertheless , for a out-of-the-box solution to your inquiry , there is a really good plugin , check it out here : http://trentrichardson.com/Impromptu/.
If you want to learn how to do it yourself , then you should read on the Javascript DOM manipulation functions like :
Node.removeChild()
Node.replaceChild()
Node.insertBefore()
Node.hasChildNodes()
Start from "https://developer.mozilla.org/en/docs/Web/API/Node/appendChild" and go on.
You mean like this http://www.w3schools.com/jsref/met_document_createelement.asp ?
You can add elements to the body of your web page with javascript.
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 7 years ago.
Improve this question
I'd like to create a java-script image editor.
We have an ability to drag and drop multiple images to our editor and then with following properties,
Undo
Redo
Move upward position
Move backward position
Drag and Drop
Change background color
Finally create and save a single image with all our modifications.
I'd like to go with jquery/ prototype library to develop the same. But I'm not sure about my selection and want to know is there any other library to complete my requirement. Please suggest a better one if I'm wrong.
I think that the choice of a library to do your coding is not the case here. Use any you are comfortable with. I would only wonder how such editor should be made. If the requirements about the app will not change, you can easily create your editor using html and css or svg (raphael js, adobe snap js). If you consider adding further image processing in the future than canvas rendering is your way to go (example)
Also if you plan to add image resizing and rotating but need to support older browsers (like IE8 or IE7) you should use raphael with svg.
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
All form elements look different in different browsers. I want to make it look same.
That's not really possible. Toolkits like Bootstrap are the closest we have to a balance between native controls and consistent controls. Solutions that offer consistent controls will basically use heavy styling to hide the original controls (selects, checkboxes, etc.) and JavaScript to simulate the interaction.
You basically just have to manually check from browser to browser to see what's not looking correct and make changes accordingly. CSS hacks help, but are kind of ugly
http://css-tricks.com/snippets/css/browser-specific-hacks/