Develop Reference

How to make custom scrollbar that shows highlighted items on the page

I am a student (beginner coding level) coding a prototype and I am trying to make a custom scrollbar that shows highlighted markers of selected items on the page, similar to VS. I was wondering if anyone might help me with this or be able to point me to a source that shows examples of how to do this?
We have html, some css and javascript coded. I am a beginner so I have I have tried searching on websites for examples but have found none.
Our Javascript for selecting items:
$('.highlight').click(function () {
// Get the second class name of the parent li
var highlightClass = $(this).parent().parent().attr('class').split(' ')[
var highlightItem = '.' + highlightClass + ' > .menuDiv'
$(highlightItem).toggleClass('highlight-show')
})
The user should be able to select an icon that highlights that object from a long list of other objects, and then scroll down the page to be able to see all of the objects of the same ID that have been highlighted. There are multiple objects with the same ID on the page, so they would all be highlighted when the user selects one of them.
With the final result, those highlighted objects would show up as 'ticks' on the scrollbar so the user can easily find them on the page. This functionality would be used so that the user can easily find a certain item from a long list of items.
Thank you in advance.

auto generate drop down options

I think I can use this method but don't know what to do, I have 2 drop down boxes
one is gadget and one is brand, for example if my gadget drop down is empty, then my brand drop down should be empty as well, if I select computer in the gadget drop down, the brand should should drop down should generate a brand of computer brand (example: acer, asus, hp,) then if I pick cellphones it should generate other brand, example (LG, Samsung, Xiaomi, Huawei) something like that, the brand is in a database table and also the gadget also have a database table. Sorry about my English, not my primary language

You can achieve this, using javascript. Here's an example:
Javascript
var gadgetList = ['Cellphone', 'Tablet', 'Kindle'];
select = document.getElementById('gadgets');
for(gadget in gadgetList) {
select.add(new Option(gadgetList[gadget]));
};
HTML
<select id="gadgets"></select>

Take a look at this Repl. It loads data from JSON for two dropdown combos. Gadgets and Devices, Devices is loaded dependant on Gadgets.
https://repl.it/#PaulThomas1/UprightIllegalMainframe

Javascript Use a previous drop down box to justify the next one

I am looking for a solution for my website. I have a form where a customer selects their device (eg iPhone 6s, Samsung GS6), but I would then like the data from that drop down box to transfer over to the next drop down box so they can select an available repair. If you need an example, go to my website (www.warerepair.uk/booking.html)

Looks like you want cascading drop-down then in that case you have to on first drop-down change event get first's drop-down selected value and using that value load second drop down.
Please see the below code
$('#firstDropdownID').on('change', function () {
var searchVal = ($(this).find('option:selected').val());
//Using this searchval load your second dropdown
});

asp:ListBox control selecting a row using javascript

I have an asp:ListBox control on my web page. I am trying to select an item in the list using javascript. After looking at the underlying structure I have tried:
catListBoxCtl[0].Selected = true;
Which does indeed set the 'selected' value to true but it doesn't highlight the appropriate row. I am just trying to replicate what a user does when you select a row using a mouse. How do you select a row programatically so that it get's highlighted etc?
Thanks.

I think you're missing the reference to the options. Try:
catLIstBoxCtl.options[0].selected = true;

Linked drop down lists and load div

I'm kind of new when it comes to programming but am trying to learn.
What I need to do for my site is have 2 or 3 linked drop-down menus so when I select an item from the first one, the second one will refresh with other options. I have found a way to do this using Java but I cannot seem to make it with the refresh div part.
I looked up prototypejs/updater but it is a bit over my head and cannot seem to link it with the JavaScript I used for the drop-down menus...
So if anyone can tell how I can link two, maybe 3 drop-down menus and after if I click an option from the last menu make a div from the page refresh with other content please help :)

Try a search on google for dynamic select boxes, it's plenty of examples, choose the less complicated one that best fits with your knowledge.
The principle is to link a function to "onchange" event that the select box fires when an item is selected.
Assuming this select box:
<select id="select1" name="option">
</select>
the javascript fragment is:
var sel1 = document.getElementById("select1");
sel1.onchange = function() {
//do whatever you want
};
For the first and the second select, the function will load other select's options, while in the third case it will show your div

Not 100% sure what you are after - but I think this should get you at least some of the way:
http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/
It's a jQuery plugin for linking select boxes together, using Ajax to load the data to populate the next box in the chain based on the value selected in the previous.
You'll then still need to link the last box with the div - but you should be able to do it with a similar method yourself - see the jQuery Ajax documentation.
http://docs.jquery.com/Ajax