{"id":57489,"date":"2022-11-16T03:01:48","date_gmt":"2022-11-15T17:01:48","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=57489"},"modified":"2023-01-02T08:10:52","modified_gmt":"2023-01-01T22:10:52","slug":"responsive-web-design-landing-page-image-map-onresize-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/responsive-web-design-landing-page-image-map-onresize-tutorial\/","title":{"rendered":"Responsive Web Design Landing Page Image Map Onresize Tutorial"},"content":{"rendered":"
\"Responsive<\/a>

Responsive Web Design Landing Page Image Map Onresize Tutorial<\/p><\/div>\n

We try to not make the onresize<\/i><\/a> event a “second class citizen” in our thinking here, and we wait for the day we think about it as a matter of course, and we’ll know we’ve arrived at some representation of 1000 hours of practice<\/a> type of milestone, perhaps?! But, with the work of Responsive Web Design Landing Page Image Map Tutorial<\/a> we know we could improve the user experience of those using One Image Website clicking functionality on our new Landing Page, by keeping the functionality intact, particularly at the right hand side, by acting when the user resizes the window using the changed<\/a> index.php<\/a> Landing Page<\/a>, as per<\/font>, the Javascript onresize event logic …<\/p>\n


\n function onr() {
\n if (onrok) {
\n if (eval( Math.abs(eval('' + window.innerHeight) - eval('' + csh) ) + Math.abs( eval('' + window.innerWidth) - eval('' + csw) )) >= 200) {
\n if (document.getElementById('divimif').innerHTML != '') {
\n document.getElementById('divimif').innerHTML='';
\n csh='-1';
\n onl();
\n return;
\n }
\n }
\n if (eval( Math.abs(eval('' + window.innerHeight) - eval('' + csh) ) + Math.abs( eval('' + window.innerWidth) - eval('' + csw) )) >= 100) {
\n if (document.getElementById('divimif').innerHTML != '') {
\n csw='' + window.innerWidth;
\n csh='' + window.innerHeight;
\n }
\n }
\n }
\n }<\/font>
\n
\n function onl() {
\n onrok=false;
\n if (eval('' + screen.width) <= 420 && ('' + csw).indexOf('-') != -1) {
\n \/\/alert(screen.width);
\n document.getElementById('topspan').innerHTML=document.getElementById('topspan').innerHTML.replace('RJM Programming', 'RJM<\/h1><h1>Programming').replace(\/\\<\\\/hJUNK1\/g, '<\/h2');
\n } \/\/else if (eval('' + screen.width) <= 480) {
\n \/\/alert('0' + screen.width);
\n \/\/}
\n if (('' + csh).indexOf('-') != -1) {
\n csw='' + screen.width;
\n csh='' + screen.height;
\n lastcsw=csw;
\n lastcsh=csh;
\n }
\n
\n var myiz=document.getElementById('ifzero').getBoundingClientRect();
\n var myhr=document.getElementById('myheader').getBoundingClientRect();
\n var myh=eval('' + myhr.height);
\n var myt=eval('' + myhr.top);
\n var widthleft=eval(eval('' + myiz.left) - eval('' + myhr.left));
\n var widthmiddle=eval('' + myiz.width);
\n var widthright=eval(eval('' + myhr.width) - eval('' + myiz.width) - eval('' + myiz.left));
\n if (document.getElementById('navTop')) {
\n var myalthr=document.getElementById('navTop').getBoundingClientRect();
\n myh-=eval('' + myalthr.height);
\n myt=eval('' + myalthr.height);
\n }
\n var heighttop=eval(eval('' + myiz.top) - eval('' + myt));
\n var heightmiddle=eval('' + myiz.height);
\n var heightbottom=eval(eval('' + myh) - eval('' + myiz.height)); \/\/ - eval('' + myiz.top));
\n if (window.parent != window) {
\n myh=myh;
\n } else if (('' + window.opener).replace(\/^undefined\/g,'').replace(\/^null\/g,'')) {
\n myh=myh;
\n } else if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPaJUNKd|iPod|Opera Mini|IEMobile\/i)) {
\n myh=myh;
\n } else {
\n document.getElementById('myimif').src=document.URL.split('?')[0].split('#')[0] + '?left=' + myhr.left + '&top=' + myt + '&width=' + myhr.width + '&height=' + myh + '&ifleft=' + myiz.left + '&iftop=' + myiz.top + '&ifwidth=' + myiz.width + '&ifheight=' + myiz.height + '&widthleft=' + widthleft + '&widthmiddle=' + widthmiddle + '&widthright=' + widthright + '&heighttop=' + heighttop + '&heightmiddle=' + heightmiddle + '&heightbottom=' + heightbottom;
\n setTimeout(imbit, 5000);
\n }
\n onrok=true;
\n }
\n
\n<\/code><\/p>\n

… which is quite often efficient calling onload<\/i> event logic in its workflow.<\/p>\n

\n

\n

Previous relevant Responsive Web Design Landing Page Image Map Onresize Tutorial<\/a> is shown below.<\/p>\n

\"Responsive<\/a>

Responsive Web Design Landing Page Image Map Tutorial<\/p><\/div>\n

The recent Responsive Web Design Landing Page Incarnation Tutorial<\/a> said …<\/p>\n

\nSo, why keep the old way? Well, we packed the “old way” with content rich functionality, and do not want to ditch that yet, but maybe over time?!\n<\/p><\/blockquote>\n

We’re just over<\/i> time, aren’t you?! And so, we arrive at a long planned for<\/i> tilt at Image Map<\/a> functionality that we often turn to Mobilefish.Com and its excellent Image Map Creation<\/a> to help us out … but not today?! Why not? We have a funny set of needs, they being …<\/p>\n