Yeah, basically I have this:
Effect.ScrollTo("bottom", { duration: 5.0 });
So what I want is to stop this effect while it's scrolling whenever I want to.
Any help?
var scrollEffect = Effect.ScrollTo("bottom", { duration: 5.0 });
...
scrollEffect.cancel();
This code below works perfectly for me:
<html>
<head>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<style type="text/css" media="screen">
body { font-size: 30px; }
#destination { margin-top: 1400px; }
#start { position: fixed; top: 10px; left: 20px;}
#stop { position: fixed; top: 50px; left: 20px;}
</style>
<script type="text/javascript" charset="utf-8">
function startEffect() {
scrollEffect = Effect.ScrollTo("destination", { duration: 8.0 }); return false;
}
function stopEffect() {
scrollEffect.cancel(); return false;
}
</script>
</head>
<body>
<a id="start" href="#" onclick="return startEffect();">Start Effect</a>
<a id="stop" href="#" onclick="return stopEffect();">Stop Effect</a>
<p id="destination">Scroll Destination</p>
</body>
</html>
What I currently have working currently is having a div as follows:
<div id="pausepos" style="position:absolute;"></div>
Then having the JavaScript cancel the scrolling and move it back to where the original position was:
fallingPosTempArr = $("thetop").viewportOffset();
fallingPosTemp = -1*fallingPosTempArr[1];
$("pausepos").setStyle({
"top" : fallingPosTemp + 'px'
});
scrollEffect.cancel();
setTimeout(function () { Effect.ScrollTo("pausepos", { duration: 0.0 }); }, 10);
It works, but on slower browsers you can see how the page jumps back to the top and then back again.
Related
Here is a resizable UI plugin JS that is working fine with mouse click & drag.
It's changing it's font-size with mouse. Meaning, when I change the width or height of my div with id="chartdiv" from mouse corner then it is changing the font-size correctly. However, when I change the width or height of my div with id="chartdiv" from button onClick, then it's not working.
I want to use this font-size resizable feature from Button.
For this query I already visited to this answer: How to trigger jquery Resizable resize programmatically? but there is not font-size function
What mistake am I making here?
Below is my code:
<!DOCTYPE html>
<html>
<head>
<style>
.resize{
font-size: 2.8vh;
white-space: nowrap;
color: black;
background: yellow;
cursor: move;
width: 300px;
height: 130px
}
.resize:focus {
width: 500px; }
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<button type="button" onClick = "document.getElementById('chartdiv').style.width = '600px';">Click Me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<div class="resize" id="chartdiv">Some name that is very long</div>
<script type="text/javascript">
$('.resize').resizable( {
minWidth: 210,
minHeight: 120,
resize: function( event, ui ) {
// handle fontsize here
var size = ui.size;
// something like this change the values according to your requirements
$( this ).css( 'font-size', ( size.width * size.height ) / 2800 + 'px' );
}
} );
</script>
</body>
</html>
Thanks in advance.
Following creates a simple jQuery plugin function fontResize() that can be used in both instances
$.fn.fontResize = function() {
return this.each(function() {
const $el = $(this);
$el.css('font-size', ($el.width() * $el.height()) / 2800 + 'px');
});
}
$('button.do-resize').click(function(){
$('#chartdiv').width(600).fontResize()// use plugin function
})
$('.resize').resizable({
minWidth: 210,
minHeight: 120,
resize: function(event, ui) {
$(this).fontResize();// use plugin function
}
});
<!DOCTYPE html>
<html>
<head>
<style>
.resize {
font-size: 2.8vh;
white-space: nowrap;
color: black;
background: yellow;
cursor: move;
width: 300px;
height: 130px
}
.resize:focus {
width: 500px;
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<button class="do-resize" type="button" >Click Me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<div class="resize" id="chartdiv">Some name that is very long</div>
</body>
</html>
<button type="button" onClick = "ResizeWithButton();">Click Me!</button>
function ResizeWithButton(){
var x = document.getElementById('chartdiv');
x.style.width = '600px';
var rect = x.getBoundingClientRect();
x.style.fontSize = `${(rect.width * rect.height)/2800}px`;
}
I try my code but it is not working please check the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<button>Click me</button>
<p style="width: 90px; background-color: #40FF08">This is a test peragraph</p>
</body>
</html>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").animate({
left: '400px'
});
});
});
</script>
That is because the position property of the p element is static and left won't work on static elements - change it to say relative and it works - see demo below:
$(document).ready(function() {
$("button").click(function() {
$("p").animate({
left: '400px'
});
});
});
p {
width: 90px;
background-color: #40FF08;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Click me</button>
<p>This is a test peragraph</p>
Add position: relative and your animation will work just fine.
p {
width: 90px;
background-color: #40FF08;
position: relative; <-- like this
}
$(document).ready(function() {
$("button").click(function() {
$("p").animate({
left: '400px'
});
});
});
p{
width: 90px;
background-color: #40FF08;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>
<p>This is a test peragraph</p>
i use this plugin material-refresh to refresh page it's working fine but when the page is scrolled at the top "TOP = 0" click wont fire and when i scroll it down by 1px it's work normally here an image enplane the problem better
Here the test code
var opts_stream = {
nav: '.page_header',
scrollEl: '.page_content',
onBegin: function() {
console.log("start");
},
onEnd: function() {
console.log("Done");
}
};
mRefresh(opts_stream);
.page_header {
width: 100%;
height: 100px;
background-color: red;
text-align: center;
}
.page_content {
width: 100%;
height: 1200px;
background-color: rgb(190, 190, 190);
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>sdasd</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://github.com/lightningtgc/material-refresh/blob/master/src/css/material-refresh.styl">
<script src="https://raw.githubusercontent.com/lightningtgc/material-refresh/master/src/js/main.js"></script>
</head>
<body>
<div class="page_header">
Header
</div>
<div class="page_content">
<button type="button" name="button" onclick="alert('test');">Test Button</button>
</div>
</body>
</html>
NOTE : You need to run browser in mobile mood from chrome console to get this plugin to run
in line 304 in touchEnd function in material-refresh.js remove e.preventDefault();
:)
I want to change the opacity of the main image when the mouse hover on the right image simple as that:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#main {
opacity: 1;
}
#right {
position: absolute;
margin-left: -310px;
margin-top: 320px;
visibility: hidden;
}
#center {
position: absolute;
margin-left: -655px;
margin-top: 20px;
visibility: hidden;
}
</style>
<script>
$(document).ready(function () {
$("#right").hover(function () {
$("main").css("opacity","0.4");
$("right").css("visibility","visible");
}, function () {
$("main").css("opacity","1");
$("right").css("visibility","hidden");
});
});
</script>
</head>
<body>
<img id="main" src="img/1477253.jpg">
<img id="right" src="img/Untitled-1.png">
<img id="center" src="img/Untitled-2.png">
</body>
</html>
but when the mouse get on the hidden right image nothing happen. what am missing here?
You cannot hover over a hidden element.You are binding event to #right which is visibility:hidden
change css properties of right to:
#right {
position: absolute;
margin-left: -310px;
margin-top: 320px;
}
now the element can be seen in DOM and hover event is triggered
JSBIN
you are missing the # id in the jQuery selector
$(document).ready(function () {
$("#right").hover(function () {
$("#main").css("opacity","0.4");
$("#right").css("visibility","visible");
}, function () {
$("#main").css("opacity","1");
$("#right").css("visibility","hidden");
});
});
I have solved it , instead of using visibility: hidden; I used opacity: 0; and this way it worked fine , thanks for the comments guys :)
try this
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#main {
opacity: 1;
}
</style>
<script>
$(document).ready(function () {
$("#right").hover(function () {
$("#main").css("opacity","0.4");
$("#right").css("visibility","visible");
}, function () {
$("#main").css("opacity","1");
$("#right").css("visibility","hidden");
});
});
</script>
</head>
<body>
<img id="main" src="img/1477253.jpg" />
<img id="right" src="img/1477253.jpg" />
<img id="center" src="img/Untitled-2.png" />
</body>
</html>
Remove css class i.e #right and #center and see the result. Due to this class you are not able to see the image.
You are missing # and hidden element means it is gone. You cannot get mouse hover on it. Use opacity 0 instead. Another point, your image position may not show image on the screen, except it is very large, so I comment it.
Here is the modified version.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#main {
opacity: 1.0;
}
#right {
/*position: absolute;*/
/*margin-left: -310px;*/
/*margin-top: 320px;*/
opacity: 0.0;
}
#center {
/*position: absolute;*/
/*margin-left: -655px;*/
/*margin-top: 20px;*/
opacity: 0.0;
}
</style>
<script>
$(document).ready(function () {
$("#right").hover(function () {
$("#main").css("opacity","0.4");
$("#right").css("opacity","1.0");
}, function () {
$("#main").css("opacity","1");
$("#right").css("opacity","0.0");
});
});
</script>
</head>
<body>
<img id="main" src="img/1477253.jpg">
<img id="right" src="img/Untitled-1.png">
<img id="center" src="img/Untitled-2.png">
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#main {
opacity: 1;
}
#right {
position: absolute;
margin-left: -310px;
margin-top: 320px;
visibility: hidden;
}
#center {
position: absolute;
margin-left: -655px;
margin-top: 20px;
visibility: hidden;
}
</style>
<script>
$(document).ready(function () {
$("#right").hover(function () {
$("#main").css("opacity","0.4");
$("#right").css("visibility","visible");
}, function () {
$("#main").css("opacity","1");
$("#right").css("visibility","hidden");
});
});
</script>
</head>
<body>
<img id="main" src="img/1477253.jpg">
<img id="right" src="img/Untitled-1.png">
<img id="center" src="img/Untitled-2.png">
</body>
</html>
Use this.
$(document).ready(function () {
$("#right").mouseover(function () {
$("#main").css("opacity", "0.4");
$("#right").css("opacity", "1");
}).mouseleave(function () {
$("#main").css("opacity", "1");
$("#right").css("opacity", "0");
});
});
DEMO
Referring to jsFiddle's [code][1] by CSWING,
why does this indicate "TypeError: this.domNode is null (26 out of range 15) in dojo.js".
Here is my code copied from CSWING, for learning and testing,
<!DOCTYPE html>
<html>
<head>
<style>
html, body /*standard layout for every dojo webpage*/
{
width: 100%;
height: 100%;
padding: 0px;
margin: 5px;
overflow: hidden;/*no scrollbar used*/
}
#standby {
position: absolute;
top: 50%;
left: 50%;
width:32px;
height:32px;
margin-top: -16px;
margin-left: -16px;
/*
width: 300px;
height: 300px;
background-color: #e7e7e7;
*/
}
</style>
<link rel="stylesheet" href="../dojo1_8/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="../dojo1_8/dojo/dojo.js"></script>
</head>
<body class="claro">
<div id="standby">
<div id="btn" data-dojo-type="dijit.form.Button" data-dojo-props="label:
Go'"></div>
</div>
<script>
require(["dojox/widget/Standby","dijit/form/Button",
"dojo/store/Memory",'dijit/form/ComboBox',
"dojo/on", "dojo/domReady!"],
function(Standby, Button, Memory, on, ComboBox)
{
var standby = new Standby
({
id: "standbyObj",
target: "btn",
color: "transparent",
zindex: "auto",
duration: "1000"
});
dojo.body().appendChild(standby.domNode);
standby.startup();
on(dojo.byId('btn'), 'click', function()
{
standby.show();
//simulate a request. hide the timeout in 5 seconds
setTimeout(function()
{
standby.hide();
}, 5000);
});
});
</script>
</body>
</html>
Please advise.
Thanks
clement
[1]: http://jsfiddle.net/cswing/253Te/
Looking at my original fiddle, I believe that
dojo.byId('btn')
should be
dijit.byId('btn')
If that doesn't solve your problem, then I would set firebug to Break on Errors. When the error occurs, look at the stack trace to find more information about where the error is coming from and what might be causing it.