Solved

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

Posted on 2014-02-24
7
87 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
ID: 39882492
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
ID: 39882555
I made that change locally and it still doesn't work in Safari.
0
 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
ID: 39882682
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
ID: 39882689
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
ID: 39883495
Thank you for the great suggestions! I figured out a work around but do appreciate your help!
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

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…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

809 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