Home/ Questions/Q 6601759
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T18:47:42+00:00

I have written the following in a JavaScript method : <html> … <script type=text/javascript

  • 0

I have written the following in a JavaScript method :

<html>
...
<script type="text/javascript" charset="utf-8">

$(function() {

    $('#layout').svg({});

    var svg = $('#layout').svg('get');
    svg.rect(150, 50, 100, 50, 10, 10, {fill: 'grey'});
    svg.text(200, 75, "Some Text", {'font-family':"Verdana", 'font-size':20, 'text-anchor':"middle", 'fill':"#00ff00"});               

    $('#layout').click(function(e) {
        $(this).slideDown("slow");                    
    });
}
...
<body>
    <div id="layout" style="width: 640px; height: 480px;"></div> 
</body>
</html>

Ultimately I am trying to get ‘layout’ to move across the browser window. However I cannot get the ‘layout’ to move in anyway using slideDown() or animate(). How to I accomplish the effect?

—– Update (September 25, 2011) ——

I got it work with the following code. Thanks to Jason for tipping me off on the problem:

<html lang="en"><head><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8">

...

    <style type="text/css">
        #layout {
            background: #6699FF;
            height: 480px;
            width: 640px;
            position: relative;
        }
      </style>       

    <script type="text/javascript" charset="utf-8">

        $(function() {
            $('#layout').svg({});

            var svg = $('#layout').svg('get');
            svg.rect(150, 50, 100, 50, 10, 10, {fill: 'grey'});

            svg.text(200, 75, "SomeText", {'font-family':"Verdana", 'font-size':20, 'text-anchor':"middle", 'fill':"#00ff00"});

            $('#layout').click(function(e) {
                $("#layout").animate({opacity: "0.1", left: "-=800"}, 500);                
            });
        });        

    </script>
</head>
<body>
    <div id="layout"></div>            
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you’re trying to get a div to move across the entire window, regardless if it contains SVG or not, make sure its position is absolute in the CSS. You can then animate the left and top properties with jQuery.

    • 0