|
JavaScript - Infuriating Problem.. I'm Going To Lose My Mind (javascript/jquery Conflicts)
First of all I really appreciate you reading this. Im going to try to be detailed so I can get help... I have wasted over 8 hours on this already and I'm going to (scuse my french) f'ing lose my mind. I'm about ready to pay someone... if youre intersted PM me.
So, I have a wordpress blog that came with several javascript includes already in the header related to the features of the blog. These features include a gallery which has little popups over the images on mouseover. the includes were 'jquery.min.js', and 'script.js' (in that order) followed by a few other includes for other features. That works fine, but then I wanted to replace the menu with a different menu which uses lavalamp jquery (he http://www.gmarwaha.com/blog/2007/08...jquery-lovers/ ) For the new menu, it requires jquery.min.js and 'custom.js'. I took out jquery.min because it was redundant and put custom underneath 'script.js' in the header. I got the menu working, except then I noticed the gallery rollovers stopped working. I moved around the order of the different includes in the header, then neither worked. after I fiddled with it more, the menu stopped working but the gallery would work. After Screwing with this for an awful long time, and a process of elimination, i found that wp_head was causing problems (where it hooks in the headers for all my wordpress plugins). I then realized 'cforms' was using jquery, as well as contact form 7, and I figured they must be conflicting somehow. So I temporarily commented out wp_head so I could focus on the other elements first, and getting them working. At this point (5 hours or so) I decided it must be something in script.js as well as custom.js which are conflicting. I have NO idea of anything about javascript so I started by going through script.js (for the gallery) and through a process of elimination i deleted all the functions that would stop it from working. my thought process was i could then do the same to custom.js (for the menu) and then hopefully with both of them trimmed everything would not conflict. So.. i opened the js file, literally removed ONE function (completely unrelated) to the gallery.. it was something about validating a contact form, and was only like 5 lines of code, and suddenly the gallery doesnt work ... GRRRRRRRRRRRRRRRR I am now at a complete loss of what to do.. i really need this working and I must not be doing something right. I dont understand how one function COMPLETELY unrelated to another will ruin everything. Please PM me if interested, i'm willing to pay someone to fix this here are the files in case you need them heres my header first. I have tried every possible combination of wher to put the different files by the way, no dice Code: <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<link href="<?php bloginfo('template_directory'); ?>/menu.css" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo('template_directory'); ?>/style1.css" rel="stylesheet" type="text/css" />
<!-- commented out while I try to figure this out
<script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/custom.js'></script>
-->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/script.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/superfish.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/fader.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/cufon-yui.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/Andika_Basic_400.font.js"></script>
Similar TutorialsFor a widget I made, I have a dropdown select menu. It is constrained to a very small width and IE does not auto expand on click. I wrote a simple javascript to handle this but I run into two problems. The onmouseout function is fired when I click into a child node, and the onmousedown of the <option> tags doesn't work in IE. The code works fine in all other browsers. var wid; var campaign_i = 0; function campaignWidget_capture(myID){ wid=document.getElementById(myID).style.width; campaign_i++; } function campaignWidget_SubDes(myID,state){ if(state==0){ if(campaign_i==0) campaignWidget_capture(myID); document.getElementById(myID).style.width="auto"; }else document.getElementById(myID).style.width=wid; } onmouseout="campaignWidget_SubDes(id,1)" This is in the select tag. onmousedown="campaignWidget_SubDes(id,0)" This is in the select tag onmousedown="campaignWidget_SubDes('campaignWidget_Sub_Designation',1)" This is in the option tag. I have been given the task of merging all of the javascript of 3 different websites into one file. I think that some of the JS is conflicting, but I don't know. I am not that experienced with JavaScript. Some of the JS is using jQuery. I have multiple anonymous jQuery functions: Code: (function ($) {
// Javascript code
})(jQuery)
Notepad++ tells me there are 7 instances of: Code: (function (a) I am guessing there is no doubt that would cause conflict? What are some common things that cause conflicts in JavaScript? Hi Guys, i'm a complete amateur when it comes to js so would appreciate your help! I'm trying to implement two different JQuerys at the same time (vertical scrolling & shadowbox). When I try one of them on its own, it works fine, however when I add the second coding, it all stops working! I''ve read a few forums suggesting solutions, but frankly I don't really understand it!! Here is the HTML coding: 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>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/shadowbox.css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onload="MM_preloadImages('images/btns/header_hyperlinks/contactus(2).png','images/btns/header_hyperlinks/about(2).png','images/btns/header_hyperlinks/hire(2).png','images/btns/header_hyperlinks/specialevents(2).png','images/btns/header_hyperlinks/latestnews(2).png','images/btns/header_hyperlinks/whatson(2).png','images/btns/header_hyperlinks/home(2).png','images/btns/header_hyperlinks/tickets(2).png','images/whatson_imgs/tickets_btn(2).png','images/whatson_imgs/calender_btn(2).png')">
<div id="header">
<div id="header_btns">
<div class="b1"><ul class="nav"><a href="#container" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home_btn','','images/btns/header_hyperlinks/home(2).png',1)"><img src="images/btns/header_hyperlinks/home(1).png" name="home_btn" width="70" height="19" border="0" id="home_btn" /></ul></a></div>
<div class="b1"><ul class="nav"><a href="#whatson_container" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('whatson_btn','','images/btns/header_hyperlinks/whatson(2).png',1)"><img src="images/btns/header_hyperlinks/whatson(1).png" name="whatson_btn" width="113" height="19" border="0" id="whatson_btn" /></ul></a></div>
<div class="b1"><ul class="nav"><a href="#latestnews_container" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('latest_btns','','images/btns/header_hyperlinks/latestnews(2).png',1)"><img src="images/btns/header_hyperlinks/latestnews(1).png" name="latest_btns" width="132" height="19" border="0" id="latest_btns" /></ul></a></div>
<div class="b1"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('special_btn','','images/btns/header_hyperlinks/specialevents(2).png',1)"><img src="images/btns/header_hyperlinks/specialevents(1).png" name="special_btn" width="156" height="23" border="0" id="special_btn" /></a></div>
<div class="b1"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tickets_btn','','images/btns/header_hyperlinks/tickets(2).png',1)"><img src="images/btns/header_hyperlinks/tickets(1).png" name="tickets_btn" width="81" height="19" border="0" id="tickets_btn" /></a></div>
<div class="b1"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('hire_btn','','images/btns/header_hyperlinks/hire(2).png',1)"><img src="images/btns/header_hyperlinks/hire(1).png" name="hire_btn" width="50" height="19" border="0" id="hire_btn" /></a></div>
<div class="b1"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about_btn','','images/btns/header_hyperlinks/about(2).png',1)"><img src="images/btns/header_hyperlinks/about(1).png" name="about_btn" width="203" height="19" border="0" id="about_btn" /></a></div>
<div class="b2"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact_us','','images/btns/header_hyperlinks/contactus(2).png',1)"><img src="images/btns/header_hyperlinks/contactus(1).png" name="contact_us" width="120" height="19" border="0" id="contact_us" /></a></div>
</div>
</div>
<div id="container">
<div id="logo">
<img src="images/logo.png" />
</div>
</div>
<div class="wrapper">
<div class="seperator">
<img src="images/blank.png" height="100%" />
</div>
<br /><a href="#" class="hyperlink">Read more..</a>
</h3>
</div>
<div class="news_sections">
</div>
<div class="news_sections2">
</div>
</div>
</div>
</body>
<!-- ================== JAVASCRIPT FOR THE SCROLLING ================== -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
</script>
<!-- ================== END OF JAVASCRIPT FOR THE SCROLLING ================== -->
<!-- ================== JAVASCRIPT FOR THE SHADOWBOX ================== -->
<script type="text/javascript" src="js/jquery.js" /></script>
<script type="text/javascript" src="js/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<!-- ================== END OF JAVASCRIPT FOR THE SHADOWBOX ================== -->
</html>
Your help will be much appreciated! On one of my pages, I have a dropdown menu as well as a image rotator. The problem is that when I have the menu on a page by itself, it loads like this: Not only does it have arrows, it also loads with a fade in/out. This is what I want. However, when both menu and image rotator scripts are in the head, this is the result: it doesnt have the arrows and doesnt fade in/out. Could someone point out where the two scripts come into conflict and possibly a resolution? Here is the code in the head: Code: <!--main stylesheet-->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--menu stylesheets-->
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript">
// initialise plugins
$(document).ready(function(){
$("ul.sf-menu").superfish();
});
</script>
<!--Orbit stylesheets-->
<!-- Use the ID of your slider here to avoid the flash of unstyled content -->
<style type="text/css">
#featured {
width: 940px;
height: 450px;
background: #009cff url('orbit/loading.gif') no-repeat center center; overflow: hidden;
}
</style>
<link rel="stylesheet" href="orbit.css">
<!--[if IE]>
<style type="text/css">
.timer {
display: none !important;
}
div.caption {
background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
zoom: 1;
}
</style>
<![endif]-->
<!-- Attach necessary scripts -->
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.orbit.min.js"></script>
<!-- Run the plugin -->
<script type="text/javascript">
$(window).load(function() {
$('#featured').orbit({
'bullets': true,
'timer' : true,
'animation' : 'horizontal-slide'
});
});
</script>
I am being told that a snippet of JQuery code in a website that I have inherited is having problems with a $() JQuery Library Implementation. It seems to keep throwing a "tagName" error. An offered solution was to recode the JQuery into traditional JavaScript using getElementById(). I'm new to JavaScript and clueless to JQuery. I'm not exactly sure how to start. How would something like this be changeable to Javascript? Code: <script type="text/javascript">
$(document).ready(function() {
$(".signin").click(function(e) {
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menu-open");
document.forms["loginForm"].elements.loginUser.focus();
});
$("fieldset#signin_menu").mouseup(function() {
return false
});
$(document).mouseup(function(e) {
if($(e.target).parent("a.signin").length==0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});
});
</script>
Hey, I'm working on a script that uses a function (called on click) to change the content of a div (called description) within the page. It contains an unordered list and list items. The first one has the class "show" and the ID "1", the second with just the ID "2", and so forth. (see code below). I am using jQuery to control the onclick function. the jQuery gets the current object with the "show" class. If there is no show class, it takes the first. It then puts a variable string together that represents the UL LI that is needed to be shown. Code: var descurrent = ($('div#description ul li.show')? $('div#description ul li.show') : $('div#description ul li:first'));
var desclass = '#description li#'+x;
Note: x is a variable transfered from the function change(x); where x is the ID that is to be shown HTML CODE: Code: <div id="description"> <ul> <li class="show" id="1">blahblah </li> <li id="2"> etc </li> </ul> The jQuery i'm trying to get to work is: Code: //Hide the current image
descurrent.animate({opacity: 0.0}, 1000)
.removeClass('show');
//Show new image
$(desclass).addClass('show')
.animate({opacity: 1.0}, 1000);
Note: the class "show" has a higer z-index Thanks in advance, Hope this can be resolved soon, been giving me headaches! Cheers, John I'm having a slight problem with php pagination and jquery/js. On the following page http://dev2.bluemuledesign.com/athletes.php you'll see an "athlete profile" area. Whenever an athlete photo is selected, javascript/php are used to switch out the athlete info. This works perfectly fine. The problem occurs if I use the left or right arrows to view more athletes (the left and right arrows are set with php pagination to switch to the next four records in the database). Whenever I do this, the athlete info defaults back to the first person from the initial load. Also, the javascript/jquery quits working and won't let me view the info for one of the newly displayed athletes. So I have two questions: 1) Can anyone tell me why it defaults back to the original athlete info? I'm assuming it has something to do with me not setting a cookie to remember the currently selected athlete. 2) Why does the javascript quit working when I view the next set of athletes? Also, the jquery slideshow that I am implementing is an alteration of this: http://designm.ag/tutorials/image-rotator-css-jquery/ Any help would be greatly appreciated. hi I am trying to play a video from youtube. What I have done so far is getting videos from my database and displaying all those videos thumbnails. So now what i want is to when i click any thumbnail it should play that video in my website. How can I do this? Here is my code Code: function showResult(result) {
$('#videosLoader').css('display','none');
var videoId = result.split(" ");
for(i = 0; i < videoId.length - 1; i++) {
var vidId = $.trim(videoId[i]);
vidLink = getScreen(vidId,"small");
$('#videosList').append("<div class='playVid'>" +
"<img width=80 height=80 src=" + vidLink + " alt='' /> " +
"<input type='hidden' name='vidId' value='" + vidId + "' />" +
"</div>").addClass("playVid");
}
$('.playVid').click(function() {
var val = $("input[name='vidId']").val();
alert("val");
$("#haveYourDefinition").append("<embed src='http://www.youtube.com/v/" + val + "&rel=1' pluginspage='http://adobe.com/go/getflashplayer' type='application/x-shockwave-flash' quality='high' width='450' height='376' bgcolor='#ffffff' loop='false'></embed>");
});
When I click any thumbnail it does nothing. Why and please tell me how to do this? Help I'm probably missing something really obvious here, but I can't figure out how to get this to work. I'm trying to get a tooltip to work, as shown he http://jquerytools.org/demos/tooltip/index.html this is where I got the basic code for the javascript and the css styling, and I've put it all together in the way that I think it should work, but instead of creating a tooltip, it basically opens the content on a separate page. Would anyone be able to look at the source code for the website below and tell me if I'm missing something here? http://boardemotion.co.uk/test.html Any help would be really appreciated Hello, I'm having trouble with some scripts conflicting and interrupting my animation. I have a small website build around Joomla and I do my own modules and components.. I've made a simple browser game that uses Javascript's setInterval to highlight some elements. A few days ago I decided to add some advertising banners to cover the server costs but those banners are using Javascript and are interrupting my "game"... Is there a way to stop that from happening ? The script flow goes like this... Step 1. An XMLHttpRequest is being made and the server returns X numbers of elements out of Y total elements that need to get highlighted. Step 2. The elements default state is "blank" then a loop goes through the Y elements and sets a className of "highlight" on the elements that need to get highlighted. Step 3. The setInterval is being called and executes the code that highlights the X elements on every interval. Code: mytimer = setInterval ( animation, 500 ); The animation variable holds a function that changes the elements with class "highlight" to "highlighted". Some pseudo-code: Code: // After all the AJAX requests and more doodle codes...
while(i < num_arr.length) { // num_arr holds the X numbers to get marked as highlight
document.getElementsByTagName('td').item(X).setAttribute('name', 'highlight');
i++;
}
mytimer = setInterval ( animation, 500 );
var animation = function() {
document.getElementsByTagName('td').item(X).className = 'highlighted';
// There is an "if" check to kill the setInterval if no more Xs are found
clearInterval(mytimer);
}
* The above code is just a short example of the actual script * Any help would be much appreciated.. Thank you. Hello. I just added this javascript/css dropdown menu to my site (download came from here). Everything seemed to be going fine until I started to test it on other pages. It seems to be running into some sort of conflict on certain pages, but I have no idea why or how. All I can tell is that the page loads differently (it shows basically an un-styled site, then it loads) and that's when the conflict occurs. In short, the menu shows up about 50px below where it should, rendering it impossible to use. I don't care how it looks in IE. The only browser that is showing it correctly is Opera. Any help would be greatly appreciated. I have no idea. :/ http://www.surrealtwilight.com You'll have to login with "Reviewer" password "testingme" to see the layout I've been working on. Menu works fine on the index page and some other pages, but not for the website pages like st_rules.php and stuff like that. :/ Any help will be greatly appreciated. I love how it looks, and I'm super bummed it's doing this. Ok my lab6 at http://opentech.durhamcollege.ca/~in...rittains/labs/ is conflicting with my interface as it is php... is there a better way for me to do this that will allow it to not conflict? PHP Code: <?php $title = "Lab6"; include "head.php"; ?> <style type="text/css"> table, td, th { border: 1px solid red; } </style> <?php function convert($i) { $CtoF= 9.0/5.0*$i + 32; return $CtoF; } ?> <td> <?php $error = ""; $result = ""; if($_SERVER["REQUEST_METHOD"] == "GET") { $start = ""; $stop = ""; $increment = ""; } else if($_SERVER["REQUEST_METHOD"] == "POST") { $start = trim($_POST["startTemp"]); $stop = trim($_POST["stopTemp"]); $increment = trim($_POST["incrementTemp"]); if(!isset($start) || $start == "") { $error .= "<br/>Please enter number to declare a starting value."; } else if(!is_numeric($start)) { $error .= "<br/>The value entered <b>MUST</b> be a number, you entered: " . $start; $start = ""; } if(!isset($stop) || $stop == "") { $error .= "<br/>Please enter number to declare a ending value."; } else if(!is_numeric($stop)){ $error .= "<br/>The value entered <b>MUST</b> be a number, you entered: " . $stop; $stop = ""; } if(!isset($increment) || $increment == "") { $error .= "<br/>Please enter number to declare a increment value."; } else if(!is_numeric($increment)){ $error .= "<br/>The value entered <u>MUST</u> be a number, you entered: " . $increment; $increment = ""; } if($error == "") { $result .= "<table class='phpTable'>"; $result .= "<tr><th>Celsius</th>"; $result .= "<th>Fahrenheit</th></tr>"; for ($i = $start; $i <= $stop; $i += $increment) { $result .= "<tr><td>" . $i; $result .= "°</td><td>"; $result .= convert($i); $result .= "°</td></tr>"; } $result .= "</table>"; } else { $error .= "<br/>Please Try Again"; } } ?> <script type="text/javascript"> /*var error = "<?php echo $error; ?>"; document.getElementById('error').innerHTML = error; var result = "<?php echo $result; ?>"; document.getElementById('result').innerHTML = result;*/ </script> <h2 id="error"><?php echo $error; ?></h2> <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" > Starting Temperatu <input type="text" name="startTemp" value="<?php echo $start; ?>" size="5"/> <br/> Stop Temperatu <input type="text" name="stopTemp" value="<?php echo $stop; ?>" size="5"/> <br/> Temperature Increment: <input type="text" name="incrementTemp" value="<?php echo $increment; ?>" size="5"/> <br/> <input type="submit" name="submit" value="Submit"/> </form> <h2 id="result"><?php echo $result; ?></h2> <?php include "foot.php"; ?> The assignment was supposed to be done in PHP. But I want to know if there is a better way either way. Like can I use AJAX instead of PHP to do that? or change the way the PHP works... something anything... This is probably stupid on my part so, I apologize in advance. I created a simple script/function that generates a popup window when you click on a link. The function writes the html code for a media player (the URL for which is passed to the function) depending on what link is clicked, and then creates a text link "Close" below the player. I've put the code below... BUT! Here's what's happening. I tested it on both Firefox and Google Chrome. (I could swear it was working on both once upon a time...but now just isn't...) In Chrome, the player is visible but the close link is not. In Firefox, the player is not visible(but you can find where it's at and pause/resume and etc.) The close link is visible. The audio file plays on both browsers. The window is supposed to have a black background, which is does in Firefox but for some reason it's blue in Chrome? (Minor issue..I know...) Quote: function pop(url) { var generator=window.open('','name','height=200,width=400,status=1'); generator.document.write('<html><head><title>Popup</title>'); generator.document.write('</head><body style="color:white;" bgcolor="#000">'); generator.document.write('<object width="300" height="200"><param name="src" value="' + url + '"><param name="autoplay" value="false"><param name="controller" value="true"><param name="bgcolor" value="#CCCCCC"><embed src="' + url + '" autostart="true" loop="false" width="300" height="200" controller="true" bgcolor="#CCCCCC"></embed></object>'); generator.document.write('<p><a style="color:white;" href="javascript:self.close()">Close</a> the popup.</p>'); generator.document.write('</body></html>'); generator.document.close(); } I can give you the URL for the thing so you can see it in action... http://thetabbfamily.com/cdpages/lifeisgood.php Scroll down 'Purchase Individuals' and click on one of the songs... I have a few hundred popups that I am trying to change to a "lightbox" style solution: Code: <!DOCTYPE html>
<html>
<head>
<title>Test 1</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="../../js/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="../../css/colorbox5.css" media="screen">
<script src="../../js/ssm.js" type="text/javascript"></script>
<script src="../../js/ssmitems3a.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../css/ssmitems.css" type="text/css">
<script>
$(document).ready(function(){
$("a[rel='tip']").colorbox();
});
</script>
</head>
</script>
<body>
<a rel="tip" href="tip1(AC)2.html"><img border="0" src="../../img/tipani1.gif" width="50" height="74"></a>
</body>
</html>
The new colorbox popup solution works well, but in some browsers - notably IE - it conflicts with the SIDE MENU routine I use. I think the menu is old code, but it works. However, to get the new "lightbox-style" popup to work in IE, I have to include <!DOCTYPE html>. In the other browsers, omitting the declaration apparently solves the conflict problem (but I feel it ought to be there). I really don't know what to do. Tinker with the side menu code? Here is a demo with the <!DOCTYPE html> declaration: http://www.aapress.com.au/ieltsonlin...conflict1.html ...and without it: http://www.aapress.com.au/ieltsonlin...conflict2.html I have tried with a full declaration but it makes no difference at all. And further reading online suggests <!DOCTYPE html> is OK. Does anyone spot a reason for the conflict? Hi, I have done a script in Jquery that resolved my problem in Firefox and Chrome but not in IE. Thought of going back to Javascript. Could you please update me the equivalent for this Jquery stuff. <script type="text/javascript"> jQuery(document).ready(function(){ var backSize = (${not empty param.backSize ? param.backSize : 0} + 1); $("#goBackResults").attr("href", "javascript:history.go(-" + backSize + ");"); var existingValue = 'backSize=' + (backSize-1); $("#when-did-i-buy .pageNum a").each(function(){ if ($(this).attr('href')) { var newValue = 'backSize=' + backSize; if ($(this).attr('href').search('backSize=')!=-1) { var t=$(this); t.attr('href', t.attr('href').replace(existingValue,newValue)); } else { $(this).attr('href', $(this).attr('href') + "&tabId=1&backSize=" + backSize); }} }); }); </script> Thanks, Ravi.P I have a code written in jquery which I have to transform to javascript. is there any tool for this or I have to do this manually? Please help.. Hi, Can anyone help me on converting this code to jquery: Code: <html>
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
var noticecontent = document.getElementsByTagName("div");
for(var x=1; x < noticecontent.length; x++) {
name = noticecontent[x].getAttribute("name");
if (name == 'noticecontent') {
if (noticecontent[x].id == thechosenone) {
noticecontent[x].style.display = 'block';
}
else {
noticecontent[x].style.display = 'none';
}
}
}
}
function showall(id) {
showall.ud=showall.ud||false;
var i=1;
while (document.getElementById(id+i)){
document.getElementById(id+i).style.display=showall.ud?'block':'none';
i++;
}
showall.ud=!showall.ud;
}
</script>
</head>
<body>
<center>
<div id="parentdiv" >
<div id="expandall" onmouseup="showall('noticecontent')" >OPEN/CLOSE ALL</div>
<div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div>
<div id="noticecontent1" name="noticecontent" class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div>
<div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div>
<div id="noticecontent2" name="noticecontent" class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div>
<div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div>
<div id="noticecontent3" name="noticecontent" class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div>
</div>
</center>
</body>
</html>
thanks JAVASCRIPT (move.js); Code: <script type="text/javascript">
$().ready(function()
{
$('#ex3').jqDrag('.jqDrag').jqResize('.jqResize');
});
</script>
HTML: Code: <script src="includes/js/move.js"></script> <div id="ex3" class="jqDnR"> <div class="jqHandle jqDrag"></div> <br /> MY DATA <div class="jqHandle jqResize"></div> </div> hi how can i make somethin like the menus A,b, bla bla one this site? http://www.kanzenanimes.net/animes Hello, posted this on dynamicdrive.com with no response, so I am trying this forum. I have been assigned to build a content locator. We cannot use a database and all content needs to load from same page. Based on my boss' design and client needs, this is what I came up with: http://contentx.com/content_locator/ I am using a Dynamic Drive script to power the dropdown and content underneath the drop down, http://contentx.com/content_locator/js/dd_cx_script.js and using a JQuery script to change the content in the window to the right. http://contentx.com/content_locator/...s_cx_script.js My questions a 1) Is there a better method to do this? (stupid question I know... of course there is!!) I would like it to be as simple as possible, no animation needed. Just need to have content from the DIV on the right side load content in the Main body div on the left (the box) 2)Is it possible to change the content on the right side when you select an option from the drop down? (say I select <option>Free Campaigns</option> I want the content to change on the right to match one of the free campagins) 3)Finally, my margins in IE 7 are all over the map, looks great in all other browsers, but in IE my TABS (colored green and blue) are about 10pixels up to high, and my belowcontent div on the left has a top margin of 12px below the dropdown... Thanks for any help, zack |
|||||||