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});
})
Related
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
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!
(Solution is on the bottom of this post).
Currently we've a problem in our project using ng-animate.
We've got two states, lets name them for now: State 1 and State 2. Both have their state name as a div class. <div class="state1">.
Now state1 should slide up to the top, and slide2 should slide in from the bottom. This is working fine when switching between slide1 and slide2. However, if a user clicks on another button that moves to state1 (when being on state1) then only the content should change and no animation should be done.
Currently we use: .state1.ng-leave { } for the leaving animation on the state1 div, and .state2.ng-enter { } on the entering state. As you can see, when I'm on state1 and clicking on a button that will give another page with state1 then still the .state1.ng-leave { } will get called and the animation will be done.
Anyone got a solution for us? The ng-leave {} for state1 should only be triggered as soon as state2 is entering.
State1/State2 flow
Things we've tried:
We tried to add something to state('home.state1', { } to block the ng-animation for state1. When you enter state1, we never need an animation. We didn't find the solution using this. Probably there is something we can add to onExit: what we didn't try?
We also tried to work with ng-animate in the div.
Preview In this plnkr I have made an example what is going wrong. If you click "state1", you can see that the page is sliding up, but we don't want that. We just want to "refresh" the page so you just get the page without animation. If you click state2 then the animation should be done (just like the example shows). I also added a button on the state2 page that shows how the page should load when going from state1 to state1. Please check my example below:
https://plnkr.co/edit/zaFcZFOEtCybRuXobYl0?p=preview
Edit - Solution:
The solution was kinda easy and I found it because of the accepted reaction below. In the .state() from state1 I added:
onEnter: function() { $('.pane-animated').removeClass('state1'); },
This removes the state1 class from the div (as state1 class is on the same div as "pane-animated". Just added that to remove the right class). As I applied the animation on
.state1.ng-leave { } it cannot do the animation anymore as it doesn't have this class anymore.
Tested it serveral times, and works great!
Well here is the issue that i see. Any anchor tag with a # is taken as a redirect by angular so what it does as your route '/' is set to home page, angular redirects on that anchor click to home page and as the home page has a ng-leave animation applied. It does the animation.
In order to achieve what you want you just need to remove the # from the href and keep it empty as href="". Now that does not make sense as to why you would want a empty anchor but that gives you a dirty result but a result none the less (Hehe).
Now assuming you are wanting this to be done is to use the # anchor to navigate to a tag/element within the same page using hash linking. You can use the controller $anchorScroll() for it.
Example code:
yourapp.controller('yourControllername', function($scope, $location, $anchorScroll) {
$scope.scrollTo = function(id) {
$location.hash(id);
$anchorScroll();
}
});
<a ng-click="scrollTo('sectionA')">Foo</a>
<div id="sectionA">Here you are</div>
Hope this helps.
[Edit]
Ok after knowing your full requirement now based on your comment to this answer. I think i have come up with another solution to fit you needs. Its not perfect but it works until we find a good solution. Here is what you need to do (Keeping the sample code you shared in mind).
a) We make a new page and call it page-other.html. This will have same links buttons as home page with state 1 navigating to home using href="#" in anchor and state2 navigating to about as before. Just change the <h2>Home</h2> to <h2>Home- Other</h2> just to keep track where we are.
b) Add the page into the routeprovider but give it the same controller as mainController as follows:
.when('/other', {
templateUrl: 'page-other.html',
controller: 'mainController'
})
c) Add the class page-no-animate in the css setting it just like home page with background color etc. except for the animation part will be none as follows:
.page-no-animate { background:#00D0BC; color:#00907c; }
.page-no-animate.ng-enter,
.page-no-animate.ng-leave,
.page-no-animate.ng-animate {
animation:none 0s;
-webkit-animation: none 0s;
}
d) Change your mainController code to as follows. What it does is it has a function named gotoOther which sets the pageClass to page-no-animate and redirects to the other page using $location.path("/other"). After this funtion we have if-else condition that check on which location we are to apply appropriate animation or no-animation pageClass value as we dont want the other page to animate when we click the state 1 again to come back:
animateApp.controller('mainController', ['$scope', '$location',
function($scope, $location) {
$scope.gotoOther = function () {
$scope.pageClass = 'page-no-animate';
$location.path("other");
};
if ($location.path() == "/other")
{
$scope.pageClass = 'page-no-animate';
}
else
{
$scope.pageClass = 'page-home';
}
}]);
e) In you page-home.html, in the "State1" anchor tag: empty the href attribute and add the ng-click attribute to call the gotoOther function we created in the controller as follows
State1
see in jquery when ever we use animate function then we first use STOP then animate for eg : $('cntrol').stop().animate(function(--
so i think you need to find some kind of stop function in angular also so that when ever you start animate first it stops the existing animate function.
I have an accordion and unfortunately there is no active or current class assigned to the qafp-faq div which serves as a container for each item.
My main objective is to add icons indicating toggle state.
I added:
$( ".qafp-faq-anchor" ).click(function() {
$( this).find( ".fa-caret-right" ).toggleClass( "open", 1000 );
return false;
});
Which works great for allowing me to target the title if I open a div via the title, but not when the accordion behavior hides an open div when clicking another div.
You can see the problem here: http://jsfiddle.net/Qzwvr/2/
The solution I'm really after is how I can add a class to the qafp-faq div whenevr it is toggled.
I've definitely been learning a lot about jQuery and hope I can figure this out. Thank you.
The easiest way to do this would be to change it from toggleClass into a removeClass and addClass
$(".qafp-faq-anchor").click(function () {
// Remove open class if this is open
if($(this).find('.fa-caret-right').hasClass('open')) {
$(this).find('.fa-caret-right').removeClass('open');
}
else {
// Removes open class no matter where it is
$('.open').removeClass( "open", 1000 );
// Adds open class to clicked element
$(this).find(".fa-caret-right").addClass("open", 1000);
return false;
}
});
Updated jsFiddle
If you have multiple accordions you could make the selector for removing the open class more specific if you want multiple open at the same time
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/