I have been following thenewboston's HTML5 video tutorials and have been trying to change bits to use AngularJS. However, I am having trouble with the bar not updating when you click in a different place than where its currently playing at.
My code:
https://github.com/IdrisAbdul-Hussein/portfolio2.git
Essentially, I have a video.html file which loads the video player etc (video.html is included in the repo) which looks like this:
<div id="big_wrapper">
<section id="skin">
<video id="myMovie" width="640" height="360">
<source src="videos/testVideo.mp4"/>
</video>
<nav>
<div id="buttons">
<button type="button" id="playButton" ng-click="playOrPause()">Play</button>
</div>
<div id="defaultBar" ng-click="clickedBar()">
<div id="progressBar"></div>
</div>
<div style="clear:both"></div>
</nav>
</section>
</div>
The functions that the ng-click's refer to are in my controller.js.
The error that I'm getting is:
TypeError: e is undefined - controller.js(line 53)
However, when I put ng-click="clickedBar(this)" then it gives me the following error:
Error: Value being assigned to HTMLMediaElement.currentTime is not a finite floating-point value. - controller.js(line 55)
I'm not sure which is more in the right direction and not sure how to solve the problem! Been bashing my head trying to fix this problem for a while.
Any help is appreciated!
Thanks in advance!
In angular expressions this points to current scope object, not to the DOM element like in HTML event attributes.
You need to pass DOM node into your ngClick handler which is available in $event.target:
ng-click="clickedBar($event.target)"
Your "e is undefined" error is because your code expects e to contain the click event. ng-click="clickedBar() does not pass the event to clickedBar. Try ng-click="clickedBar($event)"> instead.
I have a page at http://www.entrepreneuronfire.com/podcast/edwinhavens/
With an image at http://i.imgur.com/u59IAXB.png
I need to get the download link (i.e. hxxp://traffic.libsyn.com/entrepreneuronfire/Edwin_Havens.mp3) of the MP3 file at class named spp-dloada(as web inspector detects) but all my 48 hours attempt ended in smoke.
That download link shows well in chrome (as
<a href="http://traffic.libsyn.com/entrepreneuronfire/Edwin_Havens.mp3" download="Edwin_Havens.mp3">
<span class="spp-dloada"></span>
</a>
) but not in FireFox 38 and IE11 but i need them in these two browser.
For FireFox and IE11 HTML Snippet is
<div class="spp-controls">
<span class="spp-speed"/>
<span class="spp-share">
<div class="spp-share-options" style="display: none;">
<a class="spp-share-icon spp-twitter-btn" href="">Share</a>
<a class="spp-share-icon spp-fb-btn" href="">Share</a>
<a class="spp-share-icon spp-gplus-btn" href="">Share</a>
<!--Share-->
</div>
</span>
<span class="spp-dload"/>
<span class="spp-play"/>
Oddest thing is when i click on the download button (as shown in the above image)
iframe changes into
<iframe class="spp-downloader" style="display:none" src="http://www.entrepreneuronfire.com?spp_download=http://traffic.libsyn.com/entrepreneuronfire/Edwin_Havens.mp3"/>
What have tried so far are-
Software:firebug, temper data,modifyheaders
Language:XPATH, CCS Selector, Jquery
EDIT ---- Sorry for belated adjunct
I need pure XPATH expression too SINCE DIFFERENT BROWSER BEHAVES DIFFERENTLY
N.B. HTML SNIPPET IS FOR CHROME ONLY
The span inside of the link has a class, so you can just grab the parents 'href' attribute using jQuery like so:
$('.spp-dloada').parent().attr('href');
Fiddle
(This is of course assuming you have access to modify the code on this website.)
RE: Edit
It doesn't look like IE supports XPath, according to the answers here: jquery select element by xpath
If you view the source of the page, you can see that the source is different from the generated source you see when you inspect the element.
The link you are trying to fetch is not in the actual page source, however, this is:
<div class="smart-track-player stp-color-ff6100" data-url="http://traffic.libsyn.com/entrepreneuronfire/Edwin_Havens.mp3" data-download="true"data-color="ff6100" data-title="Edwin Havens" data-artist="John Lee Dumas chats with" data-uid="IU5Uvc7G" ></div>
I'm guessing the page then has some Javascript functionality which generates a clickable link from this markup.
Try using this jQuery code to access the download url:
$('.smart-track-player').attr('data-url');
An XPath expression to fetch this node would be something like this:
//div[#class='smart-track-player stp-color-ff6100']
I'm using Fancybox to display inline content (a div with an image linked to a new page). The div and image display fine in the modal, but when the image is clicked to go to the new page, I get "The requested content cannot be loaded. Please try again later." error.
The FancyBox javascript is as follows:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox().hover(function() {
$(this).click();
});
$("#fancybox-outer").fancybox().mouseleave( function() {
$("#fancybox-overlay").click();
});
});
</script>
And applies to the following clip of HTML:
<li class="fancybox-outer">
<a id="inline" href="#hover-image_0" class="fancybox">
<img src="http://website.com/file/id:63" style="margin-top: 32px" />
</a>
<p>1G2A</p>
<div style="display: none;"><div id="hover-image_0"><img src="http://website.com/file/id:64/ext:.png" class="img" /></div></div>
</li>
<li class="fancybox-outer">
<a id="inline" href="#hover-image_1" class="fancybox">
<img src="http://website.com/file/id:60" style="margin-top: 32px" />
</a>
<p>17</p>
<div style="display: none;"><div id="hover-image_1"><img src="http://website.com/file/id:61/ext:.png" class="img" /></div></div>
</li>
Does anyone see what might be causing the issue or what I need to correct?
Thanks!
Update: 1/19/2012 - I performed the same test on my server as the first answer (http://estorkdelivery.com/example/example.html) and found that I got the same response back. So it seems it's something with my server.
I still need help with this issue. Anyone have any ideas?
Thanks!
Update: 1/28/2012 - I've been working to find a solution for this problem, but I've run out of time and have gone with a completely different solution. I'm keeping this problem open in case anyone else runs across the same error or ultimately finds a solution. Thanks!
Your approach has many issues:
First bear un mind that fancybox gets its content from the href attribute of any selector bound to it so the link
<a class="fancybox" href="{target}" ...
should be bound to fancybox via the following script in order to work
$('.fancybox').fancybox();
Pretty obvious but in your approach, the link inside the opened fancybox (which targets to yahoo for instance) is not bound to fancybox itself; it will try to fire Fancybox for sure again but with no indication of what the content should be this time, hence the error "The requested content cannot be loaded. Please try again later." in other words, the link (inside the inline content) <a href="http://yahoo.com" ... is not bound to fancybox.
The only way that links inside fancybox can work and load content dynamically (without being bound to fancybox) is when the current content is an external html document and fancybox type was set to iframe (not your case)
Second, you opened an image so fancybox set the type to image by default, but then you are pretending to load a different type of content on the same box (yahoo for instance), which would require to set type to iframe and other options like width and height.
Third, since you are using inline content, please be aware of an existing bug in v1.3.x and its workaround to avoid further issues, you can learn more here
Last, I am not just lecturing here, it's more like the explanation of what is going on with your issue .... but the good news is that you just need to add some more lines of code to make it work the way you want:
1: you need to create a fancybox script for each type of content you want to open the second time (additionally to your existing one), so in your example you want to click the image inside fancybox and that should open yahoo ... then create this script
$('.fancyframe').fancybox({
'type':'iframe',
'width': 600, //or whatever you want
'height': 300
});
2: within your hidden inline content set that class to the link, so this code:
<div style="display: none;">
<div id="hover-image_0">
<img src="1_b.jpg" class="img" />
</div>
</div>
now should look like
<div style="display: none;">
<div id="hover-image_0">
<a class="fancyframe" href="http://www.yahoo.com"><img src="1_b.jpg" class="img" /></a>
</div>
</div>
Do the same for each hidden inline content. If you want to open another type of content in fancybox, just create a script accordingly. The rest of your code is OK (doesn't bother me to fire fancybox on hover)
SIDE NOTES: sites like google, yahoo, jquery and some others won't open in fancybox. Also make sure you have the proper DOCTYPE for fancybox to work properly (your sample page doesn't have any). See Unable to load google in iframe in fancybox for explanation.
I think I've figured out what's causing this issue, at least for me.
The problem seems to occur when you've got a class on one of your elements that is the same as the popup class.
For instance:
<a class="popup" href="#">Open the popup</a>
And you have something in your popup with the same class name, for instance:
<div class="popup">some text</div>
You'll get the error. Try changing the div class to something like popup-window - that should fix your error
In your example page, it works for me if I don't click. When you click, what page are you supposed to be taken to? Do you want it to just go to the next image?
In my personal preference, I don't care for the activation on hover. It gets really confusing, especially when most people go to instinctually click on an image. But in your case it opens on hover, then they click instinctually, then you get the error.
Do you get this same error when you're just using the functionality as it normally applies?
If you want, try to give each image a gallery name instance like so: rel="gallery" and see what happens. You should get the next/prev arrows showing up and working like you would expect.
But honestly, I would get rid of the hover functionality altogether. Or at least get rid of the mouseout() That's probably the most bothersome part.
Just use this to call the fancybox actions:
$("a[rel=gallery]").fancybox();
That way you can get rid of all of those classes that are probably causing the issues.
I hope that helps.
I just ran into this issue as well.
As it turns out, the href url is EXTRA case sensitive. (if that is possible)
Regardless double, triple check your href urls to insure that you have the case exactly correct.
my solution was:
<script type="text/javascript">
jQuery(document).ready(function() {
$(".fancybox").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'titleShow' : false,
'showCloseButton': true,
'titlePosition' : 'inside',
'transitionOut' : 'none',
'title' : '',
'width' : 640,
'height' : 385,
'href' : this.href,
'type' : 'iframe',
'helpers' : {
'overlay' : {'closeClick': false}
}
});
return false;
});
});
</script>
If some of the images are showing and others are not, even though the markup is identical, then check this:
Try to lowercase all the letters in the filename and in the html. Fancybox seems to be quite case sensitive.
Check if the image has all the permissions allowed. I noticed my pictures didn't work properly on mobile because on my computer, everybody's permission was set to "no permission". I changed this to "read only" and it worked like a charm!
I just re-created your test on my local machine and it works fine for me (I ran this from the demo folder of the FancyBox install) :
<html>
<head>
<title>jQuery Fancybox Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css" media="screen" />
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox().hover(function () {
$(this).click();
});
$("#fancybox-outer").fancybox().mouseleave(function () {
$("#fancybox-overlay").click();
});
});
</script>
<li class="fancybox-outer"><a id="inline" href="#hover-image_0" class="fancybox">
<img src="1_s.jpg" style="margin-top: 32px" />
</a>
<p>
Go to Yahoo</p>
<div style="display: none;">
<div id="hover-image_0">
<a href="http://www.yahoo.com">
<img src="1_b.jpg" class="img" />
</a>
</div>
</div>
</li>
<li class="fancybox-outer"><a id="inline" href="#hover-image_1" class="fancybox">
<img src="2_s.jpg" style="margin-top: 32px" />
</a>
<p>
Go to Google</p>
<div style="display: none;">
<div id="hover-image_1">
<a href="http://www.google.com">
<img src="2_b.jpg" class="img" /></a></div>
</div>
</li>
</body>
</html>
I having the same problem with Fancybox. You cannot have spaces or special character in href and div id. Use an URL slug if you are using page titles.
I was checking out all the possibilities and ran into the EXTRA case sensitivity issue as #BrettBumeter mentioned.
In fact, it is "so much case sensitive", I had to revrite the URL (href) path to my images from *.jpg to *.JPG (or whatever your file type extension might be).
Altering this solved my issue.
Don't apply the fancybox class to your LI element, do it to your A element.
I, after taking the above advice, changed ".png" to ".PNG" in the href. NOTE that the file names are a lower case extension but it only works with upper case extension in the href (rest of filename same)
Hope this helps.
My problem was giving inappropriate path to image e.g;
<a data-fancybox="gallery" href="../dist/imgs/nature/n1.png">
<img src="../dist/imgs/nature/n1.png"></a>
While the images loaded well locally, It could not do online.
Correcting the path solved the problem.
<a data-fancybox="gallery" href="imgs/nature/n1.png">
<img src="imgs/nature/n1.png"></a>
If you are trying to make Fancybox work with dynamic content, you may check this.
I was using the following code:
<a class="video__overlay" data-fancybox="gallery" href="<?= $blog_url ?>"></a>
My issue was that I was generating $blog_url dynamically, looking at a specific text file line, so a \n was being added at the end of $blog_url, without me noticing this.
So, I used trim() and everything works as expected.
I am attemtping to solve an issue I am having and decided to try the event handler for the .load() jQuery function. I am unsure what I did wrong. The example on the jQuery page is:
$('#book').load(function() {
// Handler for .load() called.
});
my script was:
var $j = jQuery.noConflict();
$j('#gallery-nav-instruct').load(function() {
if(!$j.cookie('gallerycookie')){
$j.colorbox({ inline:true, href:"#gallery-nav-instruct"});
$j.cookie("gallerycookie", 1, {expires: 30, path: '/'});
}
});
Why did my script not work?
Here is the HTML related to that script:
<div style="display:none">
<div id="gallery-nav-instruct">
<h2>Gallery Navigation Instructions - Step 1</h2>
<h2 style="text-align:right">
<a style="text-align:right;" class="inline cw" href="#gallery-enlarge-instruct">Step 2</a>
</h2>
<p> </p>
<p class="white">
<img src="/Images/Pages/gallery-navigation.jpg" width="890" height="450" alt="Gallery Navigation Instructions" />
</p>
</div>
</div>
Do you have a way of confirming that the div isn't already loaded by the time the event is bound? In other words, it could be a timing issue. The load completes, the event is bound, but the event is never fired because the load is already complete.
I would be interested in knowing the problem you're trying to solve; rather than trouble-shooting the .load() itself (although that might end up being the tool after all!) it's best to allow room for lateral thinking. For example, I don't see why you couldn't do your cookie check and colorbox initialization on document ready. It may be that the image isn't loaded yet, but I don't think that would break user experience.
Try putting your script at the end of the page. That might work. It will execute only when all the content is loaded as .load() event is called when all the stuff inside the parent is loaded completely.
This should help you
So this is the code that I have written. i have very little knowledge of jquery and just tried to write what I saw. I am sure their is an easier I run it once and it will work but after that it just stays the some for each click and does not call the function back up for the next click. I am having the same problem on another script that I have, I can't seem to call a function more than one time. One and done it what it seems to do. Any help would be much appreciated.
$.noConflict();
jQuery(document).ready(function ($) {
$("#scrollmenu");
$("#e_emd").click(function () {
$("#e_em").show();
$("#e_v").delay(1200).fadeOut("slow");
$("#e_s").delay(1200).fadeOut("slow");
$("#e_l").delay(1200).fadeOut("slow");
});
$("#e_vd").click(function () {
$("#e_em").delay(1200).fadeOut("slow");
$("#e_v").show();
$("#e_s").delay(1200).fadeOut("slow");
$("#e_l").delay(1200).fadeOut("slow");
});
$("#e_sd").click(function () {
$("#e_em").delay(1200).fadeOut("slow");
$("#e_v").delay(1200).fadeOut("slow");
$("#e_s").show();
$("#e_l").delay(1200).fadeOut("slow");
});
$("#e_ld").click(function () {
$("#e_em").delay(1200).fadeOut("slow");
$("#e_v").delay(1200).fadeOut("slow");
$("#e_s").delay(1200).fadeOut("slow");
$("#e_l").show();
});
});
<!-- THIS IS USED MULTIPLE TIMES IN THE PAGE BEING USED ON FOR SCROLLING CONTENT -->
<div id="scrollmenu">|
<a id="e_emd" href="#Event_Management" class="panel">Event Management</a> |
<a id="e_vd" href="#Video" class="panel">Video</a> |
<a id="e_sd" href="#Sound" class="panel"></a>Sound |
<a id="e_ld" href="#Lighting" class="panel">Lighting & Staging</a> |
</div>
<img id="e_em" src="images/eventmanage.png" width="1037" height="480" />
<img id="e_v" src="images/video.png" width="1128" height="480" />
<img id="e_s" src="images/sound.png" width="1011" height="480" />
<img id="e_l" src="images/light.png" width="1011" height="480" />
I have upoloaded the full page I am working on.
The site I am trying it on is here http://www.mac-av.com/test2/
What I am seeing is that I can't use an id more than once to call a function where i have
<div id="scrollmenu">|
<a id="e_emd" href="#Event_Management" class="panel">Event Management</a> |
<a id="e_vd" href="#Video" class="panel">Video</a> |
<a id="e_sd" href="#Sound" class="panel"></a>Sound |
<a id="e_ld" href="#Lighting" class="panel">Lighting & Staging</a> |
</div>
Multiple times on the same page
I am needing each image to change differently for every button that is clicked for ever category because of the scrolling that I have. I am doing this because when the page it on a computer with a low resolution the image will appear on the left side under the content window of the next category. So making this script was suppose to hide the images from it and only show the ones that are there for the category it is on, but also be able to see the other as it scrolls before they disappear.
It will work for the first set of buttons, but not afterwards. I am realizing that I can only call them once with the id, but instead of making a different script for each one, is there an easier way?
Could you put up a link to the page? If you could do this, I could debug it quickly. fadeOut will work more than once, so there must be something up with your on-page script and selectors.
Tips that might help in the meantime:
Be more verbose in your id names, it will help when looking back at your code or when other people look at it
Space things our properly when they are nested
You have a random $("#scrollmenu"); declaration at the top that isn't doing anything... you can get rid of that
You can make your code more DRY by making this into one function - pass it an array of all the selectors and the one you want to leave out, then on click loop through that array and if it matches the one you want to leave out, show it, if not, hide it. If you don't get what I mean here I can write an example.
A few things:
ids can only be used once per page
use CSS selectors and good markup to reduce the amount of code
use CSS to style your elements
jQuery can read element attributes, so take advantage of it.
<script type="text/javascript">
$(document).ready(function(){
// when any link inside scrollmenu is clicked
$(".scrollmenu a").click(function (e) {
// don't follow the link
e.preventDefault();
// find out which image to show
var target_id = $(this).attr('href');
// fadeOut all visible images inside .images that isn't the one we'll show
$('.images img').is(':visible').not(target_id).fadeOut("slow");
// show the target
$(target_id).show();
});
});
</script>
<div class="scrollmenu">|
Event Management |
Video |
Sound |
Lighting & Staging |
</div>
<div class="images">
<img id="e_em" src="images/eventmanage.png" width="1037" height="480" />
<img id="e_v" src="images/video.png" width="1128" height="480" />
<img id="e_s" src="images/sound.png" width="1011" height="480" />
<img id="e_l" src="images/light.png" width="1011" height="480" />
</div>
You could combine this with #JonH's method for more complicated sequences of animations.
I set up an example for you to further elaborate on my comment. http://jsfiddle.net/jMQhZ/11/
Clicking the first box will fire the #e_emd click event. If you click that again, nothing will happen because the function has nothing to do. If you click show all you'll see that all the divs are set back to normal. Now clicking the #e_emd div will run your function again.
Why are you using the $.noConflict(); ? Try removing that. Also try removing the $ from your ready function and using it instead of "jQuery", so it looks as follows:
$(document).ready(function () {
// blah blah
});
And yes, document.ready fires when it's loaded, but you are linking your ids to events, so they should be fine. Do you have any 3rd party controls or other ajax controls on this page?