jwPlayer not working properly in IE 8 - javascript

I want jwPlayer to play for 2 sec. and then pause.
I implement this functionality but its not working properly in IE 8.
Its working in mozilla and chrome.
Anybody suggest me how to do it?
JAVASCRIPT :
$(document).ready(function(){
jwplayer('GridMessageBoard__ctl3_dvMsgContent').setup({
var jwplayerid = this.id;
flashplayer: 'mediaplayer/player1.swf',
file: 'http://www.youtube.com/watch?v=HOfdboHvshg',
width: 400,
height: 300
});
jwplayer(jwplayerid).play();
window.setTimeout("PausejwPlayer('"+jwplayerid+"')",1500);
});
function PausejwPlayer(objID)
{
jwplayer(objID).pause(true);
}
HTML :
<div id="GridMessageBoard__ctl3_dvMsgContent" style="display:block;width:100%;"></div>
Thanks

Add this to your configuration in setup (and remove your other call to window.setTimeout):
events: {
onPlay: function(){
window.setTimeout(function(){
jplayer(jwplayerid).pause(true);
}, 2000);
}
}
I'm guessing that it was just a timing issue, where the player was maybe still starting or buffering, etc. - and the whole 1.5 or 2 seconds had elapsed before the player ever had a chance to play. This will start the timer only after the player has actually started playing.
(I don't see where jplayerid is being set, so I'm assuming you have it defined elsewhere and above your current code.)
If this doesn't work by itself, add some debugging lines within the function call I provided here to see if the setTimeout is getting called, and that you still have a valid player ID, etc.

i had the same problem
primary: "flash",
this code will solve your problem :)

Related

Closing Embedded Demo Player After Completion

Let me begin by saying I am NOT a developer. I work in digital banking and mainly focus on SEO and Marketing. I have embedded this demo into our live site for training and I would like it to close automatically when the demo is completed. Here is the script.
function Function29(){
$('#player').empty();
Lemonade.DemoPlayer.play({
demo: '750e8759-6fa1-45be-aa8a-03f02cbe45af',
container: $('#player'),
locale: 'en_US',
finishButtonText: 'Continue',
horizontalPadding: 25,
onFinish: function() {
$("#player").html(
"Click anywhere to continue"
);
// you can do anything when the game ends!
},
onStepChange: function (previousStep, currentStep, currentHotspot, totalSteps) {
// every time the scene changes, this event is called
},
});
}
Any help would be appreciated.
If by closing, you mean, hiding or removing the player container, which I'm assuming is #player,
you can simply call $('#player').remove();
Question: Did the $('#player').html('Click anywhere to continue'); do anything for you? If so, you can run $('#player').remove() from onFinish: function() {...} you have.
Can you add your HTML script to show more details? Thanks! I'll edit my response depending on that.

Ignore jquery call if nothing matched

Hi I have a wired issue which I really dont know how can I explain to you guys. But I will try my best. Here is a jquery script I'm using on my site for calling different jquery functions or plugins like typed.js, flexislider etc etc.
(function ($) {
//Typed JS
$(".element").typed({
strings: ["Saumya Majumder.", "a geek.", "an Engineer.", "a Code Lover.", "a Google fan.", "an Apple fan.", "an Android fan.", "a WordPress fan.", "an Inventor.", "a Coffee lover.", "a Tea lover."],
typeSpeed: 100,
backDelay: 3000,
loop: true
});
// Flixislider
$('.flexslider').flexslider();
/* TOOLTIPS */
$('.tooltip').each(function(index, element) {
$(this).tooltipster({
position: $(this).attr('data-tooltip-pos'),
fixedWidth : 300,
offsetX : 8,
animation : "grow",
delay : 50
});
});
$('.bar').each(function() {
var bar = $(this);
bar.find('.progress').css('width', bar.attr('data-percent') + '%' );
});
})(jQuery);
Now 1st I must tell that this is working fine with chrome and opera but creating issue on firefox.
Here is the issue:
In firefox when a user is visiting my page where I have the typed element to triger, but no flixislider to trigger and again a bar element to trigger. Whats happening is firefox 1st triggers the typed element as there is a call for that on the same page, and then it see that the page does not have any flexslider call, so it thwos and error and dont even read the below calls whether or not is there any more thing that might have used on that page.
But in chrome and opera, it just ignores the calls which are not present in that page. Sleek and exactly the thing I need.
Now suppose in a page where I dont have the typed element, it thwos error for the very 1st call and dont even check the rest. So none of my plugin calls will work.
What I'm looking for
As this is a firefox specific issue can anyone tell me how can I update my script code so that firefox just ignores the calls that are not ment for that page and execute the calls which are present on that page, like chrome, firefox.
You could check if there is any .flexslider before call the function :
if ($(".flexslider")[0]){
$('.flexslider').flexslider();
}

How to make a slider autoscroll using jquery

http://405pixels.gowerpowered.com
I have the slider, and I have been trying to figure out how to make the homepage autoslide?
I tried using firebug to locate the files... Located some .js files that contain some information about the homepage slider... but all the changes and everything I make seem to not be working...
This is a free template I found called BigFoot. I am really interested into learning about how this javascript would work that is why I downloaded in the first place... to learn from the template... If you could point me in the right direction that would be awesome.
Thanks,
Alex
You'll need to replace the actual photo swapping code with whatever you use but the rest will swap out each picture every 5 seconds.
$(document).ready(function() {
var next = $('#right-button');
next.click(function() {
$('#current-picture').fadeOut('fast');
$('#next-picture').fadeIn('fast');
...whatever code you use for this.
});
var scroll = setInterval(function() {
next.trigger("click");
if(picture is last) {
clearInterval(scroll);
}
}, 5000);
});
you are using flex slider so you can use the code below.
jQuery(window).load(function() {
jQuery('.flexslider').flexslider( {
pauseOnHover: true,
slideshow: false,
controlsContainer: ".flex-container"
} );
} );
actually this it the param you need to pass to make slider autostart
slideshow: false,
Let me know if you run into any other issues.

Object doesn't support this property or method error in IE7 jQuery

IE7 is showing this error message: (no other browser is showing any error except ie7)
Message: Object doesn't support this property or method
Line: 97
Char: 2
And line 97 has this:
$('.megamenu').megaMenuCompleteSet({
The complete javascript code is this:
<script>
$(document).ready(function($){
$('.megamenu').megaMenuCompleteSet({
menu_speed_show : 300, // Time (in milliseconds) to show a drop down
menu_speed_hide : 200, // Time (in milliseconds) to hide a drop down
menu_speed_delay : 200, // Time (in milliseconds) before showing a drop down
menu_effect : 'hover_slide', // Drop down effect, choose between 'hover_fade', 'hover_slide', etc.
menu_click_outside : 1, // Clicks outside the drop down close it (1 = true, 0 = false)
menu_show_onload : 0 // Drop down to show on page load (type the number of the drop down, 0 for none)
});
});
</script>
Can somebody advice me what is wrong with line 97?
Thanks!
UPDATE SOLVED:
i was using the latest one, i fixed it myself, it was all my fault, i had the jquery lib loaded two times with different versions, it was not making any trouble on other browsers except IE7. But after debugging i found the multiple lib loading and removed and there were no errors :)
Thank you everyone!
What version of the MegaMenu script are you using? I can see this in their changelog:
06/23/2012 – Version 2.11
Fixed an issue occurring under IE7 in megamenu.js
I am not sure if this is the issue but you don't need to pass JQuery as an argument since it is global so:
$(document).ready(function($){
should be:
$(document).ready(function(){
This may be the issue since your JQuery plugin appears to be what is not working properly.

Javascript making text slide in from html

I am trying to make a text-slide-in effect on a web page. I am using the javascript slidesjs library because it seemed like the best fit. However, I cannot make it work when triggered by a web click.
I have a live example running at: http://107.22.173.10
Note that when you click the "GOTO" links nothing happens.
The basic code is as follows and it seems the page is supposed to automatically put '#' anchors in to trigger the slides. I can't make this work, or figure out how to debug this.
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
generatePagination: true,
//play: 5000,
//pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
Does anyone see what's going wrong here?
What is the best way to debug this problem?
Is there a better way or library I should be using?
Any advice is appreciated. Thanks!!
You're not following the example from slidesjs.com. See "Basic HTML structure". You're putting only one element in the #slides_container div, and assign all sorts of weird absolute positioning to it, which of course won't work with the animation code.
Copy paste the example first, then start adding your own tweaks concerning style.

Categories

Resources