[FIXED]Someone knowledgeable on CSS and Javascript

0 favourites
  • 4 posts
From the Asset Store
Firebase Cloud Firestore Web App, ( Firebase SDK version 10.0.0 )
  • I want to integrate 3rd party sharing option called AddThis. Is working by inserting a script in the html file. I tried creating an iframe in C2 but I had some troubles, so i decided to insert the code directly on the exported project in the Index.html file. I exported the project using the second option (Advert bar style with 160 pixels space for the banner) since I want a Banner from Chitika.com.

    Everything is showing, but I am having difficulties positioning the sharing buttons on upper-left corned of the game and not on the browser. I tried using the CSS options to position the element but I could not make it work. It is important to keep this sharing element in the Index.html and not the game.html so the sharing link is directed to the index.html and not the game.html.

    Here is how the page is looking right now http://synapse1one.com/Test_AddThis_v2/ (the sharing buttons take 5-15 seconds to load)

    Here is the exported project https://dl.dropboxusercontent.com/u/139926126/Forums/scirra/Test_AddThis_v2.zip

    Any help will be greatly appreciated !

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I'm guessing here, but it seems your #main is where the game is situated

    so if you change the #addthis to something like:

    position: absolute;

    left; 170px;

    top: 20px;

    it should be situated 20 px from the top and about the same from the left of the Main (seeing there is allready some space at the left)

  • LittleStain I tried your suggestion and I guess is looking right on your monitor, but If I make the browser window more or less wide, the buttons and the upper-left corner become miss-aligned again. Thanks

  • Update:

    Someone suggested to add this javascript code

    $(function(){
        function setSocialIconPosistion(c) {
          var o = $('#main iframe').contents().find('#c2canvas').offset(),//get canvas offset
              po = $('#main iframe').offset(),//get iframe offset
              t = o.top + po.top, // get total top of both offset
              l = o.left + po.left;// get total left of both offset
          // now apply it to your social icon container
          $('#addthis').css({
             'top': t + 'px',
             'left': l + 'px'
          });
        }
        // bind on resize of window
        $(window).resize(function () {
          setSocialIconPosistion();
        });
        // call when page loads
        setSocialIconPosistion();
    });[/code:263kaq7g]
    
    But it only works when i resize the browser window and not when the page loads
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)