I am just trying out Fancybox 4, adding it to an old static html gallery. I have added in the head:
<script src="https://cdn.jsdelivr.net/npm/#fancyapps/ui/dist/fancybox.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fancyapps/ui/dist/fancybox.css" />
as specified, and each thumbnail image in my gallery links to a large image thusly:
<img src="01-Makeup-tb.jpg" alt="Makeup" />
Clicking a thumbnail opens the image directly in the same window, replacing the page. In the console, the following error is shown:
Uncaught TypeError: Cannot read property 'addEventListener' of null
at Function.value (fancybox.umd.js:2)
Apparently some other initialization is necessary, but I have no clue what is missing. Can anyone help me get this working?
So, stumbled on same issue, just load script in footer. If you are using theme enqueue, add true for loading in footer.
Then it will work.
Hopefully this helps you! :)
Related
When i was try implement angular ui-grid, I am geeting this error. some help me to sort this problem.
My first guess:
To import css you should use this line:
<link rel="stylesheet" href="styles/ui-grid-unstable.min.css" />
in your index.html.
I guess you import it as Javascript which will not work.
I'm trying to put the jQuery Booklet plugin on a site that uses the 1.3.2 library - I can't remove this reference or upgrade. I have successfully used noConflict in the past with other plugins that require a newer version of jQuery on this site.
When I test locally and include the 1.3.2 reference, Firebug console tells me:
but the book still loads correctly and functions. Not sure what that error means. When I put the code onto my development site, the images in the book appear one stacked on top of the other, navigation buttons are missing, and I see an error in the Firebug console that says
TypeError: p2.offset(...) is undefined
[Break On This Error]
p2.offset().left + pWidth - hoverFullWidth,
In IE it tells me:
SCRIPT5007: Unable to get property 'left' of undefined or null reference
jquery.booklet.latest.js, line 1205 character 2
This is the code in question, part of jquery.booklet.latest.js
p3.draggable({
axis: "x",
containment: [
target.offset().left,
0,
p2.offset().left + pWidth - hoverFullWidth,
pHeight
],
Something isn't loading correctly. The scripts look like this in my page in my development environment:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
<script src="/wcsstore/CVWEB/images/home/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="/wcsstore/CVWEB/images/home/js/jquery.booklet.latest.js" type="text/javascript"></script>
<link href="/opencms/opencms/CVWEB/css/jquery.booklet.latest.css" type="text/css" rel="stylesheet" media="screen, projection, tv" />
<script type="text/javascript">
var $j = jQuery.noConflict(true);
$j(document).ready(function(){
$j(function () {
$j("#mybook").booklet();
});
});
</script>
Is there something extra I need to do with noConflict since there are so many other scripts? Do I need to modify the jquery.booklet.latest.js file to include noConflict somehow? I tried declaring the variable and replacing $ like above but that didn't do anything.
I looked here and here to try to solve the easing error, but I am already including all the correct scripts.
I tried the solution here of using jQuery instead of $ with no luck.
I'm still pretty green when it comes to jQuery so any help is appreciated. Thank you.
I am about to move on to a different option but wanted to post here so I can learn what the problem is.
It must be your incomplete src location.
It should be something like this, as if running from localhost:
<script src="http://localhost/wcsstore/CVWEB/images/home/js/jquery.easing.1.3.js" type="text/javascript"></script>
I have a simple view that I'm using to test out video.js; it looks like this:
<script type="text/javascript" src="~/Scripts/video.js"></script>
<link href="~/Content/video-js.css" rel="stylesheet" type="text/css">
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
<body>
<video id="testPlayer" class="video-js" controls preload="auto"
poster="~/Content/images/video-js.png"
data-setup="{}">
<source src="<url of a .mp4 file stored in my project>" type="video/mp4" />
</video>
</body>
After the page loads, I see the poster on the video player (along with some metadata information below the player that I haven't figured out how to get rid of yet). With preload="auto" I see ["Video Error", Object] immediately on page load in the console (using Chrome). If I change auto to none, I get the same non-descript error when I click the player. I cannot figure out what the problem with this error.
There doesn't seem to be any information tucked in the object that shows in the console. The best I could find, as far as description, was something that said media error. I've tried messing around with the encoding of the file a few different ways, but I consistently get the same error.
Does anyone see anything wrong with the view that I am missing (or know what in the world this error could mean)?
When specifying my source URL I was specifying it like this:
src="~/Content/something/place/etc.mp4"
Upon changing that URL to
src='#Url.Content("~Content/you/get/the/point.mp4")'
The video loads fine. I stumbled on some post that mentioned the video tag needing an absolute path, and took a stab trying this.
I started integrating jquery ui datepicker in my page.
I included the js files:
jquery-1.5.1.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.datepicker.js
and CSS Files:
jquery.ui.datepicker.css
But it resulted out datepicker without the background...
what am i missing on it?
After i manually add :
.ui-datepicker{background-color: silver;}
it shows like:
http://outsourcingnepal.com/general-images/shot1.jpg
Check the datepicker.css if there is style definition for the element with missing background. If not..just check the element in firebug (or similar tool) and add your own style. There probably will be already a class, so just add your style in your stylesheet, or add it into detepicker.css.
Got it solved unpackaing all the files once more... i hope some files were missing
For styling only the DatePicker, these are the necessary stylesheet files:
~/Content/themes/base/jquery.ui.core.css
~/Content/themes/base/jquery.ui.datepicker.css
~/Content/themes/base/jquery.ui.theme.css
or the minified ones:
<link rel="stylesheet" href="../Content/themes/base/minified/jquery.ui.core.min.css" />
<link rel="stylesheet" href="../Content/themes/base/minified/jquery.ui.theme.min.css" />
<link rel="stylesheet" href="../Content/themes/base/minified/jquery.ui.datepicker.min.css" />
Can someone tell me how to stop IE8 printing the value of the href for an A tag next to the text. For example this markup
Some Link
When printed comes out as
Some Link(/site/page.html)
when printed. How can I stop this?
This doesn't happen for me in IE8 and I've never spotted it. I also can't find it in the Internet Options anywhere.
It is possible that you have some software on your computer that does this, for example AVG Anti-Virus adds content to web pages to tell you that it has checked the links being displayed for potentially harmful content - so your system-security software may be expanding all links to show you where they actually point, to prevent phishing attacks.
If you do have some anti-phishing software on your machine, you'll have to find the option within that.
Update - It is almost certainly some clever CSS.
I have created the following test page to demonstrate how you can add the URL to a link using CSS generated content. If this was used within a print stylesheet, this would explain how the URL is getting added to the link when you are printing the page. To stop this, you would have to save a copy of the web page, remove the style rule from the print-only style sheet and then open your copy and print it!
<html>
<head>
<title>Test</title>
<style type="text/css">
a:after {
content: " [" attr(href) "] ";
}
</style>
</head>
<body>
<h1>Test</h1>
<p>This is a test to see if this
Link Shows A URL</p>
</body>
</html>