Good morning evening or afternoon,
Not too long ago I made some code that takes the fourth .item of the carousel and gives it a new class.
Owl Carousel: How to change the size of the fourth item
Now I'm trying to make the selected .item bigger than the rest and centered using CSS with no luck.
This is the reference I'm working with :
Reference Design:
I've tried using `display: flex` and `flex-grow:1`<br>
and `position:relative` `position:absolute` too.
any idea on how to tackle this?
Thanks :D
.your-item {
transform: scale(1.1);
transform-origin: 50% 50%;
}
should fix your problem. Obviously, you want to change scale factor from 1.1 to whatever makes sense for your example.
If you want the transform origin to be at the bottom, use transform-origin: 50% 100%;
Related
a client wants his old menu in his website re-design I should make for him. It looks like this:
Curved Menu
I tried some code with svg etc but I didn't get it to work.
Is it even possible to make a navigation/menu like this responsive?
Maybe you can help me out with a little hint or something. Would be glad about it!
Thanks in advance.
Yes, you could use the SVG. Then, you could set its z-index higher, this way you will bring it to front in page. The menu will have a z-index lower than the SVG. Each item of menu will have a transform: translateY() moving it up. So you will position each of them differently. Lastly, you will modify the height of each item in order to compensate the transform displacement.
Like this:
.item1 {
transform: translate(-20px);
height: 100px;
}
.item2 {
transform: translate(-40px);
height: 120px;
}
.item3 {
transform: translate(-60px);
height: 140px;
}
Hope it helps.
I have implemented a "push-in menu" mobile menu to a very basic site structure.
The menu is based on http://callmenick.com/post/slide-and-push-menus-with-css3-transitions
For some odd reason, when I click on the "Push right" button the menu has a large margin to the right. I am not sure why this is happening or how to fix it. It works fine in IE11 but not in Chrome v52.
An example of the problem can be found here: http://seyoum.net/playground/1/
I have tried to use the DevTools to pinpoint any CSS or markup that may cause the problem without any luck.
What is causing this and how can I fix it?
This is what it should look like and what it looks like in IE 11:
And this is the problem and what it looks like in Chrome:
You've set your main wrapper to move -300px in the CSS, but you only want your menu to move. Remove this...
.overlay-wrapper.has-push-right {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
#media all and (min-width:320px) {
.overlay-wrapper.has-push-right {
-webkit-transform: translateX(-300px);
-ms-transform: translateX(-300px);
transform: translateX(-300px);
}
}
A jsFiddle (free tool) would be nice next time, I used your link to make one here. It does make it very much easier to answer questions. People who click on the question can look, solve, and test the solution quickly to make sure they really made a valid correction.
Turns out, I forgot a closing tag for the #page. I am so embarrassed. I shall check my markup thoroughly next time.
The reason for the blank space is that you have the following CSS rules (prefixed variants omitted for brevity):
.overlay-wrapper.has-push-right
{
transform: translateX(-300px);
}
.push-menu--push-right.is-active
{
transform: translateX(0);
}
.push-menu--push-right
{
transform: translateX(300px);
position: absolute;
width: 300px;
right: 0;
}
The last set of rules places the menu "to the right" of the container. The second rule resets the translate, and puts it back inside the container. The first one moves the whole thing to the left.
Remove the second one and you should be all set.
Before I begin, I have looked through the other questions relating to this topic on SO. The reason I'm writing another question is because my site will load using jQuery animations and it just doesn't seem to work the same as if I was just animating the height automatically.
I personally think it's something to do with me having the CSS height set to auto in the css. Anyway, I would like the website (when it loads) to animate to height auto, rather than a set height at the moment. I have tried getting the scrollHeight and animating it to that value, but there is no animation for 3-4 answers I tried.
Currently i'm using:
$(".portfolio").animate({height:"590px"});
and my .portfolio css is
.portfolio {
width: 0px;
height: 0px;
max-height: 600px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
It may be found of interest that the height of the .portfolio IS 0 until I animate the .row (inside of .portfolio) because the .row has display set to none.
In basic terms I need to get the auto height of an element (.portfolio) even though there is no visible content (making the auto on page load) set to 0 because of the hidden element.
OPACITY INSTEAD OF DISPLAY: NONE WILL NOT FIX THIS. I NEED THE HEIGHT OF .PORTFOLIO TO BE 0 ON PAGE LOAD.
If I can post anything else to make it easier, please let me know
I tried the answers relating to question:
JavaScript jQuery Animate to Auto Height
You can view the site at: http://conorreid.me/portfolio/
I really hope it's okay to post the site link. I felt this question was hard to explain why I needed this, hopefully you'll see.
EDIT:
I duplicated the .portfolio element and renamed it portfolio-2, I set it to absolute and z-index: -100, and opacity to 0 (with height of auto). I then tried getting the height of this element (558 on my monitor) and setting .portfolio to this height
var el = $('.portfolio-2'),
curHeight = el.height(),
autoHeight = el.css('height', 'auto').height();
$(".portfolio").height(curHeight).animate({height: autoHeight}, 1000);
But now i'm just unsure why this isnt working... I'm actually using
<script>alert($(".portfolio-2").css("height"))</script>
to alert to me the height, and i'm getting 264 on my monitor resolution, however after the page has completely loaded and I type $(".portfolio-2").height() I get 592 like I should do..
After over an hour trying to find a fix here it is:
I duplicated the .portfolio and everything inside it, I set it's opacity to 0 and z-index to -1000 so no elements in side where hoverable/selectable which would trigger a jQuery hover effect.
Finally to fix me getting a horrible height mistake (as the images hadn't rendered when I loaded the page, giving me a false answer of 40%~ correct value I changed
$(document).ready(
to
$(window).load(
Now It's responsive =D
I have a question about forming elements to form a circle, or align elements to form a circle, depending how you like it to be pronounce, now back to question:
There are couple of examples here on stackoverflow and on the internet regarding this question but any off these examples do not cover Bootstrap 3 responsive align elements to form a circle, I would like if someone can make an example out of mine working JSFiddle example (text needs to be a center of the circle, because I need to animate it), and make this using bootstrap grid system.
Is this possible, can you please explain to me how you do this so I can learn something out of this.
TL;DR; http://jsfiddle.net/k7yxtpc7/
Edit with (very long?) explanation:
So we start off with a bootstrap's hierarchy:
<div class="container-fluid">
<div class="row">
<div class="circle_container col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
</div>
</div>
</div>
The planetary of images will be put inside .circle_container. Our aim is to make sure the whole circle will respond to .circle_container's width changes and adapt correctly. This way any change Boostrap makes to the container will be reflected on the circle itself, making it Bootstrap-compliant.
First we have to prepare .circle_container a bit. Since it's a whole circle the container must be square-ish. We must find a way to make .circle_container's height to be always equal to its width. I do this by putting a square img inside .circle_container, then scale the img's size according to the container's width:
<div class="circle_container ...">
<img class="transparent_square" src="http://i.stack.imgur.com/5Y4F4.jpg" width="2" height="2" />
</div>
.transparent_square{
width: 100%;
height: auto;
}
Note: I couldn't find a transparent square image on the web, so I had to make do with a white square. In your product a 2pxx2px transparent image is best.
Great, now we have a square container. But we've put a limiter on ourselves too. From now on, the img must be the only child of .circle_container that have a static (default) or relative position, because any further child will extend the container, destroying the square shape. Not a big deal though, since we'll position other children absolute anyway.
Next up is the central text bubble:
<div class="central_text text-center">
<h3>Special for you</h3>
<h5>Lorem ipsum</h5>
</div>
.central_text{
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
The translate trick make use of the fact that percentile value in css transform use the element's pre-render width & height, while all other positioning rule use its parent's width & height instead. By giving the element left: 50%; top: 50% we put its top left corner at the center of its parent, then we translate it up and to the left by 50% of its own width and height, effectively centering the element within its parent. This is only 1 of several methods to center an element within a container, but it fits our situation best because the element is absolutely positioned.
Finally we reach the part where we create the circle. To sum up the trick here: we put the actual image inside a container, which has a pivot point at the center of the container, and position the image off to 1 side of the container equal to the radius of the circle. This way when we rotate the image's container, the image will be moved in a circle around the center of the container, like a drawing compass. After the image has reached our desired position, we rotate the image itself by the same degree in the other direction to compensate for the tilt in orientation, making the image upright again.
The container and image:
<div class="moon_container moon1"><img class="moon moon1" src="http://letscode.ghost.io/content/images/2015/09/stackoverflow.png"></div>
.moon_container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 20%; /* This is the final width of the image */
}
I set the width for .moon_container as 20% of .circle_container's width. This will be the width of the images in our final circle. Increasing or decreasing this number simply change the size of the image to your desire.
Now to offset the image from its container:
.moon{
width: 100%;
height: auto;
/* The image can be relative positioned without breaking anything because its parent is absolute */
position: relative;
/* The radius of the circle. This is equal to 175%*20% = 35% of .circle_container's width */
left: 175%;
}
Note that CSS's left use an element's direct parent's width as base unit. If you changed .moon_container's width in the previous part, the actual distance of the images will change as well.
Finally, rotations (I use moon2 as the example here because moon1 doesn't need to rotate):
/* Container rotate 45deg clockwise... */
.moon_container.moon2{
/* 360/8 (the number of images) = 45deg */
transform: translate(-50%, -50%) rotate(45deg);
}
/* ... while the image rotate 45deg counter-clockwise */
.moon.moon2{
transform: rotate(-45deg);
}
Why transform: translate(-50%, -50%) rotate(45deg); and not transform: rotate(45deg);? Because we declared transform: translate(-50%, -50%); earlier for the .moon_container (the centering trick). If we only write transform: rotate(45deg); here, the CSS parser will override the previous rule with the new one, losing the translate part. So we have to append manually.
Repeat the process to all 8 images and we're done!
If you have undetermined number of images, simply use javascript to calculate this rotation part for each image.
I hope my explanation was useful for you. I've always been bad at explanation...
Edit 2: http://jsfiddle.net/k7yxtpc7/3/ Text change on hover version as per OP's request. There's only 1 thing to note in this part, that is
$("body").on({
mouseenter : function(event){
...
},
mouseleave : function(event){
...
}
}, ".moon");
It is good habit to bind all events on either 'body' or document, instead of binding them on the actual elements itself (the .moon). This way you:
Always use only 1 event listener for the hover event, instead of 8 (you can imagine how the number scale up on an actual product).
When you add more images later, you don't have to bind the event on the new .moon again.
Original Answer:
As the requirement is rather vague, I couldn't know if my solution would satisfy you. My solution is based on 3 assumptions:
The entire planetary of images are only based on view port width, similar to how Bootstrap handle its responsive design. If you want to take view port height into consideration maybe I can conjure up another version.
The images are scaled based on the Bootstrap container's width, in order to make sure there's enough space to display all images.
Typography uses Bootstrap's defaults.
The solution avoid using javascript at the cost of not being able to add/remove images on-the-fly. If a dynamic number of images is your intention, I will put calculations in.
Sexy animations compatible.
Unfortunately Bootstrap's center-block only center a block horizontally, I had to make use of the translate trick to center the pivot point.
.central_text{
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
This is only an answer placeholder. I will write detailed explanation once we have a satisfactory solution.
I recently found a codepen with some JavaScript which creates a cool looking node effect: http://codepen.io/thetwistedtaste/pen/GgrWLp
as well as this 'glitch' effect on text using #keyframes animation:
http://codepen.io/anon/pen/YyjLJZ
I wanted to implement both on my practice website but I'm finding it hard to place the text on top of the canvas with the animation.
Here is what I have at the moment:
http://codepen.io/anon/pen/EVeVvE
What I want to achieve is the 'TEXT' to be in the centre with the glitch animation as well as the moving nodes in the background.
Is this possible?
I've tried adding a z-index to the wrap class but I don't think I'm using it correctly.
Here's what it looks like:
margin: 0 auto;
text-align: center;
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
Do I need to add a z-index to every frame of the animation? Would anyone be able to help me out with this please?
Without using the z-index, the animation works fine but the text appears at the bottom of the page which is where I don't want it to be.
This works in the latest versions of Safari and Chrome, however the clip property is deprecated and may not work in certain browsers. clip-path should be used instead, and it will need vendor prefixes. See this CodePen for a demo.