Develop Reference

How to leave the scroll always down in JavaScript?

I have a div where I would like to always scroll down.
scrollDown(){
var chatt = this.conversa;
this.conversa.scrollTop = chatt.scrollHeight;
}
verificKeyPress(e){
if (e.key == "Enter") {
this.scrollDown();
...
}
}
<div id="scroll" ref={(conversa) => this.conversa = conversa} style={{display: "block",overflowY: "auto", overflowX: "hidden", position: "absolute", ...}}>
...
</div>
In this link is a giphy showing the error that is giving. Attention in the sequence entered and where it appears: https://media.giphy.com/media/LUeVZl33p6WlQrVmq9/giphy.gif.
Thank you!
Note: In the function verifyKeyPress has more thing to work sending the message, but I did not put it because it is extensive
I got it, the problem is that this function (this.scrollDown) should be in the callback of another function that I did not show here, I apologize, it would be difficult for someone to help me, I have little experience, but anyway thank you.

I'm not clear what you are attempting to do. Are you wanting the program to "page down" one screen full each time you hit enter? Or are you wanting to go to the bottom of the entire page w/enter?
In the first case, you'll have to use "view height" * "pageNum" for the scrollTop to allow for a view full to move each time return is hit. This will be tricky as it will be hard to get it to center just right on the top item.
In the second case, I believe scroll height will need to be set to "page height" - "view height". These are "general" values, don't recall the precise JS/CSS var names for these offhand but should be easy to look up
If you'd like to clarify what the desired behavior is I'm happy to look a little deeper

conditional changing the source and dimentions of video in javascript

I have this code below:
<script type="text/javascript">
jwplayer("container").setup({
flashplayer: "http://test.captive-portal.com/jwplayer/player.swf",
file: "http://content.captive-portal.com/files/video/cirque-du-soleil/mob.mp4",
image: "http://content.captive-portal.com/files/video/cirque-du-soleil/mob.jpg",
height: 285,
width: 480,
});
</script>
The whole page is here (in case you need it): video page.
What I'm trying to do is to change the 4 lines: file: (...), image (...), height(...) and width (...) depending of the resolution of the window. I have managed to do this with css, so styles are applied correctly, but this is javascript and I don't really know how to modify it. I was trying to place 2 similar scripts on one page in divs and hide the small one in case of big screen or hide a big one in case of small screen but it didn't work. Video didn't play. I think this may be caused by some scripts in the flash player file.
Is there any way to set conditions for those 4 lines depending of the screen resolution?
Thank you very much for your help in advance.

Those parameters are simply an object.
So you should be able to create that object out of the jwplayer call, and simply pass it in. e.g
var params = {};
params.flashplayer = "http://test.captive-portal.com/jwplayer/player.swf";
if(!mobile){ //you need to handle checking for mobile devices
params.file = "http://content.captive-portal.com/files/video/cirque-du-soleil/desktop.mp4";
params.image = "http://content.captive-portal.com/files/video/cirque-du-soleil/desktop.jpg";
params.height = 570;
params.width = 960;
}else{
//set params in same way but with mobile settings
}
jwplayer("container").setup(params);
If you later want to just resize the player. JwPlayer has a 'resize' function that you can call: jwplayer.resize(width,height)

Code from scratch an image cropper AND resizer (at same time) in jQuery/javascript?

We are coding a rather simple Javascript (jQuery) image cropper & resizer. Basically, for now, only features needed are indeed crop and resize.
I have been checking a few jQuery plugins like JCrop etc. and it seems there's no plugins doing both things at same time. Lots of croppers OR resizer, but not the two features on a same "natural" image view at same time. By natural I mean that examples like this (bottom right) are not very nice visually for users :
http://jsfiddle.net/opherv/74Jep/33/
Although I guess this would be a possible way to go to have the two features at same time. Though you can see this example only zooms too currently and it is qualified as using "ugly hacks" by the author himself to do so :
function changeZoom(percent){
var minWidth=viewport.width();
var newWidth= (orgWidth-minWidth)*percent/100+minWidth;
var newHeight= newWidth/orgRatio;
var oldSize=[img.width(),img.height()];
img.css({ width: newWidth+"px", height: newHeight+"px" });
adjustDimensions();
//ugly hack :(
if (img.offset().left+img.width()>dragcontainer.offset().left+dragcontainer.width()){
img.css({ left: dragcontainer.width()-img.width() +"px" });
}
if (img.offset().top+img.height()>dragcontainer.offset().top+dragcontainer.height()){
img.css({ top: dragcontainer.height()-img.height() +"px" });
}
}
We are rather looking for the possibilty to use a cropper frame/zone (as we see the most often on the web) + a zoom/de-zoom option on the image (handles on the border of the image for example)
Since we only need those two features we thought we would code this from scratch or almost as we don't want to add other javascript files/plugins which will be overkill anyway being packed with other features we will not need (at least for now).
The question is: is there a specific difficulty at trying to code the display of an image re-sizable by straightforward handles & croppable by a frame/zone selection (which would also be re-sizable on its own and draggable around so a user can fine tune which part of the image he wants)?
Are we definitely better separating the two features ?
Thanks a lot for your help.

Tried this plugin??
http://code.google.com/p/resize-crop/
It does both crop and resize

Show advertisement while game loads

I looked around internet and was always looking like from previous 6 months for a script that could load flash content/game while showing an actual loading screen But I always received a few answers:
It is not possible to show an actual loading with Javascript.
You can do it only by adding action script to the flash file maybe they are talking about FLA
Why Don't you show a fake loading screen that appears and show some
seconds and then disappears (the most annoying this of such screen
is that they first make user load 15 seconds then the flash starts
loading, if it starts loading those 15 seconds still it is worth
something it is good BUT making them wait double is really bad)
But at last I found something that I was looking forever. A Jquery based script that shows actual loading (shows ad too) and uses swf Object to talk to flash content too. It is really awesome as it doesn't require you to do changes to the FLA, it is just pure outer environment dealing. So now the question arises what's the issue then. Well the issue is that this script was made for pixels, it works if you are using width and height for flash in pixels, while I can't use pixels as I am using %ages (this way user have ability to go full screen optionally by pressing f11).
So as you can see I want that script to work with %ages that is my problem, but as I mentioned earlier I didn't came here right away I have been asking for help (Actually Begging) in over 14 forums from previous few months and of course some good people still exists some people helped me to reach a certain point (but it didn't solve the problem) So now I will provide some Markup:
Here is link to the script that I am talking about http://www.balloontowerdefense.net/jquery-preloader/jquery-preloader.html (It is the link to the creator of this script)
Here is a link to working example (flash based on Pixels) http://www.balloontowerdefense.net/jquery-preloader/example.html
Some one helped me here but it didn't work 1 month ago. The person told me that I should change the plugin Named as Preroll the changes preferred were these
Modify the plugin to use user-supplied units instead of pixels. To do this, you will need to modify two functions in the plugin, applygameiframe and showgame.
applygameiframe should be changed to:
var applygameiframe = function() {
var gc = '#'+settings.gameframe;
var iframe = $('<iframe />').attr({
"id": settings.gameid,
"src": settings.swf,
"frameborder": 0,
"scrolling": "no",
"marginwidth": 0,
"marginheight": 0
}).css({
"height":'settings.height
"width": settings.width
});
$(gc).append(iframe);
return true;
};
showgame should be changed to:
var showgame = function() {
var ac = '#' + settings.adframe;
var game = '#' + settings.gameframe;
$(ac).hide();
$(game).css({
"width": settings.width,
"height": settings.height
});
};
Once those changes are made, the inline CSS should be set to whatever you supply as parameters (i.e., 100%, 50em, etc.).
I did the changes told to be done as described above to the Preroll plugin and after that this is what I get http://files.cryoffalcon.com/MyFootPrint/fullscreen.html
Now if you let the game load (as loading screen appears) all is well done except that in the end, the game doesn't appear, it loads but when it should skip and make the game appear at that time something goes wrong. (For reference you can see this link http://www.balloontowerdefense.net/jquery-preloader/example.html here when the loading finishes then game appears)
Can Someone Fix this problem?
Note: Sorry for not providing JsFiddle but as I live in Afghanistan with 5KBps speed it is not possible for me.
I didn't provided the HTML, CSS and JS that makes up the whole demo page as I thought it will make the question very long but still if you think I should provide Please let me know in comments.
I tried my best to make the question more relevant with Relevant Markups BUT still If I am missing something I would try my best by editing it and providing it you again.
Being an accountant, I tried my best to use programmers terms, coding is my passion but I am still in learning stage of JS
UPDATE: After solving the problem here you can see now everything is fine. http://files.cryoffalcon.com/MyFootPrint/newfullscreen.html
Credit: Goes to the one who answered this question.

This seems to be just a pure css problem. You're trying to set the width to 100% while the parent of div.gamewrapper has no width or height. That's why the size is 0 and it will not show up.
The trick you need to apply is add the following to your style:
html, body, .gamecontent {
height: 100%;
width: 100%;
}
Update:
Also, remove float: left; from .gamecontent .game, and add a width and height of 1px such that it becomes:
.gamecontent .game {
margin:0px auto 0px auto;
padding:0px;
overflow:hidden;
width : 1px;
height : 1px;
}

Well, after an hour and a half of playing Bloons on your link (my untouched work load can verify that), I feel it's safe to say that the full screen features work exactly as I'd expect them to. I'm using Chrome 18.0.x.
My experience was: Click link, game loads. The loader took about 2 seconds longer to finish then it took for the "Click Here to Show the Game" button appeared. After, an ad appeared for 10seconds and then I clicked "Play" and it went right to the game. Full screen worked correctly to my knowledge, although when I left full screen the game didn't resize back down - the bottom section was cut off.
I know that doesn't answer your question, but perhaps the issue is only in certain browsers?

i found that in FF the problem seems to be the height and width of 100%. I changed the script slightly to:
$(game).css({
"width": window.innerWidth,
"height": window.innerHeight
});
and now the game shows correctly in FF.

How to print flot graph

Can any body help me to find out, how to print dynamic graph as example generated by flot.
I tried this one but it's printing whole page, but I want only graph portion.
function printGraph(){
$('<img src="../images/button_refresh.png" alt="Print Graph" style="">').appendTo(controlholder).click(function (e) {
//Canvas2Image.saveAsPNG(document.getElementById('placeholder'));
//canvas.toDataURL("image/png");
window.print('placeholder');
});
}

This article describes how to copy the canvas to a normal img which can then easily be printed or saved as an image.
The important part:
img.src = canvas.toDataURL();
See the great answer below from Ignacio Correia for more details.

Launch a new window with only the graph or with alternate css similar to what google maps does when you print.

Attention this post have been edited, please see all possible solutions
From what I have searched and found you have only 2 choices or try to print the CANVAS, or EXPORT as an image or my idea is to separate the image from the content and try to print only the graph. Here is a FAQ by Flot, how can you export the image: Question Number 3
Q: Can I export the graph?
A: You can grab the image rendered by the canvas element used by Flot
as a PNG or JPEG (remember to set a background). Note that it won't
include anything not drawn in the canvas (such as the legend). And it
doesn't work with excanvas which uses VML, but you could try
Flashcanvas.
SOLUTION 1 - Export image:
Export image to computer and then print it
SOLUTION 2 - FLOT to CANVAS:
Saving canvas as images - By Mozilla
Save as Image Flot Plugin
Related question - Problem printing in IE8
SOLUTION 3 - My own, Modal printing
This is not the best solution by far but it works, here is a demo:
JSFIDDLE Normal Demo
JSFIDDLE Fullscreen Demo
Steps
Load Fancybox
Open using INLINE FRAME the graph
PRINT on callback after show
Reload the page after print to redesign the page
Here is the necessary code:
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
afterShow : function() {
alert('You are about to print the graph!');
window.print();
},
afterClose : function() {
alert('We need to refresh the page!');
window.location.reload(false);
}
});
});
Extra
This related question is about exporting Flot to PDF, don't know if you may be interested: Export Flot to PDF
EDIT - WORKING SOLUTION
Here is a working demo of how to export the image: FLOT to IMAGE

You could hide the parts of the page you don't wish to print by using a separate stylesheet that has media="print". This would also allow you to tweak the final printed output of the graph itself, for example making it larger.

Found a solution by using html2canvas. First assign the container div to have id like "theChart".
<div class="box" id="theChart">
<div id="placeholder"></div>
</div>
Now we can create an image:
html2canvas($('#theChart')).then(function(canvas) {
image = canvas.toDataURL("image/png");
document.location.href=image;
});
This will also solve the problem when canvas.toDataURL() does not render axis labels.