58968

Change an a tag attribute in JavaScript based on screen width

I was trying to change the attribute of an a tag using media queries but I found out that media with a hyperlink is purely advisory. So, the alternative is to use JavaScript but I seem to be having trouble getting the screen.width to work.

JavaScript:

function adjustHeight(){ var actual_width=screen.width; alert("width: " + actual_width); if(actual_width < 1281) { var h1= document.getElementById('procsLink').getAttribute('font-size'); alert("font-size: " + h1); h1 = 35px; document.getElementById('procsLink').setAttribute('<font></font>-size',h1) } return false; }

Here is my Jsfiddle of the code: http://jsfiddle.net/Arandolph01/2DVv9/

Note: I know there is a way to have the link still appear after 'click' so you can see the changed attribute. (Not sure how)

What do I need to do to get the JavaScript to recognize the screen size? Is my a tag correct?

Thank you.

Answer1:

Here is the problem, there is no id on that anchor tag so adjust your html like this: - added id to the anchor tag - removed the actual link so you can see the a tag change font size - removed the semicolon in the onclick

<span id="sigs" style="display: block;"> <li > <a id="procsLink" href="#" onclick="adjustHeight()" class="sigsLink" >Manage Signatures</a> </li> </span>

Than your css like this:

#procsLink{ font-size: 14px; }

And your JS like this:

function adjustHeight(){ var actual_width = window.innerWidth; if(actual_width < 1281) { var h1 = document.getElementById('procsLink'); var newFontSize = '35px'; h1.style.fontSize = newFontSize; } }

Answer2:

function adjustHeight(){ var actual_width =screen.width; alert("width: " + actual_width); if(actual_width < 1281) { var h1 = document.getElementById('procsLink').getAttribute('font-size'); alert("font-size: " + h1); h1 = "35px"; document.getElementById('procsLink').setAttribute('font-size',h1) } return false; }

Add quote to 35px ;)

Answer3:

You missed the semicolon after:

document.getElementById('procsLink').setAttribute('<font></font>-size',h1)

And add quote to 35px.

Well your code is working fine now, I updated your fiddle

function adjustHeight(){ var actual_width = screen.width; alert("width: " + actual_width + "px"); if(actual_width < 1281) { var h1 = document.getElementById('procsLink').getAttribute('font-size'); alert("font-size: " + h1); h1 = "35px"; document.getElementById('procsLink').setAttribute('<font></font>-size',h1); } return false; }

Recommend

  • 'this.function' is not a function - OO JS
  • Ionic2, ion-range custom content of the range pin
  • How to use custom customer variables in transactional email templates in magento?
  • How to select all local links in jQuery
  • addEventHandler() in a loop has unexpected results
  • Gaining access to the SVG DOM in Chrome and Safari through Javascript
  • Session management in GWT client side
  • Google Contacts API get phone number (PHP)
  • Creating a layer of gradient within an SVG path dynamically
  • Best HTML5 structure for a layout where the title/header is outside the article tag
  • Remove previous Directions Route Google Maps
  • $_POST for text in DIV elements
  • jinja2 template not found and internal server error
  • Making Google Visualization - Annotation Chart to work in GWT
  • Outlines on links in IE9 remains when focus is changed
  • Update Google Maps traffic layer without page reloading
  • Floated image with variable width and heading with background image
  • Access variable of ScriptContext using Nashorn JavaScript Engine (Java 8)
  • Adjust width of select element according to selected option's width
  • Chart.js Multiple dataset
  • How do I get HTML corresponding to current DOM tree?
  • Custom validator control occupying space even though display set to dynamic
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • Atlas images wrong size on iPad iOS 9
  • Jetty Server not starting: Unable to establish loopback connection
  • Highlight and Bold text in JTextPane
  • Change multiple background-images with jQuery
  • FileReader+canvas image loading problem
  • Xamarin Forms - UWP Fonts
  • Android screen density dpi vs ppi
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Change an a tag attribute in JavaScript based on screen width
  • Unanticipated behavior
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?