Finding Div Window Height For SVG Database JS Question

Discuss SVG code, accessible via the XML Editor.
jcdsvg
Posts: 1
Joined: Thu Aug 16, 2012 10:24 am

Finding Div Window Height For SVG Database JS Question

Postby jcdsvg » Sat Aug 18, 2012 6:40 am

I am developing a SVG database and need some help. For web design and SVG I find that there are three javascripts that are needed. these are a rollover effect, view navigation and most importantly, a window scroll method that is based on ascertaining the window height of a Div and then scrolling by that amount, not in pixels, but by window inner height.

Using a simple script like;

<script type="text/javascript">
function jumpScrolldown() {
window.scrollBy(0, window.innerHeight);
}
</script>

Works well on a master page, but due to screen resolutions is not precise, and using SVG files requires pinpoint accuracy.

The master page can be fluid to accommodate different resolutions, but the Divs on the page will always be percentage based, as will be the SVG files.

Is it possible to have a SVG file in a navigation menu Div trigger a script to find another Div's window height and scroll the Div like the script above?

This would allow complete accuracy for a touch screen up and down button that would allow the user to navigate the database of selections. All selections would scroll by 100% of the Div window and the enclosed SVG file.

I have Googled all that I could find regarding doing this. Most of the information is out of date and based on scrolling by pixels, not percentage. If anyone can help in this matter, or direct me to an example, or to the proper javascript forums to post to, I would be greatly appreciative.

So... if you can offer any help or hints, please respond.

Sincerely;

James
[email protected]

Jelle
Posts: 78
Joined: Sat Nov 06, 2010 11:25 am

Re: Finding Div Window Height For SVG Database JS Question

Postby Jelle » Wed Sep 05, 2012 3:45 pm

Rats,.. I'll have to reply again as I got kicked out.. grrr.. And everything typed in got kicked as well..

Okay,.. short version

As you probably use Inkscape, fill and stroke are defined as CSS Style element

Code: Select all

onmouseover="evt.target.setProperty('fill','red','')"

should turn the fill of the element moused over to red. (!!!Last value is two single quotes!!!)

For DIV size.. create a rect with w=100% h=100% then apply a getCTM on it per script. That will give you w, h and scale in a Transformation Matrix. You can apply this TM to any following element by giving it to every next group or image you load the same TCM.

And yes,.. communicating between HTML and SVG back and forth is possible. The SVG pages of David Dailey are full of it and svg-edit is a good example as well.
http://code.google.com/p/svg-edit/

A great resource for reference can be found at http://learnsvg.com/tutorials/tutorialScripting/ made by Michel Hirtzler who was one of the authors of LearnSVG which you can also download from learnsvg.com as a .pdf book. Chapter 10 is about DOM scripting and a mighty useful removeWhiteSpaceNodes.js can be found in it. Alternatively you can find it on pilat.free.fr if that is closer to your current location, but it is a bit hidden.


Return to “SVG / XML Code”