|
JavaScript - Adding Javascript To A Link
I 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? Similar TutorialsHello i have a sticky tooltip that when is in "sticky mode" the only way to close it is by clicking outside of it. I wanted to add a mouseover link for a close link so it can also be closed that way. original code: http://www.dynamicdrive.com/dynamici...ckytooltip.htm this is my external .js code and if you look about 11 lines down i have the mouseover link setup for the word "CloseMe". However that's where i need to know how to call it properly? Quote: /* Sticky Tooltip script (v1.0) * Created: Nov 25th, 2009. This notice must stay intact for usage * Author: Dynamic Drive at http://www.dynamicdrive.com/ * Visit http://www.dynamicdrive.com/ for full source code */ var stickytooltip={ tooltipoffsets: [5, -5], //additional x and y offset from mouse cursor for tooltips fadeinspeed: 1, //duration of fade effect in milliseconds rightclickstick: true, //sticky tooltip when user right clicks over the triggering element (apart from pressing "s" key) ? stickybordercolors: ["black", "darkred"], //border color of tooltip depending on sticky state stickynotice1: ["To Sticky:", "Press Key \"c\"", "or Right click"], //customize tooltip status message stickynotice2: "Sticky Activated! <a onMouseOver=javascript:LOSTT.HELPP('mystickytooltip'); href=google.com>CloseMe</a>", //customize tooltip status message //***** NO NEED TO EDIT BEYOND HERE isdocked: false, positiontooltip:function($, $tooltip, e){ var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1] var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(), x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(stickytooltip.tooltipoffsets[0]*2) : x y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y $tooltip.css({left:x, top:y}) }, showbox:function($, $tooltip, e){ $tooltip.fadeIn(this.fadeinspeed) this.positiontooltip($, $tooltip, e) }, hidebox:function($, $tooltip){ if (!this.isdocked){ $tooltip.stop(false, true).hide() $tooltip.css({borderColor:'black'}).find('.stickystatus:eq(0)').css({background:this.stickybordercol ors[0]}).html(this.stickynotice1) } }, docktooltip:function($, $tooltip, e){ this.isdocked=true $tooltip.css({borderColor:'darkred'}).find('.stickystatus:eq(0)').css({background:this.stickyborderc olors[1]}).html(this.stickynotice2) }, init:function(targetselector, tipid){ jQuery(document).ready(function($){ var $targets=$(targetselector) var $tooltip=$('#'+tipid).appendTo(document.body) if ($targets.length==0) return var $alltips=$tooltip.find('div.atip') if (!stickytooltip.rightclickstick) stickytooltip.stickynotice1[1]='' stickytooltip.stickynotice1=stickytooltip.stickynotice1.join(' ') stickytooltip.hidebox($, $tooltip) $targets.bind('mouseenter', function(e){ $alltips.hide().filter('#'+$(this).attr('data-tooltip')).show() stickytooltip.showbox($, $tooltip, e) }) $targets.bind('mouseleave', function(e){ stickytooltip.hidebox($, $tooltip) }) $targets.bind('mousemove', function(e){ if (!stickytooltip.isdocked){ stickytooltip.positiontooltip($, $tooltip, e) } }) $tooltip.bind("mouseenter", function(){ stickytooltip.hidebox($, $tooltip) }) $tooltip.bind("click", function(e){ e.stopPropagation() }) $(this).bind("click", function(e){ if (e.button==0){ stickytooltip.isdocked=false stickytooltip.hidebox($, $tooltip) } }) $(this).bind("contextmenu", function(e){ if (stickytooltip.rightclickstick && $(e.target).parents().andSelf().filter(targetselector).length==1){ //if oncontextmenu over a target element stickytooltip.docktooltip($, $tooltip, e) return false } }) $(this).bind('keypress', function(e){ var keyunicode=e.charCode || e.keyCode if (keyunicode==99){ //if "c" key was pressed stickytooltip.docktooltip($, $tooltip, e) } }) }) //end dom ready } } //stickytooltip.init("targetElementSelector", "tooltipcontainer") stickytooltip.init("*[data-tooltip]", "mystickytooltip") below is my html code Quote: <a href="http://www.link2.com"><img src="http://www.dynamicdrive.com/ddincludes/logo.gif" data-tooltip="id1" /></img></a> <div id="mystickytooltip" class="stickytooltip"> <div style="padding:5px"> <div class="stickystatus"></div> <div id="id1" class="atip" style="width:200px"> <iframe src="http://www.link.com"></iframe></div> </div></div> Does anyone know how to make URL links that use Javascript still work when users have Javascript disabled on their browser? The only reason I'm using JS on a URL is because my link opens a PDF file, and I'm forcing it not to cache so users have the latest version. I tried the <script><noscript> tags, but I'm not sure if I'm using it correctly, as my URL completely disappears. Below is my HTML/Javascript code: <p class="download"> <script type="text/javascript">document.write("<span style=\"text-decoration: underline;\"><a href=\"javascript:void(0);\" onclick=\"window.open( 'http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf?nocache='+ Math.floor( Math.random()*11 ) );\" >The Child Magazines Media Kit</a></span> (PDF 1 MB) ");</script> <noscript><span style="text-decoration: underline;"><a href="http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf" >The Child Magazines Media Kit</a></span> (PDF 1 MB)</noscript> </p> Thanks for any help, Michael 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! 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?
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 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 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> 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;
};
};
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 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 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();
}
}
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! 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";
}
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()
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 |
|||||||