My question is basically how can I have a child style event affect the parent. Right now I'm using event target to change the style of a table cell I'm hovering over, but whenever I hover over a child with text in it the child changes but the parent does not which doesn't look very good. Here's my code.
hoverBackground = (e) => {
if (e.target.classList.contains(this.state.calendarNavi) || e.target.classList.contains(this.state.calendarNaviEmpty)) {
e.target.style.background = 'darkgrey'
} else {
e.target.style.background = "#b1a18b"
e.target.style.color = "white"
}
}
I've looked for answers for a while but I couldn't find one most people are trying to prevent the child from effecting the parent, but I'm having the opposite problem. I want the child to change the style of the parent and vise versa.
Here's the table data, I'm using Material Design Bootstrap for basic layouts:
<td key={d} day={`${d}`} dayName={`${currentWeekDay}`} month={`${this.month()}`} onMouseEnter={this.hoverBackground} onMouseLeave={this.hoverBackgroundExit} className={`calendar-day ${currentDay} ${currentWeek} railway`} style={currentStyle}>
<MDBContainer>
<MDBRow>
<MDBCol>
{d}
</MDBCol>
</MDBRow>
</MDBContainer>
</td>
P.S. Sorry for the messy looking code, I still have to clean this component up a bit. Also I'm open to better ways of handling this hover event if anyone has suggestions.
I rubber ducked! The problem was using event.target vs using event.currentTarget
Related
I'm a very basic coding person that needs something to work, but IDK how. I have a website where I have 4 images. When you hover over those img they become slightly darker, but I wish there was a way to show some text as well (preview of how it should work: https://imgur.com/a/r5cOW2R)
Here's the link to my GitHub code: https://github.com/Ezzol/HCI-Portfolio
Can anyone explain to me what I need to do to add that hovereffect you can see in my design at the imgur link?
You would want to use the CSS hover event. Here's a good example on how to do that.
https://www.w3schools.com/howto/howto_css_image_overlay.asp
you probably need to use javascript as well, and do an EventListener to tell when it is being hovered over, and then use .style to change it, for example:
var text = document.getElementById("text");
var exampleimg = document.getElementById("exampleimg");
exampleimg.addEventListener("mouseover", examplechange);
exampleimg.addEventListener("mouseout", examplechangeback);
function examplechange(event)
{
text.style.display = "block";
}
function examplechangeback()
{
text.style.display = "none";
}
add a h1/h2/h3/p element to your page, and give it the id "text" then style it how you want and set the display to none.
I'm trying to implement a TinyMCE button that will apply the style of the selection to the entire box. I'm having trouble, though, reading the style of the selection when the selection is buried in a span in a span in a paragraph. Let's consider 'color' for example. Below I have a box with some text and I've selected "here" in the paragraph and made it red.
The HTML for the paragraph is now:
The code behind my button to apply the style of the selection to the box is
var selected_color = $(ed.selection.getNode()).css('color');
console.log("color pulled is ", selected_color);
$(ed.bodyElement).css('color', selected_color);
It doesn't work because the color pulled is black, not red, so the third line just re-applies the black that's already there. (If I replace selected_color in the third line with 'blue' everything goes blue.) So the problem is pulling the color of the current selection.
Does anyone know how I can do this reliably, no matter how buried the selection is?
Thanks for any help.
I also noticed somewhat a strange behavior up and there, with selections of nested span's and div's, but honestly i'm not able to recognize if this is a bug of TinyMCE, a browser issue or a combination of both (most probably).
So, waiting for some more information from you (maybe also your plugin code) in the meanwhile i realized two proposal to achieve what you want: the first plugin behaves like the format painter in word, the second is simply applying the current detected foreground color to the whole paragraph.
As you move throug the editor with the keyboard or mouse, you will see the current detected foreground color highlighted and applied as background to the second plugin button.
Key point here are two functions to get the styles back from the cursor position:
function findStyle(el, attr) {
var styles, style, color;
try {
styles = $(el).attr('style');
if(typeof styles !== typeof undefined && styles !== false) {
styles.split(";").forEach(function(e) {
style = e.split(":");
if($.trim(style[0]) === attr) {
color = $(el).css(attr);
}
});
}
} catch (err) {}
return color;
}
function findForeColor(node) {
var $el = $(node), color;
while ($el.prop("tagName").toUpperCase() != "BODY") {
color = findStyle($el, "color");
if (color) break;
$el = $el.parent();
}
return color;
}
The try...catch block is needed to avoid some occasional errors when a selected text is restyled. If you look at the TinyMCE sorce code you will notice a plenty of timing events, this is a unavoidable and common practice when dealing with styles and css, even more with user interaction. There was a great job done by the authors of TinyMCE to make the editor cross-browser.
You can try out the first plugin in the Fiddle below. The second plugin is simpler as the first one. lastForeColor is determined in ed.on('NodeChange'), so the code in button click is very easy.
tinymce.PluginManager.add('example2', function(ed, url) {
// Add a button that opens a window
ed.addButton('example2', {
text: '',
icon: "apply-forecolor",
onclick: function() {
if(lastForeColor) {
var applyColor = lastForeColor;
ed.execCommand('SelectAll');
ed.fire('SelectionChange');
ed.execCommand('forecolor', false, applyColor);
ed.selection.collapse(false);
ed.fire('SelectionChange');
}
return false;
}
});
});
Moreover: i think there is a potential issue with your piece of code here:
$(ed.bodyElement).css('color', selected_color);
i guess the style should be applied in a different way, so in my example i'm using standard TinyMCE commands to apply the foreground color to all, as i wasn't able to exactly convert your screenshot to code. Please share your thoughts in a comment.
Fiddle with both plugins: https://jsfiddle.net/ufp0Lvow/
deblocker,
Amazing work! Thank you!
Your jsfiddle did the trick. I replaced the HTML with what was in my example and changed the selector in tinymce.init from a textarea to a div and it pulls the color out perfectly from my example. The modified jsfiddle is at https://jsfiddle.net/79r3vkyq/3/ . I'll be studying and learning from your code for a long time.
Regarding your question about
$(ed.bodyElement).css('color', selected_color);
the divs I attach tinymce to all have ids and the one the editor is currently attached to is reported in ed.bodyElement. I haven't had any trouble using this but I have no problem using your
ed.execCommand('SelectAll');
ed.fire('SelectionChange');
ed.execCommand('forecolor', false, applyColor);
Thanks again! Great job!
Seeking a solution to my problem...
I partially found an answer from another thread on here, using this script
$(function () {
$(".myclass").hover(function ()
{}, function ()
{
$(".myclass>li").fadeTo(200, 1)
});
$(".myclass>li").hoverIntent(function ()
{
$(this).attr("id", "current");
$(this).siblings().fadeTo(200, .6);
$(this).fadeTo(300, 1)
}, function ()
{
$(".myclass>li").removeAttr("id");
$(this).fadeTo(200, 1)
})})
When an item in the list is hovered, the script fades all other items out. Original demo is here http://jsbin.com/usobe
This works OK on my site, though the list ( a grid of thumbnails) is part of a bigger slider script, which loads "previews" via ajax. When a list item is clicked a hidden section expands on the page, and the slider script assigns the list item a class "active".
When the hidden section is open I would like the activated thumbnail to remain at 1 opacity, while the rest are faded to .6, exactly as it is with the hover effect using the script above. What I am trying to achieve becomes obvious when you click a thumbnail to activate the ajax script. Is it possible to use the active class to make this happen i.e. if class is not active set to .6 opacity?
Thanks in advance
----EDIT
Thanks everyone for suggestions - I am not having much luck so far! Using the code above, would it be possible to modify it so that when a list item is clicked it holds the specified levels of opacity? That would do nicely, I think. Then I could use onclick I guess to fade all items back to full opacity when the hidden div is closed.
I'm trying to guess how your code work, for what I understand you should do something like this:
// this is the selector that gets the click on the thumbnail
$('li.item').click(function() {
// fade all the thumbnails to op 1.0
$('#li.item').css('opacity', '.6');
// let the active thumbnail to 1.0
$(this).css('opacity', 1);
//show your hidden div
});
Then, when you close the hidden div:
$('div#hiddenDiv').onClose(function()
// about to close
$(this).fadeTo('fast', 1);
});
You could use an on click targeting the zetaThumbs li elements, set the current target to 1 and its siblings to .6
$('.zetaThumbs li').click(function(){
$(this).css({'opacity':1}).siblings().css({'opacity':.6});
})
var newParagraph : ParagraphElement = new ParagraphElement();
var icon : InlineGraphicElement = MY_ICON;
// icon.toolTip = "boo" ????
newParagraph.addChild( icon );
I want a specific toolTip for "icon". I have read about using HTML and rollOver and rollOut (e.g. Thanks, Mister), but I'm building this as part of a larger text block; it's difficult to switch from incremental objects to HTML in the middle.
If I cannot set an event on the icon, can I create an HTML bit in ActionScript as part (but not all) of a paragraph ?
Cheers
I just came across the same problem.
The easiest solution i found was wrapping my InlineGraphicElement in a LinkElement.
The LinkElement already dispatches mouse events.
The problem (as I'm sure you found out) is that text flow elements are not display objects, and so do not implement the normal display object behavior.
What you need to do is create a custom InlineGraphicElement that attaches the event listeners you need, then dispatch an event off of the textFlow instance so it can be read in somewhere in your display object hierarchy (or whatever your method of choice is to target that event).
You can see a good example of how to add mouse interaction by looking at the source to the LinkElement (see the createContentElement function).
Unfortunately the InlineGraphicElement is marked final, so you will need to duplicate it's functionality rather then extend it. Just make sure to use the custom graphic element in your code in lieu of the normal one.
Best of luck!
edit
Just in case the point was lost, the idea is that you can capture the mouse event somewhere in your app by attaching a listener to the textFlow, then programmatically create and position a tool tip over the element using the standard methods to find the bounds of a text flow element.
You can do some hit-testing when the mouse is over the textflow component.
Suppose you have some textflow like this:
<s:RichEditableText width="100%" height="100%" mouseOver="toggleTooltip()">
<s:textFlow>
<s:TextFlow>
<s:p>
<s:span>Some text before</s:span>
<s:img id="myImg" source="myImg.png" />
<s:span>Some text after</s:span>
</s:p>
</s:TextFlow>
</s:textFlow>
</s:RichEditableText>
And you listen for mouseOver events on the entire textcomponent.
Then to test if the mouse is over your image, implement the mouseOver handler:
private function toggleTooltip():void {
var graphic:DisplayObject = myImg.graphic;
var anchor:Point = graphic.localToGlobal(new Point(0, 0));
if (mouseX >= anchor.x && mouseX <= anchor.x + graphic.width &&
mouseY >= anchor.y && mouseY <= anchor.y + graphic.height)
{
trace('show tooltip');
}
else {
trace('hide tooltip');
}
}
I've got a list with list-style-none which needs to be able to add new items to itself via Ajax and have the background expand appropriately when it does. Adding via Ajax is easy, but every solution I try for the background fails me. I don't know if it's even possible; is it? I'm using a grid like this one:
http://jqueryui.com/demos/sortable/#display-grid
Both WebKit and Firebug are showing me skinny, empty bars when I hover over the enclosing divs and/or the enclosing ul tag. It appears that the minute you set a list loose with list-style-none and float:wherever, you give up control over its background. But that can't be right.
This is something I've run into a number of times. The problem is that floated elements aren't part of the normal box model, so they don't cause their parent elements to expand unless their parent elements are also floated. So if possible, float the ul or containing div.
Edit:
See quirksmode for another css-only workaround.
Could you provide a sample of your code? Also, why does the list have display:none set?
For instance, should be as simple as this:
HTML:
<ul id="dest"></ul>
JS:
// Simplified example, most likely wrapped in $.ajax
// This is the AJAX response function
function(data, response) {
var items = json.parse(data);
$.each(items, function() {
// Assumes item has a name property
$('#dest').append($('<li>' + this.name + '</li>'));
});
}
Should be just that simple. You shouldn't need the hide the list initially, as you can simply append list items and have the display update appropriately.
Hope that helps.
You need to explicitly set the width and height for the area.
Check out this link for Horizontal Scrolling: http://valums.com/scroll-menu-jquery/
Here is the script:
$(function(){
//Get our elements for faster access and set overlay width
var div = $('div.sc_menu'),
ul = $('ul.sc_menu'),
// unordered list's left margin
ulPadding = 15;
//Get menu width
var divWidth = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
});
Basically, you need to update the ulWidth and divWidth when you add the new item.
Then just set the background image to repeat horizontally and you should be set.
ul.sc_menu {background:transparent url(image.png) repeat scroll 0 0;height:100px}
Note: You will need to set the height; otherwise you will not see the background because the li are floated.
For dealing with the float element, maybe you should know it's characteristic, gotcha, and how to deal with it.
See the links below, it also have demo, so you can understand the concept:
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
http://aloestudios.com/2009/12/goodbye-overflow-clearing-hack/
and
http://aloestudios.com/misc/overflow/