image not respecting width property in IE8 - javascript

Below is the code i made to recreate issue in a simpler manner
<html>
<head>
<title>test</title>
<style>
#container{
width:500px;
background-color:green;
}
table{
width:100%;background-color:blue;
}
table tr td img{
max-width:100%;
width:100%;
}
</style>
</head>
<body>
<div id="container" style="">
<table style="">
<tr>
<td><img src="http://go-grafix.com/data/wallpapers/20/green-574309-3888x2592-hq-dsk-wallpapers.jpg"/></td>
</tr>
</table>
</div>
</body>
</html>
Basically this works fine in chrome and other browsers
But in IE8, the max-width property is not obeyed. I also tried using the width property still no luck
Any suggestions?
P.S: I dont want to have it in px, i want to have it in % only
Here is the fiddle link

Try by giving width and height properties inline
<img width="100" height="100"/>
or
<img style="width:100;height:100"/>

To make the responsive image. Just apply the style as follows:
<img src="img/xyz.jpg" class="xyz-img" width="100" height="100" />
<style> .xyz-img{width:100%; height:auto;} </style>

Related

Can't find how to center my ads. I have tried align="center" and margin:auto but nothing works.

<div id="537267839_INSERT_SLOT_ID_HERE"
style="width:768px;height:90px;margin:auto;">
<noscript>
<p align="center">
<iframe id="a1651026db" name="a1651026db" src="//oncampusweb-d.openx.net/w/1.0/afr?auid=537267839&cb=INSERT_RANDOM_NUMBER_HERE"frameborder="0" scrolling="no" width="728" height="90" align="center"display:block;>
</p>
</iframe></noscript>
</div>
<script type="text/javascript">
var OX_ads = OX_ads || [];
OX_ads.push({
slot_id: "537267839_INSERT_SLOT_ID_HERE",
auid: "537267839"
});
</script>
<script type="text/javascript" src="//oncampusweb-d.openx.net/w/1.0/jstag">
</script>
In this code I want to center the ad being placed. I can't figure out how. I tried align="center" in style and margin:auto but it doesnt work.
Try:
margin: 0 auto;
0 for the top/bottom and auto for left/right
Try using a flex box to center align child components both vertically and horizontally.
<div id="537267839_INSERT_SLOT_ID_HERE"
style="width:768px;height:90px;display:flex;justify
content:center;align-items:center;">
Wrap it:
<div style="width:100%; text-align:center">
your code goes here
</div>

making a div fill the entire screen with d3

In jquery it's easy enough. Just do the following:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body style="margin: 0; padding: 0">
<div id="test" style="background: black"></div>
</body>
<script>
$('#test').width($(window).width());
$('#test').height("100%");
</script>
Demo:
http://www.frostjedi.com/terra/scripts/demo/fullsize-jquery.html
In D3, however, it's not quite as clear to me. Here's what I'm doing:
<script src="http://d3js.org/d3.v3.min.js"></script>
<body style="margin: 0; padding: 0">
<div id="test" style="background: black"></div>
</body>
<script>
d3.select("#test").attr("width", window.innerWidth);
d3.select("#test").attr("height", "100%");
</script>
Demo:
http://www.frostjedi.com/terra/scripts/demo/fullsize-d3.html
It's like the div isn't being resized at all.
So how do I do, with D3, what I'm doing with jquery? Thanks!
The jquery is setting the css height. You can achieve the same thing in d3 by:
d3.select("#test").style("height", "100%");
maybe you can use css to do this.
in the css file:
#fullScreen{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background-color:#000;
}
and in the html file:
<body>
<div id="fullScreen"></div>
</body>

jQuery and Js functions syntax mixing

I have small problem with the following. This is ofc just a snippet of the whole code and it is usually run through a setInterval(time,function); command but I'd like to replace the auto-sliding pictures by having instead a "next" button, why can't I just use jQuery and stick it into a
$("#nextBtn").click(nextSlide);
command ? I get my button appearing but no event. Could it be that I'm putting the jQuery command in a JS
function onLoadWindow(e) {}
instead of jQuery's
$(document).ready(function() {})
I just finished learning the basics of JS recently and started jQ shortly after, so I'm still a beginner in both but with some prior programming experience with Java. I'm kinda new to mixing syntax's together. Thanks a bunch for the help! =)
EDIT : replaced code snippet with full code. I tried skimming it by taking out what wasn't needed like a couple tags and relevant styling. But now it seems I can't even get the div button to send text to console so Im pretty sure there's an obvious "noob" error somewhere, sorry for "wasting" people's time ..
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS Slideshow</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.slide {
height:200px;
width:320px;
position:absolute;
opacity:0;
}
img {
width:100%;
height:100%;
}
#slideshow {
position:relative;
}
.active {
opacity:1;
transition:opacity 1s;
}
#nextBtn {
display:block;
float:left;
height:25px;
width:40px;
background-color:black;
margin-top:210px;
}
</style>
<script type="text/javascript">
window.addEventListener("load",onLoadWindow);
var active_slide;
var slides;
function onLoadWindow(e) {
var slideShow=document.getElementById("slideshow");
slides=slideShow.getElementsByTagName("div");
active_slide=0;
slides[0].classList.add("active");
//setInterval(nextSlide,10000);
$("nextBtn").click(nextSlide);
}
function nextSlide () {
slides[active_slide].classList.remove("active");
active_slide++;
active_slide%=3;
slides[active_slide].classList.add("active");
}
</script>
</head>
<body>
<div id="slideshow">
<div class="slide">
<img src="IMG/bridge.jpg" alt="" title="" />
</div>
<div class="slide">
<img src="IMG/leaf.jpg" alt="" title="" />
</div>
<div class="slide">
<img src="IMG/road.jpg" alt="" title="" />
</div>
</div>
<div id="nextBtn"></div>
</body>
</html>
it was indeed just a missing hash symbol to correctly refer to the Id .. thanks to all and of course VeXii for pointing it out x)

how to change the background images with fade

I have the code below,and I want to images to be change with a fade,the images now are been replaced by the function 'changeBg',but they are just been replaced without fade.
how can I "merge" between the function that's changing the images and the function that in charge of the fade.
thanks.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>none</title>
<link rel="stylesheet" type="text/css" href="Css/design.css" >
<script src="query-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(document).ready(function() ({$('').fadeIn(1000);
});
</script>
<script language="JavaScript">
function changeBg (color) {
document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-repeat";}
</script>
</head>
<body>
<div id="wrapper" class="wrapper">
<div class="logo"><img border="0" src="Images/logo.png" >
</div>
<div class="menu">
<img border="0" src="Images/arrowleft.png" >
<img border="0" src="Images/black.png" onclick="changeBg(this.name);" name="black">
<img border="0" src="Images/blue.png" onclick="changeBg(this.name);" name="blue">
<img border="0" src="Images/fuksia.png" onclick="changeBg(this.name);" name="fuksia">
<img border="0" src="Images/brown.png" onclick="changeBg(this.name);" name="brown">
<img border="0" src="Images/orange.png" onclick="changeBg(this.name);" name="orange">
<img border="0" src="Images/red.png" onclick="changeBg(this.name);" name="red">
<img border="0" src="Images/grey.png" onclick="changeBg(this.name);" name="grey">
<img border="0" src="Images/white.png" onclick="changeBg(this.name);" name="white">
<img border="0" src="Images/arrowright.png" >
</div>
</body>
</html>
Thanks!
If I understand you correctly, you might be able to fade the background out, change it, then fade it back in again? Like this:
function changeBg (color) {
$('#wrapper').fadeOut(1000,function(){
$(this).css('background','url(Images/'+color+'.jpg) no-repeat').fadeIn(1000);
});
}
The cross-fading (fade out while fading in) is achieved in jQuery by having the statements straigh in line and not inside functions from previos animation.
Also, I understand that you want JUST THE BACKGROUND IMAGE to fadeout and fadein; not the actual contents of the page.
To achieve that, make your background image a separate item altogether but inside of the main div you have backgrounded:
<div id='wrapper' style='position:relative' > <!-- must be relative -->
<img id='bg1' src='initial.image' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
<img id='bg2' src='initial.imageTWO' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
</div>
function changeBackground(which) {
$('#bg'+which).attr('src','current-image.xxx').fadeOut('slow');
which = (which = 1) ? 2 : 1;
$('#bg'+which).attr('src','next-image.xxx').fadeIn('slow');
setTimeout('changeBackground('+which+')',2000);
}
$(document).ready( function () {
$('#bg1').attr('src','image-name.xxx').fadeIn('slow');
setTimeout('changeBackground(1)',2000); //every 2 seconds?
. ......
});
In case you have various images for the "slide show", you might want to add a random
number generation for which picture to show next.

How to apply 100% height to div?

I want to make the last/third div to be filled the whole remaining space. I given the 100% height but there is scroll bar is coming, which i dont want to show. I there any CSS solution for same. if not possible from css then the jQuery/JS solution will be fine.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="display:block;height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
In jQuery, you can try something like this:
$(function() {
$(window).resize(function() {
$('div:last').height($(window).height() - $('div:last').offset().top);
});
$(window).resize();
});
Whenever the window is resized, the last div's height is modified so that the div extends to the bottom of the page. Window's resize method is called on page load so that the div is resized immediately.
If you substract the top offset of the div from the height of the window, you are left with the maximum height available. If you have margins, borders of padding applied, you might have to adjust the value which is substracted, for example:
$('div:last').height($(window).height() - $('div:last').offset().top - 30);
Assuming you want the div 30px from the bottom of the window.
On modern browsers: set position: relative on the container div, position: absolute on the third div. Then you can position it to the top and bottom of the container the same time: top: 0px, bottom: 0px;
You could also use faux columns by adding a vertically repeating background image to the CSS making the columns appear toy the space - this gives the appear. You could add this image to the div that wraps the three columns or to the body tag.
If these columns a going to have content in them it's probably worth adding some as the columns will behave differently.
You can hide the overflow in the containing DIV:
<html>
<head>
<style>
*{margin:0;padding:0;}
html,body{height:100%;}
</style>
</head>
<body>
<div style="overflow:hidden;height:100%">
<div style="height:100px;background-color:#ddd"></div>
<div style="height:25px;background-color:#eee"></div>
<div style="height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Note that content might dissapear when resizing the window using this technique.
You can use pure CSS height:100% (where 100% is the height of the visible area in the window) values in quirks mode by not using DOCTYPE at all or using IE-faulty HTML 4.0 DOCTYPE (without the .dtd url)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body style="margin:0; padding:0; overflow:hidden;">
<div style="height: 100%; background: red"></div>
</body>
</html>
You can ditch the <!DOCTYPE.. entirely, it still would have the same effect. overflow:hidden declaration in body style is to get rid of the empty scrollbar in IE. But remember - this is quirks mode which means that you are on unpredictable territory, CSS box model differs from browser to browser!
html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="position:fixed;top:125px;height:100%;width:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Perhaps this could work?! But I don't know whats happens if there is to mutch text...
Simply don't worry about it if your goal is to have the colour fill the bottom.
Set the colour of the outer div, and let the third one resize its height however it wants as content goes in.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%;background-color:#ccc">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style=""> </div>
</div>
</body>
</html>
The property 'height: 100%;' will instruct browsers to take the 100 per cent of the available screen space for that particular div, which means that your browser will check the browsing space size and return it to the CSS engine without checking whether there are any elements inside it.
The only workaround that I see to fit here is to use the solution provided by David to use 'position: absolute; bottom: 0;' for that div.
it a bit ugly, but it works..
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="width:100%;height:100%;">
<div style="width:100%;height:100px;background-color:#ddd;"> </div>
<div style="width:100%;height:25px;background-color:#eee;"> </div>
<div style="width:100%;height:100%;background-color:#ccc;margin-bottom:-1000em;padding-bottom:1000em;"> </div>
</div>
</body>
</html>
Here's a litle jquery fix I have done:
<html>
<head>
<title>test</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
</script>
</head>
<body style="height: 100%; padding: 0px; margin: 0px;">
<div id="parentDiv" style="height: 100%; width: 100%; position:absolute;">
<div id="firstDiv" style="height: 100px; background-color: #ddd">
</div>
<div id="secondDiv" style="height: 25px; background-color: #eee">
</div>
<div id="thirdDiv" style="background-color: #ccc;">
a</div>
</div>
</body>
</html>
$(window).resize(function(){
$('.elastic').each(function(i,n){
var ph = $(this).parent().height();
var pw = $(this).parent().width();
var sh = 0;
var s = $(this).siblings().each(function(i,n){
sh += $(this).height();
})
$(this).height(ph-sh);
sh = 0, ph = 0, s=0;
});
});
put the following on on your script tag or external javascript.
then change
when you resize the window... it will automatically fit its height to available space on the bottom. you could have as many divs as you like however you can only have one elastic inside that parent. couldnt be bothered to calculate multiple elastics :) hope it helps
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
$(window).resize(function(){ var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
This should be included in case the browser is resized....
window.onload = setHeight
window.onresize = setHeight
function setHeight() {
document.getElementById('app').style.height = window.innerHeight + "px"
}

Categories

Resources