advise appreciated:
I have a drop-down list with "select..." at the top and then a list of links which, when clicked, each opens a different URL in a new window.
After user selection ("click") I however need that the drop-down always keeps showing "select..." and does NOT show what the user previously selected/clicked on.
I thought that this would do the job, but does not, it still shows whatever the user selected/clicked on in that drop-down, rather than always showing "select...".
Any suggestion how to fix greatly appreciated ! THANKS
var loadUrl= function(ctrl) {
var booking = jQuery(ctrl).children("option:selected");
jQuery(ctrl).prop('selectedIndex',0);
var bookurl = jQuery(booking).attr("data-url");
var win=window.open(bookurl, '_blank');
win.focus();;
}
try this:
jQuery("#ctrl").val(jQuery("#ctrloption:first").val());
or
jQuery("#ctrl")[0].selectedIndex = 0;
Related
Basically I am going with an application style site for mobile view and they wanted a button on the bottom to flip through the pages in order while the nav at the top allows you to flip through them in any order. I want to change the bottom button to link to the following page depending on which one it is on. so I want the button to change links when specific buttons are focused. I tried many different things and can not seem to make it work. Please do your magic.
if(document.getElementById("abt").hasFocus()) {
document.getElementById("golink").href = "#work";
}
I don't believe focus is what you're looking for as focus can be fleeting to track outside of form objects.
I've mocked up a possible solution to help aid you to what you're looking for.
Here is a link to the JSFiddle:
EDIT - Updated Fiddle: https://jsfiddle.net/t0uwff4t/
Javascript in the fiddle:
// Array of sections.
var sections = [
'#first',
'#second',
'#third',
'#fourth',
'#fifth'
]
// Get the last value in the array.
var lastArrayValue = sections[sections.length - 1];
// Button pointer
var btn = document.querySelector('#button');
// On click of the button, do work.
btn.onclick = function() {
// Get the current href.
var href = btn.getAttribute('href');
// Ternary operator setting the index to zero if the user is on the last index of array.
// Else set the index to the next array value.
var index = (href === lastArrayValue) ? 0 : sections.indexOf(href) + 1;
// Set the href attribute.
btn.setAttribute('href', sections[index]);
}
NOTE: While this example works, this is only a mockup - meaning that it doesn't account for rapid button clicking by the user to 'flip pages'.
Good luck and I hope this helps you to your goal.
Hello and good day to everyone.
I wanna ask if there is a way for me to highlight every area of a map.
This is the scenario... There's a US map and there's a reset button. All the states' names are covered, meaning that every area is already highlighted. Clicking on one of them 'dehighlights' them, revealing their name.
Those things are already functioning properly. However, I am having trouble with the reset button.
Basically, I want the reset button to cover every names again, excluding the still covered ones (because, well, they're not clicked/revealed yet).
Google isn't being helpful for me on this issue, and the Maphilight documentation on the site...isn't really well-documented.
I hope someone can help me on this one. Thanks~
Never mind~ I figured it out! :D
I inserted this code inside [$.fn.maphilight = function(opts)]'s [return this.each(function()]
reset_hilight = function() {
var mapCount = document.getElementsByTagName("area").length;
var i = 1;
while (i <= mapCount) {
var AllAreas = $('#hlight' + i).data('maphilight') || {};
AllAreas.alwaysOn = true;
$('#hlight' + i).data('maphilight', AllAreas).trigger('alwaysOn.maphilight');
i++;
}
}
So now, whenever I click the reset button, all the areas will be highlited once again. :D
i asked a similar question before however the solution no longer works for my application, i need a button click to create a new row (FailureInstance) in a table (failuretable) and i need it to populate three of the cells with data from fields that are elsewhere filled in. here is my code: form1.failuretable.AddFailureButton::click - (JavaScript, client)
xfa.host.messageBox("Failure Recorded and Added To Table Below. Please Continue Filling Out the Form Until All Failures Have Been Recorded. Then Please Save and Submit the Form.", "Continue/Save/Submit", 3);
if (xfa.host.version < 8) {
xfa.form.recalculate(1);
}
var newRow = failuretable._FailureInstance.addInstance(1);
newRow.FailureCode.rawValue = form1.FailureType.rawValue;
newRow.Location.rawValue = form1.CellLocation.rawValue;
newRow.Comments.rawValue = form1.AdditionalComments.rawValue;
right now this doesn't even create a new row for my table... any help is appreciated!
You should check whether multiple instances for a row are allowed. Select FailureInstance in hierarchy view and then in Object->Binding (if you dont see it go to window menu and select Object) check wheter "Repeat Row for Each Data Item" is selected. If not then select it and your code should work fine.
I advice also to enable JavaScript debugging in your Adobe Reader because it than you should see when error appears and what is it about. Open Reade go to Edit->Preferences->JavaScript and select "Show console on errors and messages". Then you will need to restart Designer.
At design time remember to enable:
Object > Data Binding > Repeat Table For Each Data Item
In code, I believe that lack invoking "instaceManager":
...
var newRow = failuretable.FailureInstance.instanceManager.addInstance(1);
...
http://help.adobe.com/en_US/livecycle/9.0/designerHelp/index.htm?content=000178.html
I am trying to accomplish what may be a simple task for you. I want it so everytime the user clicks one of the "patients" on the left hand bar, a drawer opens. That drawer will be loaded in a hidden div (display:none) on the page. Each div's id will be the last lastname of the patient. My included fiddle shows all of the same last name for demonstration purposes only, obviously.
But the problem is I don't know how to open a unique drawer for each patient. I guess I need to put a toggle on each patient's li somehow?
Also, if they click another patient in the listing, I would like the current open drawer to close, and open the one they just clicked. Also, if the close button is clicked, obviously close the drawer as well.
I got a single drawer to work with this:
$(".patient").toggle(function(){
$(this)
$('#drawer').slideDown("slow")
}, function(){
$(this)
$('#drawer').slideUp("slow")
});
But obviously that isn't going to work... :(
In the fiddle it is opening a standard "drawer" right now. but really I'd like the data for each named div be loaded in the same form. Please comment if you don't understand.
Here's the fiddle:
http://jsfiddle.net/3veht/1/
Add a data element to your HTML indicating an ID, let's say patient ID in this case:
<li class="patient green" data-patientId="1">Josh Doe<img src="img/next.png"><img class="imgfix" src="img/accept.png"></li>
<li class="patient red" data-patientId="2">John Adams<img src="img/next.png"><img class="imgfix" src="img/cancel.png"></li>
Then in your javascript when you load the data, you can use that ID to generate a page request. I also changed the toggle to a click and slid the previous one up before sliding the new one down. In the fiddle example:
$(".patient").click(function(){
var pat = $(this);
if ($("#drawer").is(":visible"))
$("#drawer").slideUp("fast", function () {
$('#drawer').slideDown("slow")
$("#drawer").load("/echo/js?js=" + pat.data("patientid"));
});
else
{
$('#drawer').slideDown("slow")
$("#drawer").load("/echo/js?js=" + pat.data("patientid"));
}
});
Updated fiddle: http://jsfiddle.net/3veht/6/
Check this fiddle updated....
changes made in code
var divud = $(this).text().split(' ')[1];
$('#drawer').slideDown("slow");
$('#'+divud).removeClass('hidden');
$('#'+divud).slideDown("slow");
JSFIDDLE
I am having a weird issue regarding the dropdown menu.
I have
company.prototype.buildTable=function(){
var thisObj=this;
tableTD = createElement('td');
tableTD.onclick=function(){thisObj.edit(this);}
this.table.appendChild(tableTD); //append td to the table
// more td
}
company.prototype.edit = function(thisRow) {
$thisRow=$(thisRow);
var menu=document.createElement('select');
menu.className='menu';
//employees is an array containing employee info
for(var i=0; i<employees.length; i++){
var option=document.createElement('option');
option.className='option';
option.innerHTML=employees[i].name;
option.value=employees[i].email;
menu.appendChild(option);
}
$thisRow.append(selectMenu);
}
I can see a dropdown menu in my td. However, when I click the menu, I had to hold my mouse to
keep options open otherwise the options menu will close. Even if I hold my mouse and select one option,
the dropdown menu value wont' change (it still show the first option in the select menu). I hope I explain my issue well.
Can anyone help me with this weird issue?
IIRC, there are some weird cross browser issues with appending options as DOM elements. The preferred way to add options is simply:
menu.options[i] = new Option(employees[i].name, employees[i].email);
EDIT:
Do not to use appendChild on select and do not use innerHTML on select elements. TL;DR: HTMLSelectElement is special and has quirks in IE