It throw this below error
ScrollMagic.min.js:3 Uncaught ReferenceError: margins is not defined
Scroll not work. If I reduce height it works some time
I edited the Scrollmagic.js file and changed line 677 to 680 to this:
var margins = {};
i.forEach(function(e) {
margins[e] = n[e] || ""
});
r.css(t, margins);
That resolves the variable not existing error. Not too sure about knock on though.
Related
Note: Using React
I'm having trouble setting up a radar in my leaflet map object. I'm able to generate the map easily, but I get an error when I try adding a radar to the map.
The issue comes from this slice of code:
import RadarMap from 'leaflet-radar'
.
.
.
drawMap(){
let radar;
this.map = L.map(this.id);// eslint-disable-line
this.map.setView([this.latitude, this.longitude], this.zoom);
L.tileLayer("https://tile-{s}.openstreetmap.fr/hot/{z}/{x}/{y}.png", { // eslint-disable-line
accessToken: this.accessToken
}
).addTo(this.map);
radar = new L.Control.Radar({}); // eslint-disable-line
radar.addTo(this.map);
}
The error specifically occurs when I call this line:
radar.addTo(this.map);
If I don't call this line, my code will correctly generate a map. But this one line
breaks the map.
To be frank, I've been working on this error for hours now. I've altered this code zealously;
yet iteration after iteration, I still can't get this radar to work. If anyone knows how to help me with this problem, I'd be extremely grateful.
I figured out the problem.
Leaflet-radar was trying to use a global variable named checkbox_div. Since checkbox_div did not exist as a global variable, an error was raised. Adding checkbox_div as a global variable fixed the error.
I solved this error by using globalThis in the constructor of the element and using that to add a global variable.
constructor(props){
super(props);
globalThis.checkbox_div = undefined; // eslint-disable-line
}
In my solution, I gave checkbox_div the value of undefined, but I think it's possible to give checkbox_div any value. Just instantiating checkbox_div is the key.
An alternative solution would be to simply add checkbox_div in the .html file like this
<script>
var checkbox_div;
</script>
In ios 11 navigation bar is overlapping status bar. If any body faced the same issue kindly help.
Not sure if this is the same issue, but we ran into this as well when upgrading to iOS 11.
See ios 11 custom navbar goes under status bar
We were manually setting nav bar height to 64 and pinning to the superview edges. Conforming to the UINavigationBarDelegate protocol and implementing the UIBarPositioningDelegate delegate method solved it for us.
We replaced
navigationBar.autoPinEdgesToSuperviewEdgesExcludingEdge(.bottom)
navigationBar.autoSetDimension(.height, toSize: 64)
with
...
if #available(iOS 11.0, *) {
navigationBar.topAnchor.constraint(
equalTo: self.view.safeAreaLayoutGuide.topAnchor
).isActive = true
} else {
navigationBar.topAnchor.constraint(
equalTo: topLayoutGuide.bottomAnchor
).isActive = true
}
navigationBar.autoPinEdge(toSuperviewEdge: .left)
navigationBar.autoPinEdge(toSuperviewEdge: .right)
navigationBar.delegate = self
...
public func position(for bar: UIBarPositioning) -> UIBarPosition
return .topAttached
}
This is using the purelayout DSL for some of the autolayout calls (https://github.com/PureLayout/PureLayout)
Credit goes to https://stackoverflow.com/users/341994/matt for the answer
Had similar problem. In my case it turned out that previous view controller had custom nav bar and therefore it was hiding both - nav bar and status bar. There was
UIApplication.shared.setStatusBarHidden(true, with: UIStatusBarAnimation.none)
UIApplication.shared.setStatusBarStyle(.default, animated: false)
And in the problematic view controller I had this:
UIApplication.shared.setStatusBarStyle(.default, animated: false)
UIApplication.shared.setStatusBarHidden(false, with: UIStatusBarAnimation.none)
The issue was fixed simply by putting the two lines in the correct order:
UIApplication.shared.setStatusBarHidden(false, with: UIStatusBarAnimation.none)
UIApplication.shared.setStatusBarStyle(.default, animated: false)
All things above are deprecations, so another possible fix would probably be changing this to the recommended way of hiding status bar (which is not yet ideal as discussed here: setStatusBarHidden deprecated, but only thing that works).
Set child view to top constraint of superview... Click for edit constraint If you see "Align Top to : Safe Area " change it to superview so that it will overlap
I'm looking for a way to change the value (or format) for an individual series label when hovering it in anycharts.
Currently I'm only able to access the entire axis and I can find no getter method for individual labels so as to attach a listener.
xAxis.labels().listen('mouseOver', function(e) {
console.log(this, e.target);
});
This jsfiddle is as far as I got (see console log), this as well as the event.target reference the entire axis but not the label:
https://jsfiddle.net/robstarbuck/pbhd4b7L/9/
Indeed, there was a little bug with cache and format() function, our dev team made the fix, so please check the working sample:
var labelIndex = e.labelIndex;
var label = this.getLabel(labelIndex);
var value = xAxis.scale().ticks().get()[labelIndex];
label.format(value * 2);
https://jsfiddle.net/pbhd4b7L/13/ – it also shows how to work with tick values:
Currently it takes the js from branch, but this fix will be included in the upcoming release – 7.14.0 version (ETA: May 2017)
Our API is a little bit complicated here, but we're working hard to improve it. Does this what you're looking for?
var labelIndex = e.labelIndex;
var label = this.getLabel(labelIndex);
label.fontColor('red');
label.draw();
https://jsfiddle.net/pbhd4b7L/10/
This issue was fixed in the 7.14.0 release, use this code:
xAxis.labels().listen('mouseOver', function(e) {
var labelIndex = e.labelIndex;
var label = this.getLabel(labelIndex);
var value = xAxis.scale().ticks().get()[labelIndex];
label.format(value * 2);
label.fontColor('red');
label.draw();
});
with the latest version: https://jsfiddle.net/2t08ahkg/3/
I'm using AngularJS 1.5.0 and Microsoft Edge browser screen doesn't reflect the DOM.
I would like some suggestion how this can be fixed.
I can't really apply a fix for each element as the application is somewhat big with dynamic user content including Angular equations.
Also the app include a lot of dynamic bindings linked to input boxes.
Selecting the text with the mouse turn the 0 into a 2 which is the right value in the example below.
Also changing the position style back and forth seem to force Edge to redraw the element but it's somewhat an ugly fix that I don't like very much and it need to be trigger at so many places (Ajax request, input changes and so on...)
The page start with a value of 0. Then an Ajax call is made and it go fetch the real data. After some experimentation the bug only appears if the new data is 1 character (ex: 2 or 9). And it happens every time. If it's a 2 digit number (ex: 26) then the good number appears.
Any help on this matter would be gladly appreciated.
We were facing the same problem and it stopped occurring after removing the text-transform: uppercase style from the elements that are not updating.
#Sampson, it looks like this is a bug in Edge.
I was able to make a temporary fix with the use of Mutation Observer.
Little script that I made that works for AngularJS elements created server side.
Currently those are the only one causing trouble in my app.
<script>
$(document).ready(function(){
var ua = navigator.userAgent;
var re = new RegExp("Edge/");
if (re.exec(ua) != null){
console.log('edgeMutationObserver ON!!')
var edgeMutationConfig = { characterData: true, subtree: true };
var edgeMutationObserver = new MutationObserver(function(mutations) {
var rgb_p = /rgb\((\d+), (\d+), (\d+)\)/g;
var rgba_p = /rgba\((\d+), (\d+), (\d+), (\d.?\d*)\)/g;
mutations.forEach(function(mutation){
if(mutation.target.nodeType == 3){
var that = mutation.target.parentNode;
// Save the background color
var bgc = that.style.backgroundColor;
// Get applied style from style or css
var bgc_css = bgc || $(that).css('backgroundColor');
var bgc_temp,match;
if(match = rgb_p.exec(bgc_css)){
// rgb transformed in rgba triggers update
bgc_temp = 'rgba('+match[1]+','+match[2]+','+match[3]+',1)';
}else if(match = rgba_p.exec(bgc_css)){
// Slightly modify transparency
var alpha = match[4] == 0 ? 0.01 : match[4] - 0.01 ;
bgc_temp = 'rgba('+match[1]+','+match[2]+','+match[3]+','+alpha+')';
}else{
// If either inline style or css is already equal to transparent the redraw is not made so i choose an alternate color with 0 opacity
bgc_temp = bgc_css != 'transparent' ? 'transparent' : 'rgba(0,0,0,0)';
}
// Change background color to force redraw
that.style.backgroundColor = bgc_temp;
setTimeout(function(){
// Apply back previous style
// Doesn't redraw without a timeout in Edge
that.style.backgroundColor = bgc;
},0);
}
});
});
$('.ng-binding').each(function(){
edgeMutationObserver.observe(this, edgeMutationConfig);
});
}
});
</script>
I have been trying to get the scroll position of a tree grid in and ext.js application using sencha architect. Originally I wanted to keep the scroll position after a reload so when a user deletes a post it will scroll back to that same spot after reload. I have attempted to use various methods I have searched for but nothing is working. I'm currently testing by having a java script timeout function give me the scroll position after a few seconds, long enough for me to scroll down and console.log the position but it gives me nothing and I'm not showing anything but zero when I go into the dom and look at the tree view object. I have already tried the following
1st: var newcompheight = comboboxeample.getHeight();
2nd: getScroll: function() {
var me = this,
dom = me.dom,
doc = document,
body = doc.body,
docElement = doc.documentElement,
left, top;
if (dom === doc || dom === body) {
// the scrollLeft/scrollTop may be either on the body or documentElement,
// depending on browser. It is possible to use window.pageXOffset/pageYOffset
// in most modern browsers but this complicates things when in rtl mode because
// pageXOffset does not always behave the same as scrollLeft when direction is
// rtl. (e.g. pageXOffset can be an offset from the right, while scrollLeft
// is offset from the left, one can be positive and the other negative, etc.)
// To avoid adding an extra layer of feature detection in rtl mode to deal with
// these differences, it's best just to always use scrollLeft/scrollTop
left = docElement.scrollLeft || (body ? body.scrollLeft : 0);
top = docElement.scrollTop || (body ? body.scrollTop : 0);
} else {
left = dom.scrollLeft;
top = dom.scrollTop;
}
return {
left: left,
top: top
};
3rd: var test = window.pageYOffset;
I have also attempted to setting the keepscroll position property in Sencha architect to true and other things I have googled but nothing is working. Any help would be appreciated.
Use this:
treeGrid.getEl().getScrollTop()