How can I fade out the following?
It does also need to be removed completely, not just only alpha 0 but also display:none and visibility:hidden after the fade out.
FIDDLE: http://jsfiddle.net/fourroses666/ywMUx/2/
js:
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$('.go-away').click(function() {
$('.message').removeClass('show');
});
</script>
css:
<style>
.message{display:none; visibility:hidden;}
.message.show{display:block; visibility:visible;}
.go-away{float:right; cursor:pointer; cursor:hand;}
</style>
html:
<div class="message show">Pizza is nice! <div class="go-away">x</div></div>
Try this
$('.go-away').click(function() {
$(this).parent().fadeOut();
});
fadeOut makes it invisible, the 400 is how many milliseconds to fade out over, and then function() { $(this).remove() } is the callback function (called after the fadeOut animation has completed) that will remove the element from the DOM. Here's a working fiddle. Let me know if this helps or if you have any questions :)
$('.go-away').click(function() {
$('.message').fadeOut(400, function() {
$(this).remove();
});
});
Related
I am trying to fire an event when the mouse wheel is used:
map.on('mousewheel', function() {
alert('foo');
});
But that doesn't seem to work, nor does "wheel". Any ideas?
You could draw some inspiration from Leaflet source code handling the zoom on mousewheel and listen to the mousewheel events on the map container. Something like:
L.DomEvent.on(map.getContainer(), 'mousewheel', function() {
console.log("zoom", map.getZoom())
});
And a demo
var map = L.map('map').setView([35.772219, -78.675272], 10);
L.DomEvent.on(map.getContainer(), 'mousewheel', function() {
console.log("zoom", map.getZoom())
});
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js"></script>
<div id="map" style="height: 100px"></div>
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.
Not sure what I'm doing wrong. The Masonry works, but the Infinite Scroll doesn't.
I'm trying to make the simplest Masonry/InfiniteScroll theme to build upon. I've tried a lot of different methods but I still get stuck.
<title>{title}</title>
<meta name="description" content="{MetaDescription}" />
<link rel="shortcut icon" href="{Favicon}">
<!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
<script type="https://github.com/paulirish/infinite-scroll/blob/master/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
var $content = $('#container');
$content.masonry({itemSelector: '.item', columnWidth:300
});
$content.infinitescroll({
navSelector : 'div#pagination',
nextSelector : 'div#pagination a#nextPage',
itemSelector : '.item'
});
});
</script>
<style>
.item{width:300px;}
img{max-width:100%;}
</style>
</head>
<body>
<div id="container">
{block:Posts}
{block:Photo}
<div class="item"><img src="{PhotoUrl-500}" title="{PhotoAlt}"/></div>
{/block:Photo}
{/block:Posts}
</div><!--wall-->
{block:Pagination}
<div id="pagination">
{block:NextPage}
<a id="nextPage" href="{NextPage}"></a>
{/block:NextPage}
{block:PreviousPage}
{/block:PreviousPage}
</div>
{/block:Pagination}
{/block:IndexPage}
</div>
</body>
</html>
Perhaps you could use this code if you want, this is the best one i have found so far:
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
<script type="text/javascript">
$(window).load(function(){
var $wall = $('.posts');
$wall.imagesLoaded(function(){
$wall.masonry({
itemSelector: '.entry',
isAnimated : false
});
});
$wall.infinitescroll({
navSelector : "div#navigation",
nextSelector : "div#navigation a#nextPage",
itemSelector : ".entry",
bufferPx : 2000,
debug : false,
errorCallback: function() {
$('#infscr-loading').fadeOut('normal');
}},
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
});
}); $('.posts').show(500);
});
</script>
<script>
$.fn.changebackgroundColor = function(msg) {
$("#perma").css("#000");
};
</script>
I have no issue with the infinite scroll with it and it's rather simple. You should just check the Selector and var names to put those that are in your theme. else than that, I think the problem could be the scripts you are using. Try to use different ones maybe. I used to have some similar to yours and I realized that they didn't even respond when i debugged my page. It could be a similar issue.
Hi i have used an accordion method but in this it opens the div element from top left to bottom right. i don't want like that i want this one to open from top to bottom.. help me out this please??????? Here is my code
<script type="text/javascript">
jQuery(document).ready(function(){
$('#accordion .head').click(function() {
$(this).next().toggle('slow');
return false;
}).next().hide();
});
</script>
<div id="accordion">
<h3 class="head">First header</h3>
<div style="background:#f00;">
<p>First content</p>
<p>second content</p>
<p>third content</p>
<p>fourth content</p>
<p>fifth content</p>
<p>six content</p>
</div>
</div>
try this jquery code and edit what u want
(function($) {
var allPanels = $('.accordion .dd').hide();
$('.accordion .dt a').click(function() {
allPanels.slideUp();
$(this).parent().next().slideDown();
return false;
});
})(jQuery)
http://jsfiddle.net/X9sz8/
I'm trying to create a Dojo dialog in Zend Framework but I've run into some problems. My view code looks something like this:
<script type="text/javascript" src="<?= $this->baseUrl('/js/dojo-release-1.7.2/dojo/dojo.js')?>"
data-dojo-config="async: true" dojoConfig = "parseOnLoad: true">
</script>
<script>
require(["dijit/registry", "dojo/ready", "dojo/dom", "dijit/Dialog", "dijit/form/Form"],
function(registry, ready, dom, Dialog){
ready(function() {
createDialog = function(titleText, contentText) {
var node = dojo.byId("foobar");
var myDialog = new Dialog({ title:"From Source Node" }, node);
myDialog.show();
};
});
});
</script>
<body class="claro">
<div data-dojo-type="dijit/Dialog" id="foobar" title="Foo!" style="display: none">
<p>I am some content</p>
</div>
</body>
The button code that loads the dialog looks as follows:
<button name="btnDialog" id="dialogbtn" type="button" onclick='createDialog();'>Open</button>
The first time the button is clicked the dialog opens as expected, but once the dialog is closed and the button is clicked again, the dialog doesn't open and I get the following error in the console.
Tried to register widget with id==foobar but that id is already registered.
What am I doing wrong?
Thanks
Figured it out. I think the form wasn't parsing correctly because the dojo-config was incorrect. Changed the javascript code as follows:
<script type="text/javascript" src="<?= $this->baseUrl('/js/dojo-release-1.7.2/dojo/dojo.js')?>"
data-dojo-config="async: true, parseOnLoad:true">
</script>
<script>
require(["dijit/registry", "dijit/Dialog"], function (registry)
{
createDialog = function createDialog()
{
registry.byId("foobar").show();
}
});
</script>
and the div as follows:
<body class="claro">
<div class="dijitHidden">
<div data-dojo-type="dijit.Dialog" data-dojo-props="title:'Foo!'" id="foobar">
<p>I am some content</p>
</div>
</div>
</body>
and now the dialog dijit is saved to the registry and it's working as expected