I have following sample of code i want to open video in a fancybox it works fine almost across all browsers except when i try to test it in IE 8 standard mode.
It works fine in IE 9 and above.
Based on this solution i added following line of code but this doesn't make it work either iframe: { preload: false }
HTML Deceleration code is as
<!DOCTYPE html >
<html lang="en">
<head id="Head1" runat="server">
<title></title>
.........
Sample Code
<div class="video-icon">
<img src="coorporate-video-icon.jpg"/>
</div>
$("a.fancybox-video").fancybox({
width: 600,
height: 440,
closeClick: true,
hideOnOverlayClick: true,
type: 'iframe',
iframe: { preload: false // fixes issue with iframe and IE
}
});
I am not sure what breaks it i cant create a fiddle example as fiddle doesn't work in IE 8 any help in this regard is appreciated.
UPDATE: i tried it with fancybox Version 2.1.3 but i still face the same problem..
it doesn't work doesn't really tell what the problem is.
If it didn't even work with v2.1.3, then you may have other issues. This is your check list for troubleshooting IE:
Make sure you have a proper DOCTYPE, and the DOCTYPE is the first line of your html document so IE won't switch to quirks mode.
Make sure you are wrapping your custom script inside the .ready() method.
Make sure you are using the right fancybox options
Make sure you don't have any extra trialing comma after the last option
Check for other script conflicts (syntax errors of other scripts may stop fancybox from working)
Make sure you don't have any other js error. Check IE isn't showing this icon (bottom-left corner of the browser) :
Otherwise, this html
<img src="coorporate-video-icon.jpg"/>
and this jQuery code, both work fine in IE[7-9] using fancybox v1.3.4 :
jQuery(document).ready(function ($) {
$("a.fancybox-video").fancybox({
width: 600,
height: 440,
hideOnContentClick: true, // closeClick: true, // this for v2.x
hideOnOverlayClick: true,
type: 'iframe'
});
}); // ready
See DEMO at http://www.picssel.com/playground/jquery/youtubeEmbedIframe_07jan14.html
Related
I'm implementing an sticky audio player on a website and it's working fine. However, I'd like to create a play button, OnClick maybe, in HTML that would give a play in the player when the user clicked on it. I tried several codes and none worked.
The last one was this and it did not work either.
<button type="button" onclick="$(this).myPlayer();">Play</button>
In addition to the Javascripts and external CSS, which are before HEAD, the script that runs the player on the page (inline) is this.
<script>
jQuery(function($) {
$('body').myPlayer({
firstPlaying: 0,
autoplay: false,
shuffle: false,
//veryThin: true,
slideAlbumsName: true,
nowplaying2title: true,
roundedCorners: true,
//accentColor:"#cc181e", //008DDE
pluginPath: "player/",
playlist: [
{mp3:"player/music/mymusic.mp3", title:"My Song", artist:"Mine", album:"Single", cover:"player/music/cover.png"}
]
});
});
</script>
From what I was researching, many articles mention using the HTML5 tag "data- *" inside the button code. However, I could not use it correctly.
If anyone can help me, I appreciate it.
I may not have understood your problem correctly, but here is a snippet you can try to get this working:
<button type="button" id="play-music">Play</button>
In your script, you can write something like this:
<script>
$(document).ready(function() {
$("#play-music").click(function() {
$('body').myPlayer({ ... }); // Your code here
});
});
</script>
bxSlider is not working on IE10, it is working fine in IE8 and IE9,
it is working on IE10 on mode:'fade' but not working on 'horizontal' all mode of bxSlider are working on Mozilla and Chrome.
Where is Problem
My Code for use bxSlider is
$('#slidesfMovieShowcase').bxSlider({
mode: 'horizontal',
controls: false,
pager: true,
autoHover: true,
auto: true
});
I know that this question is outdated a bit but very similar code is working for me in ie10 but inside jQuery ready function:
$(document).ready(function() {
$('#slidesfMovieShowcase').bxSlider({
mode: 'horizontal',
controls: false,
pager: true,
autoHover: true,
auto: true
});
});
IE10 is very picky on HTML errors.
as the first answer says, it should run inside a
$(document).ready(function() {
Some people experience the first image not loaded with a IE10 which freaks me out.
My experience is different:
I work with IE8/9/10 and also the
$(document).ready(...)
wasn't good; it doesn't work fine 5 times over 10! :(
At now, I've tried to put the bxslider code inside a
$(window).bind('load', function(){})
snippet and it works well 9 times over ten ...
You could try this approach ...
I had the same problem and fixed just removing the defer attribute.
Also you want to make sure to include the library first and then put your script
Before - this did not work in IE and Edge
<script src="//cdn.jsdelivr.net/bxslider/4.1/jquery.bxslider.min.js" defer="defer"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
slideWidth: 850,
auto:true,
pause:3500,
useCSS:true
});
});
</script>
After - this works in IE and Edge
<script src="//cdn.jsdelivr.net/bxslider/4.1/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
slideWidth: 850,
auto:true,
pause:3500,
useCSS:true
});
});
</script>
I solve my issue by downgrade the bxslider from v4.2.12 to v4.1
Hey I'm trying to do a simple popup in prettyPhoto, but getting errors in IE9 and Chrome.
I've upgraded to the latest version of prettyPhoto and the latest jquery, nothing changed.
Also tried using jQuery in noConflict mode, but that didn't work either.
This is the errors in the respective consoles:
IE:
SCRIPT5007: Invalid operand to 'in': Object expected
jquery-1.8.0.min.js, line 2 character 2299
Chrome:
Uncaught TypeError: Cannot use 'in' operator to search for 'marginTop' in undefined jquery-1.8.0.min.js:2
and my prettyPhoto script is this:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
autoplay: true,
wmode: 'opaque',
theme: 'facebook',
deeplinking: false,
social_tools: false
});
});
</script>`
I've looked around everywhere for a solution to this, can't find anything!
Anyone had this issue before?
I have the same bug with my own script.
It seems that there's a bug in new jQuery 1.8.0.
Try to switch back to jQuery 1.7.2 - it worked for me.
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.
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.