Solved

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

Posted on 2014-02-24
7
90 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
7 Comments
 
LVL 53

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 53

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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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…

710 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