HTML document body contains two independent paper-scroll-header-panels inside a neon-animated-page. After switching the neon-animated-page from page 0 to page 1, the paper-scroll-panel on page 1 is not working.
http://jsbin.com/winedi/edit?html,output
Reason : paper-scroll-header-panel when it is first loaded calculates the header height. Then it listens to only iron-resize event. But neon animated pages do not fire iron-resize event while switching pages.
From https://github.com/PolymerElements/paper-scroll-header-panel/blob/master/paper-scroll-header-panel.html. line number 230
* By default, the height will be measured when it is ready. If the height
* changes later the user needs to either set this value to reflect the
* new height or invoke `measureHeaderHeight()`.
Solution : I've solved this issue by calling measureHeaderHeight() method of the second paper-scroll-header-panel explicitly. check this http://jsbin.com/visazasena/edit?html,output
Polymer({
is: "inbox-view",
next_page: function() {
document.querySelector("#main-page").selected = 1;
}
});
Change this to
Polymer({
is: "inbox-view",
next_page: function() {
document.querySelector("#main-page").selected = 1;
document.querySelector("#panel").measureHeaderHeight();
}
});
Related
I have an iFrame in my jsp page where in page load it should have height and width as 600 and 400 respectively. This iFrame contains some page having some forms in it, once the form is filled and submitted, it will redirected to a thank you page. At that time I need the height of the iFrame as 200(because the page contents are less and I need to reduce the white space in it). how to achieve this? I get n number of links in stack exchange itself but nothing is useful in this case.
Is there any way to check if the iFrame src url is changed? If so I can make a condition and do the below code to reduce the height.
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
iFrameID.height = "200";
iFrameID.width = "400";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
iFrameID.width = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script>
The above function is working fine if i give it in iFrame page load but I need to set this only when I get the thank you page inside iFrame.
Request to kindly help on this.
you can use something like cookie.js (https://github.com/js-cookie/js-cookie) for creating a helper cookie for each step in your iframe.
(function($) {
$( '#submit-button').on( "click", function() {
Cookies.set('isSubmitted', true);
});
})(jQuery);
Now you can check if the cookie is set and resize the iframe
(function($) {
if(Cookies.get('isSubmitted') === true) {
$('#iFrameID').height(200);
}
})(jQuery);
After this you can delete this cookie
Cookies.remove('isSubmitted');
You can do iFrame url change check in the parent page like this:
function check(){
$('#idIframe').load(function() {
console.log("the iframe has changed");
});
};
$("#idIframe").on("mouseenter",function(){
window.setInterval(check, 100); // 100 ms
});
Using Polymer Starter Kit as an example, I would like to have different <app-toolbar> in <my-app> (using property headerType) based on different <my-view#>, i.e.
<my-view1> => headerType = 'my-view1-header'
<my-view2> => headerType = 'my-view2-header'
In my <my-app>, I have created a property headerType and use <dom-if> to show/hide different <app-toolbar>.
My question is how would I always fire an event to <my-app> and set headerType = my-view#-header whenever <my-view#> is active (i.e. comes into view).
I have tried the polymer lifecycle, such as ready(), attached(), etc, and I understand they are only trigger during dom-related events.
I eventually use the _pageChanged observer to call a function on <my-view#>. Below are the snippet of the code.
_pageChanged: function(page) {
let onLoad = function () {
let selected = this.$.ironpages.children[page];
if (Object.getPrototypeOf(selected).hasOwnProperty('viewSelected')) {
selected.viewSelected();
}
}
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, onLoad, this._showPage404, true);
},
There is some example in Polymer shop template where you can execute something when the visibility of your view change with iron-pages.
you just need to add a property for example visible in each of your view element with Boolean type and observe that property to check whatever the view is visible or not, and then in your iron-pages you need to add selected-attribute property and the value is visible. check Polymer Shop Template.
I'm working on a site with a scrollable list of canvases for plotting data, and I need to resize the canvases whenever the width of the div they're in changes.
I have it working in most cases, but if I delete a plot such that the scroll bar goes away, it doesn't work. I tried the following, where plotsScroller is the div with the scroll bar and plotsList is what's inside of it:
$scope.isScrollingPlotsList = function() {
return plotsList.offsetHeight > plotsScroller.offsetHeight;
}
$scope.$watch('isScrollingPlotsList()', $scope.$apply);
This code would work except that no $digest happens after the reflow that removes the scroll bar; $digest is called when I delete a plot but I guess the reflow happens later.
Does anyone know how I can detect the reflow without using $timeout?
You can use Mutation Observers to detect changes in the DOM. When a change occur you will be notified and can traverse to see what changed.
An example of usage (source):
// select the target node
var target = document.querySelector('#some-id');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);
// later, you can stop observing
observer.disconnect();
Also see the source link for details.
It should be supported in all major browsers incl. IE11. For [IE9, IE11> there exists a polyfill that can be used.
The specification
I know there are more efficient ways at doing this but I have my reasons for doing it this way. I have a modal popup window. I would like for this window to pop up as soon as the visitor loads the page. As of right now the window is reached and opened by clicking a link that takes them to index.php#login_form.
"#login_form" being what I would like to add the URL on page load. Then they can chose to exit it once it has initially loaded with the popup.
Now is there a way to do this more efficiently with out having to change my css or code very much?
Thanks!
The hash in url can be accessed through window.location.hash in javascript. You can judge this in body onload event.
To answer your question I have created a fiddle, that takes your example and solves what you are looking for. http://jsfiddle.net/sgaurav/xA4vG/
Basically what this code is doing is, selects the id of click you want to simulate and then creates a mouse event for click as per answer given here How do I simulate user clicking a link in JQuery?
$.fn.simulateClick = function() {
return this.each(function() {
if('createEvent' in document) {
var doc = this.ownerDocument,
evt = doc.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
} else {
this.click(); // IE
}
});
}
Now this code is used onload event of body to fake a click on the link that you are doing manually till now using
jQuery(document).load(
jQuery('#join_pop').simulateClick()
);
This in turn loads popup as soon as page opens up. You can change id in last code to the login form if you want and that will start showing up on page load instead of sign up.
One easy way is to load the page directly with the hashtag login_form:
http://www.script-tutorials.com/demos/222/index.html#login_form
Or if you want to be more "precise" you can use jquery like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<!--Place this at the end of the body tag.-->
<script>
$(function(){
window.location.hash = "login_form"; //this will add with js the #login_form hash at the end of th url
})
</script>
You can use jquery to show the modal when the window is loaded:
Try this code and you'll understand:
$(function(){
alert("Done loading");
})
You'll add the code to show the modal instead of the alert function. If the modal is shown or hidden with css, you can easily add a css class to an element with:
$(".element").addClass("showModal);
Or remove a class with:
$(".element").removeClass("hideModal");
Be sure to have the jquery library imported. I hope this answers your question.
I made this fiddle
http://jsfiddle.net/nAb6N/10/
As you can see I have 2 animators , a element and body class,
I am adding class to body after the first click on a element but once I click on body is not closing it. If I define animators as
var animators = $$('#opendiv,body');
it works ok except that I do not want the div to open on body click. I need it to close on body click.
Any help is appreciated.
Thank you!
Right. Seems as if you really require an outerClick pattern to close. Here's the one that is most notably used within mootools devs, allowing you to create a custom event, based on click:
Element.Events.outerClick = {
base : 'click',
condition : function(event){
event.stopPropagation();
return false;
},
onAdd : function(fn){
this.getDocument().addEvent('click', fn);
},
onRemove : function(fn){
this.getDocument().removeEvent('click', fn);
}
};
The way it works is: it is based on a normal click. upon adding, it adds the callback as a click event on the document. when a click happens within the element itself,it stops bubbling via event.stopPropagation();, else, it will bubble and the callback will run.
here's how it ties together after the above:
http://jsfiddle.net/dimitar/nAb6N/13/
(function() {
var opener = $('opendiv');
var boxtoopen = $('box');
boxtoopen.set('morph', {
duration: 700,
transition: 'bounce:out'
});
boxtoopen.addEvent('outerClick', function(event) {
boxtoopen.morph(".openOff");
opener.removeClass("hide");
});
opener.addEvent('click', function(e) {
e.stop();
boxtoopen.morph(".openOn");
this.addClass("hide");
});
})();
I have also 'outsourced' the morph properties to the CSS as it makes more sense, semantically.
P.S. note that you need mootools 1.4.3 or 1.4.5, but not 1.4.4 as there's a morph bug to do with units in that release. the jsfiddle above uses 1.4.6 (mootools edge).