Solved

Hover over vertical effect

Posted on 2013-06-04
21
579 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 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 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
Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

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

Migrating Your Company's PCs

To keep pace with competitors, businesses must keep employees productive, and that means providing them with the latest technology. This document provides the tips and tricks you need to help you migrate an outdated PC fleet to new desktops, laptops, and tablets.

Question has a verified solution.

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

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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!
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

856 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