|
JavaScript - Help, Javascript Running On Load But Cant Get It To Behave After On Click
So I wrote a script to slide various divs horizontally.
It takes 2 seconds to start and then begins, sliding, then stops, then slides, until all four slides are shown, and the slides back to the first one. My issue is I have two buttons that should take over and kill the auto sliding. Also the script is giving me errors. That mastertimer, and loopertimer is not defined... Why is that? Here is the code Code: <script type="text/javascript">// <![CDATA[
function restartSlide(item){
item.style.left = parseInt(item.style.left) + 60 +'px';
var resetLooperSl = setTimeout(function(){restartSlide(item)},15);
if(parseInt(item.style.left) >= 0){clearTimeout(resetLooperSl);return;}
}
function stopSlide(){
clearTimeout(loopTimer);
}
function animateSlide(element,limit,transition){
if(transition == "stop" && parseInt(element.style.left) > -2460){
limit = limit - 820;
}
else if(transition == "stop" && parseInt(element.style.left) <= -2460){
limit = limit + 820;
stopSlide();
}
element.style.left = parseInt(element.style.left) -20 + 'px';
if(parseInt(element.style.left)<= limit){
setTimeout(function(){animateSlide(element,limit,"stop")},4000);
clearTimeout(MasterTimer);
}
var loopTimer = setTimeout(function(){animateSlide(element,limit,"flow")},15);
}
function autoSlide(){
var MasterTimer;
var RestarterTime;
var adContainer = document.getElementById('adwrap');
adContainer.style.left = '0px';
MasterTimer = setTimeout(function(){animateSlide(adContainer,0,"stop")},3000);
RestarterTimer = setTimeout(function(){restartSlide(adContainer)},25000);
}
addEvent(window, 'load', autoSlide);
function btnSlideNow(elem, incremental){
elem.style.left = parseInt(elem.style.left) + incremental + 'px';
setTimeout(function(){btnSlideNow(elem, incremental)},30)
}
function btnActions(elem){
var incremental;
if(elem.id == 'btnAdLeft'){incremental = 30}
else if(elem.id == 'btnAdRight'){incremental = -30}
btnSlideNow(elem, incremental);
}
function adButtons(){
document.getElementById('btnAdLeft').onclick = function(){btnActions(this)}
document.getElementById('btnAdRight').onclick = function(){btnActions(this)}
}
addEvent(window, 'load', adButtons);
// ]]></script>
Also I'd like to see how you experienced scripters would write this cleaner. I'd like to see that, as I am new to js. It would help me learn. thanks Similar TutorialsHey guys. I need a Javascript that clicks on particular co-ordinates on page load. I'll even make do with a script that clicks on a random co-ordinate on page load. Just a simple click has to be made automatically on page load on the page. I tried using and editing this code: Code: <html>
<head>
<script>
window.onload = function(){
document.getElementById("autoid").click();
}
</script>
</head>
<body>
<a href="http://google.com" id="autoid">Search Engine</a>
</body>
</html>
but its of no use because I want it to click on another javascript, thats another Code: <script type="text/javascript"> [Script data goes here that takes about 700 x 700 pixels on the screen] </script> I want a click to be made on this script somehow. I can add Code: window.setTimeout('clickit()',5000);
function clickit(){
location.href = document.getElementById("autoid");
myself which will delay it so the click occurs after page load but I just want a click to happen on top of that javascript. Any help will be greatly appreciated. Cheers! Hello, I don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible. I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading: Code: <td class="smallDesc"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td> The Javascirpt is the Facebook Share button that basically allows users that have Facebook to share the page there currently on in their Facebook status by pressing the button, but if there not logged in it shows the login page, not a problem just continue the script. The current button i which is what i want to load automatically in the PHP file is located here, to test the functionalilty just click "Share" button in blue.. http://watch-movies-online.anyfilman...-Movie-17.html To summarise, i would like the above Javascript code to execute automatically upon pageload of this PHP file.. http://www.watch-movies-online.anyfi...p://google.com. If that could be done, and if this also is possible.. i would like for the "Share" button on the external page that is loaded from the Javascript code above to be clicked automatically so in effect when ever someone visits the PHP page after clicking "Click Here to Watch/Stream 2012 Online For Free" on this page it will automatically load the Facebook Share box, and automatically click the "Share" Button and then close the page if possible, but not required. Please feel free to ask any questions, i'll be happy to answer. Thanks in advance. Best Regards, Jonathan. Hi all I have an asp page page with a DIV container that is activated when a user clicks a link (using javascript to activate it. It pops up similar to a light box). The contents of the DIV is an Iframe from another website. The Iframe is hidden when the page loads. Loading in the Iframe when the page loads is affecting performance of the page. I'm wondering if there is a way to load the Iframe when the user clicks the link to activate the DIV light box. This way the page doesn't have to load the Iframe straight away... only when the user needs it... I appreciate any ideas. Is there a way onclick to load external html into a DIV tag, but without iFrame usage?
Hello Again, After much help and support i have decided that the best way to do what i want (if i can get it working is like the below). The idea is to click a link and content will load into a div from another div on another page in the same webspace. I can make a test page as directed by the guidance i recieved but there are some features that wont work properly or are not what i am after. For example in the test case the link to load the div is inside the div i want to update. In my case i want to click on the algebra link in the blue horizontal menu and then the main menu updates. I wont lie i have not got the skills to adapt this script on my own. here is the test page http://www.bushcottages.co.uk/loaddata.htm the main page i would like it to work on as its not working correctly is http://www.bushcottages.co.uk/new.htm test code is Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Click This Link To Load My Favor</title>
<script type="text/javascript" src="java/jquery-1.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#loadData").click(function()
{
$(this).text("...One Moment Please...");
$("#container").append('<div id="favoriteMovies"></div>')
.children("#favoriteMovies").hide()
.load("theOtherPage.htm ul#favoriteMovies", function()
{
$("#loadData").remove();
$("#favoriteMovies").slideDown("slow");
});
return false;
});
});
</script>
<style type="text/css">
#container
{
width: 300px;
height: 200px;
font-family: georgia;
font-weight: bold;
border-style: solid;
border-width: 2px;
border-color: #000066;
}
</style>
</head>
<body>
<div id="container">
<li><a href="#" id="loadData">Click This Link To Load My Favorite Movies</a></li>
</div>
</body>
</html>
code for main page is Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Mathematics Learning Zone</title>
<meta name="description" content="Learn Key Stage 4 Mathematics and Achieve a Grade C.">
<meta name="keywords" content="Maths, Mathematics, Key Stage 4, Key Stage 4 Maths, GCSE Maths, Maths Grade C">
<meta name="author" content="Peter Devlin">
<script type="text/javascript" src="java/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://www.bushcottages.co.uk/java/jquery.newsTicker-1.2.2.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
if (document.getElementById('news')) {
var options = {
newsList: "#news",
tickerRate: 20,
loopDelay: 6000,
startDelay: 10,
placeHolder1: "_"
}
$().newsTicker(options);
}
});
-->
</script>
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
<script type="text/javascript">
var newwindow;
function poptastic(url)
{
newwindow=window.open(url,'brainteasersolution.htm','height=400,width=400,left=40%,top=20%');
if (window.focus) {newwindow.focus()}
}
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("#number").click(function()
{
$(this).text("...One Moment Please...");
$("#container").append('<div id="Algebra"></div>')
.children("#Algebra").hide()
.load("Algebra.htm ul#algebra", function()
{
$("#number").remove();
$("#Algebra").slideDown("slow");
});
return false;
});
});
</script>
<style type="text/css">
*
{
border: 0;
margin: 0;
padding-top:0;
}
#topmargin
{
width:900px;
height:5px;
margin:auto;
}
#banner
{
width: 900px;
height: 70px;
background-image: url('banner.png');
margin: auto;
margin-bottom: 5px;
background-color: #000066;
}
#horizontalmenu
{
width: 900px;
height: 25px;
margin: auto;
margin-bottom: 5px;
background-color: #000066;
}
#horizontalmenu ul
{
list-style-type: none;
margin: 0px;
padding: 2px 0px 0px 0px;
}
#horizontalmenu ul li
{
float: left;
display: block;
text-align: center;
width: 300px;
}
#horizontalmenu ul li a
{
text-decoration: none;
font-family: georgia;
font-size: 1em;
color: #fafafa;
}
#horizontalmenu ul li a:hover
{
font-family: georgia;
font-size: 1em;
padding: 5px 40px 5px;
color: #000000;
background-color: #ffffff;
}
#mainpage
{
width: 900px;
margin: auto;
}
#one
{
float: left;
width: 150px;
margin-right: 5px;
}
#two
{
float: left;
width: 590px;
margin-right: 5px;
}
#three
{
float: left;
width: 150px
}
#verticalmenu
{
float: left;
width: 150px;
}
#verticaltopmenu
{
float: left;
width: 150px;
height: 23px;
background-color: #000066;
}
#verticalmainmenu
{
float: left;
width: 146px;
height: 372px;
text-decoration: none;
border-style: solid;
border-width: 2px;
border-color: #000066;
padding-top: 2px;
padding-bottom: 2px;
}
#verticalmainmenu ul
{
text-decoration: none;
list-style: none;
padding: 0px;
margin: 0px;
color: black;
}
#verticalmainmenu ul li
{
list-style: none;
text-decoration: none;
display: block;
padding: 0px;
text-align: left;
font-family: georgia;
font-size: .8em;
color: black;
}
#verticalmainmenu ul li a
{
padding: 0px 0px 0px 5px;
text-decoration: none;
text-align: left;
color: black;
}
#verticalmainmenu a:hover
{
background-color: white;
color: #000066;
}
#tickercontainer
{
float: left;
width: 586px;
height: 21px;
margin-bottom: 5px;
border-color: #000066;
border-style: solid;
border-width: 2px;
}
#tickersidetitle
{
float: left;
width: 125px;
height: 21px;
background-color: #000066;
}
#tickercontent
{
float: left;
width: 461px;
height: 21px;
padding: 0px;
}
ul#news
{
margin: 0px;
height: 21px;
padding: 0px 0px 0px 0px;
}
ul#news li
{
list-style: none;
font-family: georgia;
font-size: 14px;
font-weight: bold;
color: #004400;
margin: 0px;
padding: 0px 0px 0px 10px;
}
ul#news li a:link, ul#news li a:hover
{
color: #004400;
text-decoration: none;
}
#contentwindow
{
float: left;
width: 590px;
}
ul.tabs
{
width: 590px; /*--Set width of container--*/
height: 23px; /*--Set height of tabs--*/
margin: 0px;
padding: 0px;
float: left;
list-style: none;
border-bottom: 2px solid #000066; /*--Set line at bottom of ul--*/
}
ul.tabs li
{
float: left;
margin-right: 1px; /*adjusts gap between tabs*/
height: 23px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 23px; /*--Vertically aligns the text within the tab--*/
margin-bottom: -2px;
background: #000066;
border-color: #000066;
border-style: solid;
border: 2px;
}
ul.tabs li a
{
text-decoration: none;
color: #FFFFFF;
font-family: georgia;
font-size: 14px;
display: block;
padding: 0 20px;
}
ul.tabs li.active a
{
color:#000000;
border-color: #000066;
border-style: solid;
border: 2px;
}
ul.tabs li a:hover
{
background-color: #330099;
border: 0px;
}
ul.tabs li.active, ul.tabs li.active a:hover /*--Makes sure that the active tab does not listen to the hover properties--*/
{
color: #000000;
background: #FFFFFF;
border-color: #000066;
border-style: solid;
border: 2px 2px 2px 0px;
border-bottom: 2px solid #FFFFFF; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
border: 2px solid #000066;
border-top: none;
overflow: hidden;
clear: both;
float: left;
width: 586px;
height: 346px;
background: #FFFFFF;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
#testsmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}
#teststopmenu
{
width: 150px;
height: 23px;
background-color: #000066;
}
#testsmainmenu
{
float: left;
width: 146px;
height: 70px;
border-style: solid;
border-width: 2px;
border-color: #000066;
}
#testsmainmenu ul
{
float: left;
margin-top: 2px;
margin-bottom: 2px;
width: 146px;
padding: 0px;
}
#testsmainmenu ul li
{
font-family: georgia;
font-size: 0.8em;
list-style-image: url('test.png');
margin-left: 30px;
padding: 0px;
text-align: left;
}
#testsmainmenu ul li a
{
padding: 0px;
text-decoration: none;
text-align: left;
color: black;
}
#testsmainmenu ul li a:hover
{
background-color: white;
color: #000066;
}
#downloadsmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}
#downloadstopmenu
{
width: 150px;
height: 23px;
background-color: #000066;
}
#downloadsmainmenu
{
float: left;
width: 146px;
height: 70px;
border-style: solid;
border-width: 2px;
border-color: #000066;
}
#downloadsmainmenu ul
{
float: left;
margin-top: 2px;
margin-bottom: 2px;
width: 146px;
padding: 0px;
}
#downloadsmainmenu ul li
{
font-family: georgia;
font-size: 0.8em;
list-style-image: url('download.png');
margin-left: 30px;
padding: 0px;
text-align: left;
}
#downloadsmainmenu ul li a
{
padding: 0px 0px 0px 5px;
text-decoration: none;
text-align: left;
color: black;
}
#downloadsmainmenu ul li a:hover
{
background-color: white;
color: #000066;
}
#worksheetsmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}
#worksheetstopmenu
{
width: 150px;
height: 23px;
background-color: #000066;
}
#worksheetsmainmenu
{
float: left;
width: 146px;
height: 70px;
border-style: solid;
border-width: 2px;
border-color: #000066;
}
#worksheetsmainmenu ul
{
float: left;
margin-top: 2px;
margin-bottom: 2px;
width: 146px;
padding: 0px;
}
#worksheetsmainmenu ul li
{
font-family: georgia;
font-size: 0.8em;
list-style-image: url('worksheet.png');
margin-left: 30px;
padding: 0px;
text-align: left;
}
#worksheetsmainmenu ul li a
{
padding: 0px 0px 0px 5px;
text-decoration: none;
text-align: left;
color: black;
}
#worksheetsmainmenu ul li a:hover
{
background-color: white;
color: #000066;
}
#weblinksmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}
#weblinkstopmenu
{
width: 150px;
height: 23px;
background-color: #000066;
}
#weblinksmainmenu
{
float: left;
width: 146px;
height: 70px;
border-style: solid;
border-width: 2px;
border-color: #000066;
}
#weblinksmainmenu ul
{
float: left;
margin-top: 2px;
margin-bottom: 2px;
width: 146px;
padding: 0px;
}
#weblinksmainmenu ul li
{
font-family: georgia;
font-size: 0.8em;
list-style-image: url('links.png');
margin-left: 30px;
padding: 0px;
text-align: left;
}
#weblinksmainmenu ul li a
{
padding: 0px 0px 0px 5px;
text-decoration: none;
text-align: left;
color: black;
}
#weblinksmainmenu ul li a:hover
{
background-color: white;
color: #000066;
}
p
{
text-align: center;
font-family: georgia;
font-size: 1em;
color: #FFFFFF;
padding-top: 2px;
}
p.a
{
text-align: center;
font-family: georgia;
font-size: 1em;
color: #FFFFFF;
padding-top: 0px;
}
p.b
{
text-align: center;
font-family: georgia;
font-size: 1em;
color: #000000;
padding-top: 0px;
}
p.c
{
text-align: center;
font-family: georgia;
font-size: 8px;
color: #000000;
padding-top: 0px;
}
</style>
</head>
<body>
<div id="topmargin"></div>
<div id="banner"></div>
<div id="horizontalmenu">
<ul>
<li> <a href="#" id="number">Number and Algebra</a></li>
<li><a href="url">Geometry and Measures</a></li>
<li><a href="url">Statistics - Data Handling</a></li>
</ul>
</div>
<div id="mainpage">
<div id="one">
<div id="verticalmenu">
<div id="verticaltopmenu"><p>Main Menu</p></div>
<div id="verticalmainmenu">
<ul>
<li><a href="url">Angles</a></li>
<li><a href="url">Properties of Shapes</a></li>
<li><a href="url">Circle Theorems</a></li>
<li><a href="url">Geometry of Cuboids</a></li>
<li><a href="url">2d and 3d Shapes</a></li>
<li><a href="url">Area</a></li>
<li><a href="url">Perimeter</a></li>
<li><a href="url">Prisms</a></li>
<li><a href="url">Surface Area</a></li>
<li><a href="url">Using Pi</a></li>
<li><a href="url">Volumes</a></li>
<li><a href="url">Transformations</a></li>
<li><a href="url">Scale</a></li>
<li><a href="url">Coordinates</a></li>
<li><a href="url">Vectors</a></li>
<li><a href="url">Bearings</a></li>
</ul>
</div>
</div>
</div>
<div id="two">
<div id="tickercontainer">
<div id="tickersidetitle"><p class="a">Brainteasers</p></div>
<div id="tickercontent">
<ul id="news">
<li>How many Degrees in a Triangle?</li>
<li><a href="javascript:poptastic('brainteasersolution.htm');">Algebra - What is 4x = 20 - X? Click for answer</a></li>
<li><a href="http://www.bushcottages.co.uk/1.htm">What is the most common class Called?</a></li>
</ul>
</div>
</div>
<div id="contentwindow">
<ul class="tabs">
<li><a href="#tab1">Acute</a></li>
<li><a href="#tab2">Obtuse</a></li>
<li><a href="#tab1">Reflex</a></li>
<li><a href="#tab2">Vertex</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p class="b">hello</p>
<p class="c">Page Created by P.Devlin</p>
</div>
<div id="tab2" class="tab_content">
<p class="b">well done</p>
<p class="c">Page Created by P.Devlin</p>
</div>
</div></div>
</div>
<div id="three">
<div id="testsmenu">
<div id="teststopmenu"><p>Online Tests</p></div>
<div id="testsmainmenu">
<ul>
<li><a href="url">Linear Graphs</a></li>
<li><a href="url">Equations</a></li>
<li><a href="url">Averages</a></li>
<li><a href="url">Algebra</a></li>
</ul>
</div>
</div>
<div id="downloadsmenu">
<div id="downloadstopmenu"><p>Downloads</p></div>
<div id="downloadsmainmenu">
<ul>
<li><a href="url">Linear Graphs</a></li>
<li><a href="url">Equations</a></li>
<li><a href="url">Algebra</a></li>
<li><a href="url">Tests</a></li>
</ul>
</div>
</div>
<div id="worksheetsmenu">
<div id="worksheetstopmenu"><p>Worksheets</p></div>
<div id="worksheetsmainmenu">
<ul>
<li><a href="url">Linear Graphs</a></li>
<li><a href="url">Equations</a></li>
<li><a href="url">Algebra</a></li>
<li><a href="url">Tests</a></li>
</ul>
</div>
</div>
<div id="weblinksmenu">
<div id="weblinkstopmenu"><p>Web Links</p></div>
<div id="weblinksmainmenu">
<ul>
<li><a href="url">Linear Graphs</a></li>
<li><a href="url">Equations</a></li>
<li><a href="url">Algebra</a></li>
<li><a href="url">Tests</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Many thank to you all for your help so far. Peter Hey all, I'm trying to make it so that when a user clicks on a radio button, the image that is related to the radio button is displayed next to it (without reloading the page). At the moment all it shows is the image related to the currently saved option, which I'd like to keep on page load. Is this possible? If so, I'd appriciate any help. Here is my code for the radio buttons. Thanks. Code: <tr valign="top">
<td id="community-legal-services-logo-selection">
<p><label><?php _e('<strong class="table_tags">Display the following Community Legal Services logo:</strong>'); ?></p>
<p><label for="cls-mono">
<input class="" id="cls-mono" name="cls_logo" type="radio" value="cls_mono" <?php if($general_options['cls_logo'] === 'cls_mono'){ echo 'checked="checked"'; } ?> />
<?php _e('Mono'); ?></label>
</p>
<p><label for="cls-color">
<input class="" id="cls-color" name="cls_logo" type="radio" value="cls_color" <?php if($general_options['cls_logo'] === 'cls_color'){ echo 'checked="checked"'; } ?> />
<?php _e('Colour'); ?></label>
</p>
<p><label for="cls-none">
<input class="" id="cls-none" name="cls_logo" type="radio" value="cls_none" <?php if($general_options['cls_logo'] === 'cls_none'){ echo 'checked="checked"'; } ?> />
<?php _e('None'); ?></label>
</p>
<p>
<label><?php _e('<span class="table_tags">Link to the Community Legal Services website<span>'); ?></label>
</p>
<p>
<input class="large_input_box" id="cls-link" name="cls_link" type="text" value="<?php echo $general_options['cls_link']; ?>" /></label>
</p>
</td>
<?php if($general_options['cls_logo'] && $general_options['cls_logo'] !== 'cls_none'){ ?>
<td>
<img id="community-legal-services-logo-preview" class="image-preview" src="<?php echo $general_options['cls_logo_path']?>" />
</td>
<?php } ?>
</tr>
Hey there. I'm creating my web-site now. I'm planing to have some slide/object change by itself. I know Java Script perform this task. I have get the code and apply to the image I want. It works. My idea is each of my image upper left corner have the representative number of the slide. When the slide1 go to slide 2 automatically, the number will change colour from 1 to 2. When the user click the number, the slide will change according to the number. Let said I have 3 slide. Each slide and have no 1 ,2 ,3 move forward, move backward icon on the upper left corner. I have slide1 ,slide2, slide3 change by itself within 2.5 second. When the user go thru slide 1, slide 2 and till slide3, user find out he/she interested on slide 1 and by clicking 1 on the upper left corner, the slide will change back to slide 1. Something like showing on the home page at www.easyjet.com.EN or http://www.thomascook.com/ . Both home page show a slide. This is what exactly I want. I learn HTML code before but not Java Script. I have borrow many Java Script reference book. but no idea how to inside the number on the upper left corner on each slide and how the number work accordingly with the slide. So sorry if you can't understand what I was talking about. But, anyone who understand me or have any idea how can I mortify the Java script to what I want. Just answer or email me to trista_soo@yahoo.com or facebook me on sym107@hotmail.com. Thanks for your time and efforts. Your help I really appreciate. Cheers! Hello I am setting up a Javascript function in a page called functions.php function onAddBookmarkPressed() { <? mail("XXXXXXX", "Mail","Bookmark"); ?> } And calling it from another place within the page <div class="barstepimg"><img src="http://staggan.com/my_dir/images/progress_bar/fb_buttons/add_bookmark.gif" onclick="onAddBookmarkPressed();"/></div> I include functions.php in my index.php page... When I run the index.php page the function above runs and emails me... Any idea why? I am trying to run javascript within Iframe and its not running. (The bigger pictu The final target is to do a file upload without refreshing the page, and the original code is using the iframe as the target of the form, and the return from the server is a javascript code that should update some status field on the page. However the code return from the server is not running, so I just paste it in the iframe and it is still not running. ) Code: Content-type: text/html\n\n
<html>
<script type="text/javascript">
alert("this is running")
</script>
<iframe id="upload_target" name="upload_target" src="#" style="width:100;height:100;border:0px solid #fff;">
<script type="text/javascript">
alert("this not running")
</script>
</iframe>
</html>
Hello Firstly, this is the full pastebin code of my admin page because i failed adding full code here correctly: http://pastebin.com/tQAaQjYC and the screenshot of the slide manager page: http://img36.imageshack.us/img36/4830/slidemanager.jpg Well, I have a Slide Manager as an admin menu page in Wordpress. When i click "Add new slide" button, as you see in the screenshot above, it adds a new "slide field" in which that dropdown list shows all titles of posts. (Ignore other parts as they work as expected) What i would like to do is, when i choose a post title, the text box which is next to dropdown to be populated automatically by the post's url adress. I want it to be worked for every "slide field" added via "Add new slide" button. I actually made it work that way outside the foreach: PHP Code: <script language="JavaScript"><!-- function onChange() { var Current = document.myform.link.selectedIndex; document.myform.currentText3.value = document.myform.link.options[Current].value; } //--> </script> <select name="link" onChange="onChange(this.value);"> <?php if($_POST['action'] == save ) { $selected = "selected"; } else{ $selected = ""; } echo '<option value="">...... Choose One ...... </option>'; $args = array( 'post_type' => 'post', 'nopaging' => true ); $the_query = new WP_Query( $args ); while ( $the_query->have_posts() ) : $the_query->the_post(); echo '<option '.$selected.' value="'.get_permalink( $post->ID ).'">'; the_title(); echo '</option>'; endwhile; ?> </select> <input name="currentText3" type="text" value=""> But when i add this after the opening code of foreach, i.e: PHP Code: <?php foreach($nivoslides as $k => $slide) : ?> Each slide field shows the dropdown and text box properly as you see in screenshot BUT none of them work. I tried to add brackets but it didn't work either: Code: <select name="link[]" onChange="onChange(this.value);"> I guess it's the javascript code that should be edited or entirely changed but i have no idea how to do it. I would be grateful for any help. Thanks in advance. Hi, I have just started to learn Javascript which when loaded into a safari web browser of Firefox browser just simply displays the code. I am currently using a MacBook Leopard operating system I have saved the code (corrected for mistakes, many many times) to my desktop Run my usual browser safari (and tried same with Firefox) loaded the file and all I get is a copy of the code displayed in the browser window. Javascript is enabled for both Please can you suggest some options for me to try and get the code working. All I am doing in this example is copied from a book to turn the background colour of the browser RED Thanks Tom I was debugging my code looking for a loop. So in the process I added a confirm request and if the user clicked cancel I coded location.replace("Kill.html"). Problem was that the JAVASCRIPT continued to run until either it finished or I used the Task Manager to end the session. There3 was a small difference in browsers: Firefox put up the new screen while continuing to run the JAVASCRIPT while IE didn't put up the new screen until after the JAVASCRIPT was finished. I could tell the JAVASCRIPT was still running because the confirm messages kept popping up.
Hi all, I sincerely apologise for the noob question. I have search and searched for an answer but to no avail, so I hope someone on here can help. I'm trying to get a fisheye verticle menu working. I've found somethin which fits the requirement he http://zendold.lojcomm.com.br/ifisheye/ and tried to make it work. It just doesn't. I've tried different versions of mootools etc but I think I'm missing something really stupidky simple. I'd really appreciate it if someone could have a look at my temp page (http://www.parkerbs.com/home1.htm) and point me in the right direction. Many thanks in advance. Paul Is it possible to set onmouseover only in js file without running the function on html code? P.S. I found a coding thread here but I don't understand it and it's too old (2005 archive). Thank you very much Hi guys, I am trying to insert the following call into my page; Code: <script type="text/javascript" defer="true">
$('#query').autocomplete({
serviceUrl:'service/autocomplete.ashx',
minChars:1,
delimiter: /(,|;)\s*/, // regex or character
maxHeight:400,
width:250,
deferRequestBy: 0, //miliseconds
params: { country:'Yes' }, //aditional parameters
// local autosugest options:
lookup: ['January', 'February', 'March', 'April', 'May'] //local lookup values
});
</script>
It works fine in all browsers except ie(6,7,8) Code: Internet Explorer can not open website. Operation Aborted. I understand it is caused by the jquery autocomplete function loading before the page / DOM has fully loaded. I tried adding Defer="true" to the script however this doesn't seem to work. Could someone please tell me what i must add to the script so that it loads after the dom has fully loaded? Thanks guys George Hello I am relatively new to java script. The code I have behaves differently when I debug it and when I just run is straight. There are three functions that one another in a particular sequence. When I debug it they get called in the correct sequence but otherwise they get called in a constant but random pattern. I know I am missing basic understanding of javascript Can some body help please. Thanks in advance Output when I open the page in a browser without debug. Code: Firebug's log limit has been reached. 0 entries not shown. Preferences
readJSON2
There are no child objects
inside parseJSON:
There are no child objects
GET http://10.208.137.92/js/v1/External/JSON/sample.json
GET http://10.208.137.92/js/v1/External/JSON/sample.json
304 Not Modified
64ms
jquery-1.6.2.js (line 7869)
readJSON1
alerts
[Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}]
Console Output when I debug Code: Firebug's log limit has been reached. 0 entries not shown. Preferences
Firebug's log limit has been reached. 0 entries not shown. Preferences
GET http://10.208.137.92/js/v1/External/JSON/sample.json
GET http://10.208.137.92/js/v1/External/JSON/sample.json
304 Not Modified
111ms
jquery-1.6.2.js (line 7869)
readJSON1
alerts
[Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}]
readJSON2
alerts
[Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}]
inside parseJSON:
alerts
[Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}]
Javascript code Code: function populateSearchResults(alert){
var listOfAlertsDiv = document.getElementById('listOfAlertsDiv');
//var x = document.getElementById('rowTable').insertRow(0);
//TODO: Replace the above code to remove Table declaration in above HTML. Instead use JQuery scrollbar and populate scroll area with the content below.
// Create a new table. Add a row to it and then add the below cell to it.
//TODO: Create a div
// Create a table
// Add the above created div to div1
var rowDiv = document.createElement('div');
rowDiv.className="scroll-content-item";
var rowContentTable = document.createElement('table');
rowContentTable.width="100%";
rowContentTable.border="0";
rowContentTable.cellpadding="0";
rowContentTable.cellspacing="0";
rowContentTable.summary="Row Content Table";
var rowContentTableFirstRow = rowContentTable.insertRow(0);
var checkBoxCell = rowContentTableFirstRow.insertCell(0);
checkBoxCell.width = "1%";
//x.valign = "top"
//var checkBoxCell = x.insertCell(0);
//checkBoxCell.width = "1%";
var checkBox = document.createElement('input');
checkBox.type = "checkbox";
checkBox.name = "checbox";
checkBox.value = "true";
checkBoxCell.appendChild(checkBox);
var contentCell = rowContentTableFirstRow.insertCell(1);
contentCell.width = "99%";
var contentTable = document.createElement('table');
contentTable.style.border = '1';
contentTable.cellPadding = '0';
contentTable.cellSpacing = '0';
contentTable.width = "100%"
var titleRow = contentTable.insertRow(0);
var titleCell = titleRow.insertCell(0);
titleCell.width = "70%";
titleCell.id = "alertTile"
var title = document.createElement('a');
title.href = "http://www.google.com";
title.id = "AlertResultNameLink";
titleText = document.createTextNode(alert.name);
title.appendChild(titleText);
titleCell.appendChild(title);
var moveToFolderCell = titleRow.insertCell(1);
moveToFolderCell.width = "5%";
moveToFolderCell.id = "moveToFolder";
var moveToFolderCellImage = document.createElement('img');
moveToFolderCellImage.alt = "Move To Folder";
//TODO: Change the hardcoding of the image location to symbolic links
moveToFolderCellImage.src = "/js/v1/Alerts/images/co_documentFooterArrowFirst_inactive.png"
moveToFolderCellImage.border = 0;
moveToFolderCellImage.className = "moveToFolder";
moveToFolderCell.appendChild(moveToFolderCellImage);
var editAlertCell = titleRow.insertCell(2);
editAlertCell.width = "10%";
var editAlertButton = document.createElement('a');
editAlertButton.href = "http://www.google.com";
editAlertButton.className = "EditAlertButton";
var editAlertButtonImage = document.createElement('img');
editAlertButtonImage.alt = "Edit Alert";
//TODO: Change the hardcoding of the image location to symbolic links
editAlertButtonImage.src = "/js/v1/Alerts/images/co_overlayBox_closebutton.png";
editAlertButtonImage.border = 0;
editAlertButtonImage.className = "EditAlert";
editAlertButton.appendChild(editAlertButtonImage);
var editAlertButtonText = document.createTextNode(' Edit Alert ');
editAlertButton.appendChild(editAlertButtonText);
//editAlertButton.innerHTML = " Edit Alert "
editAlertCell.appendChild(editAlertButton);
var alertMetaDataRow = contentTable.insertRow(1);
var alertMetaDataCell = alertMetaDataRow.insertCell(0);
var alertMetaDataTable = document.createElement('table');
alertMetaDataTable.width = "100%"
var alertMetaDataTableRow = alertMetaDataTable.insertRow(0);
alertMetaDataTableRow.width = "100%"
var lastUpdateCell = alertMetaDataTableRow.insertCell(0);
lastUpdateCell.width = "25%"
//var lastUpdateCellText = document.createTextNode("Last Update:");
var lastUpdateCellText = document.createTextNode("Last Update: " +alert.lastRunDate);
lastUpdateCell.appendChild(lastUpdateCellText);
var nextUpdateCell = alertMetaDataTableRow.insertCell(1);
nextUpdateCell.width = "25%"
var nextUpdateCellText = document.createTextNode("Next Update:");
nextUpdateCell.appendChild(nextUpdateCellText);
var clientIdCell = alertMetaDataTableRow.insertCell(2);
clientIdCell.width = "50%"
var clientIdCellText = document.createTextNode("Client ID: ")
clientIdCell.appendChild(clientIdCellText);
alertMetaDataCell.appendChild(alertMetaDataTable);
var descriptionRow = contentTable.insertRow(2);
var descriptionCell = descriptionRow.insertCell(0);
var descriptionTitle = document.createTextNode("Description: ");
descriptionCell.appendChild(descriptionTitle);
var activeDeliveryRow = contentTable.insertRow(3);
var activeDeliveryCell = activeDeliveryRow.insertCell(0);
var activeDeliveryTitle = document.createTextNode("Active Delivery");
activeDeliveryCell.appendChild(activeDeliveryTitle);
var rss1 = document.createElement('img');
rss1.style.border = "0";
rss1.src = "images/rssIcon.png";
rss1.hspace = "4";
activeDeliveryCell.appendChild(rss1);
var rss2 = document.createElement('img');
rss2.style.border = "0";
rss2.src = "images/rssIcon.png";
rss2.hspace = "4";
activeDeliveryCell.appendChild(rss2);
var rss3 = document.createElement('img');
rss3.style.border = "0";
rss3.src = "images/rssIcon.png";
rss3.hspace = "4";
activeDeliveryCell.appendChild(rss3);
var rss4 = document.createElement('img');
rss4.style.border = "0";
rss4.src = "images/rssIcon.png";
rss4.hspace = "4";
activeDeliveryCell.appendChild(rss4);
contentCell.appendChild(contentTable);
rowDiv.appendChild(rowContentTable);
listOfAlertsDiv.appendChild(rowDiv);
contentCell.appendChild(document.createElement('br'));
contentCell.appendChild(document.createElement('hr'));
contentCell.appendChild(document.createElement('br'));
}
function readJSON(){
var json = "";
//$(document).ready(function(){
$.getJSON("/js/v1/External/JSON/sample.json", function(data){
json = data;
console.log("readJSON1");
console.dir(data);
});
//});
console.log("readJSON2");
console.dir(json);
return json;
}
function parseJSON(){
var alerts = [];
var json = readJSON();
console.log("inside parseJSON:");
console.dir(json);
//TODO: Check if JSON is not null.
for(var i in json.alerts){
var createdDate = new Date(json.alerts[i].createdDate);
var alert = new Cobalt.Alerts.DataTypes.Alert();
var AlertPartnerDefinedInfos = [];
alert.name = json.alerts[i].name;
alert.lastRunDate = $.format.date(new Date(json.alerts[i].lastRunDate),"MM/dd/yyyy hh:mma");
alerts.push(alert);
}
//console.log("fillRows: " +alerts.length);
return alerts;
}
$(document).ready(fillRows=function(){
var alerts = parseJSON();
//console.log("fillRows: " +alerts.length);
for(i=0;i<alerts.length;i++){
var alert = alerts[i];
populateSearchResults(alert);
}
});
Code: <html>
<head>
<title>lightning generator</title>
</head>
<body>
<canvas id='world' width='500' height='500' style='border: 1px solid black; padding:0;'></canvas>
<script type="text/javascript">
var world = {
}
;
world.ground = {
}
;
world.ground.slice = [];
var ctx = document.getElementById( 'world' ).getContext( '2d' );
world.ground.make = function( GArray ){
ctx.fillStyle = '#000';
for ( var i = 0; i <= GArray.length; i ++ ){
if ( GArray[i + 1] === null ){
GArray[i + 1] = GArray[i];
}
world.ground.slice[i] = GArray[i];
ctx.moveTo( i, - 500 );
ctx.lineTo( i, GArray[i] );
}
};
world.ground.make( [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29] );
</script>
</body>
</html>
it should make a simple area at the bottom of the canvas thats black., a incling with a slope of 2 and than a straight line. .....dots ar unfiled..... ..._____________ ../ ./filled area... / Hi all I have created a website http://www.clickmunki.com with a jQuery vertical panel that collapses and expands in the top left of each page. In my offline code (which I have not yet uploaded to the live site) I have set the panels to display by default so the user automatically has the information available to them on each page as they scroll through the site. My problem is that the panels are not behaving independently of each other. When one panel is collapsed then they all collapse instead of just the one that the user has clicked. This is my first attempt at using javascript and jQuery and I am not sure how to resolve this. Any assistance would be very much appreciated. This is my js: Code: $(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast"); <! panel is for the panel on the home page -->
$(this).toggleClass("active");
return false;
});
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel2").toggle("fast"); <! panel2 is for the panels in the body of the site -->
$(this).toggleClass("active");
return false;
});
Kind regards Anne Ok, for starters I'm not a beginner and my website is running under standards mode (not quirks). When my site loads I perform: Code: window.location.replace(window.location.href + "#encodedstuff"); The effect being that no new history points are created and the very first history point now includes some encoded info in the hash. When the user closes and relaunches IE8 and then chooses "reopen last browsing session" I expect IE to make the request for the page including the hash value. It does NOT! It simply makes the request for the URL without the hash (and then adds the hash as the next history point). I need help figuring out why and if there is a way to accomplish this without needing to add a parameter to the location get request (which will cause my site to reload upon launch if this parameter is not already set... I don't want it doing that). Please note that the browser DOES behave if I copy the new URL, including the hash value and paste it into a new tab (closing the old tab). When I relaunch IE8 and reopen the previous session it does make the request with hash value and my site is able to get the required info out of the hash. It only fails for a tab that initially did not have a hash and my script performs the above location.replace. Solving this is critical for my application, so I seriously appreciate any help! Hi Guys, A client has given me some code but i need to add some code to it so it loads a URL along with the rest of the code. Below is the javascript code i need to work with, i know its to do with Google Tracking (Dart) but i dont understand it as I've never done JavaScript befo Code: <script type="text/javascript">
function dart_tracking(callback) {
// Google Conversion Tracking
var img = new Image();
img.src="
https://www.googleadservices.com/pagead/conversion/REMOVED/?value=0&label=REMOVED&guid=ON&script=0
";
var img2 = new Image();
img2.src="
https://www.googleadservices.com/pagead/conversion/REMOVED/?value=0&label=REMOVED&guid=ON&script=0
";
_gaq.push(['_trackEvent', 'subscribeButton', 'clicked']);
if (typeof callback != "undefined") {
setTimeout(callback, 1500);
}
}
</script>
Now the above code loads up when a subscribe button is clicked on my clients webpage, now how do i go about adding code to this so lets say http://www.Google.co.uk is loaded too? Any help would be great. Thank you! |
|||||||