JavaScript - Jquery Change Function

I am attempting the use EasySlider to create a portfolio.
Which you can view here.

The EasySlider is embedded within an accordion, under the Portfolio tab. I have the first slider functioning properly, which you see by clicking on the Burts Bees tab. However, when you on to the MillionTrees and other tabs the EasySlider does not work.

I know that the other tabs are being affected by the function because when you move the images under Burts Bees to a new image and switch back to Million Trees the beginning image changes. I have a feeling I am somehow using the buttons wrong, but I am not sure because I am very new to using JavaScript and jQuery. Any help would be greatly appreciated, thanks.

Hi i have a code like this in my web site to slide a panel from left to right:
<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {


$("#panel-tab").click(function(e) {
//if(autoTimer) clearTimeout(autoTimer);
//autoTimer = null;

e.preventDefault();
$("#panel").animate({ left: sipPos }, 1764, 'linear', function() {
if(sipPos == 0) { sipPos = -856; }
else { sipPos = 0; }

});
});
});
-->
</script>

---CSS---

#panel {
width: 864px;
height: 369px;
position: absolute;
top: 195px;
left: -856px;/*-856*/
z-index: 200;
background:url('../images/bg_panel.png') no-repeat;
padding:20px 0 0 18px;
text-align:left;
}
#panel-tab {
width: 21px;
height: 371px;
position: absolute;
top: 9px;
left: 856px;
background:url(../images/panel-arrw-show.png) no-repeat;
text-decoration: none;
color: #FFFFFF;
text-indent:-999999px;
}

What i want to do is use the animate function in jquery...like this $("#panel").animate({ left: 0 }) but not sure how to use that and on page load make the panel opens and stays open..

Any help

Sam

So, basically what i'm doing here is hovering over the h2 heading and toggling the paragraph text. What i'm having a problem doing is changing the h3 headings so that they toggle the same way...is there a way to do this within this function without ids/classes?

Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">	

	$(document).ready(function() {	

	$('#hdg').hover(function() {	
	
	$('div[title=latin]').toggle();
	$('div[title=english]').toggle();

	$('#').html('<h3>English</h3>');
		});
		});
</script>

Hey All - I asked this a few days ago.. what I came up with works just fine, but I feel it doesn't take advantage of "classes". If you think I could make this better by turning it into a class or using some other notation, that would be great.

Keep in mind, ALL this does is rewrite a pagination.... for a search return in a lightbox. I have this function called in the return function...




Code:

var srcpagParams = $H();
function buildPagi(param, currdsplyNum){
       var temDsply = new Template('<strong>[#{total_display}<span id="count">#{prevImg} #{links} #{nextImg}</span>'),
           crnt_link = srcpagParams.set('crnt_link', param), // the page we want to see
           dsplyNum = srcpagParams.get('paginateNum'), // what is the number of returns per page
           ttl_lnks  = Math.ceil( srcpagParams.get('numFound') / srcpagParams.get('paginateNum')), // total pages
           data_template = new Hash();
           data_template.set('total_display',srcpagParams.get('numFound'));

        bldImg = function() {
              var prvB = '<a href="#content" id="pagiPrev" onclick="firesrc(this)">Prev<img src="blank.gif" /></a>';
              var nxtB = '<a href="#content" id="pagiNext" onclick="firesrc(this)">Next<img src="blank.gif" /></a>';
              data_template.set('prvImg',(crnt_link > 1) ? prvB : "");
              data_template.set('nxtImg',(crnt_link < ttl_lnks) ? nxtB  : "");
       }
        bldLk =  function(){
           var holder = "";
           if(ttl_lnks > 1){
             var linkStr = new Template('&nbsp;&nbsp;<a href="#content" onclick="firesrc(#{pos});"> Go to page #{pos}</a>&nbsp;&nbsp;');
               $R(1,ttl_lnks).each(function(n) {
                  var posit = {pos : n}
                  holder += (crnt_link == n) ? "&nbsp;&nbsp;" + n + "&nbsp;&nbsp;" : linkStr.evaluate(posit);
               });
                  data_template.set('links',linkholder);
           }
        }
        bldRng =  function(){
            var currPaneRg = (dsplyNum * crnt_link) - (dsplyNum - currdsplyNum);
            data_template.set('range',((crnt_link - 1) * (dsplyNum) + 1 ) + " - " + currPaneRg);
             $('pages').update(temDsply.evaluate(data_template)).show();
        }
       firesrc = function(cl){
           var pagiPane = (typeof cl === "number") ? cl : (cl.id == "pagiNext") ? crnt_link + 1 : crnt_link - 1;
           var start = crnt_link * srcpagParams.get('paginateNum');
           Alertsrc( $F('query') ,(pagiPane)) // pass the query to the json to return the current search request
       }
           bldImg();
           buildLnk();
           bldRng();
};


Since some of the data declared at the top changes depending on the return, I didn't know if I could "initialize" it in a class.

But could I turn this into a class and if so - what I just use:

var buildPagi = create.Class({ 
       initialize: object.extend({

        })

})

Call the function when we are passed some data:
Code:

buildPagi(somevalue, somevalue2)

** NOTE: I use the libraries prototype and jquery.. so use Create.Class and new Template are within the libraries... etc..

so, is there a more eloquent, or robust way to write what I did above?

Hi everyone
I need some help creating a function which does the same thing for the chosen elements.

I have #design1 #design1servicetext and #design1servicebutton.

Code:

//Service hover//
$('#design1').mouseenter(function (){
	$('#design1servicetext').css('background-position', '0 -91px')  
	$('#design1servicebutton').css('background-position', '0 -33px')
	})
			   .mouseleave(function (){
	$('#design1servicetext').css('background-position', '0 0px')
	$('#design1servicebutton').css('background-position', '0 0px')});
//Service hover end//

How can I create a function, in which I have to choose 3 divs to do the animation?

A function like
Code:

animatebg('#design1','#design1servicetext','#design1servicebutton');

Can someone please help me? I've tried so many function tutorials but none of them worked for what I wanted to do. Thank you a lot in advance!

Hi, I've been playing around trying to recreate the way in which jQuery chains it's functions for it's "select" then "do" behaviour.

Note: I don't want to chain functions with jQuery, I want to chain them like jQuery.

So based on the jQuery code what I have so far is (doesn't work in IE):

Code:

var x = function(string) {
    return new x.fn.init(string);
};

x.fn = x.prototype = {

    message: '',

    init: function(string) {
        x.fn.message = string;
    },

    log: function() {
       console.log(x.fn.message);    
    }
};

x.fn.init.prototype = x.fn;

var start = function() {    
    x('hello world').log();
};

document.addEventListener('DOMContentLoaded', start, false);

The code works but when I watch '$' in jQuery "fn" & "prototype" show up as being "jQuery()" but in my code when I watch "x": "fn" and "prototype" are both shown as objects containing "message", "init" and "log" and in both cases "init" contains "prototype" which contains my three functions again and the nesting continues seemingly infinitely...

I'm clearly missing something here. What are they doing in differently in jQuery to prevent this endless nesting loop?

I have a slideshow that allows the user to see the previous slide title and the next slide title along with the current slide and its content. I tested locally not in WP and the code worked fine. Once I placed my source within WP everything went south. I inspector the first line in the script seems to be what is having the issues - $(window).load(function(){ and I am unsure what to do next.

The source was used from Edit fiddle - JSFiddle

the page I am trying to get to work is located here - Sevices | Q&D CONSTRUCTION, INC.Q&D CONSTRUCTION, INC.

I am open to any suggestions.

Code:

 <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130801/jquery.cycle2.min.js"></script>
    
  
  <style type='text/css'>
    .cycle-slide {
    width: 100%;
    text-align: center;
}
img {
    max-width: 300px;
}

#next {
    float: right;
}
#prev {
    float: left;
}
.center {
    text-align: center;
}
  </style>
  


<script type="text/javascript">//<![CDATA[ 
 $(window).load(function(){ 
var slideshow = $('.cycle-slideshow');
    maxSlides = slideshow.data('cycle.opts').slideCount;

slideshow.on({
    'cycle-update-view': function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
        UpdateTitles();
    }
});

function UpdateTitles(){
    var currentSlide = slideshow.data('cycle.opts').currSlide;
    activeSlide = $(".cycle-slide-active");
    activeTitle = activeSlide.data('title');
    
    if(currentSlide == 0){
        nextTitle = activeSlide.next().data('title');
        prevTitle = $(".cycle-slide").eq(maxSlides).data('title');
    }
    else if(currentSlide == maxSlides-1){
        prevTitle = activeSlide.prev().data('title');
        nextTitle = $(".cycle-slide").eq(0).data('title');
    }
    else {
        nextTitle = activeSlide.next().data('title');
        prevTitle = activeSlide.prev().data('title');
    }
    
    $('h1').html(activeTitle);
    $('#prev').html("Previous: "+prevTitle);
    $('#next').html("Next: "+nextTitle);
}

UpdateTitles();
});//]]>  

</script>

The below script keeps a running total dollar tab. It uses the "name" of the elements but I would like it to use the "ID" instead. Can somebody pretty please adjust the function to look at the id. I've changed the first 2 form elements to id.
Tracy

Code:

<script language="JavaScript" type="text/javascript">
<!--

function CalculateTotal(frm) {
    var order_total = 0

    // Run through all the form fields
    for (var i=0; i < frm.elements.length; ++i) {

        // Get the current field
        form_field = frm.elements[i]

        // Get the field's name
        form_name = form_field.name

        // Is it a "product" field?
        if (form_name.substring(0,4) == "PROD") {

            // If so, extract the price from the name
            item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1))

            // Get the quantity
            item_quantity = parseInt(form_field.value)

            // Update the order total
            if (item_quantity >= 0) {
                order_total += item_quantity * item_price
            }
        }
    }

    // Display the total rounded to two decimal places
    frm.TOTAL.value = round_decimals(order_total, 2)
}

function round_decimals(original_number, decimals) {
    var result1 = original_number * Math.pow(10, decimals)
    var result2 = Math.round(result1)
    var result3 = result2 / Math.pow(10, decimals)
    return pad_with_zeros(result3, decimals)
}

function pad_with_zeros(rounded_value, decimal_places) {

    // Convert the number to a string
    var value_string = rounded_value.toString()
    
    // Locate the decimal point
    var decimal_location = value_string.indexOf(".")

    // Is there a decimal point?
    if (decimal_location == -1) {
        
        // If no, then all decimal places will be padded with 0s
        decimal_part_length = 0
        
        // If decimal_places is greater than zero, tack on a decimal point
        value_string += decimal_places > 0 ? "." : ""
    }
    else {

        // If yes, then only the extra decimal places will be padded with 0s
        decimal_part_length = value_string.length - decimal_location - 1
    }
    
    // Calculate the number of decimal places that need to be padded with 0s
    var pad_total = decimal_places - decimal_part_length
    
    if (pad_total > 0) {
        
        // Pad the string with 0s
        for (var counter = 1; counter <= pad_total; counter++) 
            value_string += "0"
        }
    return value_string
}


//-->
</script>


<FORM>



<TABLE BORDER =3>



<TR><TD ALIGN="CENTER"><B>Please <BR>
enter <BR>
quantity:</FONT></TD>
<TD ALIGN="CENTER"><B>Description</TD><TD ALIGN="CENTER"><B>Price<BR>
(each)</B></TD></TR>
<TR>
<TD ALIGN="CENTER"><INPUT TYPE=TEXT ID="PROD_SP_4.99" SIZE=3 MAXLENGTH=3 onkeyup="CalculateTotal(this.form)"></TD><TD>Spelt Bread 24 oz</TD><TD ALIGN="RIGHT">$4.99</TD>
</TR>
<TR><TD ALIGN="CENTER"><INPUT TYPE=TEXT ID="PROD_SPMG_4.99" SIZE=3 MAXLENGTH=3 onkeyup="CalculateTotal(this.form)"></TD><TD>Spelt Multi-Grain Bread* 24 oz</TD><TD ALIGN="RIGHT">$4.99</TD>
</TR>
<TR><TD ALIGN="CENTER"><INPUT TYPE=TEXT NAME="PROD_SPCR_4.99" SIZE=3 MAXLENGTH=3 onkeyup="CalculateTotal(this.form)"></TD><TD>Spelt Cinnamon-Raisin Bread 24 oz</TD><TD ALIGN="RIGHT">$4.99</TD>
</TR>
<TR><TD ALIGN="CENTER"><INPUT TYPE=TEXT NAME="PROD_SW_3.99" SIZE=3 MAXLENGTH=3 onkeyup="CalculateTotal(this.form)"></TD><TD>Spelt White Bread* 18 oz</TD><TD ALIGN="RIGHT">$3.99</TD>
</TR>
<TD>TOTAL</TD>
<TD ALIGN="RIGHT"><INPUT TYPE=TEXT NAME=TOTAL SIZE=10 onFocus="this.form.elements[0].focus()"></TD>

</TABLE>
<P>

</FORM>

I got 3 sections on the site, at the bottom of each are 5 bars which are used to change the text color. I'm trying to minimize the code, so I created an array which contains all the colors, but I'm not sure where to put the call to the array. If I put it in the for loop, the selected color will always be green no matter which color you click. The bars should also go up to 40px when clicked and when the next bar is clicked the current bar at 40px should go back to it's originals size(20px) Any ideas?

this is the JS
Code:

var colors = new Array(4);
colors[0] = "#ed1c24";
colors[1] = "#736257";
colors[2] = "#620460";
colors[3] = "#e87e01";
colors[4] = "#00a650";

function changeColor(numerSekcji, numerKoloru)
{    

    document.getElementById('section' + numerSekcji + 'Color' + numerKoloru).style.paddingTop = 20 + "px";
    document.getElementById('section' + numerSekcji + 'Color' + numerKoloru).style.marginTop = 0 + "px";
    
    
    for (i = numerKoloru; i <= 4; i++) {
    document.getElementById('section' + numerSekcji + 'Color' + numerKoloru).style.padding =  0 + "px";
    document.getElementById('section' + numerSekcji + 'Color' + numerKoloru).style.marginTop =  20 + "px";
    document.getElementById('section' + numerSekcji + 'Text').style.color = colors[i];
    }
    
    
}
}

this is the html for the color boxes
Code:

<a class="color1" id="section1Color1" href="javascript:changeColor(1, 1)"> &nbsp; </a>
                                <a class="color2" id="section1Color2" href="javascript:changeColor(1, 2)"> &nbsp; </a>
                                <a class="color3" id="section1Color3" href="javascript:changeColor(1, 3)"> &nbsp; </a>
                                <a class="color4" id="section1Color4" href="javascript:changeColor(1, 4)"> &nbsp; </a>
                                <a class="color5" id="section1Color5" href="javascript:changeColor(1, 5)"> &nbsp; </a>

edit: edited the js...

edit2: all the colors are going through the loop, the 1st one is missed :S changing the html to start with ...changeColor(1, 0) does not help. Clicking on the 1st bar doesn't run the loop.

I have the one javascripts button code and the functions is on "text area" .. but how do I change the function of this button to go to google.com website ..? how to make it..

the javascripts button code :

Code:

<input type="image" src="tesdt-copy-1.gif"
   onmouseover="this.src='file:///C:/Documents%20and%20Settings/Administrator/Desktop/test/main%20test%20scripts/test2-copy-2.gif';"
   onmouseout="this.src='file:///C:/Documents%20and%20Settings/Administrator/Desktop/test/main%20test%20scripts/test2-copy-1.gif';"
   onclick="CB(document.getElementById('output').value); return false;" 
</form name="I5" width="38" height="38">

Hello

I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page:
http://www.watphotos.com/introductio...otography.html

And here is the code in question:

Code:

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript" charset="utf-8"> 
 $(document).ready(function(){
	var initial	= 0
	var total = 0;
	var services = 0;
	function addServices()
	{
		initial = 150
		total = initial
		services = 0;
		$("input:checked").each(function(){
			value = $(this).attr("value");		
			services += parseInt(value);
		});
	}
	$(function()
	{
		addServices();
		total += services;
		$("form").before('<p class="price"></p>')		
		$("p.price").text("Total Price: US$" + total);
	});
 	$("input:radio, input:checkbox").click(function () {
		addServices();
		total += services
		$("p.price").text("Total Price: US$" + total);
    });
 
 });
 
</script>

I have two questions...

Question 1
How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky.
I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this?

Question 2
The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document?

Thanks in advance!

Would this work? or do I got the wrong function commands?

How would I alter this to make it work, been staring at the screen for 8 hours.....









var myInDesign = app
var myDocument = app.activeDocument
var myDocName = myDocument.name



app.findParagraphStyle.caseSensitive = false;
app.findParagraphStyle.wholeWord = false;
app.findCharacterStyle.wholeWord = false;
app.findCharacterStyle.caseSensitive = false;



app.findParagraphStyle.findWhat = "SN.outabout.DAY-Gray";
app.changeParagraphStyle.changeTo = "SN.Holiday-Day_of_the_week";
app.documents.item(0).changeParagraphStyle();




app.findParagraphStyle.findWhat = "SN.outabout.DATE";
app.changeParagraphStyle.changeTo = "SN.Holiday-Month_and_Day";
app.documents.item(0).changeParagraphStyle();




app.findParagraphStyle.findWhat = "SN.listingsLT";
app.changeParagraphStyle.changeTo = "SN.Holiday-Paragraph";
app.documents.item(0).changeParagraphStyle();




app.findCharacterStyle.findWhat = "SN.listingsBOLD";
app.changeCharacterStyle.changeTo = "SN.Holiday-Title_Paragraph";
app.documents.item(0).changeCharacterStyle();



//myInCopy = CreateObject("InCopy.Application.CS3") //Not sure if this would work, just crafting idea's.
//var myDocument = myInCopy.ActiveDocument
//var mySelection = myInCopy.Selection.Item(1)
//var myStory = MySelection.ParentStory
//var myText = myStory.Paragraphs.Item(1)
//myStory.CheckOut
//myText.ApplyParagraphStyle myDocument.ParagraphStyles.Item("zAPPROVED"), True
//myStory.CheckIn





Can I just do this with like a Nested If, then Statement?

Hello im trying to make a drop down for my store, so that onchange the price of the option is displayed and my paypal buttons variables are changed.
I cant get the "total" function to call when the selection of the drop down is changed.
please help iv'e been looking around for a week and still havent fixed it.

My event handler sets on load
<body onload="x.onchange=function(){total();}">
heres my script

Code:

<script type="text-JavaScript">
"use strict";
/*document.getelementbyid("ddm").onchange = total;*/
var price;
var title;
var x = document.getelementbyid("ddm");
var size_prices= new Array();
size_prices["cards"]=18;
size_prices["5x7sm"]=20;
size_prices["5x7dm"]=25;
size_prices["8x10sm"]=30;
size_prices["8x10dm"]=35;
size_prices["16x20sm"]=45;
size_prices["16x20dm"]=50;

function total() {
y = size_prices[x.value];
document.getelementbyid("total").innerhtml = "$" + y + ".00";
title = "image title" + (x.value);
document.getelementbyid("title").setAttribute("value", title);
document.getelementbyid("price").setAttribute("value", y);
}
function verify() {
}
</script>

here is the code for the select and the paypal button
Code:

<form action="">
<select name="sizes" id="ddm">
<option value="_">Please chose a size</option>
<option value="cards">cards</option>
<option value="5x7sm">5x7 single mat</option>
<option value="5x7dm">5x7 double mat</option>
</select>
</form>

Code:

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="verify()">

 <input type="hidden" name="business" value="kin@kinskards.tcom" /> 
 <input type="hidden" name="cmd" value="_cart" /> 
 <input type="hidden" name="add" value="1" />
 <input type="hidden" id="title" name="item_name" value="Candle" /> 
 <input type="hidden" id="price" name="amount" value="3.95" />
 <input type="hidden" name="currency_code" value="USD" />
 
 <input type="image" name="submit" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" alt="paypal" />
 <img alt="" border="0" width="1" height="1"
src="https://www.paypal.com/en_US/i/scr/pixel.gif" /> 
 
</form>

I have some javascript code that hides and unhides a menu when a link is clicked, and that is working just fine. What I also need the function to do is switch the CSS class of change_this in the code below to change_that when the link is clicked, and then switch it back to change_this when the link is clicked again. Can someone assist me? I have tried integrating/modifying other scripts I found with this one, but nothing has worked for me. It seems so simple, but I just cant get this thing working. Thanks to anyone who replies with help!

Code:

<script type="text/javascript">
function HideandUNhideObj(ThisObj){
nav=document.getElementById(ThisObj).style
if(nav.display=="none"){
nav.display='block';
}else{
nav.display='none';
}
}
</script>

Code:

<li class="change_this"><a id="nav" href="javascript: void();" onclick="HideandUNhideObj('display');"></a>
              <ul id="display" style="display: none;">
                <div id="container_div">stuff</div>