I'm aware there are other questions relating to "show more" and "show less", but this is specifically looking at font size. I'm hoping this will be obvious to a javascript whizz (which I'm not!). I'm trying to set the font size of the "More" and "Less" part of the code (see fiddle). I assumed I'd do this in the CSS by adding a font-size like below, but this has no impact. Does anybody know what needs to be added/modified? Please note I'm not looking for the code to be Jquery, but pure JS like the Fiddle.
.hidden {
display: none;
font-size: 5px;
}
See JSFiddle
You need to fix your fiddle a lot, but to get the font size of your more/less links to be smaller create a class called small and assign it to the A TAG.
https://jsfiddle.net/z10rL3xw/2/
.hidden {
display: none;
}
.small {
font-size: 5px;
}
and put that class in the A link, in the span it is not doing anything for you the way you have things laid out.
You also have some issues in "shrinkables" code: your class for hidden is in a span for more and in the A tag for less. There are a lot better ways to execute that part of your code. Hope this font fix helps, but overall you should check the more/less examples from this stack post: show more/Less text with just HTML and JavaScript
Related
Okay so I've been making website for my mom's business and stumbled onto an interesting thing I can't really find difference on, right now, since website is still in early development.(tried googling but no help)
So basically my question is:
What is the difference in css(and html) between;
container a:hover;
and
container:hover;
I mean it shouldn't be any different. In both cases, as long as there is only <a></a> type used like here, it will apply to everything:
#name of the button
The thing is here:
.nav-link-wrapper:hover {
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover {
color:black;
}
Why do I have to specify a that is within the class, to apply color, when I don't have to for manipulating borders.
Sry if it was asked. This is more of a beginner's question and I can't find anybody who already asked this.
If you set color in .nav-link-wrapper:hover, it will not affect since a tag has its own style. So in order to add style for that a tag, you will need to specify a.
If you see why you have to explicitly use a color property for your a tag is because of the Browser specific color property being applied on it. color and text-decoration is applied to it explicitly as shown in the image snippet below:-)
And that is true only with color property not with any other property. In the code snippet below I am setting font-size for the body and it is applied on the a tag.
body{
color:orange; /* Parent Not applied */
font-size:2rem; /* Applied to Child*/
}
<body>
Test Link
</body>
I made a carousel slider(copied the code from some codepen then made some changes) and it looks something like this. Anyway the problem is that those images have hyperlinks that work unless i make a transform on x axis..for lets say 240px the hyperlinks stops working. What i mean by that its that its unclickable.
This is the structure of the html code.
I made a script that adds style = "transform:translateX(-240px); to the carousel div.
Expected behaviour: the hyperlink should pe clickable.
You can find the code at: https://github.com/AlexxW/AlexxW.github.io
and the webpage at https://watchwhatmovie.tk/ (for some reason its not updated yet)
Try posting code instead of images for better answers.
this question similar to - CSS - Transform function not working on links?
you need to make the link (i.e <a> tag) CSS to display: block; because transform doesn't work on display: inline; (which is default for a tag).
Because no css was provided, maybe the z-index is not correct (the layers). Try this:
.card {
position: /* set this to relative/absolute, depending on your preference */;
z-index: 1;
}
I have been having some trouble centering some items on my website.
The items in question are in the passphrase generator (images and text elements in the dark box). I have tried the usual margin:auto, all the different display properties, text-align, align-self, align-content and align-items. None worked.
I was also wondering if anyone knew how we could get the text element under our images isntead of to the right, this is the code used for the generator.
All help is appreciated
A p tag is a block element, so the default width is 100%. This is why you have one element per line
#passphraseBilder {
text-align: center;
display: block;
}
#passphraseBilder p {
display: inline-block;
}
Turn the p tag into inline or inline-block, and it will work ;-)
Have a look to the difference between block and inline: https://www.w3schools.com/html/html_blocks.asp
Try this:
#passphraseBilder {
display:inline-block;
width:100%;
}
Note: I have just added the properties which you should add or overwrite. Existing properties has to be there.
My question has three parts
Part 1: To show an animated image caption for a image (this part is done as in the example row one http://jsfiddle.net/JBnbG/32/ )
Part 2: Show center part of youtube hqdefault.jpg thumbnail image in a div of 150x150 dimension (This part is also done as second row in the example)
Part 3: I want to integrate the part 1 & part 2 features in to part 3. problem is that caption works but the image is not alined in center as show in second row of the example.
Example is in http://jsfiddle.net/JBnbG/32/
I cant change structure otherwise it wont work caption part work properly
I would appreciate if some can help to fix the issue with keeping the HTML structure intact
I guess my question is, are you loading the example html dynamically from youtube, or just the images?
If the html is yours, it's a simple styling adjustment.
I forked it on jsfiddle , I think this is what you mean.
Not quite sure what happened to the styling, but I set the image
id="ContentPlaceHolder1_rptVideos_imgVideo_1" style="height:auto; width:200px;margin-left:-25px;"
or, another way is:
left:-25px; position:relative;
Which btw, all these styles should be declared as a class in you stylesheet.
If you're loading the html dynamically, I commented out the javascript that achieves the same thing.
Depending on what you're working with, if using php, you might want to get a script that will auto crop to the appropriate size. Timthumb.php is the most notable one, although there's a security issue that will never be fully bulletproof, although pretty solid as is.
Cheers!
Check this working code: http://jsfiddle.net/surendraVsingh/JBnbG/39/
Changes to be done in CSS:
.VideoContainer > span {
display: block;
}
.VideoContainer > span > img {
display: inline-block;
margin-left: -60px;
margin-top: -25px;
}
I'm using sifr for the first time today. I have it up and running; however, I need some help. Rather than explain, I'll show you the code below:
<div id="pullquote">“Fantastic property, facilities and location. We
couldn’t have asked for more!” <em>Mr & Mrs. Smith</em></div>
So far, so good. I have then styled that in the same document in case flash/JavaScript is disabled. No problem.
sIFR.replace(journal, {
selector: 'div#pullquote',
wmode: 'transparent',
css: [
'.sIFR-root { text-align: center; color: #be7705; font-size: 30px; background-color:#fdefd4; }',
'em { font-style: normal; color: #1d5d69; font-size: 26px; }']
});
That's what is included in my JavaScript file. Am I correct in styling the element like this? I got slightly confused with the selector, then using a second selector within js-css. Once again, there is also sifr.css. What should be included in this document? Should I be styling the element here?
I suppose my question is: What should be included, and what styling should be done in sifr-config.js and what styling should be done in sifr.css?
Thank you :)
In the CSS for the HTML page (sifr.css) you can add a style to hide the elements that sIFR will replace before does so, and you can do some tuning of the text so the text size maps better to the Flash font.
The selector parameter for sIFR.replace() is used to select the elements you wish to replace by sIFR.
The css parameter contains the CSS used inside the Flash movie. At this point, all CSS selectors are relative to the element you replaced, so if you replace an h1#foo, then you select em rather than h1#foo em. This is the only place you can style the text inside the Flash movie, aside from font size, which, if not specified here, is derived from the font size of the replaced element.