|
JavaScript - Javascript Scrolling News Was Working - Made Slight Change, Now Its Not
if you take a look at this site here you can see that it no longer scrolls or even displays content, but here it does. I'll bet there's a quick fix here, but not sure what it is. Any ideas?
Similar TutorialsHi I'm looking for a simple ticker that scrolls horizontally across the top of the homepage of a site I'm working on. Ideally I would like one for both Twitter and RSS feeds, but either is good. If anyone knows where I can find one that's simple to implement that would be great. Kind Regards HI I want to make a news section on right side of my webiste's main page, it can in dreamweaver, someone can help me in this regard thanks zami I am pretty new to javascript and descided to test my skills by making a javascript clock using the computers time it works but I know the way I am doing it isn't very good you can see the code below 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>clock</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var minutes = 0;
var seconds;
var hour = 0;
var minute = new Date().getMinutes();
minutes += minute;
var hours = new Date().getHours();
hour += hours;
var time_period = "";
if(hour > 12){
hour = hour-12;
time_period = "PM";
}else {
time_period = "AM";
}
function working_clock(){
var time = new Date;
seconds = time.getSeconds();
var clock = document.getElementById('clock');
if(seconds == 59){
minutes+=1;
}
if(minutes == 60){
minutes = 1;
hour++;
}
if(minutes < 10){
var minute_digit_two = 0;
clock.innerHTML = ("time: "+hour+":"+minute_digit_two +minutes+":"+seconds+" "+time_period);
}else {
clock.innerHTML = ("time: "+hour+":"+minutes+":"+seconds+" "+time_period);
}
setTimeout("working_clock()",1000);
}
window.onload = working_clock;
</script>
</head>
<body>
<div id="clock"></div>
</body>
</html>
heres where you can see it in action http://the-test.comoj.com/files/working-clock.html im just asking if there are any errors or if theres a better way to do this Hi Guys, I am using the following script: Code:
<script>
JQTWEET = {
// Set twitter username, number of tweets & id/class to append tweets
user: 'username',
numTweets: 3,
appendTo: '#shine-tweet-content',
// core function of jqtweet
loadTweets: function() {
$.ajax({
url: 'http://api.twitter.com/1/statuses/user_timeline.json/',
type: 'GET',
dataType: 'jsonp',
data: {
screen_name: JQTWEET.user,
include_rts: true,
count: JQTWEET.numTweets,
include_entities: true
},
success: function(data, textStatus, xhr) {
var html = '<li class="tweet">TWEET_TEXT<div class="time">AGO</div></li>';
// append tweets into page
for (var i = 0; i < data.length; i++) {
$(JQTWEET.appendTo).append(
html.replace('TWEET_TEXT', JQTWEET.ify.clean(data[i].text) )
.replace(/USER/g, data[i].user.screen_name)
.replace('AGO', JQTWEET.timeAgo(data[i].created_at) )
.replace(/ID/g, data[i].id_str)
);
}
}
});
},
/**
* relative time calculator FROM TWITTER
* @param {string} twitter date string returned from Twitter API
* @return {string} relative time like "2 minutes ago"
*/
timeAgo: function(dateString) {
var rightNow = new Date();
var then = new Date(dateString);
if ($.browser.msie) {
// IE can't parse these crazy Ruby dates
then = Date.parse(dateString.replace(/( \+)/, ' UTC$1'));
}
var diff = rightNow - then;
var second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24,
week = day * 7;
if (isNaN(diff) || diff < 0) {
return ""; // return blank string if unknown
}
if (diff < second * 2) {
// within 2 seconds
return "right now";
}
if (diff < minute) {
return Math.floor(diff / second) + " seconds ago";
}
if (diff < minute * 2) {
return "about 1 minute ago";
}
if (diff < hour) {
return Math.floor(diff / minute) + " minutes ago";
}
if (diff < hour * 2) {
return "about 1 hour ago";
}
if (diff < day) {
return Math.floor(diff / hour) + " hours ago";
}
if (diff > day && diff < day * 2) {
return "yesterday";
}
if (diff < day * 365) {
return Math.floor(diff / day) + " days ago";
}
else {
return "over a year ago";
}
}, // timeAgo()
/**
* The Twitalinkahashifyer!
* http://www.dustindiaz.com/basement/ify.html
* Eg:
* ify.clean('your tweet text');
*/
ify: {
link: function(tweet) {
return tweet.replace(/\b(((https*\:\/\/)|www\.)[^\"\']+?)(([!?,.\)]+)?(\s|$))/g, function(link, m1, m2, m3, m4) {
var http = m2.match(/w/) ? 'http://' : '';
return '<a class="twtr-hyperlink" target="_blank" href="' + http + m1 + '">' + ((m1.length > 25) ? m1.substr(0, 24) + '...' : m1) + '</a>' + m4;
});
},
at: function(tweet) {
return tweet.replace(/\B[@?]([a-zA-Z0-9_]{1,20})/g, function(m, username) {
return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/intent/user?screen_name=' + username + '">@' + username + '</a>';
});
},
list: function(tweet) {
return tweet.replace(/\B[@?]([a-zA-Z0-9_]{1,20}\/\w+)/g, function(m, userlist) {
return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/' + userlist + '">@' + userlist + '</a>';
});
},
hash: function(tweet) {
return tweet.replace(/(^|\s+)#(\w+)/gi, function(m, before, hash) {
return before + '<a target="_blank" class="twtr-hashtag" href="http://twitter.com/search?q=%23' + hash + '">#' + hash + '</a>';
});
},
clean: function(tweet) {
return this.hash(this.at(this.list(this.link(tweet))));
}
} // ify
};
// start jqtweet!
JQTWEET.loadTweets();
</script>
To load the latest three tweets from a particular twitter account. I am trying to use newsticker.js to only display one at a time, and fade between different the three tweets. However, this is not working, it is working on any normal UL's but not these created using javascript. The page in question is at http://www.garethhardy.com/Shine/ Thanks in advance for any help guys. Dan Hello, I built a fairly simple page using mioplanet's javascript code for a news ticker. It works fairly well on Chrome, Firefox, Safari and IE7, but IE8 and IE9 can't display it properly. The website is here, and I ran it through w3c validator that pointed out multiple errors with divs nor properly closed (> missing), but on the code they're all there. I suspect the js is doing something funny, but I don't have enough knowledge to understand it. I'm posting the js code as customised by me: Code: TICKER1_CONTENT = document.getElementById("TICKER1").innerHTML;
TICKER1_RIGHTTOLEFT = false;
TICKER1_SPEED = 5;
TICKER1_STYLE = "font-family:inconsolata,courier new, courier, monospace; font-size:24px; color:#ff00cc; letter-spacing:1px";
TICKER1_PAUSED = false;
TICKER1_start();
function TICKER1_start() {
var tickerSupported = false;
TICKER1_WIDTH = document.getElementById("TICKER1").style.width;
var img = "<img src=TICKER1_space.gif width="+TICKER1_WIDTH+" height=0>";
// Firefox
if (navigator.userAgent.indexOf("Firefox")!=-1 || navigator.userAgent.indexOf("Safari")!=-1) {
document.getElementById("TICKER1").innerHTML = "<TABLE cellspacing='0' cellpadding='0' width='100%'><TR><TD nowrap='nowrap'>"+img+"<SPAN style='"+TICKER1_STYLE+"' ID='TICKER1_BODY' width='100%'> </SPAN>"+img+"</TD></TR></TABLE>";
tickerSupported = true;
}
// IE
if (navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1) {
document.getElementById("TICKER1").innerHTML = "<DIV nowrap='nowrap' style='width:100%;'>"+img+"<SPAN style='"+TICKER1_STYLE+"' ID='TICKER1_BODY' width='100%'></SPAN>"+img+"</DIV>";
tickerSupported = true;
}
if(!tickerSupported) document.getElementById("TICKER1").outerHTML = ""; else {
document.getElementById("TICKER1").scrollLeft = TICKER1_RIGHTTOLEFT ? document.getElementById("TICKER1").scrollWidth - document.getElementById("TICKER1").offsetWidth : 0;
document.getElementById("TICKER1_BODY").innerHTML = TICKER1_CONTENT;
document.getElementById("TICKER1").style.display="block";
TICKER1_tick();
}
}
function TICKER1_tick() {
if(!TICKER1_PAUSED) document.getElementById("TICKER1").scrollLeft += TICKER1_SPEED * (TICKER1_RIGHTTOLEFT ? -1 : 1);
if(TICKER1_RIGHTTOLEFT && document.getElementById("TICKER1").scrollLeft <= 0) document.getElementById("TICKER1").scrollLeft = document.getElementById("TICKER1").scrollWidth - document.getElementById("TICKER1").offsetWidth;
if(!TICKER1_RIGHTTOLEFT && document.getElementById("TICKER1").scrollLeft >= document.getElementById("TICKER1").scrollWidth - document.getElementById("TICKER1").offsetWidth) document.getElementById("TICKER1").scrollLeft = 0;
window.setTimeout("TICKER1_tick()", 30);
}
and this is how it's referred on the html file: Code: <div id=tick1> <div id="TICKER1" STYLE="overflow:hidden; width:1600px"> text here </div> <script type="text/javascript" src="webticker_1.js" language="javascript"></script> any help much appreciated. Thanks, H Hi, I'm not good with manipulating JavaScript for my needs and I am trying to use a JavaScript file to implement my common content in to my web page, in this case it is a news article I want to display across all of my web pages. The problem is that I want to style it and use html attributes in side of the document.write and that is apparently messing it up. Would someone be able to show me how to fix this problem or fix the code so I can get the common content to display correctly with styling from CSS. If possible I would like to keep the CSS in a separate file and put a link to it in the JavaScript file and use the class tags, but I do not know how far we can go with JavaScript. Thanks for helping. Here are links to the webpage where I would like the code to show up. Below is the JavaScript that is currently in my .js file. http://www.nasawear.com/Home.html (The news article should display in the right column.) Code: document.write("<link rel="stylesheet" type="text/css" href="css/mainpage.css" />");
document.write("<h3 class="section">");
document.write("New NASA News");
document.write("</h3>");
document.write("
<div class="picbox">
<a rel="nofollow" target="_blank" href="image/superhotplanet-full.jpg">
<img class="white" width="335" height="268" src="image/superhotplanet-full.jpg" alt="NASA Finds Super-Hot Planet with Unique Comet-Like Tail" /> Full Size</a>
<p class="imageandstuff">NASA Finds Super-Hot Planet with Unique Comet-Like Tail</p>
<p class="dis">
Astronomers using NASA's Hubble Space Telescope have confirmed the existence of a baked object that could be called a "cometary planet." The gas giant planet, named HD 209458b, is orbiting so close to its star that its heated atmosphere is escaping into space.
<br/>
<br/>
Observations taken with Hubble's Cosmic Origins Spectrograph (COS) suggest powerful stellar winds are sweeping the cast-off atmospheric material behind the scorched planet and shaping it into a comet-like tail.
<br/>
Illustration Credit: NASA, ESA, and G. Bacon (STScI)
</p>
</div> ");
Hi everyone, I'm curious if this is something simple. I'm working on a wordpress site using a plugin that is based off of the code from javascript kit called "highlighter scroller script". The plugin js is almost identical: http://javascriptkit.com/script/cut57.shtml What is causing it to wipe from left to right? I'm racking my brains trying to figure it out (and googling unsuccessfully it seems). All I'm trying to do is make it wipe instead from right to left. I'm sure it's something simple, but I don't know which variable to change. Can anyone point me in the right direction? THANKS! I started using the Google News Web Element on my website. The website for Google News Web Element is: http://www.google.com/webelements/#!/news I want the links to open in a new window, which cannot be done with the iframe version. Their website only allows me to generate an iframe. I was told that this can be done by using the javascript version, but I have not been able to figure it out. This is their link to the documentation: http://code.google.com/apis/newssearch/newsshow/ I know very little about javascript, and have been trying to get it to work but have been unsuccessful. I want to use the Medium Rectangle size and I want the only topic to be "Swainsboro". The only modification that I want to make is for the links to open in a new window. If anyone can help me do this, it would be appreciated. This is the iframe data that was generated by the wizard: Code: <iframe frameborder=0 marginwidth=0 marginheight=0 border=0 style="border:0;margin:0;width:300px;height:250px;" src="http://www.google.com/uds/modules/elements/newsshow/iframe.html?rsz=large&format=300x250&ned=us&hl=en&q=Swainsboro&element=true" scrolling="no" allowtransparency="true"></iframe> Using the Photoslide, GK News Image VI, as seen here tools.gavick.com/demo/ni6, however its in ID order, listed. I would like to change the order of ID to Random Order. Can you please help, what code would need changing. thank you its javascript. code below: Fx.Height = Fx.Style.extend({initialize: function(el, options){$(el).setStyle('overflow', 'hidden');this.parent(el, 'height', options);},toggle: function(){var style = this.element.getStyle('height').toInt();return (style > 0) ? this.start(style, 0) : this.start(0, this.element.scrollHeight);},show: function(){return this.set(this.element.scrollHeight);}});Fx.Opacity = Fx.Style.extend({initialize: function(el, options){this.now = 1;this.parent(el, 'opacity', options);},toggle: function(){return (this.now > 0) ? this.start(1, 0) : this.start(0, 1);},show: function(){return this.set(1);}}); // window.addEvent("load",function(){ document.getElementsBySelector(".gk_ni_6_wrapper").each(function(el){ // generowanie rdzenia var mainwrap = el; var elID = el.getProperty("id"); var $G = $Gavick[elID]; var wrap = $(elID); var mouseIsOver = false; var scrollValue = 0; // var addWidth = $E("div",el).getStyle("padding-left").toInt() + $E("div",el).getStyle("padding-right").toInt() + $E("div",el).getStyle("margin-right").toInt(); // el.setStyle("width",(el.getStyle("width").toInt() + addWidth) + "px"); // $G["actual_slide"] = -1; $G["actual_anim"] = false; $G["actual_anim_p"] = false; // var slides = []; var contents = []; var pasek = false; // if(window.ie && $E(".gk_ni_6_text_bg", wrap)) $E(".gk_ni_6_text_bg",wrap).setOpacity($G["opacity"].toFloat()); // wrap.getElementsBySelector(".gk_ni_6_slide").each(function(elmt,i){slides[i] = elmt;}); slides.each(function(el,i){if(i != 0) el.setOpacity(0);}); // if($E(".gk_ni_6_text_bg", wrap)){ var text_block = $E(".gk_ni_6_text_bg",wrap); $ES(".gk_ni_6_news_text",wrap).each(function(el,i){contents[i] = el.innerHTML;}); } // animacje var amount_c = contents.length-1; if($E(".gk_ni_6_text", wrap)) $E(".gk_ni_6_text",wrap).innerHTML = contents[0]; // var loadedImages = ($E('.gk_ni_6_preloader', wrap)) ? false : true; // if($E('.gk_ni_6_preloader', wrap)){ var imagesToLoad = []; // $ES('.gk_ni_6_slide',wrap).each(function(el,i){ var newImg = new Element('img',{ "src" : el.innerHTML, "alt" : el.getProperty('title') }); imagesToLoad.push(newImg); el.innerHTML = ''; newImg.injectInside(el); }); // var timerrr = (function(){ var process = 0; imagesToLoad.each(function(el,i){ if(el.complete) process++; }); // if(process == imagesToLoad.length){ $clear(timerrr); loadedImages = process; (function(){new Fx.Opacity($E('.gk_ni_6_preloader', wrap)).start(1,0);}).delay(400); } }).periodical(200); } var timerrr2 = (function(){ if(loadedImages){ $clear(timerrr2); // ---------- var NI2 = new news_image_6(); // $ES(".gk_ni_6_tab",mainwrap).each(function(elx,index){ var hover = $E(".gk_ni_6_hover" , elx); var opacity_anim = new Fx.Opacity(hover, {duration: 250, wait: false}); // elx.addEvent("mouseenter",function(){ hover.setStyle("display", "block"); opacity_anim.start(1); }); // elx.addEvent("mouseleave",function(){ opacity_anim.start(0); (function(){hover.setStyle("display", "none");}).delay(250); }); // elx.addEvent("click", function(){ if(!$G["actual_anim_p"]){ $E(".gk_ni_6_tab_active",mainwrap).setProperty("class","gk_ni_6_tab"); elx.setProperty("class","gk_ni_6_tab_active"); } // NI2.image_anim(elID,mainwrap,wrap,slides,index,contents,$G,false); }); }); $E(".gk_ni_6_tab",mainwrap).setProperty("class","gk_ni_6_tab_active"); NI2.image_anim(elID,mainwrap,wrap,slides,0,contents,$G,($G["autoanim"]==1)); /** Slider implementation **/ if($E('.gk_ni_6_tabsbar_slider',mainwrap)){ var $offset = $E(".gk_ni_6_tab",mainwrap).getStyle("height").toInt() + $E(".gk_ni_6_tab",mainwrap).getStyle("margin-bottom").toInt(); var scrollArea = $E('.gk_ni_6_tabsbar_wrap', mainwrap); var scrollableArea = $E('.gk_ni_6_tabsbar', mainwrap); var scrollAreaH = scrollArea.getSize().size.y; var scrollableAreaH = scrollableArea.getSize().size.y; var scroller_up = new Fx.Scroll(scrollArea, {duration: 250, wait: true, transition: Fx.Transitions.Circ.easeIn, onComplete: function(){scrollValue -= $offset;}}); var scroller_down = new Fx.Scroll(scrollArea, {duration: 250, wait: true, transition: Fx.Transitions.Circ.easeIn, onComplete: function(){scrollValue += $offset;}}); // $E('.gk_ni_6_tabsbar_up', mainwrap).addEvent("click",function(){ if(scrollValue > 0) { scroller_up.scrollTo(0, scrollValue-$offset);} }); // $E('.gk_ni_6_tabsbar_down', mainwrap).addEvent("click",function(){ if((scrollValue < (scrollableAreaH-scrollAreaH))) { scroller_down.scrollTo(0, scrollValue+$offset); } }); } }}).periodical(250); }); }); // var news_image_6 = new Class({ // text_anim : function(wrap,contents,$G){ var txt = $E(".gk_ni_6_text",wrap); if(txt){ if($G["anim_type_t"] == 0){ new Fx.Opacity(txt,{duration: $G["anim_speed"]/2}).start(1,0); (function(){ new Fx.Opacity(txt,{duration: $G["anim_speed"]/2}).start(0,1);txt.innerHTML = contents[$G["actual_slide"]]; }).delay($G["anim_speed"]); } else txt.innerHTML = contents[$G["actual_slide"]]; } }, // image_anim : function(elID,mainwrap,wrap,slides,n,contents,$G,play){ var max = slides.length-1; var links = $ES('.gk_ni_6_news_link', mainwrap); var readon = $E('.gk_ni_6_readmore_button a', mainwrap); if(!$G["actual_anim_p"] && n != $G["actual_slide"]){ $G["actual_anim_p"] = true; if(readon) readon.setProperty("href", links[n].innerHTML); var actual_slide = $G["actual_slide"]; $G["actual_slide"] = n; slides[n].setStyle("z-index",max+1); if(actual_slide != -1) new Fx.Opacity(slides[actual_slide],{duration: $G["anim_speed"]}).start(1,0); new Fx.Opacity(slides[n],{duration: $G["anim_speed"]}).start(0,1); this.text_anim(wrap,contents,$G); switch($G["anim_type"]){ case 0: break; case 1: new Fx.Style(slides[n],'margin-top',{duration: $G["anim_speed"]}).start((-1)*slides[n].getSize().size.y,0);break; case 2: new Fx.Style(slides[n],'margin-left',{duration: $G["anim_speed"]}).start((-1)*slides[n].getSize().size.x,0);break; case 3: new Fx.Style(slides[n],'margin-top',{duration: $G["anim_speed"]}).start(slides[n].getSize().size.y,0);break; case 4: new Fx.Style(slides[n],'margin-left',{duration: $G["anim_speed"]}).start(slides[n].getSize().size.x,0);break; } if(play){ $E(".gk_ni_6_tab_active",mainwrap).setProperty("class","gk_ni_6_tab"); $ES(".gk_ni_6_tab",mainwrap)[n].setProperty("class","gk_ni_6_tab_active"); } (function(){slides[n].setStyle("z-index",n);}).delay($G["anim_speed"]); (function(){$G["actual_anim_p"] = false;}).delay($G["anim_speed"]); var $this = this; if(!play) this.image_pause($G); if((play || $G["autoanim"] == 1) && ($G["actual_anim"] == false)){ $G["actual_anim"] = (function(){ n = (n < max) ? n+1 : 0; $this.image_anim(elID,mainwrap,wrap,slides,n,contents,$G,true); }).periodical($G["anim_speed"] * 2 + $G["anim_interval"]); } } }, // image_pause : function($G) { $clear($G["actual_anim"]); $G["actual_anim"] = false; } }); Can someone please help with this code. The window is supposed to automatically scroll and move but it isn't working. (It was taken from a discontinued book called javascript in 24hrs) The javascript: Quote: var pos=100; function Scroll(){ if (!document.getElementById ) return; obj=document.getElementById("thetext"); pos -=1; if(pos < 0-obj.offsetHeight + 130) return; obj.style.top=pos; window.setTimeout("Scroll();", 30); } //start scrolling when the page loads window.onload=Scroll; the css: Quote: #thewindow{ position:relative; width:180px; height:150px; overflow:hidden; border:2px solid red; } #thetext{ position:absolute; width:170px; left:5px; top:100px; } the html: Quote: <!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="scroll.css" /> </head> <body> <h1> scrolling window example</h1> <p>This example shows a scrolling window created using javascript and the w3cdom.The red border window is actually a layer that shows a cliped portion of a larger layer"</p> <div id="thewindow"> <div id="thetext"> <p>This is the first paragraph of the scrolling message.The message is created with regular html</p> <p>Entries within the scrolling area can use any html tags.They can contain <a href="#">links</a></p> <p> No limit to the number of paragraphs that you can include here...</p> <ul> <li>For example you could format items using a bulleted list.</li> </ul> <p>The scrolling ends when the last part of tht scrolling text ids on the screen.You've reached the end.</p> </div> </div> </body> </html> Having trouble getting this plugin to work.. jparallax - see here for more info - http://webdev.stephband.info/parallax.html Now I have this plugin working separately, on its own page, just fine. see here - http://bit.ly/hPpSAC But when I went back, to my own page, and tried to incorporate it into the background of my site, I was able to get the look fine, but the movement isn't working. see here - http://bit.ly/ee52Iv I've tried everything I could to get it working.. Maybe someone here could troubleshoot? It would be a huge help, seriously. Thanks. Hi Guys, I've been progressing along ok onthe CSS side of things but am having some trouble on the javascript side of things. I've decided to jazz a site up with a scrolling gallery from a template i'm using but unfortunately I don't know how to get the main image to change on a click of the smaller one? can anybody please help a brother out! here's the site template - http://dev.jeffking.co.uk/index.html All i'm after is the big main image to change to the same (larger) image of the smaller one in the scrollbar below the main frame. Many thanks! Hi - I don't know much about javascript, html, or web development. I have this javascript on my page (that is an iframe). <script type="text/javascript"> var site = 'http://' + 'localParameter("site_address")' <!-- window.location = site //--> </script> Note: site_address is a parameter that's passed to the page when loaded. Now, I need to make this iframe scroll down by like 50 pixels once the page is loaded. How can I do this? Thanks Hi, I am new to javascript,this is my first time using it, I am wishing to have 2 buttons on my website, one that scrolls to the bottom of my page when clicked and then stops at the bottom and one that scrolls back up the page when clicked, but I want my viewers to be able to see this movement. I have some code (below) which works fine in firefox but it doesn't work in explorer, and I can't get this code to work moving upwards (after taking away the minus from -50). Can anybody please help me I have been battling for days trying to make it work although I am finding it hard to understand javascript being a first time user. I currently have this javascript : [CODE] <head> <script language="JavaScript"> function pageScrollup() { window.scrollBy(0,-50); // horizontal and vertical scroll increments if (window.pageYOffset) { scrolldelay = setTimeout('pageScrollup()',5); } } </script> </head> <body> <a href="JavaScriptageScrollup()">Back to Top</a> </body>[ICODE] Any help is greatly appreciated. OrangeAnt Its about this: http://www.wduffy.co.uk/blog/keep-el...omment-page-1/ Everywhere is used for a whole div on some side and when its on the top of the page. But what if its in the middle..? Look here - http://phpbb.bg/viewtopic.php?f=14&p=1013#p1013 Scroll down and then up.Anyway to fix this? Hi. I'm trying to figure out a way that, when a user scrolls down the page and hits the footer (#footer), a div's CSS position changes from fixed to absolute. The main reason is because I don't want the div that if fixed to go over the footer - I want it to just stop scrolling with the page and stay put. I'd assume this is done with JavaScript, but I have no idea where to start. If someone could give me a basic code that I can then modify that would be awesome! Thanks! Hi peeps, I thought I'd post this here as I haven't had any luck finding what I'm after but wondered it someone else had seen a slideshow that worked this way. In theory it seems simple enough to do. Description: Bascially I'd have a slideshow with several list items (or divs) within it. Now the main think with this slidshow is the list items or divs would have differing widths. The pagination would be 'Previous' and 'next' arrows. When you clicked next, it would slide along and line up the left edge of the next item/div with the left item of the slideshow. An likewise for every click. Esentially I guess you'd be sliding along the width of the 'active slide'. 2 items/divs being visible in the window is not a problem, neither is one being cropped off at the end. As the 'active' slide would always be the left most slide. Does this seem Ok, am I making any sense at all? I hope so! If anyone has seen something like this it would be great or maybe point me in the right direction. Cheers & thanks for reading, Ste |
|||||||