We Keep Coding

Returning data from images in order

I'm quite rusty with my (basic) javascript so hopefully I'm not misunderstanding the problem entirely, but essentially what I'm trying to do is return the 'alt' field of an image as a caption appended to the title for each image, and while I'm getting essentially that, it's returning the list for the entire sequence of images to each instead of their own in a sequence. Code is super simple, which is probably why it's not working. Any help is appreciated
$('#projectThumbs img').each(function(){
$('.project-title').append("<div>" + $(this).attr('alt') + "</div>");
});
For example, if the images have a caption sequence of '1','2','3', each image is now being appended with '1,2,3' instead of '1' to 1, '2' to 2, etc.
Images structure from the html (in Squarespace so I don't have access to source code, only injection). This is in a grid of images.
ETA: noticed a few hiding divs in the code, maybe the project-item-count can be useful in some way?
<a class='project'>
<div>
<div class='project-image'>
<div class='intrinsic'>
<div class = 'content-fill'>
<img alt='example'>
</div>
</div>
<div class='project-item-count'>
</div>
</div>
<div class='project-title'>
Title
</div>
</div>
</a>
image of what's happening to help clarify

$('.project-image img').each(function(){
$(this).parents('.project-image').next().append("<div>" + $(this).attr('alt') + "</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='project'>
<div>
<div class='project-image'>
<div class='intrinsic'>
<div class = 'content-fill'>
<img src="https://picsum.photos/200" alt='example1'>
</div>
</div>
<div class='project-item-count'>
</div>
</div>
<div class='project-title'>
Title
</div>
</div>
</a>
<a class='project'>
<div>
<div class='project-image'>
<div class='intrinsic'>
<div class = 'content-fill'>
<img src="https://picsum.photos/200" alt='example2'>
</div>
</div>
<div class='project-item-count'>
</div>
</div>
<div class='project-title'>
Title
</div>
</div>
</a>

Assuming the HTML contains valid #projectThumbs element, the problem is that you're not targeting the .project-title element(s) correctly.
You need to do that using parent() (to find the parent of the element), and then use siblings() to find the correct sibling (which has project-title class assigned).
See the demo below:
$('#projectThumbs img').each(function() {
$(this).parent().siblings('.project-title').append("<div>" + $(this).attr('alt') + "</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="projectThumbs">
<a class='project'>
<div>
<div class='project-image'>
<img alt='example'>
</div>
<div class='project-title'>
Title
</div>
</div>
</a>
</div>

The id attribute cannot be duplicated in DOM elements so each function is not run on all the same id elements if you use the class attribute with the same name and use each function then your problem solved.i hope it helps you.
$('#projectThumbs img').each(function(){
$('.project-title').append("<p>" + $(this).attr('alt') + "</p>");
});
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<div id="projectThumbs">
<img alt="myimae"
src="http://psdandcode.com/themes/psd2code/images/logo.png">
<img alt="mimage"
src="http://psdandcode.com/themes/psd2code/images/logo.png">
<img alt="myimae"
src="http://psdandcode.com/themes/psd2code/images/logo.png">
<img alt="myimag"
src="http://psdandcode.com/themes/psd2code/images/logo.png">
</div>
<div class="project-title"></div>

Is it possible to do something like beforeall with mustache?

I have the following template:
<div class="photoList">
{{#photos}}
<img src="{{columnPhoto.url}}" data-zoom-url="{{original_size.url}}"/>
{{/photos}}
</div>
Sometimes {{#photos}} is empty or not set, in those cases, I don't want to add the div .photolist, is this possible?

{{#photos.length}}
<div class="photoList">
{{#photos}}
<img src="{{columnPhoto.url}}" data-zoom-url="{{original_size.url}}"/>
{{/photos}}
</div>
{{/photos.length}}

JavaScript animate function doesn't work

This is what the code looks like.
<head>
<link type="text/css" rel="stylesheet" href="C:\Users\User\Desktop\css1.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="C:\Users\User\Desktop\js.js"></script>
</head>
<body>
<div id="header_wrap">
<div id="header">
<div id="logo">
LOGO
</div>
<div class="nav">
<a href="http://www.google.se">
Stuff
</a>
<a href="javascript:void(0)">
Other stuff
</a>
<a href="javascript:void(0)">
More stuff
</a>
</div>
<div class="mobile_nav"></div>
<div class="mobile_nav_menu">
<div class="mobile_menu">
<span>Stuff</span>
<span>Other stuff</span>
<span>More stuff</span>
</div>
<div class="mobile_close">
</div>
</div>
</div>
</div>
<div class="image_container">
<div class="inner_content" id="slide1">
<h2>
CONTENTS
</h2>
</div>
<a class="button" href="javascript:void(0)"></a>
</div>
</body>
the .js file contains this code
setTimeout(function(){
$("#slide1").css('opacity', '1');
},800);
setInterval(function(){
$(".button").toggleClass("opacity");
},1000);
//Navigation
$(".mobile_nav").click(function() {
$(".mobile_nav_menu").animate({right: 0});
})
$(".mobile_close").click(function() {
$(".mobile_nav_menu").animate({right: -270});
})
Can anyone help me out with what I'm doing wrong and how it can be fixed?
Thank you! /AJ
UPDATE: The .js loads (tried the alert function), but does not fill the function it should. Original pen can be found on http://codepen.io/yuriylianguzov/pen/qjwEe

One of the problems is that you are trying to reference a javascript file from a physical file path, and not a url (or relative path). You can't use your harddrive path in an html file to include javascript.
<script src="C:\Users\User\Desktop\js.js"></script>
If your javascript is in the same folder as your html, try something like this:
<script src="js.js"></script>
I'm not exactly sure what the expected behavior for the JavaScript is, because it appears to be doing what it is intended to do. If you look at the DOM in the codepen link that you provided the element with the id of 'slide1' has its opacity style set to 1 (see below) and the anchor tag with class of 'button' is getting the class 'opacity' toggled on and off every second (not depicted below, but you can see it happening in firebug).
<div class="image_container">
<div id="slide1" class="inner_content" style="opacity: 1;">
<h2>
We are who we choose to be.
</h2>
</div>
</div>
The other two click handler's are targeting empty elements (the element with class of 'mobile_nav', and the element with class of 'mobile_close') so they aren't going to do anything.
$(".mobile_nav").click(function() {
$(".mobile_nav_menu").animate({right: 0});
})
$(".mobile_close").click(function() {
$(".mobile_nav_menu").animate({right: -270});
})
<div class="mobile_nav"></div>
<div class="mobile_nav_menu">
<div class="mobile_menu">
<span>Projects</span>
<span>Profile</span>
<span>Contact</span>
</div>
<div class="mobile_close"></div>
</div>
I hope this helps!

1) Some of the elements your javascript is acting on don't have any content
2) Change the line $(".mobile_nav_menu").animate({right: 0}); to: $(".mobile_nav_menu").animate({"right": "0"}); and do the same with the other one, though it won't have any functionality, really.
3) your class mobile_nav_menu needs to have css that says position:relative for the attribute "right" to work.
4) I'd recommend moving your mobile_close div outside the mobile_nav_menu div so it doesn't move when you click it
If anyone has stuff to add, please do so.

Getting a link from another div

I have
<div class="box box1">
<div class="content">
<img a href="http://www.example.com" />
<img src="https://www.google.ie/images/srpr/logo11w.png"</a>
</div>
</div>
What I want to do is make the entire div of box clickable.
I have looked around here in StackOverFlow and seen some great examples but I have tried them and I could not get them to work.
For Example:
$div.next('div.box2').find('a').attr('href', $div.find('a').attr('href'));
Any help would be great on how to do this in jquery

$(".box").click(function(){
window.location=$(".whereeveryourelookingfor").find("a").attr("href");
return false;
});
you can make the mouse pointer also look like the one on href , use the following css
.box{ cursor:pointer; }
http://jsfiddle.net/r9Xhf/

<div class="box box1" style="cursor: pointer">
<div class="content">
<a href="example">
<img a href="http://www.example.com" />
<img src="https://www.google.ie/images/srpr/logo11w.png"</a>
</div></div>
JS
$('.box').click(function(){
window.location.href = "http://www.example.com";
});

Using Bootstrap: JS function stop working when nav bar is toggled

I have a simple JS Junction that stop working when the break point of my responsive website is activated (The nav var toggle/collapse at 768px, here is when the JS function stop working)
The HTML is:
<div class="mainFoto">
<img id="bigImage" src="/fotosArticulos/12578.jpg">
</div>
<div class="misProductosFotos">
<div class="foto" onclick="callImage('12578.jpg');"><img src="/Thumbs/12578.jpg"></div>
<div class="foto" onclick="callImage('30643.jpg');"><img src="/Thumbs/30643.jpg"></div>
<div class="foto" onclick="callImage('12656.jpg');"><img src="/Thumb/12656.jpg"></div>
</div>
and the JS function is
function callImage(idImage) {
var imageUrl = '/fotosArticulos/'+idImage;
$('#bigImage').attr('src', imageUrl);
}
This simple does that when click on one thumb the JS change the SRC of id="bigImage"
Why this Function stop working and how fix it?

May be this will help you.
HTML
<div class="mainFoto">
<img id="bigImage" src="/fotosArticulos/12578.jpg" />
</div>
<div class="misProductosFotos">
<div class="foto">
<img src="/Thumbs/12578.jpg" />
</div>
<div class="foto">
<img src="/Thumbs/30643.jpg" />
</div>
<div class="foto">
<img src="/Thumbs/12656.jpg" />
</div>
</div>
Script
$('.foto').click(function() {
$('#bigImage').attr('src', $(this).find('img').prop('src').replace('/Thumbs/', '/fotosArticulos/'));
})
fiddle

Thanks Guys for all your support. The issue was that when the website collapsed and get responsive there was an invisible element that overlap the Thumbs icons, that is why they did not respond, I think I blend bootstrap too soon. Thanks again :)

#anilkumar, do you think storing $(this).find('img').prop('src').replace('/Thumbs/', '/fotosArticulos/') in a variable might make things a little more human readable? Like so:
$('.foto').on('click', function() {
var changeSrc = $(this).find('img').prop('src').replace('/Thumbs/', '/fotosArticulos/');
$('#bigImage').attr('src', changeSrc);
})
#saymon, do you reckon you might be removing the #bigImage id from .mainFoto > img at the breakpoint? Or perhaps Bootstrap might be renaming the element id?