#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    2
    Rep Power
    0

    How to make a widget (script) work in same page/window or iframe


    I'm not a programmer but understand basics of html & script. Let me explain my question: I've a website in which i want to embed a job portal widget provided by smart recruiters which works fine but when i click the link inside the widget it open up in another window, which i don't like.

    I want to make this widget run in same window without leaving my website, kindly let me know the lines to include in the widget code.

    I tried many things but failed.

    Any helps, suggestions appreciated

    thanks in advance....

    See the widget code to be embeded:
    [CODE]
    <script src="url.js" type="text/javascript">
    </script>
    <script class="job_widget" type="text/javascript" target="_self">
    widget({
    "searchField":"",
    "company_code":"ionsys",
    "bg_color_widget":"#ffffff",
    "bg_color_headers":"#969696",
    "bg_color_links":"#99ccff",
    "txt_color_headers":"#292929",
    "txt_color_job":"#3d3d3d",
    "bg_color_even_row":"#e0e0e0",
    "bg_color_odd_row":"#f7f7f7",
    "custom_css_url":"/smart_widget.css",
    "auto_width":"auto",
    "auto_height":"auto",
    "number":"on",
    "job_title":"true",
    "department":"true",
    "location":"true",
    "published_since":"true",
    "hiring_date":"true",
    "add_search":"true"
    });
    </script>
    [CODE]
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,183
    Rep Power
    184
    I had to manipulate it, a little bit, with jQuery and I had to add an onload event; but I made it work.

    Here is the end results:
    Code:
    &nbsp;
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type='text/javascript' src='https://www.smartrecruiters.com/img/script/smartWidget/smart_widget.js'></script>
    <script class="job_widget" type="text/javascript" target="_self">
    widget({
    "searchField":"",
    "company_code":"ionsys",
    "bg_color_widget":"#ffffff",
    "bg_color_headers":"#969696",
    "bg_color_links":"#99ccff",
    "txt_color_headers":"#292929",
    "txt_color_job":"#3d3d3d",
    "bg_color_even_row":"#e0e0e0",
    "bg_color_odd_row":"#f7f7f7",
    "custom_css_url":"https://www.smartrecruiters.com/img/style/smartWidget/smart_widget.css",
    "auto_width":"auto",
    "auto_height":"auto",
    "number":"on",
    "job_title":"true",
    "department":"true",
    "location":"true",
    "published_since":"true",
    "hiring_date":"true",
    "add_search":"false"
    });
    
    
    window.onload = function() {
    
     $(".srJobListJobOdd").mousedown(function(){
      document.location.href = $(this).attr("onclick").split("\"")[1].split("\"")[0];
     });
     $(".srJobListJobOdd").mouseup(function(){
      $(".srJobListJobOdd").removeAttr("onclick");
     });
     $(".srJobListJobEven").mousedown(function(){
      document.location.href = $(this).attr("onclick").split("\"")[1].split("\"")[0];
     });
     $(".srJobListJobEven").mouseup(function(){
      $(".srJobListJobEven").removeAttr("onclick");
     });
    
    }
    
    </script>
    Oops, was re-reading your post and seen..., that I actually missed, what you were wanting to do. So here is an "In-Page" variation, using an iframe:
    Code:
    &nbsp;
    <style>
    #jobViewer {
    display:none;
    width:100%;
    height:500px;
    margin-top:25px;
    border:solid 1px black;
    }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type='text/javascript' src='https://www.smartrecruiters.com/img/script/smartWidget/smart_widget.js'></script>
    <script class="job_widget" type="text/javascript" target="_self">
    widget({
    "searchField":"",
    "company_code":"ionsys",
    "bg_color_widget":"#ffffff",
    "bg_color_headers":"#969696",
    "bg_color_links":"#99ccff",
    "txt_color_headers":"#292929",
    "txt_color_job":"#3d3d3d",
    "bg_color_even_row":"#e0e0e0",
    "bg_color_odd_row":"#f7f7f7",
    "custom_css_url":"https://www.smartrecruiters.com/img/style/smartWidget/smart_widget.css",
    "auto_width":"auto",
    "auto_height":"auto",
    "number":"on",
    "job_title":"true",
    "department":"true",
    "location":"true",
    "published_since":"true",
    "hiring_date":"true",
    "add_search":"false"
    });
    
    
    window.onload = function() {
    
     $(".srJobListJobOdd").mousedown(function(){
      document.getElementById("jobViewer").src = $(this).attr("onclick").split("\"")[1].split("\"")[0];
      document.getElementById("jobViewer").style.display = "block";
      document.location.href = "#jobViewer";
     });
     $(".srJobListJobOdd").mouseup(function(){
      $(".srJobListJobOdd").removeAttr("onclick");
     });
     $(".srJobListJobEven").mousedown(function(){
      document.getElementById("jobViewer").src = $(this).attr("onclick").split("\"")[1].split("\"")[0];
      document.getElementById("jobViewer").style.display = "block";
      document.location.href = "#jobViewer";
     });
     $(".srJobListJobEven").mouseup(function(){
      $(".srJobListJobEven").removeAttr("onclick");
     });
    
    }
    
    </script>
    
    <iframe id="jobViewer"></iframe>
    Last edited by web_loone08; April 15th, 2013 at 09:02 PM. Reason: Removed an unnecessary function parameter; that I had accidentally left in, during testing process.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    2
    Rep Power
    0
    thanks web_loone08... it's cool this is exactly what i want..

    I appreciate your help. Your code will be used on a non-profit organization as a social service to help people find jobs.

    thanks a lot again.

    Originally Posted by web_loone08
    I had to manipulate it, a little bit, with jQuery and I had to add an onload event; but I made it work.

    Here is the end results:
    Code:
    &nbsp;
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type='text/javascript' src='https://www.smartrecruiters.com/img/script/smartWidget/smart_widget.js'></script>
    <script class="job_widget" type="text/javascript" target="_self">
    widget({
    "searchField":"",
    "company_code":"ionsys",
    "bg_color_widget":"#ffffff",
    "bg_color_headers":"#969696",
    "bg_color_links":"#99ccff",
    "txt_color_headers":"#292929",
    "txt_color_job":"#3d3d3d",
    "bg_color_even_row":"#e0e0e0",
    "bg_color_odd_row":"#f7f7f7",
    "custom_css_url":"https://www.smartrecruiters.com/img/style/smartWidget/smart_widget.css",
    "auto_width":"auto",
    "auto_height":"auto",
    "number":"on",
    "job_title":"true",
    "department":"true",
    "location":"true",
    "published_since":"true",
    "hiring_date":"true",
    "add_search":"false"
    });
    
    
    window.onload = function() {
    
     $(".srJobListJobOdd").mousedown(function(){
      document.location.href = $(this).attr("onclick").split("\"")[1].split("\"")[0];
     });
     $(".srJobListJobOdd").mouseup(function(){
      $(".srJobListJobOdd").removeAttr("onclick");
     });
     $(".srJobListJobEven").mousedown(function(){
      document.location.href = $(this).attr("onclick").split("\"")[1].split("\"")[0];
     });
     $(".srJobListJobEven").mouseup(function(){
      $(".srJobListJobEven").removeAttr("onclick");
     });
    
    }
    
    </script>
    Oops, was re-reading your post and seen..., that I actually missed, what you were wanting to do. So here is an "In-Page" variation, using an iframe:
    Code:
    &nbsp;
    <style>
    #jobViewer {
    display:none;
    width:100%;
    height:500px;
    margin-top:25px;
    border:solid 1px black;
    }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type='text/javascript' src='https://www.smartrecruiters.com/img/script/smartWidget/smart_widget.js'></script>
    <script class="job_widget" type="text/javascript" target="_self">
    widget({
    "searchField":"",
    "company_code":"ionsys",
    "bg_color_widget":"#ffffff",
    "bg_color_headers":"#969696",
    "bg_color_links":"#99ccff",
    "txt_color_headers":"#292929",
    "txt_color_job":"#3d3d3d",
    "bg_color_even_row":"#e0e0e0",
    "bg_color_odd_row":"#f7f7f7",
    "custom_css_url":"https://www.smartrecruiters.com/img/style/smartWidget/smart_widget.css",
    "auto_width":"auto",
    "auto_height":"auto",
    "number":"on",
    "job_title":"true",
    "department":"true",
    "location":"true",
    "published_since":"true",
    "hiring_date":"true",
    "add_search":"false"
    });
    
    
    window.onload = function() {
    
     $(".srJobListJobOdd").mousedown(function(){
      document.getElementById("jobViewer").src = $(this).attr("onclick").split("\"")[1].split("\"")[0];
      document.getElementById("jobViewer").style.display = "block";
      document.location.href = "#jobViewer";
     });
     $(".srJobListJobOdd").mouseup(function(){
      $(".srJobListJobOdd").removeAttr("onclick");
     });
     $(".srJobListJobEven").mousedown(function(){
      document.getElementById("jobViewer").src = $(this).attr("onclick").split("\"")[1].split("\"")[0];
      document.getElementById("jobViewer").style.display = "block";
      document.location.href = "#jobViewer";
     });
     $(".srJobListJobEven").mouseup(function(){
      $(".srJobListJobEven").removeAttr("onclick");
     });
    
    }
    
    </script>
    
    <iframe id="jobViewer"></iframe>
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,183
    Rep Power
    184
    Cool..., glad to be of assistance, your welcome and I enjoyed the challenge.

IMN logo majestic logo threadwatch logo seochat tools logo