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>
Related
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);
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.
how to get Element From an Iframe?
i want when the attribute of an element that its in a frame is true;
it show a text, and else show another text;
(sorry for bad english!)
like that:
<!DOCTYPE html>
<html>
<head>
<title>document</title>
</head>
<body>
<iframe id="frame" src="">
<!--we think in frame there is a span tag with button id-->
<span id="button" aria-passed="true">sss</span>
</iframe>
<br>
<!--if its true-->
<p id="content1" style="display:none;">
true
</p>
<!--if its false-->
<p id="content2" style="display:none;">
false
</p>
<!--now we want that, if aria-passed=true show content1 else content2.-->
<script type="text/javascript">
var Frame = document.getElementById('frame');
if(new RegExp ("true","gim").test(frame.contentWindow.document.getElementById('button').aria-passed="true") == true) {
document.getElementById('content1').style.display="block";
}
else {
document.getElementById('content2').style.display="block";
}
</script>
</body>
</html>
now i want to say why this code does not work????
any ideas?
It's much easier if you use jquery.
Example Code:
var elementattibutevalue = $("#frameID").contents().find("#htmlelementID").attr("SampleAttribute");
Hope it helps. (^_^)
I think the iframe in your code above is just a demonstration of how the loaded page code looks like?
Take a look at this post Javascript - Get element from within an iFrame.
Also change your 'Frame' variable to lowercase.
I'm trying to make it so when I click on a link in a HTML page, it dynamically loads the requested page into a div with jQuery.
How can I do that?
<html>
<head>
<script type="text/javascript">
// what can I do for load any url clicked?
</script>
</head>
<body>
<div id="content"></div>
Page 1<br />
Page 2<br />
Page 3<br />
Page 4<br />
Page 5<br />
Page 6<br />
</body>
</html>
There's a jQuery plugin out there called pjax it states: "It's ajax with real permalinks, page titles, and a working back button that fully degrades."
The plugin uses HTML5 pushState and AJAX to dynamically change pages without a full load. If pushState isn't supported, PJAX performs a full page load, ensuring backwards compatibility.
What pjax does is that it listens on specified page elements such as <a>. Then when the element is invoked, the target page is fetched with either the X-PJAX header, or a specified fragment.
Example:
<script type="text/javascript">
$(document).pjax('a', '#pjax-container');
</script>
Putting this code in the page header will listen on all links in the document and set the element that you are both fetching from the new page and replacing on the current page.
(meaning you want to replace #pjax-container on the current page with #pjax-container from the remote page)
When <a> is invoked, it will fetch the link with the request header X-PJAX and will look for the contents of #pjax-container in the result. If the result is #pjax-container, the container on the current page will be replaced with the new result.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.pjax.js"></script>
<script type="text/javascript">
$(document).pjax('a', '#pjax-container');
</script>
</head>
<body>
<h1>My Site</h1>
<div class="container" id="pjax-container">
Go to next page.
</div>
</body>
</html>
If #pjax-container is not the first element found in the response, PJAX will not recognize the content and perform a full page load on the requested link. To fix this, the server backend code would need to be set to only send #pjax-container.
Example server side code of page2:
//if header X-PJAX == true in request headers, send
<div class="container" id="pjax-container">
Go to next page.
</div>
//else send full page
If you can't change server-side code, then the fragment option is an alternative.
$(document).pjax('a', '#pjax-container', {
fragment: '#pjax-container'
});
Note that fragment is an older pjax option and appears to fetch the child element of requested element.
JQuery load works, but it will strip out javascript and other elements from the source page. This makes sense because you might not want to introduce bad script on your page. I think this is a limitation and since you are doing a whole page and not just a div on the source page, you might not want to use it. (I am not sure about css, but I think it would also get stripped)
In this example, if you put a tag around the body of your source page, it will grab anything in between the tags and won't strip anything out. I wrap my source page with and .
This solution will grab everything between the above delimiters. I feel it is a much more robust solution than a simple load.
var content = $('.contentDiv');
content.load(urlAddress, function (response, status, xhr) {
var fullPageTextAsString = response;
var pageTextBetweenDelimiters = fullPageTextAsString.substring(fullPageTextAsString.indexOf("<jqueryloadmarkerstart />"), fullPageTextAsString.indexOf("<jqueryloadmarkerend />"));
content.html(pageTextBetweenDelimiters);
});
Try with this one:
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
$("#content").load($(this).attr('href'));
});
});
and make sure to call this library first:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
I think this would do it:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".divlink").click(function(){
$("#content").attr("src" , $(this).attr("ref"));
});
});
</script>
</head>
<body>
<iframe id="content"></iframe>
<a href="#" ref="page1.html" class="divlink" >Page 1</a><br />
<a href="#" ref="page2.html" class="divlink" >Page 2</a><br />
<a href="#" ref="page3.html" class="divlink" >Page 3</a><br />
<a href="#" ref="page4.html" class="divlink" >Page 4</a><br />
<a href="#" ref="page5.html" class="divlink" >Page 5</a><br />
<a href="#" ref="page6.html" class="divlink" >Page 6</a><br />
</body>
</html>
By the way if you can avoid Jquery, you can just use the target attribute of <a> element:
<html>
<body>
<iframe id="content" name="content"></iframe>
<a href="page1.html" target="content" >Page 1</a><br />
<a href="page2.html" target="content" >Page 2</a><br />
<a href="page3.html" target="content" >Page 3</a><br />
<a href="page4.html" target="content" >Page 4</a><br />
<a href="page5.html" target="content" >Page 5</a><br />
<a href="page6.html" target="content" >Page 6</a><br />
</body>
</html>
I think you are looking for the Jquery Load function. You would just use that function with an onclick function tied to the a tag or a button if you like.
You can use jQuery's getJSON() or Load(); with the latter, you can reference an existing html file. For more details, see http://www.codeproject.com/Articles/661782/Three-Ways-to-Dynamically-Load-HTML-Content-into-a
You can through option
Try this with some modifications
<div trbidi="on">
<script type="text/javascript">
function MostrarVideo(idYouTube)
{
var contenedor = document.getElementById('divInnerVideo');
if(idYouTube == '')
{contenedor.innerHTML = '';
} else{
var url = idYouTube;
contenedor.innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/'+ url +'" frameborder="0" allowfullscreen></iframe>';
}
}
</script>
<select onchange="MostrarVideo(this.value);">
<option selected disabled>please selected </option>
<option value="qycqF1CWcXg">test1</option>
<option value="hniPHaBgvWk">test2</option>
<option value="bOQA33VNo7w">test3</option>
</select>
<div id="divInnerVideo">
</div>
If you want to put a default page placed inside id="divInnerVideo"
example:
<div id="divInnerVideo">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/pES8SezkV8w?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>