AND recalculates it and when the web page is stretched! You do have to play with and allow for padding and such, but it will give you that single row of "*featured listings*"! ------------------- Test.tpl: Load
--------------------------- external file: featured.tpl [text]NUM=[format 8.0f][math]([LOAD] - 95) /200[/math][/format][/text] [search db=../0.0.0.0.0.0.0.0.01.00.L1.COUNTRIES.DB&neL0datarq=WTF&max=[NUM]]NUM=[NUM] [founditems][L1.Territory.LG],[/founditems] [/Search] --------------------------- --0000000000001885610563fba571 Content-Type: text/html; charset="UTF-8" Content-Transfer-Encoding: quoted-printable
I'm finally diving into the responsive web design worl= d and having trouble grasping the grid system and I came across a problem. = Designing a real estate website I wanted the
first row "feature= d listings". However, when the grid collapses I end up with multiple r= ows of "featured listings". So I spent two days working a solutio= n. Mind you, I'm a novice! What the code below does... It sends the wid= th ON "load" to an external page with the correct about of "= featured listings" to properly fit my "180 px width" <div= > AND recalculates it and when the web page is stretched! You do have to= play with and allow for padding and such, but it will give you that single= row of "
featured listings"!
-------------------
=
Test.tpl:
<head>
<script>
$(docume= nt).ready(function(){
=C2=A0{$("#div1").load("feat= ured.tpl?LOAD=3D" + $(window).width());}
});
<= /div>
var resizeTimer;
$(window).on('resize', functio= n() {
=C2=A0 clearTimeout(resizeTimer);
=C2=A0 resizeTi= mer =3D setTimeout(function() {
=C2=A0{$("#div1").load(= "featured.tpl?LOAD=3D" + $(window).width());}
=C2=A0 },= 600);
});
</script>
</head>
<body>
Load<hr>
<div id=3D"div1"></div>
=
<form method=3Dpost action=3D"[thisurl]">
&l= t;input id=3D"clientWidth" type=3D"text" name=3D"w= idth" value=3D"">
<input type=3D"submit= " value=3D"refresh">
</form>
<script>=C2=A0
=C2=A0 document.getElementById(= "clientWidth").value =3D document.documentElement.clientWidth;
</script>
</body>
&l= t;/html>
---------------------------
external = file:=C2=A0featured.tpl
[text]NUM=3D[format 8= ..0f][math]([LOAD] - 95) /200[/math][/format][/text]
[search db=3D../0.0.0.0.0.0.0.0.01.00.L1.COUNTRIES.DB&neL0datarq=3DWT= F&max=3D[NUM]]NUM=3D[NUM][founditems][L1.Territory.LG],[/fou= nditems]
[/Search]
---------------------------
--------------------------------------------------------- This message is sent to you because you are subscribed to the mailing list talk@webdna.us To unsubscribe, E-mail to: talk-leave@webdna.us archives: http://www.webdna.us/page.dna?numero=3D55 Bug Reporting: support@webdna.us --0000000000001885610563fba571-- .
Associated Messages, from the most recent to the oldest:
| |
- [WebDNA] responsive designs rows (Brian Harrington 2018)
|
1552 --0000000000001885610563fba571 Content-Type: text/plain; charset="UTF-8" I'm finally diving into the responsive web design world and having trouble grasping the grid system and I came across a problem. Designing a real estate website I wanted the *first row* "featured listings". However, when the grid collapses I end up with multiple rows of "featured listings". So I spent two days working a solution. Mind you, I'm a novice! What the code below does... It sends the width ON "load" to an external page with the correct about of "featured listings" to properly fit my "180 px width"
AND recalculates it and when the web page is stretched! You do have to play with and allow for padding and such, but it will give you that single row of "*featured listings*"! ------------------- Test.tpl: Load
--------------------------- external file: featured.tpl
[text]NUM=[format 8.0f]
[math]([LOAD] - 95) /200[/math][/format][/text] [search db=../0.0.0.0.0.0.0.0.01.00.L1.COUNTRIES.DB&neL0datarq=WTF&max=[NUM]]NUM=[NUM]
[founditems][L1.Territory.LG],[/founditems] [/Search] --------------------------- --0000000000001885610563fba571 Content-Type: text/html; charset="UTF-8" Content-Transfer-Encoding: quoted-printable