I have a div as :
<div id="div1" width="100px" height="100px">
</div>
Now within this div I want to place 20 elements, but dynamically it can grow upto 50 elements(images) also.
I am using the following code to append these elements in a div,
var i = document.createElement("img");
var d= document.getElementById("div1");
d.appendchild(i);
Now, the issue is ,as the number of elements increase the elements are going out of div ,and if I use the max-width and max-height on images, the result doesnt change:
i.setAttribute('max-width', '100%');
i.setAttribute('max-height', '100%');
Is there anything which I am missing?
Edit:
The images need to shrink as the div size is fixed
If the width is fixed and the height is dynamic. The image will shrink and they will get stacked. Check my fiddle here
img {
width:100%;
display:inline-block;
}
<div style="width:100px;border: 1px solid black;">
<img src="http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg" />
<img src="http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg" />
<img src="http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg" />
</div>
Cant think of a nice way to do it with percentages,
var imags = document.getElementsByTagName('img');
var count = imags.length;
for (var index= 0,l= count;index<l;index++){
imags[index].setAttribute('height', (100/count)+'%');;
}
its not pretty but should work.
i smushed something together from all the answers that fits your needs (if i understand you correctly)
https://jsfiddle.net/b30d88g6/3/
the div has fixed width/height and the images wont get out of the div
function add_img() {
var i = document.createElement("img");
i.src= "https://jsfiddle.net/img/logo.png";
var d= document.getElementById("div1");
d.appendChild(i);
var imags = document.getElementsByTagName('img');
var count = imags.length;
for (var index=0, l=count;index<l;index++){
imags[index].setAttribute('height', (100/count)+'%');;
}
}
Related
This is my first question on stackoverflow. What I want to do is to create an iframe into test div with javascript and add html code in it. Also I want to resize iframe's height dynamically. The code below works good for me only if I set dynamic_div's height more than 150px. If the height of the dynamic_div less than 150 it automatically sets iframe's height to 150. How can I fix this problem ?
P.S : html code in the html variable is dynamic. So I can not change anything in it.
Many Thanks.
<html>
<head>
</head>
<body>
<div id="test" style="border: 1px solid;"></div>
<script text="text/javascript">
var html = "<html><head></head><body><div id=\"container\" style=\"text-align:center;padding:8px 0;background-color:#f0f0f0;border:1px dashed;\"> <div id=\"dynamic_div\" style=\"width:100%;height:50px\">Some Content</div></body></html>";
function ui_aa(element_id,content){ // create an iframe and add txt into it.
var iframe = document.getElementById(element_id).appendChild(document.createElement('iframe')),
doc = iframe.contentWindow.document;
iframe.style.cssText = "width:100%";
iframe.frameBorder = 0;
iframe.scrolling= 'no';
doc.open().write(content);
doc.close();
doc.body.style.cssText = "margin:0px;padding:0px;height:100%";
var height = doc.body.scrollHeight;
iframe.height = height;
};
ui_aa('test',html);
</script>
</body>
</html>
The iframe gets a height value for unknown reason to me, to give it a height value such as 0 did the trick, The doc.body.style.cssText overwrites the height value to 100% anyway, so you don't need to worry.
function ui_aa(element_id,content){ // create an iframe and add txt into it.
iframe.height= '0';
};
Example JSFiddle
Because of your <div id="container">
Automatically it wont be as tall as your iframe.
Add some style to it.
#container {
height: 100%;
display: block;
}
I have an image that I need to change the dimensions of with jQuery. The image width should be the same as the width of it's parent div. The parent div is a responsive column container, so it's width is dynamic(fluid). Once the width of the image is changed, the height should also be changed to a value that would correspond with the aspect ratio of 16:9 in relation to the image's width. So let's say the column width is 1920... the image height would then be 1080. How can I modify my code to do this?
$(document).ready(function(){
$('#featured-articles').find('.featured').each(function(){
var slide = $(this);
$(this).find('img[rel="featured_preview"]').each(function(){
var new_width = slide.width();
var new_height = ?????
$(this).prop("width", new_width).prop("height", new_height);
});
});
});
<div id="featured-articles">
<div class="featured">
<img src="slide.jpg" rel="featured_preview">
</div>
<div class="featured">
<img src="slide2.jpg" rel="featured_preview">
</div>
</div>
I haven't tested your code, but is this what you want?
var new_height = Math.round(new_width*9/16);
Add width: 100%; to your img css. This naturally keeps the aspect ratio of the original picture (this assumes your original image is at a ratio of 16:9 -- which is a pretty valid assumption because you shouldn't be stretching/distoring images)
img {
width: 100%;
}
JSFiddle Demo
here a simple example :
html code :
<div id="test" style="width:300px">
<img src="http://placehold.it/300x300" />
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
javascript code (using jquery) :
var aspectRatio = 9/16;
$('#test img').css('width','100%');
var imgWidth = $('#test img').css('width');
// we have to remove the suffix px in imgWidth otherwise we will get
// a NaN value when we attempt to use that value in arithmetic
// operations
imgWidth = imgWidth.replace('px','');
// above the image width is converted from percentage format(%) to a
// static value for example 300px
var newHeight = imgWidth*aspectRatio;
$('#test img').css('height',newHeight+'px');
console.log(imgWidth+'\n');
console.log(newHeight);
you can try the example jsfiddle
Hi I want to rewrite an image Src and Style element.
The image tag has an element called "data-orig-file" wich has the url that I want to write to the src element.
I came up with this but I'm not good at javascript:
function changeImageSrc(img) {
var newurl= document.getElementById("img").getAttribute('data-orig-file');
var oldurl= document.getElementById("img").src;
document.getElementById("img").src = img.src.replace(oldurl, newurl);
}
Now Secondly I want to grab the "Style" element with it's values from the grandparent div of the image and write that style to the image instead of the original style.
Finally I want to do these two things on all images inside a container div on a page when it is loaded (I suppose).
Any help is greatly apreciated!!
Thanks
update:
what I came up with so far is this:
function ChangeImageSrc() {
var image=document.getElementById("img");
var div=document.getElementById("LastPost");;
for each (image in div) {
var newurl= document.getElementById("img").getAttribute('data-orig-file');
var oldurl= document.getElementById("img").src;
document.getElementById("img").src = img.src.replace(oldurl, newurl);
}
}
window.onload = function()
{
ChangeImageSrc();
};
I also tried it with an "onload" event on the body element like this (instead of the wondow.onload part):
onload="javascript:ChangeImageSrc()
Both don't work this far :(
Ok AffluentOwl, here's the HTML:
<div class="gallery-group images-1" style="width: 677px; height: 507px;">
<div class="tiled-gallery-item tiled-gallery-item-large">
<a href="http://i0.wp.com/www.mydomain.com/wp-content/uploads/..../../image.jpg" class="zoom">
<img data-attachment-id="5786" data-orig-file="http://www.mydomain.com/wp-content/uploads/..../../image.jpg" data-orig-size="1333,1000" data-medium-file="http://www.mydomain.com/wp-content/uploads/..../../image-300x225.jpg" data-large-file="http://www.mydomain.com/wp-content/uploads/..../../image-1024x768.jpg" src="http://i0.wp.com/www.mydomain.com/wp-content/uploads/..../../image.jpg?resize=1191%2C893" align="left" title="shelter-childrens-farm" data-recalc-dims="1" style="width: 73px; height: 9px;">
</a>
</div>
</div>
As you can see there is a CDN prefix to the url that I'm trying to loose (for good reasons, it's opposed to me by wordpress and doesn't work for me).
The second thing is about the style of the image tag, that's somehow set to the wrong dimensions so I want to grab the right size from the first div (top of code).
Here's how you replace an images' src attribute with a url stored in an attribute on the image called data-orig-file when the page loads.
<html>
<script>
function ChangeImageSrc() {
var div = document.getElementsByClassName("gallery-group images-1")[0];
var images = div.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].setAttribute("src", images[i].getAttribute("data-orig-file"));
images[i].setAttribute("style", div.getAttribute("style"));
}
}
window.onload = ChangeImageSrc;
</script>
<div class="gallery-group images-1" style="width: 500px; height: 500px;">
<div class="tiled-gallery-item tiled-gallery-item-large">
<img src="a.jpg" data-orig-file="b.jpg" id="image_id" style="width: 100px; height: 100px">
<img src="c.png" data-orig-file="d.jpg" id="image_id" style="width: 100px; height: 100px">
<img src="e.png" data-orig-file="f.png" id="image_id" style="width: 100px; height: 100px">
</div>
</div>
</html>
It would probably be helpful for you to look into the element selection functions in Javascript.
getElementById
getElementsByClassName
getElementsByTagName
querySelector
You may even like to use jQuery which makes selecting elements much easier. In jQuery you could replace the <script> code with the following for the same result as above:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
var div = $(".gallery-group.images-1");
var images = div.find("img");
images.each(function() {
$(this).attr("src", $(this).attr("data-orig-file"));
$(this).attr("style", div.attr("style"));
});
});
</script>
I have a div containing a label and 4 divs. I want some css and jQuery to affect the 4 child divs, but not the label, and so I wrote the following:
HTML:
<div class="score row-fluid">
<label class="span8">Text...</label>
<div class="span1"><img></div>
<div class="span1"><img></div>
<div class="span1"><img></div>
<div class="span1"><img></div>
</div>
CSS
.score > div {
cursor:pointer;
}
jQuery
$('> div', '.score').on('mouseenter', function() {
if($(this).not('.score-selected')) {
var $img = $(this).children('img');
var point = $img.attr('src').lastIndexOf('.');
var src = $img.attr('src').substring(0,point);
var newSrc = src + "-hover" + $img.attr('src').substring(point);
$img.attr('src', newSrc);
}
})
.on('mouseleave', function() {
if($(this).not('.score-selected')) {
var $img = $(this).children('img');
var point = $img.attr('src').lastIndexOf('.');
var point2 = $img.attr('src').lastIndexOf('-hover');
var src = $img.attr('src').substring(0,point2);
var newSrc = src + $img.attr('src').substring(point);
$img.attr('src', newSrc);
}
});
However the label has a pointer cursor, and it fires the mouseenter/leave JavaScript.
I've created a fiddle here, and interestingly it's not firing the JavaScript on the fiddle, but it is still being affected by the css.
Does anyone know why this label is being treated as if it's a div?
Bootstrap is giving label the pointer, and your mouse events are being called on .score as well as > div. When you hover over the label, you are also hovering over .score
EDIT: I changed the logging on your JS fiddle, here http://jsfiddle.net/sEa5W/1/
The mouse enter isn;t getting fired from the label, but the mouse exit is being called when you hover over to the mouse label from one of the DIVs because you are exiting the DIV.
perhaps it is an idea (if you use html5) to use <img data-large="path-to-large-image" and use that in your jQuery selection.
<div class="score row-fluid">
<label class="span8">Text...</label>
<div class="span1"><img src="thumbnail1.jpg" data-large="fullsize1.jpg" alt="img1" /></div>
<div class="span1"><img src="thumbnail2.jpg" data-large="fullsize2.jpg" alt="img2"></div>
<div class="span1"><img src="thumbnail3.jpg" data-large="fullsize3.jpg" alt="img3"></div>
<div class="span1"><img src="thumbnail4.jpg" data-large="fullsize4.jpg" alt="img4"></div>
</div>
and the jQuery:
$('div.score>div.span1').on('mouseenter', function() {
if($(this).not('.score-selected')) {
var $img = $(this).children('img');
$img.attr('src', $img.attr('data-large'));
}
})
.on('mouseleave', function() {
if($(this).not('.score-selected')) {
var $img = $(this).children('img');
$img.attr('src', $img.attr('data-large'));
}
});
edit lol, just noticed I used large twice, but this can also be done with small or something. just data-anything. It was just a way to show you that you do not have to manipulate strings, but that you can use html5 data attributes.
i have a single div 100px X 300px. What's the easiest way in JavaScript so when I hover over the div i show an image and then when i leave the div the image disappears.
for starters i thought the following would get me started but i can't seem to remove the image properly
<script type="text/javascript">
function MouseOver_Event(elementId) {
var imgToCreate = document.createElement('img');
imgToCreate.setAttribute('id', 'imgHandle');
imgToCreate.setAttribute('src', elementId + '.png');
imgToCreate.setAttribute('onmouseout', 'MouseOut_Event('+elementId+')');
var targetDiv = document.getElementById(elementId);
targetDiv.appendChild(imgToCreate);
targetDiv.removeAttribute('onmouseover', 'MouseOver_Event');
}
function MouseOut_Event(elementId) {
var imgToRemove = document.getElementById('imgHandle');
var targetDiv = imgToRemove.parentNode();
if (imgToRemove != null)
targetDiv.removeChild(imgToRemove);
targetDiv.setAttribute('onmouseover', 'MouseOut_Event(' + elementId + ')');
}
</script>
</head>
<body>
<div id="div1" onmouseover="MouseOver_Event(this.id)"></div>
<div id="div2" onmouseover="MouseOver_Event(this.id)"></div>
<div id="div3" onmouseover="MouseOver_Event(this.id)"><img src="Div3.png" alt="test" onmouseout="MouseOut_Event(parentNode's id or something)" /></div>
</body>
You're attaching your MouseOut_Event to onmouseover instead of onmouseout. But you probably don't need to be messing with dynamic event creation anyway; just add onmouseout="MouseOut_Event(this.id)" to the three divs and that should do it.
Why don't you use CSS instead ?
For example:
#div1{background:none;}
#div1:hover{background:url('src/div1.png') no-repeat;}