Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2014-02-24
7
Medium Priority
?
93 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 1000 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 1000 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

Basic Security of Your VPC

So, you’ve got this shiny new VPC and a fancy new application configured on your EC2 servers ready to go. This application is only accessible from your computer, which is great for security, but you need your users to be able to access it! So, what’s the easiest way to do this?

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

721 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