Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Apr 2013
    Posts
    54
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question browser resizing problem

    hi,

    i have a website:
    http://www.terranartworks.com/testsite/tsv1/index.html

    i'm trying to positioning the red point,when browser resized.but i couldn't find how to do this.it has not a stable position,it will position when user clicks button.so how can i position this element,while browser became bigger or smaller.i mean that after the browser's opening and clicking one of three buttons and then browser resizing.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,585
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    Try remembering the last icon that the user clicked on.

    Then, on page resize, call the "click()" method for that same icon.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Apr 2013
    Posts
    54
    Thanks
    2
    Thanked 0 Times in 0 Posts
    how can i take last clicked icon?
    can you specify a syntax for it?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,585
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    It's your code. You should know where the onclick for the icon is being handled.

    Are you saying you just use code without knowing what it does or how it works?

    In any case, it looks to me like the onclick is being handled in the file (magicline)example.js
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Apr 2013
    Posts
    54
    Thanks
    2
    Thanked 0 Times in 0 Posts
    i wrote a click method already.
    but i'm new on jquery and i do not know how to take the last position of icon.
    i know ":last" attribute but i do not know i can use that for this purpose?

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,585
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    No no no... You just remember WHICH icon was clicked on IN A GLOBAL VARIABLE.

    var lastIcon = null; // change this when one is clicked on

    Then, on page resize, you just call the click() method of that icon.

    I don't use jQuery, so I can't help you with the jQuery code to do that. I would write it in ordinary JavaScript.

    Since this is a jQuery question, you probably need to ask a moderator to move this thread to the jQuery forum.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New Coder
    Join Date
    Apr 2013
    Posts
    54
    Thanks
    2
    Thanked 0 Times in 0 Posts
    it is not important whether it is jquery or javascript.is it working?
    so that's ok for me

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,585
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    Yes, but the code you must MODIFY is jQuery, so you need somebody who can help you do that.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New Coder
    Join Date
    Apr 2013
    Posts
    54
    Thanks
    2
    Thanked 0 Times in 0 Posts
    can you give an example about javascript.i can convert it to jquery.cause i could not find an algorithm for this.alternatives that i wrote behaves wrong.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,585
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    I don't see how this code will do you any good, but here it is. It works:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    #dot {
       position: absolute;
       display: none;
       background-color: red;
       width: 10px; height: 10px;
    }
    input { 
       width: 80px;
    }
    </style>
    </head>
    <body>
    <div id="dot"></div>
    <br/><br/><br/><br/><br/>
    <table style="width: 100%;">
    <tr>
        <th><input type="button" value="left" id="demo1"/></th>
        <th><input type="button" value="center" id="demo2"/></th>
        <th><input type="button" value="right" id="demo3"/></th>
    </tr>
    </table>
    
    <script type="text/javascript">
    var buttons = [
       document.getElementById("demo1"),
       document.getElementById("demo2"),
       document.getElementById("demo3")
    ];
    var lastbutton = null;
    
    buttons[0].onclick = dodemo;
    buttons[1].onclick = dodemo;
    buttons[2].onclick = dodemo;
    
    function dodemo( )
    {
        lastbutton = this;
        var node = this;
        var x = 0, y = 0;
        while ( node != null )
        {
            x += node.offsetLeft;
            y += node.offsetTop;
            node = node.offsetParent;
        }
        var spot = document.getElementById("dot");
        spot.style.top = ( y - 20 ) + "px";
        spot.style.left = ( x + 35 ) + "px";
        spot.style.display = "block";
    }
    
    window.onresize = function()
    {
        if ( lastbutton != null ) lastbutton.click();
    }
    </script>
    </body>
    </html>
    I used buttons instead of images, but that wouldn't matter.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New Coder
    Join Date
    Apr 2013
    Posts
    54
    Thanks
    2
    Thanked 0 Times in 0 Posts
    i use your structure but my red point is not stayin where it is.when i click button,it comes but fall down.how can i solve that problem?
    Code:
    var buttons = [
       document.getElementById("button1"),
       document.getElementById("button2"),
       document.getElementById("button3")
    ];
    var lastbutton = null;
    
    buttons[0].onclick = dodemo;
    buttons[1].onclick = dodemo;
    buttons[2].onclick = dodemo;
    
    function dodemo( )
    {
        lastbutton = this;
        var node = this;
        var x = 0, y = 0;
        while ( node != null )
        {
            x += node.offsetLeft;
            y += node.offsetTop;
            node = node.offsetParent;
    		var spot = document.getElementById("red");
        spot.style.top = ( y - 10 ) + "px";
        spot.style.left = ( x + 48 ) + "px";
        spot.style.display = "block";
        }
        
    }
    
    window.onresize = function()
    {
        if ( lastbutton != null ) lastbutton.click();
    }

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,585
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    I told you: You do *NOT* WANT TO USE MY CODE.

    It is *NOT* going to mix well with your jQuery code.

    You need to find somebody who can help you add the jQuery *equivalent* of that to your jQuery code.

    Why do you not want to believe me?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •