|
JavaScript - Adding A Rel Tag To Javascript
I have a script which opens an HTML page and passes the current URL to a form on the page. I'm also using RokBox, which open a window as an overlay on the current page rather than as a popup. It is triggered by adding rel="rokbox" to any link. For instance, the following link opens moreinfo.htm using RokBox:
Code: <a rel="rokbox" href="/modules/mod_S5tellafriend/moreinfo.htm">More Info</a> Problem is the link doesn't pass the URL. The following code passes the URL but doesn't trigger RokBox: Code: <input type="button" class="button" value="MORE INFORMATION" onclick="s5_open_taf_popup()"/>
<script type="text/javascript">
var s5_taf_parent = window.location;
function s5_open_taf_popup() {
window.open('/modules/mod_S5tellafriend/moreinfo.htm','page','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=420,height=570,left=50,top=50,titlebar=yes')
}
</script>
Is there a way to add rel="rokbox" to the script? Or maybe pass the URL with the link instead? Thanks! Similar TutorialsI have a simple problem. I want to add the current page's url to a link, like this: <code> <a href="http://www.somesite.com/somepage.aspx?a="> </code> After the 'a=' I need to add javascript that will return the current url. It can be the full url (example: http://www.codingforums.com/newthrea...=newthread&f=2) or a partial one (example: /newthread.php?do=newthread&f=2). Can someone help me with an example? I have found a code to help me learn how to add forms in javascript, but it's limited to text input forms. Code: <script type="text/javascript"><!--
function updatesum() {
document.form.sum.value = (document.form.sum1.value -0) + (document.form.sum2.value -0);
}
//--></script>
Where the inputs sum1 and sum2 are text fields you put whatever numbers you want in. That works fine. Great. Now what I'm having trouble with is modifying the code so that it will add one form with an input number with a form that spits out a randomly generated number. Code: <input type="button" value="D20" onclick="this.form.display.value = Math.round (20 * Math.random())" class="buttonHi" /> <input name="display" type="text" size="6" value="" /> This is what I'm using for my random number generator. So basically I want to be able to put, say, 5, into the input text field above this. And then click on the d20 button to get a random number, say, 15, and then have the first code add the inputted 5 with the randomly generated 15. Is this possible? How can I build a table that prompts user for number of rows and then number of columns and then builds it based on user input?
I am trying to set up a web that new times will be displayed when they add current times to a form. here is the static HTML <form method="POST" > current time is 11:32 AM</p> <p>add <input type="text" name="T1" size="5" value="20"> mins and the new time time would be <b> 11:52 AM</b></p> <p>add another<input type="text" name="T2" size="5" value="15"> mins and the time then changes to <b>12:07 PM</b></p> <p><input type="submit" value="Submit" name="B1"></p> <p><input type="reset" value="Reset" name="B2"></p> </form> I would like to have the new times to change dynamically as they type in either (or both) input boxes hi, Guys can u help me currently iam running clicksor ads on my blog but its decrease page load time and page stuck where javascrip is located can u help me . how can i put this javascript in iframe so that this javascript loads but never stuck the page thanx Regards Fawad Hi, im fairly new at all this, so please forgive me if I have misunderstood the guidelines on posting threads for this topic. Im needing some help with adding a timed delay for a widget I have on my website. My website is hosted on moonfruit, a flash based web builder, its very beginners level, and so this makes me feel like the new kid at school posting on this forum. however moonfruit does have a HTML/JavaScript snippet Which allows me to paste in code and show the cooliris gallery But is has become crucial to my websites completion that this widget must have a timed delay on it ive been at google for days till the point where im seeing the same pages again, and have come across setTimeout, unfortunately that's as far as I can seem to go, ive tried pasting in the code in numerous places and I just cant get it to work, i have pasted in other JavaScript codes, and they have worked, so i am convinced that its just me being a noob, other than it being a limitation on moonfruit I would appreciate any help with this Here is the code that im trying to get a delayed time of 10 seconds or so. [CODE] <object id="o" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="845" height="350"><param name="movie" value="http://apps.cooliris.com/embed/cooliris.swf"/><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always"/><param name="flashvars" value="style=dark&backgroundColor=#0d0d0d&feed=api://www.flickr.com/?user=41683862@N04%26album=72157622009594203&glowColor=#FFFFFF&showSearch=false&showEmbed=false&show Tutorial=true&showChrome=true"/><embed type="application/x-shockwave-flash" src="http://apps.cooliris.com/embed/cooliris.swf" flashvars="style=dark&backgroundColor=#0d0d0d&feed=api://www.flickr.com/?user=41683862@N04%26album=72157622009594203&glowColor=#FFFFFF&showSearch=false&showEmbed=false&show Tutorial=true&showChrome=true" width="845" height="350" allowFullScreen="true" allowScriptAccess="always"></embed></object> [CODE] Again any help is most appreciated Hello all! I am using 'simplecartjs' as a simple shopping cart for my website. To checkout, the user e-mails me his cart containts. I would like to have his name, email and adress with this but i'm unable to add this to my shopping form. Here is my JS: Code: me.emailCheckout = function() {
itemsString = "";
for( var current in me.items ){
var item = me.items[current];
itemsString += item.name + " " + item.quantity + " " + item.price + "\n";
}
var form = document.createElement("form");
simpleCart.empty();
form.style.display = "none";
form.method = "POST";
form.action = "sendjs.php";
form.acceptCharset = "utf-8";
form.appendChild(me.createHiddenElement("jcitems", itemsString));
form.appendChild(me.createHiddenElement("jctotal", me.total));
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
}
And here is the PHP that sends is (sendjs.php): Code: <?php
$to = 'info@kheuning.nl';
$subject = 'the subject';
$jcitems = $_POST['jcitems'];
$headers = 'From: webmaster@example.com' . "\r\n" .
'Reply-To: webmaster@example.com' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $jcitems, $headers);
Header('Location: thankyou.html');
?>
I understand how to add variables to send in my php form, but it doesn't take normale html form input's i add to the page. How can i add these to the js? Thanks in advance! Jonas Hi, I have this design, where the menu is a JavaScript that makes the content page flow in from the right. As a standard there are only 4 menu objects, but I need a fifth one. I have tried to add another myself, and change everything i thought important in the javascript.js, but it just doesn't work. The javascript screws up, so I am clearly missing something. Therefore i'm hoping that someone inhere, can help me adding it. Below are the index, javascript and stylesheet included. If I'm not making myself clear, please let me know and I will try to explain it better Thanks walkie index.htm 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>Identity</title>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
</head>
<body>
<div id="leftSide">
<!--Site Title-->
<div id="title">
<!--Main Title-->
<h1><span></span>Identity</h1>
<!--Caption/Sub Title-->
<span class="titleSubText">the portfolio of john smith</span>
</div>
<div id="arrowWrapper"><div id="arrow"></div></div>
<div id="buttonsWrapper">
<!--About Button-->
<div id="aboutButtonWrapper">
<div class="navButton" id="aboutButton"></div>
<div class="navCaption" id="aboutCaption">
<!--About Button: Label-->
<span class="navCaptionText">about</span><br />
<!--About Button: Sub-Label-->
<span class="navSubCaptionText">who I am</span>
</div>
</div>
<!--Portfolio Button-->
<div id="portfolioButtonWrapper">
<div class="navButton" id="portfolioButton"></div>
<div class="navCaption" id="portfolioCaption">
<!--Portfolio Button: Label-->
<span class="navCaptionText">portfolio</span><br />
<!--Portfolio Button: Sub-Label-->
<span class="navSubCaptionText">my work</span>
</div>
</div>
<!--Services Button-->
<div id="servicesButtonWrapper">
<div class="navButton" id="servicesButton"></div>
<div class="navCaption" id="servicesCaption">
<!--Services Button: Label-->
<span class="navCaptionText">services</span><br />
<!--Services Button: Sub-Label-->
<span class="navSubCaptionText">what I do</span>
</div>
</div>
<!--Contact Button-->
<div id="contactButtonWrapper">
<div class="navButton" id="contactButton"></div>
<div class="navCaption" id="contactCaption">
<!--Contact Button: Label-->
<span class="navCaptionText">contact</span><br />
<!--Contact Button: Sub-Label-->
<span class="navSubCaptionText">get in touch</span>
</div>
</div>
</div>
</div>
<div id="contentPanelWrapper">
<div id="contentPanelEdge"></div>
<!--Wrapper That Contains 'About' Content-->
<div class="content" id="aboutContent">
<!--Title-->
<div class="contentTitle">about</div>
<!--Body Text-->
<div id="aboutText">
<h3>Who I Am</h3><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum,
dolor leo sagittis nunc, at pharetra ligula urna ut ligula. Morbi ac erat ante, in feugiat libero. Quisque nec mauris neque.
Quisque sit amet condimentum turpis. Sed at arcu eu augue venenatis viverra. Vivamus odio nulla, facilisis et commodo at,
sagittis id neque.</p><br />
<p>Nulla facilisi. Quisque non tellus justo, at tempor nisl. Fusce eleifend augue euismod sem varius
pulvinar. Etiam rutrum magna in quam ultrices sit amet dictum nulla commodo.</p>
</div>
</div>
<!--Wrapper That Contains 'Portfolio' Content-->
<div class="content" id="portfolioContent">
<!--Title-->
<div class="contentTitle">portfolio</div>
<!--Image Slider-->
<div id="portfolioSlider">
<div id="sliderToolbar">
<div class="sliderButton" id="prevButton"></div>
<div class="sliderButton" id="nextButton"></div>
</div>
<div id="imageWrapper">
<ul id="imgList">
<!--Portfolio Images Go Here (See Documentation)-->
<li><a class="sliderImage" href="images/portfolio/img1-large.jpg"><img alt="" src="images/portfolio/img1-small.jpg" /></a></li>
<li><a class="sliderImage" href="images/portfolio/img2-large.jpg"><img alt="" src="images/portfolio/img2-small.jpg" /></a></li>
<li><a class="sliderImage" href="images/portfolio/img3-large.jpg"><img alt="" src="images/portfolio/img3-small.jpg" /></a></li>
<li><a class="sliderImage" href="images/portfolio/img4-large.jpg"><img alt="" src="images/portfolio/img4-small.jpg" /></a></li>
</ul>
</div>
</div>
</div>
<!--Wrapper That Contains 'Services' Content-->
<div class="content" id="servicesContent">
<!--Title-->
<div class="contentTitle">services</div>
<!--Service 1 Column-->
<div class="serviceColumn" id="serviceColumn1">
<h3>Identity Design</h3><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
at pharetra ligula urna ut ligula.</p>
</div>
<!--Service 2 Column-->
<div class="serviceColumn" id="serviceColumn2">
<h3>Web Design</h3><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
at pharetra ligula urna ut ligula.</p>
</div>
<!--Service 3 Column-->
<div class="serviceColumn" id="serviceColumn3">
<h3>Icon + UI Design</h3><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
at pharetra ligula urna ut ligula.</p>
</div>
</div>
<!--Wrapper That Contains 'Contact' Content-->
<div class="content" id="contactContent">
<!--Title-->
<div class="contentTitle">contact</div>
<div id="contactFormWrapper">
<!--Contact Form-->
<form id="contact" method="post" action="mail.php">
<input type="text" id="name" name="name" value="name" />
<input type="text" id="email" name="email" value="email" /><br /><br />
<textarea id="message" name="message" rows="" cols="">message</textarea>
<input type="image" id="submit" src="images/sendButtonDis.png" disabled="disabled" />
</form>
<div id="successMessage"></div>
</div>
</div>
</div>
</body>
</html>
javascript.js Code: numImages=0;
currentImage=1;
currentPanel="none";
$(document).ready(function(){
// Initializes FancyBox Lightbox
$("a.sliderImage").fancybox({
'zoomSpeedIn':200,
'zoomSpeedOut':200,
'overlayShow':true,
'padding':4
});
SelectButton("none");
$("#arrow").fadeOut(0);
if (navigator.appVersion.indexOf("MSIE 7.0")!=-1){
$("input").css({"height":13});
$("#name").css({"width":155});
};
$("#title").click(function(){
ShowPanel("none");
});
// Handles Formatting the Portfolio Slider
$("#imgList").children().each(function(){
numImages++;
});
$("#imageWrapper").css({"width":(numImages*541)});
// Handles Function of the Portfolio Slider
$("#prevButton").click(function(){
if (currentImage==1){
currentImage=numImages;
} else {
currentImage--;
};
$("#imageWrapper").animate({"left":-((currentImage-1)*541)},500);
});
$("#nextButton").click(function(){
if (currentImage==numImages){
currentImage=1;
} else {
currentImage++;
};
$("#imageWrapper").animate({"left":-((currentImage-1)*541)},500);
});
// Handles Rollover and Click For the Nav Buttons
$("#aboutButton").mouseenter(function(){
SelectButton("about");
});
$("#portfolioButton").mouseenter(function(){
SelectButton("portfolio");
});
$("#servicesButton").mouseenter(function(){
SelectButton("services");
});
$("#contactButton").mouseenter(function(){
SelectButton("contact");
});
$("#aboutButton,#portfolioButton,#servicesButton,#contactButton").mouseleave(function(){
SelectButton("none");
});
$("#aboutButton").click(function(){
ShowPanel("about");
});
$("#portfolioButton").click(function(){
ShowPanel("portfolio");
});
$("#servicesButton").click(function(){
ShowPanel("services");
});
$("#contactButton").click(function(){
ShowPanel("contact");
});
// Handles Contact Form Behavior
$("#name").focus(function(){
$("#name").css({"background-color":"#FFFFFF"});
if ($("#name").val()=="name"){
$("#name").val("");
$("#name").css({"color":"#444444"});
};
});
$("#name").blur(function(){
if ($("#name").val()==""){
$("#name").val("name");
$("#name").css({"color":"#888888"});
$("#name").css({"background-color":"#ffdddd"});
};
});
$("#email").focus(function(){
$("#email").css({"background-color":"#FFFFFF"});
if ($("#email").val()=="email"){
$("#email").val("");
$("#email").css({"color":"#444444"});
};
});
$("#email").blur(function(){
if ($("#email").val()==""){
$("#email").val("email");
$("#email").css({"color":"#888888"});
$("#email").css({"background-color":"#ffdddd"});
};
if ($("#email").val().indexOf("@")==-1 || $("#email").val().indexOf(".")==-1){
$("#email").css({"background-color":"#ffdddd"});
};
});
$("#message").focus(function(){
$("#message").css({"background-color":"#FFFFFF"});
if ($("#message").val()=="message"){
$("#message").val("");
$("#message").css({"color":"#444444"});
};
});
$("#message").blur(function(){
if ($("#message").val()==""){
$("#message").val("message");
$("#message").css({"color":"#888888"});
$("#message").css({"background-color":"#ffdddd"});
};
});
$("#submit").mousedown(function(){
$("#submit").attr({"src":"images/sendButtonSel.png"});
});
$("#submit").mouseup(function(){
$("#submit").attr({"src":"images/sendButton.png"});
});
$("#submit").mouseout(function(){
$("#submit").attr({"src":"images/sendButton.png"});
});
$("#name,#email,#message").keyup(function(){
if ($("#name").val()!="" && $("#name").val()!="name" && $("#email").val()!="" && $("#email").val()!="email" && $("#email").val().indexOf("@")>-1 && $("#email").val().indexOf(".")>-1 && $("#message").val()!="" && $("#message").val()!="message"){
EnableSubmitButton();
} else {
DisableSubmitButton();
};
});
$("#submit").click(function(){
DisableSubmitButton();
var dataString="name=" + $("#name").val() + "&email=" + $("#email").val() + "&message=" + $("#message").val();
$.ajax({
type: "POST",
url: "mail.php",
data: dataString,
success: function() {
ResetForm();
$("#successMessage").fadeIn(10);
setTimeout('$("#successMessage").fadeOut(1000);',2000);
}
});
return false;
});
});
function EnableSubmitButton(){
$("#submit").attr({"disabled":""});
$("#submit").attr({"src":"images/sendButton.png"});
};
function DisableSubmitButton(){
$("#submit").attr({"disabled":"disabled"});
$("#submit").attr({"src":"images/sendButtonDis.png"});
};
function ResetForm(){
DisableSubmitButton();
$("#name, #email, #message").css({"background-color":"#FFFFFF"});
$("#name, #email, #message").css({"color":"#888888"});
$("#name").val("name");
$("#email").val("email");
$("#message").val("message");
};
function ShowPanel(panel){
currentPanel=panel;
SelectButton(panel);
$(".content").fadeOut(250);
switch(panel){
case "none":
$("#contentPanelWrapper").animate({"left":"100%"},500);
$("#arrow").fadeOut(50)
break;
case "about":
$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
$("#aboutContent").show();
$("#contentPanelWrapper").animate({"left":"44%"},500);
});
$("#arrow").animate({"top":22},150,function(){$("#arrow").fadeIn(50)});
break;
case "portfolio":
$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
$("#portfolioContent").show();
$("#contentPanelWrapper").animate({"left":"44%"},500);
});
$("#arrow").animate({"top":98},150,function(){$("#arrow").fadeIn(50)});
break;
case "services":
$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
$("#servicesContent").show();
$("#contentPanelWrapper").animate({"left":"44%"},500);
});
$("#arrow").animate({"top":170},150,function(){$("#arrow").fadeIn(50)});
break;
case "contact":
$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
$("#contactContent").show();
$("#contentPanelWrapper").animate({"left":"44%"},500);
});
$("#arrow").animate({"top":243},150,function(){$("#arrow").fadeIn(50)});
break;
};
};
function SelectButton(button){
if (currentPanel!="about"){
$("#aboutCaption").animate({"left":50},{queue:false, duration:250});
$("#aboutCaption").animate({"opacity":0},{queue:false, duration:250});
$("#aboutButton").css({"background-position":"0px 0px"});
};
if (currentPanel!="portfolio"){
$("#portfolioCaption").animate({"left":50},{queue:false, duration:250});
$("#portfolioCaption").animate({"opacity":0},{queue:false, duration:250});
$("#portfolioButton").css({"background-position":"0px -64px"});
};
if (currentPanel!="services"){
$("#servicesCaption").animate({"left":50},{queue:false, duration:250});
$("#servicesCaption").animate({"opacity":0},{queue:false, duration:250});
$("#servicesButton").css({"background-position":"0px -128px"});
};
if (currentPanel!="contact"){
$("#contactCaption").animate({"left":50},{queue:false, duration:250});
$("#contactCaption").animate({"opacity":0},{queue:false, duration:250});
$("#contactButton").css({"background-position":"0px -192px"});
};
switch(button){
case "none":
break;
case "about":
$("#aboutCaption").animate({"left":70},{queue:false, duration:250});
$("#aboutCaption").animate({"opacity":1},{queue:false, duration:250});
$("#aboutButton").css({"background-position":"65px 0px"});
break;
case "portfolio":
$("#portfolioCaption").animate({"left":70},{queue:false, duration:250});
$("#portfolioCaption").animate({"opacity":1},{queue:false, duration:250});
$("#portfolioButton").css({"background-position":"65px -64px"});
break;
case "services":
$("#servicesCaption").animate({"left":70},{queue:false, duration:250});
$("#servicesCaption").animate({"opacity":1},{queue:false, duration:250});
$("#servicesButton").css({"background-position":"65px -128px"});
break;
case "contact":
$("#contactCaption").animate({"left":70},{queue:false, duration:250});
$("#contactCaption").animate({"opacity":1},{queue:false, duration:250});
$("#contactButton").css({"background-position":"65px -192px"});
break;
};
};
My code goes through the answer function (below) and it determins if you answered green. If you answered green a popup says correct other wise incorrect. How can I modify my code so that I can add multiple answers for different questions.Example q1 answer = green q2 answer = blue . . q20 answer = Friday Here is my .js code Code: var n = 16; // modify this for number of seconds to answer
document.getElementById( 'time').value = "Answer in " + n + " seconds";
var i = setInterval('count()' , 1000);
var tooLate;
function count() {
tooLate = 0;
n--;
if(n >=0) {
document.getElementById( 'time').value = "Answer in " + n + " seconds";
}
else {
clearInterval(i);
alert("Too late!");
if(document.getElementById( 'answer').value == correct){
tooLate = 1;
}
}
function answer() {
var correct = "green"; // This is the correct answer
if (tooLate == 0) {
if(document.getElementById( 'answer').value == correct) {
clearInterval(i);
alert("Right Answer with " + n + " seconds remaining");
}
else{
clearInterval(i);
alert("Incorrect! The answer was " + correct);
}
}
submitform();
//submit form
function submitform()
{
document.forms["myform"].submit();
}
}
I am a first-time Javascript user and am trying to add the Magic Image Rotator code to my site: San Diego Solar. I have followed others suggestions and directions from other places but I still can't figure it out. Here is the Javascript code I am trying to run: MagicImage.js Here is the code I am inserting into the HTML (via a .PHP file: a specific way that is used for Thesis theme on Wordpress which I run for my site). Code: function MagicImage() {
?>
<html>
<body>
<script language="javascript" type="text/javascript" src="http://www.sandiegosolarenergy.org/wp-content/themes/thesis_18/lib/scripts/MagicImage.js"></script>
</body>
</html>
<?php
}
add_action('thesis_hook_header','MagicImage');
Using Firebug for Firefox, I get errors showing up on line 37 of MagicImage.js... though I don't know what to do with that line of code. The problem is that nothing is showing up on the page! Can someone help me? Hey all, I'm sure this is very basic but I'm having a hard time adding a hyperlink to text within javascript. I want to add a website link to the text 'click here' that is being displayed under the image within javascipt. I end up modifying the whole image instead, removing the javascript that displays the larger version of the image. Can anyone help me out please? Here's the coding. I'm using Dreamweaver CS5 on a PC to modify a few things and using another website building program to get the basic layout. I'm just a small business owner trying to get my website off the ground. Thanks in advance! <div id="imCel1_01"> <div id="imCel1_01_Cont"> <div id="imObj1_01"> <a href="javascript:imShowBox('files/june2011.jpg',500,500,'Right click to print....................Click HERE for website!','IMG','t');" title=""><img src="images/p025_1_01.jpg" alt="" title="" /></a> </div> I am trying to use the javascript tabifier found here. I have it successfully working with the 3 tabs that the example comes with. I have not been able to figure out how to add more tabs to this. I would like to have quite a few more tabs. Any help or guidance is very much appreciated. Thanks, RK 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, I have successfully added Flash to my page but I want the flash animation to be inside the <div id="main">. For some reason when I put the <div id="flashcontent"></div> inside the main div it doesn't show up on the page. Please help. My code is below: <!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=utf-8" /> <title>MikeJamesDesigns</title> <link rel="stylesheet" type="text/css" href="cssEdit.css" /> <script type="text/javascript" src="js/flashobject.js"></script> <script type="text/javascript"> var fo = new FlashObject("bannerISRAEL.swf", "animationName", "450", "60", "8", "#FFFFFF"); fo.addParam("allowScriptAccess", "sameDomain"); fo.addParam("quality", "high"); fo.addParam("scale", "noscale"); fo.addParam("loop", "true"); fo.write("flashcontent"); </script> </head> <body> <!--<div class="tikiImage"> <img src="/Users/MikeJamesRossi/Desktop/cssEdit/images/tiki.png" alt="tikiTorch" height="1040px" width="1100px"/> </div>--> <div id="wrapper"> <div id="sitebranding"> </div><!--end of sitebranding div--> <div id="navigation"> <a href="home">Home</a> | <a href="about">About</a> | <a href="news">News</a> | <a href="images">Images</a> | <a href="home">Faq</a> | <a href="contact">Contact</a> </div><!--end of navigation div--> <div id="main"> <div id="flashcontent"></div> </div><!--end of main div--> </div><!--end of wrapper div--> </body> </html> My css file looks like this: #flashcontent { position: relative; top: 500px; left: 365px; width: 60px; heightx; background-color:red; z-index: ; } Any help would be greatly aprreciated!! Thanks Mike! I am trying to add tabindex values to buttons built in JavaScript as I did with accesskeys but having no luck--it disrupts my page layout. Anyone have suggestions? Here is the code I am working with: Code: function ObjButtonBuild() {
this.css = buildCSS(this.name,this.x,this.y,this.w,this.h,this.v,this.z)
this.div = '<' + this.divTag + ' id="'+this.name+'" style="text-indent:0;"></' + this.divTag + '>\n'
this.divInt = '<a name="'+this.name+'anc" href="javascript:void(null)"'
if(this.accessKeyValue && this.accessKeyValue!=null){
this.divInt+=' accessKey='+this.accessKeyValue+' ';
}
if( this.altName ) this.divInt += ' title="'+this.altName+'"'
else if( this.altName != null ) this.divInt += ' title=""'
this.divInt += '><img name="'+this.name+'Img" src="'+this.imgOffSrc
if( this.altName ) this.divInt += '" alt="'+this.altName
else if( this.altName != null ) this.divInt += '" alt="'
this.divInt += '" width='+this.w+' height='+this.h+' border=0'
if( !is.ns4 ) this.divInt += ' style="cursor:pointer"'
this.divInt += '></a>'
}
Code: button41 = new ObjButton('button41',null,679,0,53,32,1,54,'div')
button41.setImages('images/0807_help.jpg','images/0807_help_over.jpg','images/0807_help_over.jpg')
button41.onUp = button41onUp
button41.hasOnUp = true
button41.capture=4
button41.setAccessKey(2)
button41.setTabIndex(2)
button41.build()
Hi Im taking a course in web design and am working on a basic javascript page. I have a drop down box where you select a item and it opens a new window. How would I get the back ground color to be the same as the web page color (lightblue), what code would I use and where in my code would I put it? [CODE] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>MEG</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var content; var oneWindow; var fullWindow; var oneWindowStatus = false; var fullWindowStatus = false; function closeAllWindows() { if((oneWindowStatus) && (!oneWindow.closed)) oneWindow.close(); if((fullWindowStatus) && (!fullWindow.closed)) fullWindow.close(); oneWindowStatus = false; fullWindowStatus = false; } function productObject(name,description,use,image) { this.name = name; this.description = description; this.use = use; this.image = image; this.displayOne = displayOne; } //Add products here var products = new Array(); products[0] = new productObject("Ears", "Fluffy, pointy, big", "For hearing other dogs near by, for listening to my owner but ignoring her", "images/ears.jpg"); products[1] = new productObject("Eyes", "Shiny, brown, pretty", "To see dogs to bark at, to see when treats are available", "images/eyes.jpg"); products[2] = new productObject("Nose", "Black, wet", "For sniffing out food and squirrels", "images/nose.jpg"); products[3] = new productObject("Mouth", "BIG", "For barking loudly with", "images/mouth.jpg"); products[4] = new productObject("Tongue", "Pink, wet", "To lick you with when you really dont want her to", "images/tongue.jpg"); products[5] = new productObject("Legs", "Short, fluffy", "To run as fast as possible with after squirrels", "images/legs.jpg"); products[6] = new productObject("Paws", "Small", "To raise when I want treats/food of any sort", "images/paws.jpg"); var len = products.length; function displayOne() { content=""; content+="<HTML><HEAD><TITLE>" + this.name + "</TITLE></HEAD>"; content+="<BODY><DIV ALIGN='center'>"; content+="<TABLE WIDTH='90%'><TR><TD COLSPAN='3' ALIGN='center'>"; content+="<H3>Name: " + this.name.bold() + "</H3><HR>"; content+="<TR><TD><B>Name:</B> " + this.name; content+="<TR><TD><B>Description:</B> " + this.description; content+="<TR><TD><B>Use:</B> " + this.use; content+="<TR><TD><IMG SRC= '" + this.image + "' HEIGHT='100' WIDTH='100'>"; content+="</TABLE><FORM>"; content+="<INPUT TYPE='button' VALUE='OK' onClick='window.close();'>"; content+="</FORM></DIV></BODY></HTML>"; oneWindow = open("","OneWindow","width=500,height=400"); newWindow(oneWindow); oneWindowStatus = true; } function showAll() { content=""; content+="<HTML><HEAD><TITLE>All that is Meg</TITLE></HEAD>"; content+="<BODY><DIV ALIGN=center>"; content+="<TABLE WIDTH='90%' BORDER CELLPADDING='2'>"; content+="<TR><TH COLSPAN='2' ALIGN='center'>"; content+="All that is Meg"; content+="<TR><TH>Name<TH>Image"; for (var i = 0; i < len; i++) { content+="<TR><TD>"; content+="<A HREF='javascript:void(window.opener.products[" + i + "].displayOne());'>"; content+=products[i].name + "</A>"; content+="<TD>" + products[i].description; } content+="</TABLE><FORM>"; content+="<INPUT TYPE='button' VALUE='OK' onClick='window.close();'>"; content+="</FORM></DIV></BODY></HTML>"; fullWindow = open("","AllWindow","width=500,height=400,resizable=1"); newWindow(fullWindow); fullWindowStatus = true; } function newWindow(x) { x.document.close(); x.document.open(); x.document.write(content); x.document.close(); x.moveTo(20,20); x.focus(); } //--> </SCRIPT> </SELECT> </HEAD> <BODY onFocus="closeAllwindows();" bgcolor="lightblue"> <DIV ALIGN="center"> <H2>Meg</H2> <HR> <FORM NAME="prodForm"> <TABLE WIDTH="100%"> <TR> <TD WIDTH="50%" ALIGN="right"> <SELECT NAME="itemName"> <SCRIPT LANGUAGE="JavaScript"> <!-- for (var i = 0; i < len; i++) { document.write("<OPTION>" + products[i].name); } //--> </SCRIPT> </SELECT> <TD> <INPUT TYPE="button" VALUE="Get Info" onClick=" var i = document.prodForm.itemName.selectedIndex; products[i].displayOne();"> <TR><TD ALIGN="right"> <TR><TD colspan="2" ALIGN="center"> <TR><TD colspan="2" ALIGN="center"> <INPUT TYPE="button" VALUE="Show All Products" onClick="showAll();"> </TABLE> </FORM> <img src="images/meg1.jpg" "alt="Meg" border="2"/> </DIV> </BODY> </HTML> [CODE] Thanks and hope someone can help Claire Hello, all. I have a script that toggles an element's style between display block and display none based on an onclick event. It's being implemented in a content management system (WordPress) so it has some dynamic post ID's assigned to it. I have tried editing it to toggle the variable "type" so that I can have the class of the div change with the rest of the variables being swapped during the toggle, but no matter what I've changed I can't seem to get it to update the variable when someone clicks on the link with the onclick event. Everything else works perfectly, content is shown and hidden when you click the link, I just can't get the "type" variable to switch. I think it's something to do with the JavaScript function itself (it looks to me like it's only looking at 4 variables and this new one would be a new variable that's being toggled). Below is the code. How can I get the type variable to update like the others (hidden_css, tmp_text, more_text, less_text)? Code: /*-----------------------------------------------------------------------------------*/
// Show Hide Posts
/*-----------------------------------------------------------------------------------*/
### Function: Enqueue JavaScripts
add_action('wp_enqueue_scripts', 'showhide_scripts');
function showhide_scripts() {
wp_enqueue_script('jquery');
}
### Function: Short Code For Inserting Show/Hide Into Post
add_shortcode('showhide', 'showhide_shortcode');
function showhide_shortcode($atts, $content = null) {
// Variables
$post_id = get_the_id();
// Extract ShortCode Attributes
extract(shortcode_atts(array(
'type' => 'show',
'more_text' => __('View Full Post'),
'less_text' => __('Close Post'),
'hidden' => 'yes'
), $atts));
// Determine Whether To Show Or Hide Content
$hidden_css = 'display: none;';
if($hidden == 'no') {
$hidden_css = 'display: block;';
$type = 'hide';
$tmp_text = $more_text;
$more_text = $less_text;
$less_text = $tmp_text;
}
// Format HTML Output
$output = '<div id="'.$type.'-content-'.$post_id.'" class="'.$type.'-content" style="'.$hidden_css.'">'.$content.'</div>';
$output .= '<div class="'.$type.'-link"><a href="#" onclick="showhide_toggle(\''.$type.'\', '.$post_id.', \''.esc_js($more_text).'\', \''.esc_js($less_text).'\'); return false;"><span id="'.$type.'-toggle-'.$post_id.'">'.$more_text.'</span></a></div>';
return $output;
}
### Function: Add JavaScript To Footer
add_action('wp_footer', 'showhide_footer');
function showhide_footer() {
echo '<script type="text/javascript">'."\n";
echo '/* <![CDATA[ */'."\n";
echo 'function showhide_toggle(a,b,c,d){jQuery("#"+a+"-content-"+b).toggle();jQuery("#"+a+"-toggle-"+b).text(jQuery("#"+a+"-toggle-"+b).text()==c?d:c)};'."\n";
echo '/* ]]> */'."\n";
echo '</script>'."\n";
}
Good morning! Hopefully somebody can help me with this javascript question. (No knowledge of Google Anayltics needed for this.) I'm adding Google Analytics 'Event Tracking' javascript to a typical 'Add to Cart' button. The customer enters desired quantity in the text box and clicks the 'Add to Cart' button to order. I would like to use the Event Tracking javascript to record the button click - plus the Value entered in the text box - as one event. Here's the code for the form (the text box and 'Add to Cart' button code lines are bold): Code: <form method="post" action="http://www.yoursite.com/mm5/merchant.mvc?"> <input type="hidden" name="Screen" value="BASK" /> <input type="hidden" name="Product_Code" value="yourproductcode" /> <input type="hidden" name="Action" value="ADPR" /> <label for="quantity">Quantity:</label> <input type="text" name="quantity" value="0" /> <input type="submit" value="Add To Cart" /> </form> I came up with this javascript for the Event Tracking (to be inserted somewhere above): Code: onClick="_gaq.push(['_trackEvent', 'OrderForms', 'AddToCart', 'yourproductcode', document.getElementByName('quantity').value]);"
I'm wondering where I would enter this javacript code inside the form code to pick up both the button click - plus the quantity? You'll notice that I'm using 'getElementByName' to extract 'quantity' from the text box and record its 'value'. If I enter this javascript on the 'Add to Cart' line - right after "Add to Cart", would 'quantity' still get picked up upon button-click - since it's all on the same form? Or would it be a problem because 'quantity' is contained in a different <input> container? Thanks! Any help is greatly appreciated. IB Alright so I've been teaching myself php/javascript/html/joomla for the past couple weeks, learning as i go along. So bear with me if i seem like a total moron =p. I'm trying to run a script from a js file to add javascript to the website inside the iframe. I also would like the script to only be activated onclick(this is all in an article). To clarify my website has an iframe and this iframe contains a webpage from http://website987.com/. I want to run thescript.js on the website inside that iframe, to add javascript to that website, however i also only want to run this js file on the click of a link/button. I hope i'm being clear if I'm not please tell me and ill try to reiterate. I've been trying to get this to work for a while now and I feel like this is really simple and I'm asking a stupid question. However this is what I've got so far, currently this just redirects the iframe to the URL with my code on it(instead of actually running it).How could i edit this/what coding could I use to make it so thescript.js actually runs instead of it being just redirected? Reply With Quote Code: <?php $filename = 'thescript.js'; $path = '/media/system/js/'; // add the path parameter if the path is different than : 'media/system/js/' JHTML::script($filename, $path, true); // MooTools will load if it is not already loaded ?> Code: <HTML>
<HEAD>
<script language="javascript">
function loadOne()
{
parent.FRAME1.location.javascript: function('/media/system/js/thescript.js')
}
</script>
</HEAD>
<BODY>
<iframe name="FRAME1" src="http://website987.com/" width="740" height="500" frameborder="0" scrolling="yes"></iframe>
<a href="javascript:loadOne()">Click Here/a>
</BODY>
</HTML>
Am i even on the right track? I've been testing out a billion different codes and I think it would be ridiculous to post them all so I was hoping someone could help me fix this code or at least point me in the right direction. I'm usually able to figure everything out on my own but I'm failing atm and I just need help on this one thing, I would be ever so thankful for any assistance provided, ! (BTW I'm also currently using the Joomla CMS and a joomla plugin called CodeMirror that runs your code directly from the article, not sure if this is relevent or not) |
|||||||