I'm looking at the jQuery API, and they have this example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeOut demo</title>
<style>
span {
cursor: pointer;
}
span.hilite {
background: yellow;
}
div {
display: inline;
color: red;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<h3>Find the modifiers - <div></div></h3>
<p>
If you <span>really</span> want to go outside
<span>in the cold</span> then make sure to wear
your <span>warm</span> jacket given to you by
your <span>favorite</span> teacher.
</p>
<script>
$( "span" ).click(function() {
$( this ).fadeOut( 1000, function() {
$( "div" ).text( "'" + $( this ).text() + "' has faded!" );
$( this ).remove();
});
});
$( "span" ).hover(function() {
$( this ).addClass( "hilite" );
}, function() {
$( this ).removeClass( "hilite" );
});
</script>
</body>
</html>
This is similar to my code. Is there a way to make the remaining paragraph slide to the left when the phrase is removed, to make that transition smoother?
I think you will have to animate the p tag. It's the parent of what you have clicked on, so something like this should work...
$( this ).remove().parent('p').animate({
'margin-left' : '-500px'
}, 300);
Related
I have an $.each block that iterates over all the select elements on a form, and invokes a $.post for each one.
var deferredObjects = [];
$('#form').find('select').each(
function(i, o) {
var jqxhr = $.post("data.json", {} ));
deferredObjects.push( jqxhr) ;
}
);
I'd like to have an event-handler fire when all the post operations are complete. I'm collecting all the deferred objects returned from the post method into an array. I was hoping to use something like
$.when( ... ).then( ... );
but I can't see how to fit this construct into my scenario?
You can use promise() (it will execute once all collective actions are done) available in jquery. For example, you can see
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>promise demo</title>
<style>
div {
height: 50px;
width: 50px;
float: left;
margin-right: 10px;
display: none;
background-color: #090;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
$( "button" ).on( "click", function() {
$( "p" ).append( "Started..." );
$( "div" ).each(function( i ) {
$( this ).fadeIn().fadeOut( 1000 * ( i + 1 ) );
});
$( "div" ).promise().done(function() {
$( "p" ).append( " Finished! " );
});
});
</script>
</body>
</html>
https://jsfiddle.net/mzo5Lhbk/
Also, read these links if you want to use when()
https://api.jquery.com/jquery.when/
Hope it will help you!!!
You can use the spread syntax like this.
$.when(...deferredObjects)
i'm creating a project to change color, contrast ... of a picture. I use filtrr plugin. I want to use slider to choose value of effect
It works well but it's not fast enough.
You can download plugin here to execute code : https://github.com/alexmic/filtrr/tree/master/filtrr2
Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<style>
#slider {
width: 200px!important;
}
</style>
</head>
<body>
<div id="slider"></div>
<img id="img" src="./o8rvhb.jpg">
<canvas class="main" width="1024" height="512"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="./filtrr2.js"></script>
<script src="./util.js"></script>
<script src="./effects.js"></script>
<script src="./layers.js"></script>
<script src="./events.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
var i = 0;
$( "#slider" ).slider({
max: 100,
min: 0,
orientation: "horizontal",
slide: function(t, e) {
$( "img" ).hide();
Filtrr2.fx( 'color', function( value ) {
value = Filtrr2.Util.clamp(value, -100, 100);
this.process(function(rgba) {
rgba.r += value;
});
});
var canvas = document.createElement( "canvas" );
canvas.setAttribute( "id", "test" + i );
canvas.setAttribute( "width", 1024 );
canvas.setAttribute( "height", 512 );
var canvasCtx = canvas.getContext( "2d" );
canvasCtx.drawImage( $( "img" )[0], 0, 0 );
$( "body" ).append( canvas );
var newfilter = Filtrr2( "#test" + i, function() {
this.contrast( e.value ).color( e.value ).render();
} )
$( ".main" )[0].getContext( "2d" ).drawImage( $( "#test" + i )[0] , 0, 0 )
$( "#test" + i ).remove();
i++;
},
stop: function(t, e) {
}
});
} )
</script>
</body>
</html>
I am programming a website creator where user is allowed to visually create some website structure in an iframe.
The iframe's height must get updated always when the iframe's content is updated. I'm having some difficulties in understanding why height of iframe's content is sometimes read incorrectly in JavaScript after dynamically changing the content. I made a test script which shows the thing:
http://vickcreator.com/test/test.php
with iframe here: http://vickcreator.com/test/test2.php
As you can see by looking in source code in browser (or below) the first button fills the iframe with many boxes and immidiately tries to update iframe's height which does not work - it looks like the height is not updated yet in DOM (or something like that), so I though the second button will do - it uses 1 second of delay (doesn't really matter how many seconds, I tried even 5 sec), but no, here height is read wrong (a little less than should be) which results in vertical scroll bar (tested on Firefox and Chrome) - WHY ? Then pressing "set height" fixes the issue. The same happens (first "clear" to reset) when pressing "ONLY fill", then"set height" - then pressing "set height" second time fixes this.
Two questions:
is there any event saying that updating of iframe's content has completed ?
how to correctly read the outerHeight ? I tried:
$( '#iframe' ).contents().find( 'html' ).outerHeight();
$( '#iframe' ).contents().find( 'body' ).outerHeight();
$( '#iframe' ).contents().find( '#wrapper' ).outerHeight();
$( '#iframe' ).contents().outerHeight();
None of these worked.
Below is source code of both files. I didn't use code snippet in StackOverflow because it does not allow me to use iframes.
I can update the code on my server if you need. Thanks for help.
test.php:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="https://searchcode.com/codesearch/raw/73742722/"></script>
<script type="text/javascript">
function setHeight()
{
var newHeight = $( '#iframe' ).contents().find( 'html' ).outerHeight();
$( '#iframe' ).height( newHeight );
$( '#heightText' ).html( newHeight );
}
function fill()
{
for( i=0; i<1000; ++i )
{
$( '#iframe' ).contents().find( '#wrapper' ).append( '<div class="box"></div>' );
}
}
function go( delay )
{
fill();
if( ! delay )
{
setHeight();
}
else
{
$( document ).everyTime( 1000, function(i)
{
setHeight();
}, 1 );
}
}
function clearContent()
{
$( '#iframe' ).contents().find( '#wrapper' ).empty();
$( '#iframe' ).height( '500px' );
$( '#heightText' ).html( 500 );
}
</script>
<style type="text/css">
.box { border:1px dashed black; height:50px; width:50px; margin:5px; display:inline-block; }
.coloured { background: darkgreen; }
</style>
</head>
<body>
<button onclick="go( false );">Fill and set height with NO delay</button>
<button onclick="go( true );">Fill and set height WITH delay (1s)</button>
<button onclick="setHeight();">Set height</button>
<button onclick="fill();">ONLY fill</button>
<button onclick="clearContent();">Clear</button>
Height:<span id="heightText"></span>
<iframe id="iframe" style="width:100%; height:500px;" src="test2.php"></iframe>
</body>
</html>
test2.php (iframe):
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<style type="text/css">
.box { border:1px dashed black; height:50px; width:50px; margin:5px; display:inline-block; }
.coloured { background: darkgreen; }
</style>
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>
I was working on JQuery UI Date Picker.
before it was working great but now the calendar won't show up.
any ideas?
here's my code.
http://pastebin.com/L4j2TmyY
my code is too long so i placed it in pastebin.
I follow this exactly but calendar is not showing
http://jqueryui.com/datepicker/
I think you should download all the JavaScript files into your project folder and call the JavaScript files.
Example :
Calling JavaScript from external URL (Not working)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>undelegate demo</title>
<style>
button {
margin: 5px;
}
button#theone {
color: red;
background: yellow;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>
<script>
function aClick() {
$( "div" ).show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
$( "body" )
.delegate( "#theone", "click", aClick )
.find( "#theone" ).text( "Can Click!" );
});
$( "#unbind" ).click(function() {
$( "body" )
.undelegate( "#theone", "click", aClick )
.find( "#theone" ).text( "Does nothing..." );
});
</script>
</body>
</html>
Calling from project Folder(Working fine)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>undelegate demo</title>
<style>
button {
margin: 5px;
}
button#theone {
color: red;
background: yellow;
}
</style>
<script src="jQuery.js"></script>
</head>
<body>
<button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>
<script>
function aClick() {
$( "div" ).show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
$( "body" )
.delegate( "#theone", "click", aClick )
.find( "#theone" ).text( "Can Click!" );
});
$( "#unbind" ).click(function() {
$( "body" )
.undelegate( "#theone", "click", aClick )
.find( "#theone" ).text( "Does nothing..." );
});
</script>
</body>
</html>
As i saw your pastebin you are loading two jQuery libraries, which is not recommended, although you can use it with jQuery.noConflict(). So the quick fix is this:
Remove this library:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
#Kim Carlo
I continue with #Rohit Bandooni's answer.
As his answer, it should work correctly.
A pastebin cloned from your paste: http://pastebin.com/2yNiXy44
I did some changes:
- comment yours 2 "die"
- change the method name (search for text "CHANGE_BY_ME" in pastebin)
I run on my EasyPHP, it works well: http://imgur.com/kfmLkLY,lHsEUyv (2 images for 2 controls)
I found only 2 date controls on your page.
I am trying to play with jQuery UI, dialog in particular. First I tried the sample code and it works fine:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dialog demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<body>
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
</body>
</html>
Now, I am trying to create button and dialog dynamically in the script, so I rewrote the code as:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dialog demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
// Create button
var open_button = document.createElement("button");
open_button.appendChild(document.createTextNode("Open the dialog"));
open_button.setAttribute("id", "opener");
document.body.appendChild(open_button);
// Creating dialog
var my_dialog = document.createElement("div");
my_dialog.setAttribute("title", "Dialog");
my_dialog.setAttribute("id", "dialog");
document.body.appendChild(my_dialog);
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
</head>
<body>
</body>
</html>
And now it fails with the error "body is null". Why is that?
But even if I create dummmy DOM inside the body:
<div id="dummy_div"></div>
... and then, inside the script, append both the button and the dialog to it instead of body it still does not work.
$("#dummy_div").append(open_button);
$("#dummy_div").append(my_dialog);
I am probably missing some HTML basics, I would appreciate any explanation.
Thanks.
You are attempting to create the element before your HTML is rendered.
Use this:
$(function() {
$("#dummy_div").append(open_button);
$("#dummy_div").append(my_dialog);
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
Good luck
Note
$(function() { ... }); is the same thing as $(document).ready()
Read about document.ready() here
Read that for more information about DOM ready.
JavaScript is executed immediately when it is encountered in the page. So in your second case, you are trying to write to the <body> element before the browser has created it. Hence why it is null.
Wrap the script in a window.load() or a $(document).ready() function and you should have everything working.
This will have the JavaScript wait until the entire DOM has been rendered before trying to do your stuff.
This is your code on jsfiddle. It's work
http://jsfiddle.net/abdennour/795Yp/
If you want to embedded it in web page you should call it in the following function :
$(function(){
})
so :
$(function(){
// Create button
var open_button = document.createElement("button");
open_button.appendChild(document.createTextNode("Open the dialog"));
open_button.setAttribute("id", "opener");
document.body.appendChild(open_button);
// Creating dialog
var my_dialog = document.createElement("div");
my_dialog.setAttribute("title", "Dialog");
my_dialog.setAttribute("id", "dialog");
document.body.appendChild(my_dialog);
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
})