Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – I want to remove an attribute at loading time if window width is lower than something, it doesn't work

The following code should work as explained:
Links in the article should see its target attribute removed (so it displays in the browser and not the iframe) but it doesn’t. I make sure the window (with developper’s tool) is the appropriate size, reload with ctrl+r, and it doesn’t change.
I wish for this:

<a href="/glossaire/une-demarche-pionniere/" onclick="document.querySelector(&quot;iframe&quot;).removeAttribute(&quot;hidden&quot;)" target="iframe_glossary">démarche pionnière</a>

to loose its target attribute.

I tried:

<script>
if (screen.availWidth <= 604) {
   document.querySelector('p a').removeAttribute('target');
}
</script>

Edit:

Page structure:

<html lang="fr">
<head>
<script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant="" defer=""></script>
<script>$(window).Width<=604&&document.querySelector("p a").removeAttribute("target")</script></head>
<body class="page-template-default page">
<header id="header"><a href="http://localhost:1313/" id="logo"></a></header>
<div id=content>
<main id="page" class="page-content">
<article class="page-post">
<div class="post-ctt">
<p>C’est une
<a href="/glossaire/une-demarche-pionniere/" onclick="document.querySelector(&quot;iframe&quot;).removeAttribute(&quot;hidden&quot;)" target="iframe_glossary">démarche pionnière</a>
<iframe hidden="" name="iframe_glossary" allow-same-origin="" seamless=""></iframe>
<button onclick="document.querySelector(&quot;iframe&quot;).setAttribute(&quot;hidden&quot;,&quot;hidden&quot;)">☒</button>
</div>
</article>
</main>
</div>
</body>
</html>
Tags:

2

Answers


  1. 0

    screen.availWidth doesn not work when you manually resize browser size. It works when tried with difference device sizes (try responsive feature on dev tools)

    To make this work, try window.innerWidth. It gives correct width when browser/window is resized.

    Login or Signup to reply.
  2. 0

    I would check the innerWidth not the screen’s entire available width. also your script runs before the content is there, try waiting for DOMContentLoaded

    <script>window.addEventListener("DOMContentLoaded", () => {window.innerWidth<=604&&document.querySelector("p a").removeAttribute("target")})</script>

    To handle more than one element, do document.querySelectorAll and forEach over it

    <script>window.addEventListener("DOMContentLoaded", () => {window.innerWidth<=604&&document.querySelectorAll("p a").forEach(a => {a.removeAttribute("target")})})</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search