|
JavaScript - Need Help Styling Common Content Made With Javascript
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> ");
Similar TutorialsI 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 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?
Is there any way to use css to make a style for a javascript command such as document.write? I want to be able to control its position, font, color, and size Hello Guys I'm new to Javascript I think that the way I have worded the title may be incorrect, as I've googled similar phrases without finding anything to help me Anyway onto the issue I have a dropdown menu you can see it he http://heavywoollen.webs.com It's written in html & css, now I've had to put the code for the dropdown onto every page of the site, simply because at the time that was all i knew how to do, so I'm now trying to reduce it by writing it on JS and link the file into the page so the issue/question I have written the menu in JS, but my question is How is it styled? or how is the css file appiled? in the html I use < div id =" navMenu "> </div> and in the css there is # navMenu so I can understand how that works, but I can't figure out how to apply it into javascript, I think simply because I don't know enough about JS to know what the link tag is, if it exists at the moment the JS file simply reads link this Code: //Admin Options - open <ul>
document.write("<ul><li><a href=#>Admin</a><ul><li><a href=index.html>Home</a></li><li><a href=history.html>History</a></li></li><li><a href=constitution.html>Constitution</a></li><li><a href=Code of Conduct.html>Code of Conduct</a></li><li><a href=League Meetings.html>League Meetings</a></li><li><a href=Club Contacts.html>Contacts</a></li><li><a href=League Officials.html>League Officials</a> </li><li><a href=League Policy.html>Policy</a> </li><li><a href=Duty of Care.html>Duty of Care</a> </li><li><a href=Helmets.html>Helmets</a> </li><li><a href=Fielding Regulations.html>Fielding Regs</a> </li><li><a href=Fast Bowling.html>Fast Bowling</a> </li><li><a href=Unfair Bowling.html>Unfair Bowling</a> </li><li><a href=Umpires.html>Umpires</a> </li><li><a href=Laws of Cricket.html>Cricket Law</a> </li><li><a href=CRB.html>CRB Check </a> </li></ul></li>");
//Clubs
document.write("<li><a href=#>Clubs</a><ul><li><a href=clubs-adwalton.html>Adwalton</a> </li><li><a href=clubs-altofts.html>Altofts</a> </li><li><a href=clubs-azaad.html>Azaad</a> </li> <li><a href=clubs-batley.html>Batley</a> </li><li><a href=clubs-birstall.html>Birstall</a> </li><li><a href=clubs-brighouse.html>Brighouse</a> </li><li><a href=clubs-carlton.html>Carlton</a> </li><li><a href=clubs-cleckheaton.html>Cleckheaton</a> </li><li><a href=clubs-driglington.html>Drighlington</a> </li><li><a href=clubs-eastardsley.html>East Ardsley</a> </li><li><a href=clubs-gildersome.html>Gildersome</a> </li><li><a href=clubs-gomersal.html>Gomersal</a> </li><li><a href=clubs-hangingheaton.html>Hanging Heaton</a> </li><li><a href=clubs-hartsheadmoor.html>Hartshead Moor</a> </li><li><a href=clubs-holmevalleygirls.html>Holme Valley Girls</a> </li><li><a href=clubs-hunsletnelson.html>Hunslet Nelson</a> </li><li><a href=clubs-liversedge.html>Liversedge</a> </li><li><a href=clubs-methley.html>Methley</a> </li><li><a href=clubs-mirfield.html>Mirfield</a> </li><li><a href=clubs-mirfieldpc.html>Mirfield PC</a> </li><li><a href=clubs-moorlands.html>Moorlands</a> </li><li><a href=clubs-morley.html>Morley</a> </li><li><a href=clubs-newfarnley.html>New Farnley</a> </li><li><a href=clubs-ossett.html>Ossett</a> </li><li><a href=clubs-rothwell.html>Rothwell</a> </li><li><a href=clubs-scholes.html>Scholes</a> </li><li><a href=clubs-townville.html>Townville</a> </li><li><a href=clubs-wakestmichs.html>Wake St Michaels</a> </li><li><a href=clubs-wakethornes.html>Wakefield Thornes</a> </li><li><a href=clubs-westbretton.html>West Bretton</a> </li><li><a href=clubs-wrenthorpe.html>Wrenthorpe</a> </li></ul></li>");
//League Tables & Fixtures
document.write("<li><a href=>Leagues</a><ul> <li><a href=fixtures.html>Fixtures/Results</a> </li><li><a href=leaguetables.html>Tables</a> </li></ul></li>");
//Representative
document.write("<li><a href=#>Representative</a> <ul> <li><a href=lordtav-u11.html>Lord Taverners U11</a> </li><li><a href=lordtav-u15.html>Lord Taverners U15</a> </li><li><a href=coaching.html>Coaching</a> </li><li><a href=teamwear.html>Team Wear</a> </li></ul></li>");
//Links
document.write("<li><a href=#>Links</a> <ul><li><a href=http://www.ecb.co.uk/>ECB</a> </li><li><a href=http://www.ecb.co.uk/development/ecb-coaches-association/>ECB CA</a> </li><li><a href=http://www.yorkshirecb.com/>YCB</a> </li><li><a href=http://www.yorkshirecricketboard.org.uk/index.php?option=com_content&view=article&id=103:yorkshire-senior-schools-cricket-association&catid=271:yssca&Itemid=49>YSCA</a> </li><li><a href=http://www.yorkshirewca.co.uk/district.html>YWCA</a> </li><li><a href=http://www.homeoffice.gov.uk/agencies-public-bodies/crb/>CRB</a> </li></ul></li>");
//Photo Gallery - closing </ul>
document.write("<li><a href=#>Other</a> <ul><li><a href=#>Photo Galllery</a> </li><li><a href=#>Player Registration</a> </li></ul></li></ul>");
Apologies if that is too much code for a post so there is nothing else on the sheet do I need to use a link tag? How do i get the JS file to relate to the #navMenu of the css file? Thanks Rob Hi Experts, i have 2 JS array and i need to have dependency between them knowing that 1st Array has parent element of the 2nd one. i.e ARRAY1 ID VAL ID2 2 Dep1 10 3 Dep2 20 4 Dep3 30 ARRAY2 ID VAL ID2 PARENT 20 team1 11 10 21 team2 12 10 22 team3 13 20 23 team4 14 30 i need to have two different DDL's where when i choose VAL = Dep1 on ARRAY1 , i should see on the 2nd DDL only elements with parent corrsponding to Dep1 ( PARENT =10). how this can be possible thanks I have been looking for someone that can make this for me. I need a program made to register accounts to this url > Register :: The Pokemon Moon RPG :: Online Pokemon RPG Game What it needs to do: Needs to use proxies Needs to use a proxy for 1 account, so say 500 accounts it needs to have 500 different proxies. Needs to be able to have a timer to make it wait ie. Wait between 1min - 3 hours between account Needs to randomize account names(that people would make their names) Needs to randomize account passwords If possible make it able to make the account, then log in to it and sit on the account for random times ie. 4 minutes or 4 hours or longer of shorter. I will donate money to whoever does this for me, I also have something else I would like to be made, so if whoever wants to be donated to twice just let me know! Reply With Quote 02-01-2015, 04:06 AM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts Completely unethical. And probably illegal, in the sense that it violates the "Terms of Use" he Terms Of Use :: The Pokemon Moon RPG :: Online Pokemon RPG Game Users must not engage in any sort of attempts to hack this website and/or its users. (And we all know what the "something else" you want made will be. Something that gets credits in the game, somehow.) What is the point of this? Why does anybody want to cheat at an online game where there is no money reward involved. I mean I could understand trying to hack a poker site if real money is involved. But just for credits, in a game? *sigh* If I win a game, I want to know I won it the right way, not by cheating. And, if you really do get high on cheating, I'd think you'd at least want to do so with your OWN cheat, not by just buying one. I simply do not understand the attraction to this kind of stuff. So after some studying I have a pretty decent method using objects. I built it so that you hit the first number, then you would hit a plus or minus then the second number. The problem is just getting the buttons to define variables and run functions. Quote: <html> <head> <script type="text/javascript" > x=10; h=1; var numbs = new Const(x) function Const(one){ this.x=one; ADD(this.x) if(h=1){ function ADD(a){ y=5; b=y+a; alert(b); }}} </script> </head> <body> <input type="button" value="1" onclick="needs to run all that AND set x=1 and h=1"> </body> </html> Also I plan on going back and making y, which is the second number you're adding, an object. For now I'm just setting it equal to something so I don't have to mess with it. I am one problem. When i click a link a some information in html is to be displayed on the screen. I have written code for that. But before i click the link i am able to display the content. Please look into my code and give some suggestions: <html> <head> </head> <body> <center> <table> <tr> <td> <a href="javascript:Chg1()">Add Required (Features)</a> </td> <td> <a href="javascript:chg2()">Add via Search</a> </td> <td> <a href="javascript:Chg3()">Add via List</a> </td> </tr> </table> </center> function chg2() { document.write(<b> Type Model Feature Relationship Search and Add </b>);s <table> <tr> <td> Type<input type="text" id="type" name="type" value=""> </td> <td> Document Number<input type="text" id="doc" name="doc" value=""> </td> </tr> <tr> <td> Model<input type="text" id="model" name="model" value=""> </td> <td> Promoted<input type="text" id="promoted" name="promoted" value=""> </td> </tr> <tr> <td> Feature<input type="text" id="feature" name="feature" value=""> </td> </tr> </table> } </script> </body> Hey guys. I made a chat client today (my first one and it's pretty sweet so far) I have a speed problem though http://xonicgames.com/hudson/chat.php Once there are ~20+ posts it starts getting slow (at least on my connection) It does an ajax request every 500 seconds (dont know if that should be slowed down or not) What can I do to speed it up? Thanks I have a div that changes background on click. Example: <script type="text/javascript"> function changeBackground(strURL) { document.getElementById('about').style.backgroundImage="url("+strURL+")"; } </script> <body> <div id="about"> <a href="#about" onClick="changeBackground('mainbackground.jpg');">text</a> <a href="#about" onClick="changeBackground('background2.jpg');">text</a> </div> This part works just fine so no issues. However, I have content on the mainbackground.jpg that is getting transferred over to the other backgrounds as well. I would like each background to have its own paragraph content. I do not want to embed the info into the images for SEO reasons. Any ideas on how to do this? Thanks! Hi, I am creating a webpage to display menu items in a div tag. The premis of my page is to use 4 div tags. 1st div tag = company logo (top left) 2nd div tag = img of restaurant and address (top right). 3rd div tag = horizontal menu with text or buttons to call up menu items, for example: Lunch: Dinner: Beverages: Driving Directions, etc 4th div to display content pages. For example, if the user clicks the Lunch button, it would call the lunch page and place it into the 4th div tag. I am able to do this with frames in HTML or content pages in ASP.net, but how would I do it using CSS and div tags. The best response I got was with AJAX, but I am not familiar with this language yet. Can I use JavaScript to do this? Any suggestions? Thank you, Paul I'm sorry I don't have a website to go with my question...it's on a dev server. But it's fairly simple I think. I have a php script running server side that I'm looping through (using different numbers at the end of the php page to get new content each iteration), and I want to grab the content of the php page to display, inside a google maps infowindow ideally. The problem is, right now the infowindow displays just the link. I want the content of what the link is (which is just a few words in any case). Here's the general code where I place the page inside a variable and then try to display the contents of the page in html variable (the link I show here won't work but it gives you the idea): Code: var hazard_links = "https://ch.noaa.gov/m/googleapi/rec/extracthazards.php?lat="+lat+"&lon="+lon; var html = '<span style="font-size: 10pt; color: red;"><hr><a href="'+hazard_links+'" target = "_blank">' + hazard_links + '</a>' + '<span style="font-size: 10pt; color: red;">'; Thanks for any help, Hi, Im new to javascript. I want to add a similar function on my blog like on http://techcrunch.com/2011/08/04/gro...tartup-obtiva/ when you press on author. It is a drop down made with javascript. Anybody can help with a similar javascript as I was trying different implementations for the whole night with no luck. Maybe, anybody know a similar javascript online which I could modify? Thanks in advance! I am trying to get a div's content to change using javascript but for some reason it is not working and i get no errors looking at the error console. the code that is waiting for the content... Code: <div style="font-weight: bold;">count = <div id="desc" style="float: left;"></div> descriptions to do.</div><br clear="all" /> the code that should change the content.... Code: <? echo("<script type=\"text/javascript\">
document.getElementById('desc').value='" . $count . "';
</script>");
?>
when i view the source code the javascript lines show like so... Code: <script type="text/javascript">
document.getElementById('desc').value='373';
</script>
do i have the javascript correct ? Howdy folks, New to Javascript programming. I was able to do decent javascript (getting refereces to various elements on a page and read attributes or set attributes)...but when I try to do same kind of programming in a content page, it misbehaves. For example a have a table element on the content page and button. in the onclick event of the button control, I am getting the <td> element and change its colors. but for some reason instead of changing the color of just the <td> element, the entire content page as well as Master page changes. can someone guide me please. Code: <%@ Page Title="" Language="C#" MasterPageFile="~/DMS.Master" AutoEventWireup="true" CodeBehind="Javascript_RetrievingByTagName.aspx.cs" Inherits="DMS.WebUI.Javascript_RetrievingByTagName" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
<script type="text/javascript">
function changecolors() {
var a1 = document.getElementsByTagName("td");
var a1Length = a1.length;
for (var i = 0; i < a1Length; i++) {
a1[i].style.background = "#aaabba";
}
}
</script>
<table id="mytable" border="1">
<tr>
<td id="lefttd0">Left column</td>
<td id="righttd0">Right column</td>
</tr>
<tr>
<td id="lefttd1">Left column</td>
<td id="righttd1">Right column</td>
</tr>
<tr>
<td id="lefttd2">Left column</td>
<td id="righttd2">Right column</td>
</tr>
</table>
<a href="#" onclick="return changecolors();">Click to Change Colors</a>
<input id="Button1" type="button" value="button" onclick="changecolors();"/>
</asp:Content>
thanks I am having a time trying to figure out why my code erases all of my content, and only renders the document.write code. I want to use this inside my html and php so customers will be informed of minimum purchases for free delivery. Any help is appreciated. Code: <html>
<title>Title Page</title>
<head>
<script type="text/javascript">
function getCookie(zip)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==zip)
{
return unescape(y);
}
}
}
function setCookie(zip,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var zip_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=zip + "=" + zip_value;
}
<!-- Function to Change Zip-Code, or empty cookie !-->
</script>
</head>
<style>
.container{
position: relative;
width: 1000px;
margin: 0 auto;
}
.left{
width: 200px;
background: #EEEEEE;
position: absolute;
top: 0px;
height: 50px;
}
.middle{
width: 600px;
background: #CCCCCC;
margin-left: auto;
margin-right: auto;
height: 300px;
}
.right{
width: 200px;
background: #FCFCEC;
position: absolute;
top: 50px;
height: 250px;
}
</style>
<body onload="checkCookie()">
<div class="container">
<div class="middle">Hello Main Content Area<br>
This is the main area, all the bull is going on here.
</div>
<div class="left">Hello Lefty</div>
<div class="right">This is where I want the document.write output to be...
<script>
function checkCookie()
{
var zipcode=getCookie("zipcode");
if (zipcode!=null && zipcode!="")
{
document.write("Zip-Code: " + zipcode);
if (zipcode==33820)
document.write("<br> Minimum purchase for delivery is: <br>$300.00");
else if (zipcode==33920)
document.write("<br> Minimum purchase for delivery is: <br>$235.00");
else if (zipcode==34216)
document.write("<br> Minimum purchase for delivery is: <br>$150.00");
else if (zipcode==33572)
document.write("<br> Minimum purchase for delivery is: <br>$150.00");
else if (zipcode==32712)
document.write("<br> Minimum purchase for delivery is: <br>$300.00");
else if (zipcode==34679)
document.write("<br> Minimum purchase for delivery is: <br>$150.00");
else if (zipcode==33823)
document.write("<br> Minimum purchase for delivery is: $300.00");
else if (zipcode==33827)
document.write("<br> Delivery by Common Carrier");
else
document.write("<br> Please call Melco at: 1-800-950-3722");
}
else
{
zipcode=prompt("Please enter your Zip-Code:","");window.location.reload();
if (zipcode!=null && zipcode!="")
{
setCookie("zipcode",zipcode,365);
}
}
}
function deletecook()
{
var d = new Date();
document.cookie = "v0=1;expires=" + d.toGMTString() + ";" + ";";
}
</script>
<a href="javascript:deletecook();">Change Location</a>
</div></div>
</body>
</html>
I have a div that changes background on click. Example: <script type="text/javascript"> function changeBackground(strURL) { document.getElementById('about').style.backgroundImage="url("+strURL+")"; } </script> <body> <div id="about"> <a href="#about" onClick="changeBackground('mainbackground.jpg');">text</a> <a href="#about" onClick="changeBackground('background2.jpg');">text</a> </div> This part works just fine so no issues. However, I have content on the mainbackground.jpg that is getting transferred over to the other backgrounds as well. I would like each background to have its own paragraph content. I do not want to embed the info into the images for SEO reasons. Any ideas on how to do this? Thanks! is there any way to discard certain changes made to CanvasPixelArray? i'm writing an bounding box detection algorithm. i scan across until i hit a specific pixel. while i'm scanning i'm also modifying the pixels (say to green) to indicate that they are bank. i am not interested in partly filling the last scanline because it does not indicate an object boundary, it merely serves to tell me that the previous full line is the boundary. if i call putImageData each time i successfully reach the end of the canvas horizontally (kind of like a DB transaction), i want to be able to not write the changed pixels out to Canvas on the line which didnt complete a full scan across. is there any way to discard this data? or do i need to run a second pass when each line is complete to modify the pixels? thanks, Leon Hi! I'm no JavaScript expert so wonder if you could help? I have a page with four divs, and would like to change the content in each div by clicking on a link under each div. Can this be done with JavaScript? I've searched everywhere for the last three hours and cannot find any 'readymade' code. Can anyone help me or point me in the right direction? Any help will be really welcome! Thank you! Is there a Javascript code to change multiple affilate link/content daily?
|
|||||||