Hi,
I am new to jquery, experts please solve this issue and post me a reply.
I created a textsizer in css and jquery. The purpose of this is,
1) on webpage there is a link called "textsize", when you click a popup is shown and it contains 3options (increase font, decrease font and reset font).
2) The web page is designed with three column layout, when i click on text sizer only the contents in the second column increases remaining column-1 and column-3 will remain the same as default.
Now the problem is,
--> I had contents,headings and links inside the column-2 layout, but when i click on text sizer(increase font, decrease font and reset font), only the content is increasing, the heading and the links are not increasing. I want the headings and links inside the column-2 also to be increased, decreased and reset. -
/* starting of textsize */
-
li a.textTool:hover, li a.textToolActive {
-
background:#0063be url('../Images/tools/text-on.gif') -1px 0px no-repeat;
-
color:#ffffff;
-
text-decoration:none;
-
height:25px;
-
/* width:55px; */
-
margin-top:0px;
-
background-color:#0063be;
-
}
-
-
-
.text-tool {
-
position:absolute;
-
left:704px;
-
width:125px;
-
top:228px;
-
right:260px;
-
-
-moz-box-shadow: 3px 3px 4px #000;
-
-webkit-box-shadow: 3px 3px 4px #000;
-
box-shadow: 3px 3px 4px #000;
-
/* For IE 8 */
-
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
-
/* For IE 5.5 - 7 */
-
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
-
}
-
-
.text-tool .header {
-
background:#0063be;
-
width:125px;
-
height:25px;
-
position:relative;
-
}
-
.text-tool .header h5 {
-
color:#fff;
-
padding:5px 0 12px 2px;
-
font-size:1.1em;
-
font-weight:bold;
-
}
-
.text-tool .header .close {
-
position:absolute;
-
top:10px;
-
right:10px;
-
cursor:pointer;
-
}
-
.text-tool .body {
-
background:#fff;
-
border-bottom:#ccc solid 1px;
-
border-right:#ccc solid 1px;
-
border-left:#ccc solid 1px;
-
padding:5px 15px 0 0px;
-
height:25px;
-
width:125px;
-
position:relative;
-
}
-
.text-tool .body .a1{
-
display:inline;
-
-
}
-
/* End of textsize section */
-
-
/********************/
-
$("#content-top a.textTool").click(function () {
-
$('a.textTool').removeClass("textTool").addClass('textToolActive');
-
$('#content-top a.textTool').removeClass("textTool").addClass('textToolActive');
-
var offset = $(this).offset();
-
var tLeft = offset.left;
-
var tTop = offset.top;
-
var topOffset = $(this).height();
-
var tWidth = $(this).width();
-
var xTip = (tLeft-tWidth+6)+"px";
-
var yTip = (tTop+topOffset+12)+"px";
-
$('#content-top .text-tool').css({'top' : yTip, 'left' : xTip});
-
$('#content-top .text-tool').removeClass("hide");
-
});
-
-
$("#content-top .text-tool .close").click(function () {
-
$('#content-top a.textToolActive').removeClass("textToolActive").addClass('textTool');
-
$('#content-top .text-tool').addClass("hide");
-
$('#content-top .text-tool .body .page-tools-email').css({ 'display': 'none' });
-
$('#content-top .text-tool .body').css({ 'height': '25px' });
-
});
-
/********************/
-
//Font sizer starts here
-
$(" a.textTool").click(function () {
-
$('a.textTool').removeClass("textTool").addClass('textToolActive');
-
$('.page-tool').removeClass("hide");
-
});
-
$(document).ready(function(){
-
//$(document).height(".page-tool .body"); // returns height of HTML document
-
var MaximumFontSize = 15;
-
var MinimumFontSize = 6;
-
var $currentObject = $(".threecoloumlayout") .children(".column-2");
-
-
-
// Reset Font Size
-
var originalFontSize = $currentObject.css('font-size');
-
$("#resetFont").click(function(event){
-
event.preventDefault();
-
$currentObject.css('font-size', originalFontSize);
-
});
-
// Increase Font Size
-
$("#increaseText").click(function(){
-
var currentFontSize = $currentObject.css('font-size');
-
var currentFontSizeNum = parseFloat(currentFontSize, 10);
-
var newFontSize = currentFontSizeNum+1;
-
if (newFontSize < MaximumFontSize) {
-
$currentObject.css('font-size', newFontSize);
-
}
-
return false;
-
});
-
// Decrease Font Size
-
-
$("#DecreaseText").click(function(){
-
var currentFontSize = $currentObject.css('font-size');
-
var currentFontSizeNum = parseFloat(currentFontSize, 10);
-
var newFontSize = currentFontSizeNum-3;
-
//alert('currentFontSizeNum');
-
if (newFontSize > MinimumFontSize) {
-
$currentObject.css('font-size', newFontSize);
-
}
-
return false;
-
});
-
-
});
-
//Font sizer Ends here
-
-
-
<div class="text-tool hide">
-
<div class="header">
-
<h5>Text sizer</h5>
-
<div class="close"><img src="http://bytes.com/submit/images/tools/close.gif" width="10" height="10" alt="Close" title="Close" /></div>
-
</div>
-
<div class="body">
-
<div class="a1">
-
<a href="#" id="increaseText"><img src="http://bytes.com/submit/images/tools/BigA.jpg"/></a>
-
<a href="#" id="resetFont"><img src="http://bytes.com/submit/images/tools/textreset.jpg"/></a>
-
<a href="#" id="DecreaseText"><img src="http://bytes.com/submit/images/tools/smallA.jpg"/></a>
-
</div>
-
-
</div>
-
</div>
-
</div>
-
Appreciate your replies.
Thanks,
Jai
6 2302
If you notice, on line 32: - var $currentObject = $(".threecoloumlayout") .children(".column-2");
you're selecting column-2 and the rest of the code only applies the font size changes to $currentObject.
Thanks for your reply. Since i am new to jquery. i was googling and trying to solve the above problem but i was unable to find the solution. It would be grateful if you could suggest me on how to change the code.
Post the HTML code of the page.
the HTML code is -
<!-- Start of Text Tool -->
-
<div class="text-tool hide">
-
<div class="header">
-
<h5>Text sizer</h5>
-
<div class="close"><img src="http://bytes.com/topic/javascript/images/tools/close.gif" width="10" height="10" alt="Close" title="Close" /></div>
-
</div>
-
<div class="body">
-
<div class="a1"> <a href="#" id="increaseText"><img src="http://bytes.com/topic/javascript/images/tools/BigA.jpg"/></a> <a href="#" id="resetFont"><img src="http://bytes.com/topic/javascript/images/tools/textreset.jpg"/></a> <a href="#" id="DecreaseText"><img src="http://bytes.com/topic/javascript/images/tools/smallA.jpg"/></a> </div>
-
</div>
-
</div>
-
</div>
-
<!-- End of text Tool -->
-
-
CSS code -
/* starting of textsize */
-
li a.textTool:hover, li a.textToolActive {
-
background:#0063be url('../Images/tools/text-on.gif') -1px 0px no-repeat;
-
color:#ffffff;
-
text-decoration:none;
-
height:25px;
-
/* width:55px; */
-
margin-top:0px;
-
background-color:#0063be;
-
}
-
-
-
.text-tool {
-
position:absolute;
-
left:704px;
-
width:125px;
-
top:228px;
-
right:260px;
-
-
-moz-box-shadow: 3px 3px 4px #000;
-
-webkit-box-shadow: 3px 3px 4px #000;
-
box-shadow: 3px 3px 4px #000;
-
/* For IE 8 */
-
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
-
/* For IE 5.5 - 7 */
-
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
-
}
-
-
.text-tool .header {
-
background:#0063be;
-
width:125px;
-
height:25px;
-
position:relative;
-
}
-
.text-tool .header h5 {
-
color:#fff;
-
padding:5px 0 12px 2px;
-
font-size:1.1em;
-
font-weight:bold;
-
}
-
.text-tool .header .close {
-
position:absolute;
-
top:10px;
-
right:10px;
-
cursor:pointer;
-
}
-
.text-tool .body {
-
background:#fff;
-
border-bottom:#ccc solid 1px;
-
border-right:#ccc solid 1px;
-
border-left:#ccc solid 1px;
-
padding:5px 15px 0 0px;
-
height:25px;
-
width:125px;
-
position:relative;
-
}
-
.text-tool .body .a1{
-
display:inline;
-
-
}
-
/* End of textsize section */
-
Jquery code -
$("#content-top a.textTool").click(function () {
-
$('a.textTool').removeClass("textTool").addClass('textToolActive');
-
$('#content-top a.textTool').removeClass("textTool").addClass('textToolActive');
-
var offset = $(this).offset();
-
var tLeft = offset.left;
-
var tTop = offset.top;
-
var topOffset = $(this).height();
-
var tWidth = $(this).width();
-
var xTip = (tLeft-tWidth+6)+"px";
-
var yTip = (tTop+topOffset+12)+"px";
-
$('#content-top .text-tool').css({'top' : yTip, 'left' : xTip});
-
$('#content-top .text-tool').removeClass("hide");
-
});
-
-
$("#content-top .text-tool .close").click(function () {
-
$('#content-top a.textToolActive').removeClass("textToolActive").addClass('textTool');
-
$('#content-top .text-tool').addClass("hide");
-
$('#content-top .text-tool .body .page-tools-email').css({ 'display': 'none' });
-
$('#content-top .text-tool .body').css({ 'height': '25px' });
-
});
-
/********************/
-
//Font sizer starts here
-
$(" a.textTool").click(function () {
-
$('a.textTool').removeClass("textTool").addClass('textToolActive');
-
$('.page-tool').removeClass("hide");
-
});
-
$(document).ready(function(){
-
//$(document).height(".page-tool .body"); // returns height of HTML document
-
var MaximumFontSize = 15;
-
var MinimumFontSize = 6;
-
var $currentObject = $(".threecoloumlayout") .children(".column-2");
-
-
-
// Reset Font Size
-
var originalFontSize = $currentObject.css('font-size');
-
$("#resetFont").click(function(event){
-
event.preventDefault();
-
$currentObject.css('font-size', originalFontSize);
-
});
-
// Increase Font Size
-
$("#increaseText").click(function(){
-
var currentFontSize = $currentObject.css('font-size');
-
var currentFontSizeNum = parseFloat(currentFontSize, 10);
-
var newFontSize = currentFontSizeNum+1;
-
if (newFontSize < MaximumFontSize) {
-
$currentObject.css('font-size', newFontSize);
-
}
-
return false;
-
});
-
// Decrease Font Size
-
-
$("#DecreaseText").click(function(){
-
var currentFontSize = $currentObject.css('font-size');
-
var currentFontSizeNum = parseFloat(currentFontSize, 10);
-
var newFontSize = currentFontSizeNum-3;
-
//alert('currentFontSizeNum');
-
if (newFontSize > MinimumFontSize) {
-
$currentObject.css('font-size', newFontSize);
-
}
-
return false;
-
});
-
-
});
-
//Font sizer Ends here
-
No, I've seen that code. I meant the HTML code of the page that needs resizing, i.e. the 3 column layout page.
Here is the html code in which the text sizer should affect on all the links, headings and contents. Sign in to post your reply or Sign up for a free account.
Similar topics
by: Andrew Durstewitz |
last post by:
Hi!
I am having a really strange issue. I have a few users calling in
saying they are getting an error. On further review I found this line is
what is causing it...
Set strLookup =...
|
by: Sébastien Bicaïs |
last post by:
Hi,
I made a VB class to generate images on the fly.
The idea is to generate an image with a text, a font, a font size, a
maximum width and height given as parameters, and the text to fit in the...
|
by: Danny J. Lesandrini |
last post by:
OK, I have never noticed this before, but I'm getting a consistent issue
with text boxes on my Access form in an ADP with data in SQL Server.
1) Click in a text box with text
2) Cursor is...
|
by: SalimShahzad |
last post by:
DEAR GURUS, CAN ANY ONE CHECK THIS CODE WHEN I RUN ON UNBOUND TEXT BOX
IT WORKS 100%, BUT IF I USED ANY BOUND TEXTBOX IT WORKS SOME TIME AND
SOME TIME NOT????
AND IN THE TABLE IT IS SET AS DATE,...
|
by: Catherine Jones |
last post by:
I have one more issue, please help me to find the solution ,
My question as follows..
In the rich text box, after an undo or redo operation how can we get
information on the following things.....
|
by: John |
last post by:
I have a process that reads a text file then uploads the data into a
database table. The text file has 10 lines at the end of the file that are
blank BUT it appears that the enter key or space bar...
|
by: chunk1978 |
last post by:
hi there...
i've been building an internet form recently, and i've realized there seems to be a slight difference between the way HTML text is processed between my Mac (Mac OS X v10.4.8) and my PC...
|
by: Simon Gare |
last post by:
Hi,
I cant seem to alter the text size on the code below only the colour, the
code you see is all that the page consists of from start to finish that's
all of it, cant apply css nothing works.
...
|
by: Mr. B |
last post by:
In my application, I have a Combo Box and Text Box.
At Startup, I fill the Combo Box with information that I allow the Users to
select to do certain Calculations.
My Text Box shows a Value...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
| |