Develop Reference

how to fix this function so it keeps detecting clicks?

This is my first question please go easy on me.
The issue I am having is I have a for each PHP loop to map out (populate) the divs based on how many customer profiles are in the database.
each div has the same class name, so... I use querySelectorAll('.customerBox') to create a NodeList with x amount of divs based on rows in the database.
With this, I am able to change styles based on the index of each item.
Below is a quick example of the script i'm running to do this:
for (let i = 0; i < customerBox1.length; i++) {
(function(e){
openCustBoxBtn1[e].onclick = function(){
if(customerBox1[e].style.minWidth == '100%'){
custCreationBox.style.display = 'flex';
customerBox1[e].style.minWidth = '25%';
customerBox1[e].style.minHeight = '50%';
}
if(customerBox1[e].style.minWidth < '100%'){
custCreationBox.style.display = 'none';
customerBox1[e].style.minWidth = '100%';
customerBox1[e].style.minHeight = '100%';
}
}
})(i);
}
This works perfectly fine the only issue is that the function only runs for two clicks on any element, so let's say there are three elements (.customerBox1)'s... I can click the button within the box to make it take up the 'full screen' then if I click that button again and element (.customerBox1) at the index of whichever you clicked has a minWidth of 100% it will shrink back to its original size, BUT after this that individual elements cannot be re-opened, but any other element at another index can.
gonna be honest I have a vague understanding of how this function works I found it here on stack overflow when searching how to run an onClick for querySelectorAll() at the index of the element you clicked.
Anything helps thank you, if you need more information please let me know. I tried to describe my issue as in-depth as possible.

First of all this condition
customerBox1[e].style.minWidth < '100%'
It will not work as expected as you compare strings, you need map the value of minWidth to a number with parseInt(customerBox1[e].style.minWidth)
ex:
const minWidth = parseInt(customerBox1[e].style.minWidth)
if(minWidth === 100){
// code ...
}
if(minWidth < 100){
// code ...
}

Select all text frames and ALIGN RIGHT in all ODD numbered pages of InDesign (Javascript)

I want to select all text frames and then ALIGN its content to the right of the page of all the ODD numbered pages of my document in InDesign using only Javascript.
here's my progress so far and I know I can determine the odd numbers but still can't make selecting a page work thus no progress to select its text frames too.
main();
function main() {
var myDocument = app.documents.item(0);
var myPage = myDocument.pages.item(0);
var i = 0;
for (i = 1; i < myDocument.pages.count(); i = i + 2) {
\\ select the page, then find all text frames in that page, then align right
}
}
any help is appreciated. thank you.

To get all of the frames on a page:
var myFrames = myDocument.pages[i].textFrames;
Then you can loop through the frames and their paragraphs and apply (use different counter variables, e.g "c" and "b")
myFrames[c].paragraphs[b].justification = Justification.RIGHT_ALIGN;
You can also try everyItem()
myDocument.pages[i].textFrames.everyItem().paragraphs.everyItem().justification = Justification.RIGHT_ALIGN;

Here is a simplest solution:
var pages = app.activeDocument.pages;
for (var i = 1; i < pages.length; i = i + 2) {
app.select(pages[i].textFrames);
try {
app.menuActions.item("$ID/Horizontal Page Align Left").invoke()
} catch(e) {}
}
It relies on selection objects and invoke the menu action. Sometimes this is not the best idea (that is why try/catch). The solution can be more complicated and robust. It depends on your limitations and additional details.
Update
I didn't get that you need to align CONTENT of the frames rather than the frames. It can be done, but the solution differs for linked and non-linked text frames. Except when one paragraph belongs two neighboring pages.

Hide dynamic JS buttons based on a var value

I am having a similar problem to this: Hide dynamically added buttons based on an if statement. With a JS mod for A Dark Room I am working on to increase my JS skills. Neither of these snippets are mine, and both are working perfectly.
This is the code snippet to create the buttons:
build: function(buildBtn) {
var thing = $(buildBtn).attr('buildThing');
if($SM.get('game.temperature.value') <= Room.TempEnum.Cold.value) {
Notifications.notify(Room, _("builder just shivers"));
return false;
}
This snippet makes sure that buttons stay visible, but I would like to change it so that when a max value is met the button is hidden.
//show button if one has already been built
if($SM.get('game.buildings["'+thing+'"]') > 0){
Room.buttons[thing] = true;
return true;
}

Hiding and showing elements is typically done through a class. Have a css class like this
.hidden {
display : none'
}
Then in your javascript, add or remove hidden class according to your condition
if(condition) {
$(element).addClass('hidden');
} else {
$(element).removeClass('hidden');
}

It's hard to suggest because there isn't enough context. The snippet you show may not just be exclusively responsible for controlling the visibility of the button (despite the inline comment saying it is). As a result the following suggestion may not work and more information on what you're trying to do and more code would be needed.
If you have access to modify the snippet then you can include the max value there. If the max value is a variable (i.e myCustomMaxValue) and it's in scope then my best guess would be to add it here:
var myCustomMaxValue = 88;
var someOtherVariableInScope = 50
//show button if one has already been built
if($SM.get('game.buildings["'+thing+'"]') > 0){
//add your condition here and yield true/false
var myCustomCondition = someVariableInScope > myCustomMaxValue;
Room.buttons[thing] = myCustomCondition;
return myCustomCondition;
}
I would suggest the debug; keyword. Place it in the snippet and open your browsers' developer tools and its debugger will get hit. You can then inspect the variables in scope and verify the snippet is in fact responsible for dynamically showing and hiding the button.
//show button if one has already been built
if($SM.get('game.buildings["'+thing+'"]') > 0){
debug;
Room.buttons[thing] = myCustomCondition;
return myCustomCondition;
}

Text not changing in jQuery

I seem to be doing something wrong in the following code: http://jsfiddle.net/yunowork/qKj6b/1/
When you click next, the text within the span .hiddentext should be displayed in the span .showtext on top and correspond to the right Race (Rn). For example when R3 is highlighted the content of that .hiddentext "Race 3Oregon 14:30" should be displayed within the span .showtext.
This is the line where I make a mistake:
$('.showtext').text($('.hiddentext').first('td:first').text());
What am I doing wrong here?

Let's start simple:
Your problem:
$('.showtext').text($('.hiddentext').first('td:first').text());
you are saing, that, grab all .hiddentext, choose the first that has a td ... witch is not what you have in code, you have, td that contains hiddentext... so, the other way around.
What you want to do is simply get the current NEXT td and grab the hiddentext, so, just change to:
$('.showtext').text($nextCol.find('.hiddentext').text());
Now, can you see that the <br/> is not correctly rendered? That's because you are setting the text property, and you should set the html property.
the final code should be something like:
$('.showtext').html($nextCol.find('.hiddentext').html());
live example: http://jsfiddle.net/qKj6b/8/
Your code:
every time you need to have placeholders to provide some data to a context, please, DO NOT USE HTML TAGS to hold such values and hide them... make the use of the data- attribute, witch is a HTML5 complience, and works very well in any browser even if it does not have not HTML5 support, like IE6.
your table definition (td) that currently is:
<td class="visible" id="r2">
<span class="hiddentext">Race 2<br />Santa Fe 12:00</span>
<strong>R2</strong>
</td>
should be something like:
<td class="visible" id="r2" data-text="Race 2<br />Santa Fe 12:00">
R2
</td>
witch is way easier to read, and from your javascript code, you can easily get this as:
var hiddenText = $nextCol.data("text");
Your code (part 2):
This one is quite simple to know
Every time you are repeating yourself, you're doing it wrong
You have the methods for Next and Prev almost exactly as each other, so, you are repeating everything, for this, you should refactor your code and just use one simple method, this way, any future change only happens in one place, and one place only.
$(".next").click(function(e){
e.preventDefault();
var $nextCol = $('.highlighted').next('td');
MoveCursor($nextCol, 'next');
});
$(".previous").click(function(e){
e.preventDefault();
var $prevCol = $('.highlighted').prev('td');
MoveCursor($prevCol, 'prev');
});
function MoveCursor(col, side) {
var maxCol = 8;
if((side === 'next' && col.length != 0) ||
(side == 'prev' && col.length != 0 && col.index() >= maxCol)) {
$('.highlighted').removeClass("highlighted");
col.addClass("highlighted");
// show current title
$('.showtext').html(col.data('text'));
if (col.hasClass("invisible")) {
col.removeClass("invisible");
col.addClass("visible");
var $toRem;
if(side == 'prev')
$toRem = col.next('td').next('td').next('td').next('td').next('td').next('td');
else
$toRem = $nextCol.prev('td').prev('td').prev('td').prev('td').prev('td').prev('td');
$toRem.removeClass("visible");
$toRem.addClass("invisible");
}
}
}
Live Example: http://jsfiddle.net/qKj6b/22/

It should be
$('.showtext').html($('.highlighted .hiddentext').html());
Similar for the prev link...
or even better, thanks to #balexandre:
$('.showtext').html($nextCol.find('.hiddentext').html());
$('.showtext').html($prevCol.find('.hiddentext').html());
Fiddle
Update to match #balexandre hint: Fiddle 2

Do the following:
var $currCol = $('.highlighted'); //to get the current column
$('.race strong').text($currCol.closest('.highlighted').first('td:first').text());

.hiddentext class selects all the spans and the first() will always return you the first td.
Just make sure you select .hiddentext from the currently highlighted column and you are good to go.
$('.showtext').text($('.highlighted .hiddentext').first('td:first').text());

Try this (Same for both)
$('.showtext').html($currCol.find('span.hiddentext').html());
Working Example.

How can I hide an element using jQuery based on the value of it's margin-left in the CSS?

I'm developing a carousel style slider and want to hide one of the controls once the left margin of the ul equals -3480px. Here's my code:
$(function(){
if($("ul#listName").css("margin-left") == "-3480px"){
$(".nextButton").hide();
}
});
It's not doing anything though and I'm not sure what to do next. Has anyone got any pointers or suggestions?

Based on what style property you are animating you should check that. Also make sure that convert the value into int before comparing because css() method will give the unit(px/em..) also along with its value.
if(parseInt($("ul#listName").css("margin-left"), 10) == -3480){
$(".nextButton").hide();
}
If you are executing this code on any animation callback then I would suggest you to check for <= instead of == because the value may not be that perfect during animation. Try this.
if(parseInt($("ul#listName").css("margin-left"), 10) <= -3480){
$(".nextButton").hide();
}

var mm = $("ul#listName").css("margin-left");
if(mm == -3480+"px"){
$(".nextButton").hide();
}

var leftMargin = parseInt($('ul#listName').css('margin-left'), 10);
if (leftMargin == -3480){
$('.nextButton').hide();
}
I used parseInt to show an alternative and avoid any hangups you may have if/when px is suffixed.

var p = $(".your_class");
var position = p.position();
if(p.position().left == '-3480px'){
$(".nextButton").hide();
}

I don't have your full script to play with but I would recommend doing a console.log() on $("ul#listName").css("margin-left") to see if that actually outputs what you think it does. I would also use <= in case you're not hitting that exact value.
I'm just working off assumptions here but hopefully that will help.