|
JavaScript - Script In Multiple Browsers Help Please
Hi everyone
I know this has probably been asked a million times before but I have been searching the net for hours and have not found a solution so I am hoping one of you clever people will be able to help me. PLEASE!! I am using this snow fall script http://www.dynamicdrive.com/dynamicindex3/rain.htm It works perfectly in IE but not in Firefox or Safari. I'd like it to work in all or most browsers if thats possible. Unfortunately, I am still learning so don't understand all the technical speak as yet so if someone can help in simple terms I'd be ever so grateful Thank you so much to anyone who can help me out! Similar TutorialsHi all, I've been trying to teach myself Javascript to figure out this problem, but I'm apparently not learning what I need to. The objective is this: I want to have a div appear below my mouse when mousing over different parts of my website. I know how to swap out the background images, I know how to change the div's sizes... It's just that I'm using one div, and in order to get this right, I need it to be positioned in different places under the mouse each time the image changes. I've got a cross-browser mouse-follow worked out, I just don't know how to edit the "divvx" and "divvy" variables when I mouse over the "boxtest" div. Here is the code I'm working on, maybe I'm just missing something obvious? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var divvx=22, divvy=22;
function doMouseMove(e){
var posx=0;var posy=0;
var e=(!e)?window.event:e;//IE:Moz
if (e.pageX){//Moz
posx=e.pageX+window.pageXOffset;
posy=e.pageY+window.pageYOffset;
}
else if(e.clientX){//IE
if(document.documentElement){//IE 6+ strict mode
posx=e.clientX+document.documentElement.scrollLeft;
posy=e.clientY+document.documentElement.scrollTop;
}
else if(document.body){//Other IE
posx=e.clientX+document.body.scrollLeft;
posy=e.clientY+document.body.scrollTop;
}
}
else{return false}//old browsers
var mydiv=document.getElementById('curicon');
mydiv.style.left=(posx-divvx)+'px';
mydiv.style.top=(posy-22)+'px';
}
document.onmousemove=doMouseMove
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
</script>
<style type="text/css">
<!--
#curicon {
background-image: url(resources/cursors/Inactive_Halo.png);
height: 44px;
width: 44px;
position: absolute;
top: -80px;
left: -80px;
}
#boxtest {
position: absolute;
height: 100px;
width: 400px;
background-color: #0F0;
left: 149px;
top: 213px;
}
-->
</style>
</head>
<body>
<div id="curicon" name="curicon" style="position:absolute; left:-250px; z-index:2"></div>
<div id="boxtest" onMouseOver="MM_callJS('divvx=68')"></div>
</body>
</html>
Thanks, everyone. This has been driving me nuts for an entire week. Not sure if I'm in the right category, apologies if I am not.. I have a small flash/javascript streaming mp3 player on my site that works fine in Chrome and Safari, but doesn't show up at all in Firefox, IE, or Opera. the site is he www.thehordeandtheharem.com/index2.html the player is in the top left corner. I don't even know where to begin troubleshooting this as I didn't write the player myself, but copied it from another site. If anyone could shed any light on this for me I would be very grateful, thanks! This is my test page: http://www.thesacstudio.com/ccid_web...ndex_copy.html Am using Dynamic Drive's smooth menu javascript When viewed on a PC using IR the menu makes the page "jump" i am a Mac guy and at my limit of what to do. thanks for any assistance please pardon my ignorance, but I'm clueless as to why this won't work.... the following is in the header of my page. The first part is the "menu" of the page, the second ( <script type="text/javascript" src="rotate1.js.js"> ) is an external script that rotates an image on the page..... the 2nd works perfectly in a page by itself, but when I insert it in the template with the menu script, images won't rotate. I know I'm missing something that tells the 2nd script to run, but I just don't know what it is? I'm just frustrated with myself that I can't figure it out and i've read so many forums/tutorials/helps that I've only succeeded in confusing myself further! HA! i apologize again for my ignorance... last time i did a web site was 8 years ago, but my boss is paying me to get this done and I REALLY need to pay my phone bill this week!!! Code: <script language="Javascript">
<!--
<!--
function gotoURL(u)
{
document.location = u;
}
function turnon(i)
{
if (document.getElementById || (document.all && !document.GetElementById))
i.style.backgroundColor = "#baccfc";
i.style.textColor
}
function turnoff(i)
{
if (document.getElementById || (document.all && !document.GetElementById))
i.style.backgroundColor = "#3462fd";
}
<script type="text/javascript" src="rotate1.js.js">
-->
//-->
</script>
Thanks in advance for ANY advice you may have!!!! I found this "required fields" script for a form I built, and I'd like to know how to convert it to accept multiple required fields. I'm a total novice at JavaScript so any help is much appreciated. Here's the script: Code: <script language="javascript" type="text/javascript">
<!--
function check(form) {
if (form.firstname.value == "") {
alert("Please enter your first name!");
form.firstname.focus();
return false ;
}
return true ;
}
//-->
</script>
and the HTML is (super-shortened version)... Code: <form onsubmit="return check(this);">
<table>
<tr>
<td><label>First Name</label></td>
<td><input name="firstname" /></td>
</tr>
</table>
</form>
Thanks for any help!!! hi guys i really dont understand where i am going wrong.I've read countless articles including http://blog.nemikor.com/2009/10/03/u...ons-of-jquery/ but still having trouble with multiple versions of jquery not working. either the jquery slideshow doesnt work or the jquery ie select width fix doesnt work! rrghhh Code: <head>
<link href="/css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/ie6pngfix/iepngfix_tilebg.js"></script><!-- ie6 png fix -->
<script type="text/javascript" src="/js/ddlevelsmenu.js"></script><!-- drop down menu js -->
<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script><!-- slideshow jquery file 1 -->
<script type="text/javascript" src="/js/slides.min.jquery.js"></script><!-- slideshow jquery file 2 -->
<!-- slideshow jquery controls -->
<script type="text/javascript">
jQuery(function () {
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#', '');
}
// Initialize Slides
jQuery('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
generatePagination: true,
play: 5000,
pause: 2500,
slideSpeed: 1200,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function (current) {
// Set the slide number as a hash
// window.location.hash = '#' + current;
}
});
});
</script>
<script type="text/javascript">
var jQuery_1_4_4 = $.noConflict(true);
</script>
<script type="text/javascript" src="/js/prototype.js"></script><!-- lightbox aka image viewer js file 1 -->
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script><!-- lightbox aka image viewer js file 2 -->
<script type="text/javascript" src="/js/lightbox.js"></script><!-- lightbox aka image viewer js file 3 -->
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(jQuery) {
</script>
<script type="text/javascript" src="/js/test/jquery.1-4-2.min.js"></script>
<script type="text/javascript" src="/js/test/jquery.ie-select-width.js"></script>
<!--[if lte ie 6]>
<script type="text/javascript" src="/js/test/jquery.bgiframe.js"></script>
<![endif]-->
<script type="text/javascript">
$(function ()
{
// Set the width via the plugin.
$('select#fixed-select-no-css').ieSelectWidth
({
width : 200,
containerClassName : 'select-container',
overlayClassName : 'select-overlay'
});
// Set the width via CSS.
$('select#fixed-select-css').ieSelectWidth
({
containerClassName : 'select-container',
overlayClassName : 'select-overlay'
});
// Borders and padding etc for Internet Explorer 6/7.
$('select#select-styleable').ieSelectWidth
({
containerClassName : 'select-container',
overlayClassName : 'select-overlay'
});
});
</script>
<script type="text/javascript">
var jQuery_1_4_2 = $.noConflict(true);
</script>
<!-- Share this button script -->
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'c0b04a1e-f627-42e8-b040-cbfb63bd9b1c'});</script>
<script type="text/javascript" src="/js/showtab.js"></script>
</head>
I've tried re ordering the scripts around but still no joy? either the slideshow works or the ie select width fix doesnt but not both at the same time? please advise Omar. Hi There! New poster here. I have searched the forums for an answer to my question, but I haven't found anything. Forgive me if the question has an obvious answer or is in general too noobish. I am using a jQuery javascript app to make a regular table into a table that has a scrollbar on the right side and can be scrolled. The script I mean is he http://derek.app02.i-sites.com/scrol...arTable-0.1.js The purpose is that users can scroll the contents of the table and still see the headers, so that they don't have to remember which column is what. To do this, the scrollbartable app extracts the first header of the table and puts it aside: Code: /* Remove the header and put it before the rest of the table as a new table*/
var $firstRow = $t.clone();
$firstRow.find('tr:not(:first)').remove();
$t.find('tr:first').remove();
$t.before($firstRow);
However, the table I am using has two tr's in the header: Code: <table class="rspace scrollbarTableLarge">
<thead>
<tr>
<th rowspan="2">1</th>
<th rowspan="2">2</th>
<th rowspan="2">3</th>
<th rowspan="2">4</th>
<th colspan="{$project->getPlannedAnalyses()|@count}">Analyses</th>
<th rowspan="2">6</th>
</tr>
<tr>
{foreach from=$project->getPlannedAnalyses() item=analyse}
<th>{$analyse->naam}</th>
{/foreach}
</tr>
</thead>
<tbody>
.....
</tbody>
So as you see the fifth column has a name "Analyses", and it is subdivided into an arbitrary amount of other colums (as many as there are analyses). The Scrollbartable app only puts the first <tr> in the header. All the names of the analyses of teh second <tr> are put in the table itself and scroll away when the table is scrolled. How can I modify the javascript in a simple way so that it also takes the second <tr> and puts in in a non-scrollable header? Thanks in advance for your answers! Im using the following script: Code: <script type="text/javascript">
function unhide(hiddentext) {
var item = document.getElementById(hiddentext);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
<style type="text/css">
.unhidden { display: block; }
.hidden { display: none; }
</style>
to hide and unhide a block of text on my page, using onclick events. the problem is its not allowing me to use it multiple times in a page. when i use a second instance of it, both stop working. the above demonstrated script is working with the following elements: middle (approx) of page: Code: <td class="desc_cell"><strong>Download Station</strong><br />
17" Macbook Pro<br /><a href="javascript:unhide('itemlist');" onclick="changeText(this,'Hide Item List');" id="text1link"]Old Text>Click Here For Full Item List</a><div id="hiddentext" class="hidden">list of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes here</div>
</td>
bottom of page: [code]<p align="center" style="citylist">Allen Park MI, Anchor Bay Gardens MI, Anchor Bay Harbor MI, Anchor Bay Shores MI, Andersonville MI,<a href="javascript:unhide('hiddentext');" onclick="changeText(this,' View Less...');" id="text1link"]Old Text>View More...</a></p><div id="hiddentext" class="hidden">Armada MI, Auburn Heights MI, Auburn Hills MI, Austin Corneorth Farmington MI, Northville MI, Norton MI, Novi MI, Oak MI, Oak Grove MI, Oak Park MI, Oakley Park MI, Oakwood MI, Orchard Lake MI, Ortonville MI, Oxbow MI, Oxford MI, Perry Lake Heights MI, Pleasant Ridge MI, Plymouth MI, Point Lakeview MI, Pontiac MI, Preston Coom MI, Wolcott Mills MI, Wolverine Lake MI, Wood Creek Farms MI, Woodhaven MI, Wyandotte MI, Yates MI, and many more!</div> Hi, I am new to javascript so any help would be much appreciated. I found the following script online to show/hide a login div. <script language="JavaScript" type="text/javascript"> function login(showhide){ if(showhide == "show"){ document.getElementById('popupbox').style.visibility="visible"; }else if(showhide == "hide"){ document.getElementById('popupbox').style.visibility="hidden"; } } </script> It works really well but I have other div I would also like to show/hide. Is it possible to have a variable in the function that I could pass the name of the div to show/hide. I have a ul list that I am using for a navigation menu and I would like to be able to click on items in the list to show different div's. I assume this is possible, so could someone please give me an indication of how to do it as I have been trying for a few days now and no joy. Thanks, James I'm an artist working on a project that involves 9 swfs embedded in a html page and placed in tables. Although each swf has it's own volume control and pause/play buttons on mouseover, I need an outside script like java, that can be used to stop and start a few swf's simultaneously so that 3 or 4 play while the others are paused. There would be a few different combinations of them playing together that would be opted for by a menu choice. The swf's are in an old version of Macromedia Flash MX 6 using Action Script 2. I have absolutely no experience writing java scripting. None. I would be glad to pay somebody to write it for me. The page is online. If interested, I can forward the link. Thanks for your time. I am a new to js and GM but I am trying to make a script that will click a button on a page where there are multiple instances of the button. The source I am looking at is below and I have narrowed down what I am looking at to the bold section. <dl> <dd class="left"><div id='recommendstatus_article4458331'> <dl class="recommend"> <dt class='recs'><a href="javascript://" onclick="RecSpy( 'article', '4458331', 'tippers' ); return false;">50</a> </dt> <dd><a href="javascript:void(0);" onclick="RecommendItem(1,'article','4458331','1','recommendstatus_article4458331' ); return false;" onmouseover="return overlib('Give thumbs up', WRAP);" onmouseout="return nd();"> <img class='icon' title='' alt='Thumb up' style='background-position: -304px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a></dd> <dt class='tippers'><a href="javascript://" style='color: #969600;' onclick="RecSpy( 'article', '4458331', 'tippers' ); return false;"></a></dt> <dd><a href="javascript:void(0);" onmouseover = "return overlib( 'GeekGold Tip', WRAP );" onmouseout = "nd();" onClick="GeekGoldTip(0,'article','4458331','recommendstatus_article4458331'); return false;"> <img class='icon' title='' alt='tip' style='background-position: -368px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a></dd> <dd> <a href="javascript:void(0);" onclick="RecommendItem(0,'article','4458331','','recommendstatus_article4458331', 'article4458331' ); return false;" onmouseover="return overlib('Hide this post', WRAP);" onmouseout="return nd();"> <img class='icon' title='' alt='Thumb up' style='background-position: -336px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a> </dd> <dt class='thumbsdown'> </dt> </dl> How do I create a script to find each instance of the button and click it? I am having trouble implementing this script. I am not a coder so please give exact, idiot proof advise. :-) Thank You. <script> (function() { var cx = 'user_id:field_id1'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); // This basically takes the value of the radio button (requires jQuery) $("input:radio[name='GCSField']").change(function() { cx = $(this).val(); }); })(); </script> <label for="user1"> <input name=GCSField id="user1" type="radio" value="user_id:field_id1" checked >User Field 1 </label> <label for="user2"> <input name=GCSField id="user2" type="radio" value="user_id:field_id2">User Field 2 </label> <gcse:search></gcse:search> Here is my html. <!DOCTYPE html> <html> <head><meta charset="UTF-8"> <!--[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <title>TEST</title> <meta name="robots" content="noindex, nofollow"> <meta name="viewport" content=" width=device-width, initial-scale=1"><meta name="HandheldFriendly" content="true"><meta name="MobileOptimized" content="320"> <style>body{width:100%;max-width:25em;margin-left:auto;margin-right:auto;font-family:Verdana,'Palatino Linotype',Palatino,'Book Antiqua',Arial,Helvetica,sans-serif;text-align:justify;font-size:105%;background-color:#000;background:#000;}p{margin-bottom:1%;}strong{font-size:115%;font-weight:bold;}a{line-height:200%;text-decoration:underline;color:#0007C6;}article{margin: 0 0 1% 0; color:#000;background:#FEE800;background-color:#FEE800; text-align: center;}</style> </head><body> <article> <div><script> (function() { var cx = 'user_id:field_id1'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); // This basically takes the value of the radio button (requires jQuery) $("input:radio[name='GCSField']").change(function() { cx = $(this).val(); }); })(); </script> <label for="user1"> <input name=GCSField id="user1" type="radio" value="011565775292567206849:xkh-s7ljiug" checked >User Field 1 </label> <label for="user2"> <input name=GCSField id="user2" type="radio" value="partner-pub-4173665486685435:n2tml3-z5vf">User Field 2 </label> <gcse:search></gcse:search></div> <div><gcse:searchresults></gcse:searchresults></div> </article> </body></html> Here is the above page off a server TEST Thanks again. Hi, I hope someone can help me. I'll be honest and say I don't know much about javascript, but am fairly comfortable in html. I am building a website that will have multiple image swaps on multiple pages. I am building this in wordpress, and I'm guessing that means my approach will be different than if I wasn't using wordpress. Here's how one page would work: There are 10 images shown. 1,2,3,4,5,6,7,8,9,10. When number 1 is clicked on, I want a new image - 1a. When 2 is clicked on, 2a. So there are 20 different images in all on a given page. Also, I want the user to be able to click on the image again to restore the original image. I would prefer onclick to onmouseover. There will be literally dozens of pages like this on the site, managed by wordpress, so hundreds of images to swap. Basically the first image is a question - the second image is the answer. Is this possible? Any ideas on how I can make this work in IE as well?? It is a code that shows a divide on click and then hides the rest at the same time. live code is also at chryscreations.com/ns/boynames.html Javascript: Code: function showstuff(divID)
{
els=document.getElementsByName('mydiv')
for (var i = 0; i < els.length; i++)
{
els[i].style.visibility="hidden";
els[i].style.display="none";
}
document.getElementById(divID).style.visibility="visible";
document.getElementById(divID).style.display="block";
}
HTML Code: <head>
<script>
window.onload=function()
{
showstuff('');
}
</script>
</head>
<body>
<a href="javascript:showstuff('adivide')">A</a>
<a href="javascript:showstuff('bdivide')">B</a>
<div name="mydiv" id="adivide"></div>
<div name="mydiv" id="bdivide"></div>
<body>
I feel a little stupid to ask this question but it has always been on my mind. <html> <head> <script type="text/javascript"> { var lastMod = new Date (document.lastModified); document.write ("<p>Document last modified "); document.write ((lastMod.getMonth() +1) + "-" + lastMod.getDate() + "-" + lastMod.getFullYear()); document.write ("<p>"); } </script> </head> </html> when i open in ie or ff it renders 2/25/11 (supposed to be 2/26/11) but when i use it in chrome or an html test is renders correctly. why? Hello, I am developing a website using HTML, CSS and JavaScript. Actually, I used Javascript a lot in that website and I am developing it in Internet Explorer Environment but I want to display it on the Firefox or Google Chrome but the problem is some of javascript codes do not work in these browsers. So what Should I do? I think I need to define the javascript for the different browsers, so how can I do that? Take a look at this - http://s385506566.websitehome.co.uk/ If it is ran in either chrome or safari it acts as it should (the sub menus open below the nav bar) but in IE and Firefox it is very different and a problem (the sub menus open Above! the nav bar) Any Ideas? I have the following code to display an image (and link if there is one): Code: if (ads[adNumber].href)
{
tempCode += ('<a href="'+ ads[adNumber].href +'" target=_blank "> \n')
tempCode += ('<img src="' + ads[adNumber].src + '" width=' + ads[adNumber].width)
tempCode += (' onLoad="setTimeout(\'newAd();\',' + refreshTime + ');"')
tempCode += ('\n height=' + ads[adNumber].height + ' border=0 >')
tempCode += ('</a>')
}
else
{
tempCode += ('<img src="' + ads[adNumber].src + '" width=' + ads[adNumber].width)
tempCode += (' onLoad="setTimeout(\'newAd();\',' + refreshTime + ');"')
tempCode += ('\n height=' + ads[adNumber].height + ' border=0 >')
}
return tempCode;
This works OK in IE9 but only shows the image if there is no link in IE7 (that is, if (ads[adNumber].href) is not true). Thanks for any help! Hi Guys , This is the urgnt requirement , I want to change the Browsers setting languge through java script ,and according to it , The data wht I enter dhould be change .Thanks In advance |
|||||||