0

I'm relatively new to Jquery and its working and am sure that my syntax is wrong somehow I am just not sure how to fix it.

Basically I need to get the (window).height and (window).width of a screen, and then take these values and divide them by 1920 and 1080, respectively, for my website code.

Here is the jquery I have written:

$(document).ready(function () {
    var resx = $(window).width();
    var resy = $(window).height();
    var disx = (resx)/1920;
    var disy = (resy)/1080;
});

I then want to use 'disx' and 'disy' in my HTML document for a data-x and data-y value.. I think this is where my problem lies -- How exactly do I get the data-x value to be equal to disx * (whatever pixel value I need)?

<div id="video-step" class="step" data-x="<script type='text/javascript'>document.write(($disx)*(-1920))</script>"
     data-y="0">
</div>

^ That is how I currently am trying, to no avail..

Can anyone inform me of how exactly to put the variable into my html? Or if my variable format is even correct?

Thank you!

shan
  • 3,035
  • 5
  • 34
  • 50
  • What is the purpose of setting the `data-x` and `data-y` attributes? Doing so has no effect as such. Such attributes are meant for use in scripting, so why don’t you just use the values you have, in whatever way you intend to? – Jukka K. Korpela Jul 28 '13 at 04:10
  • Sorry I should have said -- I am using impress.js, a javascript file that gives a presentation-like quality to my html document, and it uses the data-x, data-y, and data-z values in order to move the slides around and such. – shan Jul 28 '13 at 04:16

1 Answers1

2

Just call the data function on the element and pass in the values:

$(document).ready(function () {
    var resx = $(window).width();
    var rexy = $(window).height();
    var disx = (resx)/1920;
    var disy = (resy)/1080;

    $("#video-step").data('y',resy);
    $("#video-step").data('x',resx);
});

If you need to force a markup update go old school with:

$("#video-step").attr('data-y',resy);
$("#video-step").attr('data-x',resx);
TGH
  • 38,769
  • 12
  • 102
  • 135
  • 1
    This does not set any `data-*` attribute. (Oh, now it does, the answer was posted in many different versions.) – Jukka K. Korpela Jul 28 '13 at 04:08
  • Thanks for the fast response! That doesn't seem to have worked, unfortunately :( Does this code make it so that the data-x value in my html is set to resx and resy? Do I need to keep the 'data-x=""' in my html? (i also fixed the typo in my original jquery I posted.. whoops.. still not working though) – shan Jul 28 '13 at 04:12
  • It will not update the actual html as that is unnecessary. If you only reference the data object there is no need to update the html . See this link for more http://stackoverflow.com/questions/5507718/why-dont-changes-to-jquery-fn-data-update-the-corresponding-html-5-data-a – TGH Jul 28 '13 at 04:18
  • Hmm I see. Unfortunately for the javascript plugin I'm using it needs the data-x and data-y values in the html document in order to execute functions in its own code. Is there no way to write the jquery value into the document? Thanks again for your help! – shan Jul 28 '13 at 04:21
  • 1
    I was able to get it to work with that suggestion. Thank you so much for your help! :) – shan Jul 28 '13 at 04:41