The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Scrolling Image Menu

View previous topic View next topic Go down

Solved Scrolling Image Menu

Post by Wonderstruck on June 13th 2013, 5:23 am

I hope this is the right place to put this, I don't normally post for coding help...I'm not sure what to call this but it's like a menu with pictures. I found this code but it doesn't scroll on it's own. I would love one to scroll on it's own so you don't have to mouse over each slide.


Code:
<script type="text/javascript" src="http://www.alohatechsupport.net/js/jquery.js"></script>
<script type="text/javascript" src="http://www.alohatechsupport.net/js/jquery-easing-1.3.pack.js"></script>
<script
 type="text/javascript"
src="http://www.alohatechsupport.net/js/jquery-easing-compatibility.1.2.pack.js"></script>

<script type="text/javascript">
jQuery(document).ready(function () {
  // find the elements to be eased and hook the hover event
  jQuery('div.jimgMenu ul li a').hover(function() { 
    // if the element is currently being animated
    if (jQuery(this).is(':animated')) {
 
 Â    jQuery(this).addClass("active").stop().animate({width: "310px"},
{duration: 450, easing: "easeOutQuad", complete: "callback"});
    } else {
      // ease in quickly
 
 Â    jQuery(this).addClass("active").stop().animate({width: "310px"},
{duration: 400, easing: "easeOutQuad", complete: "callback"});
    }
  }, function () {
    // on hovering out, ease the element out
    if (jQuery(this).is(':animated')) {
 
 Â    jQuery(this).removeClass("active").stop().animate({width: "78px"},
{duration: 400, easing: "easeInOutQuad", complete: "callback"})
    } else {
      // ease out slowly
 
 Â   
jQuery(this).removeClass("active").stop(':animated').animate({width:
"78px"}, {duration: 450, easing: "easeInOutQuad", complete:
"callback"});
    }
  });
});
</script>

<style>

.jimgMenu {
  position: relative;
  width: 670px;
  height: 200px;
  overflow: hidden;
  margin: 25px 0px 0px;
}

.jimgMenu ul {
  list-style: none;
  margin: 0px;
  display: block;
  height: 200px;
  width: 1340px;
 
  }

.jimgMenu ul li {
  float: left;
}

.jimgMenu ul li a {
  text-indent: -1000px;
  background:#FFFFFF none repeat scroll 0%;
  border-right: 2px solid #fff;
  cursor:pointer;
  display:block;
  overflow:hidden;
  width:78px;
  height: 200px;
}

.jimgMenu ul li.slide-one a {
  background: url(http://www.alohatechsupport.net/CSSFiles/images/landscapes.jpg) repeat scroll 0%;
}

.jimgMenu ul li.slide-two a {
  background: url(http://www.alohatechsupport.net/CSSFiles/images/people.jpg) repeat scroll 0%;
}

.jimgMenu ul li.slide-three a {
  background: url(http://www.alohatechsupport.net/CSSFiles/images/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li.slide-four a {
  background: url(http://www.alohatechsupport.net/CSSFiles/images/abstract.jpg) repeat scroll 0%;
}

.jimgMenu ul li.slide-five a {
  background: url(http://www.alohatechsupport.net/CSSFiles/images/urban.jpg) repeat scroll 0%;
  min-width:310px;
 
}

.clear {
  clear: both;
}
</style>

<div class="jimgMenu">
  <ul>
    <li class="slide-one"><a href="#">Hello!</a></li>
    <li class="slide-two"><a href="#">Forumotion</a></li>
    <li class="slide-three"><a href="#">Coding</a></li>
    <li class="slide-four"><a href="#">Support</a></li>
    <li class="slide-five"><a href="#">Mark</a></li>
  </ul>
</div>

The code was found in this thread:

http://help.forumotion.com/t124163-jquery-image-menu-cool-slide?highlight=menu

This is what I want but, I want it to scroll is there any possible way this can happen? I have see it on 2 other sites.

Here is my forum link if needed:
http://www.moonscompanion.net/forum# (it's a new site)

Wonderstruck
Forumember

Female Posts : 73
Reputation : 4
Language : English

http://www.moonscompanion.net/forum

Back to top Go down

Solved Re: Scrolling Image Menu

Post by kirk on June 13th 2013, 5:41 pm

Is this now solved?
you have the solved icon showing?

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Solved Re: Scrolling Image Menu

Post by Wonderstruck on June 14th 2013, 4:40 am

Yeah, I was just about to edit my first post to say I found what I needed but I had to go to work.

Sorry!

Wonderstruck
Forumember

Female Posts : 73
Reputation : 4
Language : English

http://www.moonscompanion.net/forum

Back to top Go down

Solved Re: Scrolling Image Menu

Post by SLGray on June 14th 2013, 4:41 am

Garbaged as no solution was given.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36657
Reputation : 2443
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum