I want try using Rellax (javascript parallax library) in my MVC application at once of my views.
So I add the rellax.js script link (without bundling) and few lines script for rellax in #section scripts{<--->} at the target view.
Now when I trying to run console response a throw error
Uncaught Error: The elements you're trying to select don't exist.
at new g (rellax.min.js:1)
I read similar issue at Rellax Github and he said Use rellax.js without bundling per pages. But I used rellax.js and tags in one view without bundling
Here is my .cshtml
<div class="rellax-header rellax-header-sky" data-rellax-speed="-8" style="transform: translate3d(0px, 421px, 0px);">
<div class="page-header-image" style="background-image:url(#backPath)">
</div>
</div>
<div class="rellax-header rellax-header-buildings" data-rellax-speed="0" style="transform: translate3d(0px, 0px, 0px);">
<div class="page-header-image page-header-city" style="background-image:url(#imagePath)">
</div>
</div>
<div class="rellax-text-container rellax-text" style="transform: translate3d(0px, 128px, 0px);">
<h1 class="h1-seo" data-rellax-speed="-2">Test</h1>
<div class="pro">PRO</div>
</div>
#section Scripts {
<script src="~/js/plugins/rellax.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
if ($(window).width() >= 991) {
setTimeout(function () {
var rellax = new Rellax('.rellax', {
center: true
});
}, 5000);
var rellaxHeader = new Rellax('.rellax-header');
var rellaxText = new Rellax('.rellax-text');
}
});
</script>
}
Where is my wrong?
Any idea please?!
I was able to replicate the error locally. If you change your script tag to use the full version of rellax.js:
<script src="~/js/plugins/rellax.js" type="text/javascript"></script>
It will give you a stacktrace similar too:
rellax.js:100 Uncaught Error: The elements you're trying to select
don't exist.
at new Rellax (rellax.js:100)
at Index:68
Index:68 for me is:
var rellax = new Rellax('.rellax', {
This is because there is no element with a class of 'rellax'
To fix the error, I changed the first div too:
<div class="rellax rellax-header-sky" data-rellax-speed="-8">
So that there was an element with a class of 'rellax'
I am working on a video player app and It has multiple play buttons and each time I hit a play button loggerVideoURL takes in a url I want to find the value of loggerVideoURL.
How do I debug to find the value of loggerVideoURL at each instance of hitting the play button.
Here's my code
HTML
<div class="loggerVideoControlsWrapper p0" id="video-controls-wrapper" style="">
<!-- Video -->
<div class="video-js-responsive-container vjs-hd" id="video-container">
<video crossorigin="anonymous" id="logger-media-player" preload="auto" data-bind="attr:{src:loggerVideoURL},event:{timeupdate:onPlayerTimeUpdate,play:playerOnPlay,pause:playerOnPause,seeked:playerOnSeeked,seeking:playerOnSeeking,loadedmetadata:playerOnLoadedmetadata,error:playerOnError}" class="video-js vjs-default-skin" width="auto" height="auto">
#*controls="true" - for now *#
#*<source data-bind="attr:{src:loggerVideoURL}" type="video/mp4" />*#
#*<track label="English" srclang="en" kind="captions" data-bind="attr:{src:captionsFileUrl}" />*#
</video>
<div data-bind="if: playerSeeking() || !playerLoadedMetadataFired() || playerErrorMsg()">
<div id="seeking-overlay">
<div class="snippet-demo" data-bind="if: !playerErrorMsg()" style="position: relative; top: 50%; transform: translateY(-50%);">
<div class="snippet-demo-container demo-spinner demo-spinner__spinner-default">
<!-- MDL Spinner Component -->
<div class="mdl-spinner mdl-js-spinner is-active is-upgraded" data-upgraded=",MaterialSpinner"><div class="mdl-spinner__layer mdl-spinner__layer-1"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-2"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-3"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-4"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__gap-patch"><div class="mdl-spinner__circle"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle"></div></div></div></div>
</div>
</div>
<!-- ko if: playerErrorMsg() -->
<div data-bind="" class="alert alert-danger alert-dismissable" style="width: 75%;margin: auto auto;position: relative; top: 50%; transform: translateY(-50%);">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="fa fa-times-circle"></i> Error</h4> <span data-bind="text:playerErrorMsg" style="font-weight: normal"></span>
</div>
<!-- /ko -->
</div>
</div>
</div>
JavaScript
function ClsLoggerVideo(parent) {
var self = this;
var timer;
var timerInterval = 800;
var FrameRate = TimecodeMath.FrameRate;
function log(msg) { console.log(msg); }
$(document).on('mouseup', function () { clearInterval(timer); });
self.isIe = vmsWebUtils.isIE();
self.parentLogger = ko.observable(parent);
self.captionFiles = ko.observableArray();
self.loggerVideoURL = ko.observable();
//self.captionsFileUrl = ko.observable('http://ny-venturae-7.viacom_corp.ad.viacom.com/video/APOCALYPSE_NOW_1080p2398_CLIP.vtt');
self.captionFiles.push();
self.techAttributes = ko.observable(null);
self.frameRate = ko.computed(function () { return self.techAttributes() == null ? null : self.techAttributes().frameRate; });
self.isDropFrame = ko.computed(function () {
return self.techAttributes() == null ? null : self.techAttributes().isDropFrame;
});
self.startTcInFrames = ko.computed(function () {
return self.techAttributes() == null ? null : self.techAttributes().startTcInFrames;
});
I'm not sure on whether you're asking how to debug in Chrome, or how to get the value in Knockout, so I'll throw out some info and hope it answers your question.
Debugging in Chrome:
Open the developer tools (More Tools > Developer Tools).
Go to the Sources tab.
In the left window pane open the folder that contains your Javascript files (may be called "js" for example, but will depend on your folder naming structure in your web app).
Click on the .js file that contains your Knockout viewmodel definition. In this case that would be the one that contains the function ClsLoggerVideo.
Then find where you want to set a breakpoint in the .js file and simply click on the line number.
When you run the function again it will break at that spot and you can hover over values or add watches by highlighting right clicking a variable. In this case loggerVideoURL.
Keep in mind with Knockout, you need to make the watch like this: self.loggerVideoURL()
You need to include the parentheses to get the underlying value of the observable. If you don't include them the you'll just see the KO observable function definition.
As far as your code is concerned I'm seeing multiple issues. First, I don't see where you handle the Play button press. You could do this any number of ways in Javascript, but since you're using KO I'd suggest using a click event binding like this:
<button type="button" data-bind="click: playButtonClicked">Play</button>
Then in your viewmodel function ClsLoggerVideo, put this:
self.playButtonClicked = function () {
//Put some code here to land a breakpoint on so you can see the value of loggerVideoURL()
}
I hope that helps.
The Knockout Context Debugger chrome extension is extremely helpful. You can open dev tools as usual, but there is a new subtab for inspecting bound elements and the backing viewmodel. This approach doesn't require any breakpoints.
This question already has an answer here:
Uncaught TypeError: Cannot read property 'msie' of undefined [duplicate]
(1 answer)
Closed 5 years ago.
When implementing cloud carousel, I am getting the following error.
Cannot read property 'msie' of undefined
The js library of this code is as follows
//////////////////////////////////////////////////////////////////////////////////
// CloudCarousel V1.0.5
// (c) 2011 by R Cecco. <http://www.professorcloud.com>
// MIT License
//
// Reflection code based on plugin by Christophe Beyls <http://www.digitalia.be>
//
// Please retain this copyright header in all versions of the software
//////////////////////////////////////////////////////////////////////////////////
(function($){function Reflection(img,reflHeight,opacity){var reflection,cntx,imageWidth=img.width,imageHeight=img.width,gradient,parent;parent=$(img.parentNode);this.element=reflection=parent.append("<canvas class='reflection' style='position:absolute'/>").find(':last')[0];if(!reflection.getContext&&$.browser.msie){this.element=reflection=parent.append("<img class='reflection' style='position:absolute'/>").find(':last')[0];reflection.src=img.src;reflection.style.filter="flipv progid:DXImageTransform.Microsoft.Alpha(opacity="+(opacity*100)+", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy="+(reflHeight/imageHeight*100)+")"}else{cntx=reflection.getContext("2d");try{$(reflection).attr({width:imageWidth,height:reflHeight});cntx.save();cntx.translate(0,imageHeight-1);cntx.scale(1,-1);cntx.drawImage(img,0,0,imageWidth,imageHeight);cntx.restore();cntx.globalCompositeOperation="destination-out";gradient=cntx.createLinearGradient(0,0,0,reflHeight);gradient.addColorStop(0,"rgba(255, 255, 255, "+(1-opacity)+")");gradient.addColorStop(1,"rgba(255, 255, 255, 1.0)");cntx.fillStyle=gradient;cntx.fillRect(0,0,imageWidth,reflHeight)}catch(e){return}}$(reflection).attr({'alt':$(img).attr('alt'),title:$(img).attr('title')})}var Item=function(imgIn,options){this.orgWidth=imgIn.width;this.orgHeight=imgIn.height;this.image=imgIn;this.reflection=null;this.alt=imgIn.alt;this.title=imgIn.title;this.imageOK=false;this.options=options;this.imageOK=true;if(this.options.reflHeight>0){this.reflection=new Reflection(this.image,this.options.reflHeight,this.options.reflOpacity)}$(this.image).css('position','absolute')};var Controller=function(container,images,options){var items=[],funcSin=Math.sin,funcCos=Math.cos,ctx=this;this.controlTimer=0;this.stopped=false;this.container=container;this.xRadius=options.xRadius;this.yRadius=options.yRadius;this.showFrontTextTimer=0;this.autoRotateTimer=0;if(options.xRadius===0){this.xRadius=($(container).width()/2.3)}if(options.yRadius===0){this.yRadius=($(container).height()/6)}this.xCentre=options.xPos;this.yCentre=options.yPos;this.frontIndex=0;this.rotation=this.destRotation=Math.PI/2;this.timeDelay=1000/options.FPS;if(options.altBox!==null){$(options.altBox).css('display','block');$(options.titleBox).css('display','block')}$(container).css({position:'relative',overflow:'hidden'});$(options.buttonLeft).css('display','inline');$(options.buttonRight).css('display','inline');$(options.buttonLeft).bind('mouseup',this,function(event){event.data.rotate(-1);return false});$(options.buttonRight).bind('mouseup',this,function(event){event.data.rotate(1);return false});if(options.mouseWheel){$(container).bind('mousewheel',this,function(event,delta){event.data.rotate(delta);return false})}$(container).bind('mouseover click',this,function(event){clearInterval(event.data.autoRotateTimer);var text=$(event.target).attr('alt');if(text!==undefined&&text!==null){clearTimeout(event.data.showFrontTextTimer);$(options.altBox).html(($(event.target).attr('alt')));$(options.titleBox).html(($(event.target).attr('title')));if(options.bringToFront&&event.type=='click'){var idx=$(event.target).data('itemIndex');var frontIndex=event.data.frontIndex;var diff=(idx-frontIndex)%images.length;if(Math.abs(diff)>images.length/2){diff+=(diff>0?-images.length:images.length)}event.data.rotate(-diff)}}});$(container).bind('mouseout',this,function(event){var context=event.data;clearTimeout(context.showFrontTextTimer);context.showFrontTextTimer=setTimeout(function(){context.showFrontText()},1000);context.autoRotate()});$(container).bind('mousedown',this,function(event){event.data.container.focus();return false});container.onselectstart=function(){return false};this.innerWrapper=$(container).wrapInner('<div style="position:absolute;width:100%;height:100%;"/>').children()[0];this.showFrontText=function(){if(items[this.frontIndex]===undefined){return}$(options.titleBox).html($(items[this.frontIndex].image).attr('title'));$(options.altBox).html($(items[this.frontIndex].image).attr('alt'))};this.go=function(){if(this.controlTimer!==0){return}var context=this;this.controlTimer=setTimeout(function(){context.updateAll()},this.timeDelay)};this.stop=function(){clearTimeout(this.controlTimer);this.controlTimer=0};this.rotate=function(direction){this.frontIndex-=direction;this.frontIndex%=items.length;this.destRotation+=(Math.PI/items.length)*(2*direction);this.showFrontText();this.go()};this.autoRotate=function(){if(options.autoRotate!=='no'){var dir=(options.autoRotate==='right')?1:-1;this.autoRotateTimer=setInterval(function(){ctx.rotate(dir)},options.autoRotateDelay)}};this.updateAll=function(){var minScale=options.minScale;var smallRange=(1-minScale)*0.5;var w,h,x,y,scale,item,sinVal;var change=(this.destRotation-this.rotation);var absChange=Math.abs(change);this.rotation+=change*options.speed;if(absChange<0.001){this.rotation=this.destRotation}var itemsLen=items.length;var spacing=(Math.PI/itemsLen)*2;var radians=this.rotation;var isMSIE=$.browser.msie;this.innerWrapper.style.display='none';var style;var px='px',reflHeight;var context=this;for(var i=0;i<itemsLen;i++){item=items[i];sinVal=funcSin(radians);scale=((sinVal+1)*smallRange)+minScale;x=this.xCentre+(((funcCos(radians)*this.xRadius)-(item.orgWidth*0.5))*scale);y=this.yCentre+(((sinVal*this.yRadius))*scale);if(item.imageOK){var img=item.image;w=img.width=item.orgWidth*scale;h=img.height=item.orgHeight*scale;img.style.left=x+px;img.style.top=y+px;img.style.zIndex=""+(scale*100)>>0;if(item.reflection!==null){reflHeight=options.reflHeight*scale;style=item.reflection.element.style;style.left=x+px;style.top=y+h+options.reflGap*scale+px;style.width=w+px;if(isMSIE){style.filter.finishy=(reflHeight/h*100)}else{style.height=reflHeight+px}}}radians+=spacing}this.innerWrapper.style.display='block';if(absChange>=0.001){this.controlTimer=setTimeout(function(){context.updateAll()},this.timeDelay)}else{this.stop()}};this.checkImagesLoaded=function(){var i;for(i=0;i<images.length;i++){if((images[i].width===undefined)||((images[i].complete!==undefined)&&(!images[i].complete))){return}}for(i=0;i<images.length;i++){items.push(new Item(images[i],options));$(images[i]).data('itemIndex',i)}clearInterval(this.tt);this.showFrontText();this.autoRotate();this.updateAll()};this.tt=setInterval(function(){ctx.checkImagesLoaded()},50)};$.fn.CloudCarousel=function(options){this.each(function(){options=$.extend({},{reflHeight:0,reflOpacity:0.5,reflGap:0,minScale:0.5,xPos:0,yPos:0,xRadius:0,yRadius:0,altBox:null,titleBox:null,FPS:30,autoRotate:'no',autoRotateDelay:1500,speed:0.2,mouseWheel:false,bringToFront:false},options);$(this).data('cloudcarousel',new Controller(this,$('.cloudcarousel',$(this)),options))});return this}})(jQuery);
And my code is a simple code like this:
<head>
<title>Cloud Carousel</title>
<!-- 1. Download and insert the script from Cloud Carousel Website -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javaScript" src="cloud-carousel.1.0.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// This initialises carousels on the container elements specified, in this case, carousel1.
$("#carousel1").CloudCarousel(
{
// Best is half of the width you set in DIV style of carouselID
xPos: 285,
// Determines the central height of the pivot point of the carousel itself.
yPos: 100,
buttonLeft: $("#butLeft"),
buttonRight: $("#butRight"),
reflHeight: 56,
reflGap:2,
}
);
});
</script>
</head>
<body>
<!-- 2. Declare a div with a given carouselID Name, use style to manage the style and height. You can add background also -->
<!-- 3. Declare class="cloudcarousel" to all the images sandwitched in between the div tag, these will be the images for the carousel -->
<div id="carousel1" style="width:570px; height:220px; background:#000;overflow:scroll;">
<img class="cloudcarousel" soverflow:scroll;rc="images/BlueAppIcon.png" alt="AppIcon1" width="58" height ="58"/>
<img class="cloudcarousel" src="images/GoldAppIcon.png" alt="AppIcon2" width="58" height ="58"/>
<img class="cloudcarousel" src="images/GreenAppIcon.png" alt="AppIcon3" width="58" height ="58"/>
<img class="cloudcarousel" src="images/OrangeAppIcon.png" alt="AppIcon4" width="58" height ="58"/>
<img class="cloudcarousel" src="images/RedAppIcon.png" alt="AppIcon5" width="58" height ="58"/>
<img class="cloudcarousel" src="images/PinkAppIcon.png" alt="AppIcon6" width="58" height ="58"/>
<div id="butLeft" style="position:relative;top:20px;left:20px;padding:5px;background:#fff;"><</div>
<div id="butRight" style="position:relative;top:20px;left:30px;padding:5px;background:#fff;">></div>
</div>
</body>
How can I resolve this msie error and more importantly what does it mean?
Always try to search first, i believe this is a duplicate from here:
$.browser was removed from jQuery starting with version 1.9. It is now
available as a plugin. It's generally recommended to avoid
browser detection, which is why it was removed.
I have created a hybrid app in which I used bxslider and placed div inside it as follow,
<div class="bxslider">
<div id="chart1" style="text-align:center">
<span id="barChartTitle">Bar Chart</span>
<svg id="chartCanvas" class="margintop40"></svg>
</div>
<div id="chart2" style="text-align:center">
<span id="trendChartTitle">Trend Chart</span>
<svg id="chartCanvas" class="margintop40"></svg>
</div>
</div>
when ever I make a touch over the bxslider in the html view I receive the following error,
jquery.bxslider.js:1109 Uncaught DOMException: Failed to execute 'setPointerCapture' on 'Element': InvalidPointerId
at HTMLDivElement.onTouchStart (http://localhost:8100/js/jquery.bxslider.js:1109:34)
at HTMLDivElement.dispatch (http://localhost:8100/js/jquery-3.1.1.min.js:3:10315)
at HTMLDivElement.q.handle (http://localhost:8100/js/jquery-3.1.1.min.js:3:8342)
onTouchStart # jquery.bxslider.js:1109
dispatch # jquery-3.1.1.min.js:3
q.handle # jquery-3.1.1.min.js:3
jquery.bxslider.js:1234 Uncaught DOMException: Failed to execute 'releasePointerCapture' on 'Element': InvalidPointerId
at HTMLDivElement.onTouchEnd (http://localhost:8100/js/jquery.bxslider.js:1234:32)
at HTMLDivElement.dispatch (http://localhost:8100/js/jquery-3.1.1.min.js:3:10315)
at HTMLDivElement.q.handle (http://localhost:8100/js/jquery-3.1.1.min.js:3:8342)
I searched a lot but couldn't find out why the error occurs, please help.
Here is a workaround that works. Use this snippet of code:
var chromePointerEvents = typeof PointerEvent === 'function'; if (chromePointerEvents) { if (orig.pointerId === undefined) { return; } }
Insert after:
touchPoints = (typeof orig.changedTouches !== 'undefined') ? orig.changedTouches : [orig];
of file jquery.bxslider.js
More info here read simplicitytrade answer on Github.
why don't you try this current version?
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />
I put this code into add basic module HTML block of a wordpress page builder. I encounter the white screen of death. Chrome developer console told me the following:
helpers.js?ver=4.5.3:15 Uncaught TypeError: $(...).sidr is not a function
This can be traced from line 15 in helpers.js?ver=4.5.3:
$('#mobile-menu-trigger').sidr({
source: sourceVal,
name: 'sidr-main'
});
Before or after I restored the previous version of the page, there was no such error. The html code below seems to run normally if save as a html file and open it with chrome. Can someone please explain which might have possibly caused that error?
Edit: When I change the theme of wordpress, everything works again. With all of other themes, the code works so the problem should come from the theme.
$(document).ready(function() {
getUpdates();
});
function getUpdates() {
// get the data with a webservice call
$.getJSON('http://api.thingspeak.com/channels/136053/feed/last.json?callback=?', function(data) {
// if the field1 has data update the page
if (data.field1) {
document.querySelector('.info-giver .temperature').innerHTML = data.field1.slice(0,4) + "°C";
document.querySelector(".info-giver .humidity").innerHTML = data.field2.slice(0,5) + "%";
document.querySelector('.info-giver .windspeed').innerHTML = data.field4.slice(0,4) +" m/s";
document.querySelector(".info-giver .pressure").innerHTML = data.field3 +"Pa" ;
}
});
}
(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "announcer">
<div class="temperatureDeclared" style= "width: 25.00%">Temperature</div>
<div class="humidityDeclared" style= "width: 25.00%">Humidity</div>
<div class="windspeedDeclared" style= "width: 25.00%">Windspeed</div>
<div class="pressureDeclared" style= "width: 25.00%">Pressure</div>
</div>
<div class = "info-giver">
<div class="temperature" style= "width: 25.00%">N/a</div>
<div class="humidity" style= "width: 25.00%">N/a</div>
<div class="windspeed" style= "width: 25.00%">N/a</div>
<div class="pressure" style= "width: 25.00%">N/a</div>
</div>
Add these lines before and after code your code will works
;(function($){
//code
})(jQuery);
Just Like This
;(function($){
$('#mobile-menu-trigger').sidr({
source: sourceVal,
name: 'sidr-main'
});
})(jQuery);
I hope this will works !
You didn't include your sidr library. After loading jquery include sidr library. After that init sidr like this on your html.
$('#mobile-menu-trigger').sidr({....});