I'm trying to create a simple webpage where you can hover over sets of words. When you hover, I would like all other words you are not hovering over to become struck out.
The HTML is:
<div class="row col-xs-12" id="jobs">
<h2><span class="selector">Writer and Editor</span>, <span class="selector">Social Media Slayer</span>, <span class="selector">Amateur Developer</span>.</h2>
</div>
Right now I have a simple jQuery function that, when I hover over each element, changes the spans font color like so:
$('.selector').hover(function(){
$(this).css('color', '#fddbd1');
}, function() {
$(this).css('color', 'white');
});
What I would like to do is also have a script that, on hover, strikes out the text in every span that is not being hovered over. I would also like it so that when you click on each span, the strike outs in the other spans remain until you click elsewhere.
I know how to do this with lots of repetitive code, but I was hoping to make it nice and DRY.
To strikethrough all spans class selector that are not hovered over, and retain strikethrough on clicking on element, removing when clicking on another element.
$('.selector').hover(function(){
// Cleanup / Reset to default position
$('.selector').removeClass('clicked');
$('.selector').css('text-decoration', 'none');
$('.selector').not(this).each(function() {
$(this).css('text-decoration', 'line-through');
});
}, function() {
if(!$(this).hasClass('clicked'))
{
$('.selector').not(this).each(function() {
$(this).css('text-decoration', 'none');
});
}
});
$('.selector').click(function(evt) {
$('.selector').not(this).each(function() {
$(this).css('text-decoration', 'line-through');
});
$(this).addClass('clicked');
});
$('body').click(function(evt) {
if(!$(evt.target).hasClass('clicked')) {
$('.selector').css('text-decoration', 'none');
}
});
Related
I have multiple rows and in each row is a span which is set to transparent:
span {
color: transparent;
}
Now upon the hover of a row, I set the span to be visible by adding the following jQuery:
$('.single-row').hover(function(){
$('span').css("color", "#999");
}, function() {
$('span').css("color", "transparent");
}
);
However, this effects every row at once rather than the specific row being hovered over.. what syntax do use to effect the specific row being hovered over rather than each row without using id's?
You can do it using $(this).find('span') to select a span inside current hovered row
$('.single-row').hover(function(){
$(this).find('span').css("color", "#999");
}, function() {
$(this).find('span').css("color", "transparent");
}
);
Or use a shortcut $('span',this)
$('.single-row').hover(function(){
$('span',this).css("color", "#999");
}, function() {
$('span',this).css("color", "transparent");
}
);
The javascript method in the currently-accepted answer will work fine (provided the bug mentioned in comments is fixed) -- but just for completeness, a pure CSS version of this would be
.single-row span {color: transparent}
.single-row:hover span {color: #999}
I'm trying to make it so that when you hover a list item, the corresponding piece is highlighted, and when you hover the piece, the corresponding list item is highlighted.
So far when you hover on the list item, it does highlight the corresponding map area, but how would I write it so that it hovered reciprocally?
I tried:
$('.one, #one').hover(function(){
$('#one, .one').attr("fill", "#213A46");
$(".info-one").fadeIn();
},
function(){
$('#one, .one').attr("fill", "#009A8B");
$(".info-one").hide();
});
and that did not seem to work. Any suggestions would be helpful. Here's a codepen of what I'm currently working on as well: http://codepen.io/anon/pen/zGzoMY
You can't change the state of an element, so you do have to change your .region-list li:hover { by .region-list li:hover, .region-list li.hover {.
Then you can add it in your JS, i.e. :
$('#four').hover(
function() {
$('#four').attr("fill", "#213A46");
$('.four').addClass('hover');
$(".info-four").fadeIn();
},
function() {
$('#four').attr("fill", "#3F6C80");
$('.four').removeClass('hover');
$(".info-four").hide();
}
This isn't possible. You will need to add a class like .hover to the element.
see: https://forum.jquery.com/topic/jquery-triggering-css-pseudo-selectors-like-hover
The way to trigger the hover on the li by hovering on the map is something like this:
$('#one').hover(function() {
$('.one').trigger('mouseenter');
});
But to add the class you will do something like
$('#one').hover(function() {
$('.one').addClass('hover');
});
Then remember to remove the class on mouseleave.
You need to add the hover handler to the graphic that contains #one. Otherwise, when you mouse over the text inside the polygon, that's treated as leaving the polygon.
$('.one, g:has(#one)').hover(function() {
$('#one').attr("fill", "#213A46");
$('.region-list .one').css({
backgroundColor: '#213a46',
color: '#ffffff'
});
$(".info-one").fadeIn();
},
function() {
$('#one').attr("fill", "#009A8B");
$('.region-list .one').css({
backgroundColor: 'inherit',
color: 'inherit'
});
$(".info-one").hide();
});
Modified Codepen
I've only updated #one, the others are similar. It would be better to implement this using DRY methods where you find the reciprocal elements using data attributes, but I didn't bother with that rewrite.
I have white text in 10 divs that should become blue once the user clicks on them and the total number of "selected" divs is 5. I did it like this:
<div id="sen1" class="sentences">Text1</div>
<div id="sen2" class="sentences">Text2</div>
<div id="sen3" class="sentences">Text1</div>
<div id="sen4" class="sentences">Text2</div>
...
$(".sentences").click(function() {
count++
$(this).css("color", "blue")
selected_true.push($(this).text())
if (count == 5){
$(".sentences").off("click")
//go to next page
}
});
Now I want the text to become white again if a blue text is clicked again and want to decrease the count variable by one. So ideally I want to increase the counter each time a sentence is selected and decrease it again once it is un-selected.
I thought about toggle but how would I incorporate the counter in the toggle method?
Doing it this way might make more sense:
css
.sentences {
color: #fff;
}
.sentences.turnedon {
color: blue;
}
javascript
$(".sentences").click(function() {
if( $(this).hasClass('turnedon') ) {
$(this).removeClass('turnedon');
count-1;
} else {
$(this).addClass('turnedon');
count++;
}
You can do it using 2 classes. If you have 2 styles classes you can use.
$('yourSeletor').toggleClass('yourClassBlue');
See this example: http://api.jquery.com/toggleclass
A better approach would be to add a class to each clicked div and remove it when it is clicked again.
Use the JQuery toggleClass to get it done in one simple line:
$(this).toggleClass('selected');
Then you can count the selected divs like so:
$('.selected').length;
I need help with this JS code for my wordpress theme.
First part is when it looks for h4 heading and if it has certain text it wraps all paragraphs below this h4 into div (which hides all paragraphs into fading section) and adds "button" (which is span):
var tutustu = 'TUTUSTU';
var syvenny = 'SYVENNY';
$('.article_content h4').each(function(){
if($(this).text() == tutustu)
{
$(this).nextUntil("h4").wrapAll('<div class="expand" />').parent().append('<span id="expand">show more</span>');
}
else if($(this).text() == syvenny) {
$(this).nextUntil("h4").wrapAll('<div class="expand" />').parent().append('<span id="expand">show more</span>');
}
});
Second is when user clicks on "button" div (that we wrapped into all paragraphs early) will get another class (to basicaly reveal all the paragraphs) and remover button:
$('span#expand').click(function() {
$(this).parent('.expand').removeClass('expand').addClass('expanded');
$(this).remove();
});
What I need is after paragraph text is revealed I want to have button to click on and everything goes back like in 1st part.
I came up with something like this:
$('span#expanded').click(function() {
$(this).parent('.expanded').removeClass('expanded').addClass('expand');
});
But it doesn't work (
Help is much appreciated
Use event Delegation and .toggleClass() instead of .addClass() and .removeClass()
$(document).on("click" , "span#expanded" , function() {
$(this).parent().toggleClass('expanded expand');
});
$('#expanded').on('click', function(e) {
$(this).parent().toggleClass('expanded expand');
e.preventDefault();
});
I am sort-of stuck with this minor part and I can't move on with my project.
Basically what I am trying to do is to fadeIn/fadeOut between two divs with same class, but keep the function as short as possible.
I have made following but apparently it will work only if both divs are hidden in the begginging and I need to show default title (first div) on load and after 2 seconds I want to swap to another title and then it will keep going circular.
HTML:
<div class="ref-title">Sample Title #1</div>
<div class="ref-title">Sample Title #2</div>
JS:
function titleSwap () {
$('.ref-title:hidden:first').fadeIn(500).delay(2000).fadeOut(500, function () {
$(this).appendTo($(this).parent());
titleSwap();
});
} titleSwap();
CSS:
.ref-title {
display: none;
}
JS Fiddle Demo
So I need first div displayed as block and then it will disappear and the other one will appear and keep going on like that... Any tips ?
JSFiddle - Adding a hidden class to the div you want to start as hidden and then changing the function as below should work.
HTML
<div class="ref-title">Sample Title #1</div>
<div class="ref-title hidden">Sample Title #2</div>
CSS
.hidden {
display: none;
}
JS
(function titleSwap() {
$('.ref-title').not('.hidden').delay(2000).fadeOut(500, function () {
var $me = $(this);
$('.ref-title.hidden').removeClass('.hidden').hide().fadeIn(500, function () {
$(this).removeClass('hidden');
$me.addClass('hidden');
titleSwap();
});
});
})();
Additionally, if you don't want to include the hidden class on the DIV within the mark-up you can just use $('.ref-title:nth-child(2)').addClass('hidden'); before the titleSwap function to add the class to the second DIV.
If you can use just show/hide you can try like this: show/hide Example
function toggleTitle() {
$('header > h2').delay(2000).toggle('fast', function () {
toggleTitle();
});
}
If you must use fadeIn/fadeOut its a bit more complicated due to the concurrent fade effect between the titles... this is my solution fadeIn/Out Example
function toggleTitle() {
var visible = $('header > h2:visible');
var hidden = $('header > h2:hidden');
visible.delay(2000).fadeToggle('fast', function () {
hidden.fadeToggle('fast');
toggleTitle();
});
}
it's easy if you put ID's on them, is this posible? check out this answer
jQuery fadeOut one div, fadeIn another on its place
$('#fadeout').fadeOut(300);
$('#fadein').delay(2000).fadeIn(300);
if you cannot add IDs, try this. it assumes they are the only elements under their immediate parent
$('.ref-title:first-child').fadeOut(300);
$('.ref-title:last-child').delay(2000).fadeIn(300);