Hello im working on a game fan guide page but now I will not go any further and search for help.
I need a way to get the next or/and previous img on click a previous arrow and next arrow.
All this is new for me and i have test many but nothing have work, i hope anyone can help me out.
now i have see my html have make issus but i have fix and now i can post my html.
I have the CSS style and HTML for a better view split but in my html it is alle in one and a meta for viewport.
edit: sry, but i have make thinking errors. it is not enough to change the pic i have to change the wohle div content.
explane on click next have to change div id="card1" class="card_content" to div id="card2" class="card_content"
a img {
border:none;
}
.card_overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
}
.card_content {
display: none;
position: absolute;
height:600px;
width:305px;
top: 50%;
left: 50%;
margin-top: -258px;
margin-left: -156px;
padding: 6px;
background-color: black;
z-index: 1002;
overflow: auto;
}
#card_icons {
width:299px;
border:0;
}
.card_case {
background-image: url(http://file2.npage.de/014720/85/bilder/case.png);
background-repeat: no-repeat;
height:435px;
width:299px;
border:0;
}
.switch_card {
position:relative;
z-index:1003;
margin-top:-235px;
margin-left:-5px;
}
#back_to {
position:relative;
z-index:1003;
margin-top:203px;
margin-left:0px;
}
<table>
<tr>
<td>
<img src="http://file2.npage.de/014720/85/bilder/grabwaechters_vasall.png" title="Grabwächters Vasall" />
<img src="http://file2.npage.de/014720/85/bilder/des_kaenguru.png" title="Grabwächters Vasall" />
</td>
</tr>
</table>
<div id="card1" class="card_content">
<table id="card_icons">
<tr>
<td align="left" width="80"><img src="http://file2.npage.de/014720/85/bilder/stapel.png" height="17" width="24"><font color="white"> 1/20</font></td>
<td align="left" width="60"><img src="http://file2.npage.de/014720/85/bilder/ex.png" height="17" width="14"><font color="white"> 0/ 2</font></td>
<td align="right"><img src="http://file2.npage.de/014720/85/bilder/ur.png"></td>
</tr>
</table>
<table class="card_case">
<tr>
<td valign="middle" align="center"><img src="http://file2.npage.de/014720/85/bilder/big_grabwaechters_vasall.png"></td>
</tr>
</table>
<div class="switch_card">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><img src="http://file2.npage.de/014720/85/bilder/links2.png"></td>
<td> </td>
<td align="right"><img src="http://file2.npage.de/014720/85/bilder/rechts2.png"></td>
</tr>
</table>
</div>
<div id="back_to"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></div>
</div>
<div id="card2" class="card_content">
<table id="card_icons">
<tr>
<td align="left" width="80"><img src="http://file2.npage.de/014720/85/bilder/stapel.png" height="17" width="24"><font color="white"> 1/20</font></td>
<td align="left" width="60"><img src="http://file2.npage.de/014720/85/bilder/ex.png" height="17" width="14"><font color="white"> 0/ 2</font></td>
<td align="right"><img src="http://file2.npage.de/014720/85/bilder/ur.png"></td>
</tr>
</table>
<table class="card_case">
<tr>
<td valign="middle" align="center"><img src="http://file2.npage.de/014720/85/bilder/big_des_kaenguru.png">
</td>
</tr>
</table>
<div class="switch_card">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><img src="http://file2.npage.de/014720/85/bilder/links2.png"></td>
<td> </td>
<td align="right"><img src="http://file2.npage.de/014720/85/bilder/rechts2.png"></td>
</tr>
</table>
</div>
<div id="back_to"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></div>
</div>
<div id="fade" class="card_overlay"></div>
The code below may help you.
// index.html
<img src="01.png" id="pic">
// script.js
document.getElementById("pic").setAttribute("src", "02.png")
Got it done with
<a href="javascript:void(0)" onclick="document.getElementById('card1').style.display='none';document.getElementById('fade').style.display='none';document.getElementById('card2').style.display='block';document.getElementById('fade').style.display='block'" unselectable="off">
But how do i make the javascript: void with a script.js
Related
I need help with this question:
I have created the table but I don't know how to use the event inside it
<table style="width: 337px; margin-left: auto; margin-right: auto;" border="1">
<tbody>
<tr>
<td style="width: 90px;" colspan="9">
<table style="width: 329px;" border="1">
<tbody>
<tr>
<td style="width: 105.6875px;"> Skating</td>
<td style="width: 110.3125px;"> Swimming</td>
<td style="width: 130px;"> Cooking</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="text-align: center;">
<td style="width: 90px;" colspan="9">
<p>Hover Over Hobby Name to See Image</p>
</td>
</tr>
</tbody>
</table>
<br>
<style>
div {
text-align: center;
}
table {
border-collapse: collapse;
}
</style>
Thank you in advance.
You got the idea...
<table style="width: 337px; margin-left: auto; margin-right: auto;" border="1">
<tbody>
<tr>
<td style="width: 90px;" colspan="9">
<table style="width: 329px;" border="1">
<tbody>
<tr>
<td style="width: 105.6875px;"> Skating</td>
<td style="width: 110.3125px;"> Swimming</td>
<td style="width: 130px;"> Cooking</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="text-align: center;">
<td style="width: 90px;" colspan="9">
<p>Hover Over Hobby Name to See Image</p>
</td>
</tr>
</tbody>
</table>
<br>
<style>
div {
text-align: center;
}
table {
border-collapse: collapse;
}
</style>
const hobies = document.querySelector('[hobies]')
const hoby_image = document.querySelector('[hoby-image]')
var hoby_images = {
'Skating': 'https://picsum.photos/id/237/200/300',
'Swimming': 'https://picsum.photos/id/238/200/300',
'Cooking': 'https://picsum.photos/id/239/200/300'
}
for(let i = 0; i < hobies.childElementCount; i++){
hobies.children[i].addEventListener('mouseover', ()=>{
hoby_image.children[0].src = `${Object.entries(hoby_images)[i][1]}`
})
}
td{
cursor:pointer;
}
td:hover{
border:red;
}
div {
text-align: center;
}
table {
border-collapse: collapse;
}
<table style="width: 337px; margin-left: auto; margin-right: auto;" border="1">
<tbody>
<tr>
<td style="width: 90px;" colspan="9">
<table style="width: 329px;" border="1">
<tbody>
<tr hobies>
<td style="width: 105.6875px;">Skating</td>
<td style="width: 110.3125px;">Swimming</td>
<td style="width: 130px;">Cooking</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="text-align: center;">
<td hoby-image style="width: 90px;" colspan="9">
<img src='https://picsum.photos/id/237/200/300'></img>
</td>
</tr>
</tbody>
</table>
<br>
First, for each td tag you want to have the "mouseover" event, you need to add the event handler.
<tr class="hobbies">
<td style="width: 105.6875px" onmouseover="changeImg('skating')">
Skating
</td>
<td style="width: 110.3125px" onmouseover="changeImg('swimming')">
Swimming
</td>
<td style="width: 130px" onmouseover="changeImg('cooking')">
Cooking
</td>
</tr>
For the style just use this
<style>
div {
text-align: center;
}
.hobbies td:hover {
cursor: pointer;
color: red;
}
</style>
Then at the second row change p tag with an img tag
<!-- Change the src attribute onmouseover -->
<img id="imgToChange" src="skating.jpg" alt="skating" />
At the bottom add this script
<script>
const changeImg = (src) => {
let img = document.getElementById("imgToChange");
switch (src) {
case "skating":
img.src = "skating.jpg";
img.alt = "skating";
break;
case "swimming":
img.src = "swimming.jpg";
img.alt = "swimming";
break;
case "cooking":
img.src = "cooking.jpg";
img.alt = "cooking";
}
};
</script>
Base on which td tag is hovering, you can set the src and alt attribute of img tag with parameter.
const changeImg = (src) => {
let img = document.getElementById("imgToChange");
switch (src) {
case "skating":
img.src = "skating.jpg";
img.alt = "skating";
break;
case "swimming":
img.src = "swimming.jpg";
img.alt = "swimming";
break;
case "cooking":
img.src = "cooking.jpg";
img.alt = "cooking";
}
};
div {
text-align: center;
}
.hobbies td:hover {
cursor: pointer;
color: red;
}
<table style="width: 337px; margin-left: auto; margin-right: auto" border="1">
<tbody>
<tr>
<td style="width: 90px" colspan="9">
<table style="width: 329px" border="1">
<tbody>
<tr class="hobbies">
<td style="width: 105.6875px" onmouseover="changeImg('skating')">
Skating
</td>
<td style="width: 110.3125px" onmouseover="changeImg('swimming')">
Swimming
</td>
<td style="width: 130px" onmouseover="changeImg('cooking')">
Cooking
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="text-align: center">
<td style="width: 90px" colspan="9">
<!-- Change the src attribute onmouseover -->
<img id="imgToChange" src="skating.jpg" alt="skating" />
</td>
</tr>
</tbody>
</table>
<br />
Rather than use tables to do the layout (1992 called and wants a word with you) I've re-written using divs, but the concepts are exactly the same.
Attach the event handler .addEventListener for the mouseover event — you would attach it to your <td...> elements instead of my <li> elements.
I have attached which image to use to the element being hovered using a data- attribute, so the handler just gets that value and doesn't have to figure out which of the items is being hovered.
const imageHolder = document.querySelector('#imageholder img');
const hobbies = document.querySelectorAll('#hobbies li');
hobbies.forEach(el =>
el.addEventListener('mouseenter', function(e) {
const hobbyImage = e.target.dataset.image;
imageHolder.src = `https://picsum.photos${hobbyImage}`;
})
);
#app {
width: 80%;
}
#imageholder {
width: 90%;
margin: 0 auto;
}
ul#hobbies {
list-style-type: none;
}
ul li {
display: inline-block;
width: 30%;
text-align: center;
}
li + li {
border-left: 1px solid green;
}
<div id="app">
<ul id="hobbies">
<li data-image="/300/200">Skating</li>
<li data-image="/300/201">Swimming</li>
<li data-image="/300/202">Cooking</li>
</ul>
<div id="imageholder">
<img src="https://picsum.photos/300/200">
</div>
</div>
I have written some code to convert html in a bootstrap modal to image in jpeg format.
It is working fine but in the image it is showing some scroll bar(s). In this code I didn't include any scrollbar.
How to resolve this problem. can any one please help me. example image here I have included one image, I am getting scrollbar like this when I click on the download button.
$(document).on("click", "#jpgfrmt", function() {
domtoimage.toJpeg(document.getElementById('download'), {
quality: 0.95
})
.then(function(dataUrl) {
var link = document.createElement('a');
link.download = 'astDetails.jpeg';
link.href = dataUrl;
link.click();
});
});
#download {
background: #fff;
color: #000;
width: auto;
height: auto
}
#buttons {
margin: 0 auto;
display: inline;
}
#jpgfrmt {
float: right;
display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<div id="content" class="content">
<div id="buttons">
<div class="action_btn">
<a href="javascript:;" id="jpgfrmt" class="btn btn-xs btn-warning m-b-10">
<i class="fa fa-download m-r-5"></i> Download
</a>
</div>
</div>
<div class="row" id="download">
<div class="col-md-8">
<div class="table-responsive">
<table class="table">
<tr>
<td style="border:none;">
<table class="table">
<tr>
<td class="field highlight" width="25%" style="border:none;">Name:</td>
<td width="75%" style="border:none;">
Name
</td>
</tr>
<tr>
<td class="field" width="25%" style="border:none;">Description:</td>
<td width="75%" style="border:none;">
Description
</td>
</tr>
<tr>
<td class="field" width="25%" style="border:none;">Serial No:</td>
<td width="75%" style="border:none;">
Serial Number
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
http://www.tweeturrep.com.s3-website-us-east-1.amazonaws.com/index.html
for some reason when i added style to the nav bar at the top, the links started to only work sometimes. for example, u can't click to enter your zip code until u open and close the votes modal. also if u mouseover the videos link it'll change to the pointer then back and u can't click. idk whats going on but i think it's something to do with bootstrap stuff
<div class="content" position="absolute">
<table position="absolute">
<tr>
<td class="navOPtion">
<img class ="navImage" src="navicon.png">
</td>
<td class="navOPtion" id="hideNav5">
<a style="color:white" href="index.html" id="home">home</a>
</td>
<td class="navOPtion" id="hideNav1">
<a style="color:white" href="videos.html" id="videos" >videos</a>
</td>
<td class="navOPtion" id="hideNav">
<a style="color:white" href="resume.html" target="blank" id="resume">resume</a>
</td>
<td class="navOPtion" id="hideNav2">
<a style="color:white" data-toggle="modal" data-target="#myModal1">
about
</a>
</td>
<td class="navOPtion" id="hideNav3">
<a style="color:white" href="blog.html">blog</a>
</td>
<td class="navOPtion" id="hideNav4">
<a style="color:white" data-toggle="modal" data-target="#myModal">
votes
</a>
</td>
</tr>
<tr>
<td class="title" colspan="7">
tweetUrRep
</td>
</tr>
<tr>
<td class="search" colspan="7">
<form id="find_overlords" align="center">
<form action="" id="find_overlords" type="post">
<input type="text" id="user_Zip" name="zip" placeholder="Zip code" style="width:225px; height:75px;
font-size:20pt" class="input33"></input>
<input type="image" src="search-13-128.png" name="saveForm" class="smallSearchIcon" id="saveForm" >
<br>
<input type="image" src="search-13-128.png" name="saveForm" class="searchIcon" id="saveForm" >
</form>
</td>
</tr>
</table>
the css:
table{
position:static;
margin:auto auto auto auto;
color:white;
width:100%;
}
.navImage {
height: 50px;
width: 75px;
cursor: pointer;
}
.navOPtion{
width:10%;
}
#hideNav{
display:none;
font-size: 30px;
}
#hideNav2{
display:none;
font-size: 30px;
}
#hideNav3{
display:none;
font-size: 30px;
}
#hideNav4{
display:none;
font-size: 30px;
color:white;
}
#hideNav5{
display:none;
font-size: 30px;
color:white;
}
#hideNav1{
display:none;
font-size: 30px;
color:white;
}
the javascript to display the hideNavs:
$(document).ready(function(){
$('.navImage').click(function(){
$('#hideNav').slideToggle('fast');
$('#hideNav1').slideToggle('fast');
$('#hideNav2').slideToggle('fast');
$('#hideNav3').slideToggle('fast');
$('#hideNav4').slideToggle('fast');
$('#hideNav5').slideToggle('fast');
});
});
I am trying to stretch a line between two cells.
I have table with cells and I want to stretch line from one cell to another cell.
This is what I have:
This is what I want:
I tried to use <canvas> tag according to HTML canvas lineTo() Method but it didn't work.
I tried to add it before and after the table's tag without success.
Maybe someone knows how to do it.
I added jsfiddle example: JSFIDDLE example
CSS:
td {
width: 100px;
height: 90px;
text-align: left;
vertical-align: top;
border: 1px solid black;
position: relative;
}
table
{
position: fixed;
left:9px;
top:8px;
}
tr:nth-child(even) td:nth-child(odd), tr:nth-child(odd) td:nth-child(even)
{
background:#00A2E8;
}
.soldiers
{
width:20px;
height:20px;
position: absolute;
}
td span {
position: absolute;
bottom: 0;
}
HTML:
<body>
<div id="board" value="5">
<table oncontextmenu="return false">
<tbody>
<tr>
<td class="" cellnumber="21" row="4" col="0"><span>21</span></td>
<td class="" cellnumber="22" row="4" col="1"><span>22</span>
<br><br><p class="SnakesAndLadders" from="22" to="6">Snake to 6 </p></td>
<td class="" cellnumber="23" row="4" col="2"><span>23</span></td>
<td class="" cellnumber="24" row="4" col="3"><span>24</span></td>
<td class="" cellnumber="25" row="4" col="4"><span>25</span></td>
</tr>
<tr>
<td class="" cellnumber="16" row="3" col="0"><span>16</span></td>
<td class="" cellnumber="17" row="3" col="1"><span>17</span></td>
<td class="" cellnumber="18" row="3" col="2"><span>18</span></td>
<td class="" cellnumber="19" row="3" col="3"><span>19</span></td>
<td class="" cellnumber="20" row="3" col="4"><span>20</span></td></tr>
<tr>
<td class="" cellnumber="11" row="2" col="0"><span>11</span></td>
<td class="" cellnumber="12" row="2" col="1"><span>12</span></td>
<td class="" cellnumber="13" row="2" col="2"><span>13</span></td>
<td class="" cellnumber="14" row="2" col="3"><span>14</span></td>
<td class="" cellnumber="15" row="2" col="4"><span>15</span>
<br><br><p class="SnakesAndLadders" from="15" to="24">Ladder to 24 </p>
</td>
</tr>
<tr>
<td class="" cellnumber="6" row="1" col="0"><span>6</span></td>
<td class="" cellnumber="7" row="1" col="1"><span>7</span></td>
<td class="" cellnumber="8" row="1" col="2"><span>8</span></td>
<td class="" cellnumber="9" row="1" col="3"><span>9</span></td>
<td class="" cellnumber="10" row="1" col="4"><span>10</span></td>
</tr>
<tr>
<td class="" cellnumber="1" row="0" col="0"><span>1</span></td>
<td class="" cellnumber="2" row="0" col="1"><span>2</span></td>
<td class="" cellnumber="3" row="0" col="2"><span>3</span></td>
<td class="" cellnumber="4" row="0" col="3"><span>4</span></td>
<td class="" cellnumber="5" row="0" col="4"><span>5</span></td>
</tr>
You can create a simple div element, with a black border, and rotate it using css transform. Then, position it absolutely where you want with top and left properties:
.line {
position: absolute;
height: 200px;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
border: 2px solid black;
top: 50px;
left: 300px;
}
Updated Fiddle
check the fiddle here
<canvas id="myCanvas" width="600" height="500"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(350, 50);
context.lineTo(450, 350);
context.stroke();
</script>
CSS
#myCanvas {
z-index: 10;
position:absolute;
}
I want to copy text from a blogger blogspot caption table and add it to the img alt, so that it will appear in the fancybox slideshow as the title/caption.
So, this is the HTML I have :
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: right;"><tbody>
<tr> <td style="text-align: center;"><img align="right" alt="" src="URL" title="Ghostly Waves in the Valle de Rocas" width="320" /></td> </tr>
<tr> <td class="tr-caption" style="text-align: center;">This is my Caption</td> </tr>
</tbody></table>
And my script is:
$("tr-caption").each(function(){
var Caption = $(this).text();
if (Caption && Caption !== ''){
$(this).parent(img).attr('alt', Caption );
}
});
And this is the output I'd hope for....
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: right;"><tbody>
<tr> <td style="text-align: center;"><img align="right" alt="This is my Caption" src="URL" title="Ghostly Waves in the Valle de Rocas" width="320" /></td> </tr>
<tr> <td class="tr-caption" style="text-align: center;">This is my Caption</td> </tr>
</tbody></table>
But it's not working...
Here's a jsfiddle: http://jsfiddle.net/NCqW2/6/
Any help greatly appreciated! Thanks for taking some time to look!
Replacing
$(this).parent(img).attr('alt', Caption );
with
$(this).parent().prev().find('img').attr('alt', Caption );
should do it.