rickzipser
Reputation: 149
Changing HTML from CSS media query
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 & 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&ifr=y&colorreset=y&nw=y&vw=week28&themeChoice=0&md=30&nopopup=n&fsz=11&noviewmenu=y&noname=y&nobreak=y&noprint=y&norequest=n&nosearch=n&norss=y&noovl=y&notz=y&fd=n&sa=y&exedit=n&nonav=n&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&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"> </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> Upvotes: 12
Views: 31067
Answers (4)
Luke 5 Dev
Reputation: 11
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]
Upvotes: 1
DavidNJ
Reputation: 189
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.
Upvotes: 0
CodinCat
Reputation: 15914
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) {
// ...
}
Upvotes: 2
Varavut Lormongkol
Reputation: 341
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;
}
}
Upvotes: 28