I have a questions.
I search for a solution for these.
Wanna use el with child function.
But didn't work sofar.
If i clear the el it works but then i have all elements class last.
Mootools Script
$$('ul#portfolio li, .ce_id').each(function(el) {
if(!el.hasClass(filterVal)) {
el.fade('out').setStyle('display', 'none').addClass('hidden');
} else {
el.setStyle('display', 'block').fade('in').removeClass('hidden');
$$(el':nth-last-child((4n+4)').addClass('last');
}
Hope you guys can help me. Or its not possible to use el or VAR with :nth-last-child together?
Update: But didn't work.
else {
el.setStyle('display', 'block').fade('in').removeClass('hidden');
el.getElements(':nth-last-child(4n+4)').addClass('last');
}
Update 2:
Here the Code
So i want when i click on print that every 4 li witch not hidden and has the class witch clicked get the class last.
http://jsfiddle.net/6whd9/1/
Best reagards
I'm cutting down on the code a bit, but you cant but the el in the selector. Instead you should use el.getChildren or el.getElements. Here is an example:
$$('#parent > div').each(function(el){
el.getChildren(':nth-last-child(4n+4)').addClass('last');
});
Here is a working example: http://jsfiddle.net/ZxMUh/
Edit: It's really hard to understand from your question what works and not. However, if you try to animate you can not just fade it in. You need to hide it first.
$$('#parent div.hidden').fade('hide');
$$('#parent > div').each(function (el) {
el.removeClass('hidden').fade('in');
el.getChildren(':nth-last-child(4n+4)').addClass('last');
});
Here is the example: http://jsfiddle.net/ZxMUh/2/
Edit (After getting the fiddle): In my example I thought you where changing the nth-child in the "li". The problem is that you can't do it in your each-statement. Do it separate.
Here is fiddle when using :nth-last-child: http://jsfiddle.net/6whd9/2/
However, is't not probably going to do what you want, and it's not really possible to use the :nth-child in this case. You have to make the selection by your self.
var visable = $$('ul#portfolio li:not(.hidden)').reverse();
visable.each(function (item, index) {
// same as 4n + 4
if (index % 4 == 3) {
item.addClass('last');
}
});
Here is a fiddle demonstrating it: http://jsfiddle.net/6whd9/4/
(I added the last class to the style with a solid red border so it would be visable)
I hope I finally understood your question...
Related
I have a requirement where an element with a particular class has to be prepended to its sibling with another class. Although I am able to achieve this for the first instance, it doesn't work for all the elements in the div. I have tried the below code
Click Here
This Works:
$("#MyDiv .spanToBeShifted:first").prependTo($("#MyDiv .MyButton:first"));
This Doesnt:
$("#MyDiv .spanToBeShifted").prependTo($(this).closest('.MyButton'))
Below is the solution which worked for me
Solution
$('.spanToBeShifted').each(function () {
var d = $(this).siblings('.MyButton');
$(this).prependTo(d)
});
I'm trying to color my HTML textarea element with CSS and/or JavaScript, so it would show different colors when I type something in.
For example, if I typed in "Hello world," I might want it to be green because it is a string. Yet, I can't figure out how to do this.(Reminder: this is for typing in on a page, not in the pages source code)I know it's possible because W3Schools did it.
But, I can't just seem to find out how to color it. Here is an example page from W3Schools. If you type something in, it will change color depending on what it is. I don't know how to make it do that though. Help would be much appreciated!
I suggest using library like https://markjs.io because it would be too much time consuming to implement that from zero.
Here's an example of highlighting "found words"
$(function() {
var $input = $("input[name='keyword']"),
$context = $("table tbody tr");
$input.on("input", function() {
var term = $(this).val();
$context.show().unmark();
if (term) {
$context.mark(term, {
done: function() {
$context.not(":has(mark)").hide();
}
});
}
});
});
More: https://jsfiddle.net/julmot/bs69vcqL/
i have a dynamically generating div which is not in the time of loading. It is generating later in the document. So how can i target that div and hide it after specific time. The div is as follows:
<div class="message-sent">Your Message has been sent</div>
Important: I refer so many articles but everyone is talking about 'onclick'. I don't want click event. I just want hide this div when it is appearing in the docuemnt. Thanks in advance!
you can add a style display:none.
you can add the style after time out (3000ms) like so:
setTimeout(function(){
document.getElementsByClassName("message-sent")[0].style.display="none";
}, 3000);
note: it is better if you use an id instead of a class to identify your div.
You should try looking into the setTimeout function.
Also if that div is the only member of the DOM-tree that has that class, use an ID. It's better IMO.
Anyway, assuming you want to hide every member of the message-sent-class,
it goes something like this:
setTimeout(function(){
$('.message-sent').hide();
}, 2000)
In which the 2000is the variable that indicates the time (milliseconds)
You can try DOMNodeInserted,
$(document).bind('DOMNodeInserted', function(event) {
var element = document.getElementsByClassName("message-sent"); // get all elements with class message-sent
var lastchild = element[element.length - 1]; // get the last one (others are hidden)
if(lastchild != null){
lastchild.style.visibility = 'hidden'; // set visibility to hidden
}
});
Working demo
Hope helps,
I think that the problem could be easily resolved...but not by me!
I want to create two different animations for my div:hover, the first uses CSS (for the people who won't active javascript in IE) and the second uses JS.
The choice between the two methods is simple, the activation of switchClass function using jqwery. But after this happened the selector for the new class doesn't work and not even the mouseover function!
HELP ME PLEASE!!
Here the code:
$(document).ready(function () {
$( ".plateMiddle" ).switchClass( "plateMiddle", "plateMiddleFX");
});
$(".plateMiddleFX").mouseover(function () {
$(this).stop().find('img').animate({opacity: '0'},{queue:false, duration:500}),
$(this).stop().animate({width: '265'},{queue:false, duration:500});
});
I don't kwow if could generate problem but inside the div there is an image with more or less the same dimensions.
An other information: if I select directly the image by a class selector the animation takes life!
THANKS!!
Try
$(".plateMiddleFX").live('mouseover', function () {
$(this).stop().find('img').animate({opacity: '0'},{queue:false, duration:500}),
$(this).stop().animate({width: '265'},{queue:false, duration:500});
});
I want to use display: table and display: table-cell for my layout in browsers that support it. In IE7 I simply want to float my columns (since I assume it's not possible to get it to work in that browser), but cannot find anything about how to do it using Modernizr. Can anyone help me please?
I suppose I could use a browser conditional, but was hoping to not have to break out another CSS file.
Thanks!
If all you want to do is apply a single different rule for IE7 and less, I'd be tempted not to use Modernizr for this specific job.
Simply do something like this, to avoid having to "break out another CSS file":
#menu li {
display: table-cell;
*float: left;
}
This uses the Star Property Hack to provide a rule to only IE7 and below.
Another option is the !ie7 hack, which is for some odd reason my highest voted answer.
... And if you want to use Modernizr, you could use this snippet:
(function() {
var displayTests = ["table", "table-caption", "table-cell",
"table-column", "table-column-group", "table-footer-group",
"table-header-group", "table-row", "table-row-group"];
var rules = document.createElement("div").style;
for (var c=0; c<displayTests.length; c++) {
var testValue = displayTests[c];
Modernizr.addTest("display" + testValue, function() {
try {
rules.display = testValue;
return rules.display == testValue;
} catch (e) {
return false;
}
})
}
}());
Source [Link]
IE 8 does not tell the truth when the created element is a 'tfoot', and the display value is 'table-header-group'. The following snippet will not fail, even though IE 8 ignores the CSS setting and continues to display 'tfoot' below 'tbody'.
try {
var x = document.createElement('tfoot').style;
x.display = 'table-header-group';
console.log('Both IE 8 and Chrome end up here.');
} catch (e) {
console.log('Except IE 8 should have ended up here, since it does not move the tfoot element.');
}
It might be 'correct', in the sense that 'tfoot' has already set display to 'table-footer-group'; but it's 'wrong' in the sense that it (a) doesn't allow the user to override, and (b) doesn't tell the user that it isn't going to work. I haven't tested other browsers.