Using span with javascript to create CSS transition - javascript

Using javascript, I randomly pick a word from a text in an html div tag and surround it with a span tag. Using the class of the span tag I try to perform a CSS transition of the word color from black to red. I then remove the span tag to change the word back to black color. The effect I am looking for are "flashing words".
I manage to get the word to change color, but can not get the smooth CSS transition to work.
My question is: Why isn't the CSS transition working?
My problem seems similar to this question, but I do not manage to get the solution of "forcing a layout" to work in my case.
I hope it is ok to provide a working link to the test code I am working with instead of posting code here (javascript file here). If not, I will of course on request add code to this post.
Thank you in advance! I have been busting my head against this problem for a full day without success. Time to acknowledge that I need help with this one :-)
Edit: Adding code.
HTML:
<div id="message">
Some words here.
</div>
CSS:
div#message span
{
color: black;
}
div#message span.redtext
{
transition: color 5s ease-out 0s;
color: red;
}
Javascript:
//Insert span around word
var newText = text.split(randomWord).join('<span>' + randomWord + '</span>');
$("#message").html(newText);
//Request property that requires layout to force a layout
var x = $("#message").clientHeight;
//Add class to span
var newText = newText.split('<span>').join('<span class="redtext">');
$("#message").html(newText);

CSS transitions apply to style changes on elements. When a new CSS style applies to the element you are able to specify the transition to use in that change. In your example, you have added a span which is created with a red text style. The span element has the red text style on creation. You are not transitioning an element from one style to another, you are simply inserting it with the redtext class style.
What you need to do is add a span with black text inside it, and then change the class of the span from "blacktext" to "redtext", and the transition will apply. You could insert it without a class at all and then change it, but I used the class 'blacktext' to make it easier to identify.
See:
http://jsfiddle.net/n8zNW/

Give your span a class so that you can easily get a reference to it using jquery. Then use the addClass and removeClass jquery methods to add and subsequently remove the class that gives the text its colour.
Here's a working example: http://jsfiddle.net/sVMZJ/

Related

Javascript/Jquery on event trigger <div class=>

I've got a text/html slideshow with Javascript however upon cycling of new text I also need the script to trigger the :hover class on the menu item corresponding to the content present in the slideshow.
For a visual example please see: http://i.stack.imgur.com/mkyMJ.png
I've uploaded the JS code to http://pastebin.com/Kp4a7VXP for viewing.
Would really appreciate your help on this guys! :)
Thanks so much!
Kind Regards,
Jake
It may not make sense to try to mimic the hover state, so it may be better to have a css class such as .active added to the element you want the hover state for, and then include the css from the hover state in that class.
I'm assuming you have a CSS like
.item{
/* normal appearance */
}
and
.item:hover{
/* appearance when mouse over */
}
but as far as I know, there's no way to trigger the pseudo class :hover via javascript. But you can use a standard class for this like (but for semantics I would name it like .currentSlide or .activeSlide)
.item:hover,
.item.hover{
/* appearance when mouse over
or selected */
}
and then you can add and remove that class using javascript for the current slide element, like:
currentSlideDiv.classList.add("hover");
EDIT:
You can use a function like this, and call highlightCurrentSlideName(currentContentItem); inside NextClick() and PreviousClick()
function highlightCurrentSlideName(slideIndex){
var slideNameList = jQuery('.contentmenu a');
jQuery(slideNameList).removeClass('current'); //unhighlight all slide names
var currentSlide = slideNameList[slideIndex]; //select a slide name by a numeric index
jQuery(currentSlide).addClass('current'); //highlight that element
}
and add a class on your CSS file, and style it whatever you want.
.contentmenu a.current{
color: lightblue;
background-color: gray;
}
PS: I'm not a jQuery programmer I always write pure javascript, just noticed you have it there already.

Change element style on hover of another element

I have the following HTML code:
<div> class="module-title"
<h2 class="title" style="visibility: visible;">
<span>Spantext</span>
Nonspantext
</h2>
</div>
What I want to do is to hover over the h2 element and both of the spantext and nonspantext to change color. My limitation is that I cannot put the Nonspantext inside span tags (I cannot change the HTML code at all).
The problem is that when I put the CSS rule
.title :hover {color:#D01A13;}
only the spantext changes color on hover and when I put the code
.module-title :hover {color:#D01A13;}
the nonspantext will change color if I hover over the spantext but I also want the opposite to happen.
I am aware of the '+' and '~' rules in CSS but I could not make it work.
.title:hover {
color:#D01A13;
}
Spaces matter in CSS. The space is the "children" operator, so .title :hover means "when any children of .title are hovered over." Text nodes don't count as children.
Here is a fiddle.
Re your comment:
Ok, this code is good, I did not know about spaces in CSS. But, forgot to mention that there is also a rule .title span {color:#888888 !important;} that complicates the things a little bit. If I cannot change this rule, is there any chance that the .title can change color on hover?
Sure, you could try
.title:hover, .title:hover span {
color:#D01A13 !important;
}
Of course, this is very ugly. This is why you should use !important as little as possible. Fiddle
jQuery approach to doing this, by wrapping inner content within another div and applying style to that div:
$('h2.title').wrapInner('<div class="wrapper" />');
Than just apply css styling to .wrapper if need be.

Hover Effect using CSS and Javascript/Prototype

I have a 4x4 matrix of tiles. Each tile is basically a div. Now, I want to do the following:
When the mouse pointer is on a particular tile, I have to check perform a check on that tile(using position and stuff, which i have already done). If the tile meets the requirements, then it should have a hover effect.
Note: that the tiles keep changing positions, so at one moment the given tile must have the hover effect, but after rearrangement, it may not have it. And the rearrangement is not complete, ie i dont not reset the whole matrix. It involves only shifting a couple of tiles.
I need to implement this using css class and javascript(prototype, not jquery). I set a hover style for class hoverTile. I added a mouseover to each tile, such that whenever the user's mouse is over a tile, my function is called, which sets the class for the html div element using setAttribute.
Here is a summary:
Before:
<div> ... </div>
After:
<div class="hoverTile"> ... </div>
Style:
.hoverTile: hover{
text-color: red;
}
This does not seem to work, even though the class name appears when i inspect the html page. What is the mistake here?
Look at the demo I set up for you HERE
2 issues:
1) your seudo-selector (:hover) shouldn't have a space after the colon (:).
2) text-color should just be color
Micron and Igo probably answered your question although i'd like to add that you could achieve the same effect by adding
div:hover { color: red;
}
(you might not need the hoverTile class).
As for the border color
border-color:red; should work. [W3schools] So
.hoverTile { border: 5px solid #ff0000; } in your scheme.
Your CSS should be
.hoverTile:hover {
color: red;
}
not text-color (which is not a CSS property). Hope that fixes it.
EDIT: Also, if I understand correctly, you are adding hoverTile class on mouseover? In that case, you wouldn't need the :hover pseudo-class in your CSS at all. Make sure to remove the hoverTile class on mouseout though.

Change selected text color of individual element

This may not be possible, but I'd like to confirm.
You can globally change the selected text highlight color of the page with
::selection {
background: #cccccc;
}
::-moz-selection {
background: #cccccc;
}
but is it possible to change the the highlighted color for an individual element in JavaScript?
For example, if s is an element's style attribute, you can change the text and background colors using
s.color = s.backgroundColor = "#cccccc";
is there a style to change the element's highlight color?
This must be in old-fashioned JavaScript, no JQuery.
EDIT:
Also, because of performance, I need to change this to the element itself. CSS class swapping performs very poorly. The use case is that every word in a page I do not own will become it's own element. On an average page, adding a CSS class through script is taking 20-30 seconds whereas changing inline styles can be done in under 1.
Pseudo-elements and pseudo-classes aren't in the DOM, but you can use classes to achieve your result.
So add a rule like
.selectionclass::-moz-selection {
background: #cccccc;
}
to your stylesheet and add the class name selectionclass to your element.

hand cursor css on the selected text IE8

i have a problem of hand cursor i m currently selecting the text and highlighting it but problem is i want a hand cursor on the highlighting text
here is the running code of the problem any suggestion
http://jsfiddle.net/8mdX4/135/
and i want to run it in the IE8
Add a CSS rule in your example:
​span {
cursor: pointer;
}​
This will enable the hand-cursor on the generated span element on the page. Preferrabally you'd add an extra class to the generated span so not all span elements get the hand cursor. then you can add that class to the css like:
​span.highlight {
cursor: pointer;
}​
That is not possible using execCommand() as it does not support it. An alternative would be wrap the selected text in <span> tag and set the css property for it but it becomes PITA if you have html tags into your text.
Nonetheless, this might help you:
Inserting string at position x of another string
use this
style="cursor:pointer"

Categories