How could I use javascrip to dynamically resize my svg image map and make sure all links still work?
Hi all,
on my wordpress site I am using a plugin called i World Maps and at the moment the map shows on my website (if you have a large enough monitor) at 1170px in width and 730px in height. When I resize the page, or rotate the mobile device, however the map does not resize, especially when I use it on a vertical mobile phone.
Please see it in action on my site
Is there a javascript based method that could allow me to dynamically and proportionately resize the map (always in the 1170x730 ratio but based on the width of my div.container, which, when there is enough space on the screen, is 1170px in width? Of course I need the links to work as well at any size.
thanks in advance
P.S. I contacted the plugin author and he seems disinclined to help for the 20$ I paid for it and his reply was:
on my wordpress site I am using a plugin called i World Maps and at the moment the map shows on my website (if you have a large enough monitor) at 1170px in width and 730px in height. When I resize the page, or rotate the mobile device, however the map does not resize, especially when I use it on a vertical mobile phone.
Please see it in action on my site
Is there a javascript based method that could allow me to dynamically and proportionately resize the map (always in the 1170x730 ratio but based on the width of my div.container, which, when there is enough space on the screen, is 1170px in width? Of course I need the links to work as well at any size.
thanks in advance
P.S. I contacted the plugin author and he seems disinclined to help for the 20$ I paid for it and his reply was:
Thanks for purchasing! Try and leave the width setting for the map blank. What this will do, is force the map to load with the max width available of it’s div container. So, if it loads in a mobile, it will load in a small size, and if it loads in a big screen, it will load at the available size. However, once loaded, if you resize the window, it will keep the same size, so remember that when testing. More advanced javascript solutions could be implemented, but I don’t have any ready yet. As for now, the google geochart api used to built the map doesn’t work with % values, so I hope this solution works for you!
greetings badwolfff, , I have used SVG images to good effect on web pages, years ago MS Internet Explorer browsers had absolutely terrible support for SVG images, so I did not even try it, but now almost all browsers support SVG.
as to your problem, I have had some success with just using CSS to have width and height adaptions for a svg image -
I can set the way the SVG image has width display by just adding some CSS as -
#svg1 {width:100%;}
and it will be a percentage of the <div> width it is inside of.
The SVG image is a strange kind of thing, it can have vector image elements like -
<path fill="#C3D35E"
and ALSO CSS inside the Image, and also javascript AND regular HTML Like <a> inside the SVG image text definition.
Ask questions if you need more info.
By the way I went to your web site and it is SO SLOW to load, that I can not see it as a MOBIL accessible site.
as to your problem, I have had some success with just using CSS to have width and height adaptions for a svg image -
<style>
#svg1 {width:100%;}
</style>
<div style="text-align:center;">
<img id="svg1" src="geo_shape.svg" />
</div>I can set the way the SVG image has width display by just adding some CSS as -
#svg1 {width:100%;}
and it will be a percentage of the <div> width it is inside of.
The SVG image is a strange kind of thing, it can have vector image elements like -
<path fill="#C3D35E"
and ALSO CSS inside the Image, and also javascript AND regular HTML Like <a> inside the SVG image text definition.
Ask questions if you need more info.
By the way I went to your web site and it is SO SLOW to load, that I can not see it as a MOBIL accessible site.
ASKER
Sorry i didn't get that time to try it
Will do so soon and get back
Thanks
Will do so soon and get back
Thanks
OK, I will say that the SVG image you use is very Complex, as there are many complex paths for each region, and Javascript click events for all of the region paths, Also you use an "add on", you say as - "plugin called i World Maps", which may have things (SGV settings, CSS, and-or javascript) that may effect this SVG image and it's display for a different size display, often a plugin will have a site that has the API for the plugin and a help Forum to ask questions to solve problems, I have not used the "i World Maps" plugin, I mostly commented here because I thought that I may be an image setting.
ASKER
Hi
the site online is already in production so I cannot try this there but I tried it offline and it doesn't work.
It is, as you say, too complex.
Do you know any way I could use ajax to just reload the div upon page resize so that the map would be always the right size?
thanks
the site online is already in production so I cannot try this there but I tried it offline and it doesn't work.
It is, as you say, too complex.
Do you know any way I could use ajax to just reload the div upon page resize so that the map would be always the right size?
thanks
OK, , I have considered what you ask -
"use ajax to just reload the div upon page resize"
and you can certainly do this, I will start by saying that there is a javascript "Event" called "onresize", which is applied to the <body> when it changes dimensions, see this w3schools page for some tech specs about it -
http://www.w3schools.com/jsref/event_onresize.asp
I have used Ajax in several many different ways, however, it is my view that even developers experienced in HTML and javascript, have a difficult time understanding why and how the browser AJAX works, and what the MANY factors there are in the THREE step process for AJAX, the first step is in the browser, which gathers info from user inputs (or gets No info at all), and sends this info or command identifiers to the Server as a URL. The second step is in the Server machine (a separate machine from the browser computer), where usually some sort of Database SELECT is used to get "dynamic" data, and this changing data is sent back to the Browser machine as a response String. The third step in back in the browser, which takes the response string and uses it or converts it to arrays-objects, and changes <div> or <span> on the page.
So using ajax for the first time, is not so easy for most.
My opinion on this is, , that since you use the literal "text" for the SVG as a <svg version="1.1" that this <svg version="1.1" TEXT could be placed in a javascript variable, and then loaded BACK into a container <div> on the "onresize" event, , However, I looked at you page at -
http://www.associazioneculturaleinasia.it/mappa-culturale/
and in firefox IT DOES resize the SVG map when I change the browser size. But I think that there is already a javascript implement for a ReSize, that uses your "i World Maps" plugin to completely rewrite the map for the new size.
I think that the entire web page string segment for the <!DOCTYPE svg PUBLIC " and the <svg version="1.1" are written to this page AFTER the page is loaded from the server, , by the "i World Maps" plugin.
I do not think that an AJAX solution would work here, but that's just a guess, I would think that the "i World Maps" plugin javascript has a reloadMap( ) function somewhere?
You say your main problem is that in mobil devices the map does not change from the "portrait-vertical" mode to the "landscape-horizontal" mode. Many times for specialty situations in "mobil" page work, you have to use "non-desktop browser" methods to get a half-way workable cure.
Sorry, but now, I do not have the time to research this for the "i World Maps" plugin functioning, . .
This page has several many Javascript add-ons such as "Jquery" and "google" and "rocketscript", and firefox can NOT even deal with all of the javascript, and fails to analyze the javascript additions, and craps out.
If you pay for the "i World Maps" maps thing, go to their Support and ask questions about your problem. If you are not a pying customer, go to there support anyway, and see if you can get help. . The "mobil" horizontal-vertical view change would have to be a common problem, that someone has dealt with, I would think.
Sorry but your page is overly complex for me to even know where to start to try fix it.
You might consider taking out some of the many complexities in your page, users need direct and fast use (easy to navigate and use) web page, or else they go somewhere else in less than 15 seconds.
"use ajax to just reload the div upon page resize"
and you can certainly do this, I will start by saying that there is a javascript "Event" called "onresize", which is applied to the <body> when it changes dimensions, see this w3schools page for some tech specs about it -
http://www.w3schools.com/jsref/event_onresize.asp
I have used Ajax in several many different ways, however, it is my view that even developers experienced in HTML and javascript, have a difficult time understanding why and how the browser AJAX works, and what the MANY factors there are in the THREE step process for AJAX, the first step is in the browser, which gathers info from user inputs (or gets No info at all), and sends this info or command identifiers to the Server as a URL. The second step is in the Server machine (a separate machine from the browser computer), where usually some sort of Database SELECT is used to get "dynamic" data, and this changing data is sent back to the Browser machine as a response String. The third step in back in the browser, which takes the response string and uses it or converts it to arrays-objects, and changes <div> or <span> on the page.
So using ajax for the first time, is not so easy for most.
My opinion on this is, , that since you use the literal "text" for the SVG as a <svg version="1.1" that this <svg version="1.1" TEXT could be placed in a javascript variable, and then loaded BACK into a container <div> on the "onresize" event, , However, I looked at you page at -
http://www.associazioneculturaleinasia.it/mappa-culturale/
and in firefox IT DOES resize the SVG map when I change the browser size. But I think that there is already a javascript implement for a ReSize, that uses your "i World Maps" plugin to completely rewrite the map for the new size.
I think that the entire web page string segment for the <!DOCTYPE svg PUBLIC " and the <svg version="1.1" are written to this page AFTER the page is loaded from the server, , by the "i World Maps" plugin.
I do not think that an AJAX solution would work here, but that's just a guess, I would think that the "i World Maps" plugin javascript has a reloadMap( ) function somewhere?
You say your main problem is that in mobil devices the map does not change from the "portrait-vertical" mode to the "landscape-horizontal" mode. Many times for specialty situations in "mobil" page work, you have to use "non-desktop browser" methods to get a half-way workable cure.
Sorry, but now, I do not have the time to research this for the "i World Maps" plugin functioning, . .
This page has several many Javascript add-ons such as "Jquery" and "google" and "rocketscript", and firefox can NOT even deal with all of the javascript, and fails to analyze the javascript additions, and craps out.
If you pay for the "i World Maps" maps thing, go to their Support and ask questions about your problem. If you are not a pying customer, go to there support anyway, and see if you can get help. . The "mobil" horizontal-vertical view change would have to be a common problem, that someone has dealt with, I would think.
Sorry but your page is overly complex for me to even know where to start to try fix it.
You might consider taking out some of the many complexities in your page, users need direct and fast use (easy to navigate and use) web page, or else they go somewhere else in less than 15 seconds.
ASKER
I put the reload page on resize function using jquery because I needed a patch-up solution for the production site.
I am happy to subsitute it with an ajax div reload if I could only get it to work.
By the way I take your point about site optimization but I just did a GTMETRIX test on that page and I got a very high rating (A B) and I think if I tinkered a bit with the .css files and unified them, I could easily get an A A rating:
http://gtmetrix.com/reports/www.associazioneculturaleinasia.it/QUPYK68G
So please ignore the reload page script upon page resize. It is a temporary solution I had to make do with.
I am open to AJAX based solutions if you have any :)
thanks for the reply
I am happy to subsitute it with an ajax div reload if I could only get it to work.
By the way I take your point about site optimization but I just did a GTMETRIX test on that page and I got a very high rating (A B) and I think if I tinkered a bit with the .css files and unified them, I could easily get an A A rating:
http://gtmetrix.com/reports/www.associazioneculturaleinasia.it/QUPYK68G
So please ignore the reload page script upon page resize. It is a temporary solution I had to make do with.
I am open to AJAX based solutions if you have any :)
thanks for the reply
????, , Not sure what needs to be done ?
I will ask you first about your development control of the Server page, I have told you that AJAX gets a Page return from the server (not something inside of the browser page) to then place that return in a browser <div>
Can you badwolfff, write a server page that can send back exactly ALL the SVG image TEXT needed to load in to a a div like -
<div id="svgDiv"> </div>
from an ajax return to have a successful image display for new width?
next question, what is on the Server for page output for the -
http://www.associazioneculturaleinasia.it/mappa-culturale/
with the "i World Maps" plugin SVG image text, is it a static (unchanging) string (on server), or does it change somehow, or is it Blank (no text), that the "i World Maps" plugin adds when the page loads? ?
Is there some "i World Maps" plugin API page that tells developers HOW to use the "i World Maps" plugin, , , ,
is it serverside or a browser plugin?
I will ask you first about your development control of the Server page, I have told you that AJAX gets a Page return from the server (not something inside of the browser page) to then place that return in a browser <div>
Can you badwolfff, write a server page that can send back exactly ALL the SVG image TEXT needed to load in to a a div like -
<div id="svgDiv"> </div>
from an ajax return to have a successful image display for new width?
next question, what is on the Server for page output for the -
http://www.associazioneculturaleinasia.it/mappa-culturale/
with the "i World Maps" plugin SVG image text, is it a static (unchanging) string (on server), or does it change somehow, or is it Blank (no text), that the "i World Maps" plugin adds when the page loads? ?
Is there some "i World Maps" plugin API page that tells developers HOW to use the "i World Maps" plugin, , , ,
is it serverside or a browser plugin?
ASKER
Hi thanks for the answer.
As per the first part, no, unfortunately I do not know how to do it. That is the reason why I wrote here.
I can work fairly well with jQuery if that might help but if I did not succeed thus far it was purely becuase I did not know how to.
Coming to part two, I do now really know how the plugin writes its output out but since in the wordpress backend I define maps and interactions, perhaps the plugin outputs to the page in real time. What I think is that whatever the plugin does it is over by the time the page loads. If the page were a different size and were realoaded the plugin would serve a resized map with every relative border and interaction resized and adjusted. So I think the plugin needs to work everytime the page is reloaded. Makes sense? That's all I know, I'm afraid :(
As per the first part, no, unfortunately I do not know how to do it. That is the reason why I wrote here.
I can work fairly well with jQuery if that might help but if I did not succeed thus far it was purely becuase I did not know how to.
Coming to part two, I do now really know how the plugin writes its output out but since in the wordpress backend I define maps and interactions, perhaps the plugin outputs to the page in real time. What I think is that whatever the plugin does it is over by the time the page loads. If the page were a different size and were realoaded the plugin would serve a resized map with every relative border and interaction resized and adjusted. So I think the plugin needs to work everytime the page is reloaded. Makes sense? That's all I know, I'm afraid :(
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I do appreciate your trouble. thanks anyways
I knew it was too complicated to start with anyway.
I knew it was too complicated to start with anyway.
ASKER
thanks again