|
JavaScript - Twitter-style Overlay Messages
On twitter, when you change your avatar/background a small white box covering an inch of the top of the page appears. How can I do this?
Similar TutorialsAs part of course work for class I must write JavaScript/XML (with CSS) to carry out the following tasks. In essence it is a micro version of twitter. Users must be able to login, make posts, edit them. A text box should appear, with reset/update buttons. When the Update button is clicked the following occurs: 1. The user name is added to the message text typed by the user 2. A time stamp is added after the message text 3. A photo is added at the left 4. Any URLs are made into hyperlinks 5. The combined photo and text, formatted suitably, is prepended to the list of previous messages below the input area, i.e. the most recent item is at the top of the places visited. 6. The message box is cleared to allow further user input. - When the Clear button is clicked the text area is cleared. Additionally 1. Using a manually created XML file users must be able to "register themselves" 2. Posts must be manually saved in an XML file which loads upon login 3. When anyone opens the default page they are presented with a list of all your journey and comments (retrieved from the server). 4. Allow a registered user who has logged in to add, delete or modify only their comments. 5. Use one or more XML files to record registered users and passwords as well as posts and comments. These are manually created in 1& 2 above. ---- I initally tackled the first section using innerHTML and other various Javascript components but am at a total loss as to how to achieve the same thing using nodes (and XML). Any help with regards with where to begin would be much appreciated. Hello, I am looking for javascript content overlay, something exactly like LeadBolt overlay (you can see example here http://tinyurl.com/2coq2xy). If possible to set: load on center of screen, load it just when visitor come, turn off after set amount of time, close button to be turned on/off (rather off). Can you help me? Thanks in advance, chlopzmazur Hello, I dont know anything about javascript, I was wondering if there is a way to take one image and put it over another, sort of like php's imagecopymerge function. In other words combine two images. For example, take "image a", and combine it with "image b"... Thanks for any help! -Flightfanatic1 Hey, I am using an RSS scroller to show recent news feeds. I am also using Ajax to change the content from page to page, but instead of using ajax to load the external page for the 'news page' (the image above is the home page) I've had to use a show/hide DIV tool as it refused to load the javascript from the external page. All is working fine apart from text overlay. This is the news page: This problem only happens for a few seconds, then it scrolls and the news looks fine. It gets very annoying. If you could help me with this dilema I will be very great full! Thanks alot. I have a script that brings up an overlay box onclick that needs to be on top of everything else on page, however I can't get it to show on top of the navigation tabs. I tried calling the overlay script at the very beginning of the head section as well as tried to call it at the end but it doesn't seem to matter. Is there something I can add to the script to force it on top of every other object on the page? Hey, I am using an RSS scroller to show recent news feeds I am also using Ajax to change the content from page to page, but instead of using ajax to load the external page for the 'news page' (the image above is the home page) I've had to use a show/hide DIV tool as it refused to load the javascript from the external page. All is working fine apart from text overlay. This is the news page: Code: <script language=javascript type='text/javascript'>
function hidediv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.display="none";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'none';
else // IE 4
document.all.hideshow.divs[i].display = 'none';
}
}
}
function showdiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){
if (document.getElementById)
divs[i].style.display="block";
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'block';
else // IE 4
document.all.hideshow.divs[i].display = 'block';
}
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
</head>
<body onload="show_clock()">
<div id="wrapper">
<div id="header">
<a href="#" rel="nofollow" target="_parent">Planet Volume</a>
</div>
<div id="menu">
<ul>
<li><a href="#" onclick="javascript:showdiv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/home.html');return false">Home</a></li>
<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:showdiv('newspage'); ajax_loadContent('news3','external/news.html');return false">News</a></li>
<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/request.html');return false">Request</a></li>
<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/contact.html');return false">Contact</a></li>
<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/tunein.html');return false">Tune in</a></li>
<li><a class="last"><script language="javascript" src="javascript/liveclock.js"></script></a></li>
</ul>
</div>
<div id="main">
<div id="content">
<div class="content_box">
<div id="mainContainer">
<div class="news" id="news3">
Loading news. please wait...
</div>
</div>
<script type="text/javascript">
ajax_loadContent('news3','external/home.html');
</script>
</div>
<div id="newspage" style="display: none; visibility: visible;">
<table width="600" style="">
<tr>
<td>
<h5>Celebrity Gossip</h5>
<script type="text/javascript">
var cssfeed=new gfeedpausescroller("celeb-rss", "celeb-rss", 3000, "_new")
cssfeed.addFeed("Celebrity", "http://news.feedzilla.com/uk/headlines/celebrities/top-stories.rss") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(4)
cssfeed.init()
</script>
</td>
<td>
<h5>Music News</h5>
<script type="text/javascript">
var cssfeed=new gfeedpausescroller("music-rss", "music-rss", 3000, "_new")
cssfeed.addFeed("Music", "http://news.feedzilla.com/uk/headlines/music/top-stories.rss") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(4)
cssfeed.init()
</script>
</td>
</tr>
<tr>
<td>
<h5>Movies Reviews</h5>
<script type="text/javascript">
var cssfeed=new gfeedpausescroller("movies-rss", "movies-rss", 3000, "_new")
cssfeed.addFeed("Movies", "http://news.feedzilla.com/uk/headlines/entertainment/movies-reviews.rss") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(4)
cssfeed.init()
</script>
</td>
<td>
<h5>Technology</h5>
<script type="text/javascript">
var cssfeed=new gfeedpausescroller("tech-rss", "tech-rss", 3000, "_new")
cssfeed.addFeed("Technology", "http://news.feedzilla.com/en_us/headlines/technology/top-stories.rss") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(4)
cssfeed.init()
</script>
</td>
</tr>
</table>
</div>
<div id="newsbox" class="newsclass" style="visibility: visible; position: absolute;">
<h2>Latest News</h2>
<h5>Celebrity Gossip</h5>
<script type="text/javascript">
var cssfeed=new gfeedpausescroller("home-celeb-rss", "home-celeb-rss", 4000, "_new")
cssfeed.addFeed("Celebrity", "http://news.feedzilla.com/uk/headlines/celebrities/top-stories.rss") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(3)
cssfeed.init()
</script>
<div class="clear h40">
</div>
<h5>Music News</h5>
<script type="text/javascript">
var cssfeed=new gfeedpausescroller("home-music-rss", "home-music-rss", 4000, "_new")
cssfeed.addFeed("Music", "http://news.feedzilla.com/uk/headlines/music/top-stories.rss") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(3)
cssfeed.init()
</script>
<a href="#" class="float_r" onclick="javascript:hidediv('newsbox'); javascript:showdiv('newspage'); ajax_loadContent('news3','external/news.html');return false">More news...</a>
</div>
</div>
<!-- end of content -->
This problem only happens for a few seconds, then it scrolls and the news looks fine. It gets very annoying. If you could help me with this dilema I will be very great full! Thanks alot. Hi, I want to a javascript function like showModalDialog(<page_name>,'','<options>') here in the option I need to have overlay property where I can set opacity values. Is there any solution? Please letme know Hi Everyone, I want to create an JS function wherein i'll be passing an URL as a parameter, which opens the passed URL in an overlay pop-up. Since I'll be calling this function through an XML which renders data to flash, lightbox, etc are not useful i guess. Please let me know can I do it. My xml code looks like this : Code: <data name="gallery_vote_url" ns1:space="preserve"> <value><![CDATA[http://www.JSCallInsteadOfThisURL.com]]></value> </data> Thanks! I am looking to have the same effect as this site when images are hovered over. http://www.istockphoto.com/search/agency#3fa3a34 Is it javascript ? Does anyone knows how to make an overlay ad with close button? Well I have seen already on another websites.I want to make an ad which is over a video and that video can't be started without closing this ad.So when ad is closed then video can be loaded.Something like on this webiste: http://www.soccerclips.net/videos/we...-villa-fortune But i don't know how to do it?If someone knows please post the code. Code: <!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>
<title>Overlay test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#overlay {
background-color: #ccffcc;
display: none;
margin-left: -400px;
position: absolute;
top: -250px;
left: 50%;
width: 800px;
height: 500px;
visibility: visible
}
#container{
color: white;
background-color: #0ff;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
visibility: visible;
display: block
}
</style>
<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript">
//<![CDATA[
function hide() {
document.getElementById("overlay").style.display = "none";
}
function show() {
document.getElementById("overlay").style.display = "block";
swfobject.embedSWF("helpdeskApp_three.swf", "flashcontent", "800", "500", "9.0.0", "expressInstall.swf");
}
//]]>
</script>
</head>
<body>
<div id="container"> <div id="overlay"><div id="flashcontent">fdgfdg</div>
<a href="#" onclick="hide();">Click me</a> to close.</div></div>
<div><a href="#" onclick="show();">Click me</a> to show the hidden content.</div>
</body>
</html>
I got some of this code from these forums. Thank you. It works great, however I'll be using this code with a school's website's template. The problem is that the "overlay" div tags would be placed within the container div tags of the template,therefore confining to these dimensions. How can I modify my code to have my div tags not affected by the templates div tags... and have the overlay be center in the browser.. Thanks Not sure if the root problem is a js load issue or rather css. Problem page is he http://arcangelmetalworks.com/pictures.php I've had success using the Lightbox2 module on several Drupal-based sites, but this is the first time I've handled the straight code and tried to drop it into a hand-coded site. Internet Explorer fails to draw the overlay div to the full page height. Firefox 3 performs as expected. The web site suggests setting the body margin and padding to zero, but those were set anyway and tweaking didn't help. Another suggestion was to stick initLighbox() into the body onload, but that function doesn't exist. Also tried initialize() and Lightbox.initialize(), but again it's claimed those functions don't exist. Looking into the code, however, initialize() is where the div height is calculated, I think. It should be noted that the lightbox still works on IE even when using one of these failed onload attempts. And I don't actually get IE to report any js error with the onloads - I have to rely on Firebug for that. Anyone have an idea of what I'm overlooking? I've spent too much time staring at code and coming up blank. Hello to all, new to this forum so pardon any mistakes in my question. I have an overlay that contains a video which loads upon page load. Code: <script type="text/javascript">
$(function() {
$("#intro_video").overlay({
mask: {
color: '#000',
loadSpeed: 1000,
startOpacity: 0,
zIndex: 9997,
opacity: .85
},
top: 131,
closeOnClick: true,
load: true,
onLoad: function(){
var $overlay = this;
setTimeout(function(){$overlay.close()}, 44000)
}});
});
</script>
I'd like to delay this by about 5 seconds or so but can't figure out how to do so as I am a JS n00b. The overlay is contained in a div: <div id="intro_video"> Thank you for your help. Hi! I was wondering if anyone could help with the code below. I think there is something wrong with the "thecontents[] part below. Could anyone have a look and possible email me with a finished version... Code: <table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="ddmessage"><table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><select name="selectbox" size="1" onChange="changecontent(this)">
<option selected value="What is JavaScript?">What is JavaScript?</option>
<option value="Why learn JavaScript?">Why learn JavaScript?</option>
<option value="What do you think of the site?">What do you think of the site?</option>
<option value="I'd like to feature one of these codes on my site.">I'd like to feature one of these codes on my site.</option>
</select><br>
</td>
</tr>
<tr>
<td width="100%"><textarea rows="8" name="contentbox" cols="35" wrap="virtual"></textarea><br>
<font face="arial" size="-2">This free script provided by <a href="http://javascriptkit.com">JavaScript Kit</a></font>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<p>
<script language="JavaScript">
/*
Drop down messages script
By JavaScript Kit (http://javascriptkit.com)
Over 400+ free scripts here!
*/
//change contents of message box, where the first one corresponds with the first drop down box, second with second box etc
var thecontents=new Array()
thecontents[0]='Its what I used to make this :/'
thecontents[1]='I wouldn't reccommend it, its rather hard. Though, I hate to blow ones own trumpet, I am learning to do it rather well.'
thecontents[2]='I hope you have enjoyed it! Email support@matthewjmorris.co.uk with your comments. Also, if you have any bits to go on this page, email Support aswell with the code, instructions for installing the code and your name! Your name may appear here, along with your code!'
thecontents[3]='support@matthewjmorris.co.uk'
//don't edit pass this line
function changecontent(which){
document.ddmessage.contentbox.value=thecontents[which.selectedIndex]
}
document.ddmessage.contentbox.value=thecontents[document.ddmessage.selectbox.selectedIndex]
</script>
Thanks! I wish to add a help icon to variousd parts of my pages that places an overlay text box for the help that that help icon relates to. maybe a call like help(datefield) or help(somethingelse) then the script that shows the help text shows the text that relates to the string passed. can someone please provide information on how i can do this. I want a Login Box to be opened in modal window when user clicks on a link and authentication is done with Ajax. I tried jQuery BlockUI, jQuery UI, ThickBox. But they are large in scope. I also tried writing separate plugin for my need but i don't have clear idea how does it work. So please either suggest a way or give me link to article which is simple to understand and can clear how it work. Hi I am trying to create a page that has a couple of pop-up overlay boxes from a couple of links, Everything is working ok I think except for a problem on a browser resize. The original code I found : ( http://kalyanchakravarthy.net/?p=208 ) was created or only one window so the resize code controls both windows, when I think need each one controlled separately. The resize code will make a closed overlay box appear. Any suggestions or help will be greatly appreciated. THANK YOU Code:
<!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" />
<script language="javascript" src="jquery-1.2.6.min.js"></script>
<!--script language="javascript" src="jquery-schedule-overlay.js"></script-->
<style type="text/css">
.bgCover { background:#000; position:absolute; left:0; top:0; display:none; overflow:hidden }
.overlayBox {
border:1px solid #09F;
position:absolute;
display:none;
width:730px;
height:600px;
background:#fff;
}
.overlayBoxb {
border:1px solid #09F;
position:absolute;
display:none;
width:730px;
height:600px;
background:#fff;
}
.overlayContent {
padding:0px;
}
.overlayContentb {
padding:0px;
}
.closeLink {
float:right;
color:red;
text-decoration:none;
}
a:hover { text-decoration:none; }
</style></head>
<body>
<div class="bgCover"> </div>
<a href="#" class="launchLink">Launch Window</a>
<div class="overlayBox">
<div class="overlayContent">
<a href="#" class="closeLink">Close</a>
<img src="Session-A-mock-up.jpg" alt="Session A Schedule " />
</div></div>
<br /><br />
<a href="#" class="launchLinkb">Launch Window 2</a>
<div class="overlayBoxb">
<div class="overlayContentb">
<a href="#" class="closeLink">Close</a>
<img src="Session-B-mock-up.jpg" alt="Session B Schedule "/>
</div></div>
<script language="javascript">
function showOverlayBox() {
//if box is not set to open then don't do anything
if( window.isOpen == false ) return;
// set the properties of the overlay box, the left and top positions
$('.overlayBox').css({
display:'block',
left:( $(window).width() - $('.overlayBox').width() )/2,
top:( $(window).height() - $('.overlayBox').height() )/2 -20,
position:'absolute'
});
// set the window background for the overlay. i.e the body becomes darker
$('.bgCover').css({
display:'block',
width: $(window).width(),
height:$(window).height(),
});
function showOverlayBoxb() {
windowb=window.open;
//if box is not set to open then don't do anything
if( windowb.isOpen == false ) return;
// set the properties of the overlay box, the left and top positions
$('.overlayBoxb').css({
display:'block',
left:( $(window).width() - $('.overlayBoxb').width() )/2,
top:( $(window).height() - $('.overlayBoxb').height() )/2 -20,
position:'absolute'
});
// set the window background for the overlay. i.e the body becomes darker
$('.bgCover').css({
display:'block',
width: $(window).width(),
height:$(window).height(),
});
}
function doOverlayOpen() {
//set status to open
isOpen = true;
showOverlayBox();
$('.bgCover').css({opacity:0}).animate( {opacity:0.5, backgroundColor:'#000'} );
// dont follow the link : so return false.
return false;
}
function doOverlayOpenb() {
//set status to open
isOpen = true;
showOverlayBoxb();
$('.bgCover').css({opacity:0}).animate( {opacity:0.5, backgroundColor:'#000'} );
// dont follow the link : so return false.
return false;
}
function doOverlayClose() {
//set status to closed
isOpen = false;
$('.overlayBox,.overlayBoxb').css( 'display', 'none' );
// now animate the background to fade out to opacity 0
// and then hide it after the animation is complete.
$('.bgCover').animate( {opacity:0}, null, null, function() { $(this).hide(); } );
}
// if window is resized then reposition the overlay box
$(window).bind('resize',showOverlayBox) ;
$(window).bind('resize',showOverlayBoxb) ;
// activate when the link with class launchLink is clicked
$('a.launchLink').click( doOverlayOpen );
// activate when the link with class launchLink2 is clicked
$('a.launchLinkb').click( doOverlayOpenb );
// close it when closeLink is clicked
$('a.closeLink').click( doOverlayClose );
</script>
</body>
</html>
Hi Everyone, Has anyone noticed the twitter confirmation box (when you hit save in Settings, the page refreshes and a white confitmation box appears along the top of the screen and disappears again in a few seconds)? Does anyone know how to go about implementing this? My JS skills would not be the best. I wonder is there a jquery plugin that I could use or similar? Thanks in advance, Brian if I have an html page that uses the <style> or a <link> to call a style sheet these properties aren't available to JavaScript is there a good way to access them? eg Code: <html>
<head>
<title>expandable text area</title>
<style type="text/css">
#expandable{
height: 100px;
}
</style>
</head>
<body>
<form>
<textarea id="expandable" cols="30" rows="10"></textarea>
</form>
</body>
<script type="text/javascript">
document.getElementById('expandable').addEventListener('click',function(){
if(!this.style.height){
this.style.height = this.scrollHeight+'px';
}
alert(this.style.height);
}, true);
</script>
</html>
In this example I have the height set but I cannot access it since it is not declared in the style attribute of the html element |
|||||||