I am trying to have my table rows work as links. I have found a few answers on SO that show how to do it, but for some reason my code is not working. Could anyone help me find what is causing it to not work? Thanks.
I have tried looking at
Making a table row (tr) clickable with jQuery (with an a href link, and hover!?)
and
how to get selected table row values using jquery?
so far.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>X</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
tr {
margin:2px;
padding:10px;
display:block;
background:#EEE;
cursor:pointer;
}
tr:hover {
background:#BBB;
}
</style>
</head>
<body>
<script>
$("tr").click(function() {
window.location.href = $(this).attr("href");
});
</script>
<table class="tbl">
<tr class=clickableRow href="http://www.zombo.com">
<td>2014</td>
<td>ACADIA</td>
<td>SLE-2</td>
</tr><tr class=clickableRow href='http://www.xkcd.com'>
<td>2014</td>
<td>ACADIA</td>
<td>Denali</td>
</tr><tr class=clickableRow href='http://www.legit_url_not_fake_at_all.com'>
<td>2014</td>
<td>ACADIA</td>
....
(SNIP)
Thanks.
Use the Document.ready:
<script>
$(document).ready(function(){
$("tr").click(function() {
window.location.href = $(this).attr("href");
});
});
</script>
Related
I am trying to add a span after dynamically generated table, but the span is getting added before the contents of table are getting loaded.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
dash();
$("button").click(function(){
$("#th").append("<span>span</span>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>
The span is getting added before hello. I want the span to be displayed after the table contents.
The span is being added at the bottom in the dom. You are seeing it before the table because the table is aligned right.Try the following:
$(document).ready(function(){
dash();
$("button").click(function(){
$("#th").append("<span>span</span><br/>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" >
<tr><td>hello</td></tr>
</table>
<br/>
</div>
</body>
</html>
you write something like this $("#hu").after("<span>span</span>");
this will put span after table
Use jQuery after function like the way #Reoxey did. However, please ensure you're adding your script before the </body> tag instead of using it on the <head> tag. Adding Javascript before the </body> tag is recommended to prevents render blocking while the scripts load and is much better for site perception head. Adding Javascript before the </body> tag will also improve the site loading speed.
Hey Manu try this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
dash();
$("button").click(function(){
$("#hu").append("<span>span</span>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>
You should use table id i.e #hu to append as place of #th
Hope this helps. :)
Just change:
$("#th").append("<span>span</span>");
to:
$("table").append("<span>span</span>");
JS Fiddle: http://jsfiddle.net/tk4h80yn/
This will help you
$(document).ready(function(){
dash();
$("button").click(function(){
$("#hu").after("<span>span</span>");
});
});
When i click one of the buttons i want the paragraphs to change size depending on the button i've clicked. That doesn't seem to work. I've checked everything and with my level of knowledge of jQuery (beginner ) i can't figure it out so i need your help. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<input type="button" id="smaller" value="smaller text" />
<input type="button" id="bigger" value="bigger text" />
<p > Some text inside of it.</p>
<p > Some text inside of it too!</p>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="query.js"> </script>
</body>
</html>
jQuery
$('#bigger').click(function() {
$('p').addClass('.bigger');
});
$('#smaller').click(function() {
$('p').addClass('.smaller');
});
CSS
.bigger {
font-size:30px;
background-color:red;
}
.smaller {
font-size:10px;
}
Remove . from addClass() because the function already recognize the string like a class without specifiy the class selector.
try this:
$('#bigger').click(function() {
$('p').addClass('bigger'); //instead of .bigger
});
$('#smaller').click(function() {
$('p').addClass('smaller'); //instead of .smaller
});
DEMO
Remember $.addClass("bigger"); not $.addClass(".bigger");
Demo
http://jsfiddle.net/dieegov/ebGQ2/
I want to show the div with id #flower when clicking on the link with id #button but it doesnt work. Heres is the code i wrote.. i made also a jsbin page to show you
any suggestions?
http://jsbin.com/xefanaji/3/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="front">
<div><p>Button</p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
</body>
</html>
css
#button{
position:relative;
height:30px;
width:60px;
background-color:lightyellow;
left:40px;
top:40px;
}
#flower{
display:none;
position:relative;
top:-600px;
left:50px;
z-index:0;
}
#front {
z-index:1;
position:relative;
top:100px;
height:600px;
width:100%;
background-color:lightblue;
}
if i am not wrong.. you need to add id to your button ,if (<a ..>Button</a>) is the element you are talking about.
<div><p>Button</p></div>
//-^^^^^^^^^^----here
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
with CSS you have, i am sure you forget to add id to that a link
well few more thing,
always load script in your <head> section, and you don't need to add src in script tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
..
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
....
....
<script>
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
Try this
<div id="front">
<div><p><a id="button" href="">Button</a></p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
});
</script>
DEMO
Put the jQuery library in the head section of your document like below
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
If you need button you can use span instead of anchor e.g.
<span class="button">Button</span>
then add a little styling
.button {
font-size: 12px;
color: #333;
}
.button:hover {
color: #ddd;
}
and then put this script just before </body> tag
<script>
$(function() {
$(".button").click(function () {
$("#flower").show("slow");
});
});
</script>
You could use the revised jQuery below to accomplish this, the reason your code isnt working is because your link doesnt have the id button set.
$('#front a:first').on('click',function(e){
e.preventDefault();
$('#flower').show();
})
You are missing id #button for that link.
<a id="button" href="">Button</a>
I have read all the other articles and none seem to have helped.
The page in question is www.projectwhisper.net78.net
When the button is clicked, a row is added.
But if you look carefully, there is a flicker near the bottom of the table.
Here is the HTML of the page:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="/jquery-1.3.2.min.js"></script>
<meta charset="utf-8">
<title>Index</title>
</head>
<body>
<p>Hi There!</p><button id="the_button">Click to add row</button>
<table id="content"><tbody></tbody>
</table>
<script type="text/javascript">
$("#the_button").click(function()
{
var row=$("<tr><td>This is a row</td></tr>");
row.hide()
row.prependTo('table > tbody');
row.slideDown(500);
});
</script>
</body>
</html>
DEMO
Try this
$("#the_button").click(function () {
var row = $("<tr><td>This is a row</td></tr>");
row.prependTo('table > tbody').hide();
row.show(500);
});
Each time the row is added to the top of the table tbody as a stack, since each element is prepended to the table tbody
I am using Cufon and I have my navigation and all of my content is on one page and it is scrolling via anchor tag to that section of the page, yet the navigation stays visible I want when you click a link that link will light up:
Here is what I have so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Veneer_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1 a', {
hover: true
});
</script>
<style type="text/css">
h1 a.selected {
color: red;
}
</style>
</head>
<body>
<div class="home-link"><h1><a class="selected" href="#home">Home</a></h1></div>
<div class="hiw-link"><h1><a class="" href="#howitworks">How It Works</a></h1></div>
<div class="faq-link"><h1><a class="" href="#faq">Faq</a></h1></div>
<div class="prize-link"><h1><a class="" href="#prizes">Prizes</a></h1></div>
<div class="media-link"><h1><a class="" href="#media">Media</a></h1></div>
<div class="rules-link"><h1><a class="" href="#rules">Rules</a></h1></div>
<script type="text/javascript">
$('#home-link','#hiw-link','#faq-link','#prize-link','#media-link','#rules-link').toggleClass(selected, addOrRemove);
</script>
</body>
</html>
So basically as you see I am just trying to add the class of selected to the anchor tag and remove it from everything else so only that link is red. Help is greatly appreciated.
jsBin demo
$('div[class$=link] h1 a').click(function(e){
e.preventDefault();
$('div[class$=link] h1 a').removeClass('selected');
$(this).addClass('selected');
Cufon.refresh(); // Will refresh all `Cufon` text
});
Since you are using Cufon text so you need to call Cufon.refresh(); after you change any class to Cufon text, otherwise it won't take effect.
$('div[class$=link] h1 a').click(function(e){
e.preventDefault();
$('div[class$=link] h1 a').removeClass('selected');
$(this).addClass('selected');
Cufon.refresh(); // Will refresh all `Cufon` text
});
You are using the ID selectors, instead you should be using the class selectors (since you have home-link etc assigned to class attribute and not id attribute of the div elements)
Try this:
var selected = "selected"; //Assuming you are storing it in a variable
$(function(){
var allLinks = $('.home-link,.hiw-link,.faq-link,.prize-link,.media-link,.rules-link');
allLinks.click(function(e){
allLinks.find("h1 > a").removeClass(selected);
$(this).find("h1 > a").addClass(selected);
});
});
JsFiddle: http://jsfiddle.net/JsNBt/1/