I have something like this.
<div class="player-wrapper"><iframe id="sc-palms" class="player-iframe" width="100%" height="120" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http://api.soundcloud.com/tracks/164940733&auto_play=false&hide_related=false&show_comments=true&show_user=true&;show_reposts=false&visual=true"></iframe></div>
I create a soundcloud widget:
iframe = document.getElementById('sc-palms')
player = SC.Widget(iframe)
I bind some click events to trigger the toggle() method. The user also has the ability to "skip" and load a new song. This song can be from somewhere other than soundcloud, so I need to completely remove the iframe and widget. I have no issues except on internet explorer. Currently I am removing the player by this code:
player = null;
$(".player-wrapper").html("");
If the soundcloud player is playing, then the iframe is removed the widget's sound is still playing in the background. Any ideas about how to further kill this player in IE 11 would be greatly appreciated. And please ask if you need any more information.
Thanks.
I was able to achieve the desired behavior by setting the iframe's src attribute to an empty string. When I remove the player via:
$("player-wrapper iframe").attr("src","");
instead of
$("player-wrapper").html("");
The player stops playing.
I believe this may have something to do with internet explorer not allowing iframes to be removed when they have javascript events or listeners or something still tied to them. If I sound like I don't know exactly what I am talking about, it is because I don't. If anyone wants to give a better answer or comment on this answer, I can update it with a better understanding. The reason I thought to try this method was because of these two links:
https://www.drupal.org/node/1777238
http://msdn.microsoft.com/en-us/library/gg622929%28v=VS.85%29.aspx?ppud=4
The quote that got me thinking on these lines was this:
"In summary IE9 doesn't allow an iframe to be removed from the DOM if it will have javascript executed. This is to address a memory leak issue. IE9 will throw undefined property errors."
Sorry for adding some messiness to stackoverflow but if anyone can be helped by this answer, I'd like it to be out there. I've spent days trying to fix this.
Related
I've looking for a way to open the browser search function to look for text on only one page of my Wordpress site.
I want this to be self contained on one page. Basically the functionality of pressing Ctrl+F, but have it as a link or button, which in my boss' words, is "for the less tech-savvy users out there."
This is what I found so far
< a href="#" onclick="find();">Click here to search the page < /a>
Which worked great on FireFox, but did nothing in Chrome.
Is there a way to have this work in other browsers or have it so when I click the link on the page, it carries out the Ctrl+F function to open the search box?
Thanks
As far as I know, you can't fire Chrome's native find function without hitting cmd + F. But you can always use window.find(). Perhaps that will help you better
EDIT:
After some testing, I came up with this pen. It works, kinda. I tested it on Chrome, Firefox and IE. Chrome and Firefox highlight the first occurrence of the word. If you click the button fast enough, they might highlight you the second one. IE doesn't do sh*t. Perhaps you could code different solutions for different browsers, but I don't know how that'd fit in your current code. In any case, window.find() has a documentation, but this bug report suggests this method should be terminated.
Another solution entirely: use Javascript's search() or indexOf() going through your whole page (yeah I know), and based on those returns, you can hardcode something that highlights the matched area, such as wrapping it around a <span> that has yellow background. This is but a suggestion, as I have not given it much thought, but I think it will help.
I am new to GTM ,I have learned to track events like click and link click for different classes,but now i want track the print event from user,so can anyone please help me what steps should be done ,if a user tries to print the page .Thanking you in advance.
AFAIK there is no cross-browser javascript print event (ie has onbeforeprint), which makes sense since the print menu item is part of the chrome (damn you Google for confusing people about the difference between the browser chrome and the chrome browser - the former used to denote the "borders of a Web browser window, which include the window frames, menus, toolbars and scroll bars") and should not be accessible via javascript (a print button in the page could be detected with a click event).
Here is an article where somebody tried to create a cross-browser solution by combining onbeforeprint (for ie) with window.matchMedia (on the assumption that on print the print style sheets will be matched). This did not result in a particularly reliable solution.
There is already an (old and un-accepted) answer on stackoverflow that references this article and since there has been no progress since 2012 I think we can safely declare that there is no reliable cross-browser solution to detect print, hence you cannot trigger an GTM tag based on print, hence you cannot track print.
I've made no code changes, but in the last few hours, all my embedded youtube videos (using the new iframe html5 method) started autoplaying.
From searching around online, I found some that recommended putting ?autoplay=0 in the src URL, but that doesn't work.
Another suggestion said I'd have to go back to the old method, and that that's the only one that allows us to turn off autoplay.
I'd really rather not do that, but certainly will if I need to, but the bigger question is,
Q1: Is there another way to stop it from autoplaying other than reverting to the old embed?
Side question: What changed in the past few hours that made all my videos start autoplaying?
<iframe src="//www.youtube.com/embed/N2tlvo5CI4Y?autoplay=0"
frameborder="0" allowfullscreen></iframe>
I hear it's the GoogleCast extension.
Disable it
Close Chrome
Run Chrome
Should be fixed for now.
I am trying to set up functionality similar to Netflix. Where if you mouseover a movie - you are presented with a window of movie details (all client-side).
At high level, can someone in this forum help by telling me how this should be implemented? I.E., one or more .aspx pages, what would go in code-behind, and .js file, css, etc. Just trying to get an idea on how this would be set up to work.
Basically, when I hover over an item, I need to query for details that belongs for that record being moused-over and display it in the window or div. I also need to have some functionality in that window (i.e. a textbox and button which will end up needing to get saved in a database).
Thanks for any tips and suggestions -
You would want to add an AJAX call to the hover event of the image, that pulls from a webservice/web method.
Here is a good example, you would change some things. However, it should get you started.
http://www.mikesdotnetting.com/Article/96/Handling-JSON-Arrays-returned-from-ASP.NET-Web-Services-with-jQuery
If I understood your question correctly, you should try this excelent jQuery plugin:
http://www.sohtanaka.com/web-design/css-on-hover-image-captions/
Look at the demo here:
http://www.sohtanaka.com/web-design/examples/image-hover/
easy to install and configure and very slick!
Good luck
EDIT: sorry wrong lik the first time
There are certainly many jQuery plugins that will do this for you. jQuery UI may also be of benefit.
Here is one that appears to do something like you are describing:
http://plugins.jquery.com/project/VisualLightbox
Long story short, I'm developing a theme template for a blog that enables you to view the posts in blocks. The main part of the post is displayed at first, then the secondary content is displayed over that when you hover over the post block.
Everything works fine on a Mac Versions of all major browsers, but start browsing on a PC, and all hell breaks loose when you start trying to display content over Flash Video embeds. The flash element remains visible over the content. It's completely unusable.
From a PC, you can view an example of the problem here: http://photorific.tumblr.com
I'm almost certain this is a bug in the Flash Plugin for Windows, but I was wondering if anyone else had come across this problem before, and if there were any solutions.
This problem has presented itself for a while now and any help would be really, really, really appreciated!
This is a known bug in Flash Player on windows. It essentially ignores any form of z-index, or assumes the flash object is at z-index: +INFINITY. Either way, there's two fixes. As stated previously, you can use the wmode=transparent param, but this will let other content bleed through the flash movie. The other option is to use an IFRAME shim between the Flash movie and whatever content you want to appear over the Flash movie.
MooTools has a plugin called IframeShim which can do this for you automatically. I'd be surprised if there wasn't an equivalent function available for jquery.
Try putting wmode="transparent" in the object tag for the flash content.
Thanks for the replies. #Marc, it's good to know I'm not going crazy.
I did find out that setting the window mode property, which Tumblr doesn't do natively when outputting video code, worked fine.... but it had to be opaque rather than transparent.
Working with a raw video string (<object><params /><embed /></object>), here's the solution I came up with that works perfectly for me:
/* Add wmode = opaque
-------------------------------------------------------*/
if( ! player.match(/name="wmode"/))
player = player.replace(/<param/, '<param name="wmode" value="opaque" /><param');
if( ! player.match(/wmode="(transparent|opaque)"/))
player = player.replace(/\/><\/object>/, 'wmode="opaque" /></object>');
player = player.replace('wmode="transparent"', 'wmode="opaque"');
player = player.replace('name="wmode" value="transparent"', 'name="wmode" value="opaque"');
Now, flash video on windows sits nicely behind the desired divs.... as long as javascript is enabled.
Thanks again for all you're answers.