|
JavaScript - Rotate A Triangle/square?
I know very little about javascript, but was wondering if something like this can be done?
Would it be possible (with mootools or jquery) to have homepage that will rotate its home page content forwards and backwards based on either triangle or square? ie, you can rotate through 3, 4, etch home pages? Sort of like a slider, but it rotates off a center axis of the triangle or square? Similar TutorialsHi there! I'm new to coding and i want do something like this with arrays and loops but i dont know how exactly: 1 232 34543 4567654 567898765 67890109876 7890123210987 890123454321098 90123456765432109 0123456789876543210 Thanks! Reply With Quote 01-15-2015, 04:59 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 As we say so often, this forum is not a free coding service. As a general rule, the people helping out in this forum don't write code for others (especially code that appears to be for homework), but try to help with fixing code that doesn't work. You may perhaps get someone to write this script for you, but you'll be far more likely to get help if you have made a substantial effort and written some code yourself. Then someone here will almost certainly help you correct/improve your work. All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit. OK I've been stuck on this problem for like 4 days already, so I'm resorting here. This is my problem Code: (A) (B) (C) (D) * ********** ********** * ** ********* ********* ** *** ******** ******** *** **** ******* ******* **** ***** ****** ****** ***** ****** ***** ***** ****** ******* **** **** ******* ******** *** *** ******** ********* ** ** ********* ********** * * ********** Now im suppose to write the script that makes patterns A-D stack on top of each other, so A on top, B under it, then C, and then D. I managed to get A and B with not many problems, but when it comes to C and D, I'm just confused on how to get them spaced over. Apparently I'm suppose to use the Pre tag, but im still not sure how to do that either. Im not asking for anybody to do this for me, all I need is a little guidance on how to start C and D. Here is what i have for A and B. I also did one for C, but as i said before, not sure on how i would have it space out in the loop. If you see any mistakes or have a better way of writing this, let me know please. Any help is appreciated. Thank you. Code: <script type = "text/javascript">
nextRow:
for (var row = 1; row <= 10; ++row )
{
document.writeln( "<br />" );
for ( var column = 1; column <= 10; ++column )
{
if ( column > row )
continue nextRow;
document.write( "*" );
}
}
nextRow:
for (var row = 1; row <= 10; ++row )
{
document.writeln( "<br />" );
for ( var column = 10; column >= 1; --column )
{
if ( column < row )
continue nextRow;
document.write( "*" );
}
}
nextRow:
for (var row = 1; row <= 10; ++row )
{
document.writeln( "<br />" );
for ( var column = 10; column >= 1; --column )
{
if ( column < row )
continue nextRow;
document.write( "*" );
}
}
</script>
I need to draw like image 1 in file attach. But after i write code: 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
function Ve()
{
var n = document.getElementById("txtGiatri").value;
var i,j;
for(i=1;i<=n;i++)
{
for(j=0;j<n-i;j++)
document.getElementById ("place").innerHTML +=" ";
for(j=i;j>0;j--)
{
document.getElementById ("place").innerHTML +=j;
}
document.getElementById ("place").innerHTML +="<br/>";
}
}
</script>
<body>
<table>
<tr>
<td><input name="txtGiatri" type="text" id="txtGiatri" /></td>
<td><input name="btnVe" type="button" value="Ve" onclick="Ve();" /></td>
</tr>
<tr>
<td><div id="place"></div></td>
<td></td>
</tr>
</table>
</body>
</html>
i only have like image 2. How i fixed it? Hello wise javascript programers I come to you for help with some programming assignment Im not quite getting the assignment it self is based on the use of the getElementsByClassName() method. Basically I have a 3x3 table with some outer cells that at this point dont do much. there is a loop that iterates through all the inner cells checking for errors. inside the cells, are input boxes. the loop checks to see if the inner cells are empty, contain a non-numeric value, or a zero. if any of this instances is true, a message is displayed explaining the situation. those cells that DON'T have a number will be colored in yellow indicating that numbers should go in there. I got as far as testing all the conditions and generating the appropriate messages, I wrote additional code that supposedly colors the cells that have other than a number in but the code does not execute this is the code if you would like to take a peek at it and help a newbe out. thanks Code: <html>
<head>
<title>Magic Square</title>
<script type="text/javascript">
function checkit()
{
var j;
var inputelement = document.getElementsByClassName("inner");
var colorcells = document.getElementsByClassName("in");
for(j=0;j<inputelement.length;j++)
{
if(inputelement[j].value=="")
{
alert(" you must enter a number cells cannot be empty");
for(r=0;r<colorcells.lenght;r++)
{
colorcells[r].style.backgroundColor="yellow";
return false;
}
}
else if (isNaN(inputelement[j].value))
{
alert(" you must enter a number cells cannot be a letter");
for(r=0;r<colorcells.lenght;r++)
{
colorcells[r].style.backgroundColor="yellow";
return false;
}
}
else if(inputelement[j].value <= 0)
{
alert(" you must enter a number cells cannot be zero");
for(r=0;r<colorcells.lenght;r++)
{
colorcells[r].style.backgroundColor="yellow";
return false;
}
} //end else if
} //end first for loop
} //end function
</script>
</head>
<body>
<table align="center">
<tr><td></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td><input type="text" size="1" maxlength="1" readonly class="outer" /></td></tr>
<tr><td></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td class><input type="text" size="1" maxlength="1" readonly class="outer" /></td></tr>
<tr><td></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td><input type="text" size="1" maxlength="1" readonly class="outer" /></td></tr>
<tr><td></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td><input type="text" size="1" maxlength="1" readonly class="outer" /></td></tr>
<tr><td><input type="text" size="1" maxlength="1" readonly class="outer" /></td><td><input type="text" size="1" maxlength="1" readonly class="outer" /></td><td><input type="text" size="1" maxlength="1" readonly class="outer" /></td><td><input type="text" size="1" maxlength="1" readonly class="outer" /></td><td><input type="text" size="1" maxlength="1" readonly class="outer"/></td></tr>
<tr><td colspan="5"><input type="button" value="Check The Magic Square" onclick="checkit()" /></td></tr>
<tr><td colspan="5"><input type="button" value="Clear The Magic Square" onclick="clearit()" /></td></tr>
</table>
</body>
</html>
What is the [0] for? And even better if you can tell me what they're called, in this context; I want to find a tutorial. Tryit Editor v2.1 PHP Code: var a=document.getElementsByTagName("a")[0]; Thanks! All, I have the following code: Code: function createSquare(event) {
var x = parseInt(event.clientX);
var y = parseInt(event.clientY);
var left = x - 50;
var top = y - 50;
var d = document;
var div = event.target.parentNode.lastChild;
//alert(div.nodeType)
if (div.nodeType != 1)
div = d.createElement('div');
div.style.width = "100px";
div.style.height = "100px";
div.style.position = "absolute";
div.style.left = left + "px";
div.style.top = top + "px";
div.style.zIndex = 5;
div.style.border = "10pt solid black";
var leftbox = x - 80;
alert(x);
alert(leftbox);
divselect = d.createElement('select');
divselect.style.position = "absolute";
divselect.style.top = top + "px";
divselect.style.left = leftbox + "px";
var sel = d.getElementById('tagged_person');
sel.style.display = 'block' //or block if you have a hidden div
var tagged_user = d.tag.tagged_person;
tagged_user = tagged_user.value;
var picture_id = d.tag.picture_id;
picture_id = picture_id.value;
divselect.appendChild(sel);
event.target.parentNode.appendChild(div);
event.target.parentNode.appendChild(divselect);
This shows me a square and a select but the select isn't populated with anything. i do have a form later on down the page. The form code is (which I try and pull in the info from the select in the form in the select in the createSqua PHP Code: <form action="" name="tag" method="post"> <input type="hidden" name="picture_id" value="4"> <select name="tagged_person" id="tagged_person"> <?php $qryfav = "Select * from favorites where user_name='creep'"; $resultfav = mysql_query($qryfav); while($resultsetfav = mysql_fetch_array($resultfav)){ echo "<option value=\"$resultsetfav[favorite_user]\">$resultsetfav[favorite_user]</option>"; } ?> </select> </form> Thanks for the help in advance. Hey, hoping someone can help. As this is my first post and I have a very very very small understanding of Javascript you have permission to mock me! Anyway, here goes... I am using a third party shopping cart system. One of the dropdown menus uses an array as the 'name'. <select name="product[]"> I'm pretty sure it has to stay this way or the cart won't work. I have a function which runs to make sure it can't be left on the first option when submitted, however it won't work with the 'name' containing square brackets! function validate_form_acflgotmt ( ) { valid = true; if ( document.acftshirt.product[].selectedIndex == 0 ) { alert ( "Neigh! Whoa boy, don't forget to choose a t-shirt size!" ); valid = false; } return valid; } If anyone can help please do and I will shed a single tear of joy. Thanks! Jake I am working on a site and essentially what I need to do is to autopost a blog entry that rotates based on each day. For example, Monday posts X, Tuesday posts Y, Wednesday posts Z, Monday posts X again. Much like this site does I wonder how we could rotate the div once the page is loaded. I tested it with a click button successfully in FF4.0.1. Yet, when I tried to use <body onload = "r()"> which the func r nested the whole rotate function with its global variables, it failed. Could anyone explain how I can do it automatically? Thanks for any help!!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS + CSS3: MozTransform rotate</title> </head> <body> <style> .rDiv { width:200px; height:200px; position:absolute; top:40px; left:50px; text-align:center; color:white; line-height:200px; background-color:black; border-radius: 50%; border-styleutset; border-width:5px; border-color:white; /* transform: rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); */} .outdiv { width:300px; height:300px; position:absolute; top:0px; left:0px; background-color:grey;} </style> <div class="outdiv"> <div id = "rDiv" class="rDiv">ROTATE</div> </div> <script> var r = document.getElementById('rDiv'); var x = 0; function rotate(){ x += 1; r.style.MozTransform="rotate("+x+"deg)"; } </script> <input style="position:absolute; top:300px;" type="button" onclick="rotate()" value = "click me to rotate it!"/> </body> </html> Hi, I need some help for rotate and zoom image as in link below. any one can help me? http://kroppr.rborn.info/ http://crop.smally.net/ I want to be able to rotate Adsense ads. 3/4 of the time, it will be someone else's. 1/4 of the time, it will be mine (my code is displayed already). However, the code I tried doesn't work. Can someone tell me how to fix this - Code: <script language="JavaScript"> images = new Array(4); //the following string is really all on one line images[0] = '<script type="text/javascript">google_ad_client = "ca-pub-4811954214954647";google_ad_slot = "2713945203";google_ad_width = 728;google_ad_height = 90;</script><script type="text/javascript"src="http: //pagead2.googlesyndication.com/pagead/show_ads.js" ></script>'; images[1] = 'other code'; images[2] = 'other code'; images[3] = 'other code'; index = Math.floor(Math.random() * images.length); document.write(images[index]); //done </script> Hello, I am using the following script on my site RCENO .com in a easyadsense plugin, it is working well, because it is adding the elements after the posts on the page, but instead of rotating (This causes a problem when a Video is playing, and it rotates out in the middle of it) I would like for it to be Random when the posts load or refreshed....This is a Wordpress CMS site that provides News and Event Information to the local area, I am using this to display Holiday Greetings from area merchants in the form of Videos....... Thank You For Your assistance on This <script type="text/javascript"> if (document.all || document.getElementById){ //if IE4 or NS6+ document.write('<style type="text/css">\n') document.write('.dyncontent{display: none; width: 340px; height: 230px;}\n') document.write('</style>') } var curcontentindex=0 var messages=new Array() function getElementByClass(classname){ var inc=0 var alltags=document.all? document.all : document.getElementsByTagName("*") for (i=0; i<alltags.length; i++){ if (alltags[i].className==classname) messages[inc++]=alltags[i] } } function rotatecontent(){ //get current message index (to show it): curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0 //get previous message index (to hide it): prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1 messages[prevcontentindex].style.display="none" //hide previous message messages[curcontentindex].style.display="block" //show current message } window.onload=function(){ if (document.all || document.getElementById){ getElementByClass("dyncontent") setInterval("rotatecontent()", 75000) } } </script> Season Greetings: <div class="dyncontent" style="display: block">[flv:/files/videos/HolidayGreetings/FamilyVideoGreetings.flv 340 230]</div> <div class="dyncontent">To Add Your Holiday Greetings, Contact Us at Roy@rceno.com or Call (336) 398-6003</div> <div class="dyncontent">Happy Holidays</div> Hi, Is it possible to rotate a dial to follow the mouse cursor? I'm trying to recreate this: http://verbdesign.com/hl/rockwell/index.html but would rather it worked like this: http://www.actionscript.org/resource...-II/Page1.html ...but in javascript. Any help extremely welcome. Thanks, Richard here's the code i've got to make some tabbed content on my website: Code: $(document).ready(function(){
$('#headingHome div').hide(); // Hide all divs
$('#headingHome div:first').show(); // Show the first div
$('.ticker_buttonP a:first').addClass('active'); // Set the class of the first link to active
$('.ticker_buttonP a').click(function(){ //When any link is clicked
$('.ticker_buttonP a').removeClass('active'); // Remove active class from all links
$(this).addClass('active'); //Set clicked link class to active
var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
$('#headingHome div').hide(); // Hide all divs
$(currentTab).show(); // Show div with id equal to variable currentTab
return false;
});
});
and my html (all content removed for size's sake): Code: <div id="headingHome"> <div id="first"></div><!-- /first --> <div id="second"></div><!-- /second --> <div id="third"></div><!-- /third --> <div id="fourth"></div><!-- /fourth --> <div id="fifth"></div><!-- /fifth --> <p class="ticker_buttonP"> <a href="#first"></a> <a href="#second"></a> <a href="#third"></a> <a href="#fourth"></a> <a href="#fifth"></a> </p> </div><!-- /headingHome --> that works fine so far, however i want the content to fade in and out when the tabs change, and i also want the tabs to rotate automatically like seen on this site: http://www.sosfactory.com/ I'm new to this, and I cant find anything on the net about it that i can understand enough to put it together. could anyone help me, please? many thanks Ok, I am in a small pickle here. I created a sidebar gadget for work originally with only 4 images that needed to cycle though it. Easy enough script done. Now they have 6 images that need to rotate through. Easy enough again, script done. The issue I have is now I have to re-push this updated html file to all 1000 PC's on my network. Plus every time a change is made I will have to do it again. And we change the images multiple times a month. So what I need help doing if its possible is to modify the html file i am listing below to have a second IF parameter that not only steps the image but also checks to see if the file is even there. This is the spot I need help at. Code: function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<10)
step++
else
step=1
I wanted to add another part to the IF statement like maybe. Code: If (step<10 && file_exists("http://www.akronlibrary.org/Gadget/Gadget Pic 1.bmp"))
Basically a step that checks to see if I have at that moment a file named gadet pic 1. (I would do or statements for all of the file names) The point is to make this whole thing dynamic, so that I change image 1 on the server and every gadget on every PC looking for image 1 now see the new image. This way I just change the image file name when I want a different image to display. Same thing with the var for the slidelink function. points to a static named html file on my web server and I just change the redirect in the static named html file to go where i want it. I am by NO means a programmer, I am actually a network admin that came up with this idea and I am trying to fumble through it. Thanks in advance! Code: <html>
<head>
<meta hrrp-equiv="Content-Type" content="text/html; charset=Unicode" />
<style type="text/css">
body{
margin: 0px;
width: 405px;
height: 205px;
font-family; Georgia;
}
</style>
<script type="text/javascript">
var image1=new Image()
image1.src="http://www.akronlibrary.org/Gadget/Gadget Pic 1.bmp"
var image2=new Image()
image2.src="http://www.akronlibrary.org/Gadget/Gadget Pic 2.bmp"
var image3=new Image()
image3.src="http://www.akronlibrary.org/Gadget/Gadget Pic 3.bmp"
var image4=new Image()
image4.src="http://www.akronlibrary.org/Gadget/Gadget Pic 4.bmp"
var image5=new Image()
image5.src="http://www.akronlibrary.org/Gadget/Gadget Pic 5.bmp"
var image6=new Image()
image6.src="http://www.akronlibrary.org/Gadget/Gadget Pic 6.bmp"
var image7=new Image()
image7.src="http://www.akronlibrary.org/Gadget/Gadget Pic 7.bmp"
var image8=new Image()
image8.src="http://www.akronlibrary.org/Gadget/Gadget Pic 8.bmp"
var image9=new Image()
image9.src="http://www.akronlibrary.org/Gadget/Gadget Pic 9.bmp"
var image10=new Image()
image10.src="http://www.akronlibrary.org/Gadget/Gadget Pic 10.bmp"
</script>
</head>
<body>
<a href="javascript:slidelink()"><img title="Akron-Summit County Public Library" name="slide" /></a>
<script type="text/javascript">
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<10)
step++
else
step=1
setTimeout("slideit()",6000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 1 Link.html"
else if (whichimage==2)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 2 Link.html"
else if (whichimage==3)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 3 Link.html"
else if (whichimage==4)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 4 Link.html"
else if (whichimage==5)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 5 Link.html"
else if (whichimage==6)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 6 Link.html"
else if (whichimage==7)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 7 Link.html"
else if (whichimage==8)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 8 Link.html"
else if (whichimage==9)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 9 Link.html"
else if (whichimage==10)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 10 Link.html"
}
</script>
</body>
</html>
All, I'd like to have something similar to the rotating images and text on my website. The website that I would like to mimick is: http://www.photoworks.com/ You can see that the images move but there is still text over the image that I can click on. How would I go about doing something similar to this on my website. I'm guessing it's a combination of Javascript and CSS but I figured I'd start here. Thanks for any help in advance. |
|||||||