Lab #40 Click and Drag
Lab #40 was titled, "Click and Drag". This title indicates that this lab will be demonstrating a click and drag characteristic on a website. Within this website, you can drag a bunch of numbered tabs to the left or right to navigate through them. The website is shown in the screenshot below.
To create the functionality on this website, I first created a bunch of div items in the HTML document, exactly 25 of them. I added CSS to make the number displays look easy to see on any background they were on, which were also added in the CSS. The JavaScript has the click and drag feature, and does this by logging an event 'mousedown' which will allow you to click and drag the numbers across the screen to go forward or backward. However, in order for it to register, you must have your mouse held down because that is what the event listener is waiting for, to function this properly. When the JavaScript hears a 'mouseup' it won't allow you to drag and nothing will happen.
A web designer can use this feature can use this as a scroll method on their webpage. It can be used to scroll through a big portfolio of some kind, or lots of data to try and find the one the user is searching for. This method can allow for many other possibilities, not only for clicking and dragging, but also for utilizing event listeners to make their webpages more interactive and attract more users to their websites.
To create the functionality on this website, I first created a bunch of div items in the HTML document, exactly 25 of them. I added CSS to make the number displays look easy to see on any background they were on, which were also added in the CSS. The JavaScript has the click and drag feature, and does this by logging an event 'mousedown' which will allow you to click and drag the numbers across the screen to go forward or backward. However, in order for it to register, you must have your mouse held down because that is what the event listener is waiting for, to function this properly. When the JavaScript hears a 'mouseup' it won't allow you to drag and nothing will happen.
A web designer can use this feature can use this as a scroll method on their webpage. It can be used to scroll through a big portfolio of some kind, or lots of data to try and find the one the user is searching for. This method can allow for many other possibilities, not only for clicking and dragging, but also for utilizing event listeners to make their webpages more interactive and attract more users to their websites.
Comments
Post a Comment