Need to reduce height of an image using javascript - javascript

This is my code
<div data-role="page" id="callAjaxPage">
<img id="logo" src="images/logo.JPG" alt="logo" />
<div data-role="header">
<h1>Login</h1>
</div>
<div data-role="content">
<form id="callAjaxForm" data-ajax="false">
<div data-role="fieldcontain">
<label for="userName" id="userNameLabel">Username</label> <input
type="text" name="userName_r" id="userName" value="" /> <label
for="password" id="passwordLabel">Password</label> <input
type="password" name="password_r" id="password" value="" /> <br />
<button data-theme="b" id="submit" type="button">Submit</button>
</div>
</form>
</div>
</div>
In this code i have an image which is the logo. I Just need to reduce the height of the image. What i have tried is manually setting the height to say 150px but what happens is that the height gets reduced but my width also reduces. Even if i hardcoded my width, still it reduces. The problem maybe the image is small.I also tried placing it in a div and i manually set the corresponding height and width but the div concept cuts the image. I dont want the image to be cut or something.I just want it to shrink in height. I dont care about the quality. How to do it?

Reducing the height is doing what almost anyone wants - keeping the aspect-ratio when you change the height. If you need to keep the width, change the width AND the height to the height it was with the desired width
for example DEMO
$(document).ready(function() {
var img = $("#logo");
var width = img.width();
alert(width);
img = $('<img height="250" width="'+width+'" alt="'+img.attr("alt")+'" src="'+img.attr("src")+'"/>')
$("#logo").replaceWith(img);
});

You can either do this in CSS.
#logo {
width: 80px;
height: 30px;
}
Or if you want to resize the image dynamically with javascript.
$("#logo").attr("width", $("#logo").width());
$("#logo").attr("height", 30);

You can set separately width and height using the style attribute.
For example :
<img style="height:40px;width:300px;" src=0NfSJ.jpg>

You just specify the width and height attributes, and the image will be displayed in that size:
<img id="logo" src="images/logo.JPG" alt="logo" width="300" height="20" />
Here is a demo of a 5x5 image displayed as 300x20: http://jsfiddle.net/Guffa/A9pAP/

Related

random divs horizontally javascript

New here. I am a sys-admin with medium experience with html/css/php. I've worked on modX, Wordpress and Joomla in the past, and now my boss wants something that requires javascript or jquery knowledge (less than basic in my case).
Problem description: .x-container is with fluid height and .x-column also, .ult-new has fixed height 230px with margin set in css (20px) and position relative. x-column has width: 22% and position relative and margin-right: 4%. And i need to display randomly each ult-new inside each x-column (inside each x-container). Those elements are created dynamically with php and shortcodes. So i need to vertically position them in random places in those columns and relative to each other (with 20px margin top and bottom).
As i understand i need to count the height of each x-column and than count the number of .ult-new elements in each of those columns. And than i need to posiotion those elements as absolute and do some math (first will be 0px from the top plus 20px margin, and then second element needs to be 230px from the top plus 20px margin top etc).
How do i translate this to javascript? Is there something else i don't see? :)
<div class"x-container">
<div class="x-column">
<div class="ult-new">
<!--some code here (text, hyperllinks etc)-->
</div>
<div class="ult-new">
</div>
<div class="ult-new">
</div>
<!--some code here (text, hyperllinks etc)-->
</div>
<div class="x-column">
<div class="ult-new">
</div>
<div class="ult-new">
</div>
<div class="ult-new">
</div>
</div>
<!--and many more x-column-->
</div>
<div class"x-container">
<div class="x-column">
<div class="ult-new">
</div>
<div class="ult-new">
</div>
<div class="ult-new">
</div>
</div>
<div class="x-column">
<div class="ult-new">
</div>
<div class="ult-new">
</div>
<div class="ult-new">
</div>
</div>
</div>
<!--and many more x-container-->
I may not fully understand what your doing but the best information i can give you is this jquery. now your gonna have to do some of the work to configure it but i believe in you!
var x; // move horizontal
var y; // move vertical
$('.YOURCLASS').css({"width":"50px","margin","50px","position":"absolute","transform":`translateX(${x})`,"transform":`translateY(${Y})`}) //sets styles
$('.YOURCLASS').css("width") // gives the width of element
var randomnum = Math.floor((Math.random() * 10) + 1); // random number 1-10
y = randomnum
x = randomnum
// use position:absolute then pass x,y in

How to execute javascript for each individual nested div displaying images?

I am trying to get a JS script to execute solo within each nested div. I have class conflicts, and I am unable to figure out how to basically iterate the script through each div without conflicts.
I have tried using .each, running different loops, classing the divs, and more. I have tried numerous things unsuccessfully. I wish I had kept track of all the different methods, but I've been at this for hours and have been unsuccessful in finding the correct syntax. It's quite obvious, I need serious work when it comes to programming. I have HTML, CSS, and bootstrap down pretty well, but Javascript and jQuery, I have just begun learning.
<link href="Styles/StyleSheet.css" rel="stylesheet" />
<script src="Scripts/thumbs.js"></script>
<div class="container-fluid maxW opaque padtop">
<!-- Jumbotron -->
<div class="jumbotron container-fluid">
<div>
<img src="jumbo.jpg" alt="" /></a>
</div>
</div>
<!--First Div Thumbnail Photo Block -->
<div class="container text-center">
<h3 class="text-center mt-4 mb-4">Photo Block 1</h3>
<div>
<img id="0" class="preview normal" src="" alt="" /><br />
<img id="1" class="thumb normal" src="sumpic.jpg" alt="" onmouseover="preview(this)" />
<img id="2" class="thumb normal" src="sumotherpic.jpg" alt="" onmouseover="preview(this)" />
</div>
</div>
<!--Second Div Thumbnail Photo Block -->
<div class="container text-center">
<h3 class="text-center mt-4 mb-4">Photo Block 2</h3>
<div>
<img id="0" class="preview normal" src="" alt="" /><br />
<img id="1" class="thumb normal" src="sumotherpic1.jpg" alt="" onmouseover="preview(this)" />
<img id="2" class="thumb normal" src="sumotherpic2.jpg" alt="" onmouseover="preview(this)" />
<img id="3" class="thumb normal" src="sumotherpic3.jpg" alt="" onmouseover="preview(this)" />
</div>
</div>
</div>
Here's the CSS:
.preview {
width: Auto;
max-height: 600px;
}
.thumb {
width: 205px;
margin-right: 3px;
}
.normal {
border: 3px solid #000000;
}
.selected {
border: 3px solid #ff0000;
}
And the JavaScript code:
var lastImg = 1; //Set initial thumbnail and preview
document.getElementById(0).src = document.getElementById(lastImg).src;
document.getElementById(lastImg).className = "thumb selected";
function preview(img) {
document.getElementById(lastImg).className = "thumb normal";
img.className = "thumb selected";
document.getElementById(0).src = img.src;
lastImg = img.id
}
I think that's everything.
So what I'm aiming for is each div block to have the thumbs underneath and the mouse-dover image displayed above as the large displayed image. It works great so long as there is one single div. As soon as I add 2+ I run into what I'm assuming is class conflicts where only the first div displays the large image. It will display the large image that was last moused over in any of the divs. It is empty in all divs, except the first. The thumbs have no issues being displayed in each div. Thank you in advance for any help, and thank you for understanding I'm new to this and trying to learn.
Well, your using pure Javascript, no jQuery. That's ok of course
The obvious error I'm seeing is id = 0 instead of "0"
Another thing is "className" youre using instead of set attribute class
I would recommend in general 2 things:
Using example cases, and F11 and opening the console
As per you code, I made small fixes to get you going, and to understand the next step. I think that you should define object vars for lastimg, "0" and img then make the code more readable and scalable
var lastImg = 1; //Set initial thumbnail and preview
document.getElementById("0").src = document.getElementById(lastImg).src;
document.getElementById(lastImg).setAttribute("class", "thumb selected");
function preview(img) {
document.getElementById(lastImg).setAttribute("class", "thumb normal");
document.getElementById(img).setAttribute("class", "thumb selected");
document.getElementById("0").getAttribute("src") = document.getElementById("img").getAttribute("src");
lastImg = img;
}

how to resize the image in angularjs?

<div class="row" data-ng-repeat="row in imageDataUrls" >
<div class="col-sm-3" data-ng-repeat="imageDataUrl in row" >
<img alt="img" class="img-responsive"data-ng-src="{{imageDataUrl.url}}" />
</div>
</div>
I am showing the image using data URLs, but how can I get the current height and width in pixel to resize it proportionally in angular js?
I have some algorithm to resize it independently
I'm not sure what data imageDataUrl has in it but you can get the image dimensions in JavaScript easily:
var img = new Image();
img.onload = function() {
console.log(this.width + 'x' + this.height);
}
img.src = 'http://lorempixel.com/400/200/';
as pointed by mvermand comment, you can just add CSS to your class or directly height/width attributes.
<div class="row" data-ng-repeat="row in imageDataUrls" >
<div class="col-sm-3" data-ng-repeat="imageDataUrl in row" >
<img alt="img" class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/2000px-SNice.svg.png" width="300"/>
</div>
</div>
If using only height or width, the other attribute is calculated to respect the image proportions.
Now, regarding the size you want, you can also use percents - like width="100%" to use the full width.
Cheers
If your goal is to resize proportionally, why not resize using CSS percentages?
CSS:
.smaller {
width: 80%;
}
Your Code:
<div class="row" data-ng-repeat="row in imageDataUrls" >
<div class="col-sm-3" data-ng-repeat="imageDataUrl in row" >
<img alt="img" class="img-responsive smaller" data-ng-src="{{imageDataUrl.url}}" />
</div>
</div>
you can get/set the height and width properties with angular.element("selector").height or width.

Setting height of jquery dialog box

I have a jquery dialog box which contains an image (img). I am trying to set the height of the box to match the image but I am finding that both are being set smaller than I specify. For example, the following lines:
console.log("h1 " + $('#display').height());
$("#display").dialog('option', 'height', img.height);
console.log("h2 " + $('#display').height());
console.log("ih " + img.height);
produce the following output to the console:
h1 564
h2 564
ih 640
This suggests to me that $('#creativeImageDisplay').height() refers to inner height but the 'height' in the options refers to outer height. Is there any way of setting inner height (such that outer height is increased correspondingly)?
Edit
('#display').outerHeight(true) 652
('#display').outerHeight(false) 652
('#display')innerHeight() 652
After you have generated your dialog, it will output something like this:
<div class="ui-dialog ...">
<div class="ui-dialog-titlebar ..."> ... </div>
<div id="display" class="ui-dialog-content ..."> ....</div>
<div class="ui-dialog-buttonpane ..."> ... </div>
</div>
You could try simply $("#display").height(im.height()); for inner height.
HTML:
<div id="panel">
<input type="button" id="btndialog1" name="btndialog1" value="Show Dialogue1"/>
<input type="button" id="btndialog2" name="btndialog2" value="Show Dialogue2"/>
<br/>
<div id="imgdialog1" title="Dialogue1 with Image">
<p>
<img src="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" id="img1">
</p>
</div>
<div id="imgdialog2" title="Dialogue2 with image">
<p>
<img id="img2" src="http://www.xda-developers.com/wp-content/uploads/2011/02/android_boot_image.jpg"/>
</p>
</div>
</div>
JQuery:
$(function() {
$('#imgdialog1').dialog({
autoOpen: false,
'width': 'auto',
'height': 'auto'
});
$('#imgdialog2').dialog({
autoOpen: false,
'width': 'auto',
'height': 'auto'
});
$("#btndialog1").click(function() {
$('#imgdialog1').dialog('open');
});
$("#btndialog2").click(function() {
$('#imgdialog2').dialog('open');
});
});
I have done bins, so try on http://codebins.com/bin/4ldqpad
Just to be tidy.
Thank you for all of your helpful comments. It turned out the problem was that I had set the image position to 'fixed' which for some reason was preventing the auto resize from working.

How to auto-scroll div content vertically continuously

I need to scroll the div which contains images, vertically. Any help or references will be highly appreciated.
Maybe something like this would help? First and last images are supposed to be the same.
JS:
(function(){
var box=document.getElementById('box');
box.appendChild(box.firstChild.cloneNode());
function infScroll(){
box.scrollTop +=1;
if(box.scrollTop===300){
box.scrollTop=0;
}
window.requestAnimationFrame(infScroll);
}
window.requestAnimationFrame(infScroll);
}());
HTML:
<div id="box" style="width:150px; height:100px; overflow:hidden;">
<img src="http://placekitten.com/150/90" />
<img src="http://placekitten.com/150/120" />
<img src="http://placekitten.com/150/80" />
<img src="http://placekitten.com/150/90" />
</div>

Categories

Resources