|
JavaScript - Lightbox Style Popup Conflicts With Menu
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? Similar TutorialsThis 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... For 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. 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. Hey guys, I'm trying to accomplish something similar to what the develop on this site did: http://backlinkwatch.com/ When you click on the text area, a clickable image, with a 50% black opacity background overlay, and an exit either through a link or clicking outside of the box, shows up. I want to accomplish the same thing, but have the image popup show up on the page load instead of requiring a click of the text area. In addition, I would like this popup only once to each IP address; ie, if you visit a page on my site, this will show up, but if you close it and refresh the page or visit another page on the site a cookie will be stored that knows its already been opened once and it won't try to do it again. Thanks to anyone who can help me with this! Hi there, I can;t figure out where to change the code/add in code I have installed Fancybox using jQuery and done all the neccessary steps to ensure it works as popup. However I can't find where to add in code/edit code to make my title left for instance or bold type etc. This is the code that calls the fancybox website is: http://www.soltoro.com/NEW/projects/elrayo.html Code: <script> $(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox({
'titlePosition': 'inside'
});
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true});
/* Apply fancybox to multiple items */
$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'titlePosition' : 'inside',
'overlayShow' : false
});
});</script>
Hello Everyone, First of all i'd like to thank you for this wonderful forum, you people have helped me.. Now, i'm back here because i have this problem...i have a website built with drupal, www.plus-demo.info/drupal If you see the second menu, when you hover there is a submenu which pops out...what i want for this popup menu is to display in a fixed position...it shouldn't get out of the borders of the website...there is the code which has to do with it... Please help me... function muchomenu_display() { if (hoverParent) { hoverParent.addClass('hovering'); hoverBin = hoverParent.find('.muchomenu-bin'); /* display position */ //hoverBin.css('top', 'auto'); /* display position end */ animateIn(hoverBin); } } function muchomenu_close(){ if (hoverParent) { oldParentIdx = $('.muchomenu-parent').index(hoverParent); } for ( var i=0 ; i < megaParents.length ; i++ ) { megaParents.eq(i).removeClass('hovering'); } animateOut(hoverBin); } function checkHorizontalPosition(item) { var parentOffset = item.parents('.muchomenu-parent').offset(); var screenWidth = $(document).width(); var itemPosition = item.position(); var padding = 30; var p = item.width() + itemPosition.left + parentOffset.left + padding; if (p > screenWidth) { var newOffset = screenWidth - p; item.css('left', newOffset + 'px'); } } I've been trying to figure this out for quite a while now and I am at the end of my rope here. Ok a guy wanted me to edit the template to his ZenCart installation, this is no big deal as I am a graphics guy with a tiny bit of knowledge for actually doing websites. He wants a popup menu on the top he says later and the list he gave had like 37 links...lol I didn't want to write all that out - so I bought a program that makes the menu and you just insert the code. (This works fine if I insert it into a normal html file) So I get these instructions from the program - copy this code and insert it into the webpage: Code: <script language="javascript">var MenuFolderName="";</script><script charset="UTF-8" language="javascript" src="sftmp6arrays.js"></script><script charset="UTF-8" language="javascript" src="sfmenutmp6ie.js"></script> To copy two generated files to the web directory: sftmp6arrays.js sfmenutmp6ie.js That is it. Except - ZenCart is apparently more frustrating than my girlfriend. So I find out I need to put all the JS files in a jscript folder of the template. Then I need to paste the code above into a file and save it as jscript_topmenu.js I find out - that a file called "html_header.php" makes the site load all javascript. This template doesn't have it - so I copy that file from another template and put it in the template/common/ folder. And nothing is happening. Even if I dance in circles and say magic words...nothing happens. I swear. I'm going bald. So look - I presume that I need to call that script in the tpl_header.php file but I don't know how. Then I read that I also need to get rid of the <script> </script> stuff in the js file mentioned above. I am so confused. Can someone please tell me - the idiot <- that's me so talk to me like one so I get it please. - what I need to do. I will cook you grilled cheese. I will do whatever it takes. Please put an end to this misery. Please. Thanks. Hello, On some pc's in IE my website shows disbehaviour with the popup-menu. When your mousepointer hoovers over the transparent border, the popupmenu disappears. Please check http://www.exintec.nl/test. Perhaps if you visit the website with Internet Explorer you can see what I mean, but it might be showing good as well. The menu is made with very little javascript and mainly CSS. I discovered the begin of the cause: when I don't use a transparent color for the border, it works fine. Also when I remove the underlying image (the sky-image) and still use transparent color it also works fine. How can this be? Using Z-index for the popup-window/menu and give it a real high number won't work. I really don't see it. Ofcourse I want to keep using the transparent color and the underlying image. ------------------- Source code HTML: --------------------- <ul id="menu"> <li onmouseover="toonPopUpMenu1()" onmouse-out="verwijderPopUpMenu1()"><a href="index.html" class="selected">OVER E<font co-lor="#548DD4">X</font>INTEC</a></li> <li onmouseover="toonPopUpMenu2()" onmouse-out="verwijderPopUpMenu2()"><a href="afdelingen.html">DIENSTEN</a></li> <li onmouseover="toonPopUpMenu3()" onmouse-out="verwijderPopUpMenu3()"><a href="waterstof_injectie.html">PROJECTEN</a></li> <li><a href="werkwijze.html">WERKWIJZE</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> <ul id="popupmenu1" onmouseover="toonPopUpMenu1()" onmouse-out="verwijderPopUpMenu1()"> <li><a href="index.html" class="selected">Bedrijf</a></li> <li><a href="visie.html">Visie</a></li> <li><a href="missie.html">Missie</a></li> </ul> ----------- CSS-code ----------- #popupmenu1 { position: absolute; top: 25px; left: 141px; color: #FFFFFF; display: none; } #popupmenu1 li { border-bottom: solid transparent 4px; list-style-type: none; } #popupmenu1 li a { padding-left: 4px; padding-right: 0px; padding-bottom: 1px; padding-top: 1px; background-color: #000000; display: block; width: 155px; height: 20px; text-decoration: none; text-align: left; font-weight: 400; color: #FFFFFF; line-height: 20px; } #popupmenu1 li a.selected { font-weight: 900; } #popupmenu1 li a:hover { font-weight: 900; color: #FFFFFF; } ----------------- JS: ----------------- function toonPopUpMenu1() { var PopUpVenster=document.getElementById('popupmenu1'); PopUpVenster.style.display = 'block'; } function verwijderPopUpMenu1() { var PopUpVenster=document.getElementById('popupmenu1'); PopUpVenster.style.display = 'none'; } Need a little help. I have a project to do for a client and he wants a "Follow Scrolling Style Menu" He gave me an example of the exact one he wants, http://redvsblue.com. When you scroll down the page, you'll see that the menu follows you on the top and when you get back to the top of the page, it locks back where its suppose to be. Trouble is I cant find anywhere that shows how to do it. I was able to *rip* the code from redvsblue and modify it (but I highly doubt thats legal ) So any help would be much appreciated. thanks in advance.
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! 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. 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? 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... 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>
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>
Hi, I'm kinda hoping this is possible but haven't found any reference to it... I have a parent page that opens a popup on click that launches a sidebar navigation on the right of the screen and resizes the parent page. What I am wanting to do is create a second popup (approx 250px high) that opens below the navigation (which is only around 600px high) but I have noticed that even when you have no status bar in the popup windows, they can still end up overlapping because of additional tools or plugins that the viewer has in their browser. Is there any way to get the popups to butt up against each other instead of overlapping? More like a relative popup? Any assistance would be appreciated. :-) if I have an html page that uses the <style> or a <link> to call a style sheet these properties aren't available to JavaScript is there a good way to access them? eg Code: <html>
<head>
<title>expandable text area</title>
<style type="text/css">
#expandable{
height: 100px;
}
</style>
</head>
<body>
<form>
<textarea id="expandable" cols="30" rows="10"></textarea>
</form>
</body>
<script type="text/javascript">
document.getElementById('expandable').addEventListener('click',function(){
if(!this.style.height){
this.style.height = this.scrollHeight+'px';
}
alert(this.style.height);
}, true);
</script>
</html>
In this example I have the height set but I cannot access it since it is not declared in the style attribute of the html element I've never done java script, but I need this lightbox effect and I can never figure it out! http://www.youtube.com/watch?v=_Vv0QVP2CzE there's one tutorial I tryed, but for some reason, the light box never works, it always just opens in a new window. The website I got the codes from http://www.lokeshdhakar.com/projects/lightbox2/#how says that if it doesn't work there must be a conflicting code, but I don't have anything that I would see that would be conflicting this. I'm just trying to get a simple effect on a tutorial website I am creating so you can click the image and it enlarges in the lightbox. Can anyone help me out here? I really would like to figure out this effect. Thanks can some tell me how this image gallery with lightbox is done? I am trying to figure this out and was searching, but couldn't find how this was implemented with lightbox. http://www.davirusso.com/work/ |
|||||||