half responsive website not work - javascript

I've tried to build a website that will be half responsive means header+2 logos will not change as the window change its size but be fully sized.
And the 6 pictures will change their height+width as long as window.resize to fit the new window size.
I've tried this code but:
the header+2 logos are responsive too and i want them to be fully sized(as maximum browser width) all time.
the height and width are not compatible to the screen and its too big.
thanks for your advice how to fix.
CODE
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="first()">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).resize(changeImagesSize);
function first()
{
calc();
changeImagesSize()
}
function calc()
{
window.img11 = new Image();
window.img12 = new Image();
window.img13 = new Image();
window.img14 = new Image();
window.img15 = new Image();
window.img16 = new Image();
img11.src="1.jpg";
img12.src="2.jpg";
img13.src="3.jpg";
img14.src="4.jpg";
img15.src="5.jpg";
img16.src="6.jpg";
}
function changeImagesSize()
{
var img = document.getElementById('header1');
var heightheader = img.clientHeight;
var heightavailable=$('body').innerHeight()-heightheader;
var widthavailable=$('body').innerWidth();
var x=($(window).width()/screen.width);
var img1width=widthavailable*(img11.width/(img11.width+img12.width+img13.width+20));
var img2width=widthavailable*(img12.width/(img11.width+img12.width+img13.width+20));
var img3width=widthavailable-img2width-img1width-20;
var img1h=heightavailable*(img11.height/(img11.height+img14.height+heightheader+20));
var img2h=heightavailable*(img12.height/(img12.height+img15.height+heightheader+20));
var img3h=heightavailable*(img13.height/(img13.height+img16.height+heightheader+20));
$('#img1').width(img1width);
$('#img2').width(img2width);
$('#img3').width(img3width);
$('#img1').height(img1h);
$('#img2').height(img2h);
$('#img3').height(img3h);
var img4width=widthavailable*(img14.width/(img14.width+img15.width+img16.width+20));
var img5width=widthavailable*(img15.width/(img14.width+img15.width+img16.width+20));
var img6width=widthavailable-img5width-img4width-20;
var img4h=heightavailable*(img14.height/(img14.height+img11.height+heightheader+20));
var img5h=heightavailable*(img15.height/(img15.height+img12.height+heightheader+20));
var img6h=heightavailable*(img16.height/(img16.height+img13.height+heightheader+20));
$('#img4').width(img4width);
$('#img5').width(img5width);
$('#img6').width(img6width);
$('#img4').height(img4h);
$('#img5').height(img5h);
$('#img6').height(img6h);
}
</script>
<div id="header" style="position:relative;" >
<img id='header1' src="header.png" style="position:absolute; width:100%;"/>
<img id="logo1" src="logo1.png" style="position:absolute;left:30px;"/>
<img id="logo2" src="logo2.png" style="position:absolute; right:30px;"/>
</div>
<img id='img1' src="1.jpg"/>
<img id='img2' src="2.jpg"/>
<img id='img3' src="3.jpg"/>
<img id='img4' src="4.jpg"/>
<img id='img5' src="5.jpg"/>
<img id='img6' src="6.jpg"/>
<style>
body{overflow:hidden;}
img{height:auto;}
</style>
</body>
</html>
The arrangement should be
header with 2 logos pictures(not move) be fully all time
1 2 3 (one line)
4 5 6 (second line)
(the pictures)
should move and fit to window.
thanks a lot for help

you are trying to build a responsive website in completely wrong direction. You should use media queries and define width of your required width in percentages. in css you can define size of the logos in percentage which will change according to screen. if you want to learn how to build a good responsive site please comment if you have more question.

Related

Load and play a gif with javascript onclick event

On my website I have three images 1.png, 2.png and 3.png. When I click on 1.png, I want the animated gif 1a.gif to be loaded and shown/updated in the img tag located in <div id="container">. When I click on 2.png, 2a.gif should be displayed (while 1a.gif vanishes) and so on... This is my code:
<html>
<body>
<div>
<img src="1.png" onclick="document.getElementById('img').src = '1a.gif'" />
<img src="2.png" onclick="document.getElementById('img').src = '2a.gif'" />
<img src="3.png" onclick="document.getElementById('img').src = '3a.gif'" />
</div>
<div id="container">
<img id="img" src="1a.gif" />
</div>
</html>
</body>
It is working, however unreliable (tested with firefox and chrome)! When I refresh the html page and click on 1.png, than on 2.png ... suddendly at one point only the first frame of the animated gif is shown. I have to click on the same image (1,2 or 3.png) again in order to make the gif run. Why? I am looking for a light weight javascript solution without jquery. I am just asking myself why the gif is not played properly once I click on the image.
As a side note: It would be nice to show a loading image while the gif (5 MB) is loading. I failed to achive that using css:
#container {background:url('loading.png') no-repeat; }
In this case the loading image doesn't show up at all. Probably because I am updating directly from one (e.g. 1a.gif) to another (e.g. 2a.gif).
Showing it right before loading the gif did not help as well:
<img src="1.png" onclick="document.getElementById('img').src = 'loading.png';
document.getElementById('img').src = '1a.gif'" />
There are many ways of implementing this kind of thing, but to keep in line with how you're doing it, you'll want to hook into the onload event of the img.
Note that in this snippet, I don't have access to your GIFs, so I'm using the dummyimage.com service, which is pretty fast, so you don't see the "loading" for very long.
window.onload = function() {
var img = document.getElementById('img');
var container = document.getElementById('container');
var showImage = function showImage() {
img.style.display = "inline";
container.style.backgroundImage = "";
};
img.addEventListener('load', showImage);
img.addEventListener('error', showImage);
var thumbs = document.getElementsByClassName('thumb');
for (var i = 0, z = thumbs.length; i < z; i++) {
var thumb = thumbs[i];
var handler = (function(t) {
return function clickThumb() {
container.style.backgroundImage = "url('https://dummyimage.com/500x500/000/fff.gif&text=loading')";
img.style.display = "none";
img.src = t.dataset['image'];
};
})(thumb);
thumb.addEventListener('click', handler);
}
};
<div>
<img src="1.png" class="thumb" data-image="https://dummyimage.com/500x200/000/fff.gif" />
<img src="2.png" class="thumb" data-image="https://dummyimage.com/200x200/000/fff.gif" />
<img src="3.png" class="thumb" data-image="https://dummyimage.com/500x500/000/fff.gif" />
</div>
<div id="container">
<img id="img" class="main" />
</div>
This happens bacause the second img is not loaded yet!
I suggest you to put the 2 img in 2 different divs and the use javascript to hide/show the entire div!

Replace a smaller image with a larger one (after the larger image loads)

I have a few images of superheroes. These are in divs along with much larger images of astronomical objects. These larger images take a while to load. I want the astronomical images to replace the superhero images after they've loaded.
Here's what I have so far: https://jsfiddle.net/vmpfc1/5typ7pnp/1/
HTML:
<body>
<div class="image-wrapper">
<div class="pix"style="background: url('http://baltimorepostexaminer.com/wp-content/uploads/2012/07/spider-man2_pole_4681.jpg'); height:200px;width:200px;">
</div>
<div class="true-image" style="background: url('http://m1.i.pbase.com/o9/27/876727/1/151851961.JlvdQ9xW.GreatCarinaKeyholeandRedHoodNebulae3454x2566pixelsimproved3.jpg')"></div>
</div>
<div class="image-wrapper">
<div class="pix"style="background: url('https://upload.wikimedia.org/wikipedia/en/7/75/Comic_Art_-_Batman_by_Jim_Lee_%282002%29.png'); height:200px;width:200px;">
</div>
<div class="true-image" style="background:url(' https://www.nasa.gov/sites/default/files/706439main_20121113_m6triptych_0.jpg')"></div>
</div>
</body>
js:
setTimeout(function () {
$('.true-image').attr('style').on('load', function () {
$('.pix')({
'background-image': 'url(' + $(this).attr('src') + ')'
});
});
}, 0);
css:
.true-image {
display : none;
}
I am a javascript newbie -- is there a decent way to make the larger space images replace the superhero placeholders?
Is there an easier way to do this in HTML5?
Edited Answer to reflect changes:
<div style="background-image: url('https://i.imgur.com/sOcRl3M.jpg'); height:400px;width:400px" rel="https://i.imgur.com/xr7CRQo.jpg">
</div>
<div style="background-image: url('https://i.imgur.com/1m0NwgN.png'); height:400px;width:400px" rel="https://i.imgur.com/nlFPkc4.jpg">
</div>
Then you can have jQuery to loop through all images which has a rel attribute. 2 or 2,000 images, it does not matter.
$('div[rel]').each(function() {
var rel = $(this).attr('rel');
var self = $(this);
var img = new Image();
$(img).load(rel, '', function() {
self.css('background-image', 'url('+rel+')');
});
});
You can see it working here: https://jsfiddle.net/83zLumuk/4/

Appending the elements within div using appendchild attribute

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)+'%');;
}
}

Onmouseover - need to set position of new image

This is driving me crazy. Here is the code I am using - with my website names as xxxxx due to sensitive nature of site. I need to set a position for the image that comes up when you hover over. Something like this - position:absolute; TOP:200px; LEFT:340px; WIDTH:500px; HEIGHT:200px. The image I am hovering over should remain static.
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "http:xxxx/LgThumbxxx.png";
staticImage1 = new Image();
staticImage1.src = "http:xxx/smThumbxxx.png";
loadImage2 = new Image();
loadImage2.src = "http:xxxx/LgThumbxxxxx.png";
staticImage2 = new Image();
staticImage2.src = "http:xxx/smThumb_xxxxxx.png";
loadImage3 = new Image();
loadImage3.src = "http:xx/LgThumb_xxx.png";
staticImage3 = new Image();
staticImage3.src = "http:xxxx/smThumb_xxxx.png";
// End -->
</script>
</head>
<body>
<span onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="http:xxx/Thumbxxx.png" border=0></span>
<span onmouseover="image2.src=loadImage2.src;" onmouseout="image2.src=staticImage2.src;">
<img name="image2" src="http:xxxxx/Thumbxxxx.png" border=0></span>
<span onmouseover="image3.src=loadImage3.src;" onmouseout="image3.src=staticImage3.src;">
<img name="image3" src="http://xxxx/Thumb_xxxxx.png" border=0></span>
</body>

javascript image slider hyperlinks

I am working on a website and my client wants an image slider where each slide links to a different page on the site. I would prefer if this were to stay in Javascript as I cant seem to wrap my head around jquery. Here is my code
Javascript code in the header
`<script type="text/javascript">
<!--
var img1 = new Image()
img1.src="DowntownEventNew.jpg"
var img2 = new Image()
img2.src="Shakespeare.jpg"
var img3 = new Image()
img3.src="DowntownConcertNew.jpg"
var img4 = new Image()
img4.src="Rangerettes.jpg"
//-->
</script>
HTML 5 and Javascript in the body
<div class="content">
<div id="slide">
<div class="slide_container">
<img src="DowntownEventNew.jpg" name="slide" />
<script type="text/javascript">
<!--
var pic =1
function slides() {
if (!document.images)
return
document.images.slide.src=eval("img" +pic+".src")
if (pic < 4)
pic++
else
pic =1
setTimeout("slides()",5000)
}
slides()
//-->
</script>
</div>
</div>
Use a plugin like Nivo Slider (that way you don't really need to develop the jQuery from scratch), and then wrap the image in an anchor tag <a>:
<div id="slider">
<img src="images/thing.jpg" alt="No Link" />
<img src="images/thing2.jpg" title="Link!" />
</div>

Categories

Resources