Solved

JS Prev/Next Not Working....Maybe Conflict with Other JS?

Posted on 2014-02-24
7
85 Views
Last Modified: 2014-11-18
Hello,

The prev/next button for the iPhone prototype under my Portfolio section isn't working properly in Chrome and Firefox. It jumps a bit when you click on prev/next. It isn't working at all in Safari. In Safari, when you click on prev/next, it works once or twice and it stops working. Can anyone help?

Here is my site: http://lucychen.me/index2.html

Greatly appreciated!
0
Comment
Question by:Nana00
  • 2
  • 2
7 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Try changing the css for compenent.css line 56 to

.ac-device a {
height: 440px;
width: 249px;
display: block;
position: relative;
overflow: hidden;
margin: 85px 0 0 20px;
padding-top: 85px;
}

Open in new window

0
 

Author Comment

by:Nana00
Comment Utility
I made that change locally and it still doesn't work in Safari.
0
 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
Comment Utility
Is this your own jQuery? It's like following breadcrumbs trying to debug.
I suggest you cut all the code down to this logic.
Put all the images in the iphone container with a class that only shows the first image.
Add a class to the prev and next spans instead of trying to find them.
Onclick of prev you move the image to the end of your stacked images and on click of next you move the last image to the beginning.
It's about 4 lines of code and will be easier to debug if it still isn't working.
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 total points
Comment Utility
Part of the problem is your site is responsive but you have the images set to absolute position.  As the screen changes sizes, the screen capture images will not match up with the background.  They at least need to be relative to the parent.
0
 

Author Comment

by:Nana00
Comment Utility
Thank you for the great suggestions! I figured out a work around but do appreciate your help!
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now