I have three Pictures on a Website that are generated this way:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>AJAX</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="lib/css/stil.css" />
<script type="text/javascript" src="lib/js/ajaxeinsendeaufgabe2.js"></script>
</head>
<body>
<h1>Zusatzinformationen</h1>
<table>
<tr>
<td>
<img class="img" src="img/b1.jpg" />
</td>
<td id="info0"></td>
</tr>
<tr>
<td>
<img class="img" src="img/b2.jpg" />
</td>
<td id="info1"></td>
</tr>
<tr>
<td>
<img class="img" src="img/b3.jpg"/>
</td>
<td id="info2"></td>
</tr>
</table>
</body>
My Problem: how do i show text when i move with the mouse over one of the three images. Each Image must display unique text.
Here is an incomplete part of the Code:
var resOb = new XMLHttpsRequest ();
window.onload = function () {
document.getElementsByTagName("img").onmouseover =
function sndReq(i){
switch (i) {
case 0:
resOb.open('get', 'info0.txt', true);
break;
case 1:
resOb.open('get', 'info1.txt', true);
break;
case 2:
resOb.open('get', 'info2.txt', true);
break;
resOb.onreadystatechange = function (){
handleResponse (i);
}
How i can generate the text information for each image using onmouseover event?
<table>
<tr>
<td>
<img class="img" src="img/b1.jpg" data-id='0'/>
</td>
<td id="info0"></td>
</tr>
<tr>
<td>
<img class="img" src="img/b2.jpg" data-id='1'/>
</td>
<td id="info1"></td>
</tr>
<tr>
<td>
<img class="img" src="img/b3.jpg" data-id='2'/>
</td>
<td id="info2"></td>
</tr>
</table>
$( ".img" ).mouseover(function() {
var resOb = new XMLHttpsRequest ();
resOb.open('get', 'info'+ $(this).attr('data-id') +'.txt', true);
});
Related
I am a beginner in Jquery and Js, I would like that when we press the plus and the minus it hides only the main element and the same with the first element. except that when I press the plus or minus button of the main element, it also show / hides the first element .I want to show and hide separately.
I ask for your help please
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
</head>
<body>
<section>
<div class="container">
<table id="table" class="table_ele">
<thead>
<tr>
<th>Main element</th>
</tr>
</thead>
<tbody>
<tr>
<td>
element1
</td>
</tr>
<tr>
<td>
element2
</td>
</tr>
<tr>
<td>
element3
</td>
</tr>
<tr>
<td>
element4
</td>
</tr>
<tr>
<td>
<a class='clickable-more' href="#"><i class="fas fa-plus-square"></i></a>
<a class='clickable-minus' style="display: none" href="#"><i class="far fa-minus-square"></i></a>
</td>
</tr>
<tr class="tr_more">
<td>
element5
</td>
</tr>
<tr class="tr_more">
<td>
element6
</td>
</tr>
</tbody>
</table>
<table id="table" class="table_ele">
<thead>
<tr>
<th>First element</th>
</tr>
</thead>
<tbody>
<tr>
<td>
elementA
</td>
</tr>
<tr>
<td>
elementB
</td>
</tr>
<tr>
<td>
elementC
</td>
</tr>
<tr>
<td>
elementD
</td>
</tr>
<tr>
<td>
<a class='clickable-more' href="#"><i class="fas fa-plus-square"></i></a>
<a class='clickable-minus' style="display: none" href="#"><i class="far fa-minus-square"></i></a>
</td>
</tr>
<tr class="tr_more">
<td>
elementE
</td>
</tr>
<tr class="tr_more">
<td>
elementF
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.tr_more').hide();
$(".clickable-more").on('click', function() {
$(this).hide();
$('.tr_more').show();
$(this).next('a').show();
});
$(".clickable-minus").on('click', function() {
$(this).hide();
$('.tr_more').hide();
$(this).prev('a').show();
});
});
</script>
</html>
The reason that the click hides all the tr_more elements is because in your code, you are hiding and showing all the elements with the class tr_more irrespective of which table it is.
One approach would be to select the tr_more element which is part of the table which you are clicking by using the closest() to find the parent table and then using find() to get the tr_more elements of that particular table that is clicked. Try the below code.
<script>
jQuery(document).ready(function($) {
$('.tr_more').hide();
$(".clickable-more").on('click', function() {
$(this).hide();
$(this).closest('table').find('.tr_more').show();
$(this).next('a').show();
});
$(".clickable-minus").on('click', function() {
$(this).hide();
$(this).closest('table').find('.tr_more').hide();
$(this).prev('a').show();
});
});
</script>
A better approach would be to use jquery toggleClass to toggle a class name for the tr_more elements and change the display property for that class name using css. Not the exact code below, but it's a start
.tr_more.show {
display: block;
}
$('.clickable-more').on('click', function() {
$(this).closest('table').find('.tr_more').toggleClass('show');
})
I want to make a JS function which can take the screenshot from element and then download it.
<body>
<h1>Sample text</h1>
<h2>Sample text</h2>
<table width="1080px" height="1920px" border="1" style="border-collapse:collapse">
<tbody><tr>
<td colspan="2">
<img src="https://inspectiondoc.com/wp-content/uploads/2014/08/sample-icon.png" width="600px">
</td>
<td>
Sample text
</td>
</tr>
<tr style="background:#b6ff00">
<td>
Sample text
</td>
<td>
Sample text
</td>
<td>
Sample text
</td>
</tr>
</tbody></table>
<h1>
sample text
</h1>
<h2>Sample text</h2>
<br><br>
<input type="button" value="Capture" onclick="capture()">
</body>
After clicking capture button I want this td colspan="2" element to be screenshoted and downloaded on jpg or png format.
Using html2canvas could help you, it converts an element into a canvas, and then you just need to add its data as a url into an a element
function download(canvas, filename) {
const data = canvas.toDataURL("image/png;base64");
const donwloadLink = document.querySelector("#download");
donwloadLink.download = filename;
donwloadLink.href = data;
}
html2canvas(document.querySelector(".card")).then((canvas) => {
// document.body.appendChild(canvas);
download(canvas, "asd");
});
Check a full example here https://codepen.io/koseare/pen/NWpMjeP
Try with html2canvas;
<!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>Document</title>
</head>
<body>
<div id="all">
<h2>Sample text</h2>
<table width="1080px" height="1920px" style="border-collapse: collapse">
<tbody>
<tr>
<td colspan="2">
<img
src="https://inspectiondoc.com/wp-content/uploads/2014/08/sample-icon.png"
width="600px"
/>
</td>
<td>Sample text</td>
</tr>
<tr style="background: #b6ff00">
<td>Sample text</td>
<td>Sample text</td>
<td>Sample text</td>
</tr>
</tbody>
</table>
</div>
<br />
<input type="button" id="btn" value="Download" />
<script>
document.getElementById("btn").addEventListener(
"click",
function () {
var text = document.getElementById("all").value;
var filename = "output.txt";
download(filename, function makeScreenshot() {
html2canvas(document.getElementById("screenshot"), {scale: 1}).then(canvas => {
document.body.appendChild(canvas);
});
});
},
false
);
</script>
</body>
</html>
In spite of including all the references for the Weekline plugin the browser shows the error that weekline is not a function. I am trying this in an ASP.Net MVC View
<script src="~/bootstrap-3.3.6-dist/js/jquery.weekLine.js"></script>
<script src="~/Scripts/jquery.weekLine.min.js"></script>
<link href="~/bootstrap-3.3.6-dist/css/jquery.weekLine-white.css" rel="stylesheet" />
<script src="~/bootstrap-3.3.6-dist/js/jquery-latest.min.js"></script>
<table border="1">
<tr>
<td height="50" width="100">
<div class="weekDays" title="weekdays" id="weekdays"></div>
</td>
</tr>
<tr>
<td height="25" width="100">
<div id="selectedDays"></div>
</td>
</tr>
</table>
$("#weekdays").weekLine();
$("#weekdays").weekLine({
onChange: function() {
$("#selectedDays").html($(this).weekLine('getSelected', 'indexes'));
}
});
I have two pages one for a user to input a bus stop id. This bus stop id parses a live API. And one page for the results of that. The pages are showing on the single page at the moment. I want the user to get redirected to the second page. I have tired linking the pages but it did not work. ANy Suggestions?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dublin Concert Listings</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" href="css/theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body class="ui-mobile-viewport ui-overlay-a">
<div data-role="page1">
<div data-role="content">
<div class="content-primary">
<table cellpadding="5" cellspacing="5" align="center" width="100%">
<tr>
<td align="center"><h1>Get Next Bus Details</h1></td>
</tr>
<tr>
<td align="center">
<div class="ui-input-search ui-shadow-inset ui-input-has-clear ui-body-inherit ui-corner-all">
<input data-type="search" placeholder="Bus Stop Id" id="bus_stop_id" name="bus_stop_id">
Clear text
</div>
<input type="button" value="Get Current Update" id="button_get_bus" style="background-color: #fff;padding: 8px;"></td>
</tr>
</table>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div class="content-primary">
<div id="resultDiv" style="display:none; padding-top:40px">
<table cellpadding="5" cellspacing="5" align="center" width="50%" style="border:solid 1px #fff; ">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>From</strong> </td>
<td>: </td>
<td><span id="from"></span> </td>
</tr>
<tr>
<td><strong>To</strong> </td>
<td>: </td>
<td><span id="to"></span> </td>
</tr>
<tr>
<td><strong>Arival Date Time</strong> </td>
<td>: </td>
<td><span id="arival"></span> </td>
</tr>
<tr>
<td><strong>Departure Date Time</strong> </td>
<td>: </td>
<td><span id="departure"></span> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- end of pageone -->
<!--Loading scripts at bottom of the page-->
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span>
<h1>loading</h1>
</div>
<div class="ui-panel-dismiss"></div>
<script type="text/javascript">
//On click of button this function get call
$('#button_get_bus').click(function(){
//Get Enter Bus Id
var bus_stop_id=document.getElementById("bus_stop_id").value;
//If Id is blank then given error
if(bus_stop_id=="")
{
alert("Please enter bus stop number");
return false;
}
// This Function post request to API with the given bus stop id
$.ajax({
url: "https://data.smartdublin.ie/cgi-bin/rtpi/realtimebusinformation?stopid="+bus_stop_id+"&format=json",
dataType: 'json',
success: function(results){
// It returnes json data
console.log(results);
var str = JSON.stringify(results);
// Code for parsing json and inserting data in html
var obj =jQuery.parseJSON(str);
var destination=obj.results[0].destination;
document.getElementById("to").innerHTML=destination;
var origin=obj.results[0].origin;
document.getElementById("from").innerHTML=origin;
var arrivaldatetime=obj.results[0].arrivaldatetime;
document.getElementById("arival").innerHTML=arrivaldatetime;
var departuredatetime=obj.results[0].departuredatetime;
document.getElementById("departure").innerHTML=departuredatetime;
document.getElementById("resultDiv").style.display="block";
}
});
});
</script>
</body>
</html>
Please see $.mobile.pageContainer.pagecontainer("change", "#page2"); in this example below:
//On click of button this function get call
$(document).on('click', '#button_get_bus', function() {
//Get Enter Bus Id
var bus_stop_id = document.getElementById("bus_stop_id").value;
//If Id is blank then given error
if (!bus_stop_id) {
alert("Please enter bus stop number");
return false;
}
// This Function post request to API with the given bus stop id
$.ajax({
url: "https://data.smartdublin.ie/cgi-bin/rtpi/realtimebusinformation?stopid=" + bus_stop_id + "&format=json",
dataType: 'json',
success: function(results) {
// It returnes json data
console.log(results);
var str = JSON.stringify(results);
// Code for parsing json and inserting data in html
var obj = jQuery.parseJSON(str);
var destination = obj.results[0].destination;
document.getElementById("to").innerHTML = destination;
var origin = obj.results[0].origin;
document.getElementById("from").innerHTML = origin;
var arrivaldatetime = obj.results[0].arrivaldatetime;
document.getElementById("arival").innerHTML = arrivaldatetime;
var departuredatetime = obj.results[0].departuredatetime;
document.getElementById("departure").innerHTML = departuredatetime;
document.getElementById("resultDiv").style.display = "block";
$.mobile.pageContainer.pagecontainer("change", "#page2");
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dublin Concert Listings</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div class="ui-content">
<div class="content-primary">
<table cellpadding="5" cellspacing="5" align="center" width="100%">
<tr>
<td align="center"><h1>Get Next Bus Details</h1></td>
</tr>
<tr>
<td align="center">
<div class="ui-input-search ui-shadow-inset ui-input-has-clear ui-body-inherit ui-corner-all">
<input data-type="search" placeholder="Bus Stop Id" id="bus_stop_id" name="bus_stop_id">
Clear text
</div>
<input type="button" value="Get Current Update" id="button_get_bus" style="background-color: #fff;padding: 8px;"></td>
</tr>
</table>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-add-back-btn="true"></div>
<div class="ui-content">
<div class="content-primary">
<div id="resultDiv" style="display:none; padding-top:40px">
<table cellpadding="5" cellspacing="5" align="center" width="50%" style="border:solid 1px #fff; ">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>From</strong> </td>
<td>: </td>
<td><span id="from"></span> </td>
</tr>
<tr>
<td><strong>To</strong> </td>
<td>: </td>
<td><span id="to"></span> </td>
</tr>
<tr>
<td><strong>Arival Date Time</strong> </td>
<td>: </td>
<td><span id="arival"></span> </td>
</tr>
<tr>
<td><strong>Departure Date Time</strong> </td>
<td>: </td>
<td><span id="departure"></span> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- end of pageone -->
<!--Loading scripts at bottom of the page-->
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span>
<h1>loading</h1>
</div>
<div class="ui-panel-dismiss"></div>
</body>
</html>
Remove your old jquery library and add the library before you start the script.You can add any of these following CDN to start it.
Google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Microsoft
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
your above example
I am taking in the data in from an sql statement and throwing it into a table.
I am trying to create a subtotal for the table that I can then send to a checkout page using a java servlet. Problem is that I am having issues getting the subtotal working after going through several examples on stackoverflow.
Thank you for your time.
<html>
<head>
<link rel="stylesheet" href="resources/css/main.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="resources/scripts/jquery-1.8.2.min.js"></script>
<title>Home Page</title>
</head>
<body>
<br>
<br>
<script>
(function (global) {
document.getElementById("output").value = global.localStorage.getItem("mySharedData");
}(window));
</script>
<sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost:3306/sakila"
user="root" password="nbuser"/>
<sql:query dataSource="${snapshot}" var="result">
Select F.title, (F.rental_rate * F.rental_duration) as 'Price'
from cart as C
join cartofitems as CI
on CI.cart_id = C.cart_id
join film as F
on CI.film_id = F.film_id
</sql:query>
<div align="center">
<table width="850" style="BACKGROUND-COLOR: #FFFFFF;" border="1">
<tr>
<td align="center">
<img src="images/cart.png">
</td>
</tr>
<tr>
<td align="center" colspan="3">
<table width="650">
<tr>
<td>
<div align="justify" style="color:#3e160e;">
This is a custom HTML header. This header may contain any HTML code, text,
graphics, active content such as dropdown menus, java, javascript, or other
content that you would like to display at the top of your cart pages. You create
custom HTML header yourself and specify its location in the CustomCart Administrator.
Also note the custom wallpaper (brown striped background), this is uploaded via the
administrator. You may change the wallpaper any time you wish to change the look of
your cart.
</div>
</td>
</tr>
</table>
</td>
<tr>
<tr>
</tr>
</table>
</div>
<div align="center">
<form action="checkout.jsp" method="post" border="">
<table width="850" border="1" class="cart">
<thead>
<tr>
<th>Action</th>
<th>Movie Title</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<c:forEach items="${result.rows}" var="cart">
<tr>
<td>Delete</td>
<td><c:out value="${cart.title}" /></td>
<td class="price"><c:out value="${cart.Price}" /></td>
</tr>
</c:forEach>
<tr class="totalColumn">
<td colspan="2" align="right" ><b>Subtotal: </b></td>
<td align="right" ><b><span id="subtotal"></span></b></td>
<script language="javascript" type="text/javascript">
var tds = document.getElementById('cart').getElementsByTagName('td');
var sum = 0;
for (var i = 0; i < tds.length; i++) {
if (tds[i].className == 'price') {
sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
}
}
document.getElementById('price').innerHTML += '<tr><td>' + sum + '</td><td>total</td></tr>';
</script>
</tr>
</tbody>
</table>
<table width="850" border="1">
<tr>
<div style="width:650px;">
<button type="submit" name="your_name" value="totalCost" class="loginbtn">Checkout Cart</button>
</form>
<p><form action="faces/index.xhtml" method="post">
<button type="submit" name="your_name" value="your_value" class="adminloginbtn">Back To Search</button>
</form>
</div>
</tr>
</tbody>
</table>
</body>
</html>