Changing HTML from CSS media query

Question

I have a situation in which I want to change an HREF in an unordered list in HTML when a CSS media query is true. Specifically I want to change an HREF from calendar.html to calendar2.html in the following page. Is this even possible? Here is the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/cliffsteele.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=11;IE=10; IE=9; IE=8; IE=7; IE=EDGE" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />

<style>
@media only screen 
    and (max-device-width : 667px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 2)

    {
		
	.header {
		display:none;
		}
	
	.maincontent{ 
		text-align:left;
		}
	.content {
		width: 100%;
	}
	.footer {
		display:none;
			}
	.sidebar1 {
		float:none;
		display:none; 
	}
	.maincontent div {
		 text-align:left;
	}
	.calendar {
		width=550%;
	}
	}
	
</style>	


<title>Untitled Document</title>


<!-- InstanceBeginEditable name="doctitle" -->
<title>Cliff's Show Schedule</title>
<!-- InstanceEndEditable -->

<style type="text/css"> 
<!--
-->
</style> 

<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } 
ul.nav a { zoom: 1; } 
</style>
<![endif]-->

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />  

<link href="cliff.css" rel="stylesheet" type="text/css" /> 
 
<!-- InstanceBeginEditable name="head" -->

<!-- InstanceEndEditable -->

<script type="text/javascript" src="p7pm3/p7PM3scripts.js"></script>
<link href="p7pm3/p7PM3-01.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>       
                             
<div class="container">

  <div class="header"><img src="Pictures/logo.gif" alt="Logo" name="Insert_logo" width="81" height="63" id="Insert_logo" style="background: #8090AB; display:block;" /> 
     
<!-- end .header --></div>


  

  <div class="content">
    <div id="p7PM3_1" class="p7PM3-01 p7PM3 p7PM3noscript horiz menu-centered rounded auto-subs sub-left">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Resort</a>
          <ul>
            <li><a href="facilities.html">Our Facility</a></li>
            <li><a href="Kennel.html">Boarding &amp; Daycare</a></li>
            <li><a href="spa.html">Grooming</a></li>
            <li><a href="sparates.html">Rates</a></li>
            <li><a href="friendsgallery.html">Our Guests</a></li>
          </ul>
        </li>
        <li><a href="#">Show Handling</a>
          <ul>
            <li><a href="handlinginfo.html">Info</a></li>
            <li><a href="handlingrates.html">Rates</a></li>
            <li><a href="calendar.html">Schedule</a></li>
          </ul>
        </li>
        <li><a href="pics.html">Photo Gallery</a></li>
        <li><a href="aboutme.html">About Me</a></li>
        <li><a href="Contact3.html">Contact Me</a></li>
      </ul>
      <script type="text/javascript">P7_PM3op('p7PM3_1',1,8,-5,-5,0,1,0,1,0,1,1,1,0,900,1,0)</script>
    </div>
<br />
<!-- InstanceBeginEditable name="heading" -->
<h1 style="margin: 10px; clear: both; text-align:center; font-size: xx-large; font-family: Georgia, 'Times New Roman', Times, serif; padding-top:20px;">Cliff's Show Schedule</h1>
<!-- InstanceEndEditable -->


<div class="maincontent"><!-- InstanceBeginEditable name="content" -->

<iframe class="calendar"  src="https://www.keepandshare.com/calendar28/show.php?i=2585375&amp;ifr=y&amp;colorreset=y&amp;nw=y&amp;vw=week28&amp;themeChoice=0&amp;md=30&amp;nopopup=n&amp;fsz=11&amp;noviewmenu=y&amp;noname=y&amp;nobreak=y&amp;noprint=y&amp;norequest=n&amp;nosearch=n&amp;norss=y&amp;noovl=y&amp;notz=y&amp;fd=n&amp;sa=y&amp;exedit=n&amp;nonav=n&amp;scroll=y" width="700" height="600" scrolling="Yes" frameborder="1"></iframe><p align="center"><a href="https://www.keepandshare.com/calendar28/mobile.php?i=2585375&amp;mode=event" target="_blank">View a Mobile Version of this Calendar</a></p><!-- For help on embedding calendars go to http://support.keepandshare.com/support/solutions/97807 -->
</iframe>

<!-- InstanceEndEditable --></div>
    <!-- end .content --></div>
  
<div class="sidebar1"><!-- InstanceBeginEditable name="sidebar" --> 
      <p style="font-size:larger; font-family:'Comic Sans MS', cursive">&nbsp; </p><p style="font-size:16pt; font-family:'Comic Sans MS', cursive"> Most shows close two weeks prior to show date on Wednesday.</p>
   <p style="font-size:16pt; font-family:'Comic Sans MS', cursive"> Call early if you would like me to handle your dog.</p>
   <p><a style="font-size: small;" href="http://www.infodog.com/showinfo/showCal.htm" title="Infodog" target="_new">Enter a show via Infodog</a
     
  ></p>
<!-- InstanceEndEditable -->
  <!-- end .sidebar --></div>
  
  
  <div class="footer">
   
      <div style="float:right">
        <p> <a  href="MAILTO:[email protected]" >Site Designed by Fredric M. Zipser</a><br />
          
       </p>
    </div> 
   
    <div class="clearfloatleft">
        <p>Clifford W. Steele  Professional Handler <br />
          1395 Rt. 6<br />
          Carmel, NY  10512-1627<br />
          United States<br />
          ph:(845) 225-2463<br />
          Cell:(845) 661-0010<br />
        <a  href="MAILTO:[email protected]" >[email protected]</a></p>
    </div>
  
  <!-- end .footer --></div>
  
<!-- end .container --></div>

</body> 
<!-- InstanceEnd --></html>
</body>

Varavut Lormongkol · Accepted Answer · 2015-02-05 02:03:35Z

28

I think it will easy if you create both link in html

<li id="schedule_link_mobile">
    <a href="calendar2.html" >Schedule</a>
</li>
<li id="schedule_link_pc">
    <a href="calendar.html" >Schedule</a>
 </li>

and then use the css to hide the one that you don't want to show

#schedule_link_mobile{
    display: none;
}
#schedule_link_pc{
    display: inline-block;
}
@media only screen 
    and (max-device-width : 667px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 2)
{
    #schedule_link_mobile{
        display: inline-block;
    }

    #schedule_link_pc{
        display: none;
    }
}

answered Feb 5, 2015 at 2:03

Varavut Lormongkol

3413 silver badges6 bronze badges

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

1 Comment

jboi Over a year ago

It's the way to go, so should be marked as the correct answer. I also like the approach by @luke-5-dev but prefer to not mix content and style, means to avoid using content in CSS and vice versa avoid html-tables for layout.

CodinCat · Accepted Answer · 2015-02-05 02:07:28Z

2

I don't think CSS can alter HTML attributes

you can just "hide" it, and display the other one

@media only screen and (...) {
    .your-default-calendar {
        display: none;
    }
    .your-calender2 {
        display: inline-block;
    }
}

but why not just use JavaScript? you can change a attribute easily in JavaScript.

if (window.matchMedia("your media queries").matches) {
    // ...
}

answered Feb 5, 2015 at 2:07

CodinCat

16k6 gold badges51 silver badges63 bronze badges

Comments

Luke 5 Dev · Accepted Answer · 2018-10-18 15:34:13Z

1

On a related note... You can manipulate HTML using CSS content ... The following taken from Chris Coyier at CSS-tricks.com

.email-address:before {
content: "Email address: ";  }

<ul>
<li class="email-address">[email protected]</li>
</ul>

And the output would be like:

• Email address: [email protected]

answered Oct 18, 2018 at 15:34

Luke 5 Dev

111 bronze badge

1 Comment

jboi Over a year ago

I like the approach but prefer to not mix content and style, means to avoid using content in CSS and vice versa avoid html-tables for layout.

DavidNJ · Accepted Answer · 2017-10-10 17:46:48Z

0

The question to ask is: How will the hidden content be used.

The display CSS property hides HTML that is already built. If you have mobile, tablet, and desktop HTML, the application can be building HTML and applying CSS 3x while only displaying once.

If it will be turned on and off, display works. If it will use either a mobile or a tablet or a desktop display and never use the others, using Javascript to add the content is better.

Note that AngularJS has ngIf and ngSwitch directives that accomplish that only using HTML attributes.

answered Oct 10, 2017 at 17:46

DavidNJ

1891 silver badge8 bronze badges

Collectives™ on Stack Overflow

Changing HTML from CSS media query

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related