Develop Reference

I have a problem calling with my carousel codes, it keeps keeping variables for other conditions

I have tried so many method to stop this error but nothing seems to work, here is a link to my codepen: https://codepen.io/T_manuel/pen/PoKMYVx
when the page loads, I call the function but when I resize the page, Javascript seems to do the new logic also with previous logics...
const mediaQuery_1 = '(max-width:601px)';
const mediaQueryList1 = window.matchMedia(mediaQuery_1);
/carousel parent div -- to dynamically load the carousel items
// define media queries
const mediaQuery_1 = '(max-width:601px)';
// add matchMedia
const mediaQueryList1 = window.matchMedia(mediaQuery_1);
if (mediaQueryList1.matches) {
carouselFunc(); // dynamic loaded pictures
LeftArrow.classList.add("displayNone");
let indexOfImg = 0; //to be accessed for the carousel, index for first image
let endofImg = 3; //carousel use, index for next image to be displayed
otherCarouselLogic(indexOfImg, endofImg);
if (carouselPics.length > 3) {
for (i = 3; i < carouselPics.length; i++) {
carouselPics[i].classList.add("displayNone");
}
RightArrow.classList.remove("displayNone");
} else {
RightArrow.classList.add("displayNone");
}
}
else {
carouselFunc(); //dynamic loaded Pictures
LeftArrow.classList.add("displayNone");
let IndexOfImg = 0; //to be accessed for the carousel, index for first image
let EndOfImg = 4; //carousel use, index for next image to be displayed
otherCarouselLogic(IndexOfImg, EndOfImg);
if (carouselPics.length > 3) {
for (i = 4; i < carouselPics.length; i++) {
carouselPics[i].classList.add("displayNone");
}
}
// not to display carousel arrows if pics can be showed at once
if (carouselPics.length <= 4) {
RightArrow.classList.add("displayNone");
}
}
// add event Listener
mediaQueryList1.addEventListener("change", function carouselUx(event) {
if(event.matches) {
document.getElementById("carous").innerHTML = "";
carouselFunc(); //contains dynamic loaded pictures
LeftArrow.classList.add("displayNone");
let indexOfImg = 0; //to be accessed for the carousel, index for first image
let endofImg = 3; //carousel use, index for next image to be displayed
otherCarouselLogic(indexOfImg, endofImg);
if (carouselPics.length > 3) {
for (i = 3; i < carouselPics.length; i++) {
carouselPics[i].classList.add("displayNone");
}
RightArrow.classList.remove("displayNone");
} else {
RightArrow.classList.add("displayNone");
}
}
else {
document.getElementById("carous").innerHTML = "";
carouselFunc();
LeftArrow.classList.add("displayNone");
let IndexOfImg = 0; //to be accessed for the carousel, index for first image
let EndOfImg = 4; //carousel use, index for next image to be displayed
otherCarouselLogic(IndexOfImg, EndOfImg);
if (carouselPics.length > 3) {
for (i = 4; i < carouselPics.length; i++) {
carouselPics[i].classList.add("displayNone");
}
}
// not to display carousel arrows if pics can be showed at once
if (carouselPics.length <= 4) {
RightArrow.classList.add("displayNone");
}
}
})
function otherCarouselLogic(cpF, newImg) {
/* carousel code ends here */
carouselBtn.forEach(function (btns) {
btns.addEventListener("click", function (e) {
clickedArrow = e.currentTarget.id;
if (clickedArrow === "right") {
console.log(newImg);
carouselPics[cpF].classList.add("displayNone");
carouselPics[newImg].classList.remove("displayNone");
LeftArrow.classList.remove("displayNone");
cpF += 1;
newImg += 1;
}
if (clickedArrow === "left") {
cpF -= 1;
newImg -= 1;
carouselPics[newImg].classList.add("displayNone");
carouselPics[cpF].classList.remove("displayNone");
RightArrow.classList.remove("displayNone");
console.log(newImg);
}
// ux purpose, when we get to the last pics in the carousel, the right arrow is hidden
diffR = carouselPics.length - newImg;
// diffL
if (diffR === 0) {
RightArrow.classList.add("displayNone");
}
if (cpF === 0) {
LeftArrow.classList.add("displayNone");
}
});
});
/* carousel code ends here */
}
upon load,
newImg is set to 4 and all seems to work
after resize, it is set to either 3 or 4 depending on the logic, but instead of incrementing that value alone, it gives value for the load and also for the resize.

Change Image on click (6 Image Loop)

I have 6 images that I want to swap between by clicking on the image but I can't seem to get the code right in order to make it go to the next picture
HTML
<img src="BCover.jpg" id="ImgGallery" onclick="ImgGallery()"/>
JavaScript
var counter = 1;
ImgGallery.onclick = function (){
if (counter == 1){
document.getElementById("ImgGallery").src = "BCover.jpg";
counter++;
}
else if (counter == 2){
document.getElementById("ImgGallery").src = "MechGP.jpg";
counter++;
}
else if (counter == 3){
document.getElementById("ImgGallery").src = "Mech2.jpg";
counter++;
}
else if (counter == 4){
document.getElementById("ImgGallery").src = "Mech3.jpg";
counter++;
}
else if (counter == 5){
document.getElementById("ImgGallery").src = "Mech4.jpg";
counter++;
}
else if (counter == 6){
document.getElementById("ImgGallery").src = "MCA1.png";
counter==1;
}
};

The problem (other than Spencer's comment about == assignment) seems to be that ImgGallery should be the name of a function, not a reference to the element, as it's being called as a function in the onclick attribute of your img element.
I renamed the ImgGallery() function to rotateGallery to eliminate ambiguity with the id of the element.
I also took some liberty to clean up your code a little by using array cycling instead of a switch statement to handle img gallery rotation.
<img src="BCover.jpg" id="ImgGallery" onclick="rotateGallery()"/>
var counter = 0,
gallery = ["BCover.jpg", "MechGP.jpg", "Mech2.jpg", "Mech3.jpg", "Mech4.jpg", "MCA1.png"],
rotateGallery = function () {
document.getElementById("ImgGallery").src = gallery[counter];
counter++;
if (counter >= gallery.length) {
counter = 0;
}
};

This can be DRYed up a bit. You can include all of your images in an array. JavaScript does not have a native cycle method but you can implement it with the following algorithm.
var images = ["BCover.jpg", "MechGP.jpg", "Mech2.jpg", "Mech3.jpg", "Mech4.jpg", "MCA1.png"];
var gallery = document.getElementById("ImgGallery");
var index = 0;
gallery.addEventListener("click", function() {
gallery.src = images[index];
index = (index === images.length - 1) ? 0 : index + 1;
});
I know the last statement inside the click listener may seem weird, but I wanted to write as little code as possible.

ImageGallery isn't a function, which will cause an error.
However, the main error is counter==1;, on the third last line. The == operator is for testing if a value has equal value (not necessarily equal type though), but for assignment, use the normal = operator.
Try this:
//First, create an array of images (so you can support as many images in the gallery as needed, only needing to update this array)
var images = ["BCover.jpg", "MechGP.jpg", "Mech2.jpg", "Mech3.jpg", "Mech4.jpg", "MCA1.png"],
//and a counter to loop through
c = 0;
//this function is triggered when the image is clicked on sending the image element as a parameter
function nextImg(elem){
//if c is less than the array's length - 1, then add 1 to c, otherwise make c equal 0
c = (c != images.length - 1) ? c + 1 : 0;
//actually change the src attribute of the image
elem.src = images[c];
//and just let you know what image you're up to
document.getElementsByTagName('p')[0].innerHTML = 'Image no. '+(c+1)+'. File name of image: '+images[c];
}
/* Make the image visible */
img{
cursor: pointer;
height: 50px;
width: 50px;
}
<img id='ImageGallery' onclick='nextImg(this)' />
<p>Notice the onclick attribute</p>

Clicked image doesn't come to previous image after clicking it again

Html code :
<img src="images/assets/plus.png" alt="Earth" id="pic" class="portrait" onclick="changeImage()" />
Javascript:
var newsrc = "minus.png";
function changeImage() {
if (newsrc == "minus.png") {
document.images["pic"].src = "images/assets/minus.png";
document.images["pic"].alt = "minus";
newsrc = "minus.png";
} else {
document.images["pic"].src = "images/assets/plus.png";
document.images["pic"].alt = "plus";
newsrc = "plus.png";
}
}
I am using these code to change image onclick.Now i want that when i click the minus image again it will come back to plus image again .How can i do that?

if minus.png then set to minus.png? Else won't be never performed. Should be if not minus, then minus, otherwise plus. Change == to !=. And if you want image with id "pic", you should use getElementById().
Edit:
for multiple images use following and change id="pic" to class="pic" in <img>:
function changeImage() {
if (newsrc != "minus.png") {
for(var i = 0; i<document.getElementsByClassName("pic").length; i++) {
document.getElementsByClassName("pic")[i].src = "images/assets/minus.png";
document.getElementsByClassName("pic")[i].alt = "minus";
}
newsrc = "minus.png";
} else {
for(var i = 0; i<document.getElementsByClassName("pic").length; i++) {
document.getElementsByClassName("pic")[i].src = "images/assets/plus.png";
document.getElementsByClassName("pic")[i].alt = "plus";
}
newsrc = "plus.png";
}

You should use document.getElementById("pic") instead of what you have because the document.images[] method returns an array. In your case it returns "[object HTMLImageElement]".
You should also move var newsrc = "minus.png" inside your function. I'm not sure the function will recognize the variable the way you have it.
Finally you should not set the newsrc variable inside your if.
That being said this code is much more simplistic:
function changeImage() {
var pic = document.getElementById("pic");
var x = document.getElementById("pic").src;
if (x == "images/assets/plus.png"){
pic.src = "images/assets/minus.png"
// Plus whatever else you want to do
} else {pic.src = "images/assets/plus.png"
// Plus whatever else you want to do
}
}

how to make hide/show text javascript smoother?

I am using this script to hide and show text however, I want to make the transition smoother but I am not sure how to. Here's a demo of it: http://jsfiddle.net/LnE5U/.
Please help me change it to make it smoother.
hide/show text
<div id="showOrHideDiv" style="display: none">hidden text</div>
<script language="javascript">
function showOrHide()
{
var div = document.getElementById("showOrHideDiv");
if (div.style.display == "block")
{
div.style.display = "none";
}
else
{
div.style.display = "block";
}
}
</script>

Here is an example using jQuery's fadeToggle (a shortcut for a more complicated animate)
// assuming jQuery
$(function () { // on document ready
var div = $('#showOrHideDiv'); // cache <div>
$('#action').click(function () { // on click on the `<a>`
div.fadeToggle(1000); // toggle div visibility over 1 second
});
});
HTML
<a id="action" href="#">hide/show text</a>
<div id="showOrHideDiv" style="display: none;">hidden text</div>
DEMO
An example of a pure JavaScript fader. It looks complicated because I wrote it to support changing direction and duration mid-fade. I'm sure there are still improvements that could be made to it, though.
function generateFader(elem) {
var t = null, goal, current = 0, inProgress = 0;
if (!elem || elem.nodeType !== 1) throw new TypeError('Expecting input of Element');
function visible(e) {
var s = window.getComputedStyle(e);
return +!(s.display === 'none' || s.opacity === '0');
}
function fader(duration) {
var step, aStep, fn, thisID = ++current, vis = visible(elem);
window.clearTimeout(t);
if (inProgress) goal = 1 - goal; // reverse direction if there is one running
else goal = 1 - vis; // else decide direction
if (goal) { // make sure visibility settings correct if hidden
if (!vis) elem.style.opacity = '0';
elem.style.display = 'block';
}
step = goal - +window.getComputedStyle(elem).opacity;
step = 20 * step / duration; // calculate how much to change by every 20ms
if (step >= 0) { // prevent rounding issues
if (step < 0.0001) step = 0.0001;
} else if (step > -0.0001) step = -0.0001;
aStep = Math.abs(step); // cache
fn = function () {
// console.log(step, goal, thisID, current); // debug here
var o = +window.getComputedStyle(elem).opacity;
if (thisID !== current) return;
if (Math.abs(goal - o) < aStep) { // finished
elem.style.opacity = goal;
if (!goal) elem.style.display = 'none';
inProgress = 0;
return;
}
elem.style.opacity = (o + step).toFixed(5);
t = window.setTimeout(fn, 20);
}
inProgress = 1; // mark started
fn(); // start
}
return fader;
}
And using it
window.addEventListener( // this section matches the code above
'load',
function () {
var fader = generateFader(document.getElementById('showOrHideDiv'));
document.getElementById('action').addEventListener(
'click',
function () {
fader(1000);
}
);
}
);
DEMO of this

This is quite simple. I have just made a demo and i used setInterval
Here's how it works
var fadeout = function( element ) { // 1
element.style.opacity = 1; // 2
window.setInterval(function() { // 3
if(element.style.opacity > 0) { // 4
element.style.opacity = parseFloat(element.style.opacity - 0.01).toFixed(2); // 5
} else {
element.style.display = 'none'; // 6
}
}, 50);
};
JSFiddle Demo Link
Steps
Create a function that accepts a DOM element
Set the opacity of the element to 1
Create a function that loops every 50ms
If the opacity is greater than 0 -> continue
Take away 0.01 from the opacity
if it's less than 0 the animation is complete and hide it completely
Note this is a really simple example and will need a bit of work

You can use somthing like this
$('.showOrHideDiv').toggle(function() {
$('showOrHideDiv').fadeIn('slow', function() {
//fadeIn or fadeOut, slow or fast, all the stuffs you want to trigger, "a function to execute every odd time the element is clicked," says the [jquery doc][1]
});
}, function() {
//here comes "additional handlers to cycle through after clicks," says the [jquery doc][1]
});

I used OPACITY to make it show/hide. See this Example, Full code (without jQuery):
Click here
<div id="MyMesage" style="display:none; background-color:pink; margin:0 0 0 100px;width:200px;">
blablabla
</div>
<script>
function ShowDiv(name){
//duration of transition (1000 miliseconds equals 1 second)
var duration = 1000;
// how many times should it should be changed in delay duration
var AmountOfActions=100;
var diiv= document.getElementById(name);
diiv.style.opacity = '0'; diiv.style.display = 'block'; var counte=0;
setInterval(function(){counte ++;
if ( counte<AmountOfActions) { diiv.style.opacity = counte/AmountOfActions;}
},
duration / AmountOfActions);
}
</script>

I followed iConnor solution and works fine but it had a small issue setInterval will not stop after the element be hidden I added stop interval to make it better performance
var fadeout = function( element ) { // 1
element.style.opacity = 1; // 2
let hidden_process = window.setInterval(function() { // 3
if(element.style.opacity > 0) { // 4
element.style.opacity = parseFloat(element.style.opacity - 0.01).toFixed(2); // 5
} else {
element.style.display = 'none'; // 6
console.log('1');
clearInterval(hidden_process);
}
}, 50);
};

Can i create a javascript carousel which contains a flash file as well as static images?

I was wondering if it's possible to include an swf within a javascript carousel that currently just contains stagic images. What I'm looking to do is include a flash animation within the carousel.
I guess I've got two main questions:
Is it possible to cycle through flash files in the same way as an image?
How would I get the javascript and flash to interact so the flash file would know when it had been selected?
If it helps, here's the js we're using:
$(document).ready(function(){
var $looper = true;
var timer;
var currentSlide = 0;
var cell = 0;
var row = 1;
var hCycles = 0;
var aCycles = 0;
//no. of full cycles
var homecycles = 2;
var aboutcycles = 2;
//aboutSlide speed
var fast = 1200;
var slow = 4000;
//hide homepage slides
$('#slide2').fadeOut(0);
$('#slide3').fadeOut(0);
$('#slide4').fadeOut(0);
$('#slide5').fadeOut(0);
$('#slide6').fadeOut(0);
//hide about slides
$('.a-slide1').fadeOut(0);
$('.a-slide2').fadeOut(0);
$('.a-slide3').fadeOut(0);
$('.a-slide4').fadeOut(0);
$('#slide-c1 .a-slide1').fadeIn(1200);
runSlide(fast);
function runSlide(x) {
if ($('body').is('.about')) {
setTimeout(function() {
aboutSlides();
}, x);
} else {
if ($looper) {
setTimeout(function() {
slideShow();
}, 4000);
}
}
}
function slideShow() {
if ($looper) {
if (currentSlide++ < 6 && hCycles < homecycles) {
$('#slide'+ currentSlide).fadeOut(1200);
if (currentSlide == 6) {
$('#slide1').fadeIn(1200);
$('#slide-wrapper li').removeClass('active');
$('#btn1').addClass('active');
currentSlide = 0;
hCycles = hCycles+1;
} else {
$('#slide'+ (currentSlide+1)).fadeIn(1200);
$('#slide-wrapper li').removeClass('active');
$('#btn'+ (currentSlide+1)).addClass('active');
}
runSlide();
} else {
$looper = false;
}
}
};
$('#slide-wrapper li').each(function(index) {
$('#btn'+(index+1)).click(function(){
$looper = false;
$('.slide').fadeOut(1200);
$('#slide'+ (index+1)).fadeIn(1200);
$('#slide-wrapper li').removeClass('active');
$(this).addClass('active');
});
});
function aboutSlides() {
if (cell++ < 3 && aCycles < aboutcycles) {
if (cell == 3) {
if (row < 3) {
row = row+1;
} else {
row = 1;
aCycles = aCycles+1;
}
var hide = (row-1);
if ((row-1) == 0) {hide = 3}
$('#slide-c1 .a-slide'+ hide).fadeOut(1200);
$('#slide-c1 .a-slide'+row).fadeIn(1200);
cell = 0;
runSlide(fast);
} else {
$('#slide-c'+(cell+1)+' .a-slide'+ (row-1)).fadeOut(1200);
$('#slide-c'+(cell+1)+' .a-slide'+(row)).fadeIn(1200);
if (cell == 2) {
runSlide(slow);
} else {
runSlide(fast);
}
}
} else {
// create the final strip
$('#slide-c3 .a-slide3').fadeOut(1200);
$('#slide-c3 .a-slide4').fadeIn(1200);
}
}
});
Thanks!

There isn't any problem as to whatever content you want to put in your slides. As long as it is valid html, it's valid in a slide. Countless jquery/motools/etc plugins let you specify whatever you want for content.
flash is valid.
But you might want to revert to another revealing method. setting the opacity on a swf from javascript is complex and yields to different results, according to browser and flash version. If your flash file is custom made, then you can create a function that fades it to white for example, and call it from javascript. But from experience, changing the opacity of a swf is calling for trouble.
I don't know if this is relevant enough to be an answer, I wanted to post it as a comment, but there isn't any comment button. Oh well.