Solved

drop downs and animation don't play nice

Posted on 2013-05-16
19
302 Views
Last Modified: 2013-05-22
How do I fix this so that the drop down buttons work and that the ribbon appears above the  animation?

Animation
http://nsitedesigns.com/nsitedesigns/am/2.html

"normal" page
http://nsitedesigns.com/nsitedesigns/am/index.html

The animation was created using Wow Slider.
am.css
style.css
jquery.js
wowslider.js
script.js
0
Comment
Question by:nsitedesigns
[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
  • 11
  • 5
  • 3
19 Comments
 

Author Comment

by:nsitedesigns
ID: 39172697
I made modifications to css as follows:
	#mainpic_container {
		width:950px;
		[b]z-index:99999;[/b]}

#toplayer {
	[b]z-index:1[/b];}

	.ribbon {
	float: left;
	height: 293px;
	margin-left: 25px;
	margin-top:-115px;
	position: absolute;
	width: 195px;
	[b]z-index:2;[/b]
	}

Open in new window

0
 
LVL 23

Accepted Solution

by:
Ioannis Paraskevopoulos earned 300 total points
ID: 39174018
Hi,

Please see the attached png. It seems that you haven't properly closed the
<div class="container">

Open in new window

. See on the bottom the right befor the
<!-- HEADER END -->

Open in new window

Difference
Giannis
0
 
LVL 23

Expert Comment

by:Ioannis Paraskevopoulos
ID: 39174021
There could be other significant differences, but this is a start. Fix this and we may have a farther look.

Giannis
0
Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

 
LVL 23

Assisted Solution

by:Ioannis Paraskevopoulos
Ioannis Paraskevopoulos earned 300 total points
ID: 39174196
I have also changed the z-index in :
http://nsitedesigns.com/nsitedesigns/am/engine1/style.css
 on :
#wowslider-container1 { 
	zoom: 1; 
	position: relative; 
	max-width:950px;
	margin:0 auto;
	z-index:-100;
	border:none;
	text-align:left; /* reset align=center */
}

Open in new window


Check the following fiddle:
http://jsfiddle.net/eaSNf/1/

Giannis
0
 

Author Comment

by:nsitedesigns
ID: 39174725
I don't see the change to the following on your fiddle.  I never used fiddle.  What was displayed is what was in place.

#wowslider-container1 {
      zoom: 1;
      position: relative;
      max-width:950px;
      margin:0 auto;
      z-index:-100;
      border:none;
      text-align:left; /* reset align=center */
}
0
 

Author Comment

by:nsitedesigns
ID: 39174733
Giannis,

I see that I had TWO div containers.  I got rid of the extra one so I didn't need to add the second closing div.  Didn't make any impact on the 2 questions but it was good that it was removed.  THanks.
0
 
LVL 23

Assisted Solution

by:Ioannis Paraskevopoulos
Ioannis Paraskevopoulos earned 300 total points
ID: 39174760
Sorry, it seems i got you the wrong fiddle:
http://jsfiddle.net/eaSNf/2/

I made the z-index to -100

Giannis
0
 

Author Comment

by:nsitedesigns
ID: 39175336
Well, the new fiddle brought the drop downs and ribbon to the front but the animation doesn't appear.  Actually, the animation seems to be happening behind the ribbon.  Any idea how to fix that?

http://nsitedesigns.com/nsitedesigns/am/2.html
0
 
LVL 23

Expert Comment

by:Ioannis Paraskevopoulos
ID: 39175407
Hey, i made it -100, but it doesn't need to be -100. Try -1

Giannis
0
 

Author Comment

by:nsitedesigns
ID: 39175583
Didn't make a hill of beans difference.  : (
0
 
LVL 15

Assisted Solution

by:Jagadishwor Dulal
Jagadishwor Dulal earned 200 total points
ID: 39176546
Ok Your solution is here, You are using, I have checked it in your page so now change your am.css, I think ribbon position will be a little bit change I hope you can manage the margin and can manage the position.

1.
am.css Line 184

#nav_container {
    display: inline-block;
    padding: 0;
    width: 950px;
    z-index: 200;
}

Open in new window

2.
am.css line 97

.ribbon {
    float: left;
    height: 293px;
    margin-left: 25px;
    margin-top: -115px;
    position: absolute;
    width: 195px;
    z-index: 300;
}

Open in new window

0
 

Author Comment

by:nsitedesigns
ID: 39181129
Close.  When I change to your recommendations the drop down buttons work but the ribbon is too far down the page.  The top of the ribbon should meet the top of the white background.  See example #2 below. When I change the margin-top from -115px to - margin-top: -140px; it sits in the right position but the drop downs now don't work.  See #1 screen shot below

#1  .ribbon margin-top  setting at -115px
http://screencast.com/t/mjIuqqF5Z3i

#2 ribbon margin-top  setting at -140px
http://screencast.com/t/eiEB6Cryb

How do I get the ribbon to sit in the right place but still have the drop down buttons work?
0
 

Author Comment

by:nsitedesigns
ID: 39182245
Hoping to go live soon.  Can anyone else provide solution to raise ribbon on left.  

http://nsitedesigns.com/nsitedesigns/am/index.html
http://nsitedesigns.com/nsitedesigns/am/am.css
0
 
LVL 15

Assisted Solution

by:Jagadishwor Dulal
Jagadishwor Dulal earned 200 total points
ID: 39184377
Change style of am.css line no 97 to:

.ribbon {
    float: left;
    height: 293px;
    margin-left: 25px;
    margin-top: -44px; /* Or set Height if not sufficient position*/
    position: absolute;
    width: 195px;
    z-index: 300;
}

Open in new window

0
 

Author Comment

by:nsitedesigns
ID: 39185513
That is so weird.  I tried lowering the value like you did and when I did that, the drop downs failed to work.  Thanks for your help!
0
 

Author Comment

by:nsitedesigns
ID: 39185531
Crap I was so focused on moving the ribbon and having drop downs work that I missed the whole point and that the drop downs don't work on the home page with the animation.

http://nsitedesigns.com/nsitedesigns/am/index.html
0
 

Author Comment

by:nsitedesigns
ID: 39185856
I am reopening this question.  Still having problems.
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39186306
Not a good points for me????

Change your css :
#wowslider-container1 {
    border: medium none;
    margin: 0 auto;
    max-width: 950px;
    position: relative;
    text-align: left;
}

#nav {
    background-color: #40956C;
    float: right;
    position: relative;
    width: 100%;
    z-index: 100;
}

Open in new window


In your script the wowslider-container1 is overflow:visible make it hidden
0
 

Author Comment

by:nsitedesigns
ID: 39188298
I reopened this question.  It isn't working now.  If you want extra points, please take a look again.  Subject is "Animation and Drop Downs Fighting Each Other"
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Suggested Solutions

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

751 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