Hover over vertical effect

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!
LVL 5
IsaacSharePoint Client Side DeveloperAsked:
Who is Participating?
 
Ishaan RawatConnect With a Mentor Designer | Developer | ProgrammerCommented:
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
 
Scott Fell, EE MVEDeveloperCommented:
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
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
IsaacSharePoint Client Side DeveloperAuthor Commented:
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
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
I take that back, it's not working a 100%.  Please help!
0
 
Scott Fell, EE MVEDeveloperCommented:
The problem is from this missing image http://www.iwebarea.net/images/bgimg.jpg
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
what does bgimg.jpg supposed to look like?
0
 
Scott Fell, EE MVEDeveloperCommented:
>what does bgimg.jpg supposed to look like?
Dude, it's your file.  You tell me.
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
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
 
Scott Fell, EE MVEDeveloperCommented:
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
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Is there anyway to get it to work in IE?  That's what we mostly use.
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
That's what we mostly use.

I don't think so...

But leave that its working in ie9..
0
 
Scott Fell, EE MVEDeveloperCommented:
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
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
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
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
IshaanRawat,  we use IE8 and it's not working in that.  IE 9 is not really compatible with sharepoint 2007.
0
 
Scott Fell, EE MVEDeveloperCommented:
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
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
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
 
Scott Fell, EE MVEDeveloperCommented:
I wonder if this will help http://selectivizr.com/
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
selectivizr.com did not work.  Thanks though.   IE truly sucks!
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
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
All Courses

From novice to tech pro — start learning today.