|
JavaScript - Image/news Displayer - Help Appreciated
Hey.
Right, so I've just paid a guy to design and code just the layout files, not the content, panels, etc. I've coded a panel which will allow my staff to post news articles which will be displayed on the main website. Adding, Editing, Deleting news and all the rest works 100% fine however it appears that the designer has coded the news displayer into a .JS (javascript) file. The news displayer looks like this: ^ This is what it looks like when you hover over one of the 3 news items shown on the right. The image (blue box) changes depending on which news item you hover over This is what it looks like when you then hover over the image for that article: The HTML: Code: <div class="left"> <div id="headline_image_box"> <a href="#"> <img name="imagename" src="_images/_headlines/1.png" alt="Description" /> <span class="desc" id="description"> <script type="text/javascript">writetext(firsttext)</script> </span> </a> </div> </div> <div class="middle"> <a href="#"> <div class="headline" onMouseover="document.imagename.src=image1.src, writeDesc(desc1)" onMouseout="document.imagename.src=image1.src"> <strong>So far so good for Wiggins</strong><br /> Team Sky's Bradley Wiggins says he's going from strength to strength at the Vuelta a Espana. </div> </a> <a href="#"> <div class="headline" onMouseover="document.imagename.src=image2.src, writeDesc(desc2)" onMouseout="document.imagename.src=image2.src"> <strong>Spurs locked in Cahill talks</strong><br /> Bolton Wanderers and Tottenham Hotspur are locked in talks regarding a deal for Gary Cahill. </div> </a> <a href="#"> <div class="headline" onMouseover="document.imagename.src=image3.src, writeDesc(desc3)" onMouseout="document.imagename.src=image3.src"> <strong>Santon set for medical</strong><br /> Italy international Davide Santon has arrived in England to finalise a move to Newcastle United. </div> </a> </div> The Javascript File: Code: if (document.images) {
image1 = new Image
image2 = new Image
image3 = new Image
image1.src = "_images/_headlines/1.png"
image2.src = "_images/_headlines/2.png"
image3.src = "_images/_headlines/3.png"
}
var desc1='<strong>13th AUG</strong>Description 1'
var desc2='<strong>12th AUG</strong>Description 2'
var desc3='<strong>11th AUG</strong>Description 3'
function writeDesc(what){
document.getElementById('description').innerHTML=''+what+'';
}
Database Structu Code: CREATE TABLE IF NOT EXISTS `news` ( `id` int(2) NOT NULL AUTO_INCREMENT, `title` varchar(100) NOT NULL, `author` varchar(100) NOT NULL, `category` varchar(100) NOT NULL, `article` varchar(50000) NOT NULL, `image` varchar(500) NOT NULL, `j` varchar(5) NOT NULL, `M` varchar(5) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ; j = Date with letters on end. Eg. 4TH M = 3 character form of month. ALL details submit into database fine, that is not my issue. My issue is that I want to get the latest three articles from the database and echo the values from the database into the javascript however this stuffs up the script completely. I'm not very experienced with using Javascript & PHP together but I noticed something was wrong when I echoed it into the script. Anyone with any ideas/suggestions it'd be very helpful and appreciated! I'd prefer not to have to change to a completely new script, so if you have a way to integrate the MySQL information into the Javascript it'd be great! Similar TutorialsHi, Does anyone know how to change the rssdisplayer.js code so that when someone clicks on the feed output links, the results show in a new window or new tab? Your assistance will be highly appreciated. Bastos 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; } }); I have to design a javascript program to capture five different numbers (monetary values), and save it in memory. Then another one that converts that value to, let's say, Euros, and display interest and commisions (which are values I'll have to add later, but the actual coding for the calculation is what's confusing to me. Let's just say, take 10% out of the initial value for interest, and 15% for commission). I would appreciate any help
Hi all, I have just stated university a few weeks ago and have never programmed before.I am really stuck on this assigment .In the programm you have to enter you date of birth throught prompt (22).then your year of birth (yyyy),then your month (nov). I am really stuck and have been for days in requards how to put the information gained through prompt function into a date object().So i can get the users day of birth .Heres the code i have written .the varibles num5+num9+num1 is the users input but i just dont know how to assign it to the date object I have tryed heaps of ways but carnt get any thing to work .Please Help. head> <script> var tit1=('<title> Get your Stats </title>'); var tit2=('<h1> IT\'s about time...</h1><br /> ') var num1 =(''); num1=prompt('Enter The Year You Were Born','19XX'); var currentTime = new Date() var year = currentTime.getFullYear() var ansVar = year-num1; //User input year calculation var ageEx = (ansVar/62.7)*100; // Life% calculation var num2=ansVar var num3= ansVar*365.2424; // Days calcuation var month =('janfebmaraprmayjunjulaugsepoctnovdec'); var num5 =(''); num5=prompt('Enter The Month You Where Born','jan'); num5=(num5.substring(0,3)); var lowCas=(num5.toLowerCase());//users input conmverted to lower case/ var num9=prompt ('Enter you date of birth','29'); var d = new Date (num5+num9+num1)//<<<<this random date entered here will give the day. alert (d); //STUCK HERE HOW DO I CONVERT num5+num9+num1 to a day????????:: document.write(tit1); //output document.write(tit2); document.write(('You have lived ')+ageEx.toFixed(0)+('% of your life.<br />')); document.write(('You are ')+ansVar+(' years old.<br />')); document.write (('You are ')+num3.toFixed(0)+(' days old.')); </script> </head> </html> Any advise would be appreciated thanks Shayne darcy. Hi All, I have two scripts which I want to try and integrate. I am using a nice gallery script to show thumbnails which are appended to a an image wrapper which on click of the thumbnail shows the larger image in the image wrapper, I am trying to implement cloud zoom which is a plugin which uses image srcs to then point to an anchor href to show another larger zoom image either in the same place.. which is what I am trying to do or in another div beside. I have had to set me img srcs up in a certain way to easily enter some product details. and I need to try an manipulate the code to make it work to suit my file layout. I am using a var= images [ with a series of file locations and info such as below { src: 'romanticabride/thumbs/tn_Shauna.jpg', srcBig: 'romanticabride/images/Shauna.jpg', title: 'Shauna', longDescription: '<b><H1>Shauna</H1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:tracy@cherishbridal.co.uk?subject=Web Enquiry Regarding Romantica Shauna Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>' }, what I need is for cloud zoom to work when the main image wrapper is hovered over which means it will need to add a class or when the whichever srcBig: is hovered over it gets wrapped by href to make the script work . one of my pages is http://www.cherishbridal.co.uk/romaticabride.html the cloud zoom script is at http://www.professorcloud.com/mainsite/cloud-zoom.htm.. I am happy to share a jsfiddle with someone or explain further or post some code. Thank you in advance Hi. I'm trying to make a news slider for a website in js. This is what I currently have: Code: <script type="text/javascript">
var refresh = setInterval("refresh()", 5000);
function refresh()
{
$('#top_news').load('top_ten.php').fadeIn("slow");
}
</script>
The id #top_news is an empty div, in which the news are shown, and the file top_ten.php gets top 10 news from the database, and outputs a random one. The script is working fine, but what I want is, for news to slide in and when a new article slides in, the old one slides out. It would be even better, if there is an excistant script, for news or divs (a small image and text). ALSO, when I refresh/load the site, it takes the time from setInterval, to load the news. Thanks 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 Today, all major cell phone makers (exept apple) announced that they will support a common app standard based on html, css, and javascript. Article: http://news.yahoo.com/s/afp/20100215...owapplications This means that we can use our web skills to make applications for mobile phones. Previously, we would have to invest learning time into a closed-path system like the iPhone's Objective-C, or a minor player's API like webOS. Called BONDI, it's basically a webpage with some extra generic DOM handles for using system features like fetching contact lists, GPS, sending SMSs, playing a sound, etc. While I am not blown away by the demo widgets linked below, i realize they are little more than "hello world", as much actually as figuratively. I expect support and development to entrench around this simple standard, so more and more hardware features will gradually start working on more and more devices. It's the same notion as the JS/HTML software i wrote years ago for firefox that now works in IE8... Check it out: http://bondi.omtp.org/usebondi/Lists...Y/Gallery.aspx I encourage all to participate in developing for open source platforms like BONDI. While there's more money right now in iPhone, the future belongs to us. Don't support proprietary techs! Besides, i cannot imagine that Apple/some fan boy will not eventually add BONDI support to iPhones; they already have a browser! Hi I'm really new to this and don't really know if I'm in the right place as for posting. I'm trying to figure out if there is a way to have like a news column on each html page that can be updated by making changes to one file. Kinda like a embedded window that gives a sample of some of the text on the highlights page and then has a click to read more. I was thinking a javascript app would be best but I new at this and don't really understand everything. If someone has an idea or can help it'd be appreciated
I'm performing a little maintenance on my news scroller. You can see the scroller on http://www.hogwarts-rpg.net (it's on the right side). Here's the JavaScript: Code: var pos = 300;
var scrollTimer;
function scroll()
{
if (!document.getElementById)
{
return;
}
var obj = document.getElementById("newsText");
pos -= 1;
if (pos < 0 - obj.offsetHeight)
{
pos = 300;
}
obj.style.top = pos + "px";
scrollTimer = window.setTimeout(scroll,60);
var myNewsText = document.getElementById("newsText");
myNewsText.onmouseover = function(){window.clearTimeout(scrollTimer);}
myNewsText.onmouseout = function(){scroll();}
}
window.onload = scroll;
Here's the CSS: Code: /******* NEWS TICKER *******/
#newsBody {
width: 200px;
height: 300px;
color: #000000;
font-weight: bold;
background-image: url(/images/misc/parchment-scroller-background2.jpg);
background-repeat: no-repeat;
}
/******* LINK COLORS FOR THE TICKER *******/
#newsBody a:link, #newsBody a:visited, #newsBody a:active { text-decoration: underline; color: #000000; }
#newsBody a:hover { text-decoration: underline; color: #0000FF; }
/******* WHERE THE ACTUAL TEXT APPEARS *******/
#newsWindow {
width: 100px;
height: 230px;
overflow: hidden;
position: absolute;
top: 200px;
left: 50px;
}
#newsText {
width: 100px;
position: relative;
top: 25px;
font-size: x-small;
}
Basically, I'm trying to make it where it A) resets quicker when it's done with a full scroll-through, and B) where it doesn't scroll up past its containing div (newsWindow in this scenario). I'm sure I'm missing something so simple, but I've been working on it all night without much headway, and I'm exhausted, so there's my excuse. I know that having pos set to reset at 300 might cause a delay in the text showing itself again, but that's to give the effect that it goes "all the way around," if you know what I mean. Even with it not resetting so high, the function still takes longer to reset than I would like it to. Hi ! I would like to have a box in which to loop several html files (every 5 seconds or more) .. or to change the file by pointing buttons at the bottom at the box ... (without making click, just mouseover) I don't know if this is only based on JavaScript .. I don't know if the terms (box .. loop .. html .. buttons) describe exactly what I want to have ... I Googled it for hours .. To be more specific, you could see the well known radio site http://www.wabcradio.com/ and on the left there is Today's Top Stories .. That's what I'm looking for ... I would like to find some site with demos and codes (if possible). Thanks ! PS. I hope I didn't some kind of publicity by putting that link (I'll wipe it out if it's the case .. I've read the rules, and I posted the link because it's not my site and that isn't in any case an advertisement. And I think it is the best way to show what I am asking ... Thanks again ! ) Hello, i wanna make animated news bar like the one in the top of site alibaba.com, so how can i do that, anybody have any kind of tutorial for any thing like this please ? thanks Hi, im fairly new to coding and need a little bit of help. Does anyone know ho to create a news section like the one on liverpoolfc.tv? Maybe someone knows of a tutorial that could help me or? 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> 1. I have code to show tip like: <a class="notvisible" onclick="mytip.disable();" href="javascript:void(0);">Close</a> How is correct Javascript code to Close this tip when clicked? 2. How to move next news feed with click on arror icon and back icon? <a onclick="mynews.previous();" href="javascript:void(0);">Previous</a> <a onclick="mynews.next();" href="javascript:void(0);">Next</a> How is correct Javascript code to move news item next and prevoius news? when clicked? <script type="text/javascript"> mynews.init(); mytip.init(); </script> 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 Hi 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 I'd google it but I'm not an expert at judging the age of code yet.
|
|||||||