Jump to content



Photo

How to make this svg/js responsive?


  • Please log in to reply
13 replies to this topic

#1 ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 21 January 2014 - 15:17

I'm trying to get this map to be responsive. I'm not good at javascript and would like to know how to do it. The link is at the bottom. I'm using RaphaelJS framework to make it clickable. I got it off codepen.io

 

 

http://dev.rsindustrial.com/people/ <-- where the map is going to use.

 

http://dev.rsindustr...ework/js/map.js <-- Javascript of the map

http://dev.rsindustr.../raphael-min.js <-- The framework that get it clickable




#2 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 23 January 2014 - 14:36

Does anyone know much about RaphaelJS?



#3 night_stalker_z

night_stalker_z

    Neowinian

  • Tech Issues Solved: 1
  • Joined: 16-August 07
  • Location: Hove, UK

Posted 23 January 2014 - 14:50

What do you mean by responsive? It's smooth in Chrome and IE11 if that's what you mean.

 

 

RaphaelJS is really slow on IE9 and below though.



#4 riahc3

riahc3

    Neowin's most indecisive member

  • Tech Issues Solved: 11
  • Joined: 09-April 03
  • Location: Spain
  • OS: Windows 7
  • Phone: HTC Desire Z

Posted 23 January 2014 - 14:56

Hello,

http://dev.rsindustr...ework/js/map.js <-- Javascript of the map
http://dev.rsindustr.../raphael-min.js <-- The framework that get it clickable

Even though its pretty easy to find out, I wouldnt post the path to where you store your libraries....

On it being slow, IDK; Works good on FF here. Same thing on IE9.

The graphic itself is somewhat inconsistent but thats not the topic.

#5 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 23 January 2014 - 15:37

Sorry, I was talking about resizing when on a tablet and phone sizes as in responsive and not the speed.

 

What do you mean by responsive? It's smooth in Chrome and IE11 if that's what you mean.

 

 

RaphaelJS is really slow on IE9 and below though.



#6 riahc3

riahc3

    Neowin's most indecisive member

  • Tech Issues Solved: 11
  • Joined: 09-April 03
  • Location: Spain
  • OS: Windows 7
  • Phone: HTC Desire Z

Posted 23 January 2014 - 15:44

Hello,

Sorry, I was talking about resizing when on a tablet and phone sizes as in responsive and not the speed.

Completely different story :laugh:

I went to the libraries website and tried their demos. Sorry but it isnt designed for a mobile platform. Their demos work exactly as slow as yours.

#7 LaP

LaP

    Forget about it

  • Tech Issues Solved: 4
  • Joined: 10-July 06
  • Location: Quebec City, Canada
  • OS: Windows 8.1 Pro Update 1

Posted 23 January 2014 - 15:49

I don't know about the script. But that is some heavy code for such a simple task.

#8 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 23 January 2014 - 16:37

I don't know about the script. But that is some heavy code for such a simple task.

What would you use to do this?



#9 LaP

LaP

    Forget about it

  • Tech Issues Solved: 4
  • Joined: 10-July 06
  • Location: Quebec City, Canada
  • OS: Windows 8.1 Pro Update 1

Posted 23 January 2014 - 17:00

What would you use to do this?


If the only thing you want is select a part of a USA map, highlight it and display info about it i would do it myself. Not that hard. Most of the js code you get online is bloated like hell. I've seen a calendar JS library once having thousand of lines of code which is ridiculous imo. Considering the job you are doing i would think about learning JS. Yes as a designer it might not look important but i think it is a good thing to know JS.

If you want to work with multiple maps of the world then think about using a library ;) If this one doesn't work right for you try to find another one.

#10 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 26
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 24 January 2014 - 20:14

To resize svg just resize the svg element with css ;)


You can use any svg child element(most commonly path) as a div so you can use jquery on click and others things too like css ^^



#11 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 26
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 24 January 2014 - 20:41

Edit: Css method seems to fail, that's ofcourse because it's put inside the html embedded and not as a image :p

Lemme think of a fix, I think putting it into a path group would be enough



#12 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 24 January 2014 - 20:52

Thanks, RaphaelJS works different. 

http://eyeseast.gith.../responsive-d3/

Edit: Css method seems to fail, that's ofcourse because it's put inside the html embedded and not as a image :p

Lemme think of a fix, I think putting it into a path group would be enough



#13 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 26
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 24 January 2014 - 21:04

Thanks, RaphaelJS works different. 

http://eyeseast.gith.../responsive-d3/

Yeah it just changes the path coordinates instead of using a svg parent element or viewbox.

add to the svg element: viewBox="0 0 x y"

x=width without "px"

y=height without "px"

 

then you can write a smaller value like original x=width /2

 

So like this <svg *some stuff* viewBox="0 0 x y" />

 

personally I find the js library method very bad since it's just extra work that could be done in the svg tag >.>



#14 The_Decryptor

The_Decryptor

    STEAL THE DECLARATION OF INDEPENDENCE

  • Tech Issues Solved: 5
  • Joined: 28-September 02
  • Location: Sol System
  • OS: iSymbian 9.2 SP24.8 Mars Bar

Posted 12 February 2014 - 05:14

You shouldn't need to mess with the viewBox though code to change what's displayed or anything, what you should be using the the "view" element specifically created for this (No code needed, SVG viewers can use it to pan and zoom around documents)

To make the SVG fit in the window properly at any resolution you'll want to make sure the SVG is setup to do so, I think the attribute is called something like "preserveAspectRatio" and it lets you specify how the SVG image should be displayed within the parent context (i.e. how does a 200x400 image fit into a 100x100 container, etc.)

Edit: That "Responsive Maps With D3" article is way overcomplicating things, specifying the viewBox on the SVG element with the right scaling options and setting the width and height to what you want via CSS will do everything you want without hooking into browser events and JS.