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 need to make a really complicated diagram for a website, in which the hierarchy will be a bit messy: arrows will go up and down, sometimes an element will point to several others, and sometimes there will be several elements pointing to the same one. I have found this method, but it doesn't allow more than one parent for an element and therefore won't do the trick in this case.
It has to be done in HTML/CSS, because my intention is to add some Javascript to change the content of the blocks dinamically.
This is an example of the level of complexity I need to achieve:
You might want to take a look at this
http://thecodeplayer.com/walkthrough/css3-family-tree
Another to look for is SpaceTree example by "Nicolas Garcia Belmonte" but not a pure CSS solution. It is compatible with IE and most of browsers. Definitely worth a try.
Related
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 25 days ago.
Improve this question
I can't build accordion on clear css
I have tried a lot of things, but I still can't do it
You can't.
In fact you cant make pretty much anything without HTML (As for Bootstrap is 'just' a wrapper for HTML, CSS and JS.). HTML says where what element is, aka. places the content. CSS defines how it looks and behaves (for the later, you also may need JavaScript).
An accordion in fact needs all three (See this question/answer.)
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 8 years ago.
Improve this question
If you look at this website and let it load a bit http://visage.co/, you'll notice the text keeps changing and it has some freaking awesome transitions. I figured this is mostly done with some jquery but I was seeing if anyone here has any experience and what they would recommend in recreating something of this sort.
I am guessing you are looking for something like this http://www.mattboldt.com/demos/typed-js/. The page also has some demos from other websites. This would be one way of recreating it.
Please check http://johnpolacek.github.io/superscrollorama/ it is the best library for parallax content in my opinion.
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/
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 written in javascript two different ways to hover over links and have the background of the window change color, one using event delegation and one not.
How do check which option is best performance wise (probably checking something in the browser developer tools)?
From reading about conventions I have learned that event delegation is the way to go but the code seems less clear and readable so I want to check if does actually perform better.
In Chrome Developer Tools you can use the Timeline section and create a recording of these events and time how long they take.