I have a CSS menu that sets the parent li's color when hovering over it and it's child ul (submenu). Basically, when you hover over the menu, it changes colour and remains that way until you mouseoff the menu and it's submenu. It looks nice.
I've added some jQuery code to change the colour of the menu items when until a certain page is opened. Then, those menus will fade back in and regain colour. At which point, waiting for a hover to change colour.
The problem I'm having is, when you change the colour back to it's original state (set in CSS) with jQuery, it removes the :hover class preventing the colour change when hovering over it and it's child submenu. Any ideas on how to fix this? Is there a selector with jQuery that'll allow me to set the :hover class back to normal?
/* ---- Menu Colours ---- */
$(document).ready(function()
{
var colours = ['d50091', 'c8fa00', '00b4ff', 'b158fc', 'ffa800', '00b72f'];
var counter = 0; // Loop for the colurs
var status = 0; // Status of the colours (greyed out or visible)
$('ul.menu-horiz').children('li').children('a').hover(function()
{
$(this).parent()[0].css('color', '#d50091');
}, function()
{
$(this).parent()[0].css('color', '#b6b6b6');
});
$('ul.menu-horiz').children('li').children('a').each(function()
{
$(this).css({opacity: 0.2, color: '#' + colours[counter]});
counter++;
});
$('.haccordion .header').click(function()
{
if (window.location.hash.substr(1) == 'photogallery')
{
$('ul.menu-horiz').children('li').children('a').each(function()
{
if ($(this).css('opacity') != '1.1')
{
$(this).animate({opacity: 1.1}, 1000).css('color', '#b6b6b6');
}
});
}
else
{
counter = 0;
if ($('ul.menu-horiz').children('li').children('a').css('opacity') != '0.2')
{
$('ul.menu-horiz').children('li').children('a').animate({opacity: 0.2}, 1000, function()
{
$('ul.menu-horiz').children('li').children('a').each(function()
{
$(this).css('color', '#' + colours[counter]);
counter++;
});
});
}
}
});
});
You should be able to use the :hover selector and pass in an over() and out() function that set and unset the hover color respectively. See the :hover documentation for more.
Simple Example
given the CSS:
<style>
.blue { background-color: blue; }
.red { background-color: red; }
</style>
do something like this:
$('li').hover(function() {
$(this).removeClass('red');
$(this).addClass('blue');
},
function() {
$(this).removeClass('blue');
$(this).addClass('red');
})
I was having issues applying the colour change to the when hovering over it's parent (as you can see in the code posted above).
Took me until now to realise it needed to be changed to
$('ul.menu-horiz').children('li').hover(function()
{
$(this).children('a').css('color', '#d50091');
}, function()
{
$(this).children('a').css('color', '#b6b6b6');
});
Ignore me >_>
Related
I'm working on this site where the product images are being shown with a little "color filtering" feature.
The problem is that both images are visible untill you hover over a color-box, because at that time my Javascript takes over and shows/hides the current image/color (see code in the bottom).
I'm using a plugin called Slimsy to Umbraco 7 which makes the cropUrl's responsive but it doesn't work if I put a display: none on the .categoryImage containers, it must be something within the plugins.
What I need is to NOT use display: none on each .categoryImage container, but somehow hide all the images except the first one so the plugin can determine the width/height/whatever it is it needs.
My javascript:
$(".frameColor").each(function () {
var categoryImage = $(this).parent("div").next("a").find(".categoryImage");
categoryImage.first().show();
if ($(categoryImage).length > 1) {
$(this).on('mouseover', function () {
var color = $(this).data('color').replace('#', '');
$(".frameColor").removeClass("active");
$(this).addClass("active");
$(categoryImage).hide().filter(function () {
return $(this).data('frame-color') === color;
}).show();
});
}
else {
$(this).hide();
}
});
My frame color:
#foreach (var bikeColor in images)
{
string color = bikeColor.GetPropertyValue("frameColor");
string[] colorSplit = color.Split(',');
if (colorSplit.Length == 1)
{
<div class="frameColor" data-color="##color" style="background-color:##colorSplit[0]"></div>
}
else
{
<div class="frameColor" data-color="##color" style="background-image:linear-gradient(-30deg, ##colorSplit[0] 0%, ##colorSplit[0] 50%, ##colorSplit[1] 50%, ##colorSplit[1] 60%);"></div>
}
}
To target all of .frameColor except for the first one, in your $.each() loop, you can do
$(".frameColor:not(:first)").each(function () {});
And to hide them without using display: none; you can use opacity: 0; or visibility: hidden;
I think the title is pretty confused, but i dont know how to named what i'm trying to do.
I have a paragraph:
<p data-initial="100" data-final="1000">Test</p>
NOTE THE DATA-*
And this paragraph have a simple CSS:
p {
color: black;
margin-top: 500px;
}
p.active {
color: red;
}
And this paragraph is an instance of Animation class:
+ function($) {
var Animation = function(element) {
this.element = $(element);
this.initial = this.element.data('initial');
this.final = this.element.data('final');
if (this.initial > $(this).scrollTop()) {
this.applyAnimation();
}
}
Animation.prototype.applyAnimation = function() {
alert('WORKED!!');
this.element.addClass('active');
}
Animation.prototype.disableAnimation = function() {
this.element.removeClass('active');
}
$(window).on('load', function() {
$('[data-initial]').each(function() {
var animation = $(this);
animation = new Animation(this);
});
});
}(jQuery);
With this code, i'm trying to apply the .active class in the paragraph if the page scroll more them 100, but is not working at all, not happens.
I think maybe it's because I'm trying to 'hear' the scroll inside the prototype , it is not possible? How can I make my instance hear the scroll and apply the class when the page scroll over 100 ??
If i do this:
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
console.log('test');
}
});
The test will appear in my console, so, the window.scroll code is not wrong.
I think this line might cause a problem:
if (this.initial > $(this).scrollTop()) {
"this" will be the new instance of Animation which isn't an element. Maybe that should be this.element.scrollTop()?
Have a look at the following JQuery code:
function my_hover()
{
$( "#up,#down" ).hover(
function() {
$("#up").animate({
"background-color": "#020306"
});
$("#down").animate({
"background-color": "#171716"
});
},
function() {
$("#up").css("background-color","#C8CACF" );
$("#down").css("background-color","#FAFAF8" );
}
);
}
There are two divs: #up,#down which I cannot wrap into a parent div(due to design restrictions). What I want to do is to animate the change in background color whenever #up or #down are being hovered. However, in case the mouse leaves one div by going directly to the other(the two divs are stuck together vertically) I do not want the last two lines of the above code being applied. I want them to be applied only when mouse hovers out from both divs. How may I achieve that? At users.sch.gr/ellhn you may see what is happening with the above code in the first left rectangle with the target photo (transition between up and down provokes change of color and that's not desirable).
Thank you
Try this.
HTML
<div id="up">Up</div>
<div id="down">down</div>
CSS
div{ transition:all 0.25s ease-in-out;}
#up{background:#C8CACF;}
#down{background:#FAFAF8;}
#up.up-hover{background-color:green;}
#down.down-hover{background-color:yellow;}
Script
$('#up, #down').mouseenter(function(){
//alert('hi')
$("#up").addClass('up-hover');
$("#down").addClass('down-hover');
})
.mouseleave(function(){
//alert('hi')
$("#up").removeClass('up-hover');
$("#down").removeClass('down-hover');
});
Fiddle Demo
Using the technique #nnnnn alluded to, e.g., using a timeout:
(function init() {
var $up = $('#up'),
$down = $('#down'),
hovered = false;
$up.hover(over, out);
$down.hover(over, out);
function over() {
hovered = true;
$up.css({
"background-color": "#020306"
});
$down.css({
"background-color": "#171716"
});
}
function out() {
setTimeout(function to() {
if (!hovered) {
$up.css("background-color", "#C8CACF");
$down.css("background-color", "#FAFAF8");
}
}, 1000);
hovered = false;
}
})();
http://jsfiddle.net/TudqT/3/
And with the elements inline next to each other, instead of vertically aligned:
http://jsfiddle.net/TudqT/5/
I have the following code:
$(document).ready(function() {
$('.anchor_clicker').click(function(){
if( $('.anchor_clicker').data('stored-height') == '930' ) {
$('.anchor_clicker').data('stored-height','100');
$('#desc').animate({height:'100'})
} else {
$('.anchor_clicker').data('stored-height','930');
$('#desc').animate({height:'930'})
}
})
});
Click
Right now I have text "Click" to do this but instead I want to have a default image icon when it is clicked the code above will expand the div and when clicked again it will shorten it. how can I use two different images instead of "CLick"?
Create a sprite with your arrows, Add a class to your CSS that will change the background position on jQuery click. Than just toggleClass('opened')
LIVE DEMO
$(document).ready(function() {
$('.anchor_clicker').on('click', function(e){
e.preventDefault();
var $btn = $(this);
$btn.toggleClass('opened');
var heights = $btn.hasClass('opened') ? 930 : 100 ;
$('#desc').stop().animate({height: heights });
});
});
CSS:
a.anchor_clicker{
padding-right: 16px
background:url(http://i.imgur.com/u3GpDiC.png?1?1426) no-repeat right 0;
}
a.anchor_clicker.opened{
background-position: right -16px;
}
The good part on having a sprite instead of 2 separate images is the removal of an additional request for the new image on click, and the time gap that is created by that request in showing the loaded new image.
Very simply, do this:
(FIDDLE)
CSS
.anchor_clicker
{
background-image:url(/path/to/sprite);
}
jQuery
$(document).ready(function() {
$('.anchor_clicker').click(function(){
if( $('.anchor_clicker').data('stored-height') == '930' ) {
$('.anchor_clicker').data('stored-height','100');
$('#desc').animate({height:'100'})
$(this).css('background-position','-50px 0px');
} else {
$('.anchor_clicker').data('stored-height','930');
$('#desc').animate({height:'930'});
$(this).css('background-position','0px 0px');
}
})
});
For two images rather than a sprite:
CSS
.anchor_clicker
{
background-image:url(/path/to/image1);
}
.anchor_clicker.b
{
background-image:url(/path/to/image2) !important;
}
jQuery
$(document).ready(function() {
$('.anchor_clicker').click(function(){
if( $('.anchor_clicker').data('stored-height') == '930' ) {
$('.anchor_clicker').data('stored-height','100');
$('#desc').animate({height:'100'})
$(this).addClass('b');
} else {
$('.anchor_clicker').data('stored-height','930');
$('#desc').animate({height:'930'});
$(this).removeClass('b');
}
})
});
$('.anchor_clicker').click(function(){
$(this).find('img').prop('src', function(src) {
return src === 'img1' ? 'img2' : 'img1'
})
})
You could change the src property of the image on the fly, based on the src. This is if you want to swap 2 different images.
But if you have a sprite with different images , then manipulating class is the way to go.
I am trying to use this menu for my wordpress site.
I am just wondering how can I make the float line change color for each nav item hovered/selected, cos it is red (background-color:#800; height:2px;) for all at the moment.
This is what I am trying to achieve:
Menu 1 - the hovering float line is green,
Menu 2 - the float line is yellow,
Menu 3 - red, menu4 - blue and so on.
Any help is appreciated.
Thank you.
There is a more "CSS" way to achieve this but with some javascript you can get something quite readable. With this approach, your pages will need to correctly initialize the float line (.hightlight) and the nav border (#sses1 > ul).
The ideal solution would be a class for each float lines but here's what I got with javascript only :
<!-- added individual classes for nav items -->
<div id="sse1">
<div id="sses1">
<ul>
<li><a class="nav-item-1" href="?menu=1&skin=2&p=Javascript-Menus">Javascript Menus</a></li>
<li><a class="nav-item-2" href="?menu=1&skin=2&p=Horizontal-Menus">Horizontal Menus</a></li>
<li><a class="nav-item-3" href="?menu=1&skin=2&p=Web-Menus">Web Menus</a></li>
</ul>
</div>
</div>
Before the body or window is loaded :
function customHandleMenu() {
// get nav selector
var nav = $('#sses1 > ul');
// get float line selector
var floatLine = $('.highlight'); // .hightlight must exist at this point
// get colors for the current page
var defaultBGcolor = floatLine.css('background-color');
var defaultBorderColor = floatLine.css('border-color');
var defaultNavBorderColor = nav.css('border-bottom-color');
// change background-color and border-color on mouseenter event
$('.nav-item-1').on({
mouseenter: function () {
setColors({floatColor:'#0f0', borderColor:'#0f0'});
}
});
$('.nav-item-2').on({
mouseenter: function () {
setColors({floatColor:'#ee0', borderColor:'#ee0'});
}
});
$('.nav-item-3').on({
mouseenter: function () {
setColors({floatColor:'#05f', borderColor:'#05f'});
}
});
/*
...
*/
// put back default colors on the mouseleave event
$('#sses1 > ul > li').on({
mouseleave: function() {
setColors({floatColor:defaultBGcolor, borderColor:defaultNavBorderColor});
}
});
function setColors(args) {
if (typeof args.floatColor != "undefined") {
floatLine.css('background-color', args.floatColor);
}
if (typeof args.borderColor != "undefined") {
floatLine.css('border-color', args.borderColor);
nav.css('border-bottom-color', args.borderColor);
}
}
}
To ensure that the selector is only use once .highlight exists, I suggest to modify the end of the original javascript to this:
function initMenu() {
sse1.builMenu();
customHandleMenu();
}
if (window.addEventListener) {
window.addEventListener("load", initMenu, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", initMenu);
}
else {
window["onload"] = initMenu;
}
Take a look at this jsfiddle.
P.S.: the event chain is slighly modified to fit into jsfiddle.
What you're asking for is actually non-trivial. The author of the plugin is actually animating an li element's, "li.highlight", width and left positioning based on where you hover the mouse. You can easily change the color of this thing by altering the CSS definition for this item. For example to make it yellow, just include this css definition below the menu's css file:
#sses1 li.highlight {
background-color: yellow;
top: 36px;
height: 2px;
border-bottom: solid 1px yellow;
z-index: 1;
position: absolute;
overflow: hidden;
}
I know this isn't the complete solution... but, if you're ambitious you could alter the javascript add a new class depending on which li element the .highlight element is under.