I am making a random quote generator. But I am not able to share it via twitter. I am getting a twitter page but the text box for the tweet is empty.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="div1">
<p id="quote"></p>
<p id="author"></p>
<button id="btn">getquote</button>
<div>
<a href="https://twitter.com/intent/tweet" target="_blank">
<button type="button" id="twitter-share-button">tweet</button>
</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Here is my Javascript code
var url1="http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?";
//var url1=" http://date.jsontest.com/";
var getQuote=function(data){
//console.log(data);
var quot="https://twitter.com/intent/tweet?text=" + data.quoteText+data.quoteAuthor;
console.log(quot);
$('#quote').text(data.quoteText);
$('#author').text(data.quoteAuthor);
$('#twitter-share-button').attr("href", quot);
};
$(document).ready(function(){
$.getJSON(url1,getQuote,'jsonp');
});
$("#btn").on("click",function(){
$.getJSON(url1,getQuote,'jsonp');
});
I get the quote randomly but clicking on tweet button in my code doesnt change the href using .attr in Jquery. Am I doing it correctly?
I don't know if I'm just missing something, but it looks like you are trying to change the href attribute of the button, but the button doesn't have a href attribute (and probably shouldn't).
$('#twitter-share-button').attr("href", quot);
Instead you want to do
$('#twitter-share-anchor').attr("href", quot);
And give the actual anchor the id:
<a id="twitter-share-anchor" href="https://twitter.com/intent/tweet" target="_blank">
You're applying the href to the button, instead of its containing <a>. Because the <a> is the direct parent of your button, you can easily just change your $('#twitter-share-button').attr("href", quot); line to include a .parent(), like so:
$('#twitter-share-button').parent().attr("href", quot);
Related
Hey guys I'm trying to get the following to work...
demo_test.txt to load into the "div1" container
only have a href id "test" to trigger it
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("test").click(function() {
$("#div1").load("demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div1">
<h2>Let jQuery AJAX Change This Text</h2>
</div>
<a id="test" href="#">Get External Content</a>
<br>
<a id="google" href="http://www.google.com/">Google</a>
</body>
</html>
Currently it doesn't run, but if I remove the Google line, it works. Is there something else I'm missing? Thanks!
Change your jQuery click handler to this:
$("#test").click(function() {
I've added a # in front of test to properly select your anchor tag.
<!DOCTYPE html>
<html>
<head>
<title> Cookie Clicker! </title>
<script type="text/javascript">
var logAt=function(id,message){
document.getElementById(id).innerHTML=message;
};
</script>
</head>
<body>
<h1> Cookie Clicker </h1>
<p> Keep collecting cookies and start your very own sweet empire!</p>
<p>
<div id="cookiesPerSecond"> </div>
<button type="button" onClick="getCookie()"><img src="http://thinkprogress.org/politics/2011/04/26/161276/penn-parents-cookies-cuts/" alt="Cookie"
style="width:304px;height:228px"></button>
<h3 id="cookies">Cookies:0 </h3>
</p>
<script type="text/javascript">
var cookies=0;
var cookiesPerSecond=0;
function getCookie(){
cookies+=1;
logAt("cookies","Cookies:"+cookies);
};
</script>
</body>
</html>
My image inside of the button is not displaying, and defaults to the "alt". I am programming this on notepad, and am opening it in chrome. What should I do to make it work?
What you linked is not a link to a direct image. You need to link directly to an image. This is the link you need to change:
<img src="http://thinkprogress.org/politics/2011/04/26/161276/penn-parents-cookies-cuts/"
Change it to this:
<img src="http://d35brb9zkkbdsd.cloudfront.net/wp-content/uploads/2011/04/cookie.gif"
Also, like User Roko C. Bulijan said, you need to use CSS to make it a background-image or it won't show up.
I've been trying to use coin slider to add it to my web page but I've not been able to see any of the images that I've been trying to add, the problem is that it only shows the description messages, the images appear blank... I would really appreciate your help on this, thank you
This is the code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Altius Coaching</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="css/coin-slider.min.js"></script>
<link rel="stylesheet" href="css/coin-slider-styles.css" type="text/css" />
</head>
<body>
<div id="coin-slider">
<a>
<img src='ALTIUS COACHING.jpg' >
<span>
Description for img01
</span>
</a>
<a>
<img src='ALTIUS MEDICAL.jpg' >
<span>
Description for imgN
</span>
</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 560, height:300, navigation: true, delay: 5000 });
});
</script>
</body>
</html>
does "ALTIUS COACHING.jpg" exist on the server? Is it the correct cAsE depending on the server? If all else fails, try removing the space from your html and the filename (or changing it to %20) and try again. According to your source, "ALTIUS COACHING.jpg" exists in the same folder as the html file we're viewing, is this correct?
Can you show us the broken page "live" somewhere?
Seems my question is too difficult or I am unable to explain my issue properly!!
I am using barelyfitz tabifier.
My html is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Simple Tabber Example</title>
<script type="text/javascript" src="tabber.js"></script>
<link rel="stylesheet" href="example.css" TYPE="text/css" MEDIA="screen">
<link rel="stylesheet" href="example-print.css" TYPE="text/css" MEDIA="print">
<script type="text/javascript">
/* Optional: Temporarily hide the "tabber" class so it does not "flash"
on the page as plain HTML. After tabber runs, the class is changed
to "tabberlive" and it will appear. */
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function loadDetails()
{
alert("here");
document.getElementById('myTab').tabber.tabShow(1);
alert("not here");
}
</script>
</head>
<body>
<h1>Tabber Example</h1>
<div class="tabber" id="myTab">
<div class="tabbertab">
<h2>Tab 1</h2>
<A href="#" onclick="loadDetails()";>Banana</A>
</div>
<div class="tabbertabhide">
<h2>Tab 4</h2>
<p>Tab 4 content.</p>
</div>
</div>
</body>
</html>
As clear, tab 4 is initially hidden as its class is tabbertabhide.
And tab 1 is having a text banana with onclick reference to loadDetails method.
What I want to do is, on clicking banana, I want tab 4 to become visible.
However, document.getElementById line in loadDetails method does not have any effect.
Can any one please help me with this specific technical issue!!
Below is the same issue I asked before in a generalized manner!!
Issue:
I have a webapplication with a search form on the index page which searches for fruits.
Based on the search criteria entered, the result will have a list of fruits. Each member of this will have a call back link to a javascript function. Something like:
<html>
<head>
<script type="text/javascript">
//Function to load further details on fruits
function loadDetails(){
//this will do a call back to server and will fetch details in a transfer object
}
</script>
</head>
<body>
<form method="post">
<A href="#" onclick="loadDetails('banana')";>Banana</A>
<A href="#" onclick="loadDetails('apple')";>Apple</A>
</form>
</body>
</html>
Now my issue is, I want to show the details on a tab which gets generated in a loadDetails function.
Something in the lines of www.barelyfitz.com/projects/tabber/
But dynamic tab generation on the onclick event in the content of first tab.
In other words, first tab will have the clickable list of fruits and on clicking a fruit, a new tab will get opened with more details on that fruit fetched from database.
Is it possible using simple javascript ??
Also, is it possible to do this in jquery without AJAX. I can not use ajax.
I am extremely extremely new to javascript. So I dont know how well am able to describe my question. But have tried my best.
Hope to get some help!!
Can you post this on a fiddle?
Also try the jQuery way of doing it which would be:
function loadDetails()
{
$('.tabbertabhide').show(); //make it appear without any animation OR
$('.tabbertabhide').fadeIn(); //make it to fade in.
}
The above code uses a class selector- in this case your selecting the items with class "tabbertabhide" and making them appear. Similarly you could also use an ID selector if you wanted.
If a webpage has a base href, is there anyway to ignore it when we're using #ElementId, without refreshing the page?
Here's some code:
<html>
<head>
<base href="http://www.google.com/" />
</head>
<body>
<div id="test">
Test
</div>
<button onclick="location.href='#test'">Back to Test</button>
Back to Test!
</body>
</html>
When I click on either the button or the link, I want the browser to bring the page to div#test. Without the base href tag, everything works - However, with the base-href tag, I can't do it without the help of Javascript. Is there a way to do it in a more "natural" way?
Below's a workaround that I have at the moment...
<html>
<head>
<base href="http://www.google.com/" />
<script type="text/javascript">
function goToElement(elementId) {
var baseTag = document.getElementsByTagName("base")[0];
var existingBaseHref = baseTag.href;
baseTag.href = "";
location.href = "#" + elementId;
baseTag.href = existingBaseHref;
}
</script>
</head>
<body>
<div id="test">
Test
</div>
<button onclick="goToElement('test')">Back to Test</button>
<a onclick="goToElement('test')">Back to Test!</a>
</body>
</html>
This will scroll to the element with id="test" and the return false will make it stay on the page.
Go to div with id=test
It does not seem to be possible to do what you want without either using script or addIng the full path to the href on the server
You might just have to output the full absolute URL in your link's href attribute.
For example, you could do something like this in ASP.NET (using the AntiXss library):
<a href="<%= AntiXss.HtmlAttributeEncode(Request.Url.AbsoluteUri) %>#test">
Link text...
</a>
Or something like this in PHP:
<a href="<?php echo htmlentities($_SERVER['REQUEST_URI'], ENT_QUOTES, 'ISO-8859-1'); ?>#test">
Link text...
</a>
I had a similar issue when using . This was my solution that worked on interior pages, for example www.mozilla.org/about
<div>
<p>Content...</p>
<div id="target">
Target Div
</div>
</div>