I'm trying to determine the height of images in containers and if any image has a height of less than 300 pixels then I want its container height to be set to auto.
Here is my code:
<style>
.container {
width: 500px;
height: 500px;
}
</style>
<script>
var img = document.getElementsByTagName("img");
if (img.height < 300) {
var x = document.getElementsByClassName('container');
x.style.height="auto";
}
</script>
<div class="container">
<img height="500" width="500" src="/some_img.jpg"/>
</div>
<div class="container">
<img height="500" width="500" src="/some_img.jpg"/>
</div>
<div class="container">
<img height="500" width="500" src="/some_img.jpg"/>
</div>
<div class="container">
<img height="250" width="250" src="/some_img.jpg"/> // This image height is less than 300 pixels.
</div>
<div class="container">
<img height="500" width="500" src="/some_img.jpg"/>
</div>
Any help would be appreciated.
First you get all image tags, then itterate through them, if their height is less than 500, then you get its parent element and set its height to 'auto'
here is a working example
var img = document.getElementsByTagName("img");
console.log(img)
for (index in img){
if (img[index].height < 300) {
img[index].parentNode.style.height="auto";
}
}
img = getElementsByTagName("img") returns all images, not just one, so you can't use it as img.height, you should use for loop or jQuery selector
x = document.getElementsByClassName('container') also returns all elements, so you can't set its style directly. And you need to set style for parent element of current processed image, not just first or all of them. You can use jQuery .parent()
Your script is executed before the img elements begin to exist. Either put you script after html or use jQuery $(document).ready() event
I think you should put a dot before slash in src (src="./some_img.jpg")
So with jQuery it will look like this:
<script>
$(document).ready(function(){
$("img").each(function(){
if( $(this).height() < 300 ) {
$(this).parent().height( "auto" );
}
});
});
</script>
Vanilla JS
Iterate over the images. If they are <300 and their parent has the class of 'container' then set the parent's style.height to 'auto:
var imgs = document.getElementsByTagName("img");
for (i in imgs){
if (imgs[i].height < 300 && imgs[i].parentNode.className.indexOf('container') != -1) {
imgs[i].parentNode.style.height="auto";
}
}
var imgs = document.getElementsByTagName("img");
for (i in imgs){
if (imgs[i].height < 300 && imgs[i].parentNode.className.indexOf('container') != -1) {
imgs[i].parentNode.style.height="auto";
}
}
.container {
width: 500px;
height: 500px;
}
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/" />
</div>
<div class="container">
<img height="250" width="250" src="http://www.placehold.it/250/250/"/><!--This image height is less than 300 pixels.-->
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>
jQuery
Use jQuery's filter() to simply find all .containers that contain images with a height < 300:
$(".container")
.filter(function(){return $(this).find("img").height() < 300;})
.css("height", "auto");
$(function(){
$(".container").filter(function(){return $(this).find("img").height() < 300;}).css("height", "auto");
});
.container {
width: 500px;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/" />
</div>
<div class="container">
<img height="250" width="250" src="http://www.placehold.it/250/250/"/><!--This image height is less than 300 pixels.-->
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>
Related
I have a series of images with the class of .piece in a div called #pieces. Only the first image #piece0 is shown initially, and as you click on #piece0, #piece1 appears on top of #piece0. And then when you click on #piece1, #piece2 appears on top. My current code doesn't do that. How do I fix that?
<div id="pieces">
<img class="piece" id="piece0" style="display:block;"/>
<img class="piece" id="piece1" style="display:none;"/>
<img class="piece" id="piece2" style="display:none;"/>
<img class="piece" id="piece3" style="display:none;"/>
</div>
<script>
var pieceNum = $("#pieces").children().size();
var i = 0;
if (i < pieceNum) {
$("#piece" + i).click(function({
i++;
$("piece" + i).css("display", "block");
}));
}
</script>
If you want to get element children size(length) , use $("#pieces img").length . But for your problem that is not necessary .
You can catch image click by $("pieces img").on("click".. and get next element by .next() then the last element have no next , for that case you can check by next().length . 0 will return if next element have no exist
$("#pieces img").on("click",function() {
$(this).next().show();
$("#pieces").append($(this));
});
#pieces {
display: flex;
flex-direction: column;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pieces">
<img class="piece" id="piece0" style="display:block;" alt="one"/>
<img class="piece" id="piece1" style="display:none;" alt="two"/>
<img class="piece" id="piece2" style="display:none;" alt="three"/>
<img class="piece" id="piece3" style="display:none;" alt="four"/>
</div>
$(document).ready(function(){
var pieceNum = $("#pieces").children();
var i = 0;
if (i < pieceNum.length) {
$("#piece" + i).click(function(){
$("#piece" + i).css("display", "none");
i++;
$("#piece" + i).css("display", "block");
});
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pieces">
<img class="piece" id="piece0" style="display:block;" src="http://placekitten.com/g/200/300"/>
<img class="piece" id="piece1" style="display:none;" src="http://placekitten.com/g/200/400"/>
<img class="piece" id="piece2" style="display:none;" src="http://placekitten.com/g/200/300"/>
<img class="piece" id="piece3" style="display:none;" src="http://placekitten.com/g/200/100"/>
</div>
Try this:
var pieceNum = $("#pieces").children().size();
var i = 0;
if (i < pieceNum) {
$("#piece" + i).click(function({
$("piece" + i).css("display", "none");
i++;
$("piece" + i).css("display", "block");
}));
}
You don't need to write multiple click events, You can have single click event attached to all elements and do traversing using .next() to show next element :
$(".piece").click(function({
var $nextPiece = $(this).next();
if($nextPiece.length > 0)
$nextPiece.css("display", "block");
}));
You can use the next() to access next child and show() to display the img. Also, you will need to add position: absolute; to make images overlap each other.
$(document).ready(function() {
$('.piece').on('click', function() {
$(this).next().show();
});
});
img {
max-width: 100px;
margin-right: 1em;
position: absolute;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div id="pieces">
<img class="piece" src="https://res.cloudinary.com/demo/image/upload/w_250,h_250,c_mfit/w_700/sample.jpg" />
<img class="piece" src="https://res.cloudinary.com/demo/image/upload/w_300,h_200,c_crop/sample.jpg" style="display:none;" />
<img class="piece" src="https://res.cloudinary.com/demo/image/upload/w_250,h_250,c_mfit/w_700/sample.jpg" style="display:none;" />
<img class="piece" src="https://res.cloudinary.com/demo/image/upload/w_300,h_200,c_crop/sample.jpg" style="display:none;" />
</div>
Try this
$(".piece").on('click', function(){
$(".piece").hide();
let id = (parseInt(this.id.slice(-1)) +1)%4;
$("#piece" +id).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pieces">
<img class="piece" id="piece0" style="display:block;" alt="piece 0"/>
<img class="piece" id="piece1" style="display:none;" alt="piece 1"/>
<img class="piece" id="piece2" style="display:none;" alt="piece 2"/>
<img class="piece" id="piece3" style="display:none;" alt="piece 3"/>
</div>
I would like to add another slideshow with different pics right beside this.
My images have different sizes.
<html>
<head>
<style>
.container{
position:relative;
width:100%;
height:300px;
border-radius:5px;
border:1px solid red;
overflow:hidden;
}
</style>
</head>
<body>
<div id="imgGallary" class="container">
<img src="http://www.examiningcalvinism.com/kingdavid.jpg" alt="" width="100%" height="300" />
<img src="http://www.kingjamesbibleonline.org/1611-Bible/1611-King-James-Bible-Introduction.jpg" alt="" width="100%" height="300" />
<img src="http://biblestudyoutlines.org/wp-content/uploads/2012/07/the-triump-of-david-over-king-hadadezer-of-zobah-1024x729.jpg" alt="" width="100%" height="300" />
<img src="http://www.cgu.edu/Images/news/Flame%20Winter12/KJV-BibleBW.jpg" alt="" width="100%" height="300" />
</div>
<script>
(function(){
var imgLen = document.getElementById('imgGallary');
var images = imgLen.getElementsByTagName('img');
var counter = 1;
if(counter <= images.length){
setInterval(function(){
images[0].src = images[counter].src;
console.log(images[counter].src);
counter++;
if(counter === images.length){
counter = 1;
}
},4000);
}
})();
</script>
</body>
</html>
The key concept here is that a slideshow is a region that has some images and the region can be repeated in everywhere in your page, but the JavaScript code should work in a specific region. The code below shows one of some possible solutions.
(function () {
function slideshow(container) {
var imgLen = document.getElementById(container);
var images = imgLen.getElementsByTagName('img');
var counter = 1;
if (counter <= images.length) {
setInterval(function () {
images[0].src = images[counter].src;
console.log(images[counter].src);
counter++;
if (counter === images.length) {
counter = 1;
}
}, 4000);
}
}
slideshow('imgGallary1');
slideshow('imgGallary2');
})();
.container {
display: inline-flex;
}
.sildeshow {
position: relative;
width: 45%;
height: 300px;
border-radius: 5px;
border: 1px solid red;
overflow: hidden;
}
<div class="container">
<div id="imgGallary1" class="sildeshow">
<img src="http://www.examiningcalvinism.com/kingdavid.jpg" alt="" width="100%" height="300" />
<img src="http://www.kingjamesbibleonline.org/1611-Bible/1611-King-James-Bible-Introduction.jpg" alt="" width="100%" height="300" />
<img src="http://biblestudyoutlines.org/wp-content/uploads/2012/07/the-triump-of-david-over-king-hadadezer-of-zobah-1024x729.jpg" alt="" width="100%" height="300" />
<img src="http://www.cgu.edu/Images/news/Flame%20Winter12/KJV-BibleBW.jpg" alt="" width="100%" height="300" />
</div>
<div id="imgGallary2" class="sildeshow">
<img src="http://www.examiningcalvinism.com/kingdavid.jpg" alt="" width="100%" height="300" />
<img src="http://www.kingjamesbibleonline.org/1611-Bible/1611-King-James-Bible-Introduction.jpg" alt="" width="100%" height="300" />
<img src="http://biblestudyoutlines.org/wp-content/uploads/2012/07/the-triump-of-david-over-king-hadadezer-of-zobah-1024x729.jpg" alt="" width="100%" height="300" />
<img src="http://www.cgu.edu/Images/news/Flame%20Winter12/KJV-BibleBW.jpg" alt="" width="100%" height="300" />
</div>
</div>
I've a next button and back button. I want to show one question div at a time. Then I want next button to change the div to the next div question and the back button should change the div back to the previous div. Only one div should be seen at a time.
<input type="image" src="forward.gif" alt="Next">
<input type="image" src="back.gif" alt="Back">
<div class="question_one">
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>
<div class="question_two">
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>
<div class="question_three">
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>
<div class="question_four">
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>
Here's a simple JavaScript which solves this kind of problem:
<script>
var next = document.getElementById('next'),
back = document.getElementById('back'),
questions = document.getElementsByTagName('div'),
current = 0;
next.onclick = function showNext() {
if (questions[current+1]) {
questions[current].style.display = 'none';
questions[current+1].style.display = 'block';
current++;
} else {
return false;
}
}
back.onclick = function showPrev() {
if (questions[current-1]) {
questions[current].style.display = 'none';
questions[current-1].style.display = 'block';
current--;
} else {
return false;
}
}
</script>
And at first you should hide the questions with CSS (except the first one):
<style>
div:not(:first-of-type) {
display: none;
}
</style>
EDIT: here is your HTML...
<input type="image" src="forward.gif" alt="Next" id="next">
<input type="image" src="back.gif" alt="Back" id="back">
<div class="question_one">
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>
<div class="question_two">
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>
<div class="question_three">
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>
<div class="question_four">
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>
First, regroup your class with unique name and add id to your back and forward button (To apply clicks events). Example :
<input type="image" src="forward.gif" alt="Next" id="forwardQ">
<input type="image" src="back.gif" alt="Back" id="nextQ">
<div class="question">
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>
<div class="question">
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>
<div class="question">
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>
<div class="question">
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>
With JQuery:
var actual = 0; // select by default the first question
$(document).ready(function() {
var number_of_question = $('.question').length; // get number of questions
$('.question:gt(' + actual + ')').hide(); // Hide unselect question
$('#nextQ').click(function() {
if(actual < number_of_question - 1 ) {
changeQuestion(actual + 1); // display select question
}
});
$('#forwardQ').click(function() {
if(actual) {
changeQuestion(actual - 1); // display select question
}
});
});
function changeQuestion( newQuestion ) {
$('.question:eq(' + actual +')').hide(); // hide current question
$('.question:eq(' + newQuestion +')').show(); // show new question
actual = newQuestion; // memorize actual selection
}
You can achieve this by combining HTML, CSS and jQuery.
In the below example I am displaying only the div elements with class active and hiding the other divs. And adding the class active to appropriate divs when ever the user clicks on the Next or Previous button.
HTML Code
<input type="button" value="Next" id="next_qs">
<input type="button" value="Back" id="prev_qs">
<div class="question_one">
QS1
</div>
<div class="question_two">
QS2
</div>
<div class="question_three">
QS3
</div>
<div class="question_four">
QS4
</div>
CSS Code
div {
width: 300px; height: 200px; border: 1px solid #333; clear: both; display: none;
}
div.active {
display: block;
}
jQuery Code
$("div:first").addClass('active')
$("#next_qs").click(function() {
$("div.active").removeClass('active').next().addClass('active');
});
$("#prev_qs").click(function() {
$("div.active").removeClass('active').prev().addClass('active');
});
http://jsfiddle.net/27gwy14f/
HTML
<div id="container">
<input type="image" src="back.gif" alt="Back">
<input type="image" src="forward.gif" alt="Next">
<div class="question_one question active">
1
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>
<div class="question_two question">
2
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>
<div class="question_three question ">
3
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>
<div class="question_four question">
4
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>
</div>
Jquery
<script>
var $container = $("#container") // caches the jquery object
$container.find('input[alt="Next"]').on("click",function(){
var active = $container.find(".active")
if(active.next(".question").length === 0){
return false
}else{
active.removeClass("active")
active.next(".question").addClass("active")
}
})
$container.find('input[alt="Back"]').on("click",function(){
var active = $container.find(".active")
if(active.prev(".question").length === 0){
return false
}else{
active.removeClass("active")
active.prev(".question").addClass("active")
}
})
</script>
CSS
<style>
#container .question{
display:none
}
#container .active{
display:inline-block;
}
</style>
JS FIDDLE
http://jsfiddle.net/vrnxL9n8/
edit: added js fiddle link
I am not too experienced with JavaScript.
I have created a website with 5 divs on the container. When I added the Slideshow with JavaScript all the images jump to the top and the image I use as header for the site becomes another image from the slideshow.
I tried assigning a class to the images on the slideshow, but I dont know how to incorporate this to the code on JavaScript so that it only focuses on those (instead of all the images on my page).
(THANKS A LOT IF ANYONE CAN HELP!!! I am not being lazy, I just can not seem to find the answer!!!)
Here is the code:
<style type="text/css">
body {
background-image: url(layout/background.png);
}
img{
-webkit-transition-property:opacity;
-webkit-transition-duration:5s;
position:absolute;
width:320;
height:auto;
}
img.fade-out{opacity:0;}
img.fade-in{opacity:1;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<br>
<ul>
<li><img src="main-menu4.gif" width="984" height="290" ></li>
</ul>
</div>
<div id="main_image">
<h1>Events</h1>
<br>
<img class="slideshow" src="hotdog.jpeg" width="450" height="auto" >
<img src="girlonslide.jpeg" width="450" height="auto" class="slideshow">
<img src="games/extremefun.jpg" width="450" height="auto" class="slideshow">
<img src="games/climbing.jpeg" width="450" height="auto" class="slideshow">
<img src="games/cartgame.jpeg" width="450" height="auto" class="slideshow">
<img src="pizza.JPG" width="450" height="auto" class="slideshow">
<script>
var interval = 4 * 20; //Seconds between change
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;
var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images [i];
}
imageArray.sort(randomize);
var fade = function() {
imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade, interval * 100);
};
fade();
</script>
</body>
</html>
I really dont know what I am doing wrong!
You seem to be targeting all the image tags in your page. You need to limit that to only the images in your div#main_image.
To do that replace
var images = document.getElementsByTagName("img");
with
var images = document.getElementById("main_image").getElementsByTagName("img");
i want to get box index number using Javascript. like i have four box so i want each box text have this appropriate number.
<head>
<script type="text/javascript">
function () {
var Main= document.getElementById('container').getElementsByTagName('div');
for(i=0; i<Main.length;i++){
}
}
</script>
<style>
.box {
float:left;
margin-left:20px;
position:relative
}
.width {
position:absolute;
left:0;
top:0;
color:#FFF;
font-size:20px;
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<img src="img/sample1.jpg" height="200" width="300" />
</div>
<div class="box">
<img src="img/sample2.jpg" height="200" width="350" />
</div>
<div class="box">
<img src="img/sample3.jpg" height="200" width="150" />
</div>
<div class="box">
<img src="img/sample4.jpg" height="200" width="100" />
</div>
</div>
</body>
window.onload=function() {
var Main= document.getElementById('container').getElementsByTagName('div');
for(var i=0; i<Main.length;i++){
Main[i].innerHTML+= '<span class="title">box '+(i+1)+'</span>';
}
}
DEMO
Replace all your JS with this below and place the script tag as the last tag in your body tag to assure the DOM is ready when this is called. You could also call this function from the onload event.
(function(){
var Main= document.getElementById('container').getElementsByTagName('div');
for(var i=0; i<Main.length;i++){
Main[i].innerHTML += "box"+i;
}
})();
http://jsfiddle.net/mmjW9/