|
JavaScript - Psn Store Style Moving Text?
If anyone has a PS3 and goes on the PSN Store (PlayStation Network Store) you will get what i'm on about but does anyone know how I can use Javascript to make it when a user hovers over some text it will marquee but start from the position it was?
Example: A string like this wouldn't need to have a scroller when someone hovers over it: Hello but a string like this would: Hello i'm bob and how are you doing today?. as it would be to long to stay on one line in the div. So what i'm looking for is some sort of marquee that doesn't start off screen but calls the current texts position and then starts from there and then reverse itself to go from right-to-left to left-to-right when it's at the end of the text and when the user's mouse moves off the text it will just go back to its normal state. All text's which are to big for the div will have three dots added to the end and once mouse over they will go and the full text will start to scroll. If anyone can help me this would be a massive help. Thank You DJCMBear Similar TutorialsHello there, this is my first post on this forum. I have learned a good bit of PHP and have implemented it for use in my work as a math tutor. My kids are telling me, however, that it is too inconvenient to hit tab or click on the next text box and would prefer to use the old style pencil and paper. I thought of a good idea: Javascript would be able to automatically focus the curser on the next text box if some condition was met. For example: 6+7. If the textbox reads 13, it will focus on the next text box. Otherwise, nothing happens. This kills three birds with one stone; the user will know if they got the question right or wrong and it will move automatically if they got it correct. The problem is I lack any real JavaScript wisdom. I would guess this would be quite simple. The closest thing I have found upon searching was this from the user requestcode, but this has to do with once the user has typed in 4 characters it moves automatically. Code: <SCRIPT LANGUAGE="JavaScript">
function nextbox(fldobj,nbox)
{
if(fldobj.value.length>3)
{document.forms[0].elements[nbox].focus()}
}
</SCRIPT>
</head>
<body onLoad="document.myform.txt1.focus()">
<CENTER>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="txt1" SIZE="4" MAXLENGTH="4" onKeyUp="nextbox(this,1)">
Thank you for the help. I'm having major pains trying to figure this out. I'm kind of new to Javascript, I need to open a text file from an external server, store each line in an array, then search that array for a certain word (HIGH), and if it exists then write something to the webpage, and if not, write something else. Here is what I have so far: Code: <html>
<head>
<title>Test</title>
<script>
<!--
function test(x) {
if (wxd1txt.readyState === 4 && wxd1txt.status === 200) { // Makes sure the document is ready to parse and Makes sure it's found the file.
var wxd1text = wxd1txt.responseText;
var wxd1array = wxd1txt.responseText.split("\n"); // Will separate each line into an array
var wxd1high = wxd1array.toString(); //Converting the String content to String
//var highsearchreg = new RegExp("HIGH");
//var wxd1high = wxd1array[x].search(highsearchreg);
document.write(wxd1high);
if (wxd1high.search("HIGH") >= 0){
document.write("HIGH RISK");}
else {
document.write("NO RISK");}
}
}
//-->
</script>
</head>
<body>
Hi!
<script>
<!--
var Today = new Date();
var ThisDay = Today.getDate();
var ThisMonth = Today.getMonth()+1;
var ThisYear = Today.getYear();
var Hour = Today.getHours();
var Day2 = Today.getDate()+1;
var Day3 = Today.getDate()+2;
if (navigator.appName != "Microsoft Internet Explorer") {
ThisYear = ThisYear + 1900;}
if (ThisMonth < 10) {
ThisMonth = "0" + ThisMonth;}
if (ThisDay < 10) {
ThisDay = "0" + ThisDay;}
if (Hour == 2 || Hour == 22 || Hour == 23 || Hour == 0 || Hour == 1) {
var wxHourd1 = 0600}
else if (Hour >= 3 && Hour <= 10) {
var wxHourd1 = 1300;}
else if (Hour >= 11 && Hour <= 13) {
var wxHourd1 = 1630;}
else if (Hour >= 14 && Hour <= 16) {
var wxHourd1 = 2000;}
else if (Hour >= 17 && Hour <= 21) {
var wxHourd1 = 0100;}
//var wxurld1 = "http://www.spc.noaa.gov/products/outlook/archive/"+ThisYear+"/KWNSPTSDY1_"+ThisYear+""+ThisMonth+""+ThisDay+""+wxHourd1+".txt";
var wxurld1 = "http://www.spc.noaa.gov/products/outlook/archive/2010/KWNSPTSDY1_201005101300.txt" //(High risk day for testing)
//document.write(wxurld1); //Use this to verify this section is working
if (window.XMLHttpRequest)
{
wxd1txt=new XMLHttpRequest();
}
else // IE 5/6
{
wxd1txt=new ActiveXObject("Microsoft.XMLHTTP");
}
wxd1txt.open("GET", wxurld1, true);
wxd1txt.onreadystatechange = test();
// -->
</script>
</body>
</html>
When added to a webpage, nothing shows up except the "Hi!" and there are no errors in the Javascript Console in Google Chrome. Is this possible with Javascript, and if so, what am I doing wrong or not doing? Also, I have 2 URLs, one is a text file that has the HIGH text I want for an example, the other is the current file, which shouldn't have HIGH in it (unless the weather in the US turns really bad) I already looked at this http://codingforums.com/showthread.p...ht=moving+text thread and I know it's similar. I just don't know what I am doing wrong. My css puts the text where it needs to go, then the script is supposed to alter it's pixel position and so it should move, right? Code: <html>
<head>
<style>
item1 {position: absolute; left:20px; top:280px;}
item2 {position: absolute; right:20px; top:280px;}
</style>
</head>
<body>
<item1 id="item1" >item1</item1>
<item2 id="item2" >item2</item2>
<script type="text/javascript">
var i=0; var j=0;
var obj1=document.getElementById(item1);
var obj2=document.getElementById(item2);
obj1.style.visibility="visible";
obj2.style.visibility="visible";
//if (typeof obj1.style.left!="undefined" && obj2.style.right!="undefined")
//{
//loop from ParseInt to coordinates in center of screen
for (i=0;i<100;i++)
{
obj1.style.left=parseInt(obj.style.left) + i + "px";
document.write("<item1 id="item1">item1</item1>");
document.close();
}
//for (j=0;j<100;j++)
// {
// obj2.style.right=parseInt(obj2.style.right) + j + "px";
// document.write("<item2 id="item2" >item2</item2>");
// }
alert(i);
//}
</script>
</body>
</html>
Am I anywhere close? I am trying this on IE6 (I only have Windows 2000) and on Firefox 3.5.3. Hi. Stuck on an assignment, inserting 3 files that i am working with, unable to get the unhide or move functions working. Thanks for all your help. ***Index.htm Code: 01.<html> 02.<head> 03.<!-- 04. New Perspectives on JavaScript 05. Tutorial 4 06. Review Assignment 07. 08. Avalon Books 09. Author: Rexdreamer 10. Date: 08/12/09 11. 12. Filename: index.htm 13. Supporting files: ab.gif, ablogo.gif, avalon2.htm 14.--> 15.<title>Avalon Books</title> 16.<script type="text/javascript" > //insert embedded script that uses an if statement to test for W3C DOM 17. if (document.getElementById) location.href="avalon2.htm" //if supported browser load avalon2.htm using the href prop of the location obj 18.</script> 19. 20.</head> 21. 22.<body style="background-color: black"> 23.<p style="text-align: center"> 24.<img src="ablogo.jpg" alt="Avalon Books" /><br /> 25.<img src="ab.gif" alt="" /> 26.</p> 27.</body> 28.</html> ***Avalon.htm Code: <html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 4
Review Assignment
Avalon Books
Author: Chris Veal
Date: 08/12/09
Filename: avalon2.htm
Supporting files: kids.jpg, fiction.jpg, nfiction.jpg, scripts2.js, styles2.css
-->
<title>Avalon Books</title>
<link href="styles2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script2.js"></script>
<script type="text/javascript">
function placeObjects() { //insert function named placeObj
var w = winWidth/2; //declare variable named w that is =1/2 of the value returned by the winWidth function
placeit("avalon2", W-75, 0);
placeit("kids", W-75, 100); //place kids coordiantes at w75,100
placeit("fiction", W-75, 100);
placeit("nfiction", W-75, 100);
setZ("kids",z3) //use setZ functionto set zindex for kids object to 3
setZ("fiction",z2) //use setZ functionto set zindex for fiction object to 2
setZ("nfiction",z1) //use setZ functionto set zindex for nfiction object to 1
moveAvalon(); //call the moveAvalon function
}
function moveAvalon() {
var x = xc
if (x <= w-125);
shiftIt("avalon",10);
setTimeout("moveAvalon",50);
}
if (x > w-125) {
}
}
function swapImages() { //insert swapimages function, purpose to change the stacking order of the 3image obj
setTimeout("showIt('kids')");
setTimeout("showIt('fiction')");
setTimeout("showIt('nfiction')");
setTimeout("swapIt()", 2000);
}
</script>
</head>
<body onload="placeObjects()">
<div id="kids">
<img src="kids.jpg" alt="" /><br />
Sale this month on children's books
</div>
<div id="fiction">
<img src="fiction.jpg" alt="" /><br />
Fiction selection of the month
</div>
<div id="nfiction">
<img src="nfiction.jpg" alt="" /><br />
Non-fiction selection of the month
</div>
<div id="avalon">
Avalon <span id="books">Books</span>
</div>
</body>
</html>
***script.js Code: /*
New Perspectives on JavaScript
Tutorial 4
Review Assignment
Avalon Books
Name: Chris Veal
Date: 08/12/09
Function List:
xCoord(id)
Returns the x-coordinate of the object with id with the value id
placeIt(id, x, y)
Places the id object at the coordinates (x,y)
shiftIt(id, dx, dy)
Moves the id object dx pixels to the right and dy pixels down
showIt(id)
Hides the id object by setting its visibility style to "visible"
winWidth()
Returns the width of the interior browser window in pixels
winHeight()
Returns the height of the interior browser window in pixels
setZ(id, z)
Sets the z-index value of the id object
swapIt(id1, id2, id3)
Swaps the z-index values of id1, id2, id3
*/
function setZ(id, z) { // create new function called setZ with 2 parameters
object=document.getElementById(id); // use the value of the id parameter to select the obj in the document with that id value
object.style.zIndex=z; // set the z index of the object to the z parameter
}
function swapIt(id1, id2, id3) { // create new function called swapIt with 3 parameters
var object1=document.getElementById(id1); //getObj function to create the 3 variables named obj 1-3
var object2=document.getElementById(id2);
var object3=document.getElementById(id3);
var z1=object1.style.zIndex; //create 2 variables named z1-z3 set variables=to zIndex values of obj1-3
var z2=object2.style.zIndex;
var z3=object3.style.zIndex;
object1.style.zIndex=z3; //change the zIndex value of obj1 to z3thus moving it to the bottom of the stack
object2.style.zIndex=z1; //change the zIndex value of obj2 to z1thus moving it to the top of the stack
object3.style.zIndex=z2; //change the zIndex value of obj3 to z2thus moving it to the middle of the stack
}
function placeIt(id, x, y) {
var object=document.getElementById(id);
object.style.left=x+"px";
object.style.top=y+"px";
}
function shiftIt(id, dx, dy) {
var object=document.getElementById(id);
object.style.left=parseInt(object.style.left)+dx+"px";
object.style.top=parseInt(object.style.top)+dy+"px";
}
function xCoord(id) {
object=document.getElementById(id);
xc=parseInt(object.style.left);
return xc;
}
function showIt(id) {
var object=document.getElementById(id);
object.style.visibility="visible";
}
function winWidth() {
if (window.innerWidth) return window.innerWidth;
else if (document.documentElement) return document.documentElement.offsetWidth;
else if (document.body.clientWidth) return document.body.clientWidth;
}
function winHeight() {
if (window.innerHeight) return window.innerHeight;
else if (document.documentElement) return document.documentElement.offsetHeight;
else if (document.body.clientHeight) return document.body.clientHeight;
}
Hi all, I'm trying to get the cursor position to move to the end of the text within an editable iframe or div. I've been pointed to something called TextRange and have been reading up on it for days yet couldnt make sense of much (i'm still very new). what i'm trying to do is on a button click, the cursor will move to the end of the text in the iframe. any help or pointers would be greatly appreciated. thanks. Hello, I have tried on many forums, mayby here I will find answer. I have many divs with spans inside(just like it is below-no extra ids,classes for spans:/). Code: [...] <div> <span style="color:red;">a</span> <span style="color:blue;">b</span> <span style="color:white;">c</span> </div> <div> <span style="color:red;">d</span> <span style="color:blue;">a</span> <span style="color:white;">a</span> </div> [...] What I would like to achieve: user selects with mouse "ab", click button(input type=button) which remove style from selected span/spans. Similar behavior like it is in TinyMCE. 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 hi, i am working on an online store, i have a list of items in the store and i want a receipt containing the items selected from my store for purchase with their price and other details generated after the order is place. I want to achieve this using javascript... Please help out.
I have a BigCommerce Store. On the right-hand side of my store under My Favourites see (http://gatesunique.mybigcommerce.com/doodle-daddles/) if I click on add to cart: In Chrome it comes back with a blank page with "Add to my designAdd to my designAdd to my designAdd to my design" In Firefox it comes back with a blank page with "Add to my design" In i.e. it works perfectly and takes me to the fast cart. I have script which is supposed to change the label "compare" on the main products page to "add to my design" depending on which category was chosen. Here is the script. If I remove the script the cart works perfectly, but then of course I don't have the label changed as I want it. Please let me know if there is more information I can provide to get help with this. [CODE]<script type="text/javascript"> var doodle= "http://gatesunique.mybigcommerce.com/doodle-daddles/"; if (location.href==doodle){ document.write('<label for="compare_%%GLOBAL_ProductId%%">Add to my design</label>'); } else { document.write('<label for="compare_%%GLOBAL_ProductId%%">%%LNG_Compare%%</label>'); } </script>[ICODE] Hi, I just found this forum and I am hoping that someone will be able to help me. I am building a store locator for a website that I maintain; I am using a G! example http://code.google.com/apis/maps/art...sqlsearch.html. However, there seems to be some issues that I can't find... I have looked until I go blind... this is the php code that I am using: Code: <?php
require("stores.php");
// Get parameters from URL
$center_lat = $_GET["lat"];
$center_lng = $_GET["lng"];
$radius = $_GET["radius"];
// Start XML file, create parent node
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
// Opens a connection to a mySQL server
$connection=mysql_connect (localhost, $username, $password);
if (!$connection) {
die("Not connected : " . mysql_error());
}
// Set the active mySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ("Can\'t use db : " . mysql_error());
}
// Search the rows in the markers table
$query = sprintf("SELECT name, address, lat, lng, ( 3959 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) AS distance FROM markers HAVING distance < '%s' ORDER BY distance LIMIT 0 , 20",
mysql_real_escape_string($center_lat),
mysql_real_escape_string($center_lng),
mysql_real_escape_string($center_lat),
mysql_real_escape_string($radius));
$result = mysql_query($query);
$result = mysql_query($query);
if (!$result) {
die("Invalid query: " . mysql_error());
}
// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("name", $row['name']);
$newnode->setAttribute("address", $row['address']);
$newnode->setAttribute("lat", $row['lat']);
$newnode->setAttribute("lng", $row['lng']);
$newnode->setAttribute("distance", $row['distance']);
}
echo $dom->saveXML();
?>
And this is the java that I am using: Code: <script type="text/javascript">
//<![CDATA[
var map;
var geocoder;
function load() {
if (GBrowserIsCompatible()) {
geocoder = new GClientGeocoder();
map = new GMap2(document.getElementById('map'));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(40, -100), 4);
}
}
function searchLocations() {
var address = document.getElementById('addressInput').value;
geocoder.getLatLng(address, function(latlng) {
if (!latlng) {
alert(address + ' not found');
} else {
searchLocationsNear(latlng);
}
});
}
function searchLocationsNear(center) {
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'findstores.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
GDownloadUrl(searchUrl, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName('marker');
map.clearOverlays();
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (markers.length == 0) {
sidebar.innerHTML = 'No results found.';
map.setCenter(new GLatLng(40, -100), 4);
return;
}
var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute('name');
var address = markers[i].getAttribute('address');
var distance = parseFloat(markers[i].getAttribute('distance'));
var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
parseFloat(markers[i].getAttribute('lng')));
var marker = createMarker(point, name, address);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, address, distance);
sidebar.appendChild(sidebarEntry);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
});
}
function createMarker(point, name, address) {
var marker = new GMarker(point, icon);
var html = '<b>' + name + '</b> <br/>' + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function createSidebarEntry(marker, name, address, distance) {
var div = document.createElement('div');
var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + address;
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click');
});
GEvent.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
}
//]]>
</script>
I am at a complete loose as to where the problem lies. Thanks in advance for any help you can give me. Hi all Is there a way in Javascript to store a value to different variables in 1 command, something like: Code: Store 50 to nHeight,nWidth,nTop; or nHeight=nWidth=nTop=50; What I try to do is avoid errors by typing the value only once in code. I could do the following, but thought there might be a more direct way: Code: var nValueToStore = 50; nHeight = nValueToStore ; nWidth = nValueToStore ; nTop = nValueToStore ; I'm new to using cookies. I am using JavaScript for a web project and I'm using cookies and I have 5 links for different movie trailers and I have a trailers.html page with a div with a id="movie" and want to know so that when you click on a Movie trailer link so that it stores a value in a cookie so that you can check on the trailers page which trailer was chosen and display in the div tag
Hi all, I've been experimenting with Local Storage. I can do things like this just fine: localStorage.setItem('variable_name', variable_value); // write a value var variable_value = localStorage.getItem('variable_name'); // read a value localStorage.removeItem('variable_name'); // delete a value But if I do this: var object = { width : w, height : h }; ...then place it in local storage, reading it back gives me a TEXT STRING that says "[Object object]" and not the actual object. I would like to be able to store multiple values in one object, but it doesn't seem to work. I also tried to store a variable obtained with "document.getElementById" and when read back it just says [HTMLDivElement] (something like that) instead of the actual element. Am I doing something wrong, or does local storage not support objects? (btw, tested on FF 3.6). Thanks! -- Roger So I was wondering instead of calling document.getElementById('theTest').innerHTML; multiple times is it possible to store this as a variable and then access this later? If I want to change it though Have to go document.getElementById('theTest').innerHTML = something: right? Is it even worth it to do something like this or is document.getElementById('theTest').innerHTML fast enough? Thanks. Greetings I have a textarea on my page and I wonder if its possible for a visitor to type in something in the textarea and then it will store in XML is it possible? Best Regards Obsivus What is wrong with my code? I am trying to move a div and it wont work at all. Also my little <a> fix is really sloppy. Could I have some help with how I should fix that too? Thanks! Code: <html>
<head>
<script type="text/javascript">
var obj = document.getElementById("object");
var x = parseInt(obj.style.left);
var y = parseInt(obj.style.top);
function right(){
obj.style.left = "" + (x + 1) + "";
}
function left(){
}
</script>
</head>
<body>
<a href="" onclick="right();">
<div id="container" style="position:absolute; top:100px; left:50%; margin-left:-400px; width:800px; height:600px; border:3px solid #808080;">
<div id="object" style="position:relative; top:559; left:379; background-color:#CCCCCC; width:40px; height:40px; border:1px solid #696969;">
</div>
</div>
</a>
</body>
</html>
Right now I am trying to grab all the links on a html page a store them in an array so that they can be accessed by a loop that makes sure that each one works. Right now I am not getting very far with it. If someone could help me I would be greatly appreciative.
I have a Cisco ASA that I use as a proxy server as such. I have a internal site that it will not pass credentials to so I was looking for a way to do that. Not being a site developer the only way I can come up with is to maybe pass it by using a cookie to store the password and ID. Below is the code I am trying to use. I can create the cookie with the code below but it will not change the PATH or the Domain for some reason. Also I do not think it is reading from the cookie not sure why. Basically I need it to set the cookie with the user info and then grab the info from the cookie to auto log the user in to the internal site. <script type="text/javascript" language="JavaScript"> <!-- function writeCookie( ) { var username = document.form.username.value; // Get the user's name var password = document.form.password.value; document.cookie = "UserIDPW=" + username + "=" + password; // Create the cookie } //--> <form name="form" id="unicorn_form" method="POST" onsubmit="writeCookie()" onsubmit="disableButton()" action="/+webvpn+/index.html" onsubmit="return onSubmit();"> <td nowrap id="username_field"> <p align="right"> <span style="font-size: 8pt; font-weight: 700"> <font face="Trebuchet, arial" color="#FFFFFF"> <b>User ID:</b> </font></span></font></td> <td valign="middle"> <input class="formData" size="20" type="password" id="password_input" name="username" value=""> </td> </tr> <tr> <!-- password prompt --> <td nowrap id="password_field"> <p align="right"> <span style="font-size: 8pt; font-weight: 700"> <font face="Trebuchet, arial" color="#FFFFFF"> <b>Password:</b> </font></span></font></td> <td valign="middle"> <input class="formData" size="20" autocomplete="off" id="password_input" name="password" type="password"> </td> </tr> <tr> <td> </td> <td align="center"> <!-- "log in" button --> <input type="submit" name="Login" value="Log In" class="button"> Hi, I am trying to write a small javascript program where I can call the following two functions and store information which a user enters. The problem is if I call the function a second time to add more information the array gets overwritten. info () insert (name, surname, favouriteColour) function info () { name = prompt ("Please enter your name."); surname = prompt ("Please enter your surname."); favouriteColour = prompt ("Please enter your favourite colour."); } function insert (name, surname, favouriteColour) { var info = new Array (); info.name = name; info.surname = surname; info.favouriteColour = favouriteColour; return info }; Help is really appreciated.. Hello, I wanted to know how can I go through all the text on a page and store a unique ocurrence of every word in a array. Just point me on the right direction if you may. Got lost in translation... Lg |
|||||||