[FIXED]Someone knowledgeable on CSS and Javascript

Get help using Construct 2

Post » Thu Aug 13, 2015 4:44 am

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)

Image
Here is the exported project https://dl.dropboxusercontent.com/u/139926126/Forums/scirra/Test_AddThis_v2.zip
Any help will be greatly appreciated !
Last edited by Cipriux on Sat Sep 12, 2015 12:25 pm, edited 1 time in total.
B
79
S
21
G
23
Posts: 513
Reputation: 18,648

Post » Thu Aug 13, 2015 8:01 am

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)
I told my dentist I had trouble with my teeth and asked her to fix it without looking in my mouth..
B
54
S
16
G
8
Posts: 6,160
Reputation: 19,775

Post » Thu Aug 13, 2015 10:11 am

@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
B
79
S
21
G
23
Posts: 513
Reputation: 18,648

Post » Thu Aug 13, 2015 11:18 am

Update:
Someone suggested to add this javascript code
Code: Select all
$(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();
});


But it only works when i resize the browser window and not when the page loads
B
79
S
21
G
23
Posts: 513
Reputation: 18,648


Return to How do I....?

Who is online

Users browsing this forum: anty21ro, blackhornet, brunopalermo, jorgmaquoi, Rable, unicornspitfire and 7 guests