I have used an iframe to scale up my webpage. The problem is the scrollbar for my iframe does not allow me to scroll down the whole page. I am only able to view half of my page. How do I increase or change the size of the scrollbar slider so that I am able to scroll further down my page?
Here is my code:
CSS:
#wrapper {
width: 100%;
height: 100%;
padding: 0;
overflow: scroll;
}
#scaled-frame {
width: 100%;
height: 100%;
border: 0px;
}
#scaled-frame {
zoom: 1.30;
transform-origin: 50% 0%;
-moz-transform: scale(1.30);
-moz-transform-origin: 50% 0%;
-o-transform: scale(1.30);
-o-transform-origin: 50% 0;
-webkit-transform: scale(1.30);
-webkit-transform-origin: 50% 0%;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#scaled-frame { zoom: 1;
}
}
HTML:
<body bgcolor="#000000">
<div id="wrapper"><iframe id="scaled-frame" src="videos_large.html"></iframe></div>
</body>
Try changing your transform-origin styles.
my approach would be to remove the overflow of the #wrapper, and instead apply the overflow to the #scaled-frame like so:
#wrapper { width: 100%; height: 100%; padding: 0; overflow: hidden; }
#scaled-frame { width: 100%; min-height: 100% height: auto; border: 0px;overflow: hidden; overflow-y:scroll;}
Try overflow: scroll; in CSS.
HTML Markup
<iframe class="iFrameScroll"><\iframe>
CSS
.iFrameScroll {
overflow: scroll;
}
You shouldn't have this problem with iframe, unless there is a wrong code has been writing.
Thank you all, I will try your solutions. I have made the wrapper bigger than the scaled frame, which seems to have done it for now, but I will give your solutions a go.
Related
here I have a little problem I have a little level in javascript and I would like the page of my portfolio to scroll horizontally from a place in the dom how should I do it is a can complicate putting everything I did here is my portfolio:
https://portfolio-rdw.000webhostapp.com/
For you to see what I want but I want to do it in javascript vanilla no jQuery or others just Js and here is the css code to successfully do this:
(sorry for my English I am French)
#container .box {
width: 100vw;
height: 100vh;
display: inline-block;
position: relative;
}
#container .box>div {
width: 100px;
height: 100px;
font-size: 96px;
color: #FFF;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
line-height: .7;
font-weight: bold;
}
#container {
overflow-y: scroll;
overflow-x: hidden;
transform: rotate(270deg) translateX(-100%);
transform-origin: top left;
background-color: #999;
position: absolute;
width: 100vh;
height: 100vw;
}
#container2 {
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
white-space: nowrap;
font-size: 0;
}
.one {
background-color: #45CCFF;
}
.two {
background-color: #49E83E;
}
.three {
background-color: #EDDE05;
}
.four {
background-color: #E84B30;
}
You can use scrollIntoView function on a DOM element to scroll to it.
I took a look at your site structure and you can do something like below.
Just keep in mind to give each link the href attribute linking to the section id.
const navbar = document.querySelector('.navbar-nav');
navbar.addEventListener("click",function(e){
if(e.target.tagName==="A"){
e.preventDefault();
try{
const href = e.target.getAttribute("href");
var section = document.querySelector(href);
section.scrollIntoView({behavior: "smooth"});
}catch(e){
console.log(e)
}
}
})
Hope this helps!
in fact I expressed myself badly I want my portfolio to scroll vertically and arrived at the section 'Experiences' that it goes horizontally when I scroll as with the css below but I want to do that with js only thank you for to have taken time anyway.this is not at the "click" event but by scrolling that it changes in the "Experiences" section thank you
Simple animation that changes the transform origin of a div based on horizontal mouse position.
It is not displaying the animation in Safari 12.1. Instead the div is stuck displaying the transform origin it had on page load (resizing the browser seems to update it).
The script is spitting out the correct values onto the element and no errors are showing up so need some help getting it animating.
It is working in latest Chrome, Firefox and Safari 11, just the latest Safari that is broken.
$(document).mousemove(function(getCurrentPos){
var xCord = getCurrentPos.clientX;
var xPercent = xCord/window.innerWidth * 100 + "%";
document.getElementById("p-beam").style.transformOrigin = xPercent + "100%";
});
.beams {
display: block;
position: relative;
overflow: hidden;
height: 600px;
background-color: #434343;
}
.p-beam {
position: absolute;
left: 0;
top: -360px;
right: 0;
bottom: auto;
width: 100px;
height: 360px;
margin-right: auto;
margin-left: auto;
background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#eef));
background-image: linear-gradient(180deg, transparent, #eef);
-webkit-transform: perspective(360px) rotateX(-104deg) rotateY(0) rotateZ(0);
transform: perspective(360px) rotateX(-104deg) rotateY(0) rotateZ(0);
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
box-sizing: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="beams">
<div id="p-beam" class="p-beam"></div>
</div>
This looks like a bug.
I could get it working by changing the innerHTML/innerText of the bean, I think that way it forces layout/paint.
I'm concerned that the area you're paint is maybe too big, even if this is a bug, this could be too expensive and you're hitting the limits of the renderer. But this is just speculation.
I know it is not the same, but maybe you could accomplish something visually similar with just transform: rotate() or maybe transform: matrix()
const beam = document.getElementById("p-beam");
let i=0;
setInterval(()=>{
i=(i+1)%100;
const x = `${i%100}% ${100}%`
beam.style.transformOrigin = x;
beam.innerHTML = i;
//console.log(x)
}, 16);
.p-beam {
position: absolute;
left: 0;
top: -360px;
right: 0;
bottom: auto;
width: 100px;
height: 360px;
margin-right: auto;
margin-left: auto;
background: yellow;
transform: perspective(360px) rotateX(-104deg) rotateY(0) rotateZ(0);
transform-style: preserve-3d;
box-sizing: border-box;
}
<div class="beams">
<div id="p-beam" class="p-beam"></div>
</div>
I have to show a list of image, but since a lot of them have a portrait aspect ratio I want to be able to show the images with smaller heigth, but not stretched, and when the user click them they will expand... I was able to do it changing the max-height, but the transition on mobile are very bad, so I want to use transform and scaleY to improve performance. The problem is that the image get stretched.
For example if this is the image, normal:
I want to make it to look like this, stretched:
And when the user click it the image return to the initial state.
This is my current code:
CSS
.card img, .card video{
width: 100%;
vertical-align: middle;
border-radius:2px;
object-fit:cover;
will-change: max-height,height;
transition: max-height 0.4s ease;
}
HTML
<div class="card">
<div>
<img src="image.jpg"/>
</div>
</div>
And then in Javascript I simply set maxHeight of the img in onclick event.
Thank you!
Here is my code
.image_container img {
margin: 0 auto;
object-fit: cover;
position: absolute;
top: 54%;
left: 50%;
width: auto;
height: auto;
max-height: none;
max-width: none;
min-height: 100%;
min-width: 100%;
-webkit-transform: translate(-50%, -50%);
vertical-align: middle;
}
I'm trying to get a full page (with nav at the top, but I don't mind the background going underneath it) zoom-out effect. However, I want it to execute once all assets are loaded, as it is the first thing seen when the page is loaded. So I wouldn't want it being executed early otherwise it may not even be seen or just the end of it would be caught.
I have seen several examples but I've had problems with them:
Animating (with jQuery) the background-size property - this made the animation 'choppy' and I read somewhere it was probably because it was being run on the CPU rather than the GPU.
Demo: https://jsfiddle.net/njj43kz4/
HTML
<body>
<div id="front"></div>
</body>
CSS
html {
width: 100%;
height: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
#front {
position: relative;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
background-size: 110%;
}
JavaScript
$('#front').animate({ backgroundSize: '100%' }, 1000);
Using a setTimeout as shown in this previous question's answer: Slight background zoom on DOM load? - this worked smoothly, however I cannot get it working when I change the width and height values to 100%. The image starts oversized before zooming out, but the oversized view is shown. I want the fixed 100%x100% view, and no extra scaling visible. I tried overflow: hidden but that isn't hiding the overflow. You can see this is happening as the scrollbars are appearing and ruining the effect.
Demo: http://jsfiddle.net/eHAuh/15/
HTML
<body>
<div id="front" class="scaled"></div>
</body>
CSS
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
#front {
position: relative;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
background-position: 50% 50%;
overflow: hidden;
}
.animatable {
-webkit-transition:all 750ms ease-out;
transition:all 750ms ease-out;
}
.scaled {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
JavaScript
$(document).ready(function () {
$('#front').attr('class', 'animatable');
setTimeout(function () {
$('#front').removeClass('animatable');
}, 1000)
});
Any help would be great, and I hope the layout of this question is ok. I couldn't work out how to indent paragraphs without turning them into code indents. Thanks for reading and have a nice day.
Edit 1: The way this will execute when loaded is because the jQuery/JavaScript is in the $(window).load.
Edit 2: There was an answer suggesting to use keyframes, however these do not support IE9 and this would be preferable.
You can do it with css #keyframes if you want using scale
I have used pseudo class for adding background
/** after page has loaded*/
$(window).bind('load', function() {
$('#front').addClass('active')
})
html {
width: 100%;
height: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
#front {
position: relative;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
overflow: hidden;
}
#front:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
background-size: cover;
transform: scale(2);
}
#front.active:after {
animation: animation 5s;
/* change the value 5s to what you want */
animation-fill-mode: forwards;
/* added so that it doesn't return to its original state which is scale(2)*/
}
#keyframes animation {
0% {
transform: scale(2);
}
100% {
transform: scale(1)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="front"></div>
As per your requirements it looks like you require this
/** after page has loaded*/
$(window).bind('load', function() {
$('#front').animate({
width: '100%',
height: '100%'
}, 5000);
})
html {
width: 100%;
height: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#front {
position: relative;
top: 0;
width: 200%;
height: 200%;
opacity: 1;
background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="front"></div>
in css change
#front
position: fixed;
or for body add
overflow: hidden;
I'm using Bootstrap and WordPress.
I've been researching how to horizontally and vertically align an image inside a div (classic problem, apparently). I used the answer to this question to vertically align my image: How to vertically align an image inside div
Now I need to horizontally align it. I know to do that, you normally add margin: 0 auto;
The problem is that the method that I followed uses margin:auto; and it undos the vertical align if I change it to margin:0 auto;
I started to make a JSFiddle of the problem, but I couldn't replicate it. So I think it's something in Bootstrap that is overriding it, but I'm not sure what.
Here is the basic code I'm using from the vertical align solution on the other stackoverflow question:
HTML
<div class="crop-featured-2">
<img src="image.png">
</div>
CSS
.container {
position: relative;
width: 100%;
overflow: hidden;
}
.crop-featured-2 {
height: 100px;
width: 200px;
position: relative;
border: 1px solid red;
padding: 5px;
display:block;
}
.crop-featured-2 img {
min-height: 100px;
width:100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border:0px;
padding:0;
}
You can see the problem at http://ucaftercruz.com/upcoming/?page_id=30. It's the slider at the top and the problem is in the .carousel-inner div. Resize the browser to around 800px wide to be able to really see the issue.
Thanks so much in advance!
I had a look at your web page. I think the issue solves it self if you just remove the width rule from this selector:
.crop-featured-2 {
height: 320px;
width: 575px;
position: relative;
}
instead use
.crop-featured-2 {
height: 320px;
position: relative;
}
Try this
.crop-featured-2 {
position: relative;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}