How do I get JavaScript functions in html

Question

I've done Java for a while now and am moving to web development- I am having some troubles however, My code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">

    var getHeight = function() {

        return $(window).height();

    }

</script>

I want to get the height of the window here,

img.pos_fixed {

        position:fixed;
        top:getHeight() / 2;
        right:250px;

    }

but it does not display in the middle of the screen. I am very new so please don't bash on me that I should learn html/javascript/css as I already am.

Java and JavaScript are not the same thing. Please edit your tags. — PakkuDon
– PakkuDon, Commented Apr 17, 2014 at 3:35
Looks like you're question is about JavaScript and CSS and has nothing to do with Java or HTML (as the title suggests). — jahroy
– jahroy, Commented Apr 17, 2014 at 3:37
Just use JavaScript to set the style dynamically. It looks lke you already know how to do that... — jahroy
– jahroy, Commented Apr 17, 2014 at 3:38

Elliott Frisch · Accepted Answer · 2014-04-17 03:59:06Z

2

You could close your jquery script tag,

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>

and use pure css

img.pos_fixed {
    position:fixed;
    top:50%;
    right:250px;
}

Edit

Alternative with JavaScript, you should probably wait for document.ready -

$(document).ready(function() {
  $("img.pos_fixed").css('top','50%'); // same css
});

edited Apr 17, 2014 at 3:59

answered Apr 17, 2014 at 3:41

Elliott Frisch

202k20 gold badges166 silver badges265 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3543679 Over a year ago

Thank you- the pure css worked for me :) Website isn't letting me set this answer as 'the' answer, says I have to wait 5 minutes :p

ioseph · Accepted Answer · 2014-04-17 03:37:24Z

2

You're attempting to call javascript functions from css.

Instead you'll have to set the css from within javascript:

var obj= document.createElement('img');
obj.style.top = getHeight() / 2 ;

answered Apr 17, 2014 at 3:37

ioseph

1,9171 gold badge21 silver badges26 bronze badges

Comments

logikal · Accepted Answer · 2014-04-17 03:37:19Z

0

I would do something like this:

$("img.pos_fixed").css({ 'position': 'fixed', 'top': '50%', 'right': '250px' });

answered Apr 17, 2014 at 3:37

logikal

1,14113 silver badges26 bronze badges

Comments

Mad Angle · Accepted Answer · 2014-04-17 03:53:20Z

0

You should include the jquery library in a separate script tag like this.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Write your jquery code in another script tag then.

<script type="text/javascript">
    var getHeight = function(){
        return $(window).height();
    }
    var img_height = getHeight/2;
</script>

You can set CSS from script itself.

<script type="text/javascript">
    $("img.pos_fixed").css('top',img_height);
</script>

You can put the rest of the styles in a style tag.

<style>
    img.pos_fixed {
        position:fixed;
        right:250px;
    }
</style>

answered Apr 17, 2014 at 3:53

Mad Angle

2,3301 gold badge18 silver badges33 bronze badges

Comments

Mokhlesur Rahman · Accepted Answer · 2014-04-17 03:57:26Z

first of all you can not use javascript function inside css code. but you can change any css of an element using jquery/javascript. if you want to place the image in the middle of the screen from top than you can do that by only css. no need to use javascript.

<img class="middle_img" src="https://www.ourkidssports.com/js/tiny_mce/plugins/imagemanager/football_public_domain.jpg" alt="football">
<style type="text/css">
    .middle_img{
        height:100px;
        width:100px;
        position:fixed;
        top:50%;
        left:50%;
    }
</style>

here is the jsfiddle link: http://jsfiddle.net/banded_krait/Cv3ny/

NB: position:fixed; will fixed the image to the screen. it will not scroll if you scroll your page.

Collectives™ on Stack Overflow

How do I get JavaScript functions in html

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related