CODEWITHSUNDEEP
jqueryhtml
Parqueted
Parqueted

Reputation: 39

Responsive div, how to do it

I got my website working as a responsive size, when i resize the window the background will automaticly adjust to the window size. Now i need a scrollbox (explained in the picture) that does the same, adjusting to whatever size the browser window is and stay at the same location as it is supposed to be.

http://oi57.tinypic.com/142tck.jpg

I currently have this code, I'm not a website developer so please be kind to me haha.

<html>
<head>
<meta charset="utf-8"/>
<link rel="favicon" type="image/ico" href="favicon.ico"/>
<title>Rolling Barrel :: Sport & Game</title>
<style>
div {
	width: 100%;
}

img[usemap] {
		border: none; height: auto; max-width: 100%; width: auto;
}

#background {
	position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%; z-index: 1;
}

div.text {
	position: fixed; top: 50; left: 50; width: 100px; height: 100px; overflow: scroll; z-index: 2;
}
</style>
</head>
<body>
<div>
<img src="background.jpg" id="background" width="1920" height="936" usemap="#imagemap"/>
<map name="imagemap">
<area shape="rect" coords="212,103,322,150" href="/home"/>
<area shape="rect" coords="335,103,456,150" href="/nieuws"/>
<area shape="rect" coords="468,103,677,150" href="/kinderfeestjes"/>
<area shape="rect" coords="690,103,918,150" href="/beeldmateriaal"/>
<area shape="rect" coords="930,103,1057,150" href="/contact"/>
<area shape="rect" coords="1070,103,1201,150" href="/verhuur"/>
<area shape="rect" coords="1212,103,1354,150" href="/zakelijk"/>
<area shape="rect" coords="1364,103,1732,150" href="/rolling-barrel-centers"/>
</map>
</div>
<div class="text">
You can use the overflow property when you want to have better control of the layout. The default value is visible.
</div>
<script src="../jquery/1.js"></script>
<script src="../jquery/2.js"></script>
<script>
$(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
});
</script>
</body>
</html>

It has to do something with the script, but I can't figure out how to let my div also use that jquery script...

Thanks!

Upvotes: 1

Views: 188

Answers (1)

ilaif
ilaif

Reputation: 348

If you just want your div responsive and flexible, use position: absolute and % for width. Notice that height is not really responsive, but width is what you should worry about.

See the refactored 'div.text' css rules: 

<html>
<head>
<meta charset="utf-8"/>
<link rel="favicon" type="image/ico" href="favicon.ico"/>
<title>Rolling Barrel :: Sport & Game</title>
<style>
div {
	width: 100%;
}

img[usemap] {
		border: none; height: auto; max-width: 100%; width: auto;
}

#background {
	position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%; z-index: 1;
}

div.text {
	position: absolute; top: 100px; left: 20%; width: 40%; height: 200px; overflow: scroll; z-index: 2;
}
</style>
</head>
<body>
<div>
<img src="background.jpg" id="background" width="1920" height="936" usemap="#imagemap"/>
<map name="imagemap">
<area shape="rect" coords="212,103,322,150" href="/home"/>
<area shape="rect" coords="335,103,456,150" href="/nieuws"/>
<area shape="rect" coords="468,103,677,150" href="/kinderfeestjes"/>
<area shape="rect" coords="690,103,918,150" href="/beeldmateriaal"/>
<area shape="rect" coords="930,103,1057,150" href="/contact"/>
<area shape="rect" coords="1070,103,1201,150" href="/verhuur"/>
<area shape="rect" coords="1212,103,1354,150" href="/zakelijk"/>
<area shape="rect" coords="1364,103,1732,150" href="/rolling-barrel-centers"/>
</map>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<script src="../jquery/1.js"></script>
<script src="../jquery/2.js"></script>
<script>
$(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
});
</script>
</body>
</html>

In general, I wouldn't use this script, and would read a bit more about CSS, like using background-image and background-size css3 rules that will do this job of resizing background better than this library.

Upvotes: 1

Related Questions