New to coding and doing an interview challenge. They’ve asked for a dashboard made from JQuery (which I’ve never used before). Lots of help from W3schools and here in stack has me accomplished 100% of the functionality I need (even if the design could be improved: functionality first polish later!) One of the bonus is to have some UI /UX
Tag: css
Need help combining class, active and before selectors
I’m trying to make an accordian menu (I’m a massive noob at HTML, CSS and JS as you can probably tell). My main goal is to make the “+ Work” and “+ Social” buttons change to “- Work” and “- Social” respectively when active. I tried using the ::before selector and I just can’t get it to work. When I
Control the order of visibility of the multiple paths of SVG element
i was searching a way to show an image in html with rounded dashed border like example below such that number of dashes and their individual colors can be controlled, the similar example can be observed in WhatsApp application status tab where number of dashes changes according to the number of statuses uploaded by user. Now to address the problem
Transition effect when button gets visible/invisible in react
I have this app that upon going down 500px, a scroll to top button shows up and upon going back up, it disappears. But the effect of it is quick and there’s no animation to it: JS CSS Is there any way in CSS and JS to add a transition effect to its behavior so it’ll smoothly fade in and
Why does my button not click when I change its id attribute?
I changed the attribute id of a button. The old id #slide_save_button has a light blue color, and the new id #slide_save_button_open has a dark blue color, which changes when it is supposed to. But when I attempt to click the button (by referring to its new id #slide_save_button_open) it won’t execute the console.log(“clicked”). Why? Answer Your approach fails because
How do I put the bordered text underneath the nav-menu text?
I did a round bordered text right next to the nav-menu. I having issues on how will I put the text underneath the texts. Refer to the image below. I wanted to put the coming soon texts underneath the COMPANY and CONTACT menu (I don’t mean doing a sub-menu) Below are the code I did for doing this. Is it
How can I add accumulative Margin on button click?
I am trying to add a text slider, where basically a very long text box extends out of the view, and when a button is pressed margin is added so more text can be read. I do not know how to make a button that adds margin without exponentially increasing it each time. After a few clicks, this starts to
When clicking on a button inside another button, the functions for both buttons are run
I have show-button that, when clicked, expands and shows some text and a collapse-button: When show-button is clicked, it expands and shows the paragraph and the collapse button. When the collapse-button is clicked, it collapses back to the original size where it’s all hidden. The problem is the following: When I click on the collapse-button, the event listener for click
Responsive navbar blocks body content once it’s opened
Before you try to make a solution make sure responsive toolbar is enabled on your chrome browser. I am trying to first make the responsive design for mobile then for desktop. But I am having this problem where I open the hamburger menu and the navbar blocks my content. I tried to fix this by doing position: relative; but I
Bootstrap 5: Hide/Show navbar after scroll 300px
I want to hide the Bootstrap navbar after scrolling for 300px. At the moment I’m using the following code (from here). It works but the navbar hides immediately after scrolling. I want it to hide after 300px. Is there a way to add that to the script? HTML: Javascript: CSS: Answer Hello You can solve this problem by modifying the