Solved

Hover over vertical effect

Posted on 2013-06-04
21
598 Views
Last Modified: 2013-06-09
Hi All,

I am trying to create a hover over that renders a flyout menu.  So, if a user hovers over an image, there would be a fly-out of links or a list of links to select from.  I also want this to work with SharePoint 2007.  So the idea I have is to have everything come from a list.

I found the following demo:
http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-hover/index.htm

Here's the code to it.
http://spoonfedproject.com/jquery/jquery-image-slide-on-hover-effect/

In the vertical hover effect, once the user hovers over the image, there would be links to a few sites.

Have any of you created something like this before?

Any help would be much appreciated.

Thanks!
0
Comment
Question by:Isaac
[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
  • 12
  • 7
  • 2
21 Comments
 
LVL 10

Accepted Solution

by:
Ishaan Rawat earned 500 total points
ID: 39219445
Check this demo..

http://tympanus.net/Tutorials/OriginalHoverEffects/

It has many images and other cool styles.. If you like any one...

See the code here...

http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

I am telling this because.. it has text as hover in which you can add links... and it also has many cool CSS3 hover effect...
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39219730
Start by taking your sample and placing your own info in it's place.  If you run into problems post a link to your page.
0
 
LVL 5

Author Comment

by:Isaac
ID: 39220627
Okay...Here's what I got so far but I believe I'm missing something because there's no hovering....

Ideally, there will be 7 images and when you roll over, the links should appear either inside the border or outside.  I'll take either.  Also, I hope to be using spservices to provide the links to the div.  

http://www.iwebarea.net/hoverTest.htm




Any help would be great.

Thanks!
0
DevOps Toolchain Recommendations

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

 
LVL 5

Author Comment

by:Isaac
ID: 39220638
Actually, it looks to be working....That's weird.  it wasn't working when I was working on it.

Anyway, would the height of the div increase as the number of links increased
0
 
LVL 5

Author Comment

by:Isaac
ID: 39220640
I take that back, it's not working a 100%.  Please help!
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39220682
The problem is from this missing image http://www.iwebarea.net/images/bgimg.jpg
0
 
LVL 5

Author Comment

by:Isaac
ID: 39220925
what does bgimg.jpg supposed to look like?
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39220935
>what does bgimg.jpg supposed to look like?
Dude, it's your file.  You tell me.
0
 
LVL 5

Author Comment

by:Isaac
ID: 39220939
Actually, that's part of the code i copied from the website.  Also, if you open it up in firefox, it works like it's supposed to.  I tried earlier to figure out what bgimg.jpg was but no luck.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39220958
In any case it works in safari/chrome and firefox. Although the first image moves a little in firefox.

I'm kind of confused as to what your question is.  This second sample looks nothing like the original sample.  

On your original sample, if yo just view the source, copy and past to your own site then replace the images with your own and you should be done.
0
 
LVL 5

Author Comment

by:Isaac
ID: 39221005
Is there anyway to get it to work in IE?  That's what we mostly use.
0
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39221021
That's what we mostly use.

I don't think so...

But leave that its working in ie9..
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39221022
In either firefox or chrome use the console to look at your errors.  More then likely the issue is with a javascript error.    Also make sure js is turned on in the browser.  I am on a mac so not much help with ie.  

Does this work in ie?  http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-hover/index.htm

This probably does not http://www.iwebarea.net/hoverTest.htm
Try changing this
.view {
    width: 300px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}

to this

.view {
    width: 300px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff;
}
0
 
LVL 5

Author Comment

by:Isaac
ID: 39221083
padas,  Yes, that link does work in IE.  Your modified code moved the links to the left.  
It seems that CSS3 is not compatible with ie8 so are there any other methods to implement what I'm trying to do?

Thanks!
0
 
LVL 5

Author Comment

by:Isaac
ID: 39221085
IshaanRawat,  we use IE8 and it's not working in that.  IE 9 is not really compatible with sharepoint 2007.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39221101
There is no css3 in what I gave you.  The only major difference in the botton css vs the top is the bottom has the closing semi colon and not background image.  

You could try this

.view {
    width: 300px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
0
 
LVL 5

Author Comment

by:Isaac
ID: 39221120
What I mean by the css3 comment is that the hover effects was created using CSS3 which does not work in ie8.  I don't think ie8 recognizes transition, transform, etc.  Your code centers everything but not hover effect.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39221165
I wonder if this will help http://selectivizr.com/
0
 
LVL 5

Author Comment

by:Isaac
ID: 39222886
selectivizr.com did not work.  Thanks though.   IE truly sucks!
0
 
LVL 5

Author Comment

by:Isaac
ID: 39223025
0
 
LVL 5

Author Comment

by:Isaac
ID: 39223127
So I found this http://api.jquery.com/hover/

Here's what I tried with fiddle.  Right now, when I hover over either image, it shows the same link.  How can modify it to append the right links to the right image or in this case <li>?

http://jsfiddle.net/9BY6L/2/
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Sharepoint 2013 edit permissions powershell 8 59
Multiple of Image Swaps 5 42
Date Picker is picky (about something) 4 42
modify font on ninja form 1 27
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

752 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