Navigation Menu Hover Effect only on a Particular Occasion - javascript

I need the exact effect of this website's navigation menu http://recruitmentmalta.com/ptowers/ but in neater code. This code was generated with a tool which converts from PSD to HTML/CSS and basically created a bunch of useless code. I know how to make that menu, except for the part where the Shop Now effect should turn off only if the contact is hovered over.
Any ideas of how I can recreate that hovering off effect when I hover over the contact button (when Shop Now gets turned off)?
This is what I have done so far to give you an idea
<ul>
<li id="homeButton"> <img src="images/home.png" onmouseout="this.src='images/home.png'" onmouseover="this.src='images/homeHover.png'" width="115" height="55" alt="home" /></li>
<li id="aboutButton"> <img src="images/about.png" onmouseout="this.src='images/about.png'" onmouseover="this.src='images/aboutHover.png'" width="115" height="55" alt="about" /></li>
<li id="newsButton"> <img src="images/news.png" onmouseout="this.src='images/news.png'" onmouseover="this.src='images/newsHover.png'" width="115" height="55" alt="news" /></li>
<li id="brandsButton"> <img src="images/brands.png" onmouseout="this.src='images/brands.png'" onmouseover="this.src='images/brandsHover.png'" width="115" height="55" alt="brands" /></li>
<li id="storesButton"> <img src="images/stores.png" onmouseout="this.src='images/stores.png'" onmouseover="this.src='images/storesHover.png'" width="115" height="55" alt="stores" /></li>
<li id="careersButton"> <img src="images/careers.png" onmouseout="this.src='images/careers.png'" onmouseover="this.src='images/careersHover.png'" width="115" height="55" alt="careers" /></li>
<li id="contactButtonMenu"> <img src="images/contactButton.png" onmouseout="this.src='images/contactButton.png'" onmouseover="this.src='images/contactButtonHover.png'" width="115" height="55" alt="contact" /></li>
<li id="shopNowButton"> <img src="images/shopNowHover.png" width="114" height="53" alt="Shop Now" /> </li>
</ul>
This is my JS Fiddle Link: http://jsfiddle.net/GHHJM/

That's not so difficult.
Build the menu in a <ul> element as is so common today. Build a style called hover with a border on it to mimic the highlight. Set the last element's default class (style when the page is rendered) to have the border. All else are just normal for starters. Remember, when dealing with styles you can "stack" classes such as:
<element class="firstclass hover otherclass">
Now, build a hover action:
$("li").hover(function () {
$(elementtoputborderon).addClass("hover");
},
function () {
$(this).removeClass("hover");
})
And, for the part where it turns off:
$("#idofcontactbtn").hover(function () {
$('#idoflastelement').removeClass("hover");
},
function () {
$('#idoflastelement').addClass("hover");
})
To get the "fade" effect on the last element, you could try something like this:
$('#lastitem').hover(function() {
$(this).toggleClass('pretty-hover', 500);
});

I've finally solved this in a rather efficient easy way, this is the code part for just the effect of two buttons. I hope this will be of help if any body needs it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Hover</title>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".contactButton").hover(function() {
$(contactButtonMenu).attr("src","images/contactButtonHover.png");
}, function() {
$(contactButtonMenu).attr("src","images/contactButton.png");
});
});
$(document).ready(function(){
$(".contactButton").hover(function() {
$(shopNowButton).attr("src","images/shopNow.png");
}, function() {
$(shopNowButton).attr("src","images/shopNowHover.png");
});
});
</script>
</head>
<body>
<img id="contactButtonMenu" src="images/contactButton.png" alt"Contact Button" class="contactButton" />
<img id="shopNowButton" src="images/shopNowHover.png" alt="Shop Now" class="shopNowButton" />
</body>
</html>
However this is not working in Firefox, any ideas?

Related

Display image legend on hover (not as tooltip) using innerHTML?

I have a webpage with many images, each of which has a title attribute. When I hover over the image, I want the title text to display in a separate legend element I have created (not as a tiny hover tooltip). I have a mouseover function which works fine - i.e. when I hover over the image the legend changes value. But I want that value to be the title text of the individual image - which I don't know how to access. I have tried …innerHTML = this.title which is obviously incorrect.
[The number of images is large and changing (like an album), so I can't add separate code for each <img> tag. I can use alt or any other <img> attribute to make this work. I'm not wedded to the innerHTML method, either, but am hoping for some simple code to do the trick!]
Please help? Thanks! (FYI, I'm a novice coder.)
<!DOCTYPE html>
<html>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver()" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver()" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver()" title="Dinner">
</div>
<script>
function mouseOver() {
document.getElementById("legend").innerHTML = this.title;
}
</script>
</body>
</html>
It looks like you are trying to use this.title to represent the different images? If you want their titles to appear in the <h1> tag you need to pass the information to the function shown below.
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver(this)" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver(this)" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver(this)" title="Dinner">
</div>
<script>
function mouseOver(x) {
document.getElementById("legend").innerHTML = x.title;
}
</script>
I guess its helpful .
But i use Jquery
just need call this code in your <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" class="class_of_div" title="Breakfast">
<img src="image2.jpg" class="class_of_div" title="Lunch">
<img src="image3.jpg" class="class_of_div" title="Dinner">
</div>
<script>
$(document).on('mouseover', '.class_of_div', function () {
var thiss=$(this);
$('#legend').text(thiss.attr('title'));
});
</script>
</body>
</html>

Randomizing start point of Javascript Scrollbox plugin?

I have a set width/height div with an unordered list with 10 li tags, an img tag per li.
I have the images scrolling through vertically using Javascript Scrollbox.
When you land on the page I need to randomize which logo appears in the box first instead of the first li always showing first (and scrolling can continue as normal in order)
Is this possible? If so, can you point me in the right direction?
Here is my code:
HTML inside head:
<script type="text/javascript" src="js/jquery.scrollbox.min.js"></script>
HTML inside body:
<div id="buslogos">
<p>Some of our participating businesses:</p>
<div id="buslogoscroll" class="scroll-img">
<ul>
<li><img src="images/part-bus-logos/abshair-sm.gif" alt="Absolute Hair Inc"></li>
<li><img src="images/part-bus-logos/arena-sm.gif" alt="Arena Tavern"></li>
<li><img src="images/part-bus-logos/davebusters-sm.jpg" alt="Dave & Buster's"></li>
<li><img src="images/part-bus-logos/dunkin-sm.gif" alt="Dunkin' Donuts"></li>
<li><img src="images/part-bus-logos/lazercity-sm.jpg" alt="Lazer City"></li>
<li><img src="images/part-bus-logos/marcos-sm.gif" alt="Marco's Pizza"></li>
<li><img src="images/part-bus-logos/mtimes-sm.gif" alt="Medieval Times"></li>
<li><img src="images/part-bus-logos/stars-sm.gif" alt="Stars and Strikes"></li>
<li><img src="images/part-bus-logos/tomchee-sm.gif" alt="Tom + Chee"></li>
<li><img src="images/part-bus-logos/totalhealth-sm.jpg" alt="Total Health Spa"></li>
</ul>
</div>
</div>
<script>
$(function () {
$('#buslogoscroll').scrollbox({
linear: true,
step: 1,
delay: 0,
speed: 40
});
});
</script>
The jquery.scrollbox.min.js was downloaded from here:
https://github.com/wmh/jquery-scrollbox
Thanks in advance!
Check this out, Let me know if you didn't understand anything.
Live demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="https://rawgit.com/wmh/jquery-scrollbox/master/jquery.scrollbox.min.js"></script>
<script>
$(function () {
var arrSrc=["http://placehold.it/350x50",
"http://placehold.it/350x60",
"http://placehold.it/350x70",
"http://placehold.it/350x80",
"http://placehold.it/350x90"
];
$('.first img').attr('src',arrSrc[Math.floor((Math.random() * 5) + 0)]);
$('#buslogoscroll').scrollbox({
linear: true,
step: 1,
delay: 0,
speed: 40
});
});
</script>
</head>
<body>
<div id="buslogos">
<p>Some of our participating businesses:</p>
<div id="buslogoscroll" class="scroll-img">
<ul>
<li class="first"><img src=""></li>
<li><img src="http://placehold.it/350x60"></li>
<li><img src="http://placehold.it/350x70"></li>
<li><img src="http://placehold.it/350x80"></li>
<li><img src="http://placehold.it/350x90"></li>
</ul>
</div>
</div>
</body>
</html>

I am trying to animate the navigation bar on a website

I have this code which is meant to use jQuery so that when the 'Show navigation' button is clicked, that button will disappear, a 'Hide Navigation' button will appear, as will the Navigation options. The hope would be then that the 'Hide' button would do the opposite. I can get the show hide buttons to disappear and reappear accordingly, but the navigation options just stay in place.
Here is the code:
var nav = function(){
$('.navtoggle').click(function(){
$('#navbar').animate({
top:'10px'
}, 200);
$('.navtoggle').animate({
top:'-40px'
}, 200);
$('.navexit').animate({
top:'0px'
}, 200);
});
$('.navexit').click(function(){
$('#navbar').animate({
top:'-40px'
}, 200);
$('.navtoggle').animate({
top:'0px'
}, 200);
$('.navexit').animate({
top:'-40px'
}, 200);
});
};
$(document).ready(nav);
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script src="navanimate.js"></script>
<div id="top_container">
<div id ="navbar">
<a class="navigation" href="index.html"><p>Home</p></a>
<a class="navigation" href="CV.html"><p>CV</p></a>
<a class="navigation" href="Video.html"><p>Video</p></a>
<a class="navigation" href="Hobbies.html"><p>My Hobbies</p></a>
<a class="navigation" href="Coursework.html"><p>Coursework</p></a>
<a class="navigation" href="Animation.html"><p>Animation</p></a>
</div>
<div class ="navtoggle">Show Navigation</div>
<div class ="navexit">Hide Navigation</div>
<h1>Home Page</h1>
</div>
<div id="main_content">
<p id="site_intro">Over the 6 pages of this website, I shall detail and exemplify everything I have learnt in the labs for the Introduction to Multimedia module. Browse and discover the many things I too have learnt over the last semester. <br><br>Throughout this site you will find many things, including my experience in the past, a short video of me, my favourite things to do, my work this term and the animation developed for the site. Enjoy!</p>
<ul><h3>About Me</h3>
<li>Candidate Number: 106244</li>
<li>Course: Games and Multimedia Environments</li>
<li>Year of Study: First year</li>
</ul>
<img src="images/IMG_0334.JPG" width="932" height="1142" alt="Good ol' picture of myself"/>
</div>
<div id="social_links">
<ul>Find Me Here
<li><img src="images/icons/Free-Shaded-Social-Icons/48/facebook-Icon.png" width="30" height="30" alt="My Facebook"/>Facebook</li>
<li><img src="images/icons/Free-Shaded-Social-Icons/48/Tumblr-Icon.png" width="30" height="30" alt="My tumblr Blog"/>Tumblr</li>
<li><img src="images/icons/Free-Shaded-Social-Icons/48/Deviantart-Icon.png" width="30" height="30" alt=""/>DeviantArt</li>
</ul>
</div>
<div id="footer"></div>
</body>
</html>

Implementing jQuery hoverZoom in AngularJS ng-Repeat

I am trying to implement jQuery hoverZoom in my project. It works fine in a normal html jquery app but when i try to run it in angular app using ng-repeat it breaks.
My guess is due to DOM & jQuery. I think I have to create a directive or something.
The working code is:
HTML
<link rel="stylesheet" href="assets/css/zoom_style.css?v=2">
<link rel="stylesheet" href="assets/css/jquery.hoverZoom.css">
<ul class="thumb">
<li><img alt="Images can have captions" src="../api/uploads/bjaim/1_thumb.jpg" /></li>
<li class="noborder"><img alt="zoomContainer can be styled with CSS" src="../api/uploads/bjaim/2_thumb.jpg" /></li>
<li class="redshadow"><img src="../api/uploads/bjaim/3_thumb.jpg" alt="Images are scaled and centered to the viewport" /></li>
<li><img src="../api/uploads/bjaim/bigimage_thumb.jpg" alt="Images are preloaded and then the animation starts"/></li>
<li><img src="../api/uploads/bjaim/5_thumb.jpg" /></li>
<li><img src="../api/uploads/bjaim/6_thumb.jpg" /></li>
<li><img src="../api/uploads/bjaim/7_thumb.jpg" /></li>
</ul>
Javascript
<script src="assets/js/modernizr-1.6.min.js"></script>
<script src="assets/js/jquery.hoverZoom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.thumb img').hoverZoom({speedView:600, speedRemove:400, showCaption:true, speedCaption:600, debug:true, hoverIntent: true, loadingIndicatorPos: 'center'});
});
</script>
But when I chnage the HTML to:
<ul class="thumb">
<li ng-repeat="image in images">
<a ng-href="../api/uploads/{{job}}/{{image}}"><img alt="Images can have captions" ng-src="../api/uploads/{{job}}/{{image}}" /></a>
</li>
</ul>
It displays the images but hover effect is gone.
Please guide.
Not: Tried to replicate the code on jsFiddle
Yes you need to create a directive,
.directive('hoverZoom', function() {
return {
link: function(scope, element){
$(element).hoverZoom({speedView:600, speedRemove:400, showCaption:true, speedCaption:600, debug:true, hoverIntent: true, loadingIndicatorPos: 'center'});
}
};
});
And in HTML,
<a hover-zoom ng-href="../api/uploads/{{job}}/{{image}}"><img alt="Images can have captions" ng-src="../api/uploads/{{job}}/{{image}}" /></a>
Depending on your requirement you can try to improve this directive to pass the options for hoverZoom as well. https://docs.angularjs.org/guide/directive

how to change the background images with fade

I have the code below,and I want to images to be change with a fade,the images now are been replaced by the function 'changeBg',but they are just been replaced without fade.
how can I "merge" between the function that's changing the images and the function that in charge of the fade.
thanks.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>none</title>
<link rel="stylesheet" type="text/css" href="Css/design.css" >
<script src="query-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(document).ready(function() ({$('').fadeIn(1000);
});
</script>
<script language="JavaScript">
function changeBg (color) {
document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-repeat";}
</script>
</head>
<body>
<div id="wrapper" class="wrapper">
<div class="logo"><img border="0" src="Images/logo.png" >
</div>
<div class="menu">
<img border="0" src="Images/arrowleft.png" >
<img border="0" src="Images/black.png" onclick="changeBg(this.name);" name="black">
<img border="0" src="Images/blue.png" onclick="changeBg(this.name);" name="blue">
<img border="0" src="Images/fuksia.png" onclick="changeBg(this.name);" name="fuksia">
<img border="0" src="Images/brown.png" onclick="changeBg(this.name);" name="brown">
<img border="0" src="Images/orange.png" onclick="changeBg(this.name);" name="orange">
<img border="0" src="Images/red.png" onclick="changeBg(this.name);" name="red">
<img border="0" src="Images/grey.png" onclick="changeBg(this.name);" name="grey">
<img border="0" src="Images/white.png" onclick="changeBg(this.name);" name="white">
<img border="0" src="Images/arrowright.png" >
</div>
</body>
</html>
Thanks!
If I understand you correctly, you might be able to fade the background out, change it, then fade it back in again? Like this:
function changeBg (color) {
$('#wrapper').fadeOut(1000,function(){
$(this).css('background','url(Images/'+color+'.jpg) no-repeat').fadeIn(1000);
});
}
The cross-fading (fade out while fading in) is achieved in jQuery by having the statements straigh in line and not inside functions from previos animation.
Also, I understand that you want JUST THE BACKGROUND IMAGE to fadeout and fadein; not the actual contents of the page.
To achieve that, make your background image a separate item altogether but inside of the main div you have backgrounded:
<div id='wrapper' style='position:relative' > <!-- must be relative -->
<img id='bg1' src='initial.image' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
<img id='bg2' src='initial.imageTWO' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
</div>
function changeBackground(which) {
$('#bg'+which).attr('src','current-image.xxx').fadeOut('slow');
which = (which = 1) ? 2 : 1;
$('#bg'+which).attr('src','next-image.xxx').fadeIn('slow');
setTimeout('changeBackground('+which+')',2000);
}
$(document).ready( function () {
$('#bg1').attr('src','image-name.xxx').fadeIn('slow');
setTimeout('changeBackground(1)',2000); //every 2 seconds?
. ......
});
In case you have various images for the "slide show", you might want to add a random
number generation for which picture to show next.

Categories

Resources