I'm making a site with a lecture on. The lecture is divided into chapters. Each chapter has it's own link and when clicked a new video loads an external html get loaded into a text window. I need these links to stay active, so that ppl know what chapter they're on.
Here's my current html:
<li>chapter1</li>
<li>chapter2</li>
..and so on..
Now, this works perfectly.. As I said, I need the links to stay active, and tried adding an addClass(this)
I.E:
onclick="javascript:loadContent('#pres','chapter2.html');changeVideo('chapter2');addClass(this)">...
function addClass(obj)
{
obj.className="active";
}
This doesn't work. I've also tried removing everything but the addClass function with no luck.
Any ideas?
function clickChapter(type, page, chapter){
loadContent(type, page);
changeVideo(chapter);
removeAllClass();
addClass(ocument.getElementById('id_'+chapter));
}
function removeAllClass(){
var aAnchor = document.getElementsByTagName('A');
for(var i=0; i<aAnchor.length; i++){
aAnchor[i].className = '';
}
}
<li>chapter1</li>
<li>chapter2</li>
You could try this...
first create a Cascaded style sheet(CSS) and in it write the code like :
a:active {
color: #006600;
font: 12px Verdana, Arial, Helvetica, San-serif;
text-decoration: none;
}
or
a:visited {
color: #006600;
font: 12px Verdana, Arial, Helvetica, San-serif;
text-decoration: none;
}
or
a:link {
color: #006600;
font: 12px Verdana, Arial, Helvetica, San-serif;
text-decoration: none;
}
then paste this code in the head of your html page:
<link type="text/css" href="<Path of the CSS>.css" rel="stylesheet"/>
Related
I'm trying to create a website of about five pages for a project using HTML, CSS, and Javascript.
I've created a font family button using all three languages.
The role of this button is to change the font family of the entire website when the button is pressed.
It's not working, and nothing happens when I press the font button on my website.
function fontfamily() {
document.body.classList.toggle("textstyles")
}
body.textstyles {
font-family: Arial, Helvetica, sans-serif;
}
<button type="button" onclick="fontfamily()">Font</button>
<p>Example text</p>
Try out this. Button needs to be given a font-family: inherit style to inherit it's style from it's parent (which is body) instead of taking a style from user style sheet.
function fontfamily() {
document.body.classList.toggle("textstyles")
}
body.textstyles {
font-family: Arial, Helvetica, sans-serif !important;
}
button{
font-family: inherit;
}
<button type="button" onclick="fontfamily()">Font</button>
function fontfamily() {
document.body.classList.toggle("textstyles")
}
body.textstyles {
font-family: Arial, Helvetica, sans-serif;
}
<button type="button" onclick="fontfamily()">Font</button>
!!! hello world !!!
lorem elum ipsum ....
you need to add some text and its working ???
I have a custom font with code like this -
#font-face {
font-family: 'classylight';
url : 'some path';
font-weight:normal;
}
I want to set some values exclusively for this font everywhere on the site like letter spacing, word spacing, and other styles. I wanted to reduce unneccessary process, and looked for attribute=style property.
I tried -
body [style="font-family:classylight"] {
letter-spacing:50px;
word-spacing:-20px;
}
It's not working. Can anyone help? I would like to use only 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;
}
Unike text color and size, You can't change letter spacing and word spacing using attribute=style property. You should either change them while creating by changing pen width or you should change them in body of css.
Use rem and em for all the letter spacing, word spacing, etc.
And for the font-weight, it is because the initial declaration is overwriting your own font-weight.
you might find this useful i guess.. this are the common most use css text property
<h1 style="
text-align: center;
font-size: 25px;
color:#FF0000;
font-family: Arial Black,Arial,Helvetica,Verdana,Trebuchet MS,Comic Sans MS,sans-serif;
font-style: normal;
font-weight: 1000;
background-color: #D3D3D3;
line-height: 3;
">TEST 123</h1>
also about your question "font-weight:bold" not working perhaps it being overwritten by other value such as < h1 > which make text already huge...
So you can't really use letter-spacing in font declarations. What you could do however, is create a class which has the letter spacing you want, and then add the class to the HTML element. Like so:
#font-face {
font-family: 'Roboto';
url : 'https://fonts.googleapis.com/css2?family=Roboto:wght#400&display=swap';
font-weight: normal;
}
#font-face {
font-family: 'Open Sans';
url : 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap';
font-weight: normal;
}
.roboto-norm{
font-family: 'Roboto';
font-weight: normal;
}
.roboto-norm-ltr-spc{
font-family: 'Roboto';
font-weight: normal;
letter-spacing: 0.25em !important;
}
.opensans-norm{
font-family: 'Open Sans';
font-weight: normal;
}
.opensans-norm-ltr-spc{
font-family: 'Open Sans';
font-weight: normal;
letter-spacing: 0.25em !important;
}
<label class="roboto-norm">Normal roboto letter spacing</label>
<br><br>
<label class="roboto-norm-ltr-spc">Custom roboto letter spacing</label>
<br><br>
<br><br>
<label class="opensans-norm">Normal open sans letter spacing</label>
<br><br>
<label class="opensans-norm-ltr-spc">Custom open sans letter spacing</label>
As for the font-weight: normal part, what you're doing with the #font-face rule is that you're declaring the font. It's basically a variable of sorts, which you'd then be referencing when styling the HTML elements. The weight of the font is part of that.
The snippet below should make it clearer. What I've done is that I've imported 2 styles of the Roboto font, the first being of regular weight, aka 400, and the other of bold weight, aka 700.
#font-face {
font-family: 'Roboto';
url : 'https://fonts.googleapis.com/css2?family=Roboto:wght#400&display=swap';
font-weight: normal;
}
#font-face {
font-family: 'Roboto';
url : 'https://fonts.googleapis.com/css2?family=Roboto:wght#700&display=swap';
font-weight: bold;
}
*{
font-family: 'Roboto';
}
#normal{
font-weight: normal;
}
#bold{
font-weight: bold;
}
<label id="normal">normal font</label>
<br><br>
<label id="bold">bold font</label>
I am trying to change font-family and font-size of my CodeMirror editor. I tried changing it by setting the according CSS attributes but it does not seem to work for me:
.codemirror-textarea {
font-family: Arial, monospace;
font-size: 16px;
}
Do I have to import something in order to achieve this or might I have to edit the libraries CSS file directly? What am I doing wrong?
Try setting the CSS on:
.CodeMirror {
font-family: Arial, monospace;
font-size: 16px;
}
This selects the element that contains all the formatted code.
Just to follow-up on the accepted answer, the version of CodeMirror I'm using (5.55.0 at the time of posting) requires a wildcard:
.CodeMirror * {
/* ^
*/
font-family: Arial, monospace;
font-size: 16px;
}
Or add an extension
const customTheme = EditorView.theme({
'&': {
font:"'JetBrains Mono', monospace",
}
})
const startState = EditorState.create({
doc: page.text,
extensions: [
customTheme,
// ...
]
})
Or, like this if you want to do it from JavaScript:
editor.getWrapperElement().style["font-size"] = size+"px";
editor.refresh();
This my element that I want to select in jquery
.box3 span.info:before{
content:"15 vacatures";
margin:0;
padding:0 0 28px 0;
font-family: 'MaisonNeueMono';
letter-spacing: normal;
font-weight: normal;
font-size: 12px;
text-transform: uppercase;
position:relative;
}
I tried this but it just doesn't select it, also doesn't work with just putting ".info":
So how do I select this element?
$(".box3 span.info:before").hover(function(){
$(".box3 h1").fadeOut();
});
Remove the :before,it is just the css part , it is not rendered with element, it is just use to add css before the element.
you just need to write this:
$(".box3 span.info").hover(function(){
$(".box3 h1").fadeOut();
});
The pseudo element before is not part of the selector, just leave it out:
$(".box3 span.info").hover(function(){
$(".box3 h1").fadeOut();
});
Additionally you may want to separate the style & content insertion like this:
.box3 span.info {
margin:0;
padding:0 0 28px 0;
font-family: 'MaisonNeueMono';
letter-spacing: normal;
font-weight: normal;
font-size: 12px;
text-transform: uppercase;
position:relative;
}
.box3 span.info::before{
content:"15 vacatures";
}
You do not need psuedo selector here. you need to use:
$(".box3 span.info").hover(function(){
$(this).closest('.box3').find('h1').fadeOut();
});
You can't select pseudoelements with jQuery as those are not real DOM objects thus are not existing in jQuery context.
That said your :before pseudoelement can't be selected with jQuery.
If you need more explanation search on SO, example:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery
I'm very much a beginner when it comes to Javascript and would appreciate any help you can give! I'm creating a feature box on my home page where three headlines will share one picture spot. I've found a script that changes the image when the headlines are rolled over, but it's hard to tell when the page opens that the first headline goes with the first picture. How do I get my hover style to appear already selected, and then stay with the last headline that was rolled over, so it's apparent what headline goes with the photo showing? Here's my example
Here's the code I'm using:
HOVER STYLE:
a.feature:hover {
font-size: 0.9em;
font-family: "trebuchet ms", Arial, Helvetica, sans-serif;
color: #b0171f;
font-weight: bold;
background-image: url(../zimgart/nav/bgfeature.jpg);
background-repeat: no-repeat;
text-decoration: none;
padding: 5px 0 5px 10px;
display:block;
}
JAVASCRIPT:
<script>
/*Rollover effect on different image script-
By JavaScript Kit (http://javascriptkit.com)
Over 200+ free scripts here!
*/
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("photos/feature1.jpg",
"photos/feature2.jpg",
"photos/feature3.jpg")
</script>
Generally you should do such thing with JS code, simplest of course would be to use jQuery. With jQuery it would look like this:
$(document).ready(function(){
$('A.feature').mouseover(functiond(e){
$('A.feature').removeClass('a_hover');
$(this).addClass('a_hover');
$('#bigimage').attr('src',$(this).attr('rel')); // big image effect, just example
})
});
I assume that A-links have attribute rel='bigimageulr'.
To install jQuery just put in header:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>