Loading ...
Sorry, an error occurred while loading the content.
 

Re: javascript issue

Expand Messages
  • ck_one_2001_uk
    hi jim, thanks for the information: ill paste the code in and see if i can get the slider to function - ill explain what i want to achieve - basically the code
    Message 1 of 3 , Mar 7, 2004
      hi jim, thanks for the information: ill paste the code in and see if
      i can get the slider to function - ill explain what i want to
      achieve - basically the code creates very simple seating plan and
      when the slider is moved - the seats shall change colour according
      to the price on the slider eg: when its moved up slightly say to
      £5
      then seats with that price turn yellow. ive been trying for weeks to
      get this to work but i just cant figure it out - kind regards karl

      ****** code *****
      <?xml version="1.0" encoding="iso-8859-1" standalone="no"?>
      <svg viewBox="0 0 650 380" xml:space="preserve" onload="OnLoadEvent
      (evt)"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns:karl="http://www.karllewis.com/prices"
      xmlns="http://www.w3.org/2000/svg">
      <script type="text/ecmascript"><![CDATA[
      // == Slider Object
      =====================================================================
      ========
      var slider=null, thumb=null, animateable=null, sliderActive
      = false;
      var seats=[];
      var svgns="http://www.w3.org/2000/svg";

      function SliderDown(event)
      {
      sliderActive = true;
      window.status = "Slider is active";
      }
      function SliderUp(event)
      {
      sliderActive = false;
      window.status = "Slider is inactive";
      }
      function SliderMove(event)
      {

      var value = event.getClientX() - parseFloat
      (slider.getAttribute("xoffset")) -
      var value2 = event.getClientX() - parseFloat
      (slider.getAttribute("xoffset")) -
      if (sliderActive && value > 0 && value < 40)
      <!-- these two values being the maximum and minimum price
      values for seats-->

      {
      thumb.setAttribute("transform", "translate(" + (value)
      + "0)"); changeSeatColour(event);
      }
      }

      function SliderClick(event)
      {
      var value = event.getClientX() - parseFloat
      (slider.getAttribute("offset")) -
      thumb.setAttribute("transform", "translate(" + (value)
      + "0)");
      changeSeatColour(event);
      }

      function initSeats(event)
      {
      var gees = svg.Document.getElementsByIdNS(svgns,"g");

      }

      function changeSeatColour(event)
      {
      var value = event.getClientX() - parseFloat
      (Slider.getAttribute("xoffset"))
      for(i=0; i < gees.length; i++);
      var g = gees.item(i);

      if(gees[i].getAttributeNS('karl','priceSeat')=sliderValue);
      gees[i].setAttribute('fill','yellow');
      }

      // == event handler
      =====================================================================
      ==============
      function OnLoadEvent(event) // called, when the svg file is loaded
      (s. onLoad=..) ..
      {
      var doc = event.getTarget() !=null ? event.getTarget
      ().getOwnerDocument() : null;
      if (doc !=null)
      {
      slider = doc.getElementById("slider");
      thumb = doc.getElementById("thumb");
      slider.addEventListener("mousedown", SliderDown, false);
      slider.addEventListener("mouseup", SliderUp, false);
      slider.addEventListener("mousemove", SliderMove, false);
      slider.addEventListener("click", SliderClick, false);
      }
      }
      ]]></script>

      <!--background colour of the viewbox area-->
      <defs>
      <radialGradient id="three_stops">
      <stop offset="0%" style="stop-color: #f96;"/>
      <stop offset="50%" style="stop-color: #9c9;"/>
      <stop offset="100%" style="stop-color: #906;"/>
      </radialGradient>
      </defs>

      <rect x="0" y="0" width="650" height="380" style="fill: url
      (#three_stops); stroke:none;"/>

      <!-- section a of seating plan -->
      <g id="a_sec" fill="purple" stroke="black" opacity="0.7">
      <!--learn that must delcare each seat individually - anyway
      to have a standard style?-->
      <rect id="ares4" x="20" y="20" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="ares3" x="60" y="20" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="ares2" x="100" y="20" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="ares1" x="140" y="20" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="ards4" x="20" y="60" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="ards3" x="60" y="60" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="ards2" x="100" y="60" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="ards1" x="140" y="60" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="arcs4" x="20" y="100" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="arcs3" x="60" y="100" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="arcs2" x="100" y="100" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="arcs1" x="140" y="100" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="ares4" x="420" y="20" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="ares3" x="460" y="20" width="20" height="20"
      fill="none" karl:priceSeat="5"/>
      <rect id="ares2" x="500" y="20" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="ares1" x="540" y="20" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="ards4" x="420" y="60" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="ards3" x="460" y="60" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="ards2" x="500" y="60" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="ards1" x="540" y="60" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="arcs4" x="420" y="100" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="arcs3" x="460" y="100" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="arcs2" x="500" y="100" width="20" height="20"
      karl:priceSeat="5"/>
      <rect id="arcs1" x="540" y="100" width="20" height="20"
      karl:priceSeat="5"/>
      </g>

      <!-- section b of seating plan -->
      <g id="b_sec" fill="blue" stroke="black" opacity="0.7">
      <rect id="brbs4" fill="blue" x="20" y="140" width="20"
      height="20" karl:priceSeat="10"/>
      <rect id="brbs3" x="60" y="140" width="20" height="20"
      karl:priceSeat="10"/>/>
      <rect id="brbs2" x="100" y="140" width="20" height="20"
      karl:priceSeat="10"/>
      <rect id="brbs1" x="140" y="140" width="20" height="20"
      karl:priceSeat="10"/>
      <rect id="bras4" x="20" y="180" width="20" height="20"
      karl:priceSeat="10"/>
      <rect id="bras3" x="60" y="180" width="20" height="20"
      karl:priceSeat="10"/>
      <rect id="bras2" x="100" y="180" width="20" height="20"
      karl:priceSeat="10"/>
      <rect id="bras1" x="140" y="180" width="20" height="20"
      karl:priceSeat="10"/>
      <rect id="brbs4" x="420" y="140" width="20" height="20"
      karl:priceSeat="10"/>
      <rect id="brbs3" x="460" y="140" width="20" height="20"
      karl:priceSeat="10"/>
      <rect id="brbs2" x="500" y="140" width="20" height="20"
      karl:priceSeat="10"/>
      <rect id="brcs1" x="540" y="140" width="20" height="20"
      karl:priceSeat="10"/>
      <rect id="bras4" x="420" y="180" width="20" height="20"
      karl:priceSeat="10"/>
      <rect id="bras3" x="460" y="180" width="20" height="20"
      karl:priceSeat="10"/>
      <rect id="bras2" x="500" y="180" width="20" height="20"
      karl:priceSeat="10"/>
      <rect id="bras1" x="540" y="180" width="20" height="20"
      karl:priceSeat="10"/>
      </g>

      <!-- found how to have standard fill - can omit one seats colour
      simply by adding 'fill-none' into the seat name -->
      <!-- opacity - withdrawn below as an example -->

      <!-- section c of seating plan -->
      <g id="c_sec" fill="red" stroke="orange" opacity="0.7">
      <rect id="cres6" x="180" y="20" width="20" height="20"
      karl:priceSeat="20"/>
      <rect id="cres5" x="220" y="20" width="20" height="20"
      karl:priceSeat="20"/>
      <rect id="cres4" x="260" y="20" width="20" height="20"
      karl:priceSeat="20"/>
      <rect id="cres3" x="300" y="20" width="20" height="20"
      karl:priceSeat="20"/>
      <rect id="cres2" x="340" y="20" width="20" height="20"
      karl:priceSeat="20"/>
      <rect id="cres1" x="380" y="20" width="20" height="20"
      karl:priceSeat="20"/>
      <rect id="crds6" x="180" y="60" width="20" height="20"
      karl:priceSeat="20"/>
      <rect id="crds5" x="220" y="60" width="20" height="20"
      karl:priceSeat="20"/>
      <rect id="crds4" x="260" y="60" width="20" height="20"
      karl:priceSeat="20"/>
      <rect id="crds3" x="300" y="60" width="20" height="20"
      karl:priceSeat="20"/>
      <rect id="crds2" x="340" y="60" width="20" height="20"
      karl:priceSeat="20"/>
      <rect id="crds1" x="380" y="60" width="20" height="20"
      karl:priceSeat="20"/>
      </g>

      <!-- section d of seating plan -->
      <g id="d_sec" fill="green" stroke="grey" opacity="0.7">
      <rect id="drcs6" x="180" y="100" width="20" height="20"
      fill="none" karl:priceSeat="30"/>
      <rect id="drcs5" x="220" y="100" width="20" height="20"
      karl:priceSeat="30"/>
      <rect id="drcs4" x="260" y="100" width="20" height="20"
      karl:priceSeat="30"/>
      <rect id="drcs3" x="300" y="100" width="20" height="20"
      karl:priceSeat="30"/>
      <rect id="drcs2" x="340" y="100" width="20" height="20"
      karl:priceSeat="30"/>
      <rect id="ercs1" x="380" y="100" width="20" height="20"
      karl:priceSeat="30"/>
      </g>

      <!-- section e of seating plan -->
      <g id="e_sec" fill="black" stroke="grey" opacity="0.7">
      <rect id="erbs6" x="180" y="140" width="20" height="20"
      karl:priceSeat="35"/>
      <rect id="erbs5" x="220" y="140" width="20" height="20"
      karl:priceSeat="35"/>
      <rect id="erbs4" x="260" y="140" width="20" height="20"
      karl:priceSeat="35"/>
      <rect id="erbs3" x="300" y="140" width="20" height="20"
      fill="none" karl:priceSeat="35"/>
      <rect id="erbs2" x="340" y="140" width="20" height="20"
      karl:priceSeat="35"/>
      <rect id="erbs1" x="380" y="140" width="20" height="20"
      karl:priceSeat="35"/>
      </g>

      <!-- section f of seating plan -->
      <g id="f_sec" fill="brown" stroke="orange" opacity="0.7">
      <rect id="fras6" x="180" y="180" width="20" height="20"
      karl:priceSeat="40"/>
      <rect id="fras5" x="220" y="180" width="20" height="20"
      karl:priceSeat="40"/>
      <rect id="fras4" x="260" y="180" width="20" height="20"
      karl:priceSeat="40"/>
      <rect id="fras3" x="300" y="180" width="20" height="20"
      karl:priceSeat="40"/>
      <rect id="fras2" x="340" y="180" width="20" height="20"
      karl:priceSeat="40"/>
      <rect id="fras1" x="380" y="180" width="20" height="20"
      karl:priceSeat="40"/>
      </g>

      <!-- group all seats into rectangular areas -->
      <g stroke ="black" stroke-width="3" fill="none">
      <path d="M 4 5
      L 4 5 L 580 5 L 580 220 L 4 220Z"/>
      <path d="M 410 5
      L 410 5 410 220"/>
      <path d="M 171 5
      L 171 5 171 220"/>
      </g>

      <!-- sample stage area -->
      <rect x="88" y="240" width="400" height="40" fill="orange"
      stroke="black" stroke-width="2" opacity="0.5"/>
      <text x = "280" y="265" fill="black" text-
      anchor="middle">Stage</text>

      <!-- creating first slider - price -->
      <g id="slider" transform="translate(180 300)" xoffset="150">
      <rect x="0" y="0" width="220" height="20"
      style="fill:#c0c0c0" stroke="black"/>
      <line stroke="black" stroke-width="2" x1="8" y1="8" x2="212"
      y2="8"/>
      <line stroke="white" stroke-width="2" x1="8" y1="10"
      x2="212" y2="10"/>
      </g>

      <g id="thumb" transform="translate(180 300)">
      <path stroke="black" fill="#c0c0c0" d="M8,4 16,4 16,12 12,16
      8,12Z" />
      </g>
      <!-- <path id="animateable" transform="translate(250,150) rotate
      (0)" style="stroke:black;fill:green;" d="M-25,-50 25,-50 0,0 Z" /> --
      >

      <!-- inserting some text -->
      <text x="40" y="360" style="font-size:18pt">Welcome to the
      WaterFront Prototype Seating Plan</text>
      <text x="30" y="315" style="font-size:10pt">Price Slider
      Selection</text>

      </svg>





      --- In svg-developers@yahoogroups.com, Jim Ley <jim@j...> wrote:
      > ck_one_2001_uk <karllewis14 <at> hotmail.com> writes:
      >
      > > I am currently having a few teething issues with a javascript
      > > function, that i cannot get to work. Its involved with the
      > > implementation of a slider. Would anyone be able to have a quick
      > > look at my problem?
      >
      > I'm sure lots of people could, but you've got to post it to the
      list - as with
      > most things, meta-questions aren't helpful, half of the point of
      this list is
      > for people to have a look at other peoples problems.
      >
      > If it's a sensitive sort of code that you only want to show a
      couple of people,
      > then maybe an IRC channel, like irc://irc.freenode.net/#svg would
      be more
      > helpful, but of course you need to find people ready to help you
      right there,
      > right then.
      >
      > Jim.
    Your message has been successfully submitted and would be delivered to recipients shortly.