Solved

Hover over vertical effect

Posted on 2013-06-04
21
554 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
  • 12
  • 7
  • 2
21 Comments
 
LVL 9

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 52

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
 
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 52

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 52

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 52

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
Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

 
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 9

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 52

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 52

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 52

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

Backup Your Microsoft Windows Server®

Backup all your Microsoft Windows Server – on-premises, in remote locations, in private and hybrid clouds. Your entire Windows Server will be backed up in one easy step with patented, block-level disk imaging. We achieve RTOs (recovery time objectives) as low as 15 seconds.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery not working on ELSE... why? 2 24
To remove highlight from a "a href" 5 23
Sharepoint 2010 Auditing 4 20
Mirror a Sharepoint 2007 datasheet list? 8 24
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

867 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now