I would like to take the contents of an HTML page, an make every element 50% larger. I have tried using CSS3 zoom: 150% but this also attempts to zoom pictures. Because the resolution of the images were originally crafted for a normal view, they look blurry with the zoom.
Is it possible to make all HTML bigger, except for the images?
When you apply a scale transformation to an element, the magnification is applied to the element itself and to all of their children. This is a behavior common to most browsers, with the exception of IE (I believe).
So, to do what you want, you need to scale only the following elements:
elements that are not img and do not contain any img descendants
By using jQuery
$("button").click(function () {
$("*").each(function (index, value) {
var $this = $(value);
// if this is not an image
if (!$this.is("img") &&
// and if it does not contain child images
$this.find("img").length == 0) {
// then scale it up
$this.css({
'-webkit-transform': 'scale(1.5)',
'-moz-transform': 'scale(1.5)',
'-o-transform': 'scale(1.5)',
'-ms-transform': 'scale(1.5)',
'transform': 'scale(1.5)'
});
}
});
});
You can see it live here
you can also use
$this.css('zoom', '1.5');
instead of
$this.css({
'-webkit-transform': 'scale(1.5)',
'-moz-transform': 'scale(1.5)',
'-o-transform': 'scale(1.5)',
'-ms-transform': 'scale(1.5)',
'transform': 'scale(1.5)'
});
try transform: scale(1.5); This should help
A crude way of doing it would be to have:
body {
zoom: 150%;
}
img {
zoom: 67%
}
That will not rescale background images or other non-img elements, so it's not ideal.
Related
I have a background image set to loop infinitely on a 10 second CSS animation. I'm using jQuery to find the height of the image based on the users screen size. Then I use background-position-y and go from 0 to exactly the height of the image. This creates a smooth loop, for any desktop screen size (A separate bg image will be used for mobile).
Issue: On page load, the animation appears to not work correctly on the first iteration of the loop. The image pans slowly for 10s, "jumps" back to the original position, then works correctly for all future iterations of the loop.
Looking for help on how to make the first animation loop, the first 10s to work how it should/like the remaining loops and the path appears to be infinite.
JS Fiddle: https://jsfiddle.net/bennimbl/7xkyhgz2/3/
View the fiddle, note it's slowness for 10 seconds, then note it works correctly after then.
The problem is the starting set up of the background image.
There is a bit of a mixture in this code. It seems as though an attempt was made to use CSS keyframes for the animation and that this was then abandoned and JS/jquery used instead on a timeout.
This snippet simplifies things by getting rid of JS/jquery animation and going back to the keyframes (this can in any case help CPU usage).
The code already sets a CSS variable --height to the height of the current viewport so this is used in the keyframes to move the background image from a top position of 0 to a top position of -this height.
There was a spurious : after animation in the CSS set up which has been removed.
The only other change that has been made is to set the background image to top 0 from the start rather than at the bottom of the viewport.
var fullhdWidth = 1920;
var fullhdHeight = 2685;
var fullhdRatio = fullhdWidth / fullhdHeight;
$('#s1Bg').ready(function() {
var containerWidth = $(this).width();
var containerHeight = $(this).height();
var containerRatio = containerWidth / containerHeight;
var realWidth = null;
var realHeight = null;
if (containerRatio > fullhdRatio) {
realWidth = containerWidth;
realHeight = containerWidth / fullhdRatio;
//alert(realWidth + ' ' + realHeight);
} else {
realWidth = containerHeight * fullhdRatio;
realHeight = containerHeight;
//alert(realWidth + ' ' + realHeight);
}
$('<style>').text(`:root{--height: ${realHeight};}`).appendTo(document.head);
$("#s1Bg").css({
'width': '100vw',
'height': '100vh',
'margin': '0',
'background': '#000000 url("https://iili.io/sVrZXe.jpg") 0% 0%/cover repeat-y',
'animation': 'rideup 10s linear infinite'
});
});
body {
margin: 0;
}
#keyframes rideup {
from {
background-position-y: 0;
}
to {
background-position-y: calc(-1px * var(--height));
}
}
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
</head>
<div id="s1Bg" class="s1-bg"></div>
I've made a little change on your css and gotime function to start at the realHeight and then animate to background-position-y: 0. I moved some css to the css file to since it didn't belong in the js file. Though i couldn't really figure out why it didn't worked out in the previous fiddle it does in this one
JS:
$("#s1Bg").css({
'background-position-y': realHeight,
'animation:' : 'rideup 10s linear infinite'
});
var gotime = function() {
$('#s1Bg').animate({
'background-position-y': 0,
}, 10000, 'linear', function() {
$(this).css('background-position-y', realHeight);
gotime();
});
}
CSS:
#s1Bg {
height: 100vh;
width: 100vw;
margin: 0;
background-image: url('https://iili.io/sVrZXe.jpg');
background-size: cover;
}
Here's the layout I'm trying to achieve:
My content currently is a series of basic, block HTML elements (h[1-5], p, ul, etc.) contained in a div, and if possible I'd like to keep them that way. All of the images are inside their own p in order to responsively resize
I've been able to add a div style="float:right" to the top of the content which creates the sidebar and wraps "normal" text content around it - specifically the first paragraph in my diagram above. However, the img, which is set to 100% does not wrap, it flows below the sidebar.
So really, I want images to have one of two widths - either 100%-width(sidebar) if the top of the image "should be" above the bottom of the sidebar, or 100% if the top of the image is below the bottom of the sidebar.
I can of course manually set the width on an image when debugging a page, to a value less than 100%-width(sidebar) and it jumps right up into place, so clearly the browser knows what that size is to not "push" the image down below the sidebar...
Here's the actual page where I'd like to get this to work; note that the first image is below the sidebar:
https://adventuretaco.com/?p=3655&draftsforfriends=kIq7mVDhNtCSklITGCJs2HAcE9xuPX8d
additionally, here is the CSS and HTML that I currently have for the post content:
CSS
p {
margin: 0 0 1.25em 0;
}
ol, ul {
margin: 0 1.5em 1.25em 1.5em;
}
.full-width-container {
width: 100%;
}
.full-width-container img {
display: block;
margin-left: auto;
margin-right: auto;
overflow: hidden;
transition: 0.5s;
}
.full-width-container img.flickrPhoto {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
transition: 0.5s;
}
HTML
<div class="post-content">
<p>As you may recall, we'd just cancelled our flight home due to the unknowns of Covid-19, but were still in exploration mode as we entered the Valley of Fire State Park in southeastern Nevada.</p>
<p id="photoContainer132" class="full-width-container"><img id="photo132" class="flickrPhoto" src="https://live.staticflickr.com/65535/49714173358_d19b1c2e70_n.jpg" /></p>
<p>Our trip to the Valley of Fire was somewhat opportunistic to say the least. A year before this trip ever even crossed my mind, I'd seen a photo on Flickr that had caught my eye. Sharp as ever, I completely forgot to save the photo or a link to the photo <img src="https://www.tacomaworld.com/styles/default/my/smilies/annoyed_gaah.gif" />, but - luckily for me - the photo had been geotagged <em>and</em> I'd saved a point of interest in my Google Earth map of Nevada. I'd noticed that point as I'd planned this trip, and mapped out the route, excited to see what nature had in store. So yeah, apparently, I'm not <em>always</em> as dumb as I look. <img src="https://www.tacomaworld.com/styles/default/my/smilies/original/wink.png" /> In researching Valley of Fire, I also discovered a second hike -rumored to have petroglyphs - and since it was on our way to the main attraction, we decided to stop off there first.</p>
<p id="photoContainer133" class="full-width-container"><img id="photo133" class="flickrPhoto" src="https://live.staticflickr.com/65535/49715029457_a61cffc61b_n.jpg" /></p>
</div>
I think you first need to downsize a little your images, due to their size, it becomes a little difficult to manipulate them within the scope of what you would like to do. You can alter them inside the tag, or from the css file. Then after, you can use inside of that code a "float: left;" in the .full-width-container img, give it a margin that should put them side to side.
OK, so after a bunch more research, trial and error, I've come to the conclusion that the answer to this question is that it cannot be solved with CSS / layout alone.
In the end, incorporated Javascript to solve the problem. It's not perfect - if images have been downsized to flow around the sidebar, then when the browser window gets larger, they don't get larger as ideally as they could.
Here's where I ended up; working sample at (scroll down here to see the sidebar)
https://adventuretaco.com/hidden-valleys-secret-tinaja-mojave-east-5/#photoContainer190
// start shortly after page is rendered
setTimeout(resizeImagesForFacebookEmbed, 500);
function resizeImagesForFacebookEmbed() {
var tryAgain = true;
// find each of the elements that make up the post, and iterate through each of them
var content = jQuery('div.post-content').children().each(function () {
if (this.tagName.toLowerCase() == 'p') {
var firstChild = this.firstChild;
var firstElementChild = this.firstElementChild;
if (firstChild != null && firstChild == this.firstElementChild && firstElementChild.tagName.toLowerCase() == 'img') {
var pRect = this.getBoundingClientRect();
var imgRect = firstChild.getBoundingClientRect();
var difference = imgRect.top - pRect.top;
// if the image contained in the p is not at the top of the p, then make it smaller
// so it will fit next to the embed, which is 350px wide
if (difference > 25 || imgRect.width < (pRect.width - 400)) {
var sidebarLeft = document.getElementById("fbSidebar").getBoundingClientRect().left;
var imgLeft = firstChild.getBoundingClientRect().left;
var imgWidth = (sidebarLeft - imgLeft) * .95;
firstChild.style.width = imgWidth + "px";
tryAgain = false;
setTimeout(resizeImagesForFacebookEmbed, 1000);
} else {
// do nothing
}
}
}
});
if (tryAgain)
setTimeout(resizeImagesForFacebookEmbed, 1000);
}
var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout(timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
// handle window resize event to re-layout images
jQuery(function () {
jQuery(window).resize(function () {
waitForFinalEvent(function () {
resizeImagesForFacebookEmbed();
}, 500, "atFbEmbedId"); // replace with a uniqueId for each use
});
});
Hi I just added Google's No CAPTCHA reCAPTCHA to my website, and I am running into a small little issue. It does NOT fit on my mobile website, and that is a HUGE issue. I have tried everything such as:
HTML
<div id="captchadisplay">
<div class="g-recaptcha" data-sitekey="???"></div>
</div>
CSS
#captchadisplay {
width: 50% !important;
}
and
CSS
.g-recaptcha {
width: 50%;
}
Yet I can not seem to shrink it down for my mobile website. Any ideas? :)
By using the CSS transform property you can achieve changing the width by changing the entire scale of the reCAPTCHA.
By adding in just two inline styles, you can make the reCAPTCHA fit nicely on your mobile device:
<div class="g-recaptcha"
data-theme="light"
data-sitekey="XXXXXXXXXXXXX"
style="transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;">
</div>
More details can be found on my site: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/
I successfully implemented Geek Goddess' solution. The main issue with it is that it may not work on all browsers. Now, however, there is a simple solution provided by Google.
With reCAPTCHA version 2.0, there are new rules for the display of the widget and Google added tag attributes that change the way it is rendered.
The tag data-size can take the values of "normal", which is the default, and "compact", which fits in mobile device screens. This is what the compact widget looks like.
It is not the best looking widget, but it fits with less work than the other solutions.
For more attributes, check Google's reCAPTCHA v2.0 documentation
I have been using some JQuery, since putting transform(0.77) in the style attribute wasn't a truly responsive solution.
I add this media query in my CSS, with the max-width being the threshold where the ReCaptcha box is considered too large once passed:
#media(max-width: 390px) {
.g-recaptcha {
margin: 1px;
}
}
I then add this JQuery:
$(window).resize(function() {
var recaptcha = $(".g-recaptcha");
if(recaptcha.css('margin') == '1px') {
var newScaleFactor = recaptcha.parent().innerWidth() / 304;
recaptcha.css('transform', 'scale(' + newScaleFactor + ')');
recaptcha.css('transform-origin', '0 0');
}
else {
recaptcha.css('transform', 'scale(1)');
recaptcha.css('transform-origin', '0 0');
}
});
The 304 I use is the default width of the ReCaptcha box if unstyled.
Now the ReCaptcha will properly scale down no matter how small its parent container becomes, and it will behave as if it has a maximum width at its original width.
Note that the media query is simply a mechanism to detect a screen size change.
According to the documentation from Google shows a data-size attribute which can be set and this worked for me.
<div class="g-recaptcha" data-sitekey="XXXXXXXX" data-size="compact"></div>
But, the answer from #GeekGoddess provides a little more flexibility in sizing.
For me the compact mode implementation of Google re-captcha 2.0 is just lame. It looks ugly.
Just expanding from "Geek Goddess" solution.
You can do the following:
<div class="g-recaptcha" data-sitekey="..." style="-moz-transform:scale(0.77); -ms-transform:scale(0.77); -o-transform:scale(0.77); -moz-transform-origin:0; -ms-transform-origin:0; -o-transform-origin:0; -webkit-transform:scale(0.77); transform:scale(0.77); -webkit-transform-origin:0 0; transform-origin:0; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.77,M12=0,M21=0,M22=0.77,SizingMethod='auto expand');"></div>
That will resize on almost all browsers IE, Chrome, FF, Opera (DXImageTransform is for IE <= 8).
Furthermore we can make it responsive by combining this transform scale with CSS max-width.
It's not the perfect way, but until we get the proper responsive fix from Google.
If you don't like the CSS solution, you may try the JS.
The idea is to dynamically switch between compact and normal mode of the recaptcha plugin.
I will provide an example with jQuery onboard, but it shouldn't be much to port it to pure JS.
I assume you have following HTML code on the site.
<div>
<div class="g-recaptcha" data-sitekey="[your-key-here]"></div>
</div>
Firstly you need to load gRecaptcha 2 explicitly and provide onload callback:
<script type='text/javascript' src='https://www.google.com/recaptcha/api.js?hl=en&onload=recaptchaCallback&render=explicit'>
Next, create your callback function which will also be your javascript media query.
function recaptchaCallback()
{
var mq = window.matchMedia("(max-width: 400px)");
mq.addListener(recaptchaRenderer);
recaptchaRenderer(mq);
}
The last thing is to render the recaptcha widget.
function recaptchaRenderer(mq)
{
var recaptcha = $('.g-recaptcha').eq(0);
var data = recaptcha.data();
var parent = recaptcha.parent();
recaptcha.empty().remove();
var recaptchaClone = recaptcha.clone();
parent.append(recaptchaClone);
recaptchaClone.data(data);
var options = {
'sitekey': data['sitekey'],
'size': 'compact'
};
if(!mq.matches)
{
options['size'] = 'normal';
}
grecaptcha.render(recaptchaClone.get(0), options);
}
You may wonder why I empty the div and clone all the g-recaptcha content. It's because gRecaptcha 2 wouldn't let you render second time to the same element. There could be a better way, but it's all I found for now.
Hope this works for you.
<div class="g-recaptcha" data-theme="light" data-sitekey="XXXXXXXXXXXXX" style="transform:scale(0.77);transform-origin:0 0"></div>
Just add style="transform:scale(0.77);transform-origin:0 0"
For who might be interested, I changed a little AjaxLeung solution and came up with this:
function resizeReCaptcha() {
if ($(".g-recaptcha").length) {
var recaptcha = $(".g-recaptcha");
recaptcha.parent().addClass('col-xs-12 padding0');
var innerWidth = recaptcha.parent().innerWidth();
if (innerWidth < 304) {
var newScaleFactor = innerWidth / 304;
recaptcha.css('transform', 'scale(' + newScaleFactor + ')');
recaptcha.css('-webkit-transform', 'scale(' + newScaleFactor + ')');
recaptcha.css('transform-origin', '0 0');
recaptcha.css('-webkit-transform-origin', '0 0');
} else {
recaptcha.css('transform', 'scale(1)');
recaptcha.css('-webkit-transform', 'scale(1)');
recaptcha.css('transform-origin', '0 0');
recaptcha.css('-webkit-transform-origin', '0 0');
}
}
}
$(window).resize(function() {
resizeReCaptcha();
});
$(document).ready(function () {
resizeReCaptcha();
});
Here's my spin on the resize:
<script>
function resizeReCaptcha() {
var width = $( ".g-recaptcha" ).parent().width();
if (width < 302) {
var scale = width / 302;
} else {
var scale = 1;
}
$( ".g-recaptcha" ).css('transform', 'scale(' + scale + ')');
$( ".g-recaptcha" ).css('-webkit-transform', 'scale(' + scale + ')');
$( ".g-recaptcha" ).css('transform-origin', '0 0');
$( ".g-recaptcha" ).css('-webkit-transform-origin', '0 0');
};
$( document ).ready(function() {
$( window ).on('resize', function() {
resizeReCaptcha();
});
resizeReCaptcha();
});
</script>
Unfortunately, NoCaptcha uses an iframe so at most you can control the height/width and use overflow:hidden; to cut off the excess. I would not recommend cutting off more than a few pixels of the Captcha for best usability.
Example:
.g-recaptcha {
max-width: 300px;
overflow: hidden;
}
On my site the re-captcha was getting cut off and looked bad.
After some experimentation I was able to fix the cutoff issue with this style update:
<style>
.g-recaptcha>div>div>iframe {
width: 380px;
height: 98px;
}
</style>
Hope you find this useful
#media only screen and (max-width : 480px) {
.smallcaptcha{
transform:scale(0.75);
transform-origin:50% 50%;
}
}
<div class="g-recaptcha" data-theme="light" data-sitekey="your site key" style="transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;"></div>
This working for me, you try it..
<div class="g-recaptcha" data-theme="dark"></div>
I am working on a site and I don't want to repeat the background in the y direction.
I know how to do that.
But after the image I don't want background to becomes white or any other color.
I would like it to fix when it reaches that place or to let the background scroll slower then the rest of the site so I wont get to a white part.
Thanks a lot
I found this thread while I was looking for a solution to just this problem. I managed to write a short jQuery script adapting the hints given by Alex Morales.
With the following code, the background-image of the body scrolles down with the rest of the site until its bottom is reached. You can take a look at my homepage (http://blog.neonfoto.de) to see what it does.
$( window ).scroll( function(){
var ypos = $( window ).scrollTop(); //pixels the site is scrolled down
var visible = $( window ).height(); //visible pixels
const img_height = 1080; //replace with height of your image
var max_scroll = img_height - visible; //number of pixels of the image not visible at bottom
//change position of background-image as long as there is something not visible at the bottom
if ( max_scroll > ypos) {
$('body').css('background-position', "center -" + ypos + "px");
} else {
$('body').css('background-position', "center -" + max_scroll + "px");
}
});
This is actually the very first thing I did with JavaScript and JQuery, so any improvement would be great!
It's css3 so it's not super well supported, but I would look at the background-size property.
This is just off the top of my head but I think you will probably have to create a separate div containing the background image. If you place it in your markup before the main content and position the main content absolutely, it will sit behind the main content and at the top of the page. So:
CSS:
#background_div
{
background: url(images/some_image.png);
height: 600px;
width: 900px;
}
#main
{
height: 1200px;
width: 800px;
background: rgba(0, 0, 0, 0.25);
position: absolute;
top: 0;
}
HTML:
<div id="background_div"> </div>
Then what you do is you use javascript (I recommend jQuery) to detect the div's position on the screen.
jQuery:
This code grabbed from http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/
var $scrollingDiv = $("#background_div");
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop()) + "px"}, "slow" );
});
I'm creating a web app where I allow users to zoom certain 100x100px background images.
When they double tap the image, I scale the image to twice its size (-webkit-transform: scale( 2 )).
When the transition is done, I swap the 100x100px image with a larger 200x200px image. For some reason, the image is very blurry.
So I tried to use an img tag instead of a div tag to show my images. Here the image isn't blurry at all. Why is this?
I NEED to use background images to circumvent the memory limit on the iPad and iPhone (if I use img tags I will hit a memory wall).
Can anyone help me? Thank you so much.
Im claiming 3 things:
Scaling a div stretches the pixels and not adding more.
background-size: contain; Ensures you that your background-image is fully showen
The div never change size.
As you can see here the div is still 200x200 pixels
The image is resized to be 200x200 pixels Even if it's 400x400 pixels. See here
Almost proved in 1. the font is still sharp but javascript thinks the width and height is 200x200 pixels.
Okay so for your fix:
There are several ways.
You can change width and height instead of scaling. This isn't any pretty, or at least you are very lucky if this animation doesn't lack it's way throw (on iOS).
Something else could be scaling and detection webkitTranstionEnd
$('div').bind("webkitTransitionEnd", function() {
$(this).css({
"-webkit-transform": "scale(1)",
"width": "400px",
"height": "400px"
});
$(this).unbind("webkitTransitionEnd");
});
Remember to unbind the webkitTransitionEnd event. Else its doubling the function call.
But what happend it's animation back. So we have to keep the transtion in a class so we can add and remove it when we want:
div {
-moz-transition-duration: 0ms;
}
div.transition {
-moz-transition-duration: 200ms;
}
And then add the class when we have to animate:
setTimeout(function() {
$('div').addClass("transition");
$('div').css({
backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)',
webkitTransform: 'scale( 2 )',
mozTransform: 'scale( 2 )'
});
}, 3000);
And remove it again in webkitTransitionEnd
$(this).removeClass('transition');
$(this).css({
"-webkit-transform": "scale(1)",
"width": "400px",
"height": "400px"
});
$(this).unbind("webkitTransitionEnd");
What??! It dosn't add / remove the class in time?! What happen.
Sometimes the browser needs a little while to make sure the class is added. Therefore you need to wrap the setting of css in a setTimeout(function(){...}, 0);
setTimeout(function() {
$('div').addClass("transition");
setTimeout(function(){
$('div').css({
backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)',
webkitTransform: 'scale( 2 )',
mozTransform: 'scale( 2 )'
});
}, 0);
}, 3000);
Also when we remove the class:
$(this).removeClass('transition');
setTimeout(function(){
$(this).css({
"-webkit-transform": "scale(1)",
"width": "400px",
"height": "400px"
});
$(this).unbind("webkitTransitionEnd");
}, 0);
So long, now the problem is that it's scaling up and get blurred and after the scale it gets super sharp.
What we can do about it I dont know, but hope it helps you some where!
Andreas