Process one function and then process another one automatically

Question

I'm stuck here

<img src="img/server1.png" class="img-thumbnail servidor" data-url="https://google.com/"/>  

<div id="servidores-player">

  <iframe src="" id="player"></iframe>
  <div class="servidor-info">
    <div class="container">HD</div>

JS 2ND UPDATED:

$(document).ready(function () {
    $(".servidor").on("click",function()  {
        $('.container > #servidores-bg').hide();
        $('#servidores-player').show();
        if ($("#player").length==0)
            $("#servidores-player").append($("<iframe/>",{id:"player‌",src:$(this‌).data‌("url")); 
        else
            $("player").attr("src",$(this‌).data("url")) });
        $('#servidores-player .servidor-info').show();
        var distance = $('#servidores-player iframe').offset().top
        $('html,body').animate({scrollTop:distance},1500);

    });
});


function mostrarServidores() {
    if (document.getElementById('inserido-utilizador')) {

        if (document.getElementById('inserido-utilizador').style.display == 'none') {
            document.getElementById('inserido-utilizador').style.display = 'block';
            document.getElementById('servidores-bg').style.display = 'none';
        }
        else {
            document.getElementById('inserido-utilizador').style.display = 'none';
            document.getElementById('servidores-bg').style.display = 'block';
        }
    }

}

Can someone help me to just create de <iframe> tag when I click in the image? And jump to iframe element before it loads?

I already updated the codeuntil the part that i'm getting error

Welcome to SO. Please update your question with expected output and actual output. It is not clear what you want to happen — mplungjan, Aug 23 '16 at 13:31
Yes its clear, i would like to create the tags only when I click in server images and open the link that u put on: onlick=""... — thecreator, Aug 23 '16 at 13:35
but... I would like to get the source from `onClick='` is it possible? — thecreator, Aug 23 '16 at 13:40
Possible duplicate of [Creating an iframe with given HTML dynamically](http://stackoverflow.com/questions/10418644/creating-an-iframe-with-given-html-dynamically) — Aniket Sinha, Aug 23 '16 at 13:41
@AniketSinha it's different because I want to create the tag only when the user clicks on the image.. — thecreator, Aug 23 '16 at 13:44
Wrap up the code in a function , and call the function when user clicks the image. With slight modification, you can achieve it w/o even using jQuery. — Aniket Sinha, Aug 23 '16 at 13:48
@mplungjan it's not working, when i insert it, the rest of the script doesn't work — thecreator, Aug 23 '16 at 14:09
stills not working, could u come by teamviewer because its better to explain to you :/ @mplungjan — thecreator, Aug 23 '16 at 14:20
@mplungjan `main.js:5 Uncaught SyntaxError: Invalid or unexpected token VM22764 filme.php:263 Uncaught ReferenceError: mostrarServidores is not defined` — thecreator, Aug 23 '16 at 14:21
Please note the code from the comment had invisible characters added to it — mplungjan, Aug 23 '16 at 14:57

mplungjan · Answer 1 · 2016-08-23T15:00:48.960

you need to replace the iframe if the content is not from the same origin as the page you are on.
some URLs like google and stackexchange cannot be loaded into an iframe
Use data- attribute for the URL

$(function() {
  $(".servidor").on("click", function() {
    $('#servidores-bg').hide(); // IDs must be unique
    $("#player").replaceWith(
      $("<iframe/>", {
        id: "player",
        src: $(this).data("url")
      })
    );
    $('#servidores-player .servidor-info').show();
    var distance = $('#servidores-player iframe').offset().top;
    $('html,body').animate({
      scrollTop: distance
    }, 1500);
    $('#servidores-player').show();
  });
});


function mostrarServidores() {
  var $inser = $('#inserido-utilizador');
  if ($inser.length) {
    $inser.toggle();
    $('#servidores-bg').toggle($inser.is(":visible"));
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="img/server1.png" class="img-thumbnail servidor" data-url="http://api.jquery.com/replacewith/" />
<img src="img/server1.png" class="img-thumbnail servidor" data-url="http://api.jquery.com/toggle/" />

<div id="servidores-player">
  <iframe src="" id="player"></iframe>
  <div class="servidor-info">
    <div class="container">
      HD
    </div>
  </div>
</div>

score 0 · Answer 2 · edited Aug 23 '16 at 14:46

0

If you want to set the iframe src use:

$('#player').attr('src', $(this‌).data('url'));

And to scroll to it:

$('html, body').animate({scrollTop: $("#player").offset().top}, 2000);

-

edited Aug 23 '16 at 14:46

mplungjan

169,008
28
173
236

answered Aug 23 '16 at 14:26

kjdion84

9,552
8
60
87

I have already posted that piece of code twice in the comments – mplungjan Aug 23 '16 at 14:26
So you just downvote people who give the correct answer rather than create your own answer which wouldn't be buried in comments people might not have read? – kjdion84 Aug 23 '16 at 14:32
There is no answer yet because he has not yet asked the correct question. Your answer is not answering his issue which is way more complex than setting the src. For example you cannot set the src more than once if the url is not same origin as the page with the iframe. I have not had time to write a proper answer. – mplungjan Aug 23 '16 at 14:37
If that is the case then he can do so by replacing the entire iframe code via html() and then scroll to it. http://stackoverflow.com/questions/2930315/changing-iframe-source-with-jquery – kjdion84 Aug 23 '16 at 14:40
And your scroll code is identical to what he already had. So the downvote is for not sufficiently answering the question and not adding anything new to the discussion- I can remove the down vote but that is the reason – mplungjan Aug 23 '16 at 14:44

Process one function and then process another one automatically

2 Answers2