Solved

Hover over vertical effect

Posted on 2013-06-04
21
534 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
I take that back, it's not working a 100%.  Please help!
0
 
LVL 52

Expert Comment

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

Author Comment

by:Isaac
Comment Utility
what does bgimg.jpg supposed to look like?
0
 
LVL 52

Expert Comment

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

Author Comment

by:Isaac
Comment Utility
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
Comment Utility
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 5

Author Comment

by:Isaac
Comment Utility
Is there anyway to get it to work in IE?  That's what we mostly use.
0
 
LVL 9

Expert Comment

by:Ishaan Rawat
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
I wonder if this will help http://selectivizr.com/
0
 
LVL 5

Author Comment

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

Author Comment

by:Isaac
Comment Utility
0
 
LVL 5

Author Comment

by:Isaac
Comment Utility
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

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…
These days socially coordinated efforts have turned into a critical requirement for enterprises.
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

743 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

8 Experts available now in Live!

Get 1:1 Help Now