I have some content which can have only specific height (no more), and I added some scroll on that content.
This is my CSS:
.value {
max-height: 60px;
overflow-y: auto;
color: black;
font-size: 16px;
}
/* width */
.value::-webkit-scrollbar {
width: 3px;
}
/* Track */
.value::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgb(163, 163, 163);
border-radius: 5px;
}
/* Handle */
.value::-webkit-scrollbar-thumb {
background: linear-gradient(60deg, #b95aca, #8c15ad);
border-radius: 5px;
}
And This is my Subtitle content:
<div
class="value"
*ngIf="courseData.sub_title"
> {{courseData.sub_title}}
</div>
This is the image:
So, when I want to scroll down or up using mouse wheel it's scrolling too much and user can not be able read full text (part of text was going up or down with scrolling).
How can I change scroll step?
Hello Stack Overflow,
I am a photographer building an html website, so excuse my ignorance. I am looking to use an image as a button that reveals a set of text on click. I can't seem to find a way to do this without having a button over the image. Is there an easier way? or perhaps is there another word other than "button" that I am lacking in searching for this?
Update:
I again apologize for my ignorance, I feel I lacked clarity in my question. I used a toggle/reveal button on my page and I want the text to start hidden so that the photograph reveals the text,rather than removes it.
See site:
http://lyonswork.com/
You can use several options, 1 option is to use the css :hover state. This allows the user to hover over the image and then reveal a text.
Have you tried onclick attribute on img tag. If it works then you just have to write your javascript code.
I suppose you are looking for something like that ?
(just click on figure element to show / hide text over image)
const myImage = document.querySelector('#my-image')
;
myImage.onclick =()=>
{
myImage.classList.toggle('noCaption')
}
figure#my-image {
position: relative
}
figure#my-image img {
width: 500px;
height: 300px;
border: 1px solid grey;
padding: 2px;
}
figure#my-image figcaption {
position: absolute;
bottom: 3px;
left: 3px;
display: block;
width: 492px; /* 500 - (2*4) */
padding: 4px;
color: white;
background-color: rgba(0, 0, 0, 0.5);
}
q {
display: block;
text-align: center;
}
cite {
float: right;
}
figure#my-image.noCaption figcaption {
display: none !important;
}
<figure id="my-image" class="noCaption">
<img src="https://picsum.photos/500/300" alt="something revelant" />
<figcaption>
<q>A people who do not read is a risk for democracy</q>
<cite>Fréderic Paulin</cite>
</figcaption>
</figure>
OR
const myImage = document.querySelector('#my-image');
myImage.onclick=()=>
{
myImage.classList.toggle('noCaption')
}
figure#my-image {
width: 506px;
}
figure#my-image * {
display: inline-block;
box-sizing: border-box;
width: 100%;
}
figure#my-image img {
border: 1px solid grey;
padding: 2px;
margin: 0;
}
figure#my-image figcaption {
padding: .4em 0 .3em 0;
color: white;
background-color: rgba(0, 0, 0, 0.5);
}
q {
text-align: center;
}
cite {
width: 100%;
padding : .7em .5em 0 0;
text-align: right;
}
figure#my-image.noCaption figcaption {
display: none !important;
}
<figure id="my-image" class="noCaption">
<img src="https://picsum.photos/500/300" alt="something revelant" />
<figcaption>
<q>A people who do not read is a risk for democracy</q>
<cite>Fréderic Paulin</cite>
</figcaption>
</figure>
I tried to develop one submenu under "Share registry operations" named as "Insider...". But I am getting only partial submenu getting displayed.
URL: http://sampledemos.online/gnsa/
I tried with the below CSS codings.
.menulist ul ul li a {
height: 30px;
line-height: 30px;
border-bottom: solid 1px #90d4e9;
font-size: 12px;
display: block;
width: 170px;
float: left;
margin-left: -23px;
}
I'm trying to create a submenu named "Insider..." under "share registry operations.
Try this code..
css
.menulist ul ul {
left: 227px;
clip: inherit !important;
opacity: 1 !important;
}
Add below to your CSS. Your javascript sets a bad clip path, probably due to negative margins. You might want to look closer into that aswell.
#listMenu-id-2 {
clip: inherit!important;
}
I am making a Ruler scale using html, css, js, whose length is supposed to be fixed always. On clicking the scale, between any two bars, a prompt will be generated and the user will then input a number which signifies the no. of sections by which the scale length (between any two bars) will be divided in equal parts and get displayed on it.
e.g. if initially the scale is |_____|_____|_____| , then on clicking 2nd bar and entering divide by 2, the scale should look like|_____|__|__|_____|
I referred to the following link for making the ruler:
How to make a ruler scale in HTML and CSS
But in the answer given in the above link, the user has to manually change the value of the "data-items" attribute, to make different no. of sections every different time, and also, on changing its value, the overall size of the scale also increases, which contradicts my case.
This is what I have coded so far and I really don't know how to split any bar on user input without changing the overall length.
https://jsfiddle.net/yoshi2095/pvjhLggz/9/
HTML:
<div>
<ul class="ruler" data-items="10"></ul>
</div>
CSS:
.ruler, .ruler li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
/* IE6-7 Fix */
.ruler, .ruler li {
*display: inline;
}
.ruler {
background: lightYellow;
box-shadow: 0 -1px 1em hsl(60, 60%, 84%) inset;
border-radius: 2px;
border: 1px solid #ccc;
color: #ccc;
margin: 0;
height: 3em;
padding-right: 1cm;
white-space: nowrap;
}
.ruler li {
padding-left: 1cm;
width: 2em;
margin: .64em -1em -.64em;
text-align: center;
position: relative;
text-shadow: 1px 1px hsl(60, 60%, 84%);
}
.ruler li:before {
content: '';
position: absolute;
border-left: 1px solid #ccc;
height: .64em;
top: -.64em;
right: 1em;
}
/* Make me pretty! */
body {
font: 12px Ubuntu, Arial, sans-serif;
margin: 20px;
}
div {
margin-top: 2em;
}
JS:
function inputNumber() {
var inputNum = prompt("Divide by");
$("a").attr("data-items",inputNum);
}
$(function() {
// Build "dynamic" rulers by adding items
$(".ruler[data-items]").each(function() {
var ruler = $(this).empty(),
len = Number(ruler.attr("data-items")) || 0,
item = $(document.createElement("li")),
i;
for (i = 0; i < len; i++) {
ruler.append(item.clone().text(i + 1));
}
});
});
Any help would be greatly appreciated. Thanks.
The website I am building has 4 large background images that take up the entire height and width of the user's browser. They are implemented as CSS background divs. The problem is, when scrolling on larger screen sizes, it is very laggy and choppy. Scrolling between these images is done automatically via JavaScript when the user presses a button, so this is part of the core functionality of my website and I must find a way to prevent lag.
So far, I have tried preloading the images via JS and converting the images from PNG to JPEG (increase compression and decrease quality) server-side. Neither of these worked.
The minimum height of the image can be 630 pixels. How can I prevent lag while scrolling between sections?
Here's my code:
CSS:
body { height: 100%; margin: 0px; font-family: HelveticaNeue, Helvetica, Arial, sans-serif; }
.area { height: 630px; border: 0px solid red; background: repeat-x; margin-bottom: 0px; }
a { text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: Av, Helvetica, Arial, sans-serif; color: #292E37; font-weight: lighter; }
#top { position: fixed; width: 100%; height: 10%; background: #292E37; box-shadow: inset 0px -1px 5px #000; z-index: 1000; }
#navigation { float: right; height: 100%; }
#bottom { width: 100%; position: fixed; bottom: 0px; padding: 10px; background: #292E37; box-shadow: inset 0px 1px 5px #000; text-shadow: 0px 1px 0px #000; color: #fff; }
#sceneSelection { top: 20%; position: fixed; padding: 10px; }
#info { margin-top: 50px; margin-bottom: 50px; }
.box { margin-top: 50px; padding: 75px; background: #292E37; box-shadow: inset 0px 1px 5px #000; text-shadow: 0px 1px 0px #000; color: #fff; }
.nav { position: relative; top: 38%; height: 100%; margin-right: 35px; display: inline-block; color: #fff; text-shadow: 0px 1px #000; }
.nav:hover { color: #EA5555; }
.nimage { float: left; width: 16px; height: 16px; position: relative; top: 5%; left: -20%; }
.home { background: url(site_images/icons/nav/home.png); }
.pricing { background: url(site_images/icons/nav/pricing.png); }
.features { background: url(site_images/icons/nav/features.png); }
.blog { background: url(site_images/icons/nav/blog.png); }
.contact { background: url(site_images/icons/nav/contact.png); }
.about { background: url(site_images/icons/nav/us.png); }
.logo { font-size: 2em; text-shadow: 0px 1px #000; padding-top: 10px; padding-left: 15px; color: #EA5555; font-family: Av, Helvetica, Arial, sans-serif; }
.red { color: #EA5555; }
.white { color: #fff; text-shadow: 0px 1px 0px #000; font-weight: bold; }
.dark { color: #202020; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.larger { font-size: 1.25em; }
.buttoni { -webkit-border-radius: 2px; -moz-border-radius: 0px; border-radius: 4px; background: #ddd; display: block; color: #ccc; font-size: 14pt; height: 50px; text-align: right; margin: 10px; cursor: pointer; color: #505050; }
.buttoni:hover { background: #EA5555; color: #fff; }
.btext { padding: 15px; position: relative; top: 25%; }
.groundi { background: url(ground_button.png); }
.skyi { background: url(sky_button.png); }
.stratospherei { background: url(stratosphere_button.png); }
.spacei { background: url(space_button.png); }
.image { height: 50px; width: 50px; float: left; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
li { color: #EA5555; }
li span { color: #505050; }
HTML:
<div class="space area" id="a4">
</div>
<div class="stratosphere area" id="a3">
</div>
<div class="sky area" id="a2">
</div>
<div class="ground area" id="a1">
</div>
JavaScript:
function scroll_to(id, speed, margin) {
$('html, body').animate({
scrollTop: $('#' + id).offset().top - margin
}, speed);
}
function match_height() {
var heights = [11, 630, 693, 756, 819, 882, 945, 1008, 1071, 1134, 1197, 1260, 1323, 1386, 1449, 1512, 1575, 1638, 1701, 1764, 1827, 1890, 1953, 2016, 2079, 2142, 2205, 2268, 2331, 2394, 2457, 2520];
var browsery = $(window).height();
var i = 0;
while(browsery > heights[i]) {
i++;
}
var h = heights[i];
$(".area").css("height", h + "px");
$(".area").css("width", "100%");
$(".ground").css("background", "url(scenes/ground/" + h + ".png)");
$(".sky").css("background", "url(scenes/sky/" + h + ".png)");
$(".stratosphere").css("background", "url(scenes/stratosphere/" + h + ".png)");
$(".space").css("background", "url(scenes/space/" + h + ".png)");
}
match_height();
var pos = 0;
$(".buttoni").click(function() {
var id = $(this).attr("id");
if(pos != id) {
scroll_to("a" + id, 2000, 0);
}
pos = id;
});
OP,
For browsers that support 3d transforms, e.g.: -webkit-transform, you could try the following:
your.div { -webkit-transform: translate3d(0,0,1px); }
Might not look like much, but doing the above causes the div in question to be hardware-accelerated.
Should you run into any flickering issues—they've been known to turn up in some cases—the following should sort you out:
your.div {
-webkit-transform: translate3d(0,0,1px);
-webkit-backface-visibility: hidden;
}
Via David Walsh - http://davidwalsh.name/translate3d
The use of translate3d pushes CSS animations into hardware acceleration. Even if you're looking to do a basic 2d translation, use translate3d for more power! If your animation is still flickering after switching to the transform above, you can use a few little-known CSS properties to try to fix the problem
Hope that helps.
As per my understanding, the issue and the solution drafted in the OP is two-fold:
initially, within the match_height() function, the OP author retrieves the images that best fits the screen height, so that upon completed animation the user sees one full background image.
after initial load, the user can navigate up and down the sections (with their respective background images) with the help of some buttons that trigger the scroll_to() function and its contained animation. Here is where the actual problem resides.
My efforts and the resulting fiddle focus on the scroll_to() function and the associated animation. I applied the following measures that, in conjunction, result in a (as per my subjective observation) 'smoother' scolling experience:
the original animation happened against 'html' and 'body', I'm reducing the jQuery selector to one selector only. In order to be able to use jQuery 1.9 (where jQuery.browser is deprecated) I'm using feature detection to get the 'right' selector:
function getScrollerSelector() {
var $body = $("<body/>");
$body.scrollTop(1);
return $body.scrollTop() == 1 ? "body" : "html";
}
In order to reduce the browser's processing load, I'm applying a logic that, per CSS, sets the background image of invisible sections to none during scrolling:
.scrolldown.scrollto-a2 #a1,
.scrolldown.scrollto-a3 #a1, .scrolldown.scrollto-a3 #a2,
.scrolldown.scrollfrom-a3 #a4,
.scrolldown.scrollfrom-a2 #a4, .scrolldown.scrollfrom-a2 #a3,
.scrollup.scrollto-a3 #a4,
.scrollup.scrollto-a2 #a4, .scrollup.scrollto-a2 #a3,
.scrollup.scrollfrom-a2 #a1,
.scrollup.scrollfrom-a3 #a1, .scrollup.scrollfrom-a3 #a2
{ background: none; }
I played around with linear easing, but that did not necessarily improve anything
All in all, scrolling doesn't seem choppy to me any more, but please take into account that this is also dependent on the client computers processing power.
Here's the scroll_to() function:
function scroll_to(id, speed, margin) {
var currentScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var scrollTop = $('#' + id).offset().top - margin;
var direction = scrollTop > currentScrollTop ? "down" : "up";
$("body").addClass("scroll"+direction + " scrollto-"+id + " scrollfrom-"+getScrollFrom(direction));
$( scrollerSelector ).animate({
scrollTop: scrollTop
}, {
//easing: 'linear',
duration: speed,
complete: function() {
$("body").removeClass("scrollup scrolldown scrollto-a1 scrollto-a2 scrollto-a3 scrollto-a4 scrollfrom-a1 scrollfrom-a2 scrollfrom-a3 scrollfrom-a4");
}
}
);
}
This is the link to jsfiddle
Since you are Scaling up the image, you can tell the Browser how to handle the rendering of image.
During the animation / scrolling, you can tell browser to Optimize on Speed and on completion of Animation / scrolling, Optimize on Quality.
Here is the CSS Property you can use on img: 'image-rendering' with values as optimizeSpeed / optimizeQuality.
https://developer.mozilla.org/en-US/docs/CSS/image-rendering
One thing you could do to images is smush it using http://www.smushit.com/ysmush.it/
this reduces the size of the image without loosing quality removing all unwanted meta data.
Testing locally it seems like your code should work ok, I have firefox 15 and chrome and don't see any lagging
What if you try this for the scroll to method?
function scroll_to(id, speed, margin) {
$('html, body').animate({
scrollTop: $('#' + id)
}, speed);
}
I had a similar problem with a website I was working on. In the end the problem seemed to be because of the large dimensions of the image that the computer/browser had to compute and render on screen.
My recommendation would be to try and reduce the amount of image that needs to be shown and scrolled on screen if possible.
Most modern browsers now support hardware (graphics card) rendering instead of the traditional (usually slower) software based (CPU) rendering. Hardware based rendering should in theory reduce that lag you're experiencing. However if your PC only has base or average graphics rendering capabilities, you're not going to have much success regardless. I personally had no success with either in Chrome, FireFox or IE until I gave in and removed the images.