SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question jquery code is not working except firefox

    hi guys,

    i have a jquery code.it is working only firefox.other browsers are not see the code.i search in web but nothing appears.
    can anyone help me to solve this problem??

    here is my code:
    Code:
    $(function() {
    
        var $el, leftPos, newWidth;
            $mainNav2 = $("#example-two");
        $mainNav2.append("<li id='magic-line-two'></li>");
        var $magicLineTwo = $("#magic-line-two");
    	var top=parseInt($magicLineTwo.css("top"))
    	var bottom=parseInt($magicLineTwo.css("bottom"))
    	var totalHeight=top+bottom;
        $magicLineTwo
            .width($("#current_page_item_two").width())
            .height(totalHeight)
            .css("left", $("#current_page_item_two a").position().left)
            .data("origLeft", $magicLineTwo.position().left)
            .data("origWidth", $magicLineTwo.width())
            .data("origColor", $(".menuItem a").attr("rel"));
        $("#example-two li ").find("a").mousedown(function() {
    
            $el = $(this);
            leftPos = $el.position().left;
            newWidth = $el.parent().width();
            $magicLineTwo
    						.css("visibility",'visible')
    						.stop().animate({
                								left: leftPos,
                								width: newWidth,
    											opacity:1
            },{duration:1000,easing:"swing"});
        }, function() {
            $magicLineTwo.stop().animate({
                left: $magicLineTwo.data("origLeft"),
                width: $magicLineTwo.data("origWidth")
            },{duration:1000,easing:"swing"});    
        });
        
    });
    you can see the test of my site at:
    http://www.terranartworks.com/testsite/tsv1/index.html

  2. #2
    SitePoint Enthusiast vincewicks's Avatar
    Join Date
    Jan 2012
    Location
    Brooklyn, NYC
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Share your machine firefox version?
    This site is the go-to place for web designs.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    21.0

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Looking at Chrome's Dev Tools, it appears that a couple of libraries are missing:

    Failed to load resource: the server responded with a status of 404 (Not Found) http://www.terranartworks.com/testsi...query-1.6.1.js
    Failed to load resource: the server responded with a status of 404 (Not Found) http://www.terranartworks.com/testsi...ffects.core.js
    Failed to load resource: the server responded with a status of 404 (Not Found) http://www.terranartworks.com/testsi...y-1.4.2.min.js

    You might want to fix that first.
    Also, you shouldn't include jQuery twice on the page. That is quite often problematic (not to mention a waste of resources).

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes i saw this.but i could not understand why?

    i try to remove extra jqueries from the page but it will give error already.my coding practice is beginner.i find some scripts and modify and try to find the best solution.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Ok, well the site behaves identically for me on FF and on Chrome.
    What is not happening that you would like to happen.
    How can I reproduce your error?


    Edit: Sorry, forget that. I can see in Firefox, that when you click on a menu point, you get some kind of overlay slide up to the position where you clicked.
    Is that what you are trying to make work in other browsers?

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no.i have a red panel under the buttons.i'm trying to slide this panel under the button when i clicked to the button.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    I made it work in Chrome.

    Here's a demo.

    Here's the code.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <head>
        <base href="http://www.terranartworks.com/testsite/tsv1/" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="(magicline)style.css" rel="stylesheet" type="text/css" media="only screen and (min-width:1024px) and (max-width:3840px)" />
      </head>
    
      <body>
        <div id="menu" >
          <ul id="example-two" class="group">
            <li class="menuItem" id="current_page_item_two"><a href="#"></a></li>
            <li id="bosluk"><img src="imajlar/beyazDikdortgen197px.gif" alt="thumbnail" /></li>
            <li class="menuItem"><a href=""><img  src="imajlar/1hakkimizda-icon.png" alt="thumbnail"  /></a></li>
            <li  id="bosluk2"><img src="imajlar/beyazDikdortgen150px.gif" alt="thumbnail"/></li>
            <li class="menuItem"><a href=""><img  src="imajlar/2isler-icon.png" alt="thumbnail" /></a></li>
            <li  id="bosluk2"><img src="imajlar/beyazDikdortgen150px.gif" alt="thumbnail"/></li>
            <li class="menuItem"><a href=""><img src="imajlar/3iletisim-icon.png" alt="thumbnail"/></a></li>
          </ul>
        </div>
        
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
        <script>
          var $el, leftPos, newWidth;
          var $mainNav2 = $("#example-two");
          $mainNav2.append("<li id='magic-line-two'></li>");
          var $magicLineTwo = $("#magic-line-two");
          var top=parseInt($magicLineTwo.css("top"))
          var bottom=parseInt($magicLineTwo.css("bottom"))
          var totalHeight=top+bottom;
          $magicLineTwo
          .width($("#current_page_item_two").width())
          .height(totalHeight)
          .css("left", $("#current_page_item_two a").position().left)
          .data("origLeft", $magicLineTwo.position().left)
          .data("origWidth", $magicLineTwo.width())
          .data("origColor", $(".menuItem a").attr("rel"));
          
          $("#example-two li ").find("a").click(function(e) {
            e.preventDefault();
            $el = $(this);
            leftPos = Math.round($el.position().left);
            newWidth = $el.parent().width();
            $magicLineTwo.css("visibility",'visible')
            .stop()
            .animate({left: leftPos,  width: newWidth, opacity: 1}, {duration:1000, easing:"swing"});
          });
        </script>
      </body>
    </html>
    Not currently sure why it's now working - I just started cutting out dependencies and refactoring your JS, then when I tried it, it worked
    I've got to go out now, but I'll have a look at it later on, see if we can pinpoint the error.

    Hope that at least gives you something to go on.

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it is not workiiiiing

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    It works in Chrome.
    Which browser are you having trouble with?
    What is happening or not happening?

  11. #11
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    red panel is not sliding in any browser except firefox.

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    For me it works in Chrome and FF, but breaks in IE.
    I'll have a look later.

    Just out of interest, which browsers are you testing in?

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    I've updated my demo.
    For me, this works in the latest Chrome, Firefox, Opera, Safari (Win), IE10, IE9.
    The design falls apart in IE8 and below.

    Hope this helps.

  14. #14
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes your demo is working.

    chrome 26.0.1410.65
    firefox 21.0
    opera 12.15
    safari 6.0.4
    ie 10

    are my versions.

    Is it not working because of the server has located at my computer.
    cause it is absurd not working at my browsers.
    but also my colleagues browsers are not showing the right effect.

  15. #15
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it is working firefox and chrome now.others are not working.

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    I've just checked the link again (just to be clear I am talking about my demo)
    For me it still works on the latest Chrome, Firefox, Opera, Safari (Win), IE10, IE9.

    Which OS are you using?
    What exactly do you mean by "others are not working"?

  17. #17
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm using mac.
    yes your link is works except opera.
    the others mean safari,opera and i.e.

  18. #18
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    So, let me understand this.
    My demo works on everything except for Opera on the Mac?

  19. #19
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes exactly.

  20. #20
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Okaaay, well, I don't have a Mac, so have no way of reproducing your problem.
    Anyone else?

  21. #21
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so you think its because of mac.
    if so i have no question
    thanks for your help.

  22. #22
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by sweetysweety View Post
    thanks for your help.
    No probs

    Quote Originally Posted by sweetysweety View Post
    so you think its because of mac.
    Yeah, I think so.
    All I can tell you is that it works as expected on Opera 12.15 on Win 8

  23. #23
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    really interesting


Bookmarks

Posting Permissions

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