I have a list of buttons that act as checkbutton via javascript and checkbutton background images. I'm trying to convert this to a select dropdown list.
I have managed to convert the list with below script: I first move the text inside the a element for it to be a hyperlink, then I wrap the a elements inside select tags and then wrap all of them inside select tags. This creates a nice dropdown - unfortunately this wont trigger the script inside the a element and Im stuck. I cant access the HTML, so it needs to be done with jQuery or Vanilla JS.
<div class="column wide”>
<div class="filterformbox">
<label>
Gesorteerd op prijs
</label>
</div>
<div class="filterformbox">
<label>
Op voorraad
</label>
</div>
</div>
$(".filterformbox label a").each(function() {
$(this).append(this.nextSibling);
})
$(".filterformbox label a").wrapAll("<select></select>");
$('.filterformbox a').wrap('<option></option>');
Related
I have an accordion with 10 section. I also have some JS that has some code to get images from flickr. I want to be able to click the accordion and populate a div within the accordion section that got clicked with an image pertaining to the accordion section.
Example
SUVs
Cars
Trucks
when the user clicks the cars accordion section, I want to populate a div within the cars section accordion with cars. I already have the accordion and image working. I need to add the piece to make the on click of the accordion section add the appropriate image.
If I understand you, you have some HTML like this one:
<div id="SUVs" class="accordionElement"></div>
<div id="Cars" class="accordionElement"></div>
<div id="Trucks" class="accordionElement"></div>
And you need the Javascript necessary to append certain images to each of them. First you have to change your HTML to this (for example):
<div id="SUVs" class="accordionElement" onclick="appendImage(this);"></div>
<div id="Cars" class="accordionElement" onclick="appendImage(this);"></div>
<div id="Trucks" class="accordionElement" onclick="appendImage(this);"></div>
Then a Javascript code as follows:
function appendImage(element){
$(element).append('<img src="pathFromImage/' + $(element).attr('id') + '.jpg" />');
}
I have a pretty complex modal in which my users can dynamically add rows (== options) in which there are multiple select elements. These select's open customized dropdown menus with the different options.
The problem I'm facing:
1 - a user adds enough options to make the containing div overflow, and it becomes necessary to scroll through all the rows but always within the modal
2 - the user clicks on a select input, which opens the options' dropdown
3 - the user somehow scrolls through the rows
Expected:
The options' dropdown remains anchored to the select input
Actual:
The dropdown keeps its 'absolute' position relative to the modal, meaning that it appears to scroll along with the rest of the div, floating above the other rows.
The input is in a form contained in the modal, while the select dropdown is at the very bottom of the page:
<body>
<div>
<div id="modal">
<form>
<input type='select' id="my-select">
</input>
</form>
</div>
</div>
<div>
<!-- Dropdown attached to #my-select -->
<div id="dropdown">
<div>First option</div>
</div>
</div>
</body>
I'm guessing there's no easy way to achieve what I want with only css? If that is the case, what kind of JS sorcery would be needed?
Thanks for your help!
Using the sample from here from Vaadin polymer elements:
Hier is my ui.xml:
<i:IronList ui:field="list" as="item" addStyleNames="fit" selectionEnabled="true" multiSelection="false" indexAs="index">
<template>
<div>
<div class="item" id="{{index}}" tabIndex="-1">
<img class="avatar" src="[[item.image]]"/>
<div class="pad">
<div class="primary">[[item.name]] [[item.index]]</div>
<div class="secondary">[[item.shortText]]</div>
<div class="secondary dim">[[item.longText]]</div>
</div>
<iron-icon icon="star"/>
</div>
</div>
</template>
</i:IronList>
The iron-list items are not selectable. I tried:
#UiField
IronList resultList;
Polymer.ready(resultList.getElement(), arg -> {
resultList.setTabIndex(1);
resultList.setSelectionEnabled(true);
resultList.getPolymerElement().addEventListener(KeysPressedEvent.NAME, event -> {
GWT.log("KeysPressedEvent!!");
});
return null;
});
The KeysPressedEvent event never fired and my iron-list items did never get the css :focus pseudo class. From the Polymer Simple List Example I can see that a selected list item gets a css :focus pseudo class. In my case it did not happen.
From the polymer JavaScript example. I should ass tabindex$="[[tabIndex]]" to the item but this does not work in GWT because I cannot ser a property ending with $.
I want to achieve the following:
The list's first element should receive tab focus when pressing the tab key from somewere else.
The list item which is selected should get the css class :focus.
I should be able to navigate the list items with up and down keys and select with enter key.
How can I do that?
I have js functionality where a html tag is generated in js and a click function is associated with it. Right now I am trying to attach my js functionality to my generated html, but I don't know how to implement it. I have provided my code below.
When I click the select button the animation effect should take place, but I don't know how to associate the function UversePlanSelector.prototype.click with the select button.
Not working code
Working code
<div class="plan">
<div class="plan_head"><span class="hdr">Max plus</span><span class="tag">$54.95</span>
</div>
<div class="plan_spec"><span class="hdr">18 / 3</span> Mbps</div>
<button>Select</button>
</div>
I havent used Javascript in a while and I have almost forgotten it all but I would like to be reminded how to show and hide html div boxs to display hidden content by clicking on a text or such.
In this case I would like to have a hidden box filled with login information while the ahref link will be the indicator to tell the loginbox to appear or disappear and by knowing this I could easily apply it to the register area.
I would like to know how to do this or a pop up box sort of thing.
This is what I have so far:
Could anyone help me with this now. I can't seem to get it work.
The toggle is
Login
Showing content
<div class="signup" style="display: none;">
<p> test </p>
</div>
Javascript is
function showStuff(signup) {
document.getElementById('signup').style.display = 'block';
}
Why won't this work
Looks like the issue with your code is that your div has a class as 'signup' not an id.
try:
<div id="signup" style="display: none;">
<p> test </p>
</div>
See this jsfiddle for a working example with an additional fix to how your function works.
http://jsfiddle.net/aUQ6B/
Original Answer:
See: javascript hide/show element
Code to make note of is the following:
document.getElementById('myid').style.display
Setting this to 'none' hides the element.
Setting it to 'block, 'inline' or whatever the original value was will show the element.