I used the outline of the code from we3schools. My problem is that the first item on the navbar ends up smaller and not level to the rest of the items.
Even when I remove the dropdown “books” the first item is always slightly lower than the rest and I have no clue how to fix this error.
image example
I couldn't get the code to align where it would let me publish so here is the github link (it's an html file with just the navbar and a css file with just the navbar portion in it).
LINK: https://github.com/Terrancesky/website/tree/main
The code seem to be working fine when i copied it onto my codepen.io
there is no disalignment and a slight improvement you can made is to use the following code for your dropdown
<select>
<option> item 1</option>
<option> item 2 </option>
</select>
Related
I am trying to use a headless browser (Firefox Marionette) to drive a drop-down selection process on a website I do not control. The setup is as follows: there's
a drop-down menu where I can make a selection
a second drop-down menu that reloads when I click my selection in the first one, exposing more options than it initially displays.
Clicking in a browser works fine, but if I try to do this in a console, the second menu does not reload:
var sel1 = document.getElementById("1stmenu")
sel1.value="my selection"
sel1.selectedIndex=1
This changes the first drop-down menu appropriately, but does not trigger the 2nd menu's reload; the latter remains blank, displaying no options.
This had (essentially) been asked before, here. The first answer worked for me: the drop-down menu is something like
<select class="classname" id="idname" name="selname">
<option value="" selected="selected">----- Choose -----</option>
<option value="valuenamehere">Blah</option>
</select>
and what did the trick, after making jQuery available in the console, was
$('select[name="selname"]').val("valuenamehere").trigger('change');
Edit:
Even better: there's no need for jQuery at all, as documented in this earlier question (also in an answer to a duplicate question). All I had to do was
document.getElementsByName("selname")[0].value="valuenamehere"
document.getElementsByName("selname")[0].dispatchEvent(new Event('change'))
I use material ui select and I noticed that when I select all items, close the select and reopen it again, the position of the scroll is moved to the end, is there any way to keep it at top?
current behavior:
expected behavior:
I looked for all options presented in the api but no one of them helped, my idea is to get the DOM element directly and apply element.scrollTo=0
This issue is that material-ui's autoFocus goes to the last item by default. I couldn't get it to work differently unfornately (it seems torevolves around playing with tabIndex in the Paper element of the list). However what you can do is disable the focus all together:
<Select ... MenuProps={{autoFocus: false}} >
...
</Select>
The pitfall of this approach is that whenever you open the menu, it'll always focus on the 1st item of the list, even though only the last item was selected.
example: https://codesandbox.io/s/material-demo-yv5vg
I have been reading many posts about toggling an icon and I got some code to work but it only works for one item and I have 23 of them.
Basically, it's an accordion of FAQ's and when you click on it the answer shows but I want a plus and minus sign to show and toggle depending on if it's collapsed or not.
I found this code and updated with my site and it works but only for the first FAQ.
$("#switch").click(function(event) {
$(this).find('i').toggleClass('fa-plus-square').toggleClass('fa-minus-square');
});
What do I need to do to make it so they all change?
I thank you in advance for your time.
Only one item on the page can have the id switch. Change this to a class and select using $('.switch') to apply the event to each item.
I use this plugin.
http://dane.one/projects/jquery-dropdown/demo/#multi-select
https://github.com/daneWilliams/jquery.dropdown
I want use multiple select
$('select').dropdown({
multi: true
});
It's working normal, but initially, when the page was loaded if I have selected options
<select multiple>
<option>Option 1</option>
<option selected>Option 2</option>
<option>Option 3</option>
</select>
And I want add some selected options,
This plugin resets all selected, and I then seleced
And then chooses a new options without first selected.
I'm not sure if I understood you correctly, but, it looks like the option is selected, it just doesn't look selected?
Here's a CodePen with three examples: http://codepen.io/anon/pen/mWWWaO
The first one is an example of what you have, the option is selected by adding the selected attribute in the code. It is selected, and when you select other options, it stays, but it is not highlighted like the other ones.
The second example is just an example of what it is like with nothing selected, this was more for my own reference and testing.
The third one is a menu with no options set as selected, but instead, after the plugin is initialized it triggers a click event on the option you want selected.
A quick look at the plugin and it didn't look like there was a way to initialize it with options already selected and it also looks like there is no way to select an option programmatically through the plugin.
The plugin replaces the original menu with it's own code in order to create the menu and it looks like an option can't look selected unless it is clicked on, as opposed to the actual, hidden, menu being updated within the code.
I included the plugin JS in the CodePen, but not here. You can scroll to the bottom there to see the example JS code. You would probably want to set up a better way to mark those items as selected than the quick example I set up, but that's the general idea.
$('select').dropdown({
multi: true
});
// Select the third dropdown list and then find the second li in that list
$('.dropdown-list').eq(2).find('li').eq(1).trigger('click');
Use select2 instead. Its an awesome jQuery plugin both for longlist single value selects & multiple selects.
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