|
JavaScript - Adding Star Trail Effect Script To Page
I want to insert this star trail effect script to page below but star trail doesn't appear on most areas and script corrupts several objects' position. How can I insert it successfully?
http://www.orkinosfilm.com/melissa/index.html Code: <head>
<style type="text/css">
body {overflow: scroll; overflow-x: hidden;}
.anyClass {
position: relative;
visibility: hidden;
left: -5000px;
}
</style>
</head>
<body bgcolor="#000000">
<p><!--webbot bot="HTMLMarkup" startspan --><script language="JavaScript1.2">
<!--
/*
Submitted by Marcin Wojtowicz [one_spook@hotmail.com]
Featured on JavaScript Kit (http://javascriptkit.com)
Modified by JK to be IE7+/ Firefox compatible
For this and over 400+ free scripts, visit http://javascriptkit.com
*/
var trailLength = 10 // The length of trail (8 by default; put more for longer "tail")
var path = "cursor_star.png" // URL of your image
var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
var i,d = 0
function initTrail() { // prepares the script
images = new Array() // prepare the image array
for (i = 0; i < parseInt(trailLength); i++) {
images[i] = new Image()
images[i].src = path
}
storage = new Array() // prepare the storage for the coordinates
for (i = 0; i < images.length*3; i++) {
storage[i] = 0
}
for (i = 0; i < images.length; i++) { // make divs for IE and layers for Navigator
document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '" width='+(16-i)+' height='+(16-i)+'></div>')
}
trail()
}
function trail() { // trailing function
for (i = 0; i < images.length; i++) { // for every div/layer
document.getElementById("obj" + i).style.top = storage[d]+'px' // the Y-coordinate
document.getElementById("obj" + i).style.left = + storage[d+1]+'px' // the X-coordinate
d = d+2
}
for (i = storage.length; i >= 2; i--) { // save the coordinate for the div/layer that's behind
storage[i] = storage[i-2]
}
d = 0 // reset for future use
var timer = setTimeout("trail()",10) // call recursively
}
function processEvent(e) { // catches and processes the mousemove event
if (window.event) { // for IE
storage[0] = window.event.y+standardbody.scrollTop+10
storage[1] = window.event.x+standardbody.scrollLeft+10
} else {
storage[0] = e.pageY+12
storage[1] = e.pageX+12
}
}
initTrail()
document.onmousemove = processEvent // start capturing
//-->
</script><!--webbot bot="HTMLMarkup" endspan --></p>
</body>
Similar TutorialsHi my relative wanted this star trail effect on the site: http://www.crazy-stuff.biz/side9023.html I did similar effect below but I couldn't make smaller stars on trail, how can I achieve this? http://www.aymavisi.org/new_page_6.htm Hello - I'm trying to add a fade effect between slideshow transitions. The script I'm building from is the Rich HTML Slideshow script which appears below. The slides that rotate are wrapped in <div> tags with a class of "dyncontent" and I've managed to make the slideshow transition just fine, but not with any kind of fade effect. It just "snaps" from one slide to the next. Is this a fairly simple addition? Thanks! <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: 250px; height: 60px;}\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()", 2000) } } </script> Ok so I have this script and I cant figure out how to add multiple star ratings to one page. PHP Code: <? require "config.php" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="SMARTREVIEWSCRIPT.COM" /> <title>Add Your Review</title> <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript"> <!-- var set=false; var v=0; var a; function loadStars() { star1 = new Image(12,12); star1.src = "images/staroff.gif"; star2 = new Image(12,12); star2.src= "images/staron.gif"; } function highlight(x) { if (set==false) { y=x*1+1 switch(x) { case "1": document.getElementById(x).src= star2.src; break; case "2":for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } break; case "3":for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } break; case "4":for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } break; case "5":for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } break; } } } function losehighlight(x) { if (set==false) { for (i=1;i<6;i++) { document.getElementById(i).src=star1.src; document.getElementById('vote').innerHTML="" } } } function setStar(x) { y=x*1+1 if (set==false) { switch(x) { case "1": a="1" flash(a); document.review.rating.value = '1'; break; case "2": a="2" flash(a); document.review.rating.value = '2'; break; case "3": a="3" flash(a); document.review.rating.value = '3'; break; case "4": a="4" flash(a); document.review.rating.value = '4'; break; case "5": a="5" flash(a); document.review.rating.value = '5'; break; } set=true; } } function flash() { y=a*1+1 switch(v) { case 0: for (i=1;i<y;i++) { document.getElementById(i).src= star1.src; } v=1 setTimeout(flash,200) break; case 1: for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } v=2 setTimeout(flash,200) break; case 2: for (i=1;i<y;i++) { document.getElementById(i).src= star1.src; } v=3 setTimeout(flash,200) break; case 3: for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } v=4 setTimeout(flash,200) break; case 4: for (i=1;i<y;i++) { document.getElementById(i).src= star1.src; } v=5 setTimeout(flash,200) break; case 5: for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } v=6 setTimeout(flash,200) break; } } --> </script> </head> <body> <div id="main"> <? // Stores the product sku as a session $_SESSION['sku'] = $_GET['sku']; echo "<form name='review' method='post' action='add.php?sku=".$_SESSION['sku']."'>"; ?> <table width="600" border="0"> <tr> <td><span class="style1">Name: </span></td> <td><input type="text" name="name" maxlength="32" /></td> </tr> <tr> <td><span class="style1">Review Title: </span></td> <td><input size="51" maxlength="60" type="text" name="reviewtitle" value=""/></td> </tr> <tr> <td><span class="style1">Rating: </span></td> <td> <body onload="loadStars()"> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="1" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="2" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="3" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="4" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="5" style="width:12px; height:12px; float:left;" /> <div id="vote" style="font-family:arial; color:red;"></div> <? echo '<input type="hidden" name="rating">'; ?> </body> </td> </tr> <tr> <td><span class="style1">Rating: </span></td> <td> <body onload="loadStars()"> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="1" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="2" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="3" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="4" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="5" style="width:12px; height:12px; float:left;" /> <div id="vote" style="font-family:arial; color:red;"></div> <? echo '<input type="hidden" name="rating1">'; ?> </body> </td> </tr> <tr> <td><span class="style1">Comment: </span></td> <td><textarea name="comment" cols="57" rows="6"></textarea></td> </tr> <tr> <td></td> <td> <input type="submit" value="Submit Review" /> </td> </tr> </table> </form> </div> </body> </html> I understand how to modify the rest of the code to insert this into my database but Im not sure how to change this to allow multiple star reviews. I tried to just copy and paste and change some of the values to no avail. I contacted the seller of the script and he recommended I ask here. I appreciate any help. Thank you. Greetings everyone; Jesse here. Long time reader, first time poster. I have a personal website, currently in development, located at: http://www.jesselang.ca If you click the right-facing arrows along the right side you'll open a side-bar column, clicking a left-facing arrow will then close the side-bar. This functionality is "OK" at best. What I would like to see is clicking the right-facing arrow causes the current sidebar to fade-in, and simultaneously have the arrow flip to a left-facing icon; the idea being to add a toggle function to the arrows. The code I'm using at the moment is shown below, this string works for me because it only allows 1 sidebar container to be displayed at a time... which is ideal. Code: <script type="text/javascript">
lastone='empty';
function showIt(lyr)
{if (lastone!='empty') lastone.style.display='none';
lastone=document.getElementById(lyr);
lastone.style.display='block';}
</script>
The respective html looks something like this: Code: <a onclick="javascript:showIt('interestcontainer')" class="arrow"><span>show interests sidebar</span></a>
The coresponding html for the container to display looks like this. This code also shows the "hide container" button: Code: <div id="interestcontainer" style='display:none;'>
<h4>interests<a onclick="interestcontainer.style.display='none';" class="back"><span>back</span></a></h4>
And the CSS looks like this: Code: a.arrow{
display:block;
float:right;
background:url(../images/ico-arrow.gif) top no-repeat;
text-decoration:none;
overflow:hidden;
width:13px;
height:11px;
margin-left:3px;}
------------------ Would it be asking to much to have someone help me achieve the following functionality? -load page with all side containers hidden -display only 1 side container at a time -fadein and fadeout effects -same button displays and hides -button swaps images for displat/hide commands Again, my code can be seen at: http://www.jesselang.ca http://jesselang.ca/files/style.css I'd very much appreciate the help. Thank you in advance. *j Hello all! This is my first time in the forum and I have been reading for a while. The information in here appears to be very accurate and useful. I am new to JavaScript. I have been programming sites for a while but have been using Flash for most of my animation and never really got into the ActionScript. Thanks to Apple... I can no longer use that crutch. So as I post in this forum please understand 2 things: 1 I am a beginner in JavaScript and 2. I want to learn not just copy, paste and move on! Here is my issue: I have made a VERY SIMPLE slide show and it works perfectly. However, Now I want to add a fade in and out effect to the code. I have seen this done with the CSS opacity(alpha) and that seems to be the simplist way. However, I am having trouble fitting this into my code. Any direction in this matter would be great! Thanks so much! Code:
var step=1
function switchImg()
{
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<9)
step++
else
step=1
setTimeout("switchImg()",3500)
}
switchImg()
PHP 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> <script type="text/javascript"> <!-- var image1=new Image() image1.src="images/slideshow/image001.jpg" var image2=new Image() image2.src="images/slideshow/image002.jpg" var image3=new Image() image3.src="images/slideshow/image003.jpg" var image4=new Image() image4.src="images/slideshow/image004.jpg" var image5=new Image() image5.src="images/slideshow/image005.jpg" var image6=new Image() image6.src="images/slideshow/image006.jpg" var image7=new Image() image7.src="images/slideshow/image007.jpg" var image8=new Image() image8.src="images/slideshow/image008.jpg" var image9=new Image() image9.src="images/slideshow/image009.jpg" var image10=new Image() image10.src="images/slideshow/image010.jpg" var image11=new Image() image11.src="images/slideshow/image011.jpg" var image12=new Image() image12.src="images/slideshow/image012.jpg" var image13=new Image() image13.src="images/slideshow/image013.jpg" var image14=new Image() image14.src="images/slideshow/image014.jpg" var image15=new Image() image15.src="images/slideshow/image015.jpg" var image16=new Image() image16.src="images/slideshow/image016.jpg" var image17=new Image() image17.src="images/slideshow/image017.jpg" var image18=new Image() image18.src="images/slideshow/image018.jpg" var image19=new Image() image19.src="images/slideshow/image019.jpg" var image20=new Image() image20.src="images/slideshow/image020.jpg" //--> </script> </head> <body> <img src="images/slideshow/image001.jpg" name="slide"> <script type="text/javascript"> <!-- //variable that will increment through the images var step=1 function slideit(){ //if browser does not support the image object, exit. if (!document.images) return document.images.slide.src=eval("image"+step+".src" ) if (step<20) step++ else step=1 //call function "slideit()" every 2.5 seconds setTimeout("slideit()",2500) } slideit() //--> </script> </body> </html> Hi everyone, Im new to the whole website thing as a whole but my mate got me onto joomla which has been great and iv got a site up im almost happy with and have learnt quite alot about coding etc. My problem is: Im utilising a vertical menu, just simple text as links, i want to add an effect on hover and clicking on that makes the text slide elegantly to the right about 16pixels. I have another unpublished template that iv bought (that doesnt quite work at all, module position all messed up etc) but it does this hover effect perfectly on the menu. So i have the .js file from that template and iv read some tutorials on how to add a js file to my template but its just not doing anything. Is it a good idea to try to add this file from a different template to my template or is there a easier way to do this (what i think is a) simple effect. Thanks. ps i can post the js code if wanted Hello all, Firstly apologies for my javascript ignorance - I'm not a programmer, just someone thrust into programming since there's no-one else at my company who can do it. I found a nice js script online for a drop-down menu where the drop downs both expand to their full size and fade-in (very quickly) from transparent. The script in action can be seen on the script writer's site he http://sandbox.leigeber.com/dropdown-menu/index.html and the script is: Code: var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){
a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){
var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
}
}
dd.prototype.st=function(x,f){
var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){
p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible'}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
}
function sl(c,f){
var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return
}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();
with Code: var menu=new menu.dd("menu");
menu.init("menu","menuhover");
used on my html page to call the script. I'm using the script exactly as written and exactly as it is on the dude's demo page for it. However, some of my sub-menu items are wider than their parent items and in IE7 this means they are bound to the width of the parent until the animations have finished, and then pop-out to their full width (NB not an issue in FF3). I'm actually not too fussed about either the fade in or expand out effects (they'd be nice, but not at the expense of the IE7 bug) so I simply wanted to know what I should do to the script to turn off the effects, or make them instant - ie reduce the length of the effect to as short as possible. I understand I can get rid of the bug by specifying a width for the ul element in my css, but I'd rather not do that if I can help it. I'd appreciate anyone's insight on this. Thanks Tom Hello, I am programming. Net, and I have a hidden div using: document.getElementById ("scwIE"). style.visibility = "hidden" This table contains a Div. The fact is that "sometimes" (say 1 time in 15) when I load the page, I have drawn on the page the table structure that contains the Key I made the test of trying to hide the div again hidden manually put in an onClick event, but I do not listen. Only disappears if I click on any form element that sends data to the server. Can you think how I can fix this so strange? A greeting. Hi all, I am using the following script posted on this site: http://www.javascriptkit.com/script/...oundlink.shtml It works great, but I want to extend this script and mute the sound using a checkbox. This checkbox has the id: sound. If checked, I want to hear the sounds, when unchecked, no sounds should be heard. This is the code I currently have for the checkbox: Code: function playSound() {
if (document.getElementById('sound').checked){
-something needs to be added here to make it work?-
}
}
Anyone have an idea how to make this work? Many thanks Hi first time poster scratching his head. I am dipping into php to create a user profilepage.php template on a wordpress site. I have managed against all odds to create a user profile that will take info from Code: ?php the_author_meta('occupation'); ?
etc, but my head is spinning trying to create an accordion for a photogallery Code: ?php echo do_shortcode("[photosmash]"); ?
and youtube playlist Code: ?php (the_author_meta('youtube_playlist')); ?
so I want to click on an image "MY VIDEOS" and the youtube playlist drops down, ditto with MY PHOTOS, click on the image and the gallery appears. The page with all the required content showing is http://traditionalpainter.com/andy-crichton I would really appreciate it if someone can point me in the right direction to code that will hide the gallery and video until required. Thanks in advance. Hi everyone, I was wondering if jQuery or mootools has a set of scripts that creates a page slide effect with a stationary menu? What I mean is instead of loading a page when you click a link, all pages of the website are loaded at first, and then when a link is clicked, the corresponding page slides onto the screen. The navigation menu remains unchanged (except for dropdown menus) throughout everything. This is a perfect example of what I'm looking for: www.mimeartist.com Can anyone point me to the right direction? I tried to search for this but didn't come up with too many great results, and I searched the jQuery documentation and wasn't able to find a slider feature. Thanks. Hi, I am somewhat new to HTML, AJAX, and CSS. I'm wish to implement something similar to what Tumblr does on their front page where you click on the bottom footer bar, and the page horizontally shifts up keeping part of the original page (specifically, the email sign up) visible while exposing more content. I know the simplest is to have the entire content on the page and just "hide" and "show" the interested components "on click" of the bottom footer bar div-tag. But I like the sliding animation. Does YUI or JQuery provide the ability to do the animation? Or is this even a Javascript related functionality - ie should I look at HTML5 or CSS? Thanks Jack Hi all, I am trying to achieve a star rating system (a simple one) without the need to store the data in a database... Basically I need 5 stars on the screen and for people to be able to click on those and them to turn yellow (i'm sure people have seen this before). I have had a go, substituting stars for radio buttons to try and get it going but I'm having problems getting it to work. This is what I have so far: Code: <script type="text/javascript">
var half_total = 0;
function recalculate(){
half_total = 0;
var el = document.getElementsByTagName('input');
for(i=0;i<el.length;i+=1){
if(el[i].className=="star_rating"){
if(el[i].checked){
if(parseInt(el[i].value)==1){
half_total += parseInt(el[i].value);
}
}
}
}
document.getElementById('rating_total').innerHTML = half_total / 2;
}
window.onload = function(){
var el = document.getElementsByTagName('input');
for(i=0;i<el.length;i+=1){
if(el[i].className=="star_rating"){
el[i].onclick = recalculate;
}
}
recalculate();
}
</script>
Code: <label>Rate our service out of 5 stars:</label> <input type="radio" name="rating" class="star_rating" value="1" /> <input type="radio" name="rating" class="star_rating" value="1" /> <input type="radio" name="rating" class="star_rating" value="1" /> <input type="radio" name="rating" class="star_rating" value="1" /> <input type="radio" name="rating" class="star_rating" value="1" /> You have currently rated us <td id="rating_total">0</td>/5<br/> Could someone who is more experienced help with this? Many thanks, Greens85 I am implementing a favorite's click-able link similar to what Gmail uses, however, I am having some trouble with the JS functioning. I am currently using a Jquery library. I have a homepage.php whereby I have list of user posts. All I want to do is add a simple star, whereby if someone clicks on that star it updates a mysql database table (userposts) column (p_fav) to either a '1' for favorite or '0' as not-favorite. The table is already setup, I just need help with the javascript/jquery. I made some implementation by searching through google (see below) but it is not working. Here is what I have, if someone can offer up something simpler as opposed to trying to modify this, I'd be glad to change in a heartbeat (actually it seems that what I have is such a mess, that I'd prefer a better solution): homepage.php Code: <?php
//database connect etc...
// query to get user posts from userposts table (code not shown)
//make favorite links
$mark_fav ='
<a href="#article-15" class="favorite">
<img src="images/fav_star_1.png" alt="Make it a favorite!" />
</a>
<a href="#image-12" class="favorite">
<img src="images/fav_star_1.png" alt="Make it a favorite!" />
</a>
';
//create a list of posts
$post_list .= '
<li>' . $outputList . ' </li>
<li>' . $mark_fav . '</li>
';
// make_favorite function
function make_favorite($item_type, $item_id){
return
$sql = mysql_query("SELECT p_fav FROM userposts WHERE post_id='$post_id'") or die (mysql_error());
while($row = mysql_fetch_array($sql)){
$isitafav = $row["p_fav"];
}
if ($isitafav != 1) {
$sql1 = mysql_query("UPDATE userposts SET p_fav='1' WHERE post_id='$post_id'");
}
}
// set header
header('Content-type: application/json');
// ensure to cleanse these inputs
$item_type = $_POST['item_type'];
$item_id = $_POST['item_id'];
if(make_favorite($item_type, $item_id)){
$response = array('ok' => true, 'message' => 'Huzza!');
}
else {
$response = array('ok' => false, 'message' => mysql_error());
}
// the magic?
echo json_encode($response);
?>
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.make_favorite.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.favorite').make_favorite();
});
</script>
</head>
<body>
<?php echo "$post_list"; ?>
</body>
</html>
And here is the js file (jquery.make_favorite.js) Code: (function($){
$.fn.make_favorite = function(){
var callback = function(response){
console.log(response);
};
return this.each(function(){
$(this).click(function(){
var params = {
item_type: $(this).attr('href').match(/\w+/)[0], // 'article'
item_id: $(this).attr('href').match(/\d+/)[0] // 15
};
$.post('/favorite.php', params, callback, 'json');
// stop event propagation
return false;
});
});
};
})(jQuery);
It seems like this should be a lot simpler, and hopefully I can get a solution that would fit in my homepage.php file, instead of having a separate js file. Hello one and all, I'm not bad with PHP/MySQL but know almost nothing about Javascript. What I'm looking for is a simple rollover 5 star rating system, and I mean really simple. A lot of the ones (almost all of them in fact) that I've seen on the web include a call to the database with Ajax or something similar and about 100 files you need to upload to your server and configure, lol. All I'm looking for is a rollover system that stop on the amount of stars clicked (onclick?) and provies a post value that I can handle within a form. No popups, not serverside synchronus interactions or anything like that. The only extra thing I need it to do is when you rollover it again it still goes to the star you hover over but if nothing is clicked returns to the originally clicked star. I'm hoping that makes sense, if not let me know, I try to be as thorough as I can in the forums. Anyways, so I used DW to create some java script for me but DW is notorious for adding extra clunky bits of code which laden the page. I'll show you my attempts to creating this system I'm talking about. Any help would be very much appreciated, this thing is killing me! Oh yeah, I used smiley faces for the gifs because I didn't have anything else but I'll make some stars for it. In the head --> PHP Code: <script type="text/javascript"> function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } </script> And in the body --> PHP Code: <body onload="MM_preloadImages('media/smiley_online.png','media/smiley_offline.jpg')"> <div style="float:left; width:100%; height:50px;"> <div style="float:left;"><a href="javascript:;" onmousedown="MM_swapImage('smiley1','','media/smiley_online.png','smiley2','','media/smiley_offline.jpg','smiley3','','media/smiley_offline.jpg','smiley4','','media/smiley_offline.jpg','smiley5','','media/smiley_offline.jpg',1)"><img src="media/smiley_offline.jpg" name="smiley1" width="50" height="50" border="0" id="smiley1" onmouseover="MM_swapImage('smiley1','','media/smiley_online.png','smiley2','','media/smiley_offline.jpg','smiley3','','media/smiley_offline.jpg','smiley4','','media/smiley_offline.jpg','smiley5','','media/smiley_offline.jpg',1)" /></a></div> <div style="float:left;"><a href="javascript:;" onmousedown="MM_swapImage('smiley1','','media/smiley_online.png','smiley2','','media/smiley_online.png','smiley3','','media/smiley_offline.jpg','smiley4','','media/smiley_offline.jpg','smiley5','','media/smiley_offline.jpg',1)"><img src="media/smiley_offline.jpg" name="smiley2" width="50" height="50" border="0" id="smiley2" onmouseover="MM_swapImage('smiley1','','media/smiley_online.png','smiley2','','media/smiley_online.png','smiley3','','media/smiley_offline.jpg','smiley4','','media/smiley_offline.jpg','smiley5','','media/smiley_offline.jpg',1)" /></a></div> <div style="float:left;"><a href="javascript:;" onmousedown="MM_swapImage('smiley1','','media/smiley_online.png','smiley2','','media/smiley_online.png','smiley3','','media/smiley_online.png','smiley4','','media/smiley_offline.jpg','smiley5','','media/smiley_offline.jpg',1)"><img src="media/smiley_offline.jpg" name="smiley3" width="50" height="50" border="0" id="smiley3" onmouseover="MM_swapImage('smiley1','','media/smiley_online.png','smiley2','','media/smiley_online.png','smiley3','','media/smiley_online.png','smiley4','','media/smiley_offline.jpg','smiley5','','media/smiley_offline.jpg',1)" /></a></div> <div style="float:left;"><a href="javascript:;" onmousedown="MM_swapImage('smiley1','','media/smiley_online.png','smiley2','','media/smiley_online.png','smiley3','','media/smiley_online.png','smiley4','','media/smiley_online.png','smiley5','','media/smiley_offline.jpg',1)"><img src="media/smiley_offline.jpg" name="smiley4" width="50" height="50" border="0" id="smiley4" onmouseover="MM_swapImage('smiley1','','media/smiley_online.png','smiley2','','media/smiley_online.png','smiley3','','media/smiley_online.png','smiley4','','media/smiley_online.png','smiley5','','media/smiley_offline.jpg',1)" /></a></div> <div style="float:left;"><a href="javascript:;" onmousedown="MM_swapImage('smiley1','','media/smiley_online.png','smiley2','','media/smiley_online.png','smiley3','','media/smiley_online.png','smiley4','','media/smiley_online.png','smiley5','','media/smiley_online.png',1)"><img src="media/smiley_offline.jpg" name="smiley5" width="50" height="50" border="0" id="smiley5" onmouseover="MM_swapImage('smiley1','','media/smiley_online.png','smiley2','','media/smiley_online.png','smiley3','','media/smiley_online.png','smiley4','','media/smiley_online.png','smiley5','','media/smiley_online.png',1)" /></a></div> </div> P.S, To me, this should be a pretty simple task for anyone versed in Javascript especially all you veterans out there. I would love to see how it's done. Many, many thanks. Russ i have been experimenting on this...i don't know why this happens i am sure there is something wrong with my javascript code this is what happens... Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script language="Javascript" type="text/javascript">
function addRow()
{
// grab the element, i.e. the table your editing, in this we're calling it
// 'mySampleTable' and it is reffered to in the table further down on the page
// with a unique of id of you guessed it, 'mySampleTable'
var tbl = document.getElementById('mySampleTable');
// grab how many rows are in the table
var lastRow = tbl.rows.length;
// if there's no header row in the table (there should be, code at least one
//manually!), then iteration = lastRow + 1
var iteration = lastRow;
// creates a new row
var row = tbl.insertRow(lastRow);
// left cell
// insert a cell
// var cellLeft = row.insertCell(0);
// here we're just using numbering the cell, like anything else you don't
// have to use this, but i've kinda noticed users tend to like them
// var textNode = document.createTextNode(iteration);
// takes what we did (create the plain text number) and appends it the cell
// we created in the row we created. NEAT!
//cellLeft.appendChild(textNode);
// right cell
// another cell!
var cellRight = row.insertCell(1);
// creating an element this time, specifically an input
var el = document.createElement('input');
// a data type of text
el.type = 'text';
// the name of the element txtRow, and because this is dynamic we also
// append the row number to it, so for example if this is the eigth row
// being created the text box will have the name of txtRow8. super fantastic.
el.name = 'txtRow' + iteration;
// the exact same thing with a unique id
el.id = 'txtRow' + iteration;
// set it to size of 40. setting sizes is good.
el.size = 40;
// same thing as earlier, append our element to our freshly and clean cell
cellRight.appendChild(el);
// select cell
// our last cell!
var cellRightSel = row.insertCell(0);
// create another element, this time a select box
var sel = document.createElement('select');
// name it, once again with an iteration (selRow8 using the example above)
sel.name = 'selRow' + iteration;
// crates options in an array
// the Option() function takes the first parameter of what is being displayed
// from within the drop down, and the second parameter of the value it is carrying over
sel.options[0] = new Option('text zero', 'value0');
sel.options[1] = new Option('text one', 'value1');
sel.options[2] = new Option('text two', 'value2');
// append our new element containing new options to our new cell
cellRightSel.appendChild(sel);
el.size = 40;
}
function removeRow()
{
// grab the element again!
var tbl = document.getElementById('mySampleTable');
// grab the length!
var lastRow = tbl.rows.length;
// delete the last row if there is more than one row!
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
</script>
<html>
<head>
<title>Page Title</title>
</head>
<body leftmargin="0" topmargin="0">
<form action="addrow.html" name="eval_edit" method="post" format="html">
<table align="center" width = "75%">
<tr>
<td align = "center">
click add to you know, add a row, and remove to remove a row, and submit to submit your page! whee!
</td>
</tr>
<tr>
<td align = "center">
<!--- very imporant to give the table an id --->
<!--- otherwise it won't know where to edit --->
<table border="1" id="mySampleTable">
<tr>
<td>
Type of Leave
</td>
<td>
No. of Days allowed
</td>
</tr>
<!--- i create the initial row by hand, there are a lot of --->
<!--- different ways to do this depending on what parsing --->
<!--- language you use, i found this was easiest for the --->
<!--- snippet, but experiment, do your thing mang. --->
<!--- this matches the same specs we laid out in the javascript --->
<tr>
<td><select name="selRow0">
<option value="value0">text zero</option>
<option value="value1">text one</option>
<option value="value2">text two</option>
</select>
</td>
<td>
<input type="text" name="txtRow1" id="txtRow1" size="40" />
</td>
</tr>
</table>
<!--- our buttons call our javascript functions when clicked --->
<input type="button" value="Add" onclick="addRow();" />
<input type="button" value="Remove" onclick="removeRow();" />
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>
</body>
</html>
Hi, I am using this script which is nearly working correctly, but not quite! When a user selects some text from the web-page and copies it, the script is supposed to pick up the current web-page url and create a resource box or credit line that is added to the selected text when the data is pasted. You will see that the meta keywords are used (randomly) as the anchor text and this should be wrapped with the href= tags in order to create a link. Thats the bit that is not workink, but I can not see why. Here is the complete script. Code: function init(){
// Options:
var useMetaKeyword = true; // Otherwise, page title
var minLength = 40; // Min selection chars
var useMetaAuthor = true; // Otherwise use domain
var addLinks = true; // Otherwise, just cite at end
var skip = new Array("home","link","click here"); // Don't link these (lowercase!)
function D(b,a,c){
if(b.addEventListener)b.addEventListener(a,c,false);
else b.attachEvent&&b.attachEvent("on"+a,c)}
function o(b,a){
if(typeof b=="undefined"||b==null||!RegExp)return false;
a=new RegExp("(^|\\s)"+a+"(\\s|$)");
if(typeof b=="string")return a.test(b);
else if(typeof b=="object"&&b.className)return a.test(b.className);return false}
function E(b,a){
var c=false,j;
for(j=b.parentNode;j!=undefined;){
if(b.parentNode==e.body)break;
else if(b.parentNode==a){c=true;break}j=j.parentNode}return c}
function F(b){
return b.replace(/^\s*/,"")
}
function G(b){
return b.replace(/\s*$/,"")
}
function H(b){
return G(F(b))
}
var I=new Array("home","link","click here"),
e=document,
x=window,
t=e.getElementsByTagName("body")[0],
p=e.getElementsByName("author"),
i=e.getElementsByName("keywords"),
q=x.location.toString(),
u=e.title.toString(),
d;if(!Array.indexOf)Array.prototype.indexOf=function(b,a){
var c=-1;
for(a=a|0;a<this.length||a==-1;a++)
if(this[a]==b)c=a;return c};
if(i.length>0&&useMetaKeyword){
i=e.getElementsByName("keywords")[0].getAttribute("content").split(",");
u=Math.floor(Math.random()*i.length);
i=i[u].replace(/^\s*|\s*$/,"")}
else
i=u;
p=(p.length>0&&useMetaAuthor)?p[0].getAttribute("content"):e.domain;
var y="<p id='credit'><br/>Read more about <a href='"+q+"'>"+i+"</a> by <a href='http://"+e.domain+"' />"+p+"</a></p>";
if(/MSIE/g.test(navigator.userAgent))var v="msie";
else if(/Safari/g.test(navigator.userAgent))v="safChrome";
q=e.createElement("span");q.setAttribute("id","sasText");
t.appendChild(q);
d=e.getElementById("sasText");
posType=document.all&&!window.opera&&!window.XMLHttpRequest?"absolute":"fixed";
d.style.position=posType;
d.style.top="0px";
d.style.left="-9999px";
D(t,"copy",function(){d.innerHTML=y;
if(v=="msie"){
for(var b=e.selection.createRange(),
a=b.parentElement();
a.nodeName!="BODY"&&!o(a,"lbExclude");)a=a.parentNode;
if(o(a,"lbExclude"))return true;
a=e.body.createTextRange();
a.moveToElementText(d);
var c=b.duplicate();
c=c.htmlText;
if(c.length>minLength){
d.id="tempSasText";
d.innerHTML=c+y;
(c=e.getElementById("sasText"))&&c.parentNode.removeChild(c);
d.id="sasText";a.select()}}
else{b=x.getSelection();
for(a=b.anchorNode;a.nodeName!="BODY"&&!o(a,"lbExclude");)a=a.parentNode;
if(o(a,"lbExclude"))return false;
if(b==""&&v=="safChrome"){
d.innerHTML=t.innerHTML;
a=document.createRange();
b.removeAllRanges();
a.selectNodeContents(d);b.addRange(a)}
else if(b.toString().length>minLength){
var j=e.getElementById("credit");
a=b.getRangeAt(0);
c=a.cloneContents();
d.id="tempSasText";
d.insertBefore(c,j);
(c=e.getElementById("sasText"))&&c.parentNode.removeChild(c);
d.id="sasText";
b.removeAllRanges();
a.selectNode(d);
b.addRange(a)}}
var w=[];a=d.getElementsByTagName("a");for(b=0;b<a.length;b++)w.push(a[b].href);
if(addLinks){a=e.getElementsByTagName("a");
for(b=0;b<a.length;b++){var r=a[b].href;
if(w.indexOf(r)==-1)if(E(a[b],d)==false){
var f=H(a[b].innerHTML).toLowerCase();
if(skip.indexOf(f)==-1)
if((new RegExp(e.domain,"g")).test(r)){
var z=[];
function n(g,k,l){
for(var A=g.childNodes.length;A-- >0;){
var h=g.childNodes[A];
if(h.nodeType===1)h.tagName.toLowerCase()!=="a"&&n(h,k,l);
else if(h.nodeType===3)
for(var m=h.data.length;1;){
m=h.data.lastIndexOf(k,m);
if(m===-1||z.indexOf(k.toLowerCase())!==-1)break;
var B=/\w/;
if(h.nodeValue.charAt(m-1).match(B)||h.nodeValue.charAt(m+f.length).match(B))break;
l.call(window,h,m)}}}
function s(g,k){g.splitText(k+f.length);
var l=e.createElement("a");
l.href=r;l.appendChild(g.splitText(k));
g.parentNode.insertBefore(l,g.nextSibling);
z.push(f.toLowerCase());
w.push(r)}n(d,f,s);f=f.charAt(0).toUpperCase()+f.slice(1);n(d,f,s);
f=f.toUpperCase();
n(d,f,s);f=f.replace(/\w\S*/g,function(g){
return g.charAt(0).toUpperCase()+g.substr(1).toLowerCase()});n(d,f,s)}}}}})}
window.onload=init;
I have put the script on this page: test page To test it, just go to that page, highlight some text (at least 40 characters) copy it, and then paste it into your editor or notepad. You can see that it is picking up some info and writing the attribute line but it doesn't create the link If it helps get it working, I am happy to slim the code down by excluding some features. Any ideas ? |
|||||||