IziModal is beautiful but Jquery selectors cannot see or find the modal elements it hides. So this code: var nextmodal = $(this).next('.izra'); $(nextmodal).iziModal('open'); , which can see any div hidden by display:none, can find any element EXCEPT divs hidden by Izimodal.
https://jsfiddle.net/zmbth7u9/4/ (Stack code snippet below)
Izimodal can find its own hidden div with class .izra but no Jquery selector can?
I've tried everything including div: $(this).next($(":hidden:first"));
console.log($(hiddenstuff))
The above code SKIPS OVER the Izimodal hidden div and finds the second!
I need to activate modals with generic classes repeated throughout documents for footnotes, saving code, markup and time.
Any idea how I can get Jquery selectors to find the div with the .izra class so I can act on it?
Since we cannot find siblings because IziModal hides them beyond reach, perhaps modal divs should begin without the .izra class (set to display:none by css) and dynamically add the .izra modal class upon hitting the click trigger? We could find the divs first with next(), then add the izra class, or would that put us back at square one?
Thank you!
https://jsfiddle.net/zmbth7u9/4/ The modal and finding divs in this fiddle works, and shows the lines that inexplicably don't work.
//How things should Work generically
$('.generictrigger').click(function () {
var nextmodal = $(this).next('.genericmodal');
$(nextmodal).modal('show');
});
//IziModal Initialize and fire on open
$(function () {
$(".izra").iziModal();
$('.izra').iziModal('open'); // This works!
});
//Proof hidden divs easily found when NOT hidden by IziModal
$(".trigger2").click(function () {
var hiddenstuff = $(this).next($(":hidden:first")); // This works!
console.log($(hiddenstuff))
});
//Proof IziModal divs cannot be found by Jquery selectors
$(document).on('click', '.trigger', function (event) {
event.preventDefault();
// $('.izra').iziModal('open'); // THIS WORKS!
var nextmodal = $(this).next('.izra'); // Should work but does not
console.log($(nextmodal));
$(nextmodal).modal('open'); // Should work but does not <<<<<<
});
.hidden { display: none; }
.c1 { background-color:#33ccff; }
.c2 { background-color:#ffff99; }
.c3 { background-color:#80ff80; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/css/iziModal.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.js"></script>
<!-- Finding divs hidden by IziModal Begin -->
<!-- How things should generically work calling Next() -->
<div class="containerdivforchildren">
<div class="c1 generictrigger">Click for Generic Modal FOUND by NEXT Selector </div>
<div class="genericmodal modal fade modal-body modal-content"><a title="Close"><i data-dismiss="modal" class="glyphicon glyphicon-remove icon-arrow-right pull-left"></i></a>Generic Bootstrap Modal</div>
</div>
<!-- This section proves any div can be found EXCEPT divs touched by IziModal -->
<div class="modaltriggercontainer">
<div class="trigger2 c3">Click to Log var hiddenstuff = $(this).next($(":hidden:first"));to console</div>
<div class="trigger c2">Click to Open Izra (will fail but logs results of $(this).next() to console</div>
<div class="izra">Unretrievable modal div when hidden by IziModal class</div>
<!--Above DIV IS SKIPPED AND CANNOT BE FOUND!-->
<div id="incognito" class="c1 oddlynamed hidden">hidden by style but found using $(this).next()</div>
</div>
<!-- Above div is the first div found by any selector looking for the .next()-->
I haven't used React in several months, and tonight I was trying to write jsx that is automatically compiled to jsx by babel according to these directions.
I have two files like this:
Parent.jsx
var Parent = React.createClass({
render: function() {
return (<Child></Child>);
}
});
and
Child.jsx
var Child= React.createClass({
render: function() {
return (<span>CHILD</span>);
}
});
I am using babel to monitor the files for changes and output new js files when needed, and it always renders the Child component as React.createElement("Child", null) instead of React.createElement(Child, null) like I expect.
I'm new to babel and node in general and can't find a way to get this jsx transform to work as I expect. Is there something I'm missing? I feel like this pattern used to work, but I've never tried it with anything like babel before.
It took me what felt like forever to figure this out, but it turns out you can just load all the files from the HTML and then nest them later on.
HTML:
<html lang="en">
<head>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
</head>
<body>
<div id="root"></div>
<div id="test"></div>
</body>
<script src="./Test3a.jsx" type="text/babel"></script>
<script src="./Test3b.jsx" type="text/babel"></script>
<script type="text/babel">
ReactDOM.render(<Ostrich />, document.getElementById("root"));
</script>
<script type="text/babel">
ReactDOM.render(<Monkey />, document.getElementById("test"));
</script>
Test3A.jsx:
window.Ostrich = function() {
return (
<div>
Ostriches
</div>
);
}
window.Monkey = function() {
return (
);
}
Test3A.jsx:
window.MoreMonkeys = function() {
return (
<div>
That's a lot of Monkeys.
</div>
);
}
This is for non-webpack "React JS", or more accurately Babel/JSX "without" ReactJS. It may not be a perfect solution, but hopefully it helps.
I have a div draggable using YUI3 code:
dd1 = new Y.DD.Drag({
node: '#dd-demo-rep'
}).plug(Y.Plugin.DDConstrained, {
constrain2node: '#container'
});
I need to be able to interact with other links within the node "dd-demo-rep" when it is not being dragged.
I want to be able to disable the DD code and then re-enable it when I am ready. This may happen different times so it needs to be able to toggle as needed.
I tried using the destroy() event {dd1.destory()}, and that works to stop it, but I was not able to get it working again. Is there a better way to do this ? Appreciate any help or advice.
You need to set the lock attribute of dd1 to true:
dd1.set('lock', true);
Setting lock to true stops the element from being draggable. Here's a runnable example:
<script src="https://cdn.rawgit.com/stiemannkj1/0214fdc4cccaa77d6e504320cf70a571/raw/63d260364730fb067f103c00862c7e65685256df/yui-3.18.1_build_yui_yui-min.js"></script>
<button id="toggleLock">Toggle Lock</button>
<div id="container" style="height: 200px; width: 200px; border-style: solid;">
<span id="drag" style="border-style: dotted;">Draggable</span>
</div>
<script type="text/javascript">
YUI().use('dd-drag', 'dd-constrain', function(Y) {
var dd = new Y.DD.Drag({
node: '#drag'
}).plug(Y.Plugin.DDConstrained, {
constrain2node: '#container'
});
Y.one('#toggleLock').on('click', function(event) {
dd.set('lock', !dd.get('lock'));
});
});
</script>
In my JQUerymobile pages, I have embedded popup div.
Here is an example of my pages content :
<html>
<head>...</head>
<body>
<div data-role="page" id="myPage" data-dom-cache="true" data-theme="a">
<div data-role="content" data-theme="a" >...</div>
<div data-role="footer" data-theme="a" data-id="footer-sante" data-position="fixed">...</div>
<div data-role="popup" id="popupOne" data-dom-cache="true" data-theme="b">
</div>
</div>
<div data-role="popup" id="popupTwo" data-dom-cache="true" data-theme="b">
...
</div>
</body>
</html>
I navigate from pages to anothers. Suddently, my embedded popups disappear from my DOM when I inspect my code.
As shown in my example, the popup location in the source code doesn't seem to change anything to the problem.
Since popups are removed from DOM, the code bellow does nothing (it actually worked before) :
$('#popupOne').trigger('create');
$('#popupOne').popup({ transition: "slidedown", position:"position-header" });
$('#popupOne').popup('open');
Is there a solution to keep my popups in my DOM ?
Is there a better location to embed popups in source code ?
Another way could be to load a popup from an external (cached) page but i never achieved to do that by javascript.
Any idea to solve the problem (or a workaround) ?
(Both) your HTML placements might be incorrect here. Remove the popupOne markup from the end of the page and paste it inside the div with data-role=content like this :
<div data-role="page" id="myPage" data-dom-cache="true" data-theme="a">
<div data-role="content" data-theme="a" >
<div data-role="popup" id="popupOne" data-dom-cache="true" data-theme="b"></div>
</div>
<div data-role="footer" data-theme="a" data-id="footer-sante" data-position="fixed">...</div>
</div>
And if you want to reuse popups, I suggest you go the JS way. You could create popups n the fly and open them. Here's some code which does just that. Feel free to alter it to any thing you want :)
$.extend({
"makePopup": function (text) {
var $popup;
//creat popup element
$popup = $("<div/>", {
"data-role": "popup",
"data-theme": "a",
"data-overlay-theme": "a",
"data-transition": "pop"
}).popup();
//create close element
var $close = $("<a/>", {
"data-role": "button",
"html": "Close",
"href": "#",
"data-theme": "e"
}).on("click", function () {
//click event of close element
$(this).closest("[data-role=popup]").popup("close");
}).buttonMarkup();
//create content div - makes a nice jQM page structure.
var $content = $("<div/>", {
"data-role": "content",
//change this any way you want- Im just adding the text from clicked link here.
"html": "<span>" + text + "</span>"
});
//append $close to $content, then append $content to $popup
$content.append($close).appendTo($popup);
return $popup;
}
});
And when you want to use this, just do this,
var popupEl = $.makePopup("Some HTML");
And then you could, say, open it :
popupEl.popup("open");
Or simply,
$.makePopup("Some HTML").popup("open");
Here's a demo : http://jsfiddle.net/hungerpain/xjz3V/
Hope this is what you wanted :)
I have created a facebook iframe application and set the dimensions to Auto Resize in the Facebook Application settings page but still a horizontal scrollbar is shown at the bottom in IE and Google Chrome. Works fine in Firefox. Any solution ?
It's explained how to do this here:
http://clockworkcoder.blogspot.com/2011/02/how-to-removing-facebook-application-i.html
Basically you should use
window.fbAsyncInit = function() {
FB.Canvas.setAutoGrow();
};
plus make sure that your html and body tags are set to overflow:hidden so you don't get those briefly shown scroll bars that are so annoying
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow: hidden">
<head>
<!-- Header stuff -->
</head>
<body style="overflow: hidden">
You also need to start the timer to call autoresize code. In your applications HTML do:
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
};
Above code will check the content dimensions every 100ms. If you want to use different timing you can pass milliseconds as variable:
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize(50);
};
If your content size does not change after page load you can save CPU cycles by changing the content size just once manually:
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
You can even pass the desired size as parameter
window.fbAsyncInit = function() {
FB.Canvas.setSize({ width: 520, height: 600 });
}
Facebook must remove SCROLLING="YES" attribute of iframe of canvas app and append overflow:auto to style attribute
OR provide us with a function by which we can change scrolling attribute value to NO according to our apps.
I've tried everything you said and looked at this two links either ( CSS + FireFox: hiding scrollbar on iframe with scrolling=yes - facebook canvas height no scroll set in ie8 and firefox) that discuss the same problem, but it didn't work for me.
What worked for me was changing the canvas settings in the section advanced of app canvas configuration ( https://developers.facebook.com/apps ) to fixed canvas width (760px) and height (fixed at 800).
I hope this help you.
Might sound obvious, but have you tried CSS overflow: hidden on the iFrame?
I have had this problem in the past. While resizing might work, there is a maximum width on the Facebook canvas. It is likely that your body element has some kind of default padding / margin, and therefore it's box is bigger than the max width.
Try using a reset style sheet that clears default styles: http://developer.yahoo.com/yui/3/cssreset/
I've tried many things listed here, but what really worked was:
Configurations -> Advanced -> Canvas Settings, set a fixed width and height
It's also important to notice that if you don't provide a privacy policy url, facebook won't save this configurations.
Being frustrated about this problem of Firefox for a long time, finally found the best solution, which is here from Roses Mark. She proposed several ways, however only the body onload stably removes scrollbar in Firefox 10.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<script type="text/javascript">
function framesetsize(w,h){
var obj = new Object;
obj.width=w;
obj.height=h;
FB.Canvas.setSize(obj);
}
</script>
</head>
<body onload="framesetsize(500,3300)"> <!--specify the height and width for resize-->
<div id="fb-root"></div> <!--this div is required by the Javascript SDK-->
<div style="height: 2400px">
//Your content
//Goes here
</div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</body>
</html>
Horizontal scrollbars are always caused by the width of your HTML page being larger than the area of the iframe.
Make sure you set the right width to your or containing .
Set the width in your CSS file and set the overflow property.
If it's a Tab iframe app you can set it like this:
body{
width:510px;
overflow:hidden;
}
Apart from this code:
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
};
Also update Canvas Height setting in FB developer app settings:
Set canvas height to Fixed instead of Fluid. This will remove horizontal and vertical scroll bars.
Well, I will share some techniques collected from several resources that can be implemented to get rid of your unwanted scroll bars of your iframe facebook app. So, here is the first technique:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<script type="text/javascript">
function framesetsize(w,h){
var obj = new Object;
obj.width=w;
obj.height=h;
FB.Canvas.setSize(obj);
}
</script>
</head>
<body onload="framesetsize(500,3300)"> <!--specify the height and width for resize-->
<div id="fb-root"></div> <!--this div is required by the Javascript SDK-->
<div style="height: 2400px">
//Your content
//Goes here
</div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</body>
</html>
Using Latest Javascript Facebook SDK [Without using Body OnLoad]
window.fbAsyncInit = function() {
FB.init({
appId : '142388952486760',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Canvas.setAutoResize(); //set size according to iframe content size
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
Using the Old Facebook Javascript SDK
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(
["CanvasUtil"],
function(){
FB.XdComm.Server.init('/xd_receiver.html');
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("Your Facebook API Key", "/xd_receiver.html"); });
</script>
I might be late but I have very easy solution.
this might help
inside the page plugin div:
<div class="coverhack"></div>
and on css:
.coverhack {
position: absolute;
width: 520px;
height: 440px;
background-color: rgba(0, 0, 0, 0);
bottom: 0;
}
what have I done is only covering the scrollable part so it cant be scrolled. not might be the perfect answer but it works the same with the fastest delay among all answers.
I found the perfect solution! Make sure to put the following CSS code into the <head> area:
<style>*{margin:0;padding:0;}</style>
The scrollbars are actually shown because there is a default padding or margin given. Hope I could help!