|
JavaScript - Javascript In Body Using Variable Defined In Header
Hi Guys,
I have a new problem My site is run on wordpress, but I'd like to customise the menu so that if the user is logged in the menu displays "Logged In" and if they are not it displays "Log In". Normally I would just use an if statement in PHP to output the required html, but as I can't use PHP code in the menu item I need to use Javascript. So, the way I figured this would work is: 1) PHP code in the header checks to see whether the user is logged in 2) This code then outputs JS to define a variable (varCheckLogin) 3) JS within the menu checks varCheckLogin and outputs the html i want This sounds good hopefully. Unfortunately this isn't working at the moment. The code I have is: HEADER: (I know this works as the variable is being output correctly in the source code) Code: <?php if (is_user_logged_in()) {
echo '<script type="text/javascript"> varLoginCheck = "Yes"; </script>';
} else {
echo '<script type="text/javascript"> varLoginCheck = "No"; </script>';
}
?>
MENU ITEM: Code: <script>
if (varLoginCheck = "No")
{
document.write('<span class="mmLogin">Log In</span>');
}
else
{
document.write('<span class="mmLogin">Logged In</span>');
}
</script>
I put an alert in the menu item and it always sees varLoginCheck as "Yes". Any ideas why this could be? All help is much appreciated. Thanks Sam Similar TutorialsHello I have a php page in which I declared a js variable... right at the top of the page... <script type="text/javascript"> var tester = 0; </script> Later in the page I test this variable... <script type="text/javascript"> if (tester==1){ do some stuff!! } </script> But I keep getting an error variable _tester undefined Am I missing something obvious... I am new to js... but this seems really straightforward Hi all, I am relatively new to java; hence I know the basics, but have been thrown into trouble because I am currently working with a cms system that doesnt keep within the correct name conventions (pre defined). Within a form, I simply want to set a date to todays date: <script type="text/javascript"> function initdt(mf) { var t = new Date; mf.01-date.value = t.getDate(); mf.02-month.value = t.getMonth() + 1; mf.03-year.value = t.getFullYear(); } onload="initdt(document.WBForm);" </script> This works perfect on a form I create, but sadly I must use a form within a pre defined system that uses "01-date" Is there a way around this? A simple way of setting 01-date to t.getDate(); Your help will be very much appreciated Regards Damon Simpson I'm having some issues with firefox, chrome seems to work ok. Firebug is giving me an error stating country is not defined. The line it's saying it's on is where the function for an ajax call to populate a select input on page load. Here's the script that sets up the functions to call and fill the state and city values: Code: <script src="/components/com_helloworld/js/request.js">
/****************************************************
* Ajax call to fill city values
****************************************************/
</script>
<script>
function handleOnChange(dd1)
{
var idx = dd1.selectedIndex;
var val = dd1[idx].text;
var par = document.forms["cbcheckedadminForm", "adminForm"];
var parelmts = par.elements;
var cb_statesel = parelmts["cb_state"];
var country = val;
var directory = ""+document.location;
directory = directory.substr(0, directory.lastIndexOf('/'));
Http.get({
url: "./components/com_helloworld/js/regvalues/states/" + country + ".php",
callback: fillcb_state,
cache: Http.Cache.Get
}, [cb_statesel]);
}
function fillcb_state(xmlreply, cb_stateelmt)
{
if (xmlreply.status == Http.Status.OK)
{
var cb_stateresponse = xmlreply.responseText;
var cb_statear = cb_stateresponse.split("|");
cb_stateelmt.length = 1;
cb_stateelmt.length = cb_statear.length;
for (o=1; o < cb_statear.length; o++)
{
cb_stateelmt[o].text = cb_statear[o];
}
}
else
{
alert("Cannot handle the Ajax call.");
}
}
function handleOnChange2(dd1)
{
var idx = dd1.selectedIndex;
var val = dd1[idx].text;
var par = document.forms["cbcheckedadminForm", "adminForm"];
var parelmts = par.elements;
var cb_citysel = parelmts["cb_city"];
var state = val;
var directory = ""+document.location;
directory = directory.substr(0, directory.lastIndexOf('/'));
Http.get({
url: "./components/com_helloworld/js/regvalues/" + state + ".php",
callback: fillcb_city,
cache: Http.Cache.Get
}, [cb_citysel]);
}
function fillcb_city(xmlreply, cb_cityelmt)
{
if (xmlreply.status == Http.Status.OK)
{
var cb_cityresponse = xmlreply.responseText;
var cb_cityar = cb_cityresponse.split("|");
cb_cityelmt.length = 1;
cb_cityelmt.length = cb_cityar.length;
for (o=1; o < cb_cityar.length; o++)
{
cb_cityelmt[o].text = cb_cityar[o];
}
}
else
{
alert("Cannot handle the Ajax call.");
}
}
</script>
And here's how it's being triggered on page load: Code: <script>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
ajaxFunction(document.getElementById('country').value);
handleOnChange(country);
setupDependencies('cbcheckedadminForm', '');
handleOnChange2(cb_state);
});
</script>
I'm not sure why it says it's not defined as it clearly is. This error is causing the dependent drop down script to not work in firefox causing the child dropdowns to not hide. I did notice something odd though, if I remove the doctype line it works ok. I did this as firebug was throwing an error on another page claiming it had a syntax error so obviously something somewhere is messed up. 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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>"> When the doctype lines are removed firebug throws this error: window.document.forms[arguments[i]] is undefined [Break On This Error] for(var j = 0, e = window.document...ts[i]].elements; j < e.length; ++j) { in formmanager.js. Hi, Using a while loop in a function, I am trying to test an input character against a stored string of characters. I want the function to return the input character only if it is not in the stored string of characters. The code I've prepared is as follows: Code: <SCRIPT language = "JavaScript">
var storedLetters = 'sideways';
function requestLetters(aString)
{
var validLetter ='';
var inputLetter = window.prompt('Please input a single lower-case letter', '');
while (storedLetters.indexOf(inputLetter) != -1)
{
inputLetter = window.prompt('You have already tried ' + inputLetter + ' . Please try another' + ' letter.');
}
validLetter = inputLetter;
return validLetter;
}
requestLetters(storedLetters);
document.write(validLetter);
</SCRIPT>
The code works fine if I remove it from the function wrapper but if the function is called I keep getting an error message that the variable validLetter is not defined. Can anyone see why this is the case? Thanks. Hi, I have a button that when you click it displays the results of my db in a div. What I am trying to do is to get the results to update every five seconds. I thought setTimeout was the best way to achieve this. However I am getting the error message that ID is not defined on the setTimeout line. I thought it would automatically input ID into the fields marked ID when the onloadXMLDocRefresh('File.php','txtHint') button is clicked? The button works to load the script, but the refreshing the div is not. My script is: Code: <script type="text/javascript">
function loadXMLDocRefresh(File,ID){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
timer = setTimeout('loadXMLDocRefresh(File,ID)',5000);
}
}
xmlhttp.open("POST",File,true);
xmlhttp.send();
}
</script>
How to: pass local variable from <head> JS function to <body> textarea I have a JS function in the head that calculates a variable. the function is triggered by the vevent of a button click. when calculation is done, how is it sent back to the page and placed in a textarea or textbox....?? /Beginner issues :/ I'm currently working on an HTML executor and would like users to be able to put javascript in their code if they wish to do so. Currently I have their input sent to an iframe via document.body.innerHTML. The problem, though, is that user submitted javascript doesn't work (with the exception of anything placed in the onload attribute of an image). Any suggestions?
I am having a time trying to figure out why my code erases all of my content, and only renders the document.write code. I want to use this inside my html and php so customers will be informed of minimum purchases for free delivery. Any help is appreciated. Code: <html>
<title>Title Page</title>
<head>
<script type="text/javascript">
function getCookie(zip)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==zip)
{
return unescape(y);
}
}
}
function setCookie(zip,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var zip_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=zip + "=" + zip_value;
}
<!-- Function to Change Zip-Code, or empty cookie !-->
</script>
</head>
<style>
.container{
position: relative;
width: 1000px;
margin: 0 auto;
}
.left{
width: 200px;
background: #EEEEEE;
position: absolute;
top: 0px;
height: 50px;
}
.middle{
width: 600px;
background: #CCCCCC;
margin-left: auto;
margin-right: auto;
height: 300px;
}
.right{
width: 200px;
background: #FCFCEC;
position: absolute;
top: 50px;
height: 250px;
}
</style>
<body onload="checkCookie()">
<div class="container">
<div class="middle">Hello Main Content Area<br>
This is the main area, all the bull is going on here.
</div>
<div class="left">Hello Lefty</div>
<div class="right">This is where I want the document.write output to be...
<script>
function checkCookie()
{
var zipcode=getCookie("zipcode");
if (zipcode!=null && zipcode!="")
{
document.write("Zip-Code: " + zipcode);
if (zipcode==33820)
document.write("<br> Minimum purchase for delivery is: <br>$300.00");
else if (zipcode==33920)
document.write("<br> Minimum purchase for delivery is: <br>$235.00");
else if (zipcode==34216)
document.write("<br> Minimum purchase for delivery is: <br>$150.00");
else if (zipcode==33572)
document.write("<br> Minimum purchase for delivery is: <br>$150.00");
else if (zipcode==32712)
document.write("<br> Minimum purchase for delivery is: <br>$300.00");
else if (zipcode==34679)
document.write("<br> Minimum purchase for delivery is: <br>$150.00");
else if (zipcode==33823)
document.write("<br> Minimum purchase for delivery is: $300.00");
else if (zipcode==33827)
document.write("<br> Delivery by Common Carrier");
else
document.write("<br> Please call Melco at: 1-800-950-3722");
}
else
{
zipcode=prompt("Please enter your Zip-Code:","");window.location.reload();
if (zipcode!=null && zipcode!="")
{
setCookie("zipcode",zipcode,365);
}
}
}
function deletecook()
{
var d = new Date();
document.cookie = "v0=1;expires=" + d.toGMTString() + ";" + ";";
}
</script>
<a href="javascript:deletecook();">Change Location</a>
</div></div>
</body>
</html>
Hi Guys, I have a little question... I know that adding Code: onclick="document.body.style.backgroundColor='#F3B90C'; to a div will change the body background colour to the above colour.. But what I was wondering was this.. Is it possible, instead of adding the code to the actaul div itself to pass the function like this... Code: <script type="text/javascript">
$("Object").click(function(){
document.body.style.backgroundColor = "#000000";
});
</script>
Any help/info is appreciated Kind regards, paffley <!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 language="Javascript" type="text/javascript"> function user_prompt() { alert.("Hello there"); } user_prompt(); </script> </head> <body> </body> </html> I am such a noob. But I am so bad I cannot even get a window alert to pop up. All I want to do is call the function in the body. But do not know how... I have a function which I placed in the header of my html file: Code: <script language="javascript" type="text/javascript">
function UngreyInstallButtons() {
document.form1.viewbutton1.disabled = false;
document.form2.viewbutton2.disabled = false;
document.form3.viewbutton3.disabled = false;
}
</script>
I want to call this from within the body of my html page: Code: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
var name = GetCookie('COOKIENAME');
if (name != null) {
alert("I GET HERE" + name + "!");
UngreyInstallButtons();
alert("I DONT MAKE IT HERE");
}
//-->
</SCRIPT>
The GetCookie func works and returns name correctly. The first alert() box is displayed, - the second one isn't! It does not come back from the call to UngreyInstallButtons() Why? I also tried this: Code:
if (name != null) {
alert("I GET HERE" + name + "!");
document.form1.viewbutton1.disabled = false;
document.form2.viewbutton2.disabled = false;
document.form3.viewbutton3.disabled = false;
alert("I DONT MAKE IT HERE");
}
Again, it does not execute the = false lines at all. Perhaps I'm missing something obvious? (I am new to js) Hi, I am facing a problem in passing replace() function as an argument in user defined java function, can any one help me how to resolve it? intention is to pass a file path to my user defined function, but before passing the path i want to replace the character '\' to '\\' I am posting my javascript function he <a href="#" onclick="OpenDocPreview('<%# Eval("PATH")%>'.replace(/\\/g,"\\\\"), '<%# Eval("Filename")%>')"><%# Eval("DocTitle") %></a> function OpenDocPreview(url, docname) { alert('message from search base : ' + url + ' ' + docname); } thank you, Hi! I have a javascript in the head of the document which has a variable named "ref2" ... ref2 is already working as I can see its value working in another function. I need to send this variable as the value of a hidden field in the form which is in the body of the document. This is my JavaScript Code: Code: function WriteContactFormStatement1 () {
var ContactFormValue = ref2;
document.write('<input type="hidden" name="UReferrersName" value="' + ContactFormValue + '" />');
}
var WriteContactFormStatement = WriteContactFormStatement1 ();
And at the end of my form, before the submit button, I have the following code: Code: <!-- START -- Javascript to print the statement for UReferrersName --> <script language="JavaScript" type="text/JavaScript"> //WriteContactFormStatement(); document.write (WriteContactFormStatement); </script> <!-- End -- Javascript to print the statement for UReferrersName --> When I execute the form, it doesn't work the way it should, plus, gives me a word "undefined" next to the "Submit" button ..... Please help !... - Xeirus. Hello I have a piece of javascrip that refreshes the page: ---------- Code: <script type="text/javascript">
<!-- Begin
function reFresh() {
location.reload(true)
}
/* Set the number below to the amount of delay, in milliseconds,
you want between page reloads: 1 minute = 60000 milliseconds.
2 minutes = 120000 milliseconds 5 minutes = 300000 milliseconds*/
window.setInterval("reFresh()",20000);
// End -->
</script>
-------- I am new to javascript and wanted to use an html options menu in order to be able to choose the refresh interval: Code: <SELECT NAME="refreshtime"> <OPTION VALUE="60000">1 min</option> <OPTION VALUE="120000">2 min</option> <OPTION VALUE="180000">3 min</option> <OPTION VALUE="240000">4 min</option> </SELECT> I know that I have to pass a variable to the function. I have tried several variations but none have worked. I have mostly received a "done with errors" warning. Any help would be appreciated. Thanks Zam Hi, I wonder if anyone can help me. I have a header I use on my site which has a Javascript code for rotating banner ads. I'd like to try to track the clickthroughs on these ads and have been looking at the methods of doing this in google analytics, but they all seem to be for single links, such as the method he http://support.google.com/googleanal...n&answer=55527 which then don't work with the links as they are in the banner. I was wondering if anyone knew how I would be able to integrate the analytics code in that link into the banner I have, or of another method I can use to track clicks on the ads. Thanks! This is the banner I'm using: Code: <script type="text/javascript">function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
}
}
link = new initArray(
"http://www.jojingles.com",
"http://www.goals-solutions.com/",
"http://www.barleylands.co.uk/",
"http://www.blukangaroo.co.uk/onlineshop",
"http://www.explorelearning.co.uk/vebo",
"http://www.explorelearning.co.uk/vebo",
"http://www.allmumkind.com/",
"http://quintessencemassage.weebly.com",
"http://www.dw-beauty.co.uk",
"http://www.theclothestree.co.uk"
);
image = new initArray(
"http://www.essexmums.org/images/jojingleslong.gif",
"http://www.essexmums.org/images/goalssolutionbanner.jpg",
"http://www.essexmums.org/images/barleylandsbanner.jpg",
"http://www.essexmums.org/images/blukangaroo.jpg",
"http://www.essexmums.org/images/explorelakeside.jpg",
"http://www.essexmums.org/images/explorelakeside.jpg",
"http://www.essexmums.org/images/allmumkind3.jpg",
"http://www.essexmums.org/images/quintessence.jpg",
"http://www.essexmums.org/images/dwbannerad.jpg",
"http://www.essexmums.org/images/clothestree.jpg"
);
text = new initArray(
"Jo Jingles",
"Goals Solution",
"Barleylands",
"Blu Kangaroo",
"Explore Lakeside",
"Explore Lakeside",
"Allmumkind",
"Quintessence",
"DK Beauty",
"The Clothes Tree"
);
function getrandom(){
var core2 = Math.floor(Math.random()*10); // amount of items in array
displaybanner(core2)
displaybanner(core2)
}
function displaybanner(theNum2){
var ranlink2 = link[theNum2];
var ranimage2 = image[theNum2];
var rantext2 = text[theNum2];
document.getElementById('theImg2').alt=rantext2;
document.getElementById('theImg2').src=ranimage2;
document.getElementById('theLink2').href=ranlink2;
}
</script><a href="#" target="_blank"
id="theLink2"><img src="" alt=""
id="theImg2" border="0"></a>
<script type="text/javascript">
getrandom();
setInterval("getrandom()", 22000);
</script>
I can get the lightbox to work perfectly fine, and I love how seamlessly it works, I however am running some more java script on my page and am running into some problems. When I apply the lightbox it takes away the functionality of my other script, and I am not sure why this is so. I am using 2.04 version of lightbox: http://www.huddletogether.com/projects/lightbox2/ Here is the other script that is getting either turned off or overridden, I'm not quiet sure. <script type="text/javascript"> $(document).ready(function() { //Set Default State of each portfolio piece $(".paging").show(); $(".paging a:first").addClass("active"); //Get size of images, how many there are, then determin the size of the image reel. var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size $(".image_reel").css({'width' : imageReelWidth}); //Paging + Slider Function rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; //Rotation + Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds $active = $('.paging a.active').next(); if ( $active.length === 0) { //If paging reaches the end... $active = $('.paging a:first'); //go back to first } rotate(); //Trigger the paging and slider function }, 3750); //Timer speed in milliseconds (3 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(".image_reel a").hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation }); //On Click $(".paging a").click(function() { $active = $(this); //Activate the clicked paging //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor }); }); </script> I am assuming there is some conflict with either an onload..or something I'm really not sure I would greatly appreciate your help. Hello Can anyone help with the following problem On the following page http://www.stroudskittles.co.uk/signingon.html I have a Body onload event (to load the chained Menu) and a windows.onload event (to load the IFrame Ticker) If I open the page in Internet explorer both scripts function; however in Firefox I'm having problems. The Chained Menu works, however the IFrame Ticker does not display. Both events ahave ben placed on the boady tag. Can anyone advise how I can get both to display in Firefox Can anyone For example ,There is a "Link" called "go to view" at the bottom of the my page, which is redirecting to http://localhost/test.php . if we use $_SERVER['HTTP_REFERER'] in test.php page It will display the url of the page from which link was clicked. The problem is this my URL can be seen at the target page. This needs to be avoided. How can i do this using javascript ? Can anyone tell me of how to take or assign a javascript variable into php.
I get the screen resolution with this script: <SCRIPT language="JavaScript"> <!-- height = screen.height; width = screen.width; document.write(width + "x" + height); var x = ( width + "x" + height); //--> </SCRIPT> Now I have some links below and I want to use bold if the link has the same screen resolution: <a href="page1">800x600</a> <a href="page2">1024x768</a> <a href="page3">1680x1050</a> <a href="page4">1920x1200</a> Supposing my screen resolution is 1920x1200, the result should be: 800x600 1024x768 1680x1050 1920x1200 How do I do that? Thx!! |
|||||||