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:
$(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
Share your machine firefox version?
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/testsite/tsv1/jquery-1.6.1.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.terranartworks.com/testsite/tsv1/jquery.effects.core.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.terranartworks.com/testsite/tsv1/js/jquery-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).
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.
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?
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.
Hi,
I made it work in Chrome.
Here’s a demo.
Here’s the 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.
It works in Chrome.
Which browser are you having trouble with?
What is happening or not happening?
red panel is not sliding in any browser except firefox.
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?
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.
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.
it is working firefox and chrome now.others are not working.
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”?
i’m using mac.
yes your link is works except opera.
the others mean safari,opera and i.e.
So, let me understand this.
My demo works on everything except for Opera on the Mac?
Okaaay, well, I don’t have a Mac, so have no way of reproducing your problem.
Anyone else?