How to trigger the same drop-down with multiple buttons?
For instance, I have a button at the top of the page special menu, and one in the middle special menu... and another at the bottom special menu. When any of them is clicked, it should open a drop-down (or popover) nearby. Not just nearby the first special menu. But near by the clicked one.
The dropdown should be the same html element. Not html copies. Not on-the-fly copies. Not a copy at all. Just one element.
Just one copy that could be opened and displayed near by the buttons from which it has been opened.
I have found nothing using bootstrap, and have not been successful at all with Popper.js (even if I guess it might be a solution).
Assuming you've created the dropdown element:
var dropdown = document.createElement('div');
// TODO: Populate the element.
or grabbed in from the DOM:
var dropdown = document.getElementById('dropdown');
You could take an approach like this:
function attachListener(target) {
target.addEventListener('click', function() {
if (dropdown.parentNode) {
// Remove dropdown from the DOM.
dropdown.parentNode.removeChild(dropdown);
}
// Add the dropdown inside the target.
target.appendChild(dropdown);
});
}
var targets = document.getElementsByClassName('special-menu');
for (var i = 0; i < targets.length; i++) {
attachListener(targets[i]);
}
Of course, the exact implementation depends on how you want the DOM set up.
Related
I am trying to create a website that allows the user to drag text into boxes. I would like the user to have the option to create more boxes using a button which they can drag more text into.
The issue I am having is that I cannot get the button to create a box that allows elements to be dropped in it.
I have pasted the basics of what I am trying to do here http://jsbin.com/vedapu/3/edit?html,css,js,output .
The code below shows the code I have written to create a div when the button is clicked.
document.getElementById("text").onclick = function() {
var div = document.createElement('div');
div.ondrop = "drop(event)";
div.ondragover = "allowDrop(event)";
div.className = "box";
document.getElementsByClassName('section1')[0].appendChild(div);
}
How can I pass the drop and allow drop to the new div?
You're almost there! Change these two lines, which set string values to ondrop and ondragover:
div.ondrop = "drop(event)";
div.ondragover = "allowDrop(event)";
...to this, which sets the functions instead:
div.ondrop = drop;
div.ondragover = allowDrop;
The event object will be automatically included as the first function parameter.
Is there a way to go to this page:
http://www.canadiantire.ca/en/dyson.html
Add a script that will select only the product images on the tiles and when I click on them will create an alert with potentially their price on it but right now I'd be happy with just a random phrase.
I am going to assume that I need to loop into an array just those images and maybe use an addeventlistener for those images that I just tagged? Is there any way to do this without going into each image and adding an ID to it.
First fetch all product elements, I chose this selector .product-tile-srp__content-wrapper
Then, for each product, attach a click event and then fetch the price from .product-tile__price
Here's the code:
var products = document.querySelectorAll('.product-tile-srp__content-wrapper');
for (var i = 0; i < products.length; i++) {
products[i].addEventListener('click', function(event) {
var product = this;
var price = product.querySelector('.product-tile__price').innerText;
window.alert(price);
});
}
Note that the for loop is important because the NodeList.forEach is not supported on IE.
With jQuery this is pretty simple, just select based on the class. You need to also prevent the click from causing the browser to navigate to the product page. Then you can get the price by searching the descendants for the element containing the price. In my example, since I just selected the image and not the whole product element, I first had to search up through the ancestors (with closest) to get the base product element, and then find the price element.
Here is the example which activates when you click the image, just enter this into your browser's console while on the page:
$('.product-tile-srp__image').on('click', (e) => {
// Prevent click from actually opening the product page
e.stopPropagation();
e.preventDefault();
price = $(e.target).closest('.product-tile-srp__content-wrapper').find('.product-tile__price').text();
alert(price);
});
I have two requirements in my project. First, when I click on button, a div should be visible and invisible. I have achieved that using JQuery, as shown in this link.Jsfiddle
Now second requirement is, I'm opening a div in first case, now I have to open same box but as a dropdown list. That means if I click on dropdown Filter, this box given in link should open, and it should overlay if something under it, like in my case I have grid. So dropdown should overlay this grid but not replace it. I have googled it but didn't find any appropriate solution. I just need that control which will do the magic. Not whole code.
if any clarification needed. please comment. thanks.
Commented out the code which I have added. See the fiddle.
First you need to set position: absolute then add the JS to position the dropdown below the button.
JS
$(document).ready(function ()
{
$('#btn').live('click', function (event)
{
$('#div1').toggle('show');
});
// added the following script
var offH = $('#btn').outerHeight();
var offT = $('#btn').offset().top + offH;
var offL = $('#btn').offset().left;
$('#div1').css('top', offT+"px").css('left', offL+"px");
});
CSS
#div1{
display:none;
position: absolute; /* ADDED THIS LINE */
}
With the help of some fine people here at Stack Overflow, I was able to come up with some script that allowed me to dynamically change some text form fields based on the user's selection from a drop-down menu. Now I would like to implement two drop-down menus affecting different text form fields. I can have them each working on their own, but when I go to combine them, only one works.
input_1 and input_39 are my drop-down menus.
There might be times when one or the other is not present on the page.
You can view it on this page:
http://www.ortorderdesk.com/product/2-sided-bc/
var element = document.querySelector('form.cart');
function updateText() {
var obj_sel_value = element.input_1.value;
if (element.input_19)
element.input_19.value = myData1[obj_sel_value];
if (element.input_21)
element.input_21.value = myData2[obj_sel_value];
if (element.input_26)
element.input_26.value = myData3[obj_sel_value];
if (element.input_31)
element.input_31.value = myData4[obj_sel_value];
}
var element = document.querySelector('form.cart');
element.input_39.onchange = updateText;
function updateText() {
var obj_sel_value = element.input_39.value;
if (element.input_33)
element.input_33.value = myData5[obj_sel_value];
if (element.input_40)
element.input_40.value = myData6[obj_sel_value];
}
You're overwriting the first instance by re-creating the same variable. Try simply removing the second instance of var element = document.querySelector('form.cart');.
Ok I made a site a while back and always had issues with the menu system is needed. Basically you click a location on a map, then it displays the list of sub locations in the dropdown menu to the right. These are always their they just chance to display based on the options class.
I have put the site at shiftera.co.uk so you can see it their.
The issue first.
1) IE - The list never filters out, it displays all results all the time regardless of class.
2) Chrome - The dropdown is sometimes squashed showing 1 result and hiding the others you need to use up/down arrows to change, sometimes it shows 3, sometimes 4.
3) Firefox - The list displays in 1 long row, not like a usual dropdown.
I think the issue is more of a css problem or multitude of css problems.
An example of the map link is
Scotland
The dropdown list although not seperated is generated from the database and appears as below
<option value='AB25 1UH' class="Scotland">Aberdeen</option><option value=' WA14 4DW' class="Northwest">Altrincham</option>
As you can see, some have the space before some don't. The dropdown has the id of apick and Im using css below to hide it on load.
#apick { display: none; }
Here is the javascript to display the correct items based on map click.
//<![CDATA[
$(document).ready(function(){
$('.areaselect').on('click', function(event){
$('#apick').css('display','inline');
var id = $(this).attr('id')
$('#apick option').not('.'+id).css('display','none');
$('.'+id).css('display','inline').first().attr('selected','selected');
event.preventDefault();
});
}); //]]>
This has been driving me mad for a long time now, it seem's if i fix 1 issue another 2-3 get created. So I figured i'd try here and see if any brightspark can narrow down my issue.
Updated removing windows load as per change to main website.
The simple answer is that you are setting the style to inline. An <option> tag should not be inline, or have any style like that. The inline style i causing the problems.
Instead add the <option> tags when you need them. Store all the values in a object to add/remove them.
By the way. Remove that window load thing.
Here is the javascript fix:
$(document).ready(function()
{
var options = $('#apick option');
var values = $.map(options, function(option)
{
return option;
});
$('.areaselect')
.on('click', function()
{
var apick = $('#apick').empty();
var id = $(this).attr('id');
var newValues = $.grep(values, function(n, i)
{
return $(n).hasClass(id);
});
apick.append(newValues).show().find('option:first').attr('selected','selected');
return false;
});
});