Resize a looping cloud image while clicking on it - javascript

Here is the code for the looping cloud, the animation loops from right to left and I would like to make the cloud resize-able when clicked on but I do not know how to do it...
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="clouds">
<img border="0" alt="animated clouds" src="clouds.png">
<script>
$(document).ready(function() {
function loop() {
$('#clouds').css({right:0});
$('#clouds').animate ({right: '+=1400'}, 5000, 'linear', function() {
loop();
});
}
loop();
});
</script>
</div>
</body>
</html>
Here is what I tried for resizing the cloud:
$("#clouds").click(function() {
$("size").animate({"height" : "350"}, 500);
});
And the CSS:
#clouds {
position:absolute;
z-index:500;
right:0px;
top:10px;
}

In this code we animate the divisions in such a way that it animate from left to right and then right to left
$(document).ready(function() {
function loop() {
$('.bouncer').animate({'left': '500'}, {
duration: 1000,
complete: function() {
$('.bouncer').animate({left: 0}, {
duration: 1000,
complete: loop});
}});
$('<div/>').text('exiting loop').appendTo($('.results'));
}
loop();
$("#clouds").click(function() {
console.log("click");
$("#clouds").animate({"height" : "350"}, 500);
});
});
.bouncer {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
}
.results {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>
<div class="bouncer">
<img id="clouds" border="0" alt="animated clouds" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsi7hhTHPPcliUGlq2tVlaPu5cmw5QHJOVyQyugHTZOnqLECHLGL9S-qU">
</div>
</html>

Related

How can I rotate only single target element jQuery?

I'm try to rotate an element but when choosing another element it's all rotate at the same time.
So I need to know how to rotate an element and it would be nice if you guys have a similar system. Because I want to learn more about this kind of system. Which is very necessary and important to me to study and work.
$(document).ready(function() {
var container = document.querySelector(".container");
var rotate = document.createElement("div");
rotate.className = "rotate";
//create Element
$("#add").click(function() {
container.appendChild(addElement());
addEvent();
});
const addElement = () => {
var element = document.createElement("div");
element.className = "resizable";
return element;
}
//add event
function addEvent() {
$(".resizable").click(function(e) {
if (e.currentTarget === this) {
$(this).append(rotate);
$(this).resizable({
handles: 'ne, se, sw, nw'
});
$(this).draggable().rotatable({
handle: $('.rotate')
});
}
});
}
});
.resizable {
width: 100px;
height: 100px;
border: 1px solid #000;
position: relative;
user-select: none;
z-index: 0;
}
.rotate {
width: 10px;
height: 10px;
border: 1px solid #000;
border-radius: 50%;
position: absolute;
top: -30px;
left: calc(50% - 5px);
cursor: move;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/jquery.ui.rotatable.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<button class="add" id="add">add</button> //for add element
<button class="save" id="save">save</button> //for save size and position
<div class="container"></div>
</body>
</html>
Thanks everyone in advance for helping me.

How to swap the path of a lottie / bodymovin with js

i am trying to swap the path of lottie / bodymovin on button click,
it works if i dont populate the animPath parameter first, so it seems like the click function cannot overwrite the parameter if there is already a path.
its like it loads in the data at the start and then thats it, i noticed the same thing with updating the speed, i had to call the setSpeed parameter after changing the speed to get it to update.
ive hunted the internet and can;t seem to find a parameter to setPath or something similar
does anyone know of a way to swap the path on click?
here is my code
var anim
var animationSpeed = 2;
var button = document.getElementById("button");
function runAnimation(animPath) {
console.log("lottie is loaded");
var animData = {
container: document.getElementById("test"),
animType: 'svg',
loop: true,
prerender: true,
autoplay: true,
path: animPath
};
anim = bodymovin.loadAnimation(animData);
anim.setSpeed(animationSpeed);
}
runAnimation("https://assets5.lottiefiles.com/private_files/lf30_lef8tmad.json");
$( "button" ).click(function() {
animationSpeed = 1;
anim.setSpeed(animationSpeed);
runAnimation("https://assets5.lottiefiles.com/private_files/lf30_vuxs5lpt.json");
console.log("path 2 loaded");
});
body {
background-color: #FDC800;
overflow: hidden;
text-align: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#animationWindow {
width: 100%;
height: 100%;
}
#button{
width: 100px;
height:40px;
z-index: 10;
position: absolute;
top:200px;
left:200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lottie swap</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.4/lottie.min.js" integrity="sha512-ilxj730331yM7NbrJAICVJcRmPFErDqQhXJcn+PLbkXdE031JJbcK87Wt4VbAK+YY6/67L+N8p7KdzGoaRjsTg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head><script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-player/1.5.7/lottie-player.js" integrity="sha512-wUgyNk7aI5qo1G294znyaFsJi8JbXTyTn7QEViCh+f021/yo6aKHPw3GX19txyhfiLQIB/duQcSKADt1GqE+KA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<body>
<div id="test">
</div>
<button id="button" >Click me</button>
</body>
</html>
<!-- Link to the script-->
<script type="module" src="js/script.js"></script>

With mouse click zoom chart as popup fullscreen (highcharts)?

I have dynamically create charts on div class col-sm 4 which append on #container div, and now I am trying to zoom highchart as fullscreen when I click on it. Like is it on this fiddle below text. I done something similar but have no idea why is not working,Can someone help me pls ?
In my example when i click on chart everything disappears
I would like to have zoom method like is it from this example http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/events-container/
My example: https://codepen.io/anon/pen/rZjJbq
chart.blade.php
#extends('index.app')
#section('main')
<style type="text/css">
.col-sm-4 {
margin-bottom: 20px;
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}
.modal{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
}
.modal .col-sm-4 {
height: 90%;
width: 90%;
max-width: none;
}
</style>
<h2 class="text-center" >{{$user->first_name}} Charts </h2>
<div id="main2">
<div id="col-sm-4" id="col-sm-4"></div>
</div>
<script type="text/javascript">
$.getJSON( "http://localhost:8000/api/devices", function( res) {
var result = [];
var namesDev = new Array();
console.log(res);
$.each(res, function(c) {
var deviceNames = res[c].clientAllias;
var clientId = res[c].clientId;
clientNames.push(namesDev);
$.each(res[c].clientData, function(g) {
$.each(data[c].clientData[g], function(key, val) {
clientId2 = data[c].clientData[g].clientId;
var cpu = data[c].clientData[g].cpuUsage;
var time_usages = data[c].clientData[g].timestamp;
final= [];
final.push(time_usages, cpu, clientId2);
result.push(final);
});
});
});
result.sort();
console.log('result', result);console.log('result', result);
var mappedClientsAllias = _.map(_.uniqBy(data, "clientAllias"), "clientAllias");
var mappedClients = _.map(_.uniqBy(data, "clientId"), "clientId");
var clients = [];
_.forEach(mappedClients, function(clientId, clientAllias) {
var tempClient = {
Allias:mappedClientsAllias[clientAllias],
name: clientId,
data: []
};
_.forEach(data, function(tempData) {
if (clientId === tempData.clientId) {
_.forEach(tempData.clientData, function(clientData) {
tempClient.data.push(
[clientData.timestamp, clientData.cpuUsage, clientId]
);
})
}
});
clients.push(tempClient);
});
console.log("clients", clients);
var a =_.forEach(clients, function(client) {
$('<div class="col-sm-4">').css('position','relative')
.appendTo('#container')
.highcharts('StockChart',{
marker: {
states: {
enabled: true
}
},
time: {
timezoneOffset: -2 * 60
},
rangeSelector: {
y: 15,
buttons: [
{
count: 1,
type: "minute",
text: "Sec"
},
],
title: "sat",
inputEnabled: true,
_selected: 1
},
title: {
text: client.Allias
},
xAxis: {
title: {
enabled: true,
text: "Processor unit USAGE"
},
type: "datetime",
dateTimeLabelFormats: {
second: "%H:%M:%S",
minute: "%H:%M",
hour: "%H:%M",
day: "%e. %b"
}
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
series: [
{
name: "Process unit USAGE",
data: client.data.sort()
}
],
chart: {
renderTo: "main"
},
events: {
}
});
})
});
$('#main').bind('mousedown', function () {
$(this).toggleClass('modal');
$('#main', this).highcharts().reflow();
});
</script>
#endsection
app.php.blade.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Master thesis application</title>
<!-- Jquery -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/docs/3.3/examples/jumbotron-narrow/">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<!-- Import css file-->
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="https://cdn.jsdelivr.net/npm/lodash#4.17.10/lodash.min.js"></script>
<!-- Highcharts for normal chart
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
-->
<!-- Highcharts for normal tockSchart -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
</head>
<script type="text/javascript">
</script>
<body>
#include('file.hed')
#include('file.bar')
<div class="container ">
#include('file._info')
#yield('main')
</div> <!-- /container -->
#include('file.down')
</body>
</html>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
Add this to the CSS :
.col-sm-4.modal {
position: fixed !important;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
display:block;
max-width: none;
padding:1%;
}
JS
$(".col-sm-4").bind("mousedown", function() {
$(this).toggleClass("modal");
$(this).highcharts().reflow();
});
Pen edited

How do I stack under an element which has a z-index of auto?

For the below script, how do I position <div id="blocker"> beneath <div id="mceu_13" class="mce-tinymce mce-container mce-panel"> without setting the z-index of #mceu_13? As seen, the z-indez of #mceu_13 is auto.
http://jsbin.com/bujixoyoga
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>jQueryUI Dialog Overlay</title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<style type="text/css">
#blocker{margin: 0; padding: 0; width: 100%; height: 100%; top: 0; left: 0; background-color: rgb(0, 0, 0); opacity: 0.4; position: absolute;}
#dialog{position: relative;}
</style>
<script type="text/javascript">
tinymce.init({
selector: '#editor',
setup: function(ed) {
ed.on('init', function(e) {
e.target.hide();
});
}
});
$(function(){
$('#edit').click(function() {
var dialog=$("#dialog").parent().append($('<div>',{id:'blocker'}));
console.log(dialog,$(this).next(),$(this).next().css('z-index'))
//$(this).next().css('z-index',parseInt(dialog.css('zIndex'), 10)+1)
tinymce.get('editor').show();
});
$("#open").click(function(){$("#dialog").dialog("open");});
$("#dialog").dialog({
autoOpen : false,
resizable : false,
height : 400,
width : 400,
modal : true,
open : function() {
$('#editor').html('Some data obtained from the DB.');
}
});
});
</script>
</head>
<body>
<button id='open'>Open</button>
<div id="dialog" title="dialog title">
Edit
<div id="editor"></div>
</div>
</body>
</html>
Give it a negative z-index:
#blocker {
z-index: -1;
}
#blocker{
z-index: -1;
}
This works because #mceu_13 is set to auto which means that element gets z-index from its parent and has default z-index:0.

unwanted display: none added automatically on class

I've a panel with a copy link inside, when I click to open my panel a display:none is added automatically
to solve that i added this line on my jquery part: showme.style.display = "none"; now we can open the panel perfectly but it's impossible to close it after
someone have a solution ?
here is my link WITHOUT showme.style.display = "none";:
here is my link and here is my code WITH showme.style.display = "none";:
<!DOCTYPE HTML><!--[if IE 8]><html lang="en" class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->
<head><meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>
<style>
div#panel1 {
display: block;
background-color:#eee;
visibility: hidden;
}
.flip1 {
display: block;
background-color:#eee;
}
#check {
visibility: hidden;
width:12px; height:12px;
}
span#copy-callbacks, span#copy-callbacks2 {
float: none; cursor:pointer;
}
.zclip {
border:1px solid red;
position:relative;
display:inherit;
}
div#zclip-ZeroClipboardMovie_1.zclip {
position: relative;
margin-top:-18px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("span#copy-callbacks").zclip({
path:"ZeroClipboard.swf",
copy:$('#callback-paragraph').text(),
beforeCopy:function(){
$('#copy-callbacks').css('display','none');
},
afterCopy:function(){
$('#copy-callbacks').css('display','block');
}
});
document.getElementById("copy-callbacks").onclick = function() {
document.getElementById("check").style.visibility = "visible";
}
});
$(document).ready(function() {
$('span#copy-callbacks').hover(
function () {
$(this).css({"color":"#e0ccb4"});
},
function () {
$(this).css({"color":"#000"});
}
);
$(".flip1").click(function(){
$("#panel1").slideToggle("fast");
});
});
function newwindow() {
var showme = document.getElementById("panel1");
showme.style.visibility = "visible";
showme.style.display = "none";
}
</script>
</head>
<body>
<div style="margin-top:150px;" onclick="newwindow()" class="flip1">Click to slide the first panel down or up</div>
<div style="display: block; padding-bottom:80px;" id="panel1">
<span id="copy-callbacks"> Copy link <img src="check.png" id="check" style="display: inline;"></span>
<span style="font-size:0px;" id="callback-paragraph">essaie sans alert</span>
</div>
<script type="text/javascript" src="jquery.zclip.js"></script>
<script type="text/javascript" src="jquery.cbpFWSlider.min.js"></script>
</body>
</html>
You don't need newwindow()
For #panel1 : in document-level style, remove visibility and display.
For #panel1 : in inline style, make display : none
I am talking about the first link.

Categories

Resources