Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I keep some elements inside one container. For better visibility odd elements have other background color. Sometimes I need to filter elements with conditions, so unwanted elements I move to another class, but it seems nth-child keep old state. Even if I make it dynamic with jQuery still it keeping old state.
I would prefer keep used and unused elements in same container - if I separate them and change filters, need to sort visible elements again.
jsfiddle: http://jsfiddle.net/ex4740n2/5/
Have you any ideas how to solve it?
Thanks in advance!
The answer by #Pete:
But I'm guessing your problem is that you think nth-child is a class selector - it's not, it's an element selector
So, if it not possible to make it by only css, make it using JS. Iterate visible elements and change background color.
var visibled = $(".item");
for (var i = 0; i < visibled.length; i += 2) {
$(visibled[i]).css("background-color", "rgba(190, 255, 196, 1)");
$(visibled[i + 1]).css("background-color", "");
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last year.
Improve this question
I want all text on my site with the font name 'classylight' to have a letter spacing and word spacing of 50px each.
Defining a class in the site map and adding class names for each post is a time consuming process.
To reduce the time, I tried to solve this issue with the attribute*=style property.
I tried -
body ["style=font-family:classylight"] {
letter-spacing:50px;
word-spacing:50px;
}
It's not working. Can anyone help? I would prefer css for this. If there's no possibility in css, please refer with javascript, jquery.
PS - I'm not looking for answers which adds styles directly to body part like
p {
font-family: classylight;
letter-spacing:50px;
word-spacing:-20px;
}
<p>text</p>
Or
.classylight {
font-family: classylight;
letter-spacing:50px;
word-spacing:-20px;
}
<p class="classylight">text</p>
These are time consuming as I use different fonts for different lines for different paras for different posts!!!
if you have own fonts.css then u can directly add css letter-spacing:50px;
word-spacing:50px; on your font css file
Try this and add reference of the css file in your main html page.
body {
letter-spacing:50px;
word-spacing:50px;
font-family:classylight;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
In this website, the header is animated when you scroll the page a bit. Can you please advise what techniques, tools and best practices (broadly) one may use to achieve this and similar effects?
Use javascript to add a class to the header element when the scroll position is at the top (bind to the onscroll event and check if at the top or not).
Then define new postiions for your elements in css when that class is applied, and use the transition css property to animate it
Well for the animation occurring when you scroll you would use
$(document).scroll(function() {
if($(document).scrollTop() === 0);
} else {
});
As for the animation, there are many ways to do this and the question is too broad, as stated above.
the way I personally do it, is to add a class to the body on scroll. I then style the particular element I want to change (in your case the header) accordingly. I add it to the body instead of the particular element in case I want to manipulate other selectors, etc.
This is the JS I use:
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 50) { //distance scrolled before effect takes place
jQuery("body").addClass("scrolled");
} else {
jQuery("body").removeClass("scrolled");
}
});
Then I'd add some CSS for example:
header{height:100px;transition:all, .4s, ease; /*Make sure to use all cross-browser markup*/;}
body.scrolled header{height:50px;}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a full-page header with a logo in the center and an arrow below. I need the arrow to disappear if it scrolls up by 10px or more. To this end, I am using .scrollTop() and .hide() as shown in the following jfiddle. However it does not disappear on scrolling up.
Would appreciate anyone putting me on the right path to find why the arrow isn't hiding with .hide()?
First of all include jquery in your jfiddle (settings icon in the js part of the screen). And use the $j also by $j('#arr_down').hide(); and $j('#arr_down').hide(); you forgot the j in your example
$j=jQuery.noConflict();
$j(document).ready(function() {
$j(window).scroll(function () {
if ($j(this).scrollTop() > 10)
$j('#arr_down').hide();
else
$j('#arr_down').show();
});
});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm using this iteration in JavaScript to generate some >li< tags.
for ( var i = 0, l = response.items.length; i < l; i++ )
{
//alert(response.items[i].id.videoId);
document.getElementById("thumbs").innerHTML += "<li class='item-thumbs span3 hardstyle'>Shortened for this question</li>";
}
As you can see in the picture below, the >li< tags are being generated but the screen stays "white".
Can anyone tell me why this is happening? This script is sitting at the bottom of the code, maybe that's why I can't see any elements, because the rest of the page is being generated before I iterate through this object?
Thank you in advance,
Stephan
you should try to remove
height:0px;
overflow:hidden;
css values from #thumbs element (at least second one!)
#thumbs {height:0px; overflow:hidden;}
compare here: https://jsfiddle.net/vtrpyqdL/ (try to run this one then remove css section)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am using the mousenter demo from mootools. I put it on my site trying to affect the links so when someone hovers over them the link fades into another color. The problem I am having is that the mootools code is only set up to handle one ID! Since I am using it for a navigation, I have multiple IDs that I want to change. How can I affect all of them? I know I should use an array but I'm not that good with Javascript in order to code it properly. Please help!
The URL is www.portfoliobyart.com/h20
I took a look at your site. In demo.js, if you change this line
$('link').set('opacity', 0.5).addEvents({
to this:
$$('.nav a div').set('opacity', 0.5).addEvents({
you will achieve the same effect for every item in your nav menu.
You should read up on MooTools selectors for more about this. Selectors are a very powerful tool.
the code below will take each of the nav link elements and add the mouseenter and mouseout events.
//selects all nav elements
$$('.nav a div').each(function(el){
//this is the interior of the function that will run on each el
//store the original bg color
var color = el.getStyle('backgroundColor');
//now add the mouseenter and leave events w/ the morphs
el.set('opacity', 0.5).addEvents({
mouseenter: function(){
// This morphes the opacity and backgroundColor
this.morph({
'opacity': 1,
'background-color': '#000000'
});
},
mouseleave: function(){
// Morphes back to the original style
this.morph({
opacity: 0.5,
backgroundColor: color
});
}
});
});
hope this helps!