My goal is to have a clickable button/link to scroll to a certain position in a page. I have referenced from this answer by Michael Whinfrey, the code works perfectly on fiddle but not on mine.
This may be a bit messy but I have multiple GridViews in a table, and some td has div and some don't. Also in the code behind I have the following code in Page_load.
Page.MaintainScrollPositionOnPostBack = false;
Below is my aspx page simplified.
<html>
<head>
<script type="text/javascript">
function scrollTo(name) {
ScrollToResolver(document.getElementById(name));
}
function ScrollToResolver(elem) {
var jump = parseInt(elem.getBoundingClientRect().top * .2);
document.body.scrollTop += jump;
document.documentElement.scrollTop += jump;
if (!elem.lastjump || elem.lastjump > Math.abs(jump)) {
elem.lastjump = Math.abs(jump);
setTimeout(function () { ScrollToResolver(elem); }, "100");
} else {
elem.lastjump = null;
}
}
</script>
</head>
<body>
.......some input/textbox......
<button onclick="scrollTo('divDesignation')">TEST</button>
<div>
<table>
<tr>
<td>
<asp:GridView id="gv1" .....>
......the whole table has 6~7 rows of GridView data that is not displaying here.....
<tr>
<td>
<div id="divDesignation" runat="server" style="max-height:600px; overflow-y:auto;">
<asp:GridView id="gvDesignation" ......
</div>
</td>
</tr>
</body>
</html>
I am trying to scroll to the divDesignation when click the button but it simply will not.
Any help is appreciated.
Related
I am creating a table with div's that already have a background image in them. The classes are "sw", "sl", "so", "sa", "sn", and "su". I made that you could click on the div's and to the right will show the information for that div.
However, I tried adding a hover element to these div's, which work when I do not add the onclick function. With the onclick function, there is no hover that changes the div into a different background image. The background image stays the same when I click on a certain div.
How can you make the background image change when you click on the div?
Here is my HTML code:
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td><div class="sw" onclick="show(0)"></div></td>
<td><div class="sl" onclick="show(1)"></div></td>
<td id="info" rowspan="3" style="width:325px;"></td>
</tr>
<tr>
<td><div class="so" onclick="show(2)"></div></td>
<td><div class="sa" onclick="show(3)"></div></td>
</tr>
<tr>
<td><div class="sn" onclick="show(4)"></div></td>
<td><div class="su" onclick="show(5)"></div></td>
</tr>
</table>
And here is my JavaScript code:
function show(num) {
var outputInfo = "";
if(num == 0) {
outputInfo += 'INFO HERE';
}
else if(num == 1) {
outputInfo += 'INFO HERE';
}
...
document.getElementById("info").innerHTML = outputInfo;
}
Oh, and by the way, my background images are used on the CSS portion and all of the classes above share the same image but they were assigned different positions.
Is there a way to show the images as separate backgrounds if another approach to clicking on a div?
Instead of using onclick, maybe try using something Tomm did. I probably encourage you to create a class for all of these id elements. Since you had a shared background image for the original background before the function is clicked, I added background-position. Here is what I did for the script by making a function that I put in the onload of the body (first portion is for backgrounds when clicked, second portion is for original background and will only show for those that are not clicked):
function onloadPage() {
// first portion
$('#sw').click(function() {
$(this).css("background-position", "0 0");
document.getElementById("info").innerHTML = 'INFO HERE';
});
$('#sl').click(function() {
$(this).css("background-position", "0 0");
document.getElementById("info").innerHTML = 'INFO HERE';
});
...
// second portion
$('.classname').on('click', function(e) {
if(!$(e.target).closest('#sw').length) { $('#sw').css("background-position", '0 0'); }
if(!$(e.target).closest('#sl').length) { $('#sl').css("background-position", '0 0'); }
...
}
And then the HTML:
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td><div class="classname" id="sw" style="background-position:0 0;"></div></td>
<td><div class="classname" id="sl"></div></td>
<td id="classinfo" rowspan="3" style="width:325px;"></td>
</tr>
</table>
Obviously you will have to adjust your background-positions to the way you need it to look.
Well, your code should looks like:
document.getElementById("info").style.backgroundImage = "url('image.png')";
here I am assuming that info is the id of the div which you want to change background.
This snippet should do. I've linked a couple of random images so you can test it.
By clicking on the div, the info is displayed on the right and that div's background gets updated. By passing the 'this' keyword as argument of the show method you can avoid logics that depend on the div's id.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
.sw{
background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}
.sl{
background-image: url("https://mdn.mozillademos.org/files/7693/catfront.png");
}
</style>
<script>
function show(num, t) {
var outputInfo = "";
if(num == 0) {
outputInfo += 'This is the information about the image now displayed in div0';
var newUrl='url("http://www.librosweb.es/website/css/images/logo.gif")';
t.style.backgroundImage= newUrl;
}
else if(num == 1) {
outputInfo += 'This is the information about the image now displayed in div1' ;
var newUrl='url("http://www.librosweb.es/website/css/images/logo.gif")';
t.style.backgroundImage= newUrl;
}
document.getElementById("info").innerHTML = outputInfo;
}
</script>
<table width="100%" cellpadding="0" cellspacing="0" >
<tr>
<td style="border: 1px solid red"><div class="sw" onclick="show(0, this)"></div></td>
<td style="border: 1px solid red"><div class="sl" onclick="show(1, this)"></div></td>
<td style="border: 1px solid red" id="info" rowspan="3" style="width:325px;"></td>
</tr>
</table>
</body>
</html>
You can make a simple onclick function in javascript/jQuery ( I use this code with jQuery 1.7.1 ) like the following:
$('#changeMe').on('click', function() {
$('#changeMe').css('background-image', 'url(urlhere)');
})
Where #changeMe is the div id
$('#changeMe').on('click', function() {
$('#changeMe').css('background-image', 'url(http://firefoxzeneize.altervista.org/FirefoxLogo.png)');
})
div{
width : 512px;
height : 512px;
background-image : url("https://www.notebookcheck.net/fileadmin/Notebooks/News/_nc3/20170911_Google_Chrome_logo_vector_download.png");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="changeMe"></div>
I am a bit stuck and was wondering if anyone could please help me? I am developing a website that has colResizable JQuery plugin incorporated into it. The plugin is all good and brilliant -its just that I need to have a button that once selected makes the middle row of the colResizable table have a display of none with the custom anchors (relating only to that table row) also having a display of none. And once the button is selected, it is replaced with a button that has 'show', then once that is selected the middle row of the colResizable table appears and the custom anchors of that row also appear. Here is the code that I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<title>colResizable demo</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="js/jquery.js"></script>
<script src="js/colResizable-1.5.min.js"></script>
<script type="text/javascript">
$(function(){
var onTableCreated = function(){
$("#updatePanelSample").colResizable({
liveDrag:true,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging",
postbackSafe:true,
fixed:false,
partialRefresh:true,
});
}
var fakePostback = function(){
$("#updatePanel").html('<img src="img/loading.gif"/>');
setTimeout(function(){
$("#updatePanel").html('<table id="updatePanelSample" width="500" border="0" cellpadding="0" cellspacing="0"> <tbody><tr> <th>header</th><th>header</th><th>header</th> </tr> <tr> <td class="left">cell</td><td>cell</td><td class="right">cell</td> </tr> <tr> <td class="left">cell</td><td>cell</td><td class="right">cell</td> </tr> <tr> <td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td> </tr> </tbody></table>');
onPostbackOver();
}, 700);
};
var onPostbackOver = function(){
onTableCreated();
};
$("#postback").click(fakePostback);
onTableCreated();
});
</script>
<script type="text/javascript">
function hide_cells(){
document.getElementById("get_cells").style.display = "none";
document.getElementById("get_cells2").style.display = "none";
document.getElementById("get_cells3").style.display = "none";
document.getElementById("get_cells4").style.display = "none";
document.getElementById("change_to_show").innerHTML = "<button onClick='show_cells()' >Show</button >";
}
function show_cells(){
document.getElementById("get_cells").style.display = "inline";
document.getElementById("get_cells2").style.display = "inline";
document.getElementById("get_cells3").style.display = "inline";
document.getElementById("get_cells4").style.display = "inline";
document.getElementById("change_to_show").innerHTML = "<button onClick='hide_cells()' >Hide</button >";
}
</script>
</head>
<body>
<div class="center" >
<br/><br/>
<div id="change_to_show"><button onClick="hide_cells()" >Hide</button ></div>
<div id="updatePanel">
<table id="updatePanelSample" width="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>header</th><th id="get_cells">header2</th><th>header3</th>
</tr>
<tr>
<td class="left">cell</td><td id="get_cells2">cell</td><td class="right">cell</td>
</tr>
<tr>
<td class="left">cell</td><td id="get_cells3">cell</td><td class="right">cell</td>
</tr>
<tr>
<td class="left bottom">cell</td><td id="get_cells4" class="bottom">cell</td><td class="bottom right">cell</td>
</tr>
</table>
</div>
<br/>
<br/><br/>
</div>
</body>
</html>
Here is the link to the colResizable website: http://www.bacubacu.com/colresizable/
Thanks - any help is highly appreciated!
Updates - I have included some additional information below in order to illustrate what I mean more clearly:
Here is the table and the button that I am working with:
Here is what I mean by the custom anchor:
Here is what happens when I click the 'hide' button that has the 'hide_cell()' function incorporated into it via an onClick:
Notice that even though the the middle column ('header2') disappeared, the custom anchor relating to that column remains, and the other anchor is not in the correct position.
I was wondering if anyone could please help with this problem I am facing? Thanks :) Here's the link to the colResizable plugin site:http://www.bacubacu.com/colresizable/
Cells are not inline displayed. You must to change to table-cell:
document.getElementById("get_cells4").style.display = "table-cell";
There are this values for display in tables:
table > applied to <table> tag
table-row > applied to <tr> tag
table-cell > applied to <td> tag
Learn more:
http://www.w3schools.com/cssref/pr_class_display.asp
Good luck!
I think I figured it out - I needed to find the child [1] of the JCLRgrip. Then change it via the JavaScript to have a display of none, as illustrated below:
<script type="text/javascript">
function hide_cells(){
document.getElementById("get_cells").style.display = "none";
document.getElementById("get_cells2").style.display = "none";
document.getElementById("get_cells3").style.display = "none";
document.getElementById("get_cells4").style.display = "none";
document.getElementById("change_to_show").innerHTML = "<button onClick='show_cells()' >Show</button >";
document.getElementsByClassName("JCLRgrip")[1].style.display = "none";
document.getElementsByClassName("JCLRgrip")[2].style.display = "none";
}
function show_cells(){
document.getElementById("get_cells").style.display = "table-cell";
document.getElementById("get_cells2").style.display = "table-cell";
document.getElementById("get_cells3").style.display = "table-cell";
document.getElementById("get_cells4").style.display = "table-cell";
document.getElementById("change_to_show").innerHTML = "<button onClick='hide_cells()' >Hide</button >";
}
</script>
before any DOM manipulation you have to call colresizable with the param "disable" set to true.
disable: [type: boolean] [default: false] [version: 1.0]
When set to true it aims to remove all previously added enhancements such as events and additional DOM elements assigned by this plugin to a single or collection of tables. It is required to disable a previously colResized table prior its removal from the document object tree using JavaScript, and also before any DOM manipulations to an already colResized table such as adding columns, rows, etc.
so your code will be something like this
var onHideColumn = function(){
$("#updatePanelSample").colResizable({disable:true}); //disable colresizable
hide_cells(); //remove columns, or whatever
$("#updatePanelSample").colResizable(); //enable it again
}
There is a sample included in the version released for colResizable 1.6, you can download it from github or from the official website
I want the href to be disabled after 1 click, can it be done using javascript or jquery?
Please help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns ="http://www.w3.org 1999 xhtml" xml :lang="en">
<head>
<style>
a:link{
color:#1DAAA1;
}
a:visited{
color:green;
}
a:hover{
background: #ff0000;
color: #FFF;
}
</style>
</head>
<body>
<table width="500" align="center" border="5px solid">
<tr align="center" >
<td> Google </td>
<td> Yahoo </td>
<td> Bing </td>
<td> Wikipedia </td>
<td> Facebook </td>
</tr>
</table>
</body>
</html>
Pure javascript solution:
<script>
function clickAndDisable(link) {
// disable subsequent clicks
link.onclick = function(event) {
event.preventDefault();
}
}
</script>
Click here
This is simpler approach using jQuery that prevents links double clicking: no onclick attributes, id isn't required, no href removing.
$("a").click(function (event) {
if ($(this).hasClass("disabled")) {
event.preventDefault();
}
$(this).addClass("disabled");
});
Tip: you can use any selector (like button, input[type='submit'], etc.) and it will work.
just try this....
a:visited {
color:green;
pointer-events: none;
cursor: default;
}
Pure JavaScript solution to allow user to follow the URL only once:
<a id="elementId"
href="www.example.com"
onclick="setTimeout(function(){document.getElementById('elementId').removeAttribute('href');}, 1);"
>Clik and forget</a>
Once clicked, this will remove the href attribute (with 1 ms wait to allow the original action to start) making the link silent. Similar as suggested by Dineshkani, but the original answer caused action to not to start at all on some browsers.
this time i tried it with Javascript... hope it will help u:) just call the below function in "onclick()" of the required href tags...
function check(link) {
if (link.className != "visited") {
//alert("new");
link.className = "visited";
return true;
}
//alert("old");
return false;
}
like link here
and see demo here
You can do with jquery
<a href='http://somepage.com' id='get' onlick='$("#"+this.id).attr("href","")'>Something to be go </a>
Or with the javascript
<a href='http://somepage.com' id='get' onlick='document.getElementById(this.id).removeAttribute("href");'>Something to be go </a>
Based on Ayyappan Sekar's answer, I have just done something very similar using jQuery:
$('#yourId').click(function (e) {
if(!$(this).hasClass('visited'))
{
$(this).addClass('visited')
return true;
}
else
{
$(this).removeAttr("href"); // optional
// some other code here
return false;
}
});
duplicate the same div in html and css, the duplicated one must be below the original one using: z-index=-1 or/and position:absolute.
make the original div onclick="HideMe(this)"
JS:
<script type="text/javascript">
function HideMe(element){
element.style.display='none';
}
</script>
it might be not the best way, but 100% goal achievable.
I want to leave here an example that works with Knockout.js that I used with IFrame, but as IFrame doesnt work with local files, I made this example with divs.
When you click the link, the function is called, as you can see with the alert()commented inside, but when you dial something in the input dialog and click again the link, the div is not updated by the Knockout.js, only if you click the other link that calls the same function but with diferent parameter.
<html>
<head>
<script type="text/javascript" src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
</head>
<body>
<div>
Page 2
</div>
<div>
Page 3
</div>
<div data-bind="bindHTML: dados"></div>
<script type="text/javascript">
function myPage2(nPage) {
var cPage = '<div>Pagina 2</div>';
if (nPage == 3) { cPage = '<div>Pagina 3</div>' }
cPage += '<input type="text" id="fname" name="fname">';
//alert('clicked!');
return cPage
}
var viewModel = {
dados : ko.observable()
}
ko.bindingHandlers.bindHTML = {
init: function () {
// Prevent binding on the dynamically-injected HTML (as developers are unlikely to expect that, and it has security implications)
return { 'controlsDescendantBindings': true };
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// setHtml will unwrap the value if needed
ko.utils.setHtml(element, valueAccessor());
var elementsToAdd = element.children;
for (var i = 0; i < elementsToAdd.length; i++) {
ko.cleanNode(elementsToAdd[i]); //Clean node from Knockout bindings
ko.applyBindings(bindingContext, elementsToAdd[i]);
}
}
};
ko.applyBindings(viewModel);
viewModel.dados(myPage2(2));
function fAlter(nPage) {
viewModel.dados(myPage2(nPage));
}
</script>
</body>
</html>
jQuery solution:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns ="http://www.w3.org 1999 xhtml" xml :lang="en">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function check(link) {
$(link).replaceWith($(link).text());
}
</script>
<style>
a:link{
color:#1DAAA1;
}
a:visited{
color:green;
}
a:hover{
background: #ff0000;
color: #FFF;
}
</style>
</head>
<body>
<table width="500" align="center" border="5px solid">
<tr align="center" >
<td> Google </td>
<td> Yahoo </td>
<td> Bing </td>
<td> Wikipedia </td>
</tr>
</table>
</body>
</html>
I have a blog at Blogger.com and I want to add a Scroll Triggered Box like Dreamgrow or Qoate Scroll Triggered Box of Wordpress. I referred Scroll Triggered Box with jQuery. I have created a HTML file and testing it but this is not working for me. May be I have mistaken somewhere. My coding is
<html>
<head>
<title>Scroll Triggered Box With jQuery</title>
<style type="text/css">
.Comments
{
font:georgia;
display:none;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {
var y = $(window).scrollTop();
var c = $('#comments').offset();
if (y > (c.top - $(window).height())) {
$('#the_box').fadeIn("slow");
} else {
$('#the_box').fadeOut('slow');
}
});
});
</script>
<div>
<!--My long post here-->
</div>
<div class="Comments" id="the_box">
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments</br>
This is the DIV that triggers I scroll down to Comments
</div>
</body>
</html>
I am little weak in jScript. I don't know how jScript works.
How can I resolve my issue and get this working in my Blogger.com blog?
i can tell your code is haywire.
var a =$(window).height();
var num = c-y;
if (y > num){
do your function
}else{
do whatever
}
This should be easy but it's not working properly... I am quite rusty on javascript and can't figure out what it is I am missing.
I have a navbar that I'd like to disappear when person clicks on small arrow, leaving just a 2nd arrow. When user clicks on 2nd arrow, nav bar reappears. All of the navbar is in one tag. The nav menu itself is quite long, one reason, I want to give user ability to toggle it on and off.
Javascript function in head is as follows:
<script type="text/javascript">
function collapseMenu()
{document.getElementById("navbar").innerHTML ='<td id=navbar2><img src="arrow.gif"></td>';
}</script>
Text on page is:
<div id='navbar'>
<td>
<img src="arrow.gif">
</td>
</div>
Placing id in the div tag, it shows the arrow when you click on the link but doesn't remove the old html between the div tags. Same thing using span instead of div and no difference between single and double quotes. When I move the id="navbar" to the tag, the nav bar does disappear but it leaves the background color unchanged for the size of the old td tag. I would like it to go blank except for tiny arrow. So question 1 is why are div and span not working, or alternatively, td leaving background color in old space.
2nd question is how to specify innerHTM in text through a variable. It would be nice not to have to put this all in function in header.
Thanks for any ideas!
Don't know what a jsfiddle is but following code reproduces problem if put in .htm file. Thx.
<html>
<head>
<script type="text/javascript">
function hideBar()
{document.getElementById("navbar").innerHTML ='<td>show navbar</td>';
}</script>
<script type="text/javascript">
function hideBar2()
{document.getElementById("navbar2").innerHTML ='<td>show navbar</td>';
}</script>
</head>
<body>
<table width=500>
id in td tag
<tr>
<td rowspan=3 bgcolor="yellow" id="navbar">
<a href="javascript:void(0)" onclick="hideBar('navbar');">hide
menu</a><br>menu1<br>menu2<br>menu3<br>menu4
</td>
</tr>
<tr><td>lots of content here<br>more content<br>more content<br>more<br>blah<br>blah<br>blah</td>
</tr>
</table>
<table width=500>
id in div tag
<tr>
<div id="navbar2">
<td rowspan=3 bgcolor="yellow">
<a href="javascript:void(0)" onclick="hideBar2('navbar2');">hide
menu</a><br>menu1<br>menu2<br>menu3<br>menu4
</td></div>
</tr>
<tr><td>lots of content here<br>more content<br>more content<br>more<br>blah<br>blah<br>blah</td>
</tr>
</table>
</body>
</html>
Following leaves one line of background expand gif. Moving the gif outside the div throws off cell alignment. Realize that tables are no longer considered best practice but redoing table structure of whole site would be large undertaking.
<html>
<head>
<script type="text/javascript">
function toggleBar(obj) {
var navbar = document.getElementById("navbar");
if (navbar.style.display == "none") {
navbar.style.display = "";
obj.innerHTML = "<img src='images/collapse.gif' alt='Hide Menu'>";
} else {
navbar.style.display = "none";
obj.innerHTML = "<img src='images/expand.gif' alt='Show Menu'>";
}
}
</script>
</head>
<body>
<body><table><tr><td valign="top">
<div style="background-color:lightgrey;text-align:left;padding-left:4px;width:80px;">
<a href="javascript:void(0)" onclick="toggleBar(this);"><img src="images/collapse.gif"
alt="Hide Menu"></a>
<div id="navbar">menu1<br>menu2<br>menu3<br>menu4</div>
</div>
<td valign="top"><table><tr style="background-color:blue;"><td><font
color="white">Title</font></td></tr>
<tr><td>Body Text</td></tr></table>
</body>