fontresizing on website

Question

giahmed 0 Newbie Poster

14 Years Ago

Dear All,
I am trying to resize a page using jQuery but its not working for whole page it just resizes itself rather then whole content of website, anyone can please help me. Here is the code that I am using

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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" xml:lang="en" lang="en">

<head runat="server">
    <title>London Ships</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
        body {
            font-family: Arial, Helvetica, Verdana, Sans-Serif;
            font-size: 100%;
        }
        
        body.small {
            font-size: 80%;
        }
        
        body.medium {
            font-size: 120%;
        }
        
        body.large {
            font-size: 140%;
        }
        
        .font-resizing {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .font-resizing a {
            font-weight:bold;
            text-decoration:none;
            text-transform:uppercase;
        }
        
        a.small {
            font-size: 1em;
        }
        
        a.medium {
            font-size: 1.2em;
        }
        
        a.large {
            font-size: 1.4em;
        }
        
        .font-resizing li {
            display: inline;
        }

           .style1
           {
               /*float: right;*/
	       height: 40px; /*width: 550px;*/
               width: 100%;
               text-align: justify;
           }
           .style2
           {
               border-width: thin;
               height: 147px; /*width: 1024px;*/ /*width: 800px;*/
               width: 100%;
           }
       </style>
       </head>
<body>
  <form id="form1" runat="server">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://www.frederikvig.com/wp-content/uploads/fontresizing-print-plugin/jquery.fontresizing.js" type="text/javascript"></script>
<script src="http://www.frederikvig.com/wp-content/uploads/fontresizing-print-plugin/jquery.print.js" type="text/javascript"></script>
 
<script type="text/javascript">
    jQuery(function($) {
    $('#tools>li:first').fontresizing();
        $(".container:first").fontresizing();

        $('#tools>li:eq(1)').print({
            printText: 'Print this page'
        });
    });
</script>
  <div class = "container" align="Center">

   <div class = "sitenav">  
  <ul id="tools">
 
    <li></li>
    <li></li>
</ul>
</div>
    <div class = "header">
        <img src="Images/LOGOFINAL.png" 
            style="height: 147px; width: 100%; text-align: justify;" align="middle" />
    </div>
    <div class ="style1" 
          
          
          style="font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; font-variant: normal; color: #808080;" 
          align="center">
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    
	    <a href="#">About</a>&nbsp;&nbsp;&nbsp;&nbsp; 
		<a href="#">Learning</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;     
		<a href="#">Partner Ships</a>&nbsp;&nbsp;&nbsp;&nbsp;  
 		<a href="#">Events</a>
 		<a href="#">Contact Us</a>
    </div>
   <div class = "contentpage">
               <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
                  </asp:ContentPlaceHolder>
    </div>
    <div class = "footer" align="center">
    <div id="altnav">
		<a href="#">About</a> - 
		<a href="#">Website Credits</a> - 
		</div>
	Copyright &copy; London Ships
	<a href="http://www.cms.gre.ac.uk/">University Of Greenwich CMS School</a> and
	<a href="http://www.gre.ac.uk/">University Of Greenwich</a>
        <br />
        <img align="middle" alt="" src="Images/footerline.png" 
            style="width: 795px; height: 25px" /></div>
</div>
    </form>
</body>
</html>

This only resizes Three A's I have in sitenav and doesn't do anything. Any ideas I am stuck on this from last three days. or If any one have anyother simple idea please post it here.

Thanks in advance.

asp.net

2 Contributors
6 Replies
147 Views
6 Days Discussion Span
Latest Post 14 Years Ago Latest Post by giahmed

kvprajapati 1,826 Posting Genius

14 Years Ago

Try this,

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample</title>
 
<style type="text/css">

.increaseFont, .decreaseFont, .resetFont {
	color:#CCCCCC;
	font-size:14px;
	float:left;
	margin:10px;
}
</style>
<script type="text/javascript" language="javascript" src="jquery-1.2.2.pack.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
  // Reset Font Size
  var originalFontSize = $('html').css('font-size');
  $(".resetFont").click(function(){
  $('html').css('font-size', originalFontSize);
  });
  // Increase Font Size
  $(".increaseFont").click(function(){
  	var currentFontSize = $('html').css('font-size');
 	var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
	$('html').css('font-size', newFontSize);
	return false;
  });
  // Decrease Font Size
  $(".decreaseFont").click(function(){
  	var currentFontSize = $('html').css('font-size');
 	var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
	$('html').css('font-size', newFontSize);
	return false;
  });
});
</script>
</head>
<body>
<h1>A Sample Title</h1>
 
<div id="changeFont">
  <a href="#" class="increaseFont">A++</a>
  <a href="#" class="decreaseFont">A--</a>
  <a href="#" class="resetFont">A</a>
</div>
</body>
</html>

kvprajapati 1,826 Posting Genius

14 Years Ago

>when I press F5 it gives me an error in Line 20 as Object Expected.

You have to copy the JQuery file jquery-1.2.2.pack.js in your current folder.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

giahmed 0 Newbie Poster · Answer 1 · 2010-02-16T22:59:17+00:00

I have tried your code, when I press F5 it gives me an error in Line 20 as Object Expected. and asks me to use Built in script debugger in IE. If I say no it shows me the out put but doesnt do anything. and f I say yes to debugger it Highlights this code.

$(document).ready(function(){
  // Reset Font Size
  var originalFontSize = $('html').css('font-size');
  $(".resetFont").click(function(){
  $('html').css('font-size', originalFontSize);
  });
  // Increase Font Size
  $(".increaseFont").click(function(){
  	var currentFontSize = $('html').css('font-size');
 	var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
	$('html').css('font-size', newFontSize);
	return false;
  });
  // Decrease Font Size
  $(".decreaseFont").click(function(){
  	var currentFontSize = $('html').css('font-size');
 	var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
	$('html').css('font-size', newFontSize);
	return false;
  });
});

Any Idea, Thanks for your reply.

giahmed 0 Newbie Poster · Answer 2 · 2010-02-18T06:17:15+00:00

Its really helpfull and I am getting there, Just need a bit more push lolz. I have tried didnt get any error but it only resizes the Header or same Div and this is what happens
http://cms-stu-iis.gre.ac.uk/ag413/Londonships/#
Any Idea and Thanks for all your help its realy helpfull.

Regards,

Gibran

kvprajapati 1,826 Posting Genius Team Colleague · Answer 3 · 2010-02-18T08:08:39+00:00

>but it only resizes the Header or same Div and this is what happens

No, it will work for whole body because I have used html selector. Look at my post #2. Have a look at this tutorial - http://www.shopdev.co.uk/blog/text-resizing-with-jquery/

giahmed 0 Newbie Poster · Answer 4 · 2010-02-20T02:27:26+00:00

Hy thanks for you help, I think I am really dumb and not getting it. I have added the Jave code in the head of page and and font resizing A's in the div tag just above header thats why its only resizing that Div, I am not sure I am doing it correctly, Can you advise me a bit on that, Here is the code of my masterpage.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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" xml:lang="en" lang="en">

<head runat="server">
    <title>London Ships</title>
    <!--  <script src="jquery.imgslide.js" type="text/javascript"></script>
    <meta name="title" content="Changeable Font Size Script" />
<meta name="author" content="Programmer Central" />

<meta http-equiv="Content-Type" content="text/html; charset='UTF-8'" /-->
<style type="text/css">

.increaseFont, .decreaseFont, .resetFont {
	color:#CCCCCC;
	font-size:14px;
	float:left;
	margin:10px;
}
</style>
<script type="text/javascript" language="javascript" src="jquery-1.2.2.pack.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
  // Reset Font Size
  var originalFontSize = $('html').css('font-size');
  $(".resetFont").click(function(){
  $('html').css('font-size', originalFontSize);
  });
  // Increase Font Size
  $(".increaseFont").click(function(){
  	var currentFontSize = $('html').css('font-size');
 	var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
	$('html').css('font-size', newFontSize);
	return false;
  });
  // Decrease Font Size
  $(".decreaseFont").click(function(){
  	var currentFontSize = $('html').css('font-size');
 	var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
	$('html').css('font-size', newFontSize);
	return false;
  });
});
</script>
   
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
	<!--link rel="stylesheet" type="text/css" media="screen,projection" href="StyleSheet.css" /-->
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
		<!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.cookie.js"></script>
	<script type="text/javascript" src="fontresize.js"></script-->

       <style type="text/css">
           .style1
           {
               margin : 0px 0px 0px 60px;
	           height: 40px; /*width: 550px;*/
               width: 91%;
               text-align: justify;
           }
           </style>
       </head>
 
<body>

and here are three A's the code above and below are on the same page.

<form id="form1" runat="server">
  <div id="changeFont">
           <a href="#" class="increaseFont">A++</a> 
          <a href="#" class="decreaseFont">A--</a> 
           <a href="#" class="resetFont">A</a>
  <div class = "container" align="Center">
   <div class = "sitenav" align="absolute">  
       <asp:Menu ID="Menu1" runat="server" BackColor="#F7F6F3" 
           DataSourceID="SiteMapDataSource1" 
....
....
</div>
</form>

I have wrapped whole form with resizing Div.

Thanks allot.

Gibran