Can I use JQuery with inline html? If so how?

Question

I learned html and css a week ago. I completed my first project only to find that a div tag I used was not resizing to mobile formats. I have done some research and it seems the answer may reside with JQuery or .JS. I am working within a contained environment, Wordpress.com, and I don't know Java Script yet, but I am familiar with if then statements from studying logic for years.

So I effectively have two problems:

Can I use JQuery with inline html: no css?
How do I do it?

I know I am way off here. I am in the process of going through a .JS tutorial on codeacademy, but I am not finished.

Just thought I would try for advice here. I may not even be in the ballpark!

Here is my div tag and here is what I attempted:

<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>



  $(window).resize(function() {

      if ($(this).width() < 951) {

        $('.divIWantedToHide').hide(<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>);

      } else {

        $('.divIWantedToHide').show(<div style="width:450px;height:5px;background-color:#FFFFFF;"></div>);

        }

    });

Thank you to everyone who answered. I am going in now to see which will work. — user3510681
– user3510681, Commented Apr 10, 2014 at 11:43
I have bought the CSS kit for wordpress.com, but I still cannot re-size the divs with media queries or the CSS suggestions listed. — user3510681
– user3510681, Commented Apr 10, 2014 at 13:19

Christopher Reid · Accepted Answer · 2014-04-08 12:31:05Z

2

Javascript is kind of over-kill for this kind of thing.

I would suggest using CSS media queries.

Paste this in and it should work just fine :)

<style>

#YourDiv{
height:5px;
background-color:#FFFFFF;
}

@media only screen and (min-width:951px){
#YourDiv{width:950px;}
}

@media only screen and (max-width:950px){
#YourDiv{width:450px;}
}

</style>


<div id="YourDiv"></div>

Instead of having your style defined in the div tag, your div now has a unique name (an id) that can be styled separately. This is incredibly useful, and most would argue necessary, once you start building more complicated pages. The @media tags do basically the same thing as your if statements, where min-width:951px will set the style when your window is AT LEAST 951px and max-width:950px sets the style when your window is AT MOST 950px. The rest of the styles that don't change are set above ONE time because they are the same regardless of window size.

And now, just for fun I'll show you how to do it in pure Javascript as well:

http://jsfiddle.net/AfKU9/1/ (test it out by changing the preview window size)

<script>

var myDiv = document.getElementById("myDiv");

window.onresize = function(){
var w = window.innerWidth;
    if (w > 600){
        myDiv.setAttribute("style",'position:absolute;height:50px;background-color:#CCC;width:400px;' )
    }
    else{
        myDiv.setAttribute("style", 'position:absolute;height:50px;background-color:#333;width:100px;' )
    }
}

</script>

edited Apr 8, 2014 at 12:31

answered Apr 8, 2014 at 12:00

Christopher Reid

4,4914 gold badges41 silver badges82 bronze badges

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

3 Comments

user3510681 Over a year ago

I have bought the CSS kit for wordpress.com, but I still cannot re-size the divs with media queries or the CSS suggestions listed.

Christopher Reid Over a year ago

@user3510681 Can you post your entire CSS on pastebin or something? Do you know how to use the inspector in your browser?

user3510681 Over a year ago

I figured it out. I am pretty embarrassed actually. I simply changed the width of my division lines to a percentage. Sorry for all the trouble.

Janak · Accepted Answer · 2014-04-08 11:55:12Z

1

$('.divIWantedToHide').hide() will hide the div !!

In order to apply css to this div you need to use css:

   $('.divIWantedToHide').css('width':'950px','height':'5px','background-color':'#FFFFFF');

If you want to append any div and apply css to it then use append/html

    $('.divIWantedToHide').append('<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>');

or

    $('.divIWantedToHide').html('<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>');

answered Apr 8, 2014 at 11:55

Janak

5,0724 gold badges29 silver badges47 bronze badges

1 Comment

user3510681 Over a year ago

On the preview the div function shows up with the "div line" in parens after ".html"

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

No, at wordpress.com you won't be able to use inline JavaScript. Not in regular posts using the HTML editor nor using the Custom Design upgrade that only includes a CSS editor.

Maybe you'll benefit from the following:

Preprocessor

WordPress.com has support for CSS preprocessors LESS and Sass (SCSS Syntax). This is an advanced option for users who wish to take advantage of CSS extensions like variables and mixins. See the LESS and Sass websites for more information. You can select which syntax you would prefer to use at the bottom of the Appearance -> Customize -> CSS panel.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 5, 2014 at 21:51

brasofilo

26.2k15 gold badges96 silver badges189 bronze badges

Comments

ceadreak · Accepted Answer · 2014-04-08 11:57:56Z

0

If you want to resize or apply another style to some elements adapted to the device screen size, yout can just use the @media css property.

#your_div_id {
    width: 950px;
    /* ... */
}
@media (max-width: 38em) {
    #your_div_id {
        display:none;
    }
}

answered Apr 8, 2014 at 11:57

ceadreak

1,6632 gold badges18 silver badges27 bronze badges

Comments

cor · Accepted Answer · 2014-04-08 12:03:28Z

0

You are trying to hide a div with class '.divIWantedToHide'. But your div does not have any class.

So you should add to your div the class:

<div class="divIWantedToHide" style="width:950px;height:5px;background-color:#FFFFFF;">  </div>

And then, you can show and hide it like here:

$(".divIWantedToHide").hide()
$(".divIWantedToHide").show()

edited Apr 8, 2014 at 12:03

answered Apr 8, 2014 at 11:57

cor

3,39329 silver badges48 bronze badges

Collectives™ on Stack Overflow

Can I use JQuery with inline html? If so how?

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related