Change CSS via Jquery - What is wrong with my code?

Question

I am trying to complete a simple function, what is wrong with this code?

Basically I'm trying to overlay a span, with the exact same width as its containing <a> link. So I want the black span box (in example) as wide as the containing grey box.

function vg() {
    if ($("body").hasClass("work-page")) {
        var a = $(".projTitle").width();
        $(".subtitle").css({
            width: a + "px",
        })
    }

li {
	position:relative;
}
li a.projTitle {
    display: inline-block;
    margin: auto 15px auto 0px;
    line-height: 100px;
    height: 100px;
    overflow: hidden;
    outline: 0;
    border: 0;
    font-weight:300;
    background:#ccc;
    font-size:18px;
}
li .subtitle {
    font-size:10px;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 500;
    opacity: .8;
    display: block;
    margin-left: 0px;
    line-height: 17px;
    margin-right: 0px;
    height: 100px;
    margin-bottom: 0px;
    position: absolute;
    top: 0px;
    padding-top: 83px;
    width:auto;
    background:#000;
    color:#fff;
}

<html>
  <body class="work-page">
<ul>
  <li>
    <a class="css3Animate projTitle" href="work/project/index.html">The Project<span class="css3Animate subtitle">subtext span</span></a>
  </li>
  </body>
</html>

what is wrong with this code? nothing -- jsfiddle.net/xu8809f5 -- you created a function but you don't know how to run it. functions dont magically run by themselfs unless you call (run) them — Tasos
– Tasos, Commented Mar 5, 2016 at 23:33

Paul Fitzgerald · Accepted Answer · 2016-03-05 23:06:36Z

1

You need to call the function. You could call it in your script tag, without referencing in the html as suggested in the comment below it is better to attach the handler inside a script tag instead instead of inline

$(".css3Animate").click(function(){
    vg();;
})

or else you can call the function inline by using onclick="vg()"

 <a class="css3Animate projTitle" href="#" onclick="vg()">The Project<span class="css3Animate subtitle">subtext span</span></a>

See the jsfiddle here with it working

edited Mar 5, 2016 at 23:06

answered Mar 5, 2016 at 23:01

Paul Fitzgerald

12.1k4 gold badges45 silver badges57 bronze badges

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

1 Comment

Carcigenicate Over a year ago

Or, more ideally, attach the handler inside a script tag instead instead of inline.

thatOneGuy · Accepted Answer · 2016-03-05 23:32:16Z

0

Have you called the function at all ? Works for me if i call vg()

function vg() {
	    if ($("body").hasClass("work-page")) {
        	var a = $(".projTitle").width();
          console.log(a)
	           		$(".subtitle").css({
                width: a + "px",
            	})
              
		}
    }
    
    vg()

li {
	position:relative;
}
li a.projTitle {
    display: inline-block;
    margin: auto 15px auto 0px;
    line-height: 100px;
    height: 100px;
    overflow: hidden;
    outline: 0;
    border: 0;
    font-weight:300;
    background:#ccc;
    font-size:18px;
}
li .subtitle {
    font-size:10px;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 500;
    opacity: .8;
    display: block;
    margin-left: 0px;
    line-height: 17px;
    margin-right: 0px;
    height: 100px;
    margin-bottom: 0px;
    position: absolute;
    top: 0px;
    padding-top: 83px;
    width:auto;
    background:#000;
    color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="work-page">
<ul>
  <li>
    <a class="css3Animate projTitle" href="work/project/index.html">The Project<span class="css3Animate subtitle">subtext span</span></a>
  </li>

I would be wary about the code you are using.

For example, if you have more elements with the same class as you've selected, i.e projTitle, JQuery's .width() will get the first element of the array as selecting something by class ($('.'+className)) will return an array of elements with that class.

Where as if you select something by ID, as nothing should share an ID, you'll be certain to get the correct element :)

edited Mar 5, 2016 at 23:32

answered Mar 5, 2016 at 23:02

thatOneGuy

10.7k9 gold badges59 silver badges93 bronze badges

2 Comments

vgreen Over a year ago

Ah yes, ran into this problem. Is there a way that I can set the width of each instance of .subtitle, by its parent container (a.projTitle), without having to specify separate ID tags for each instance? Thanks!

thatOneGuy Over a year ago

set width to 100% in css

Collectives™ on Stack Overflow

Change CSS via Jquery - What is wrong with my code?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related