I've uploaded my problem here : http://gotchance.com/k2/
Try clicking on the "Login" link. It works fine in FF and Safari. However in IE8, the form slides down and then slides up again automatically.
For testing purpose, i added 4 more "test" links and found that only the links inside #navigation div cause this problem.
Also, if i toggle using any other element like "button" "input", it works fine. Only the "a" tags inside the "#navigation" cause the problem.
Any ideas ?
Your html does not validate. Always make sure you run it through the w3c validator first. An invalid dom can play hell with jquery selectors (especially in ie).
Also I have noticed that the rounded and font plugins produce some odd markup which may also cause issues.
Have you tried stripping the page down to its bare bones then adding the functionality a piece at a time ensuring after every step your toggle is working.
One problem I see is that you have an extra comma in your custom.js file. The extra comma is on line 25.
Before:
confirm: {
required: true,
equalTo: "#rpassword"
},
},
After:
confirm: {
required: true,
equalTo: "#rpassword"
}
},
I don't know if that will solve your problem though.
Related
I've downloaded Fraction Slider from #jacksbox and have gone through the documentation countless times now and cannot figure out why my slider won't show the effects it's supposed to. This is the site I'm working on: http://pacificdesignacademy.com/NEW/2 and this is an example of what the slider is supposed to do: http://jacksbox.de/stuff/jquery-fractionslider/.
Here is the path to my js: ../NEW/2/fractionslider/jquery.fractionslider.js
And here is the path to my css ../NEW/2/fractionslider/fractionslider.css
All of the images are just stacking on top of one another regardless of me defining overflow:hidden on the containing element.
Not sure what else to do here, so any help is greatly appreciated. I'm supposed to launch this site September 1st... eep!
Thanks!
A simple check in the browser's console showed you have a syntax error on line 594 of your page. You have a closing parenthesis instead of an opening brace.
UPDATE After you fixed that, you're now getting the error :
Uncaught ReferenceError: jQuery is not defined
I suggest you move your code and place it after you've included both jQuery and the slider plugin, so your page should look like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="fractionslider/jquery.fractionslider.js"></script>
<script type="text/javascript">
jQuery(window).load(function(){
$('.slider').fractionSlider({
'fullWidth': true,
'controls': true,
'pager': true,
'responsive': true,
'dimensions': "1200,400",
'increase': false,
'pauseOnHover': true
});
});
</script>
You are missing an opening parenthesis when calling the plugin.
Change
$('.slider').fractionSlider()
To
$('.slider').fractionSlider({
On line 593
FractionSlider is garbish! Use LiquidSlider instead!
What one doesn't have but exist in the other:
well formated object oriented code,
automatic hardware acceleration with the new CSS3 transforms if the browser supports it (no js animation here!),
keyboard navigation,
hash linking where user can bookmark a specific slide or land to a page that opens slider to a specific slide,
many effects,
mobile 'swap' support
user extensible.
Of course it uses some other libraries and code snipets 'stolen' from here and there (https://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/ but actually it's reduntant as the use of Moderniz library in responsive designs makes the detection as simple as a one-line command, http://easings.net/ for the easing equations, https://daneden.me/animate/ for the transformations etc.)
The idea behind FractionSlider is indeed unique but the implementation sucks!
I've got a function, used by a lot of different parts of my site which calls a confirmation box. When it's called it formats the box with the various elements and appends it to the body, like so...
$('body').append("<div id=\"confirmation\">confirmed cancel</div>");
Now, this works perfectly for everything accept the iPhone Safari browser, which doesn't seem to activate, or load the anchor into the DOM properly... it is not clickable. This is the problem, tho the box appears correctly, touching the anchor does nothing. Console.log proves this.
Any ideas?
Have you tried doing
$div = $('<div>', { id : "confirmation"});
$aConfirmed = $('<a>', { href : "#", class : "confirmed", text: "confirmed"});
$aCancel = $('<a>', { href : "#", class : "cancel", text: "Cancel"});
$div.append($aConfirmed).append($aCancel);
$('body').append($div);
And then use some event handlers like (this assumes jQuery > 1.7
$(document).on("click", "a.confirmed", function(){
confirmed();
});
$(document).on("click", "a.cancel", function(){
closeConfirm();
});
Try using something other than an anchor tag for testing and see if that works.
This very particular situation was solved by moving the anchor so it did not overlay an embedded video. When the anchor was placed over the embedded video on the iPhone - touch events above it were disregarded in favour of the touch to take to quicktime and play video event.
My script creates dynamic input fields inside a table. When I try to run a function after an action it doesn't work (In Internet Explorer, everywhere else it's working fine)
I found out that everything works properly, when the input fields come from static HTML.
Do you know something if IE has some problems with dynamically inserted input fields?
The code is simple and works everywhere else:
.append($('<input>')
.attr('type', 'text')
.attr("name","avz_anzahl["+avz_array+"][]")
.attr("size","3")
.attr("bez","avz_anzahl")
.attr("nr","")
.attr("onblur","test();")
.attr("value", "")
Somehow the follwing function doesn't get executed in Internet Explorer:
function test()
{ alert("ok"); }
Do you know why?
In order to make sure jQuery events are working, use proper jQuery events, like bind or blur.
Also jQuery have more elegant way to create html element:
$("input", {
type: "text",
name: "avz_anzahl["+avz_array+"][]"
size: 3,
bez: "avz_anzahl",
nr: "",
blur: test,//make sure there is no (),
click: function(){
},
value: ""
}).appendTo(SomeElement);
I was hoping that someone can help me with this fancybox plugin issue.
Problem is in the IE7 and IE8.
Error - SCRIPT87: Could not get the display property. Invalid argument.
As I noticed scripts break on this line:
$(fx).animate({prop: 1}, {
duration : currentOpts.speedIn,
easing : currentOpts.easingIn,
step : _draw,
complete : _finish
});
I'm using jquery version 1.4.2
live example and issue on this link:
http://goo.gl/x0rF7
You are adding 3 instances of jQuery when you only need one (ideally the latest version): http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
http://www.crystalhotel-belgrade.rs/test/plugins/content/simplepopup/jquery-1.4.3.min.js
and an empty call to
http://www.crystalhotel-belgrade.rs/test/jomres/javascript/jquery-1.4.2.min.js
.....Also you are loading jQuery UI twice
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js
http://www.crystalhotel-belgrade.rs/test/jomres/javascript/jquery-ui-1.8.5.custom.min.js
IE is more susceptible to this kind of conflicts/errors than other browsers. Try reducing your calls to a single instance of each script and beware of the order (jQuery first and jQuery plugins after)
Additionally, make sure that the DOCTYPE is the very first line of your html document (not preceding spaces or comments), otherwise IE will fail to run in standards mode hence fancybox won't work properly.
Problem fixed.
Not the best way but it working
$(fx).animate({prop: 1}, {
duration : currentOpts.speedIn,
easing : currentOpts.easingIn,
step : _draw,
complete : _finish
});
I removed all animation and just wrote
_finish();
Thanks for the answer JFK, I tryed with that but no
I am using Ext JS to make a popup window, here is the code:
function popupImage(term, imageNumber){
if(currentPopupWindow!=null){
currentPopupWindow.close();
}
currentPopupWindow = new Ext.Window({
layout : 'fit',
closeAction :'hide',
plain : true,
constrain : true,
width: 300,
border: false,
html: "Blah blah content"<span onclick=\"currentPopupWindow.close();\">cerrar</span>"
});
currentPopupWindow.show(false, function(){
var el = Ext.get("termimage");
currentPopupWindow.setWidth(el.getWidth(true)+150);
});
currentPopupWindow.anchorTo(Ext.get("dictionarycontainer"), "tl");
}
In firefox this works fine. In IE7 it works, but always produces a javascript error saying "unspecified error".
What am I doing wrong?
EDIT
Removing the anchorTo line removes the error. I would still like to anchor to though so this isn't a great solution!
This is the solution, dumb as it is:
Have the same window creation, then instead of the calls to show and anchor to:
currentPopupWindow.render(document.body);
currentPopupWindow.alignTo(diccon, "tl", [40, 80]);
currentPopupWindow.show(false, function() {
var el = Ext.get(termim);
currentPopupWindow.setWidth(el.getWidth(true)+150);
});
A quick Google search tells me that you're not the only extJS user that is experiencing this. (See here and here and here for three examples.) Best would be to post in their forums so they can either fix their bug or work around an IE7 bug, whichever is the case.
This looks like it has something to do with it, not that I understand..
http://weblogs.asp.net/rajbk/archive/2006/11/29/ie-6-7-unspecified-error-when-accessing-offsetparent-javascript.aspx
qui is right. The problem lies in anchorTo. Use alignTo and the exception goes away.
Sorry qui, tried to "up" your response but were not able to. I don't have any reputation.:)
Athele
To your second question: Removing the anchorTo line removes the error. I would still like to anchor to though so this isn't a great solution!
Use alignTo and monitor scroll and mousewheel event and update the position accordingly and it is the same as anchorTo. That is the workaround I have found.
Athele
Try to add:
shim: false
to popup window parameter list.