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;
}
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 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 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", "");
}
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 details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
How to change the "start" of image?
I mean that the img is in the immobility only it's beginning is moving
I want change it CSS or HTML, in the last resort in JavaScript
Something like this: FIRST PICTURE (This picture on click change it's beginnig).
... It transform to it: SECOND PICTURE
Any idea? :/
<div class="myImg"> </div>
<style>
.myImg{
background: url('myimg.jpg');
}
.myImg2{
background: url('myotherimg.jpg');
}
</style>
<script type="javascript/text">
$('.myImg').click(function() {
$(this).removeClass('myImg');
$(this).addClass('myImg2');
});
</script>
Ofcourse you'll have to use jquery link to get jQuery latest update.
So what have i actually done here?
I've used jQuery to check if user click div .myImg if he did i just switch bettwen the div's classes and each other class got different image.
Hope i helped.
I'm not entirely sure what you're asking, but it sounds like you might want to do CSS sprites.
http://css-tricks.com/css-sprites/
If you want to change the image on click, you'll need some code. I won't spend too much time on that, given your question is hard to decipher, but if it were me, I would create a class per sprite, then toggle between the two classes based on the click event.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I would like to create a hightlight html inputs when they get focused using css and javascript, and jump through inputs highlighting the corners.
What I mean, is, when a text input get focused a quarter frame (L) locate in each corner, and when another input get focused those (L)s moves through the form to locate in the new focused control
I wanted to publish an image but I haven´t enough reputation points
Could anyone lead me how to do it?
Thanks
I don't know if you have to use javascript for some reason, but you can handle focus highlighting with just plain CSS.
input[type="text"]:focus,
textarea:focus,
select:focus
{
border-color:#0cf;
/* etc... */
}
That will color/highlight the borders of the input
simple, clean
EDIT:
I imagine it can be done, but its more than my CSS skills cover.
My only CSS thoughts are some kind of Gradient but I don't think you can gradient an outline, just borders. And you have wont have full browser coverage.
You might be able to do something with :before and :after by dropping an image left and right.
Javascript wise there is a Malsup plugin that you can look at, but nothing that will match exactly that image.
I could do it myself!!!
First you have to draw the four corner´s highlights on HTML:
<img id="clt" src="img/clt.png" border="0" style="position:absolute;visibility:hidden"></span>
<img id="crt" src="img/crt.png" border="0" style="position:absolute;visibility:hidden"></span>
<img id="crb" src="img/crb.png" border="0" style="position:absolute;visibility:hidden"></span>
<img id="clb" src="img/clb.png" border="0" style="position:absolute;visibility:hidden"></span>
After, create a JavaScript function:
function getFocusFunct(){
$("input[type=text], input[type=password], textarea").focus(function(){
var ctl=$(this);
var offset=ctl.offset();
var clt=$("#clt");
var crt=$("#crt");
var crb=$("#crb");
var clb=$("#clb");
clt.css('visibility','visible');
crt.css('visibility','visible');
crb.css('visibility','visible');
clb.css('visibility','visible');
clt.animate({top:offset.top-3, left:offset.left-3}, 150);
crt.animate({top:offset.top-3, left:offset.left+ctl.outerWidth()-4}, 150);
crb.animate({top:offset.top+ctl.outerHeight()-4,left:offset.left+ctl.outerWidth()-4}, 150);
clb.animate({top:offset.top+ctl.outerHeight()-4,left:offset.left-3}, 150);
});
$("input[type=text], input[type=password], textarea").blur(function(){
clt.css('visibility','hidden');
crt.css('visibility','hidden');
crb.css('visibility','hidden');
clb.css('visibility','hidden');
});
}
It´s super awesome effect!!! Try it :)