I don't understand why the vertical scroll bar moves automatically to the most top position when "Line 9" clicked, for example. Further clicks does not move the scroll bar. Could anyone explain why, and how to fix this ?
I work with Firefox 3.6.3.
HTML:
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript" src="test.js"></script>
</head>
<body>
<div>
<table>
<tr row='0'><td class='column1'>Line 0</td></tr>
<tr row='1'><td class='column1'>Line 1</td></tr>
<tr row='2'><td class='column1'>Line 2</td></tr>
<tr row='3'><td class='column1'>Line 3</td></tr>
<tr row='4'><td class='column1'>Line 4</td></tr>
<tr row='5'><td class='column1'>Line 5</td></tr>
<tr row='6'><td class='column1'>Line 6</td></tr>
<tr row='7'><td class='column1'>Line 7</td></tr>
<tr row='8'><td class='column1'>Line 8</td></tr>
<tr row='9'><td class='column1'>Line 9</td></tr>
</table>
</div>
</body>
</html>
JS:
$(document).ready(function() {
$(".column1").each(function(index) {
$(this).after("<td class='column2'>Details " + index + "</td>");
$(this).toggle(function() { $("[row='" + index + "'] .column2").fadeIn("fast") },
function() { $("[row='" + index + "'] .column2").fadeOut("fast") });
});
});
CSS:
div {
overflow: auto;
height: 100px;
width: 300px;
border: 1px solid blue;
}
.column1 {
cursor: pointer;
width: 100px;
background-color: green;
color: white;
}
.column2 {
display: none;
width: 200px;
background-color: blue;
color: white;
}
After doing some trial and error tests, it looks like this is related to the moment that the browser recalculates and redraws the table when you fade in/fade out one of the cells. There's nothing wrong with your code, and jQuery is correctly toggling the 'display' property of the cell - it looks like it's a minor bug in FF.
Probably the easiest way around it is to avoid toggling table cells themselves, and instead toggle the contents of the column2 cell, like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript">
$(document).ready(function() {
$("td.column1").each(function(index) {
$(this).after('<td class="column2"><span class="details">Details ' + index + '</span></td>');
$(this).toggle(
function(){$(this).siblings('.column2').children('span.details').fadeIn("fast")},
function(){$(this).siblings('.column2').children('span.details').fadeOut("fast")}
)
});
});
</script>
<style type="text/css" media="screen">
div {
overflow: auto;
height: 100px;
width: 300px;
border: 1px solid blue;
}
.column1 {
cursor: pointer;
}
.column2 .details{
display:none;
}
</style>
</head>
<body>
<div>
<table>
<tr row='0'><td class='column1'>Line 0</td></tr>
<tr row='1'><td class='column1'>Line 1</td></tr>
<tr row='2'><td class='column1'>Line 2</td></tr>
<tr row='3'><td class='column1'>Line 3</td></tr>
<tr row='4'><td class='column1'>Line 4</td></tr>
<tr row='5'><td class='column1'>Line 5</td></tr>
<tr row='6'><td class='column1'>Line 6</td></tr>
<tr row='7'><td class='column1'>Line 7</td></tr>
<tr row='8'><td class='column1'>Line 8</td></tr>
<tr row='9'><td class='column1'>Line 9</td></tr>
</table>
</div>
</body>
</html>
So, the script adds the column2 cell, and that stays visible the whole time - instead we show/hide the <span class="details"> within it. I've tested this version in FF 3.6.3 and it behaves as it should!
Oh - and I cleaned up your jQuery selectors for better performance. If you want more info on why, let me know!
I copied and tried your code, on Firefox 3.6.3 and Chrome 5.0.375.29. And saw nothing what you described so I am at loss.
Scrollbar moved only when scrolling normally, not when clicking on the text.
Related
I have this code - executing it always calls a security exception - how to get around it
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body cz-shortcut-listen="true">
<table id="preview-table" style="background-image:url('cat.jpg');background-size:250px;background-repeat:no-repeat;" >
<tbody><tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
</tbody></table>
<img src="" id="image" >
<button id="export">Table Export</button>
<script src="Insert%20title%20here_pliki/jquery.js"></script>
<script type="text/javascript" src="Insert%20title%20here_pliki/tableExport.js"></script>
<script type="text/javascript" src="Insert%20title%20here_pliki/html2canvas.js"></script>
<script type="text/javascript">
$('#export').on('click', function() {
console.log('exporting');
//$('#preview-table').tableExport({type:'png',escape:'false'});
html2canvas($('#preview-table'), {
onrendered: function(canvas) {
img = canvas.toDataURL("image/png");
//var img = canvas.toDataURL("application/octet-stream");
var uri = img.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
//window.open(url);
//saveAs(uri, 'tableExport.png');
//alert(uri);
$("#image").attr("src",uri);
}
});
});
</script>
</body></html>
The point is that ultimately I want to make a table with a background photo or any html to be rendered to the image and to appear as base64 in the tag as the src attribute
Everything is nice and almost would work if it wasn't for this security exception CORS - I don't know how to avoid it
I don't know what element to apply crossOrigin = "anonymous"
I tried to add an img element and use crossorigin for her but that didn't help - which is what I'm doing wrong
Here is a working script, but unfortunately the image is not saved - I don't know how to get around it. The point is that the site will run directly from disk without running it from the server.
https://jsfiddle.net/xfwtma3e/#&togetherjs=cJR1skRMib
The site is supposed to run from disk and replace the table with the background image with a photo (I'll make some extra work later) but I have a problem with the DOM error exception - "Uncaught (in promise) DOMException: The operation is insecure".
I am trying to change button A background color to color 1 when clicked, and at the same time set button B color to color 2.
Same thing for when clicking button B.
The surprising thing is tow blocks code are totally symmetry, but one block work but another one block does not work.
How could it be?
In my main_js:
"function switchVisible_dgc() {
......
var color = '#3e8e41';
$("#dgc_click").css('background-color', color);
color='#325CA8';
$("#agc_click").css('background-color', color);
}
function switchVisible_agc() {
......
var color = '#3e8e41';
$("#agc_click").css('background-color', color);
color='#325CA8';
$("#dgc_click").css('background-color', color);
}
in my html:
<td width="0">
</td>
<td width="250">
<button class="button button5"
onclick="switchVisible_agc()"id="agc_click">Agc</button>
</td>
</td>
<td width="250">
<button class="button button5"
onclick="switchVisible_dgc()"id="dgc_click">Dgc</button>
</td>
</table>`
It might be something like this. You might include jQuery if you want.
It would be better to use CSS classes & dynamically assign them instead of modifying style attribute of elements directly.
Variables in this script are global because some outer closure assumed.
const buttons = document.querySelectorAll(`.button5`);
const switchColors = colors => {
buttons.forEach( (element, index) => {
element.style = `background-color: ${colors[index]}`
});
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
</table>
<td width="250">
<button id="agc_click" class="button button5" onclick="switchColors(['red', 'blue'])">Agc</button>
</td>
<td width="250">
<button id="dgc_click" class="button button5" onclick="switchColors(['green', 'yellow'])">Dgc</button>
</td>
</table>
</body>
</html>
UPD: In case if two pre-determined colors should be switched, the code could also be like:
const buttons = document.querySelectorAll(`.button5`);
const colors = [`#325CA8`, `#3E8E41`];
const switchColors = () => {
colors.reverse();
buttons.forEach( (element, index) => {
element.style = `background-color: ${colors[index]}`
});
};
You can do it simply by using addClass() and removeClass().
$('#agc_click').click(function(){
$('#agc_click, #dgc_click').removeClass('b2');
$('#agc_click, #dgc_click').addClass('b1');
});
$('#dgc_click').click(function(){
$('#dgc_click, #agc_click').removeClass('b2');
$('#dgc_click, #agc_click').addClass('b2');
});
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
table {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.b1 {
background-color: red !important;
}
.b2 {
background-color: blue !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<table>
<tr>
<td>
<button class="button button5" id="agc_click">Agc</button>
</td>
<td>
<button class="button button5" id="dgc_click">Dgc</button>
</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
How can I simplify and consolidate these two click functions into one, and make it scalable for future table row classes? My code works, but it's not very scalable.
See Fiddle: https://jsfiddle.net/49hvfdje/10/
<!DOCTYPE html>
<html>
<head>
<style> .hidden { display: none; } </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.click.a').click(function() {
$('tr.a').toggleClass('hidden'); // toggleClass for A rows
return false;
});
$('a.click.b').click(function() {
$('tr.b').toggleClass('hidden'); // toggleClass for B rows
return false;
});
});
</script>
</head>
<body>
<table>
<tbody>
<tr><td><a class='click a'>Toggle A Rows</a></td></tr>
<tr class='hidden a'><td>Text</td></tr>
<tr class='hidden a'><td>Text</td></tr>
<tr class='hidden a'><td>Text</td></tr>
<tr><td><a class='click b'>Toggle B Rows</a></td></tr>
<tr class='hidden b'><td>Text</td></tr>
<tr class='hidden b'><td>Text</td></tr>
<tr class='hidden b'><td>Text</td></tr>
</tbody>
</table>
</body>
</html>
I refer the following code from stack-overflow itself.but it will not working, anyone can tell what should I update this code.
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
<html>
<head>
<title>Search Event</title>
<script type="text/javascript" src="search.js"></script>
<link href="search.css" rel="stylesheet" type="text/css">
</head>
<body>
<center><input type="text" id="search" placeholder="Type to search"></center>
<center><table id="table">
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table></center>
</body>
</html>
with these simple concept am struggling so far.so please help me.
If i type ap or apple means the correspondent values only should
display other than should hide
Note , not certain if expected result is to toggle td elements ? As js at Question appear to toggle tr elements ? To toggle td elements where text input matches td text, try adding .find("td") before call to .show() to substitute filtering td elements for parent tr elements
If input "app" only td containing text "Apple" should be displayed
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.find("td").show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<html>
<head>
<title>Search Event</title>
<script type="text/javascript" src="search.js"></script>
<link href="search.css" rel="stylesheet" type="text/css">
</head>
<body>
<center><input type="text" id="search" placeholder="Type to search"></center>
<center><table id="table">
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table></center>
</body>
</html>
code is not working because your "search.js" file need jquery
in you code Jquery file missing with jquery it's working fine
it must be
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="search.js"></script>
<link href="search.css" rel="stylesheet" type="text/css">
check this fiddle
Added jquery-1.9.1.js in html..
<head>
<title>Search Event</title>
<script type="text/javascript" src="search.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<link href="search.css" rel="stylesheet" type="text/css">
</head>
Fiddle
So I'm trying to make puzzle pieces appear and disappear using JavaScript, or any other method that doesn't include refreshing the page.
The way that I'm looking to do this, is simply by adding the class "disableMenu" to the table rows(the puzzle pieces are constructed using an HTML table, it's super easy that way).
So basically what I've tried to do, is add IDs to the table rows, and using this JavaScript to try to remove the class from them. It obviously didn't work.
$('table > 1').click(function () {
$(this).toggleClass('disableMenu').siblings().removeClass('disableMenu');
});
$(document).click(function (e) {
if ($(e.target).closest('table').length > 0) return;
$('ul > li').removeClass('disableMenu');
});
That's the JScript that I'm trying to use, and this is my complete HTML document.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet">
<title>Complete the puzzle!</title>
<style>
.disableMenu {
display: none;
}
.merge {
position:absolute;
left: 496px;
top: 5px;
}
.merge0 {
position:absolute;
left:300px;
top:4px;
}
.merge1 {
position:absolute;
top: 218px;
left: 530px;
}
.merge2 {
position:absolute;
top: 218px;
left: 688px;
}
.row1 {
position:absolute;
left: 301px;
top: 208px;
}
.row2 {
position:absolute;
top: 476px;
left: 301px;
margin:0;
}
.row3 {
position:absolute;
top: 495px;
left: 716px;
margin:0;
}
.row4 {
position:absolute;
top: 691px;
left: 300px;
margin:0;
}
</style>
<body style="
">
<script>
$('table > 1').click(function () {
$(this).toggleClass('disableMenu').siblings().removeClass('disableMenu');
});
$(document).click(function (e) {
if ($(e.target).closest('table').length > 0) return;
$('ul > li').removeClass('disableMenu');
});
</script>
<div>
<table id="table" border="0" cellpadding="0" cellspacing="0" align="center">
<tr id="1">
<td>
<img src="1.png" class="merge0">
</td>
<td>
<img id="2" src="6.png" class="merge">
</td>
<td>
</td>
</tr>
<tr>
<td>
<img src="4.png" class="row1">
</td>
<td id="gone">
<img src="2.png" class="merge1 disableMenu">
</td>
<td>
<img src="7.png" class="merge2">
</td>
</tr>
<tr>
<td>
<img src="8.png" class="row2">
</td>
<td>
<img src="5.png" class="row3">
</td>
<td>
<img src="3.png" class="row4 disableMenu">
</td>
</tr>
</table>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</head>
</html>
(Sorry for the size of that code, I didn't know exactly how much of it was relevant).
Any help would be appreciated. Eventually, I'd like it so that when someone visits a URL, it will automatically reveal a puzzle piece. For now though, I just want it to be implemented however is possible.
Thanks in advance!
EDIT: I'm just not going to do it, I'm stumped. Thanks for the effort, though!
Try adding the script tag in the bottom of the body after div ends or add the code in
$(document).ready();