I've got a question concerning webkit marquee. I've got 2 elements of a variable width. (The 2 elements are the same width), and both elements need to be a marquee.
However when the content has overflow (is larger then the element) I need a marquee, if not the text should remain as it is (no scrolling).
I've created a JSFiddle as an example:
http://jsfiddle.net/Vxwed/:
The long and short both need to be marquee'd through CSS3, while the long should scroll and the short one doesn't.
<p class="long">Hi my name is John Doe</p>
<p class="short">Yeah!</p>
Remember, the contents of the elements are variable (filled with javascript), so I cant do actual hardcoding on the elements marquee-behaviour.
Any CSS experts here able to help me? I've been researching this a lot but there is little information about this subject, since it's relatively new.
The only solution that I'm able to think of right now is using jQuery to measure the width of the elements, and then calculate if they need extra spacing. If they need apply marquee, else don't. But that doesn't seem very clean to me, I'd rather do this in HTML/CSS only if possible.
This probably doesn’t do exactly what you want but it was a good problem to look at: http://jsfiddle.net/4hgd8ac1/
It uses CSS animations to animate the transform: translateX percentage as this is based off the width of the element itself. This means we can scroll an element it’s full width left. By then giving the marquee a minimum width we can standardise the shorter text lengths. Then we use calc(100% + 100px) move the item 100% left except the width of the carousel (100px).
It doesn’t quite have the traditional marquee feel with the text scrolling fully but using the animation keyframes it is possible to pause at the end of the text to give the user time to read.
p {
height: 30px;
width: 100px;
background-color: #CCC;
white-space: nowrap;
}
.marquee {
overflow: hidden;
position: relative;
}
.marquee__content {
padding: 5px 0;
margin-right: 100px;
position: absolute;
height: 20px;
animation: scroller 3s linear infinite;
min-width: 100px; /* This needs to match the width of the parent */
}
#keyframes scroller {
0% {
transform: translateX(0%);
}
/* ‘pauses’ the scroller at the start for 20% of the time, adjust to edit timing */
20% {
transform: translateX(0%);
}
/* ‘pauses’ the scroller at the end for 20% of the time */
80% {
/* Translate will use the width of the element so 100% scrolls it’s full length. add the width of the marquee to stop smaller items scrolling */
transform: translateX(calc(-100% + 100px));
}
100% {
transform: translateX(calc(-100% + 100px));
}
}
<p class="marquee"><span class="marquee__content">Hi my name is John Doe</span></p>
<p class="marquee"><span class="marquee__content">Yeah!</span></p>
Related
This question already has an answer here:
How to handle animations + automatic container size
(1 answer)
Closed 8 months ago.
Ive got a typewriter effect which prints a welcome headline with. So in the <div id="h1-id"></div> is
<h1 class="typewriter headline-welcome">Good Morning Admin.</h1>
created.
My problem is, that the headline container expands too whide, that the right border (border-right: .15em solid white;) is printed far away from the welcome headline. .
Ive tried to give it the display: inline property, but than the animation wouldnt start and is instantly expanded
I hope somebody of you might know why it expands at "maximum" width.
Im still pretty new to all this css and html so I hope to get some help here :D
css:
.typewriter {
overflow: hidden;
border-right: .15em solid white;
white-space: nowrap;
animation: typing 2s forwards;
font-size: 1.6rem;
width: 0;
}
#keyframes typing {
from {
width: 0
}
to {
width: 100%
}
}
html
<body onload="welcome('#User.Identity.Name')">
<div id="main" class="container">
<div id="h1-id"></div>
</div>
</body>
It's because divs are block elements by default: they will take up the entire width of the screen and push everything else to the next line.
You can make the div shrink to the width of it's contents by using
width: fit-content;
Moreover, h1 is also a block element by default, so animating it to width:100% is gonna make it take up the whole screen.
Change the keyframes to this:
#keyframes typing { from { width: 0 }
to {
width: fit-content;
}
}
And add width: fit-content; to your div as well.
I am trying to achieve an effect where I can diagonally crop an image in a way that is displayed below. I am aware of clip path as a solution but it would not be suitable in this scenario since it is not supported by certain browsers which are essential for this particular task. (IE and Edge)
Additionally, the cropped edge would need a black border which adds on to the complexity of what I am trying to do. Having searched for answers and coming up with anything, any suggestions would be appreciated.
Maybe you could overlay the image with a rotated element (div or something) that you give a border and white background. This solution would work if you're okay with a solid background color.
Another solution, depending on your requirements, could be to simpy use a .png image with transparency.
Yes you can, it's a bit tricky to get the sizes of the divs correct. But here's generally how to do it:
HTML:
<div id="outerwrapper">
<div id="innerwrapper">
<div id="content">
<span>asdf</span>
</div>
</div>
</div>
CSS:
#content {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(-60deg);
transform-origin: 50% 50%;
position: relative;
}
#content span {
position: relative;
top: 30px;
left: 30px;
}
#innerwrapper {
border-right: solid 3px black;
overflow: hidden;
width: 100px;
height: 100px;
}
#outerwrapper {
transform: rotate(60deg);
transform-origin: 50% 50%;
width: 120px;
height: 120px;
overflow: hidden;
}
Fiddle:
https://jsfiddle.net/ywfpeve8/
To explain this:
You have a div that contains the content itself. In this example it's just a span, but it can be anything. (I put it in to see that in the end everything is horizontal again)
You rotate that content div to some degree that suits you.
You place that div in a wrapper with a different size where you can position your content in. That div has an overflow: hidden, to crop all that content that is outside of the inner wrapper box. That wrapper then also has the border where you want the crop to be highlighted.
That inner wrapper is placed in an outside wrapper that rotates the same amount at the content div, but backwards, leaving you with the original 0 degree alignment of the content. This div again has overflow: hidden to crop that inner wrapper again so that you can hide the other "crop edges" that you want to be invisible. In my example code I didn't to the correct dimensions and positionings as it takes a bit to get right. But if you have an image with a white background, that shouldn't be very hard anymore to get things right.
Bonus: the background of the top-level element (that element that holds the outerwrapper can have any background at all and you won't see a rectangular box at the bottom right corner (for this example) as everything just happens with overflow: hidden and without bars that go over the content to hide it :)
I am have a table where I would like to be able to click on the table header row and that will collapse the rest of the table leaving only the header row (and expand back out). With a good deal of struggle I was able to get the table to actually change it's height on click, but haven't been able to get the animation to trigger. Here is the css that I have so far:
table {
height: 100%;
display: block;
overflow: hidden;
}
.collapsed {
animation-name: collapse;
animation-duration: 2s;
}
#keyframes collapse {
from { height: 100%; }
to { height: 40px; }
}
/* This is the javascript that is trigger on click */
this.refs.ruleslisttable.classList.toggle("ruleSetInfo__rule-list-table--collapsed");
The code above doesn't even trigger the new height when I toggle the class on the table, but has been my attempt at getting the animation in there.
You don't really need to do it with keyframe animation.
You could do it just by adding a transition rule to the table element, like this:
table {
height: 100%;
display: block;
overflow: hidden;
transition: height 2s ease-in;
}
.collapsed {
height: 40px;
}
What this does, is tell the browser to transition the height of the table from 100% to 40px and vice cersa over a duration of 2s with an ease-in function
For more info you can read the entry about the transition property at MDN
Cheers
UPDATE:
In your current setup I suppose the parent of the table element does not have a strictly defined height.
The way the percentage based height works is like this: The element gets the 100% of its parent height.
However when you do not specify a height for the parent, be it in px, em, rem, vh or what have you, the child with height: 100% is like having height: auto. Reference
And here is the actual problem: You cannot transition from auto to any other value, like %, px etc.
You can only transition from one defined value (!== auto) to any other defined value. e.g. from px to rem, etc
And this is why your transition is not working.
See this fiddle
I made. Play with the #cont element's height and see what happens.
So, in short: You will either have to give a strict height to your table, or, if you want to keep it percentage based, give a strict height to its parent element.
I have tried using
In HTML:
<img src="../Resources/title.png" />
In CSS:
img {
width: 200%;
height: 200%;
}
But this scales the images based on the parent tag the image is in. If an image is 150px by 150px I want to scale it to 300px by 300px. I want this to work for all images no matter their size or parent tag. And I only want to use CSS. ideas?
You can do this with the scale() 2D transform, but being one of the flashy new CSS3 features support is incomplete at this time and you need vendor prefixes:
img {
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
-webkit-transform: scale(2);
transform: scale(2);
}
However I don't believe this takes into account the flow of content, as transforms are done on individual elements and as such do not affect layout. See also the transform-origin property.
If you need good browser support, or you need the content to reflow properly, you'll have to make do with an alternative such as using JavaScript or restructuring your HTML, such that the width and height properties will scale it correctly and affect element flow in a natural way.
You can't using CSS < Version 3 only.
When you set the width/height on an element it is relative to it's container.
Update, as it's been quite some time since this answer was posted.
As a commenter points out, this can be achieved by simply using the zoom CSS property. However, it's not recommended, as it was first implemented solely by IE, in the IE6/7 days, and never formalized into the W3C standard. Instead, what's commonly used nowadays is a CSS transform using the scale function.
More on the scale() CSS function:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale
Example:
https://jsfiddle.net/2n5zLhz3/
You can enclose the image in a div and then set its size relative to the parent.
<style type="text/css">
.double{
display: inline-block;
}
.double img{
width: 200%;
}
</style>
<div class="double"><img src="../Resources/title.png"></div>
You can use min-width property on your image to force your width to be larger than its parent div, e.g.
.parent {
width: 300px;
height: 200px;
overflow: hidden;
}
img {
min-width: 200%;
/* center image */
margin-left: -50%;
height: auto;
}
<div class="parent">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bc/Information_example_page_300px.jpg" alt=""/>
</div>
You can double the image by taking the percent you need from window size.
p > img {
width:100%;
height:60vh;
}
"height:100vh;" means 100% from your browsing window.Just have to do the math.
Use the width 110%, because it is in a div and there was extra space.
img {
height: 400px;
width: 110%;
}
I have vertically rotated span element with some text in it:
span{
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
height: 100%;
}
.container{
width: 40px;
height: 500px; /* <- this can change */
}
How can I make it so the spacing between the letters of the text from the span changes depending on the container's height? Basically I want the text to span over the entire height of the element...
...somewhere, in a javascript file far far away...
$(".container").each(function(idx, el) {
$(el).css("letter-spacing", calculateSpacing(el, $(el).height()));
});
You can use the plugin found here, which contains the calculateSpacing function, albeit it works on width, not height (so some modification may be necessary):
http://heychinaski.com/jquery/js/jquery.charjustify.js
I think you can't do it without javascrit, because sizes in % use width but not height.
Write a script that divide the height of the element by the number of chars inside and set it as letter-spacing.