Develop Reference

Navigation with an if that counts and add elements certain times

I'm looking to create a interactive nav bar for my own personal study purposes, so the idea behind it is if you click on down the number in the corner of the screen changes and a new image and text pops up every time this goes til number(page 5) all the other elements would be on display none except that one page that is active
I'd like to know if it would be possible to create a nav bar and lets say you have a set up nav with 2 buttons up and down how to make certain things not show up and others show up, i think my counter or var is not calculating properly, this is my javascript if statement( more in depth js fiddle https://jsfiddle.net/emilegmn/1L3h51zw/ )
if(numberCount < 1 ) {
add class to nav showing only one button ( down )
}
and this is my counter
numberCount = numberCount + 1
and then after that between 2-4 to show 2 buttons ( up and down )
and at 5 to only show up.
If someone has any things or knows something online that does this, please link me to it if you want!
I have tried finding how to do this but I am still trying to get it all figured out,
Thanks in advance and for your time!

If I understand correctly, is this what you want to achieve:
User clicks between two buttons to make new things appear (like a slider maybe?) but in a nav bar.
To do so you need JavaScript as well as an HTML structure that helps you out. In summary, you could do something along these lines. Granted this only takes into account a sort of "next button", if you want a previous one then you just need to add another function that instead of adding to the current_slide , subtracts from it.
Happy coding!
HTML
<nav id="slider-nav">
<div id="slide-1" class="active"></div>
<div id="slide-2"></div>
<div id="slide-3"></div>
<div id="slide-4"></div>
</nav>
CSS
With this you make sure that only the <div> with class .active is visible
#slider-nav div:not(.active) {
display:none;
}
JS
This would be your sweet JavaScript (jQuery)
//To be placed within your document ready function
const nav_slides =[]; //Holds the id of all your slides
var current_slide = 0;
$('#slider-nav div').each(function(){
nav_slides.push('#' + $(this).attr('id'));
});
/*This would be the part of when clicking happens on the 'next' button in your nav.
Keep in mind that the definition of the function must be within the same
scope as the defined variable, current_slide and nav_slides.
Hopefully, all encapsulated into one single scope that is your api.*/
function nextSlide(){
$(nav_slides[current_slide]).removeClass('active');
current_slide = (current_slide + 1) % nav_slides.length;
//Move on to next slide
//It's a circular counter, when it reaches max slide 4, it'll go back to 0
$(nav_slides[current_slide]).addClass('active');
}
ps: The initialization of current_slide is not dynamic. If in your HTML you happen to change who the first slide with active class is, then you need to update it in your JS. It would be very useful to initialize that current_slide dynamically, in other words, not hard coded out of laziness.

Select all images on Pinterest for moving to another board

UPDATE: (2015-10-16) [SOLVED!] -- Fixed with trigger() and by limiting to 50 pins with slice().
Many thanks to Abhas Tandon who offered that by using
$(this).trigger('click');
instead of
$(this).addClass('selected');
it will correctly select the images. I tested with a board consisting of 21 images and it worked perfect! However when trying to move 300+ pins, it failed with this error:
"You can only move 50 Pins at a time."
I then solved that issue by using JavaScript's slice() function to grab only the first 50 images. Tested and it works correctly now. So my limitions are currently that I can only select and move 50 pins at a time, but that's much better than having to pick them one by one by hand!
FINAL WORKING CODE:
function checkAll() {
console.log("Checkboxes count: " + checkBoxes.length);
$.each(checkBoxes, function(i, v) {
console.log("Checkbox #: " + i)// + " = " + v);
$(this).trigger('click');
});
}
var checkBoxes = $("div > div > div.bulkEditPinWrapper > button");
var checkBoxes = checkBoxes.slice(1, 51);
checkAll();
DESCRIPTION OF ISSUE:
I'm having some trouble with a Pinterest interface (?) script (?) I'm developing. I'm a programmer, mostly self-taught, and I think I'm missing some key component of understanding about AJAX possibly? This is the second time I've tried to write a jQuery script to interface with Pinterest. The first one was an attempt to defeat the infinite scroll feature (AKA "load more" button) in order to have all images displayed on one page, from which I could scrape image links and then download them with a browser plugin to backup my Pinterest boards to my computer. My code all worked except it didn't actually end up downloading any images.
Disappointed, I put that on hold to focus on other things. Eventually I revisited my code and did some digging and it should have worked. My research indicated that the CRITICAL FLAW that may have been preventing my program from doing what I wanted was something to with "Pinterest uses AJAX". While I'm aware of the term "Asynchronous JavaScript with XML" and "XMLHttpRequest", I'm not an expert by any stretch at implementing AJAX.
With my latest code, I wrote a -- you would think it would be -- quick little jQuery script to select all images so that I can move them, delete, copy, etc ... The problem is that though checking all the boxes works (You must be in a board and click on "Move" for instance), when I click the "Move" button a second time which should pop-up a modal letting choose which board to move to, all I get is
Oops!
Select the Pins you want to move.
USING:
Chrome 45.0.2454.101
Windows 8.1 64-bit
HOW TO REPRODUCE ISSUES:
Login to your Pinterest account on a laptop or desktop computer.
Choose one of your boards or build a test board from scratch (so you don't loose any of your current pins).
Click "Move" on the top right. This will make transparent checkboxes appear in the upper right of each image. Note: Pinterest shows their unchecked checkboxes WITH a check mark already in them. The way you know a box has been checked is that it retains the checkmark and the box background turns solid (not transparent anymore) red.
In your browser launch your developer tools console (Firefox/Chrome: F12).
Add the below script to your JavaScript console in your browser.
Run the script. If it "worked" you should see all of the checkboxes are now red.
Click the "More" button again. Now you will get the "Select the Pins you want to move." message, indicating that in actuality, the select all did not work.
NOTE: I'm not concerned about pagination at this point, but if anyone wants to address that I'm open to solutions on that issue as well.
SCRIPT TO SELECT ALL IMAGES:
/*
#Repo: EHW-JavaScript-Pinterest-SelectAllImages.
#Creator: Eric Hepperle (CodeSlayer2010/CodeWizard13)
#Date: 10/15/15
#Version: 1.0
#Purpose: Click "Move" in Pinterest board to move pins.
Once checkboxes are visible, run this in an
F12 browser console to automatically check all
visible image pins. You will have success when
the color of all checkboxes turns red. Then
click "Move" again to finish.
#Notes:
2015.10.15
- Created script.
- Checks all checkboxes, but does not allow moving.
*/
function checkAll() {
console.log("Checkboxes count: " + checkBoxes.length);
$.each(checkBoxes, function(i, v) {
console.log("Checkbox #: " + i)// + " = " + v);
$(this).addClass('selected');
});
}
//$(document).ready(function() {
alert('hi');
var checkBoxes = $("div > div > div.bulkEditPinWrapper > button");
checkAll();
//});
WHAT I TRIED TO FIX IT ALREADY:
Googled for solution. I found the following articles. That last one seemed like it might be what I needed, but it did not seem to be focused enough on my issue.
StackOverflow | jQuery to add a class to image links without messing up when the link passes variables
Quora | Pinterest User Feedback: Can you provide options to "select multiple pins and pin them into a board" or "to pin an image into multiple boards at a time"?
StackOverflow | Identify & Extract the title/description of an Image (Data Scraping Pinterest)
StackOverflow | Get all images from a board from a Pinterest web address
Originally tried setting each checkbox's "checked" property to "true", but it did not end up checking the boxes (why??). But,then I observed in a browser console that when I clicked to select an image the "selected" class was applied to that image. So, I used addClass() to apply that class to all checkboxes in my code and I was able to get all the checkboxes to select properly then ... or so it seemed.
I tried the code with a call to $(document).ready, but it gave me the error
"Uncaught ReferenceError: checkBoxes is not defined(…)"
It took me forever to format this ... thanks in advance for your help. I'm happy to clarify if anything was unclear. Also, please let me know if this post belongs in a different forum. Thanks.

I tried triggering click event on each element and it worked perfectly for me. Couldn't try it with scroll because I don't have that many images in my board.
function checkAll() {
console.log("Checkboxes count: " + checkBoxes.length);
$.each(checkBoxes, function(i, v) {
console.log("Checkbox #: " + i) // + " = " + v);
$(this).trigger('click');
});
}
var checkBoxes = $("div > div > div.bulkEditPinWrapper > button");
checkAll();
Let me know if it works for you.

jQuery For Loop Image Check and Display

Good afternoon Stack Overflow,
I'm inexperienced when it comes to coding in general and I've been having a problem that's doing my head in!
If you'll allow me to set the scene...
The section of the project I am currently working on involves a user picking items from a warehouse in order to fulfil a shipment and in some cases they have to pick the same item from various locations, when that needs to be done, the small "!" type icon appears next to the item.
The user then can click on the icon and choose which locations they will be retrieving the stock from, they then press confirm on the modal and when it closes it sets the text back to blue and hides the icon.
The part I am having trouble with is that once all the locations have been established, the order needs to be processed and this requires a button to be clicked on, which I only want to appear once all the "!" icons are hidden.
I know there are alot of questions based on for loops and images checks and believe me when I say I've tried hard to figure this out myself and I've tried different approaches:
ShowProcess = false
for (i = 0; i<Picker; i++) {
if ($('#MultiLocIcon'+i).is(':visible')){
ShowProcess = true
}
if (ShowProcess == true) {
$('#ProcessConfirm').show()
};
};
This obviously wouldn't work because its setting the first variable in the list to "true" and will always read it as true, therefore always showing the image, even if the "!" icon still exists in other rows.
I also tried using .each() to test each rows text color of a specific but also had no luck:
var table = $('#RequestedItemsTable');
table.find('tbody > tr').each(function(){
if $('#Desc').css('color') == '#0000FF'){
//do something
I feel like my experience is letting me down as I still have a lot to learn and have a suspicious feeling that the solution is going to be really easy, but then again, its only easy if you know how.
If anyone could take the time to help me with this problem or offer me any advice, I'd be really grateful.
Here is a section of my code which might be useful:
Modal "Confirm" button:
//CONFIRM Button which will submit final picks.
'Confirm': function() {
//Reset the length loop
length = undefined;
//Remove "Multiple Location" icon from the row.
$('#icon'+id).hide();
//Change text colour back to blue to have visual confirmation that item is ready for picking
$('#Desc'+id).css('color', '#0000FF');
$('#QtyReq'+id).css('color', '#0000FF');
$('#QtyinStock'+id).css('color', '#0000FF');
$(this).dialog('close');
The "!" Icon:
<td id= "MultiLocIcon<?=$i;?>"><?if($row->Count_Location > 1)
{?><img src="<?=base_url();?>public/css/images/error.png" alt="LocPick" title="Multiple Locations" style="cursor: pointer;" id= "icon<?=$i;?>" onClick="$.LocPick(<?=$i;?>);"/><?}?></td>
Basically just need to know how my image can show once the loop checks and knows that the "!" icon is hidden from every possible row.
Thank you for your patience.

You'll need to add a second check in your modal logic, perhaps after your .hide():
//Remove "Multiple Location" icon from the row.
$('#icon'+id).hide();
$('img[id^=icon]:visible').length || $('#ProcessConfirm').show();
What this does is combines the :visible pseudo-selector and a regex selector for all img tags with id starting with "icon". This assumes you won't have any other unrelated image tags with an id like "icon*". If the length is 0, it will go ahead and show the #ProcessConfirm element.

simplest solution I would give is to add a class warning to all the table column which has warning icon & then check for visibility of the same.
if($('.warning:visible').length === 0){
//all warning icons are hidden
}

What I would do is based off your HTML, select all the alert icons, and do a :visible psuedo selector on it. This will return all the visible alert icons, if there are none in the array, you know none of them are visible. You will need to identify them with a class, such as .alert:
if( $(".alert:visible").length === 0 ){
// Do your code in here for no visible alert icons!
}

When user clicks confirm on modal you should run a check on how many icons are still visible, and if the amount is 0 then show the button, like this:
// This searchs for every <td> with an id that contains '#MultiLocIcon'
// Then checks if the amount of those which are visible is 0 and do something
if ( $('td[id*=MultiLocIcon]').not(':visible').length === 0 ) {
$('#ProcessConfirm').show()
}

JS While statement in Image Slider

Im trying to build an image slider with little buttons at the bottom that you can click and it will show the appropriate slide. So if you click button #3, it will show slide #3...pretty standard stuff. Im using javascript to detect how many slides there are and show an equal number of buttons. But now I can't figure out how to connect the buttons to the slide so that when a user clicks on one, it will show the appropriate number slide. I know this must be a pretty simple task, I just can't figure out how to set it up.
My script looks like this:
<script>
$(document).ready(function() {
var count = $(".slider_class").length;
$("#slide_0").show();
var i=0;
while (i < count){
$(".slider_bullets").append('<a href="#" id="bullet_link_' + i +'"><img src="img/slider_down.png" alt="slider_down" />');
i++;
}
});
</script>
.slider_class is a class I have applied to each of the slides. Each slide also has a number id starting at zero so that the third slide is #slide_2. The .slider_bullets are the buttons I was talking about. You'll notice that I have given each of them a unique specified id as well that references the slide that they are associated with.

This is what I would use.
$(".slider_bullets a").click(function(){
$(".slider_class").hide();
$("#slide_"+$(this).index()).show();
});

Javascript won't update DOM on what appears to be recent Items

I'm using 100% pure javascript, tried Jquery but it didn't help. Code not working in FF/Chrome/Safari.
I have built Edit-In-Place functionality where when the user clicks "Edit" (calling external function with onclick - passing in item_id) -- a string of text is hidden to reveal an input with the same string of text in it. (by changing classes) "Edit" is also replaced by "Save". When done editing the string - the user clicks save, and everything reverts back to normal.
AJAX is processing all the updates - but commenting out the AJAX block does not fix it.
I am loading a stream of these objects. The javascript works for all of them - but only updates the DOM, visually anyway for what appears is items before the last 24 hours. The blocks themselves are identical. That is - items that have been added within the last 18-26 hours when I click "Edit", do nothing. BUT if I alert out the class of the element I want to edit it says "editing" (as opposed to "saved") like it is working. (see below) Although this change is never reflected in inspect element.
Code on Page
<input type="text" class="input_field" id="input_254" value="Foo" onkeydown="javascript: if (event.keyCode == 13) { update(254); }" style="display: none; ">
<span class="user_links" id="display_269" style="display:none;">Foo</span> //hidden span that holds the value and acts at the check
<span id="edit_state_269" class="saved" style="display: none;">Foo</span>
<span onclick="update(269)" id="edit_269">Edit</span>
External Javascript
function update(item_id) {
var links_span = document.getElementById('display_' + item_id);
var input_span = document.getElementById('input_' + item_id);
var string_old = document.getElementById('edit_state_' + item_id).innerHTML;
var state_check = document.getElementById('edit_state_' + item_id);
var edit_button = document.getElementById('edit_' + item_id);
if (state_check.getAttribute('class') == 'saved') {
// Hide the links display list and show the input field
links_span.style.display = 'none';
input_span.style.display = 'inline';
// Change the Edit button text and state_check
edit_button.innerHTML = 'Save';
state_check.setAttribute('class','editing');
//alert(state_check.getAttribute('class')); // this alerts "editing" although in DOM it is still "saved" on the blocks that are the problem
If any more details would be helpful - I will provide them.
It is a devil of a problem - with no obvious solution. Would really appreciate any direction you can give!

Solved. As usual it's the little things. The first few blocks were being loaded on page load - and then hidden as the user navigated resulting in duplicate IDs. Javascript naturally selected the one higher on the page - the one that was hidden.