I have integrated a Twitter feed into a website, if the end location (presumably http://twitter.com/something) cannot be reached, the feed does not display. This is ideal, however I have a title div placed directly above the feed which remains visible regardless of whether the feed is displayed on the page or not.
Is it possible to prevent the div (#title) from displaying if a URL cannot be reached? I've found JavaScript snippets which look to hide a div based on the URL of the file being viewed, but this doesn't seem to work in my situation.
HTML:
<div id="title">
<h3>Latest Tweets</h3>
</div>
<div id="twitter_update_list">
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">
</script>
<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline/SW_Trains.json?callback=twitterCallback2&count=3">
</script>
</div>
Many thanks in advance. I understand that this may not be possible with JS.
Use this.
<div id="title" style="display:none;">
<h3>Latest Tweets</h3>
</div>
<div id="twitter_update_list">
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">
</script>
<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline/SW_Trains.json?callback=twitterCallback2&count=3">
</script>
</div>
<script type="text/javascript">
window.onload = function(){
var tdata = jQuery('#twitter_update_list').html().length;
if(tdata > 0)
{
jQuery('#title').css('display','block');
}
else
{
jQuery('#title').css('display','none');
}
}
</script>
May be it helps to you.
Maybe sth like
var divContent = document.getElementById('twitter_update_list');
if (NOT divContent) {
//no content detected
document.getElementById('title').style.visibility = 'hidden';
}
This is untested and I don't know if it works. You will have to create a function which will be executed when the page has completely loaded. Maybe sth like:
window.onload = function(){
// your code...
};
After load make a function that tests the content of the div that would hold the content. If is empty just hide whatever you need to hide.
Related
I have been working on making a shrinking header with javascript, and while I have this jsfiddle working exactly how I want it, I can't seem to get it to work outside of the fiddle.
What is wrong with this html?
<body>
<div id='sizeShifter'>
Here is my website's header
</div>
<div id='spacer'></div>
<div id='content'>
Here is my website's content
</div>
<script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>
<script>
var divToChange = $('#sizeShifter');
var lastScroll = 0;
$(document).scroll(function(event){
var st = $(this).scrollTop();
var divHeight = 400-st;
divToChange.css({height:divHeight});
});
</script>
</body>
</html>
I can see few issues in your code.
You didn't add CSS file, which is present in fiddle.
jquery-2.1.3.min.js file might not be at correct location. BTW, it is preferred we use jquery from http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js or http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js, unless you have modified version of jquery.
If you can fix them, your code should work :)
I really cannot understand why this does not work. I've tried couple of tricks but I just don't get it.
<html>
<head>
<script type="text/javascript">
alert('Hey');
var vText = document.getElementById("results");
vText.innerHTML = 'Changed';
alert(vText.innerHTML);
</script>
</head>
<body>
<div id="results">
hey there
</div>
</body>
</html>
This is working as you can see here:
http://jsfiddle.net/gHbss/
It's important that you put the JavaScript after your HTML div container.
The problem that you're facing is that the browser runs the JavaScript as it's encountered when rendering/processing the page. At this point it will alert() your message, but the relevant element, the #results div isn't present in the DOM, so nothing can be changed.
To address this, you can either place the script at the end of the page, just before the closing </body> tag, or run the code in the onload event of the body or window.
The script has to be placed after the div#results or executed onload, otherwise the element is still unknown when you try to access it.
You need to call this script in onload event
i.e
window.onload=function(){
//your code
}
<html>
<head>
<script type="text/javascript">
function onloadCall()
{
alert('Hey');
var vText = document.getElementById("results");
vText.innerHTML = 'Changed';
alert(vText.innerHTML);
}
</script>
</head>
<body onload="onloadCall()">
<div id="results">
hey there
</div>
</body>
</html>
Hope the above snippet shows you the fix
I have a master page Root.master and a page default.aspx . I want to display progress bar until whole default.aspx page is loaded .
I tried following code:-
<html>
<head><title>xx</title>
</head>
<body style="visibility:hidden;" onload="function(){document.body.visibility='visible'}">
<img src="xxxx.gif" style="visibility:visible !important">
</body>
</html>
But problem is that I do not have body on default.aspx , it is on root.master , if we put it on root.master, it apply all pages which inherit from root.master .
So there is another for it .
Please suggest me usable link or samples.
in your sample if you are using jQuery, you can use following re-factoring to your code
$(document).load(function(){
$('body').css('visibility','visible');
}
You can add a reference to jQuery and then do a little code something like:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(){ // Wait until the page has finished loading
if ($(".ProgressBar")) // Detect the element with class ProgressBar
{
$(".ProgressBar").hide(); // If found, set it to be display:none;
}
}
</script>
</head>
<body>
<div class="ProgressBar">
<img src="Whatever.gif" alt="Please wait..." />
</div>
</body>
</html>
Also doable without jQuery but it's just so much easier to use it ;)
That way the progress bar gif loads, and once the page is done it is set to invisible.
I hope that might help! Good luck.
You don't mention any libraries, so here is a pure js solution:
http://jsfiddle.net/TTU7v/
The idea is to put the script as close to the opening body tag (but after it!) as possible:
<script type="text/javascript">
var body = document.getElementsByTagName("body")[0];
body.style.visibility = "hidden";
window.onload = function(){body.style.visibility = "visible";};
</script>
I want to replace the current script tag with the HTML contents generated by the same script.
That is, my Page is
<html>
<body>
<div>
<script src="myfile1.js"></script>
</div>
<div>
<script src="myfile1.js"></script>
</div>
</body>
</html>
Inside each .js file corresponding html contents are generated. I want to put the contents as the innerHTML of the parent div. But can't set id for the parent div because the page is not static. So the current script tag must be replaced with the HTML content. How can I do this?
For each script tag src is the same. So can't identify with src. These scripts displays
some images with text randomly. Scripts are the same but displays different contents in divs on loading
Please help me
try inside of myfile1.js:
var scripts = document.getElementsByTagName( "script" );
for ( var i = 0; i < scripts.length; ++ i )
{
if ( scripts[i].src == "myfile1.js" )
{
scripts[i].parentNode.innerHTML = "new content";
}
}
This is a great question for those trying to implement a JSONP widget. The objective is to give the user the shortest possible amount of code.
The user prefers:
<script type="text/javscript" src="widget.js"></script>
Over:
<script type="text/javscript" src="widget.js"></script>
<div id="widget"></div>
Here's an example of how to achieve the first snippet:
TOP OF DOCUMENT<br />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
// inside of widget.js
document.write('<div id="widget"></div>');
$(document).ready(function() {
$.getJSON('http://test.com?remote_call=1', function(data) {
$('#widget').html(data);
});
});
<br />BOTTOM OF DOCUMENT
Have a look at: http://alexmarandon.com/articles/web_widget_jquery/ for the correct way to include a library inside of a script.
document.currentScript has been available since 2011 on Firefox and 2013 on Chrome.
document.currentScript documentation at MDN
<!DOCTYPE html>
<meta charset="UTF-8">
<title>currentScript test</title>
<h1>Test Begin</h1>
<script>
document.currentScript.outerHTML = "blah blah";
</script>
<h1>Test End</h1>
Unfortunately a running JavaScript file is not aware of where it is running. If you use document.write() in the script, the write function will take place wherever the script runs, which would be one way to accomplish what you want, but without replacing the contents or being able to perform any actions on the enclosing DIV.
I can't really envisage a situation where you'd have such stringent restrictions on building a page - surely if the page is dynamic you could generate identifiers for your DIV elements, or load content in a more traditional manner?
Why not use Smarty?
http://www.smarty.net/
You can use javascript in Smarty templates, or just use built-in functions.
Just take a look at http://www.smarty.net/crash_course
poof -- old answer gone.
Based on your last edit, here's what you want to do:
<html>
<head>
<!-- I recommend getting this from Google Ajax Libraries
You don't need this, but it makes my answer way shorter -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function getRandomContent(){
// I expect this is the contents of your current script file.
// just package it into a function.
var rnd = Math.random();
return "[SomeHtml]";
}
$('.random').each(idx, el){
$(this).html(getRandomHtmlContent());
});
});
</script>
</head>
<body>
<div class="random">
</div>
<div class="random">
</div>
</body>
</html>
If you don't mind the script tag remaining in place you can use something as simple as document.write().
myfile1.js:
document.write("<p>some html generated inline by script</p>");
It will do exactly what you need.
I feel there is such an easy answer to this, but my google-fu is failing me. What I currently have are several links that once clicked, change the HTML content in a DIV.
<a href="#new" onclick="document.getElementById('body').innerHTML
= '<p>NEW</p>';">NEW!</a>
But I want to be able to link to this content. Is there anyway to link to this by going to a URL such as www.blahblah.com/index.html#new so it auto-loads the new HTML code?
Forgive me if I'm an idiot... I'm fairly new to javascript.
You can use window.location.hash to see what the hash is on the URL and show the correct DIV based on that. Assuming all your divs are on the page, once you know the div you want to show you would do something like this:
document.getElementById(idOfDivToShow).style.display='block';
Small example:
<html>
<head>
<script type="text/javascript">
function loadDiv() {
if(window.location.hash == '#div1')
document.getElementById('div1').style.display = "block";
else if(window.location.hash == '#div2')
document.getElementById('div2').style.display = "block";
}
</script>
</head>
<body onload="loadDiv()">
<div style="display:none" id="div1">div1</div>
<div style="display:none" id="div2">div2</div>
</body>
</html>
If you use jQuery, Mootools, or Prototype you could use history.js which allows you to set up states with specific content depending on the hash.