Alterando HTML da Consulta de Mídia CSS

Question

Feb 05, 2015, 02:46 AM

Alterando HTML da Consulta de Mídia CSS

Tenho uma situação em que quero alterar um HREF em uma lista não ordenada em HTML quando uma consulta de mídia CSS for verdadeira. Especificamente, quero alterar um HREF de calendar.html para calendar2.html na página a seguir. Isso é possível? Aqui está o código.

<!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:rickzipser@hotmail.com" >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:happydayskennelinc@hotmail.com" >happydayskennelinc@hotmail.com</a></p>
    </div>
  
  <!-- end .footer --></div>
  
<!-- end .container --></div>

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

leaveComments