We Keep Coding

I have managed to find a way to get text of my slides by using each but how do I get it to display my can products not text?

I have found a way to display text on each of my empty slides. so far, so good. But at you can see in my codepen project, there's a can displaying on the first slide. Instead of the text 'Hello' on each of my slides, how do I display a loop of cans on each slide?
https://codepen.io/Rosstopherrr/pen/GVRvxJ
I had it like this thinking it will show all cans in each slide but it doesn't show any cans...
$('#products article').each(function() {
$(this).append(initApp())
});
what am I doing wrong?
$('#products article').each(function() {
$(this).append('hello')
});
EDIT - progress so far
so in the each.function(index) - I can add the index, and then in initApp(index) - I can add index. and then in the initApp function I can adjust so that bottle[index] gets selected and then added.
But nothing seems to work?? What am I doing wrong?
I know there is a bunch of ways I can do this.
Like could I skip the initApp() function and add all the code in the .each(function() { my code to append bottle})??

in initApp() you define const $container = getElement('.container'); getElement function calls document.querySelector(selector); that returns just the first element that matches the selector, in this case the first div with class .container in the first article tag. That's the first error.
In order to add a bottle to each container you need a list of .containers, that you can obtain with $containers = [...document.querySelectorAll('.container')]
once you have all .container you can integrate the forEach function call, maybe in this way
[$bottle1, $bottle2, $bottle3].forEach(($bottle, i) => {
$bottle.classList.add('bottle' + i);
$containers[i].append($bottle)
});
it's possible that you will still not find the bottles like in the first item; that's because the single .bottle1, .bottle2, .bottle3 etc have wrong letf and top css properties; in addition, the .side divs miss the background-image property.

Calling a value + style.display function?

I'm struggling to get this working because I don't know the right formatting.
What I am attempting is to get a CSS modal to display depending on what a user selects as a value in a Javascript applet.
The idea is to return .style.display = "block";
function onClick(event){
<something>.style.display = "block";
}
Where contains a value that has being saved in the format of intersects[0].object.title
So if for example I have selected "manhattan"
alert(intersects[0].object.title)
I'll get the string "manhattan" displaying correctly. That works perfectly.
But I can't get manhattan.style.display = "block"; returned and WORKING inside the function? I tried :
function onClick(event){
intersects[0].object.title.style.display = "block";
}
Also tried
function onClick(event){
(intersects[0].object.title).style.display = "block";
}
Any help would be greatly appreciated

This may not be directly what you're looking for, but it may help anyways. To make it work in your case, just change the button press to be a check for the selected value.
Rather than adjusting the CSS directly, this route modifies the element's classList to remove or add a .hidden class that contains the correct CSS.
// Loop through all modal buttons
document.querySelectorAll('.modal-button').forEach(function(element) {
// Add a click event listener to all modal buttons
element.addEventListener('click', function() {
// Toggle the target modal on click
toggleModal(element.dataset.target);
});
});
// Create the function to toggle the modals
function toggleModal(target) {
// Find the target
let targetElement = document.querySelector(target);
// Check if the target is hidden
if (targetElement.classList.contains('hidden')) {
// If it is, show it
targetElement.classList.remove('hidden');
} else {
// If it isn't, hide it
targetElement.classList.add('hidden');
}
}
.hidden {
display: none;
}
<button data-target="#modal" class="modal-button">Toggle Modal</button>
<div id="modal" class="hidden">Hey there, I'm a modal!</div>

I'm not certain from your question how the pieces of your puzzle are related to one another, and it would be helpful if you could clarify by showing more of your HTML and Javascript code, but I'll toss a couple of ideas at you in the meantime. Apologies if I'm telling you stuff you already know.
The only sort of object you would usually be able to set "style.display" on is an HTML element. To tell Javascript which HTML element you want to modify, you usually use a CSS selector like "document.getElementById('myDiv')"
It sounds like "manhattan" might be a piece of information you could use to uniquely identify the HTML element you intend to show. If so, there are four simple parts to showing the correct element:
associate the element with that particular string (eg via an id)
get the string at runtime (the same way as you did for the alert)
select the element based on the matching string
display the selected element
All together, it might look like this:
<div id="manhattan"></div>
<script>
var identifier = intersects[0].object.title;
alert(identifier) //I'm assuming this alerts "manhattan"
var elementToShow = document.getElementById(identifier);
elementToShow.style.display = "block";
</script>
Is this on the right track? If not, just provide more detail, and I'll see what else I can suggest.

Give to you div some id and then just change that:
<div id="test"></div>
document.getElementById("test").style["display"] = "block";
or
document.getElementById("test").style.display = "block";
or
document.getElementById("test").style.setProperty('display', 'block');
or
document.getElementById("test").setAttribute('display', 'block');

Toggle on div show/hide

I know there are several questions/solutions to this problem, and I am looking for a combination of two simple solutions(I am not a coder, just a copy/paste/manipulator) so here goes: I need a script which involves a button that toggles show/hide divs on top of a large imagemap, whose function is to turn on/off labels contained within each div. As the imagemap is large and contains groups, I am looking for a way to loop the following functional script:
$(document).ready(function() {
$(".hide").click(function() {
$(this).siblings(".hideShow").hide();
});
$(".show").click(function() {
$(this).siblings(".hideShow").show();
});
});
The loop is needed as I will have well over 200 labels to toggle(removing them will clear some visual space). The html above lists two buttons, whereas I need only one which toggles between the two, like the one behind this jquery bit:
var toggleState = false;
$('.show').click(function() {
$(".text").toggle();
$(this).toggleClass('hide').attr('title', toggleState ? 'Show All' : 'Hide All');
toggleState = !toggleState;
})
The former jfiddle found here: http://jsfiddle.net/MztAm/
The latter here: http://jsfiddle.net/y8ZTj/1/
Actually, as the latter script is more desireable, is it possible to turn it into a loop, replacing ".text" to accomodate many instances?
The best I could come up with: http://jsfiddle.net/qmv3dmya/ though I need a new instant of the jquery piece for every grouping. But I'll end up putting the series in a separate *.js sheet to be referenced by the main page.

It is possible that I don't understand your question correctly, but if I do, then perhaps this information will be helpful:
(1) You do not need a loop. With jQuery, selecting all DIVs with class="text" looks like this:
$('.show').click(function() {
$(".text").toggle();
});
(2) This bit: $(".text") creates an object that contains a list of all DIVs that have class="text"
(3) This bit: .toggle() applies that method to each element contained in $('.text')
Therefore, all elements with class="text" will be toggled visible/invisible as a group. No need for a loop.
jsFiddle Demo
If you did need a loop, you could use .each(), like this:
$('.text').each(function(){
// Whatever you do in here will be done once to each DIV
// (or other element) contained in the object ("list") of
// all elements with `class="text"`
});

You can you siblings function see below.
Jquery:
var toggleState = false;
$('.show').click(function() {
$(this).siblings(".text").toggle();
$(this).toggleClass('hide').attr('title', toggleState ? 'Show All' : 'Hide All');
toggleState = !toggleState;
});
DEMO

Javascript show/hide - I don't want it to hide the entire element

This is probably a fairly easy question, but I'm new to JavaScript and jquery....
I have a website with a basic show/hide toggle. The show/hide function I'm using is here:
http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/
So here's my question..... I would really like the first 5-10 words of the toggled section to always be visible. Is there some way I can change it so that it doesn't hide the entire element, but hides all but the first few words of the element?
Here's a screenshot of what I would like it to do:
http://answers.alchemycs.com/mobile/images/capture.jpg

There are many different implementation possibilities:
You can divide the contents up into the first part and the second part (two separate spans or divs inside your main object) and hide only the child object that represents the second part, not hide the parent object.
Rather than hide the object at all, you can set its height to only show the first part (with overflow: hidden)
Change the contents of the main object to only have the first part as the contents (requires you to maintain the full contents somewhere else so you can restore it when expanded again).
Here's a working example of option 1: http://jsfiddle.net/jfriend00/CTzsP/.

You'd need to either:
Put in a span/etc. after the first n words, and only hide that part, or
Change the viewable region, or
Replace or toggle the span/etc. with the "collapsed" view.
The last is a bit more customizable; using two separate elements allows trivial games to be played (showing an image, for example, like a little curly arrow) without modifying adding/removing DOM elements.
I tend towards the last because it's simple and obvious, but that's a personal preference, and really isn't as true as it used to be.

You can do some plugin authoring,I did a sample demo here ,based on your screenshot
<div class="toggle">ShowHide</div>
<div class="content">some content some content some content some content some content <br/> some content some content some content </div>
<div class="toggle">ShowHide</div>
<div class="content">some content some content some content some content some content <br/> some content some content some content </div>
here is javascript/jquery code
jQuery.fn.myToggle = function(selector, count) {
var methods = {
toggle: function(selector, count) {
if ($(selector).is(':visible')) {
var span = $('<span>');
span.text($(selector).text().substr(0, count) + "...");
span.insertAfter($(selector));
$(selector).hide();
}
else {
$(selector).show();
$(selector).next('span').hide();
}
}
};
$(this).each(function() {
methods.toggle($(this).next(selector), count);
$(this).click(function(evt) {
methods.toggle($(this).next(selector), count);
});
});
};
$(function() {
$('.toggle').myToggle('.content', 3);
});

Here is a solution using css properties only instead of mangling the dom.
http://jsfiddle.net/AYre3/4/
Now if you want some sort of animation happening as well you'll probably need to do a bit of measurement along the way.

Text captions on multiple Images with jQuery

I'm new to jQuery so please be patient. I want to create a text caption that slides down on an image when you hover over a link on the page. I can do this when there's just one image with one caption but I have several images with different captions on one page.
I would like to create one function that can handle all of these in seperate instances and not create a function for each image/textcaption. The reason being is that the images and text is dynamic and changing in quantity overtime.
Please see an example of the code below, the .portText is a class of about 7 instances, when I hover over .moreInfo the text for every image slides down. I understand why this is happening, and I think I need to use ($this) somehow, but I also think i need to connect the picture to the text differently that it's done here. Hope this makes sense. Can anyone help? Cheers!
$(function() {
$('.moreInfo').hover(
function() {
$('.portText').slideDown('slow');
},
function() {
$('.portText').slideUp('slow');
}
)
});

You can refer to the element that was hovered over using $(this).
The way I usually do this is to make portText a child of the moreInfo div:
<div class="moreInfo">
<div class="portText">
....
</div>
</div>
Then instead of just $('.portText') you can do $('.portText', this) (i.e. all portTexts that are children of the hovered element).
Edit: Another way to do it would be to use the data attribute and give each portText an ID:
<div class="moreInfo" data-id="1">....</div>
<div class="portText" id="portText-1">...</div>
Then for Javascript:
$('.moreInfo').hover(
function() {
var myId= "#portText-" + $(this).data('id');
$(myId).slideDown('slow');
},
function() {
var myId= "#portText-" + $(this).data('id');
$(myId).slideUp('slow');
}
);