Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 18
Like Tree2Likes

Thread: very rudimentry image fader

  1. #1
    Senior Member
    Join Date
    Apr 2016
    Posts
    717
    Member #
    53891
    Liked
    11 times

    very rudimentry image fader

    so I thought it would be a good idea to mess around on codepen, with the aim of making an image slider out of vanilla js instead of jquery and I got this far

    https://codepen.io/cole-pratt/pen/BpqOLd?editors=0110

    can anyone tell me what I'm doing wrong?

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Styles in JS are all stored as strings. You'll have to convert to a number, then subtract.

    Second, you need to select the element outside the interval. The reason for this is that you also need to give it an initial value.

    Third, the if statement you had was checking if the opacity value was empty, which only was the first time. It's unnecessary either way.

    So, the flow of what you wrote goes:

    Set an interval that -
    selects the elements,
    loops through them all, first checking if the opacity is set, which it wasn't,
    then, set the value of opacity to an invalid value

    I encourage you to try working it out yourself, but if you'd like to cheat and look at the working answer, I forked your pen and fixed it: A Pen by Ronald Roe

    note: The line that says Array.from(c)... has the same effect as your for loop. Go here for info: https://developer.mozilla.org/en-US/.../Array/forEach
    Last edited by Ronald Roe; Feb 10th, 2017 at 07:49 PM.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member
    Join Date
    Apr 2016
    Posts
    717
    Member #
    53891
    Liked
    11 times
    no I really need to work this out myself, practice makes perfect, thanks Ronald
    Ronald Roe likes this.

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Here's another nudge. The flow should go like this:

    Store the elements in a variable.
    Loop through and set the opacity to the initial value
    Set the interval to loop through each to reduce the opacity. (Don't forget to convert the opacity to a float before you try to change it)
    busso likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Senior Member
    Join Date
    Apr 2016
    Posts
    717
    Member #
    53891
    Liked
    11 times
    I only just saw your reply now, nice to know I was heading in the right direction, although I'm not out of the woods yet

    https://codepen.io/cole-pratt/pen/BpqOLd?editors=0110

    its throwing some sort of style error

    I actually had it working on the first div, but when I introduced the loop it all went wrong. also o have no Idea what you mean by converting the opacity to a float

  7. #6
    Senior Member
    Join Date
    Apr 2016
    Posts
    717
    Member #
    53891
    Liked
    11 times
    i presume its throwing the error because its not recognising line 5?

  8. #7
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Float is a type of number. You'll need to use parseFloat () to convert the string to a number before you can add or subtract anything from it.

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    There are several reasons it's still not working.

    You aren't setting the initial value of the opacity in the elements. That's probably where the error you get is coming from.

  10. #9
    Senior Member
    Join Date
    Apr 2016
    Posts
    717
    Member #
    53891
    Liked
    11 times
    i tried setting the initial value by doing the following

    c.style.opacity = 1;

    but apparently its not that simple, any tips?

  11. #10
    Senior Member
    Join Date
    Apr 2016
    Posts
    717
    Member #
    53891
    Liked
    11 times
    can you explain line 3 in your pen?


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:19 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com