jQuery add class to embed element

Question

I am trying to add a class to an embed element like so:

$(".single-floorplan embed#2").addClass("activeFloorplan");

However this does not work, the class does not get added, I even tried

$(".single-floorplan #2").addClass("activeFloorplan");

still nothing, no class gets added.

Here is the embed object.

<embed src="~/PDFs/floorplans/pdf.pdf" height="500" type='application/pdf' id="2">

How do I add class to embed element.

The embed element is wrapped inside a class called single-floorplan.

Can you reproduce this on jsfiddle? I just tried this and it works. — But I'm Not A Wrapper Class
– But I'm Not A Wrapper Class, Commented Jan 4, 2017 at 15:07
You are trying to select element using '.single-floorplan' class. But 'embed' element doesnot have this class. So it wont be selected for desired operation. — Ankush G
– Ankush G, Commented Jan 4, 2017 at 15:08
I ran both code and its working for me. can you provide more details like outer element of embed? — Ankush G
– Ankush G, Commented Jan 4, 2017 at 15:15

Codemole · Accepted Answer · 2017-01-04 15:17:12Z

2

I guess you have tried

$(".single-floorplan embed#2").addClass("activeFloorplan");

before embed object is placed in the document.

So make sure to place js code after this embed object placed.

answered Jan 4, 2017 at 15:17

Codemole

3,2095 gold badges28 silver badges42 bronze badges

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

Comments

user7269845 · Accepted Answer · 2017-01-04 15:23:51Z

0

As a very rough idea, you can try following:

setTimeout(function(){ $(".single-floorplan #2").addClass("activeFloorplan"); }, 5000);

answered Jan 4, 2017 at 15:23

user7269845

Comments

zer00ne · Accepted Answer · 2017-01-04 16:53:23Z

Try $('#2').addClass('activeFloorplan')
Use iframe.
Details are in Snippet.

If you are using WordPress, a CMS, or some other type of cookie cutter setup, results will very (greatly very).

SNIPPET

$('#1').addClass('activeFloorplan');
$('#2').addClass('activeFloorplan');
$('#3').addClass('activeFloorplan');

body {
  font: 400 12px/1.4 Verdana
}
#a2 {
  border: 5px solid #0e0
}
#a3 {
  border: 5px solid #e00
}
.activeFloorplan {
  outline: 10px dashed #930;
}
.g {
  color: green;
}
.b {
  color: blue;
}
.r {
  color: red;
}
div p {
  font-size: 14px;
  background: #fc1
}
code {
  background: #05f;
  color: #efe;
  padding: 1px 2px;
}
.scroll {
  font-size: 20px;
  text-align: center;
}
.tip {
  border: 2px solid tomato;
  border-radius: 40%;
  line-height: 3;
  width:50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='scroll'>▼▼▼Scroll▼▼▼</div>
<p>All nodes with the class <code>.activeFloorplan</code> have a brown dashed outline. This indicates that each time <code>.addClass()</code> was applied directly to a node's <code>id</code>, it was successful. So if there's an <code>id</code> on our target node...just
  select the <code>id</code>.</p>
<p class='tip'>Use <code>$('#2').addClas('activeFloorplan')</code>
</p>
<p class='g tip'>Try an &lt;iframe&gt; for PDFs</p>
<p class='b'>&lt;embed&gt; is good for SVG</p>
<p class='r'>&lt;embed&gt; is not good for PDF</p>
<p>If the &lt;iframe&gt; doesn't work...check the location of said PDF.</p>
<div id='al'>
  <div class='scroll'>▼▼▼Scroll▼▼▼</div>
  <p>This is a PDF within an &lt;iframe&gt;</p>
  <iframe id="1" src="http://www.gtupw.org/articles/attachments/1358398740.pdf" frameborder='5' width='500'></iframe>
</div>
<div class='scroll'>▼▼▼Scroll▼▼▼</div>
<div id='a2'>
  <p>This is a SVG within an &lt;embed&gt;</p>
  <embed id="2" src="https://upload.wikimedia.org/wikipedia/commons/9/99/Compass_rose_simple.svg">
</div>
<div class='scroll'>▼▼▼Scroll▼▼▼</div>
<div id='a3'>
  <p>This is a PDF within an &lt;embed&gt;</p>
  <embed id="3" src="http://www.gtupw.org/articles/attachments/1358398740.pdf">
</div>
<div class='scroll'>✲✲✲END✲✲✲</div>

Collectives™ on Stack Overflow

jQuery add class to embed element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related