I'm stuck trying to Implement the imgOnClick(elmt) function so that it paints (to the canvas' drawImage() method) the image given by elmt. elmt will be an tag object. The canvas has the id imgresult.
also In the document ready function, have each of the thumbnail images set their click event to the imgOnClick() function.
no matter how I set the code it won't work and I'm not sure how to do this
<!DOCTYPE html>
<html>
<head>
<link rel=stylesheet type="text/css" href="memeory.css">
<title>Meme-ory :: Javascript Meme Generator</title>
<script type="application/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$( document ).ready(function() {
// TODO: set up the click events for the thumbnails
$('#imagegallery').button.click(function){
}
// TODO: set up the click event for the button
});
// TODO: function called when a thumbnail is clicked
function imgOnClick(elmnt) {
var curImage = document.getElementById('memeresult');
var thePath = 'images/';
var theSource = thePath + elmnt;
canvas.drawImage(elmnt, 10, 10);
};
// TODO: function called when the button is clicked
function buttonOnClick() {
};
</script>
</head>
<body>
<header>
<h1>Meme-ory: Raging on in the Moonlight!</h1>
</header>
<main>
<div id="controls">
<form>
<label for="toptext">Top Text:</label>
<input id="toptext" type="text">
<label for="bottomtext">Bottom Text:</label>
<input id="bottomtext" type="text">
<input id="createMemeButton" type="button" value="Give me Meme!">
</form>
</div>
<div id="imagegallery">
<img class="thumbnail" id="closeenough" src="closeenough.png" alt="close enough">
<img class="thumbnail" id="cutenessoverload" src="cutenessoverload.png" alt="cuteness overload">
<img class="thumbnail" id="deskflip" src="deskflip.png" alt="deskflip">
<img class="thumbnail" id="lol" src="lol.png" alt="LOL">
<img class="thumbnail" id="trollface" src="trollface.png" alt="troll face">
</div>
<div id="memeresult">
<canvas id="imgresult">
</canvas>
</div>
</main>
</body>
Related
I want to change link of anchor and src of image which are inside the div, when I click on FR button.
Please help me out that how can I accomplished it using JQuery.
Code is below
<div id="my_id">
<a href="wwww.google.com">
<span><img src="link-of-image"></span>
</a>
</div>
<button id="fr-custom">FR</button>
jQuery( document ).ready(function() {
console.log( "ready!" );
jQuery("#fr-custom").click(function(){
// Change src attribute of Apps to FR
jQuery('#android_store').attr('src','new-image-link');
});
});
Thanks in advance!
Put id of <a> and <img> tag.
<a href="https://www.google.com" id="atag">
<img id="android_store" src="">
Change link url like $("#atag").attr("href","https://www.yahoo.com");
Do you want like below?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
console.log("ready!");
jQuery("#fr-custom").click(function() {
// Change src attribute of Apps to FR
jQuery('#android_store').attr('src', "data:image/png;base64,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");
$("#atag").attr("href", "https://www.yahoo.com");
});
});
</script>
</head>
<body>
<div id="my_id">
<a href="https://www.google.com" id="atag">
<span> <img id="android_store" src="data:image/png;base64,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" height="100" width="100"></span>
</a>
<button id="fr-custom">FR</button>
</div>
</body>
</html>
is there anyone that can just write down the basics for database knowledge? i want to link a database to my html page but have no knowledge about it
this is my html page and i want the div background linked to a databse value that when the value is true the background is green if false background is red, now it works with a button input that if pressed it change to the opposite color
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/style.default.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Grafiek</title>
</head>
<body>
<h1>Server Stats</h1>
<div id="maindiv">
<div id="server1" class="serverstatus">
<div id="cardheader">
(servername1)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
<div id="server2" class="serverstatus">
<div id="cardheader">
(servername2)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
<div id="server3" class="serverstatus">
<div id="cardheader">
(servername3)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
</div>
</body>
</html>
<script>
function toggleStatus(e) {
var parentDiv = e.parentNode.parentNode;
var bgColor = parentDiv.style.backgroundColor;
if (bgColor == "darkred") {
parentDiv.style.backgroundColor = "green";
} else {
parentDiv.style.backgroundColor = "darkred";
}
}
// var green = false
// function toggleStatus()
// {
// if (green = !green)
// {
// $("#maindiv .serverstatus").each(function ()
// {
// $(this).css("background-color", "red");
// });
// }
// else
// {
// $("#maindiv .serverstatus").each(function ()
// {
// $(this).css("background-color", "#639919");
// });
// }
// };
// function updateStatus(){
// $("#maindiv .serverstatus").each(function(){
// $(this).css("background-color", "red");
// });
// }
//
// $( document ).ready(function() {
// updateStatus();
// });
</script>
</body>
</html>
I am facing a problem with ng-click event. Below is my code. When I click on the element, it retrieves the span tag and if I call currentTarget, it gives the li element. I want to get the <a> element on ng-click.And after getting element i have to check whether it has a class named 'havesub', How can I achieve it?
<li>
<a class="havesub" ui-sref="" ng-click="openmenu($event)">
<img src="images/icon-03.png" alt="menu" />
<span>Menu item1</span>
</a>
</li>
Below is my function in controller
app.controller("con", function($scope) {
$scope.openmenu = function($event) {
var targets = $event.currentTarget;
};
});
var app = angular.module("ngClickApp", []);
app.controller('ngClickCtrl', ['$scope', function ($scope) {
$scope.click=function(event){
alert(angular.element(event.currentTarget).hasClass("havesub"));
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="ngClickApp">
<head>
<title>Validation messages</title>
</head>
<body ng-controller="ngClickCtrl">
<form name="userForm">
<li>
<a href class="havesub" ng-click="click($event)">
<img src="1.png" alt="menu" />
<span>Menu item1</span>
</a>
</li>
</form>
</body>
</html>
event.currentTarget works fine for me
<html ng-app="ngClickApp">
<head>
<title>Validation messages</title>
</head>
<body ng-controller="ngClickCtrl">
<form name="userForm">
<li>
<a href class="havesub" ng-click="click($event)">
<img src="1.png" alt="menu" />
<span>Menu item1</span>
</a>
</li>
</form>
<script type="text/javascript">
var app = angular.module("ngClickApp", []);
app.controller('ngClickCtrl', ['$scope', function ($scope) {
$scope.click=function(event){
alert(angular.element(event.currentTarget).hasClass("havesub"));
}
}]);
</script>
</body>
</html>
The problem is :- In below code I want to make it, if there is no photo uploaded then there will be a photo size bootstrap's glyphicon-user should be placed and when photo uploaded this will overwrite by the uploaded image.
//please add necessary files of bootstrap
<div class="row">
<div class="row">
<div class="col-md-4">
<h4 class="heading">Upload Patient's Photo :-</h4>
</div>
<div class="col-md-4">
<input type="file" class="form-control" name="patientpic" id="patientpic" onchange="readURL(this)"/>
</div>
</div>
//this is the script code for preview image when uploaded.
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#patientimg').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</div>
//this is image code here changes takes place to add bootstrap's glyphicon-user
<div class="col-md-2 col-sm-12">
<div class="thumbnail">
<img src="" alt="Select Patient Image" class="img-responsive" id="patientimg" name="patientimg" style="height:140px;width:140px;font-size:30px;text-align:center;color:gray;"/>
</div>
</div>
I tried this but the glyphicon-user in span tag reside below patient image.
just suggestion here, why not convert the bootstrap's glyphicon-user to png then add it on since when the user upload the image it will be appended according to your code.
check a sample here http://jsfiddle.net/ws3bb7sr/1/
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#patientimg').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row">
<div class="row">
<div class="col-md-4">
<h4 class="heading">Upload Patient's Photo :-</h4>
</div>
<div class="col-md-4">
<input type="file" class="form-control" name="patientpic" id="patientpic" onchange="readURL(this)"/>
</div>
</div>
<div class="col-md-2 col-sm-12">
<div class="thumbnail">
<img src="http://s5.postimg.org/4xpbh5oo3/user_000000_128.png" alt="" class="img-responsive" id="patientimg" name="patientimg" style="height:140px;width:140px;font-size:30px;text-align:center;color:gray;"/>
</div>
</div>
Not the best idea, but you can use this code:
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.3.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#img1 {
width: 100px;
height: 100px;
margin-left: 25px;
}
#img1::before {
position: absolute;
font-size: 100px;
}
</style>
<script>
$(function() {
setTimeout(function() {
$('#img1').attr('src', 'http://dummyimage.com/100x100/0ac72a/0011ff');
}, 2500);
});
</script>
</head>
<body>
<img src="" id="img1" class="glyphicon glyphicon-asterisk">
</body>
</html>
You might have some problems with transparent png files, so in better check it. If you have some problem with it you can remove the glyphicon classes when you update the src of your image.
I have called 2nd page <div id=child> on button click of 1st page <div id = home> and used jquery theme in both pages but the problem is in 2nd page there is no theme effect as in 1st page. I have put the css file in same folder and it is giving effect in 1st page and not in 2nd ?
Can any one solve the problem, so that the theme have effect in 2nd page also? Below is my code
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="jquerybasic/jquerymobilecss.css" />
<style>
/* App custom styles */
</style>
<script src="jquerybasic/jquery.min.js" type="text/javascript">
</script>
<script src="jquerybasic/jquery.mobile-1.1.0.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#buttonid').click(function() {
$('#child').toggle();
$('#home').toggle();
});
$('#buttonchild').click(function() {
$('#child').toggle();
$('#home').toggle();
});
$('#next').click(function() {
$('#home').show();
$('#child').hide();
});
$('#prev').click(function() {
$('#home').hide();
$('#child').show();
});
$('#nextchild').click(function() {
$('#home').show();
$('#child').hide();
});
$('#prevchild').click(function() {
$('#home').hide();
$('#child').show();
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-theme="d" data-role="header">
<h3>
The Grand Bhagavati
</h3>
<a data-role="button" id="next" data-inline="true" data-transition="slide" >
<<
</a>
<a data-role="button" id="prev" data-inline="true" data-transition="fade" >
>>
</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput1">
User:
</label>
<input id="textinput1" type="text" />
</fieldset>
</div>
<input id="buttonid" data-theme="d" value="Login" type="button" />
</div>
<div data-theme="d" data-role="footer" data-position="fixed" >
<h3>
Page 1
</h3>
</div>
</div>
<div data-role="page" id="child">
<div data-theme="d" data-role="header">
<h3>
The Grand Bhagavati
</h3>
<a data-role="button" id="nextchild" data-inline="true" data-direction="reverse" data-transition="slide" >
<<
</a>
<a data-role="button" id="prevchild" data-inline="true" data-direction="reverse" data-transition="fade" >
>>
</a>
</div>
<div data-role="content">
<label>
hi khushbu. welcome...!
</label>
<input id="buttonchild" data-theme="d" value="Login" type="button" class="ui-btn-hidden" aria-disabled="false" />
</div>
<div data-theme="d" data-role="footer" data-position="fixed" >
<h3>
Page 2
</h3>
</div>
</div>
<script>
//App custom javascript
</script>
</body>
Ok boy :)
It seems you've skipped a rather important part of using a new piece of software, reading the documentation.
To navigate between pages you would just place this in the href attribute for the link:
<a data-role="button" href="#child">...</a>
And jQuery Mobile will handle the transition to the next pseudo-page. Here is the documentation for Linking Pages: http://jquerymobile.com/demos/1.1.0/docs/pages/page-links.html
If you want to do this programatically then you can use $.mobile.changePage() which is what gets used internally. The advantage to manually calling this function (say in a click event handler for a button) is that you can specify non-default options for the transition:
$('#next').on('click', function () {
$.mobile.changePage($('#child'), { transition : 'slide', reverse : true });
});
Here is the documentation for $.mobile.changePage(): http://jquerymobile.com/demos/1.1.0/docs/api/methods.html
If you wanted to roll your own transitions it's quite a bit more complex than showing one div and hiding another. You've got to setup some CSS classes that animate the transition using CSS3 (transform, transition, keyframes, etc.).
And finally, here is a demo of your code where I replaced the links in the header with a single link that works: http://jsfiddle.net/MmKK4/