So Far:
The image is shown on the browser, but it is not resized.
<html>
<img id="banner" src="c:/Users/Name/Downloads/picture.jpg" alt="banner" />
<Script>
var X = screen.width;
var Y = screen.height;
banner = document.getElementById('banner');
banner.style.width = X + 'px';
banner.style.height = (Y/5) + 'px';
</Script>
</html>
Other Attempts:
Show the image using purely javascript
Width and height variables accessed through javascript
First, try with no size specs
Image is not shown when I use:
document.write("<img src='c:/Users/Name/Downloads/picture.jpg' />")
Future Thoughts:
My next attempt will be trying to pass the javascript width and height variables to the html since it seems that the html image always shows and given the right size specifications, then that would be exactly what I want. I will post that here if I find a successful method.
markup and CSS like this should do trick for you.
<div class="banner"></div>
div
{
background:url(https://www.google.com/images/srpr/logo11w.png) no-repeat left top;
width:100%;
height:200px;
background-size:cover;
}
Or even better you can try this CSS instead of above
div
{
position:fixed;
left:0px;
right:0px;
top:0;
height:250px;
background:url(https://www.google.com/images/srpr/logo11w.png) no-repeat center center;
}
Related
Background:
Let's say you have a simple page which has a logo and a heading only and one paragraph
<img src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png">
<h1>Foo Bar</h1>
<p>ABC12345</p>
This is how that looks like
That page, obviously would not have vertical overflow / scroll bar for almost even tiny scale mobile devices, let alone computers.
Question
How can you bring that heading to the top left of the screen and move the logo out of focus unless someone scrolls up? Open to using any JavaScript library and any CSS framework
Attempts:
Tried using anchors but they only work if the page already had a scroll bar and anchor was out of focus.
Tried window.scrollTo but that also requires the page to have scroll already
Tried $("html, body").animate({ scrollTop: 90}, 100); but that also doesn't work when the page doesn't have overflow
Notes:
Please note that adding some extra <br/> to induce an overflow is not the way to go, it can be done that way but that's a very ordinary workaround
Why is it needed?
Its for a form for mobile devices, simple requirement is to take the first field of the form to top of the page and hide the logo (one can scroll up if they wish to see it) so it doesn't take attention away. Not using jQueryMobile for this particular task.
If you want the user to be able to scroll up and see the logo, then the logo must be within the top boundary of the body tag, because anything outside of that tag will not be viewable. This means you cannot use negative margins or offsetting like that. The only way to achieve this is to have the page scroll to the desired location that is within the top boundary of the body tag. You can set the time for this event to one millisecond, but there will still be a 'jump' in the page when it is loaded. So, the logic is: first make sure the page is long enough to scroll to the right place, then scroll there.
//Change the jQuery selectors accordingly
//The minimum height of the page must be 100% plus the height of the image
$('body').css('min-height',$(document).height() + $('img').height());
//Then scroll to that location with a one millisecond interval
$('html, body').animate({scrollTop: $('img').height() + 'px'}, 1);
View it here.
Alternatively, you can load the page without the image in the first place. Then your form field will be flush with the top of the document. Then you could create the element at the top and similarly scroll the page again. This is a round-a-bout way of doing the same thing though. And the page will still 'jump,' there is no way around that.
Only CSS and anchor link solution
With a pseudo element :
--- DEMO ---
First :
set : html,body{height:100%;}
Second :
Choose one of your existing tags. This tag mustn't have a relatively positioned parent (except if it is the body tag). Preferably the first element in the markup displayed after the logo. For your example it would be the h1 tag. And give it this CSS :
h1:before {
content:"";
position:absolute;
height:100%;
width:1px;
}
This creates an element as heigh as the viewport area. As it is displayed under the logo, the vertical scroll lenght is the same as the logo height.
Third :
Give the first element after logo an id (for this example I gave id="anchor").
Then you can use a link like this your_page_link#anchor and you will automaticaly scroll to the anchor (logo outside/above the viewport).
This works whatever height the logo is.
link to editable fiddle
Full code :
HTML
<img src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png">
<h1 id="anchor">Foo Bar</h1>
<p>ABC12345</p> Anchor link
CSS
html, body {
height:100%;
margin:0;
padding:0;
}
h1:before {
content:"";
position:absolute;
width:1px;
left:0;
height:100%;
}
You might need to add js functionality to hide the logo if user scrolls down but I guess following code will fullfill the first requirement.
Please see
<script src="js/jquery.js"></script>
<img id='logo' src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png" style="display:none">
<h1>Foo Bar</h1>
<p>ABC12345</p>
<script type="text/javascript">
var p = $( "p:first" );
var isScrolled=false;
/* For Firfox*/
$('html').on ('DOMMouseScroll', function (e) {
isScrolled = true;
if(p.scrollTop()==0 && isScrolled==true){
$('#logo').css('display','block');
}
});
/* For Chrome, IE, Opera and Safari: */
$('html').on ('mousewheel', function (e) {
isScrolled = true;
if(p.scrollTop()==0 && isScrolled==true){
$('#logo').css('display','block');
}
});
</script>
I have referred this question to find solution.
You could use touchmove event to detect swipe up or down. This is my example. You can try it on mobile device.
<style>
#logo {
position: absolute;
top: -100%;
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
-ms-transition: top 0.5s;
-o-transition: top 0.5s;
transition: top 0.5s;
}
#logo.show {
top: 0;
}
</style>
<script>
var perY;
var y;
$(window).on('touchmove', function(e) {
e.preventDefault();
y = window.event.touches[0].pageY;
if(!perY)
perY = y;
else
{
if(y > perY)
$('#logo').addClass('show');
else
$('#logo').removeClass('show');
perY = null;
}
});
</script>
<img id="logo" src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png">
<h1>Foo Bar</h1>
<p>ABC12345</p>
This is the same problem i've encountered hiding the addressbar without the page overflowing. The only solution that fitted my needs was the following:
Set the min-height of the body to the viewportheight + your logo.
$('body').css('min-height', $(window).height() + 200);
This is a simple solution of getting the height of the contents to see if we can scroll to the part of the header, if not, we add height to the paragraph.
<img id="img" src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png" />
<h1 id="h" >Foo Bar</h1>
<p id="par" style="background:yellow;">
hello world
</p>
script:
function hola(){
var imgH = $("#img").outerHeight(true);
var titleH = $("#h").outerHeight(true);
var winH = $(window).height();
var parH = $('#par').outerHeight(true);
var contH = (imgH + titleH + parH);
var wishH = (imgH + winH);
console.log("wished height: " + wishH);
console.log("window height: " + winH);
console.log("content height: " + contH);
if(contH < wishH){
console.log("window is smaller than desired :(");
var newH = wishH - contH;
$("#par").height(parH + newH);
$(window).scrollTop(imgH);
}
}
Here is the working example:
http://jsfiddle.net/Uup62/1/
You may like this solution: http://jsfiddle.net/jy8pT/1/
HTML:
<div class="addScroll"></div>
<h1 class="logo"><img src="https://drupal.org/files/images/OQAAAI1PPrJY0nBALB7mkvju3mkQXqLmzMhxEjeb4gp8aujEUQcLfLyy-Sn4gZdkAas6-k8eYbQlGDE-GCjKfF5gIrUA15jOjFfLRv77VBd5t-WfZURdP9V3PdmT.png" height="100" alt="company logo"/></h1>
<h2>This is a sample page heading.</h2>
<p>This is a sample page text.</p>
JS:
function addScroll()
{
$(".addScroll").css({
"height": ($(window).height()+1) + "px",
"width": "100%"
});
}
$(document).ready(function(){
addScroll();
$(window).resize(function(){
addScroll();
});
$(window).scroll(function(){
if($(window).scrollTop() > 0)
{
$(".logo").animate({
marginTop: "-110px"
}, 500);
}
if($(window).scrollTop() == 0)
{
$(".logo").animate({
marginTop: "0"
}, 500);
}
});
});
CSS:
body
{
padding:0;
margin:0;
}
h1.logo
{
display:block;
margin:0 0 10px 0;
padding:0;
outline:0;
}
.addScroll
{
position:absolute;
display:block;
top:0;
left:0;
z-index:-1;
}
I'm using jQuery 10.4.2 at the moment. I want to smoothly scale up an absolute positioned image. When I use the following code, I get no errors, but the animation does not occur. Instead, the image simply snaps to the full (100%) size.
HTML
<div class="box">
<img class="scaleMe" src="img.gif" />
</div>
CSS
.box { position:relative; height:0; padding-bottom:61.6667%; background-image:url('background.gif'); }
.scaleMe { display:block; position:absolute; bottom:0; left:0; z-index:1; width:50%; }
JS
$('.scaleMe').animate({width:'100%'}, 2000);
What am I doing wrong?
Update:
Here is a jsFiddle that works: http://jsfiddle.net/s_d_p/27DhK/
But here is a live demo that doesn't work.
You don't have a src on your image tag. Try:
<div class="box">
<img class="scaleMe" src="http://placekitten.com/g/200/300" />
</div>
http://jsfiddle.net/GZ8yX/
This is kind of lame, but if I capture the target width first and animate to that pixel value and then replace it with a percentage it works:
var oli = $('.scaleMe');
var toWidth = $('.box').width();
var scaleUP = function() {
oli.animate({width:toWidth}, 2000, function(){
oli.removeAttr("style");
oli.css("width", "100%");
});
}
This question already has answers here:
Height equal to dynamic width (CSS fluid layout) [duplicate]
(9 answers)
Closed 9 years ago.
How to make height equal width with css.
I have HTML like that :
<div style="width:900px;height:200px;">
<a style="display:block; float:left; width:35%; background:green"></a>
</div>
Now, I'd like to make height of a element equal width (35%). How can I do that? Thank your help.
Well I have that:
HTML:
<div class='box'>
<div class='content'>Aspect ratio of 1:1</div>
</div>
CSS:
.box{
background:#000;
position: relative;
width: 50%; /* desired width */
}
.box:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
JSFiddle: http://jsfiddle.net/wGszc/
http://www.mademyday.de/css-height-equals-width-with-pure-css.html
You can adapt it to your needs...
And... A little search in google doesn't hurt: https://www.google.com/search?q=make+height+iquals+to+width
use window.getComputedStyle to get the computed width, then do calculations to get the equvialent percentage that will make it the same size as the width.
HTML
<div class="someDiv" style="width:900px;height:200px;">
<a class="someAnchor" style="display:block; float:left; width:35%; background:green"></a>
</div>
JS
var anchor = document.querySelector(".someDiv .someAnchor");
var astyle = window.getComputedStyle(anchor);
anchor.style.height = astyle.width; //this will make it static though
//to make it a percentage like width so it will expand and contract with resize of parent element
var pstyle = window.getComputedStyle(anchor.parentNode);
var pheight = parseInt(pstyle.height);
var awidth = parseInt(astyle.width);
anchor.style.height = ((awidth/pheight)*100)+"%";
Note that the anchor element will be bigger than the div height wise, to keep it inside the parent you will have to scale it down.
JSFiddle Demo
Currently the zooming action is illustrate like the top graph. I would like to achieve the zoom action in bottom graph. The point is the zoom origin .Currently the codes are:
$("#popup").css("width",ui.value+"%");
$("#largeText").css("width",ui.value+"%");
$("#largeImg").css("width",ui.value+"%");
Where UI value is the width in percantage (eg. width : 100% , width : 200%) The height is set as auto.
Thanks
I don't know if that will give you answer but heres an exemple of an animation
Here's the exemple: http://jsfiddle.net/pRccr/6/
<div class="global">
<div class="item"></div>
CSS ::::::
.global {
width:600px;
height:600px;
background-color:#ff00ff;
position:relative;
}
.item{
position:absolute;
width:3px;
height:3px;
background-color:#000;
}
JAVASCRIPT :::::
var start_size = 20;
var timer=setInterval(function(){
start_size ++;
$('.item').css('height',start_size+'px');
$('.item').css('width',start_size+'px');
$('.item').css('top', ($('.global').height()/2 - $('.item').height()/2) +'px');
$('.item').css('left', ($('.global').width()/2 - $('.item').width()/2)+'px');
}, 50);
This will depend on your elements' positioning on the page.
I expect, to get the result you want in your image, you will have to center the element on your page both vertically and horizontally.
margin:auto auto;
width:?px;
height:?px;
I have a div of known size and a link to some image with random size, which i want to show inside this div. I would like an image to have proportional scaling, to be as big as posible, but no bigger than div (either the image width should equal the div's width or the image height should equal the div's height, but i dont exactly know which case).
How could i do it using only html, css, javascript and jquery?
And it would be great not to read the image size.
You can do this with pure CSS by setting max-width and max-height to 100%. This is a great article to read on the subject: http://unstoppablerobotninja.com/entry/fluid-images. The article also discusses how to deal with older versions of IE.
Here's an example of the CSS in action - http://jsfiddle.net/JamesHill/R7bAA/
HTML
<div id='div1'>
<img class='myImageClass' src='http://www.google.com/intl/en_com/images/srpr/logo3w.png' />
</div>
<br />
<div id='div2'>
<img class='myImageClass' src='http://www.google.com/intl/en_com/images/srpr/logo3w.png' />
</div>
CSS
#div1
{
height:100px;
width:200px;
background-color:Gray;
border: 1px solid Black;
}
#div2
{
height:500px;
width:100px;
background-color:Gray;
border: 1px solid Black;
}
.myImageClass
{
max-height:100%;
max-width:100%;
}
Here's a javascript method that computes the aspect ratio of image and container and sets the corresponding height or width value that will first hit the edge and the image then scales the other dimension proportionally:
// pre-cache image
var img1 = new Image();
img1.src = "http://photos.smugmug.com/photos/344291068_HdnTo-L.jpg";
var img2 = new Image();
img2.src = "http://photos.smugmug.com/photos/344291068_HdnTo-L.jpg";
function placeImage(imgObj, containerID) {
var container = $(containerID);
var imageAspectRatio = imgObj.height / imgObj.width;
var containerAspectRatio = container.height() / container.width();
// figure out which dimension hits first and set that to match
if (imageAspectRatio > containerAspectRatio) {
imgObj.style.height = container.height() + "px";
} else {
imgObj.style.width = container.width() + "px";
}
container.append(imgObj);
}
$("#go").click(function() {
placeImage(img1, "#container1");
placeImage(img2, "#container2");
});
You can see it here in this jsFiddle: http://jsfiddle.net/jfriend00/5K3Zf/