|
JavaScript - Can't Get Margin-left Property Value
When I click on the image I want to get the "margin-left" value of its block.
In the code below the margin-left is set at 100px. But when I click on the image the "margin-left" value shows in the "alert" as undefined. What code changes do I need to get the correct margin-left value? (Please, no guessing!) [CODE] <script type="text/javascript" > window.onload = function(){ document.getElementById("holder").onclick = showit; } function showit( ) { var marval = document.getElementById("holder").style.marginLeft; alert(" margin-left= " + marval + " typeof= " + typeof marval); } </script> <style type="text/css"> #holder{ padding: 0px; margin-left: 100px; } </style> </head> <body> <img id="holder" src="anyimage.gif" width="300px" height="200px" /> </body> [CODE] Similar TutorialsI need to set a divs margin-left value into a var, ive tried a few different ways and i always get undefined, anyone able to help me? Ideally id like it without the px too but thats not essential.
Any help would be awesome and much appreciated! I'm trying to change an id by referencing the previous site the user was on. In this case the user will be coming from either facebook or linkedin. I'm not sure if i'm calling the referrer property correctly. Again, any help is greatly appreciated! <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script language="JavaScript"> if(document.referrer.toLowerCase().indexOf("facebook") != -1) { document.getElementById("phone").innerHTML = "555.555.5555"; } else if (document.referrer.toLowerCase().indexOf("linkedin") != -1) { document.getElementById("phone").innerHTML = "222.222.2222"; } else { //Default code } </script> </head> <body> <p id="phone">123.456.7890</p> </body> I am and seem to remain newbie ... I have a JS script that presents a series of "pages" with different questions inside a single HTML file, by rewriting certain <div>s. I have an object like this that contains the questions and information about answer labels etc (the idea is that this should be easy to modify for someone who doesn't know JS): Code: var Questions = [
{
"question" : "How good is this?",
"labels" : ["excellent","very good","good","bad","very bad","awful"],
"page" : 0 ,
"random" : false ,
"type" : "default",
"varname" : "allgood"
},
{
"question" : Change[curCase]+"What do you think now?",
"labels" : BetterLabels,
"page" : 1 ,
"random" : true ,
"type" : "default",
"varname" : "betteradapt"
}
]
This object is initialized when the page loads, and a function reads the total number of pages by getting the maximum number of the "page" property across elements. Later, the object is accessed by thenextQuestion() function which uses the "page" property to looks whether each element belongs on the current page , then reads out the properties and presents the question. This works okay. Now the tricky bit: For some questions, their text should be different depending on which case is currently on the screen (Change[curCase]). curCase is different on each page, an integer between 0 and Change.length. I cannot get this to work for the Questions object, probably because the Questions object has been already initialized when the page loaded. How can I get my function nextQuestion() to "re-evaluate" the property "question" for all the elements of the Questions objectwhen nextQuestion() is called , using the current value of "curCase"? nextQuestion() is longer, but the (i think!) crucial bits are he Look whether question belongs on current page and push it onto new array: Code: for (i=0; i < Questions.length; i++) {
Questions[i].page = Questions[i].page;
if ( Questions[i].page == BlockNum ) { // if the q belongs on the current page
QuestionsObjectThisPage.push(Questions[i]);
}
}
Then, extract an array containing the questions, which will then be presented: Code: for (i=0; i < QuestionsObjectThisPage.length; i++) {
QuestionsThisPage.push(QuestionsObjectThisPage[i].question) ;
}
So what I'm looking for is something to change either of these two Object.push() functions so they don't simply take the value they find in the Questions (or QuestionsThisPage) object, but to re-evaluate the code for the "questions" property, taking into account the current value of curCase Phew. I found that really hard to describe; hope it's somewhat clear. I have this simple manual photo slide show. It shows four photos and when you click the next button and it moves one photo over and one photo back for the previous button. I have to moving by changing the CSS property of 'left' by 195 pixels each move. So for it to move next it will subtract 195 pixels from the left property and for moving back it add 195 pixels to the left property. I have the code setup so when you click it changes the property of left to either -195 or 195 pixels but I need it so it actually does the math, not just give it a set value. But I don't know how to do that. Code: function MM_changeProp(objId,x,theProp,theValue) { //v9.0
var obj = null; with (document){ if (getElementById)
obj = getElementById(objId); }
if (obj){
if (theValue == true || theValue == false)
eval("obj.style."+theProp+"="+theValue);
else eval("obj.style."+theProp+"='"+theValue+"'");
}
}
function nextPhoto() {
MM_changeProp('fanThumbWrapOne','','left','-195px','DIV')
}
function prevPhoto() {
MM_changeProp('fanThumbWrapOne','','left','195px','DIV')
}
so where you see -195px and 195px in the functions for nextPhoto and prevPhoto I need those to actually be functions where it subtracts 195px or adds 195px. 1. When creating a new element using the create method, do the zIndex values of all elements that follow it change? If so how do I get the zIndex of all divs with a specific classname within a specified container? I'm working with dynamic drive's 'dhtmlwindow' object class file and have made revisions to it...however this is my first time working with this type of file and while some things are easy to change the zIndex change of the setfocus function does not look like any of my previous scripts. For some reason I run my script and its saying missing } after property list. But I'm not seeing it. Code: <script type="text/javascript">
$(document).ready(function() {
$('div.message-error').hide();
$('div.message-success').hide();
$('ul#characterList').css( 'margin-left', '120px' );
$('li').remove('.characterName');
$("#handlerForm").validate({
rules: {
firstName: "required",
lastName: "required",
userName: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
password2: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
messages: {
firstName: "Please enter your firstname",
lastName: "Please enter your lastname",
userName: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
password2: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address"
}
});
$("input.submit").click(function() {
var userID = $("input#userID").val();
var defaultChar = $("select#charactersDrop option:selected").text();
var userName = $("input#userName").val();
var firstName = $("input#firstName").val();
var lastName = $("input#lastName").val();
var email = $("input#email").val();
var statusID = $("select#statusID").val();
var isAdmin = $("select#isAdmin").val();
var liElements = $("ul#characterList li");
var characterIDList = "";
for( var i = 0; i < liElements.length; i++ ) {
var liElement = $( liElements[ i ] );
// only start appending commas in after the first characterID
if( i > 0 ) {
characterIDList += ",";
}
// append the current li element's characterID to the list
characterIDList += liElement.data( 'characterID' );
}
var dataString = 'userID=' + userID + 'userName=' + userName + '&password=' + password + '&firstName=' + firstName + '&lastName=' + lastName + '&email=' + email + '&statusID=' + statusID + '&isAdmin=' + isAdmin + '&characterIDList=' + characterIDList + '&submitHandler=True';
$.ajax({
type: "POST",
url: "processes/handler.php",
data: dataString,
success: function(myNewVar) {
if (myNewVar == 'good') {
$('div.message-error').hide();
$("div.message-success").html("<h6>Operation successful</h6><p>" + userName + " saved successfully.</p>");
$("div.message-success").show().delay(10000).hide("slow");
$(':input','#handlerForm')
.not(':submit, :button, :hidden')
.val('')
$('ul#characterList li').each(function() {
$(this).remove();
});
} else if (myNewVar == 'bad1') {
$('div.message-success').hide();
$("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + userName + " already exists in the database.</p>");
$("div.message-error").show();
} else if (myNewVar == 'bad2') {
$('div.message-success').hide();
$("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + email + " already exists in the database.</p>");
$("div.message-error").show();
} else if (myNewVar == 'bad3') {
$('div.message-success').hide();
$("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + userName + " and " + email + " already exists in the database.</p>");
$("div.message-error").show();
} else if (myNewVar == 'bad1bad2') {
$('div.message-success').hide();
$("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + userName + " and " + email + " already exists in the database.</p>");
$("div.message-error").show();
}
}
});
return false;
});
});
</script>
<!-- Form -->
<form action="#" id="handlerForm">
<fieldset>
<legend>Add New Handler</legend>
<div class="field required">
<label for="userName">User Name</label>
<input type="text" class="text" name="userName" id="userName" title="User Name"/>
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
<div class="field required">
<label for="password">Password</label>
<input type="password" class="text" name="password" id="password" title="Password" />
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
<div class="field required">
<label for="password2">Confirm Password</label>
<input type="password" class="text" name="password2" id="password2" title="Confirm Password" />
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
<div class="field required">
<label for="firstName">First Name</label>
<input type="text" class="text" name="firstName" id="firstName" title="First Name"/>
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
<div class="field required">
<label for="lastName">Last Name</label>
<input type="text" class="text" name="lastName" id="lastName" title="Last Name"/>
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
<div class="field required">
<label for="email">Email</label>
<input type="text" class="text" name="email" id="email" title="Email"/>
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
<div class="field required">
<label for="statusID">Status</label>
<select class="dropdown" name="statusID" id="statusID" title="Status">
<option value="0">- Select -</option>
<?php
$query = 'SELECT ID, statusName FROM statuses';
$result = mysqli_query ( $dbc, $query ); // Run The Query
while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
print "<option value=\"".$row['ID']."\">".$row['statusName']."</option>\r";
}
?>
</select>
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
<div class="field required">
<label for="isAdmin">Administrator</label>
<select class="dropdown" name="isAdmin" id="isAdmin" title="Administrator">
<option value="0">- Select -</option>
<?php
$administrator = array('Yes', 'No');
foreach($administrator as $admin):
?>
<option value="<?php echo $admin; ?>"><?php echo $admin; ?></option>
<?php endforeach; ?>
</select>
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
</fieldset>
<fieldset>
<legend>Handler's Characters</legend>
<div class="field">
<label for="charactersDrop">Characters</label>
<select class="dropdown" name="charactersDrop" id="charactersDrop" title="Characters Dropdown">
<option value="0">- Select -</option>
<?php
$query = 'SELECT ID, characterName FROM characters WHERE ID NOT IN (SELECT characterID FROM handlerCharacters) ORDER BY `characterName`';
$result = mysqli_query ( $dbc, $query ); // Run The Query
while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
print "<option value=\"".$row['ID']."\">".$row['characterName']."</option>\r";
}
?>
</select>
<input type="button" value="Add Character" class="" onclick="HandlerCharacters()"/>
<ul id="characterList"></ul>
</div>
<input type="hidden" name="userID" id="userID" value="<?php echo $userID; ?>" />
<input type="submit" class="submit" name="submitHandler" id="submitHandler" title="Submit Handler" value="Submit Handler" />
</fieldset>
</form>
<!-- /Form -->
<!-- Messages -->
<div class="message message-error">
<h6>Required field missing</h6>
<p>Please fill in all required fields. </p>
</div>
<div class="message message-success">
<h6>Operation succesful</h6>
<p>Handler was added to the database.</p>
</div>
<!-- /Messages -->
<script type="text/javascript" language="javascript">
// Long version
function HandlerCharacters() {
function isDupe(which) {
var result = false;
$('ul#characterList li').each(function(i, e) {
if ($(e).data('characterID') == which) {
result = true;
return false; // break out of .each()
}
});
return result;
}
var characterID = $('#charactersDrop option:selected').val();
var characterName = $('#charactersDrop option:selected').text();
if (characterID > 0 && !isDupe(characterID)) {
// Create the anchor element
var anchor = $( '<a href="#">Remove</a>' );
// Create a click handler for the anchor element
anchor.click( function() {
$( this ).parent().remove();
return false; // makes the href in the anchor tag ignored
} );
// Create the <li> element with its text, and then append the anchor inside it.
var li = $( '<li>' + characterName + ' </li>' ).append( anchor );
li.data( 'characterID', characterID );
// Append the new <li> element to the <ul> element
$( '#characterList' ).append( li );
}
}
</script>
Hello, I have the following object: Code:
var layers = {
photo1 : {
index : 1,
xPos : 63,
yPos : 48,
angle : 0
},
background : {
index : 0,
xPos : 278,
yPos : 163,
angle : 0
}
}
How can I sort the objects by the index property? Code: for(var layer in layers.sort(???))
{
}
Thx Very Much! I have a page: http://www.girlscoutsmoheartland.org...progsearch.php that works perfectly fine in every browser I try, except for actual IE7 (it even works fine in IE8 emulating IE7). When you search for something on that page and have a display of results, each result has a link that changes a table row's display to visible, and hides the row when clicked again. It doesn't do that in IE7. There are no errors or warning in Firefox's Error Console. But IE7 has an "Error on Page" notice (which does NOT appear in IE8 emulating IE7), that says: Line: 59 Char: 11 Error: Could not get the display property. Invalid argument. The script in question is this, with what would be line 59 indicated: Code: <script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
var f = document.getElementById(id + "b");
if(e.style.display == 'table-row')
e.style.display = 'none';
else
e.style.display = 'table-row'; <<-- This is line 59
if(f.style.display == 'table-row')
f.style.display = 'none';
else
f.style.display = 'table-row';
}
//-->
</script>
I really don't know what to do, or where to begin. Everything in my limited knowledge seems to be working just fine. Most of my site's visitors use IE8, but enough use actual IE7 that I really need to fix this. Thanks for any help or advice! Liam I am sorry the following code is a bit of a mouthful, but I can't find a better way to display the problem. The code works as expected in Chrome, but not in IE and FF. In IE the error is "Object doesn't support this action" and in FF "setting a property that has only a getter". In Chrome there is no error in the console. There are three javascript <script>...</script>s that exist to display a <td> row in a table with a particular graphic depending on the screen width. The odd thing is that in both IE and FF (and of course Chrome), the first two scripts display perfectly well. Why does the third <script> produce an error? It has exactly the same form as the two before it. I can only guess it has something to do with where it occurs Googling the FF error, it has something to do with trying to set a read-only property, but then why do the first two <scripts> work? They are no different (at least I can't see a difference.) Code: <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse" id="table3768">
<script>
if (screen.width > 1280) {
document.write("<td valign=\"top\" background=\"..\/..\/img\/lesson2.gif\" width=\"840\" height=\"301\">");
}
else {
document.write("<td valign=\"top\" background=\"..\/..\/img\/lesson.gif\" width=\"369\" height=\"301\">");
}
</script>
<p> </p>
<div align="left">
</table>
<table border="0" style="border-collapse: collapse" cellpadding="15">
<tr>
<td width="40"> </td>
<script>
if (screen.width > 1280) {
document.write("<td width=\"300\">");
}
else {
document.write("<td width=\"165\">");
}
</script>
<font face="Trebuchet MS" color="#808000">Today's lesson is about setting
goals...</font></td>
</tr>
</table>
</div>
</td>
<td rowspan="3">
<table border="0" cellspacing="0" style="border-collapse: collapse" cellpadding="0" id="table3920">
<tr>
<td><img border="0" src="../../img/teltopw.jpg" width="550" height="9"></td>
</tr>
<tr>
<td background="../../img/telbarw.jpg">
<p align="center">
<iframe name="ITV" src="lesson1TV.html" marginwidth="0" marginheight="0" scrolling="no" border="0" frameborder="0" width="480" height="376">
Your browser does not support inline frames or is currently configured
not to display inline frames.
</iframe></p>
</td>
</tr>
<tr>
<td><img border="0" src="../../img/telbotw.jpg" width="550" height="11"></td>
</tr>
</table>
</td>
<td align="center">
<a rel="nofollow" target="_blank" href="http://www.apple.com/quicktime/download/">
<img border="0" src="../../img/quicktimeani.gif" width="129" height="184"></a></td>
</tr>
<tr>
<script>
if ((screen.width = 1440) || (screen.width = 1400)) {
document.writeln("<td valign=\"top\" width=\"100%\" background=\"\/images\/101online\/listening\/lesson16\/notebot2.gif\" width=\"450\" height=\"50\">");
}
else if (screen.width <= 1280) {
document.writeln("<td valign=\"top\" width=\"100%\" background=\"\/images\/101online\/listening\/lesson16\/notebot.gif\" width=\"294\" height=\"50\">");;
}
</script>
</td>
<td valign="bottom"> </td>
</tr>
<tr>
<td valign="bottom" width="100%">
<div align="right">
<table border="0" cellpadding="5" style="border-collapse: collapse" id="table3926">
<tr>
<td align="center">
<a onmousedown="soundManager.play('piano','../../media/mp3/piano.mp3'); return true;" href="javascript: goFull('FULLSCREEN/lesson1full.html','info','width=1020,height=760,left=0,top=0,toolbar=no,scrollbars=no,status=no,directories=no,menubar=no,location=no,resizable=no');">
<img src="../../img/poster1ani.gif" border="0" width="95" height="29"></a>
<b><font size="1" face="Arial" color="#000080"> ON DISK</font></b></td>
<td align="center"><b><font size="1" face="Arial" color="#000080">OR
</font></b> <a onmousedown="soundManager.play('piano','../../media/mp3/piano.mp3'); return true;" href="javascript: goFull('CDRIVE/lesson1Cfull.html','info','width=1020,height=760,left=0,top=0,toolbar=no,scrollbars=no,status=no,directories=no,menubar=no,location=no,resizable=no');"><img src="../../img/poster7.bmp" border="0" width="53" height="30"></a>
<b><font size="1" face="Arial" color="#000080"> DRIVE</font></b></td>
</tr>
</table>
</div>
</td>
<td valign="bottom">
<iframe name="sounds" src="../../pagesounds.html" width="160" height="66" marginwidth="1" marginheight="1" scrolling="no" border="0" frameborder="0">
Your browser does not support inline frames or is currently configured not to display
inline frames.
</iframe></td>
</tr>
</table>
Any light on this would be most welcome! Hi, This is my first post while learning Javascript and jQuery as total noob. I have something like this: Code: var desc = "This is your title and here is even more that might be added so that we can get at least 60 characters or so";
var desc = desc.trim().substring(0, 40).split(" ").slice(0, -1).join(" ") + "...more";
alert(shortText );
It is actually being used on a page that calls a description from a MySQL table, but this example fails in exactly the same manner. Although FF and other browsers successfully initiate the script with errors, but IE loops endlessly and freezes up. FireBug reports "reference to undefined property a[d]". Using jQuery 1.6.2. I'm not really sure what property is undefined here and how this can work without freezing IE. Thanks in advance for any help! AJ Hi I need to change the font color of the disabled textboxes of our application. These disabled textboxes exist at thousands of places both at pageload or disabled conditionally clientside. I am aware that in IE8 there is no other way to change the fontcolor except use readonly. So i thought that maybe if I changed the .disabled property to something like - Code: Object.disabled {
function set() {
this.readOnly = value;
}
function get() {
return this.readOnly;
}
}
then it would make my task much easier. I searched and found out that Object.defineProperty ,may do the trick. However i am getting the mull reference error. Is there any other way? I had read from books that the constructor property of object is inherited from its prototype. And the prototype can be changed dynamically. New property can be added to or deleted from object even it was created before the prototype change. But I got confused on below codes. Code: function A()
{
this.title = "A";
}
function B()
{
this.title = "B";
}
document.write("<br>");
var b = new B();
document.write(b.constructor);
document.write("<br>");
document.write(B.prototype.constructor);
document.write("<br>");
B.prototype = new A();
document.write(b.constructor); // Suppose to output "function A() ..."
document.write("<br>");
document.write(B.prototype.constructor);
document.write("<br>");
B.prototype.constructor = B;
document.write(b.constructor);
document.write("<br>");
document.write(B.prototype.constructor);
document.write("<br>");
But the actual result (both IE and firefox) is Code: function B() { this.title = "B"; }
function B() { this.title = "B"; }
function B() { this.title = "B"; }
function A() { this.title = "A"; }
function B() { this.title = "B"; }
function B() { this.title = "B"; }
Please help me. thanks. I've got this JavaScript code that is doing stuff to the content of <TR> rows.. but it's overselecting and I need to filter the <TR>s it selects in the bold line. var theRows = document.getElementsByTagName("TR"); var r = 0; var strTitle = ""; while (r < theRows.length) { try { strTitle = theRows[r].innerText || theRows[r].textContent; strTitle = strTitle.replace(/\n|\r|\t|\^ /g,""); if (strTitle.substring(0,1) == "(") { if (strTitle.indexOf("STAT") == -1) { theRows[r].style.display = "none"; ... continues Below is the rendered html. What I really want to do instead of if (strTitle.substring(0,1) == "(") Is only perform the operation when a row that is using class="ms- formlabel, or maybe has a FieldInternalName. I understand that strTitle is just pulling content, so how do I condition on other properties or strings within the <TR> row given my currently logic? Rendered HTML. <TR> <TD nowrap="true" valign="top" width="190px" class="ms-formlabel"><H3 class="ms-standardheader"> <nobr>1. Do you become short of breath or develop chest pain when climbing a flight of stairs?</nobr> </H3></TD> <TD valign="top" class="ms-formbody" width="400px"> <!-- FieldName="1. Do you become short of breath or develop chest pain when climbing a flight of stairs?" FieldInternalName="ShortofBreath" FieldType="SPFieldBoolean" --> <span dir="none"> Thanks for any help or information! I'm using ccs3PIE with my site. What I want to do is check if a DOM element has a css property like border-radius and then add a class to it. The problem I'm having is that I don't know how to check for the css property. I've been searching for it for a couple of hours now and I can't find anything that seems to work. Any ideas? Hello, how can I make the following object work properly so when I use 'layers.photo1.layer' a jQuery element is returned rather than the text of the function as it is now. I also need to be able to find the element by the photo1 object its contained in not have to input a string there so that I can also reuse it in the background layer. Code: var layers = {
photo1 : {
layer: function() { return $(element).find($('photo1'))}
},
background : {
layer: function() { return $(element).find($('background'))}
}
}
Thx Very Much! Hello, I'm hoping someone can help me with this. I have 3 pages that I need to put into my framework, they are products, shopping cart and billing. At the moment they work perfectly fine. Here is a live example - http://www.cems.uwe.ac.uk/~r4-george...g/products.php Now, I have a framework for a whole website that I need to put these pages into. (http://www.cems.uwe.ac.uk/~r4-george/wp4/index.php) The index uses a switch statement to go between pages. Here is the index.php PHP Code: <?php # index.php /* * This is the main page. * This page includes the configuration file, * the templates, and any content-specific modules. */ // Require the configuration file before any PHP code: require_once ('./modules/config.inc.php'); // Validate what page to show: if (isset($_GET['p'])) { $p = $_GET['p']; } elseif (isset($_POST['p'])) { // Forms $p = $_POST['p']; } else { $p = NULL; } // Determine what page to display: switch ($p) { case 'about': $page = 'about.inc.php'; $page_title = 'About This Site Again'; break; case 'products': $page = 'products.inc.php'; $page_title = 'Products on this site'; break; case 'this': $page = 'this.inc.php'; $page_title = 'This is Another Page.'; break; case 'that': $page = 'that.inc.php'; $page_title = 'That is Also a Page.'; break; case 'contact': $page = 'contact.inc.php'; $page_title = 'Contact Us'; break; case 'search': $page = 'search.inc.php'; $page_title = 'Search Results'; break; // Default is to include the main page. default: $page = 'main.inc.php'; $page_title = 'Site Home Page'; break; } // End of main switch. // Make sure the file exists: if (!file_exists('./modules/' . $page)) { $page = 'main.inc.php'; $page_title = 'Site Home Page'; } // Include the header file: include_once ('./includes/header.inc'); echo "<div id=\"content\">"; // Include the content-specific module: // $page is determined from the above switch. include ('./modules/' . $page); // Include the footer file to complete the template: include_once ('./includes/footer.inc'); ?> It uses the .inc.php files located in the modules folder to switch between pages. Here is my products.inc.php - PHP Code: <? include("includes/db.php"); include("includes/functions.php"); if($_REQUEST['command']=='add' && $_REQUEST['productid']>0){ $pid=$_REQUEST['productid']; addtocart($pid,1); header("location:shoppingcart.php"); exit(); } ?> <!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>Products</title> <script language="javascript"> function addtocart(pid){ document.form1.productid.value=pid; document.form1.command.value='add'; document.form1.submit(); } </script> </head> <body> <form name="form1"> <input type="hidden" name="productid" /> <input type="hidden" name="command" /> </form> <div align="center"> <h1 align="center">Products</h1> <table border="0" cellpadding="2px" width="600px"> <? $result=mysql_query("select * from products"); while($row=mysql_fetch_array($result)){ ?> <tr> <td><img src="<?=$row['picture']?>" /></td> <td> <b><?=$row['name']?></b><br /> <?=$row['description']?><br /> Price:<big style="color:green"> £<?=$row['price']?></big><br /><br /> <input type="button" value="Add to Cart" onclick="addtocart(<?=$row['serial']?>)" /> </td> </tr> <tr><td colspan="2"><hr size="1" /></td> <? } ?> </table> </div> </body> </html> This is EXACTLY the same code as the working example. The products get listed correctly but the problem I have is the 'Add to Cart' button fails to work. Live example - http://www.cems.uwe.ac.uk/~r4-george...php?p=products Everything is in the right directory. When I inspect the 'Add to Cart' button in chrome I get the following - Quote: Uncaught TypeError: Cannot set property 'value' of undefined addtocart index.php:51 (anonymous function)index.php:83 onclick Any help is really appreciated, I'm struggling to see what I have done wrong. I don't know whether it's a Javascript problem. If you need any of the code from other pages I can post it too. Thanks in advance. Javascript: Code: function hoverMenu(listItem, menuName)
{
if (document.getElementById(menuName).isActive == "1")
{
var listItemHeight = document.getElementById(listItem).offsetHeight;
var itemTop = document.getElementById(listItem).offsetTop;
var itemLeft = document.getElementById(listItem).offsetLeft;
document.getElementById(menuName).style.top = itemTop + listItemHeight + "px";
document.getElementById(menuName).style.left = itemLeft + "px";
document.getElementById(menuName).style.display = "block";
document.getElementById(menuName).style.opacity = "1.0";
document.getElementById(menuName).isActive = "0";
}
else
{
var listItemHeight = document.getElementById(listItem).offsetHeight;
var itemTop = document.getElementById(listItem).offsetTop;
var itemLeft = document.getElementById(listItem).offsetLeft;
document.getElementById(menuName).style.top = itemTop + listItemHeight + "px";
document.getElementById(menuName).style.left = itemLeft + "px";
document.getElementById(menuName).style.display = "block";
menuFade(menuName);
document.getElementById(menuName).isActive = "0";
}
}
function hoverMenuTier2(listItem, menuName)
{
if (document.getElementById(menuName).isActive == "1")
{
var itemTop = document.getElementById(listItem).offsetTop;
var itemLeft = document.getElementById(listItem).offsetLeft;
document.getElementById(menuName).style.top = itemTop + "px";
document.getElementById(menuName).style.left = itemLeft + "px";
document.getElementById(menuName).style.display = "block";
document.getElementById(menuName).style.opacity = "1.0";
document.getElementById(menuName).isActive = "0";
}
else
{
var itemTop = document.getElementById(listItem).offsetTop;
var itemLeft = document.getElementById(listItem).offsetLeft;
document.getElementById(menuName).style.top = itemTop + "px";
document.getElementById(menuName).style.left = itemLeft + "px";
document.getElementById(menuName).style.display = "block";
menuFade(menuName);
document.getElementById(menuName).isActive = "0";
}
}
function hideThis(menuName)
{
document.getElementById(menuName).style.display = "none";
document.getElementById(menuName).style.opacity = "0";
}
function showMenu(menuName)
{
document.getElementById(menuName).style.display = "block";
document.getElementById(menuName).style.opacity = "1.0";
document.getElementById(menuName).isActive = "1";
}
HTML: Code: <div id='db-sub' class='ddm-db' onmouseover="showMenu('db-sub');" onmouseout="hideThis('db-sub');">
<ul>
<a href='#'><li id='dba' class='sub'>1</li></a>
<a href='#'><li class='sub'>2</li></a>
<a href='#'><li class='sub'>3</li></a>
<a href='#'><li class='sub'>4</li></a>
<a href='#'><li class='sub'>5</li></a>
<a href='#'><li class='sub'>6</li></a>
<a href='#'><li class='sub'>7</li></a>
<a href='#'><li class='sub'>8</li></a>
<a href='#'><li id='dbq' onmouseover="hoverMenuTier2('dbq', 'dbq-sub');" onmouseout="hideThis('dbq-sub');" class='submenuArrow'>9</li></a>
<a href='#'><li class='sub'>10</li></a>
<a href='#'><li class='sub'>11</li></a>
<a href='#'><li class='sub'>12</li></a>
<a href='#'><li class='sub'>13</li></a>
</ul>
</div>
The remaining HTML for the the 'dqb-sub' element that is displayed follows an identical format to 'db-sub'. Mousing over the upper elements produces a drop-down menu that is aligned with the position of the top-most element in question. Mousing over the 'dbq' element produces the element 'dbq-sub' at the (0,0) position of the window, which is my issue. I believe it has to do with the fact that I'm setting the display property to 'none', which essentially destroys the element, along with its properties. What doesn't make sense is that while the 'db-sub' element is set to a block display type, it should have valid, non-zero offsets. I'd like the 'dbq-sub' element to position based on where the 'dbq' element is. Any ideas? Hey all, I have a script below, which I hope will generate query strings passed back to server using ajax depending on whether user selects an option from dropdown or enters content in a text field. Nevertheless, the issue I'm having at the moment is the firebug error: missing : after property id drop-filter: {\n It's telling me something is syntactically wrong with the drop-filter constructed in object notation below. But to me it looks correct: Code: <script>
(function($){
var listview = $('#listview');
var lists = (function(){
var criteria = {
drop-filter: {
insert: function(value){
if(value)
return handleFilter("filter", value);
},
msg: "Filtering..."
},
search-filter: {
insert: function(value){
if(value)
return handleFilter("search", value);
},
msg: "Searching..."
}
}
var handleFilter = function(key,value){
return {key: value};
}
return {
create: function(component){
var component = component.href.substring(component.href.lastIndexOf('#') + 1);
return component;
},
setDefaults: function(component){
var parameter = {};
switch(component){
case "sites":
parameter = {
'order': 'site_num',
'per_page': '20',
'url': '/sites'
}
}
return parameter;
},
getCriteria: function(criterion){
return criteria[criterion];
},
addCriteria: function(criterion, method){
criteria[criterion] = method;
}
}
})();
var Form = function(form){
var fields = [];
$(form[0].elements).each(function(){
var field = $(this);
if(typeof field.attr('alter-data') !== 'undefined') fields.push(new Field(field));
})
}
Form.prototype = {
initiate: function(){
for(field in this.fields){
this.fields[field].calculate(); // THIS DOESN"T MAKE SENSE WHY WE CALL CALCULATE HERE WHEN WE DIDN"T EVEN CALL ATTACH YET AND HENCE DONT KNOW WHAT TYPE OF EVENT TO RESPOND TO
}
},
isCalculable: function(){
for(field in this.fields){
if(!this.fields[field].alterData){
return false;
}
}
return true;
}
}
var Field = function(field){
this.field = field;
this.alterData = false;
this.attach("change");
this.attach("keyup");
}
Field.prototype = {
attach: function(event){
var obj = this;
if(event == "change"){
obj.field.bind("change", function(){
return obj.calculate();
})
}
if(event == "keyup"){
obj.field.bind("keyup", function(e){
return obj.calculate();
})
}
},
calculate: function(){
var obj = this,
field = obj.field,
msgClass = "msgClass",
msgList = $(document.createElement("ul")).addClass("msgClass"),
types = field.attr("alter-data").split(" "),
container = field.parent(),
messages = [];
field.next(".msgClass").remove();
for(var type in types){
var criterion = lists.getCriteria(types[type]);
if(field.val()){
var result = criterion.insert(field.val());
container.addClass("waitingMsg");
messages.push(criterion.msg);
obj.alterData = true;
initializeTable(result);
}
else {
return false;
obj.alterData = false;
}
}
if(messages.length){
for(msg in messages){
msgList.append("<li>" + messages[msg] + "</li");
}
}
else{
msgList.remove();
}
}
}
$('#dashboard a').click(function(){
var currentComponent = lists.create(this);
var defaults = lists.setDefaults(currentComponent);
initializeTable(defaults);
});
var initializeTable = function(custom){
var defaults = {}
var custom = custom || {};
var query_string = $.extend(defaults, custom);
var params = [];
$.each(query_string, function(key,value){
params += key + ': ' + value;
})
$.ajax({
type: 'GET',
url: '/' + url,
data: params,
dataType: 'html',
error: function(){},
beforeSend: function(){},
complete: function() {},
success: function(response) {
listview.html(response);
}
})
}
$.extend($.fn, {
calculation: function(){
var formReady = new Form($(this));
if(formReady.isCalculable) {
formReady.initiate();
}
})
var form = $(listview + ' fieldset');
form.calculation();
})(jQuery)
</script>
Thanks for response. Hello, I'm a complete noobie to JavaScript so my apologies in advance if I'm asking something totally stupid. I'm trying to get a website up and running using WordPress. A particular plug-in for WP makes the site I'm building mobile-phone etc friendly - and I have a question regarding some JS that is part of the plug-in. Before people think badly of me, the licensing terms of the plug-in allow users to modify the code, but the suppliers will not respond for requests for help in doing so. I'm therefore having to see whether I can figure out how to do this myself. If I've understood correctly, the extract of code below will show/hide a search box when the user clicks on the search button on the menu page. However, I would like the search box to always be visible when the user visits the menu page (but not on any other pages). With the extract provided, could anybody tell me please, how to change the code to keep the search box permanently visible? With many thanks in advance Darren PS I've only selected what I think are the important lines of code - hope I've included enough .... Code: var touchJS = jQuery.noConflict();
/* Toggling the search bar from within the menu */
touchJS( 'a#tab-search' ).unbind( 'click' ).click( function() {
touchJS( '#search-bar' ).toggleClass( 'show-search' );
touchJS( this ).toggleClass( 'search-toggle-open' );
if ( touchJS( '#search-bar' ).hasClass( 'show-search' ) ) {
touchJS( 'input#search-input' ).focus();
} else{
touchJS( 'input#search-input' ).blur();
}
return false;
});
|
|||||||