Having some trouble setting up a jQuery .css function

Question

I'm attempting to create a jQuery function that will automatically resize a particular image to it's parent's width. If it's relevant this is for vbulletin 4.2.0

Here's the relevant (simplified) code:

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
        var newWidth = $('.floatcontainer.doc_header').css("width");
        $('.logo-image').css("width", newWidth);

        });
    </script>
</head>

<div class="floatcontainer.doc_header" style="width: 90%; height: 200px;">
    <img class=".logo-image" src="/img/headerimg.jpg"/> //the image is naturally 1092x200
</div>

SOLVED! I finally figured out where to go to edit the css for this picture, so I didn't need to do it with jQuery. Not exactly the solution I was looking for, but hey - who's complaining!

Thanks for your help!

don't add dots in the class names. Dots are used as css selectors for selecting elements with class. i.e if you have an element with class="some_name", then you can select that element via the css selector .some_name — fredrik, Dec 14 '12 at 21:58

Sushanth -- · Answer 1 · 2012-12-14T21:59:18.400

3

Missing proper class selector

 $('.floatcontainer doc_header')
                    ^--- Missing the class selector

supposed to be

 $('.floatcontainer.doc_header')  // Make sure there is no space
                   ^----

Check Fiddle

UPDATE

I see what the problem is

<img class=".logo-image"

Has a class with a dot in it ..

So the correct selector for that is

$('.\\.logo-image')

AND NOT

$('.logo-image')

That is the reason it was not finding the specific Image

UPDATED FIDDLE

If you want it to work with the selector you have specified then change your class in HTML to

<img class="logo-image" ^--- No dot Here .. So selector is $('.logo-image')

<img class=".logo-image" ^--- dot present .. So selector is $('.\\.logo-image')

edited Dec 14 '12 at 21:59

answered Dec 14 '12 at 21:42

Sushanth --

55,259
9
66
105

wow! I can't believe I overlooked that. I will edit that and see if that was it! – SoWizardly Dec 14 '12 at 21:43
well, that's one mistake out of the way, but it still doesn't work :( – SoWizardly Dec 14 '12 at 21:44
$('.floatcontainer.doc_header') <-- since both of the classes are set on the same element – fredrik Dec 14 '12 at 21:45
Then Try this `.css("width", newWidth+ 'px');` – Sushanth -- Dec 14 '12 at 21:45
As @fredrik pointed it out the `class` corresponds to the same element so there should be no space between the selectors – Sushanth -- Dec 14 '12 at 21:46
@Sushanth-- I will try your suggestion now – SoWizardly Dec 14 '12 at 21:57
Really... To my knowledge you cant have dots in class names. For example this answer stipulatrs that: http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names – jtheman Dec 14 '12 at 22:20
You can always have a . in the class name , but such characters have to be escaped with a `\\\` – Sushanth -- Dec 14 '12 at 22:49
@sushanth cool youre right but having dots in class names only bring confusion if you ask me... – jtheman Dec 16 '12 at 21:27

jtheman · Answer 2 · 2012-12-14T21:51:30.677

0

Try this:

$('.logo-image').width($('.floatcontainer.doc_header').width());

Also you shouldnt be using dots in your element classes!

Possible also to change the css instead:

 .logo-image { width: 100%; }

edited Dec 14 '12 at 21:51

answered Dec 14 '12 at 21:44

jtheman

7,421
3
28
39

I tried this as well, and unfortunately it still doesn't work. – SoWizardly Dec 14 '12 at 21:48
1

Did you see my edit and removed the dots from your classes? (class=".logo-image" should be class="logo-image" etc) – jtheman Dec 14 '12 at 21:52
The class name wasn't my choice, standard with vbulletin4.2 I tried both suggestions, but still no dice. – SoWizardly Dec 14 '12 at 21:53

Having some trouble setting up a jQuery .css function

2 Answers2