|
JavaScript - Text Expander/trimmer Ellipsis Trouble
http://www.akirathedon.com/wp-conten...urama/TEST.php This code works almost perfectly for my needs bar one issue. As i have included paragraphs in the content, the ellipses is forced below the paragraph, when ideally it would sit directly next to where the text was trimmed. Can anyone think of a way I can do this with javascript or css?
I tried making the paragraph an inline block and setting the ellipsis to inline but I lost my paragraph line breaks. Thanks you. Similar TutorialsNew to JS, and not too good at it. Trying to take some prewritten code and add script that displays some random text. Having trouble with assignment. Instructions are to replace a section of the file I am given with a script element. In the script element I am suppose to declare a variable named tipNum equal to a random integer between 1 and 10 returned by the randInt() function (which I made and have shown below). Then I am suppose to use a series of document.write() methods to write the following HTML code into the page: Code: <h1>Random Tip<br />title</h1> <p>tip</p> (Where "title" is the title of the random text as generated by the tipTitle() function from a external file, and which I did not make; and "tip" is the text of the random tip as genereated by the tipText() function, which is also from the external file, and not made by me) My code for the randInt() function is Code: function randInt(lower, upper) {
var size = ++(upper - lower);
var randValue = Math.floor(lower + size*Math.random());
}
The script I made to display the HTML code is Code: <script type="text/javascript">
var tipNum = randInt(1, 10);
document.write("<h1>Random Tip<br />"+tipTitle(tipNum)+"</h1>");
document.write("<p>tipText()</p>");
</script>
I am getting nothing on my page where the random text should be. Any help or advice would be great, thanks. As of right now I have a code that will work in IE but wont work in FireFox...go figure. Basically what I want to have happen is when you type in an area code it will provide an output in a predetermined area of the page. For Example: Input- 512 Output - Austin, TX The code that I have doesn't work with firefox and I was just wondering if there was a code that would allow that to happen. Thanks! Hi, I have a form with 9 text fields and a text area. What I want to do is replace the text in the text area depending on how many fields contain text. For example my text boxes are named 1 to 9, if the user enters text in the first five boxes I want the text area to auto fill with 'you have selected boxes 1 to 5' if the user selects all nine it will say 'you have selected 1 to 9', therefore, the user must complete the text boxes in order. I have it working with an onchange event but i have a button on the form to also auto fill the text boxes and it does not work if this is clicked. Any help would be appreciated! Hi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript">
fields = 1;
function addMore() {
if (fields = 1) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";
fields = 2;
} else if (fields = 2) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;
} else {
document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;
}
}
</script>
Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. I have a form that does not validate when in a modal. Here is the page: http://www.varsitytrainers.com/purchase1.html It works well. It does not work when viewed on this page: http://www.varsitytrainers.com/bosto...ltrainers.html - Then click "Apply Now" and then click "Featured Membership" then click "Submit" You will see that the validation does not take place. I have been banging my head against the desk for days now. Please help. OK i really hope someone can help me because this has put a complete halt to what I'm doing right now. i have various images in a 12x12 grid with names such as x1y1, x2y2, ect I need to check what x1y1's image SRC is. I have been trying stuff like this: var xpos = 1 var ypos = 1 var IMAGENAME = "x" + xpos + "y" + ypos blah = ('document.' + IMAGENAME + '.src') if (blah == "something.gif") { do what i want } Just doesn't work, nor has the 80 other things I've tried lol. Can anyone help me out? I am working on converting something and this is what I have come up with: http://www.msnsportsnet.com/content/ravenstest.htm However, the width of that is 845 px and I wanted it to drop down to 650 px and make the arrows have the same effect as they did with the 845 px. First I moved the 845 to 650 in the css file, then changed the 845 to 650 in the JS files, I have been unable to figure this out though. If someone could please help that would be great! This is the JS file that I tried to edit: http://www.baltimoreravens.com/includes/jsbin/ravens.js This is the css file: http://www.msnsportsnet.com/content/ravens.css I am getting an error: "document.getElementById("gender") is null" Any ideas how I can get this to work? Code: <head>
<script type="text/javascript">
var selected = document.getElementById("gender").selectedIndex;
var lname = document.getElementById("lastname");
var boyarray=new Array();
boyarray[0]="Joseph James";
boyarray[1]="Robert Michael";
boyarray[2]="Brian Shawn";
boyarray[3]="Joseph Duke";
var boymax=(boyarray.length - 1);
var boychoose = Math.round(Math.random() * boymax);
var girlarray=new Array();
girlarray[0]="Christine Louise";
girlarray[1]="Cheyenne Lynn";
girlarray[2]="Kelly Anne";
girlarray[3]="Julia Marie";
var girlmax=(girlarray.length - 1);
var girlchoose = Math.round(Math.random() * girlmax);
function randomname()
{
if (selected = "2") {
alert((girlarray[girlchoose]) + lname);
}
else if (selected="1") {
alert((boyarray[boychoose]) + lname);
}
else {
alert("Please select a gender.");
}
}
</script>
</head>
<body>
<form onsubmit="randomname(this);">
Last Name:<input type="text" name="lastname" id="lastname"/>
<br/>
Gender:
<select id="gender">
<option value="0">Please select a gender</option>
<option value="1">Boy</option>
<option value="2">Girl</option>
</select>
<br/>
<input type="submit" id="submit" name="submit" value="Submit"/>
</form>
</body>
All, I have the following code: Code: var http_request = false;
function makePOSTRequest(url, parameters) {
alert(parameters);
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
result = http_request.responseText;
document.getElementById('myspan').innerHTML = result;
} else {
alert('There was a problem with the request.');
}
}
}
function getjob(obj) {
var poststr = "job_id=" + encodeURI( obj );
makePOSTRequest('getnextjob.php', poststr);
}
I call the getjob but doing the following: echo "<li><a href=\"#\" onclick=\"javascript:getjob($resultsetjob[job_id]); return false;\">$resultsetjob[name]</a></li>"; It's weird, only sometimes does it pass the variable and other times it doesn't. Is there a better way to do this?? Thanks in advance. I've got a problem at the bottom where the "ignore case" bit is, I simply need the code to loop whether the user types a uppercase "Y" or a lowercase "y". The error I am getting right now is that it doesn't loop whether i type a lowercase or uppercase "Y". Code: console.log("Calculator program");
console.log(" ");
console.log("1. Add numbers");
console.log("2. Subtract numbers");
console.log("3. Multiply numbers");
console.log("4. Divide numbers");
do
{
var option = prompt("What operate do you want to choose? ");
var first = prompt("Enter your first number: ");
var second = prompt("Enter your second number: ");
if (option == 1)
{
var total1 = (first+second);
console.log("The total is "+total1);
}
else if (option == 2)
{
var total2 = (first-second);
console.log("The total is "+total2);
}
else if (option == 3)
{
var total3 = (first*second);
console.log("The total is "+total3);
}
else if (option == 4)
{
var total4 = (first/second);
console.log("The total is "+total4);
}
var retry = prompt("Another calculation?");
var yes = "y".ignoreCase;
} while (retry == yes);
Reply With Quote 01-08-2015, 08:11 PM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts while ((retry == "y") || (retry == "Y")) Be aware that prompts and alerts are considered to be long obsolete. You should use DOM methods to obtain input from and display messages to your users. If you do use prompts get rid of the ugly 'undefined'. Quizmaster: Which word for a spring or town with thermal or mineral waters used for drinking or bathing takes its name from a town in Belgium which is famed for its supposedly curative waters? Contestant: Volvic Hi This part of the script should ask the user which type of shape they'd like to calculate the area of, then convert whatever they enter to uppercase so that the test condition can be eventually falsified when the user enters 'c, C, s, S, r or R'. I've consulted the w3 school, and as far as I can tell I'm formatting it correctly. I think the problem may be in the syntax of the test condition. Code: while (shapeType != 'C' || shapeType != 'S' || shapeType != 'R')
{
shapeType = prompt("Which type of Shape would you like to find the area of?" + '\n' + "For a circle, enter C" + '\n' + "For a square, enter S" + '\n' + " For a rectangle, enter R");
shapeType = shapeType.toUpperCase();
}
However, firebug reports that 'shapeType is null'. How can this be? I've declared shapeType in the head as a global variable. Any ideas? Jenny Someone tell me where I'm going wrong. I'm trying to print out the month/year ? Code: <html><head>
<SCRIPT language=JavaScript>
var dateNow = new Date();
var monthNow = dateNow.getMonth();
var yearNow = dateNow.getYear();
function MakeArray(n) {
this.length = n
return this
}
monthNames = new MakeArray(12)
monthNames[1] = "Janurary"
monthNames[2] = "February"
monthNames[3] = "March"
monthNames[4] = "April"
monthNames[5] = "May"
monthNames[6] = "June"
monthNames[7] = "July"
monthNames[8] = "August"
monthNames[9] = "Sept."
monthNames[10] = "Oct."
monthNames[11] = "Nov."
monthNames[12] = "Dec."
function customDate(oneDate) {
var theMonth = monthNames[oneDate.getMonth() +1]
}
</SCRIPT>
</head><body><script type="text/javascript">
document.write(theMonth + "/" + yearNow);
</script>
</body></html>
Hi all, I have created the following page http://kylehouston.com/new/index_new.html I have used JQuery to add animated load icon followed by my images fading in, the load works fine and the images appear but the problem is the fade in wont work. I have tried a few methods to try and get them to fade including adding spans round my images but the only thing that seems to work for me is setting all divs to fade in which I dont want to happen. Anyone got any advice? Thanks in advance! Kyle Hi, the cookies I am trying to read are values from a form that were stored. The problem I am having is that one value form the form, the value is 5000, was stored as a cookie but I cannot read it. When I display it, it returns: [object HTMLInputElement]. The code for storing the value is this: Code: document.cookie = "bankRoll=" + encodeURIComponent(money) + "; expires=" + expireDate.toUTCString(); , where money = 5000. The code for reading the cookies is this: Code: var cookies = decodeURIComponent(document.cookie);
var cookieNumber = new Array(10);
cookieNumber = cookies.split("; ");
for(var i = 0; i < cookieNumber.length; ++i)
{
var equalPos1 = cookieNumber[i].search("=");
if (cookieNumber[i].substring(0, equalPos1) == "firstName")
firstName = cookieNumber[i].substring(equalPos1 + 1);
if (cookieNumber[i].substring(0, equalPos1) == "lastName")
lastName = cookieNumber[i].substring(equalPos1 + 1);
if (cookieNumber[i].substring(0, equalPos1) == "pCode")
pCode = cookieNumber[i].substring(equalPos1 + 1);
if (cookieNumber[i].substring(0, equalPos1) == "bankRoll")
bankRoll = cookieNumber[i].substring(equalPos1 + 1);
if (cookieNumber[i].substring(0, equalPos1) == "lastVisit")
lastVisit = cookieNumber[i].substring(equalPos1 + 1);
}
The only one that does not display properly is the variable bankroll. All the others return the proper value. I would like to know how to fix my code so that the value 5000 is displayed. I am not great at using JavaScript but I am working on it. I really need help with my script. I can't seem to find out why my images won't load correctly. I am trying to get a 2 part radio button selection to show different pictures for every combination of colors you can choose. So if I was to pick black and black a black_black.jpg picture will pop up and black_white.jpg will pop up for a black and white selection. Please if anybody can help I could really use it right now. Thanks! Code: <html>
<body>
<form name = "myform">
<img id = "myImage" src = "MyDefaultImage.jpg">
<br><br>
Barrels: -------- Inserts:<br>
Black <input type = "radio" name = "col1" value = "black" onclick = "showImage();"> Black <input type = "radio" name = "col2" value = "black" onclick = "showImage();"><br>
White <input type = "radio" name = "col1" value = "white" onclick = "showImage();"> White <input type = "radio" name = "col2" value = "white" onclick = "showImage();"><br>
Orange <input type = "radio" name = "col1" value = "orange" onclick = "showImage();"> Orange <input type = "radio" name = "col2" value = "orange" onclick = "showImage();"><br>
Red <input type = "radio" name = "col1" value = "red" onclick = "showImage();"> Red <input type = "radio" name = "col2" value = "red" onclick = "showImage();"><br>
</form>
<br>
<br>
<script type = "text/javascript">
function showImage() {
var A = 0;
var B = 0;
for (var i=0; i <document.myform.col1.length; i++) {
if (document.myform.col1[i].checked) {
A = document.myform.col1[i].value;
}
}
for (var u=0; u <document.myform.col2.length; u++) {
if (document.myform.col2[u].checked) {
B = document.myform.col2[u].value;
}
}
var x = A + "_" + B;
if (x>0) {
var picture = x + ".jpg";
document.getElementById("myImage").src = picture;
}
}
</script>
</body>
</html>
I am working on converting something and this is what I have come up with: http://www.msnsportsnet.com/content/ravenstest.htm The width of the original file was 845 px, I needed to change it to 235 px though. As I have knocked the size down of everything, I noticed the arrows are now not working correctly. The arrow only goes to the right once and to the left once, I need to it to go to the right and left multiple times. Here is the javascript file that I have been working with: Code: // gameday scroller
function scrollGameday(dir) {
var cssDir= (dir<0) ? 'right':'left';
var scrollWidth = 235;
var scrollSpeed = 235;
var scrollWrapLeft = parseInt($("#gameScroller").css("left"));
if(okScroll == false) {
return;
}
if(cssDir == "left") {
if($("#arrowRight").hasClass("disable"))
$("#arrowRight").removeClass('disable');
if(currentPane <= 1) {
return;
} else {
scrollWrapLeft = (scrollWrapLeft + (dir * scrollWidth));
okScroll = false;
$("#gameScroller").animate({left: scrollWrapLeft+"px"}, scrollSpeed, function() {
okScroll = true;
});
currentPane = currentPane-dir;
if(currentPane <= 1) {
if(!$("#arrowLeft").hasClass("disable"))
$("#arrowLeft").addClass('disable');
}
}
}
if(cssDir == "right") {
if($("#arrowLeft").hasClass("disable"))
$("#arrowLeft").removeClass('disable');
if(currentPane >= paneCount) {
if(!$("#arrowRight").hasClass("disable"))
$("#arrowRight").addClass('disable');
return;
} else {
scrollWrapLeft = (scrollWrapLeft + (dir * scrollWidth));
okScroll = false;
$("#gameScroller").animate({left: scrollWrapLeft+"px"}, scrollSpeed, function() {
okScroll = true;
});
currentPane = currentPane-dir;
if(currentPane >= paneCount) {
if(!$("#arrowRight").hasClass("disable"))
$("#arrowRight").addClass('disable');
}
}
}
checkCurrentPane(currentPane);
}
function checkCurrentPane(currentPane) {
alert('check');
if(currentPane == 1) {
if(!$("#arrowLeft").hasClass("disable"))
$("#arrowLeft").addClass('disable');
} else if(currentPane == paneCount) {
if(!$("#arrowRight").hasClass("disable"))
$("#arrowRight").addClass('disable');
}
}
$("#gameScroller").each(function (i) {
var scrollWidth = 235;
var newLeftPos = (i * scrollWidth)+"px";
$("#gameScroller:eq("+i+")").css("left", newLeftPos);
var items = $('.game');
$('#gameScroller').css('width', items.length * items[0].offsetWidth + 'px');
$("#arrowLeft").click(function() {
scrollGameday(3);
return false;
});
$("#arrowRight").click(function() {
scrollGameday(-2);
return false;
});
});
if("#gameScroller") {
var okScroll = true;
var currentPane = 1;
var paneCount = Math.ceil(($(".game").length) / 10);
if(paneCount <= 1) {
$(".arrow").className = $(".arrow").className + ' disable';
} else if (paneCount > 1) {
$("#arrowLeft").addClass('disable');
}
preScroll();
}
function preScroll() {
var games = $('.game');
for(n=0; n<games.length; n++) {
if(games[n].className.match('active')) {
var currFrame = Math.floor(n/10);
scrollGameday(-currFrame);
}
}
}
This is the CSS file: http://www.msnsportsnet.com/content/ravens.css Thank you very much and any help is much appreciated. http://icant.co.uk/sandbox/countdown.html Hi, I am trying to understand the countdown above but I am having some problems. I am trying to remove some of the fields under preferences, I just want to show "Time in Seconds" and "warning start" and not any of the other fields. When I try to remove something from the script the entire thing just stop working. So my question is simple, how do I hide/remove fields under preferences without breaking the countdown? Hi i start of with a some csv data and convert this into an array. The resulting array looks like the following [["Apple", "64"], ["Banana", "20"], ["pear", "12"], ["Orange", "16"]] But i need this to be formatted as below without the quotes around the second value. [["Apple", 64], ["Banana", 20], ["pear", 12], ["Orange", 16]] Im not sure how to achieve this. I guess i need to loop through the array and strip out the quotes but im failing to get this working. Help! Can anyone look at the link below, and tell me why the infoWindow displays the same xml marker node for each marker Thanks Lee http://www.hotels.seotra.com/ |
|||||||