select single link on mouse hover - javascript

I'm trying to make the hyperlinks on my website have a certain css animation effect.
My code:
$("a").mouseenter(function() {
this.addClass("myeffect");
}
It works fine so far, but when I hover a link, every link on the website start showing the effect, not only the one I've mouse-hovered.
How can I have only the link which is being hovered show the effect?

You are referencing this incorrectly.
$("a").mouseenter(function() {
$(this).addClass("myeffect");
}

Simple this return you the current element/node. And there is no addClass method available to it.
You need to select that element from the node and add class to it.
$(this) will select that particular element
$("a").mouseenter(function() {
$(this).addClass("myeffect");
})
.myeffect{
color : red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
1
2
3
4
5

Related

Enable scroll onClick

I'm working with 2 divs, the first div should fill the whole screen (width & height) and once there is a button or link clicked in it, it should enable the scroll besides take to the second div.
I have been able to set something like this https://codepen.io/malditojavi/project/editor/ZgWYrZ/#0 But I'm unable to change the class of the with my own class 'allowscrolling' that would re-enable that scroll.
I used this function
allowScrolling() {
document.getElementByTagName("body").className = "allowscrolling";
}
Also tried via jquery, with:
<script>
$("button").click(function(){
$("body").css("overflow","scroll");
});
</script>
But both won't enable scroll after I click the first link. Anything I'm missing?
There is no getElementByTagName that returns a single element. There is a getElementsByTagName that returns an array. Use that and get the first element of the arrray to set the class
document.getElementsByTagName('body')[0].className = 'allowscrolling';
document.getElementsByTagName('body')[0].className += ' allowscrolling';
This will do, you can't use jQuery if you don't load it in your project.

alternative for .first() in jqlite

I have created a drop-down using angularjs directive, the directive is working fine, right now I writing all the css within the directive itself, In one of the feature when the mouse hovers the drop-down list options it should change the background color to #27A1EC - blue, and text color to white, on mouse leave then the background color to be white and text color to be the actual color, everything is working fine but one issue I am facing is that since we don't have JQuery .find() option in JQLite I have tried using like as shown below
I have used angular.element(document.querySelector('#parent')) instead of elm.find('a').first(), I don't whether this is correct or not
elm.find("a").bind("mouseover", function() {
scope.actualColor = scope.textColor.color;
//elm.find('a').first().css('color', 'white').css('background-color', '#27A1EC');
angular.element(document.querySelector('#parent')).css('color', 'white').css('background-color', '#27A1EC');
});
elm.find("a").bind("mouseleave", function() {
//elm.find('a').first().css('color', scope.actualColor).css('background-color', 'white');
angular.element(document.querySelector('#parent')).css('color', scope.actualColor).css('background-color', 'white');
});
Now when I hover the mouse to Parent2 within the drop-down list the hover color changing is redirecting and is applying to Parent1
Can anyone please tell me some solution for this,
Plunker
In your case the problem is you have multiple elements with the id parent, so when using querySelector it will return the first element with the id parent.
You can use .eq(0) instead of first()
elm.find('a').eq(0).css('color', 'white');
But a better solution will be is to assign a class parent to the parent element instead of id like
<a class='parent' href='#' ng-click='getValue(optGroupLabel,optGroupValue)'>{{optGroupLabel}}<span class='value'>{{optGroupValue}}</span></a>
then
angular.element(elm[0].querySelector('.parent')).css('color', scope.actualColor).css('background-color', 'white');

add class to next element jquery click function

I have created a vertical slider and I want the classes to move onto the next div on click (next) and previous on click (prev)
here is my code and fiddle
$(".bxslider-inner:nth-child(4n+1)").addClass('noBlur');
$(".bxslider-inner:nth-child(4n+2)").addClass('Blur1');
$(".bxslider-inner:nth-child(4n+3)").addClass('Blur2');
$(".bxslider-inner:nth-child(4n)").addClass('Blur3');
$("a.bx-next").click(function(){
$(".bxslider-inner:nth-child(4n+1)").next().addClass('noBlur');
$(".bxslider-inner:nth-child(4n+2)").next().addClass('Blur1');
$(".bxslider-inner:nth-child(4n+3)").next().addClass('Blur2');
$(".bxslider-inner:nth-child(4n)").next().addClass('Blur3');
});
$("a.bx-prev").click(function(){
$(".bxslider-inner:nth-child(4n+1)").prev().addClass('noBlur');
$(".bxslider-inner:nth-child(4n+2)").prev().addClass('Blur1');
$(".bxslider-inner:nth-child(4n+3)").prev().addClass('Blur2');
$(".bxslider-inner:nth-child(4n)").prev().addClass('Blur3');
});
Classes seem to be colliding with each other. I'd suggest cleaning current classes before adding the 'blur' classes, e.g. :
$(".bxslider-inner:nth-child(4n+1)").next().removeClass().addClass('bxslider-inner').addClass('noBlur');
etc... Problem is it only works for he first click on the button, as
$(".bxslider-inner:nth-child(4n+1)").next()
Will always be the same element. You now need to find a way to fetch the right elements on your click function.
Some elements here : In bxslider i want to add a class on current slide
They seem to be on the same level of the DOM tree, so you would use:
$(this).next().click();

JQuery changing colour of text within columns

I have three columns within my webpage. On each column there are a group of three squares, the square represent a unique colour. So when the user clicks on red in column 1 the text within column 1 goes red, if blue it will go blue. If the user clicks on green within column 2 the text within column 2 will go green.
I am new to jQuery so I am not sure if I have done this right and would like to know if this is the best way of doing it.
What I want to know is there anyway of changing this so there is only one style called picker for all in each column. Also can I change the jQuery so it's not 3 seperate functions, is there a more cleaner way of doing this?
Thanks.
Yes! CSS selectors are all reusable! you shouldn't created multiple class' with the exact same attributes and values!
all the css classes you need .col, .wrapper, .picker
and then working with jQuery instead of using a div id when you want to use the code in mulitple places, work out where the element is relative to the element that fired the event or $(this)
check out the fiddle
http://jsfiddle.net/WJ5DZ/1/
You may try this way:
$(function () {
$('.picker').css('background-color', function () { //Setup the background color for each picker square.
return $(this).data('color'); //get its color from data attribute
}).click(function () { //Chain it through for the click event
$(this).closest('.content').css({ //get the parent content element where color needs to be applied
color: $(this).data('color') //set the color as that of the clicked picker.
});
});
});
Demo
In the markup provide a class called say content to identify its own parent content.
<div class='col2 content' id="test1"> <!-- You don't need id if you are using this for selcting.
Remove all the picker1, 2 css rules and have just the picker.
Using closest will ensure that even if you plan to add a wrapper to your picker still your actuall content div will be selected.
.closest()
.css(prop,func)
yes there is.. change all you class(picker1,picker2) to picker and remove the id (test,test1..)
try this
$('.picker').each(function(){
var myColor = $(this).data('color');
$(this).css({background: myColor })
});
$('.picker').click(function(){
var myColor = $(this).data('color');
$(this).parent().css({color: myColor});
});
NOTE: you don't need click event inside each loop
fiddle here

jquery specific show buttons on hover

I have an application creating a bunch of divs through a loop.
Each div has the class "product"
so it looks like
<div class="product">
!.....stuff here ....!
<div class="show_on_hover">...buttons here... </div>
</div>
so there are about 12 of these same divs per page.
I would like to hover over a specific one and show the specific "show_on_hover" div which is initially set to display:none.
$('.product').hover(function() {
$(.show_on_hover).show();
},
function () {
$(.show_on_hover).hide();
}
);
That is what I have so far but it will show ALL of the .show_on_hovers on the page so I am wondering how to get only the specific one you have moused over to show. This effect is seen on youtube when you mouseover any of the comments, and some comment tools pop up.
Thanks!
find will find your .show_on_hover divs inside the hovered .product. Try this:
$('.product').hover(function() {
$(this).find('.show_on_hover').show();
},
function () {
$(this).find('.show_on_hover').hide();
}
);
Try
$('.show_on_hover', this).show()/.hide()
Adding the second param to the jQuery function will constrain the search to be inside that element. In this case this will be the div that is clicked on.

Categories