JavaScript - Javascript Dynamically Show Div And Populate Contained Iframe On Button Click?

I have a script which creates an element of iframe. I have a button which refreshes the iframe link.

I need to do something to change a variable in the iframe src on every click of the button.

I'll explain the real issue. I have a list of games I have with random name like,

boomer.swf, kingdom.swf, balloon.swf and so on.

So I somehow made this,

Code:

var r_text = new Array ();
r_text[0] = "boomer";
r_text[1] = "kingdom";
r_text[2] = "balloon";

var i = Math.floor(3*Math.random())
var gamedrome = { game: ""+r_text[i]+""};

Now I have a .js file which creates iframe element
Code:

function embed_game(params, options)
{
var data = [];
for(var i in params)
{
data.push(i + "=" + encodeURIComponent(params[i]));
}
data = data.join("&");
var frame = document.createElement("iframe");
frame.src = "http://website.com/embed/game.html?"+ data;
frame.style.width="100%";
frame.style.height="100%";
frame.style.border = "0";
frame.frameBorder = "0";
frame.id="newroom";
....

and another small script to refresh the inner iframe and not the page to change game.

Code:

<script type="text/javascript">
function Reload () {
var f = document.getElementById('newroom');
f.src = f.src;
}
</script>

It all works fine until the game is loaded, but the problem is that if once the game is loaded in site, the iframe source is already set and my button keeps loading the same game. I need to randomize it on every click. Please help me out.

Hi,

I'm very new to coding Javascript, so have no idea what I'm doing, so sorry

What I'm trying to do is, on my Wordpress Blog I have a button/Image: Code:

src="http://Mysite.com/Images/Button.png"

I would like for when a user Clicks this Image/button, 2 things to happen - 1. For my Content Locker to pop up, I believe that i already have the correct code for that?:

Code:

onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://MYCONTENTLOCKER.com/guid?:1234567890')

For this content locker to trigger, The whole action needs to have a ID e.g. 'ID="button1'?

And 2. For a timer to start for say 30 Seconds.

When that timer ends, i would like the original button/image to be replaced with a different button/image. And when that New button is clicked i would like a text string to appear below the button - saying something e.g. 'You've completed this part'

I know that this is a lot to ask, and I will be so very grateful if someone helps me out here!

Thanks!
Harry.

I want to show an hourglass instead of a mouse pointer on click of a button.
I'm having both client and server side validations on the button click event.
I have written the code for hourglass in the javascript function along with the validations.
Now, on click of the button the hourglass gets displayed after 3-4 seconds and not immediately. According to me, the hourglass is getting displayed after the javascript function(client side validation) is executed and before server side validation begins.
Is there any way to display the hourglass without delays ?
Kindly let me know if there is any fix for eliminating this delay. I hope my question is clear. Please let me know if i'm wrong somewhere as i'm new to javascript programming.

Thanks in advance.
zizou.

I'm using Kevin Roth's Cross-Browser Rich Text Editor JS component. Below is a demo.php script showing how it's created in JS.

I got it working fine but I now want to dynamically add new text to the component in my php script. I know how to setup the php part to initiate the new text load event but I can't figure out how to actually get the new text into the RTE component inside a JS function.

I tried this JS function but it didn't load in the new text in:

PHP Code:
function pre_canned_message_click()
{
  rte1.html = 'New string';
} 


In the demo.php below the RTE component is loaded the same way rte1.html = but in the JS function it doesn't work. I don't know what I'm missing here.

Thanks for any help...

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php

echo var_dump($_POST);

?>
<!--
// Cross-Browser Rich Text Editor
// Written by Kevin Roth (http://www.kevinroth.com/rte/)
// License: http://creativecommons.org/licenses/by/2.5/
//-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Cross-Browser Rich Text Editor (RTE)</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="keywords" content="cross-browser rich text editor, rte, textarea, htmlarea, content management, cms, blog, internet explorer, firefox, safari, opera, netscape, konqueror" />
    <meta name="description" content="The cross-browser rich-text editor (RTE) is based on the designMode() functionality introduced in Internet Explorer 5, and implemented in Mozilla 1.3+ using the Mozilla Rich Text Editing API." />
    <meta name="author" content="Kevin Roth" />
    <meta name="ROBOTS" content="ALL" />
    <!-- html2xhtml.js written by Jacob Lee <letsgolee@lycos.co.kr> //-->
    <script language="JavaScript" type="text/javascript" src="../cbrte/html2xhtml.min.js"></script>
    <script language="JavaScript" type="text/javascript" src="../cbrte/richtext_compressed.js"></script>
</head>
<body>

<h2>Cross-Browser Rich Text Editor (RTE) Demo</h2>
<p>For more information, visit the <a href="http://www.kevinroth.com/rte/">Cross-Browser Rich Text Editor (RTE) home page</a>.</p>

<!-- START Demo Code -->
<form name="RTEDemo" action="demo.php" method="post" onsubmit="return submitForm();">
<script language="JavaScript" type="text/javascript">
<!--
function submitForm() {
    //make sure hidden and iframe values are in sync for all rtes before submitting form
    updateRTEs();
    
    return true;
}

//Usage: initRTE(imagesPath, includesPath, cssFile, genXHTML, encHTML)
initRTE("../cbrte/images/", "../cbrte/", "", true);
//-->
</script>
<noscript><p><b>Javascript must be enabled to use this form.</b></p></noscript>

<script language="JavaScript" type="text/javascript">
<!--
//build new richTextEditor
var rte1 = new richTextEditor('rte1');
<?php
//format content for preloading
if (!(isset($_POST["rte1"]))) {
    $content = "here's the " . chr(13) . "\"preloaded <b>content</b>\"";
    $content = rteSafe($content);
} else {
    //retrieve posted value
    $content = rteSafe($_POST["rte1"]);
}
?>
rte1.html = '<?=$content;?>';
//rte1.toggleSrc = false;
rte1.build();
//-->
</script>
<p><input type="submit" name="submit" value="Submit" /></p>
</form>
<?php
function rteSafe($strText) {
    //returns safe code for preloading in the RTE
    $tmpString = $strText;
    
    //convert all types of single quotes
    $tmpString = str_replace(chr(145), chr(39), $tmpString);
    $tmpString = str_replace(chr(146), chr(39), $tmpString);
    $tmpString = str_replace("'", "'", $tmpString);
    
    //convert all types of double quotes
    $tmpString = str_replace(chr(147), chr(34), $tmpString);
    $tmpString = str_replace(chr(148), chr(34), $tmpString);
//    $tmpString = str_replace("\"", "\"", $tmpString);
    
    //replace carriage returns & line feeds
    $tmpString = str_replace(chr(10), " ", $tmpString);
    $tmpString = str_replace(chr(13), " ", $tmpString);
    
    return $tmpString;
}
?>
<!-- END Demo Code -->
</body>
</html>

I have these buttons that I need to have switch accounts on and off. They work, but for some reason the words on the buttons are not changing from Activate to Deactivate...

It seems as though the button is not updating itself after success of the function. First post on here so I apologize if I am doing this wrong.
Problem code in jsbin--> http://jsbin.com/okifa3/

Code:

    $(function() {
    var activateOwner = function(u) {
      var dataString = 'oid=' + u + "&a=1";
      $.ajax({
        type: "GET",
        url: "{/literal}{$site_root_path}{literal}account/toggle-owneractive.php",
        data: dataString,
        success: function() {
          $('#spanowneractivation' + u).css('display', 'none');
          $('#message1' + u).html("Activated!").hide().fadeIn(1500, function() {
            $('#message1' + u);
          });
          $('#spanownernamelink' + u).css('display', 'inline');
          $('#' + u).val('Deactivate');
          $('#spanownernametext' + u).css('display', 'none');
          $('#' + u).removeClass('btnActivate');
          $('#' + u).addClass('btnDectivate');
          setTimeout(function() {
              $('#message1' + u).css('display', 'none');
              $('#spanowneractivation' + u).hide().fadeIn(1500);
            },
            2000
          );
        }
      });
      return false;
    };

    var deactivateOwner = function(u) {
      var dataString = 'oid=' + u + "&a=0";
      $.ajax({
        type: "GET",
        url: "{/literal}{$site_root_path}{literal}account/toggle-owneractive.php",
        data: dataString,
        success: function() {
          $('#spanowneractivation' + u).css('display', 'none');
          $('#message1' + u).html("Deactivated!").hide().fadeIn(1500, function() {
            $('#message1' + u);
          });
         $('#spanownernamelink' + u).css('display', 'none');
         $('#spanownernametext' + u).css('display', 'inline');
          $('#' + u).val = 'Activate';
          $('#' + u).removeClass('btnDeactivate');
          $('#' + u).addClass('btnActivate');
          setTimeout(function() {
              $('#message1' + u).css('display', 'none');
              $('#spanowneractivation' + u).hide().fadeIn(1500);
            },
            2000
          );
        }
      });
      return false;
    };

    $(".toggleOwnerButton").click(function() {
      if($(this).val() == 'Activate') {
        activateOwner($(this).attr("id"));
      } else {
        deactivateOwner($(this).attr("id"));
      }
    });
  });