I want to use JQuery to hide text when web page is launched and when you click on an item it will show the hidden text.
When I load the page it shows the text in h2 and the text in h3 and hides the text in ptdeats as expected. When I click on the text containing "Jason O'Reilly", it doesn't show the text "Hi there, my name is Jay......".
The classes trainers ptpics, pt, center are configured in css.
The jquery is also configured to highlight h3 and also when h3 is click it shows the text and when you click on h3 it hides it again.
This is what I have configured in html:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="trainersptjavascript.js"></script>
</head>
<body>
<div class="trainers">
<h2 class="center">Choose your Personal Trainer</h2>
<div class="ptpics center">
<h3 class="pt center">Jason O'Reilly</h3>
<p class="center"><img src="images/ptjay.jpg" alt="Westside Fitness PT Jason" width="320" height="350"></p>
<p class="ptdeats">Hi there , my name is Jay I am a personal trainer.</p>
</div>
<div class="ptpics center">
<h3 class="pt center">Jean Meehan</h3>
<p class="center"><img src="images/ptjean.jpg" alt="Westside Fitness PT Jean" width="320" height="350"></p>
<p class="ptdeats">I am a qualified Level 4 Personal Trainer.</p>
</div>
<div class="ptpics center">
<h3 class="pt center">Aoife McIntyre</h3>
<p class="center"><img src="images/ptaoife.jpg" alt="Westside Fitness PT Aoifendrew" width="320" height="350"></p>
<p class="ptdeats">I am Registered Nurse with a Personal Training Qualification.</p>
</div>
</div>
</body>
</html>
This is the css configuration
.trainers
{
width: 80%;
background-color: #36454F;
color: #FFFFFF;
text-align: justify;
height: auto;
margin-left: 10%;
margin-left: 10%;
padding-left: 6px;
padding-right: 6px;
float: left;
}
.pt
{
width: 100%;
cursor: pointer;
color: #FFFFFF;
padding-left: 6px;
padding-right: 6px;
float: left;
}
.ptpics
{
width: 33%;
background-color: #36454F;
color: #FFFFFF;
border: 1px;
border-color:#009900;
text-align: justify;
height: auto;
float: left;
padding-left: 6px;
padding-right: 6px;
}
JQuery configuration:
$(document).ready(function()
{
$(".me").hide();
$(".pt").click(function(){
$(".me").show();
});
});
It might be a problem with which element the event is triggering on. try:
$(".ptpic").click(function(){
$(".me").show();
});
If that works, then you might not be clicking in the right spot.
Your code should work. I tested it out, and it did work.
Make sure you close the html tabs:
<div class="ptpic center">
<h3 class="pt center">My Name</h3>
<p class="center"><img src="images/me.jpg" alt="Me" width="320" height="350"></p>
<p class="me">Hi there</p>
Make sure you click on the actual text that says "My Name" because if you just click close to it, it might not exactly work. A good way to test it out is to put a background color on the target object (here it's either h3 or .pt) via CSS. Then, clicking anywhere inside that box should be okay!
If you instead wanted the text to toggle hide and show, then do this into your javascript:
$(document).ready(function(){
$(".me").hide();
$(".pt").click(function(){
$(".me").toggle();
});
});
This will alternate between show and hide every time you chick on the .pt block.
Hope this helps!
Okay, so I copied and pasted your code and made a few changes! These changes should fix them. Let me know if they work.
HTML:
<!--Here I ONLY added the id's into each h3 elements. They should not cause any damage to the code. I will tell you why at the end. -->
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="trainersptjavascript.js"></script>
</head>
<body>
<div class="trainers">
<h2 class="center">Choose your Personal Trainer</h2>
<div class="ptpics center">
<h3 class="pt center" id="h3_1">Jason O'Reilly</h3>
<p class="center"><img src="images/ptjay.jpg" alt="Westside Fitness PT Jason" width="320" height="350"></p>
<p class="ptdeats">Hi there , my name is Jay I am a personal trainer.</p>
</div>
<div class="ptpics center">
<h3 class="pt center" id="h3_2">Jean Meehan</h3>
<p class="center"><img src="images/ptjean.jpg" alt="Westside Fitness PT Jean" width="320" height="350"></p>
<p class="ptdeats">I am a qualified Level 4 Personal Trainer.</p>
</div>
<div class="ptpics center">
<h3 class="pt center" id="h3_3">Aoife McIntyre</h3>
<p class="center"><img src="images/ptaoife.jpg" alt="Westside Fitness PT Aoifendrew" width="320" height="350"></p>
<p class="ptdeats">I am Registered Nurse with a Personal Training Qualification.</p>
</div>
</div>
</body>
</html>
JAVASCRIPT:
//I simply modified the classes to put what you wanted it to do. I guess this was simply a class issue then? Because everything seems alright except that.
$(document).ready(function(){
$(".ptdeats").hide();
$(".pt").click(function(){
$(".ptdeats").show();
});
});
JAVASCRIPT, SUGGESTED:
//This should work better because you want the user to be able to remove that new added text if they want to. Just a minor suggestion. Toggle makes a hidden object to show and a shown object to hide.
$(document).ready(function(){
$(".ptdeats").hide();
$(".pt").click(function(){
$(".ptdeats").toggle();
});
});
JAVASCRIPT, ADDUP WITH ID'S, ALSO SUGGESTED:
//This is where the ID's come into play.
$(document).ready(function(){
$(".ptdeats").hide();
// console.log(this);
$(".pt").click(function(){
$("#"+this.id).next().next().toggle();
});
});
Explanation: The two first Javascript will show all the texts in all ".ptdeats" when you click on ".pt" because you tell JS to show ".ptdeats". Any HTML with that class will show.
Nevertheless, there's a cool trick in JS where you can find any specific attribute of the specific element that you clicked on. Also, if you're unfamiliar with "this", "this" basically designates the elements that you are on. For example, if you click on <h3 class="pt center" id="h3_1">Jason O'Reilly</h3>, even though you designated it on JS with ".pt", "this" refers specifically to <h3 class="pt center" id="h3_1">Jason O'Reilly</h3>. Try uncommenting the // console.log(this); and check your web console to see what I mean.
Finally, .next() in jQuery designates the very next element. In here it works only because of how you structured your HTML. The first .next() is the p tag with the image in it and the second one is the text you actually want to toggle.
This is better because it will toggle the text specific to the person you are clicking on!
Let me know if this works. I am confident it will: I copied and pasted from what you gave and made only minor changes. I also tested it on four different browsers: Opera, Mozilla, Chrome, and Safari. I don't have IE, so I am not sure how it will behave, but this is nothing too complicated so it should work as expected.
Related
I need to make a make elements within a div appear and disappear when the div is clicked. When then webpage is loaded, it should just say "Click here". After clicking, new text saying "Click here again" should appear under the original text. After clicking again, new text appears under that saying "Click once more". After clicking again, all that text is deleted and new text saying "Thank you" appears. After clicking again, that text is deleted and new text saying "Goodbye" appears. After clicking once more, everything is deleted including the box that the text appears in. I am new to this and don't really know what I'm doing, and I can't even get an alert message to pop up when the div is clicked, which seems like it should be pretty simple. Here is my html code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="project4.css">
<script src="prototype.js" type="text/javascript"></script>
<script src="project4.js" type="text/javascript"></script>
</head>
<body>
<div id="main" class="box">
<p id="clickHere">Click here</p>
<p id="clickHereAgain">Click here again</p>
<p id="clickOnceMore">Click once more</p>
<p id="thankYou">Thank you</p>
<p id="goodbye">Goodbye</p>
</div>
</body>
</html>
My javascript code to just try to get an alert to pop up:
$(document).ready(function(){
$("div").click(function(){
alert("The paragraph was clicked.");
});
});
And my css code:
.box {
background-color: green;
color: white;
width: 300px;
height: 200px;
padding: 10px;
text-align: center;
font-size: 30px;
}
Here is a raw solution for your problem in jQuery, you may just transfer the logic to prototype.js:
$(document).ready(function() {
// turn off your paragraphs and buttons
$("#click2").hide();
$("#click3").hide();
$("#click4").hide();
$("#button2").hide();
$("#button3").hide();
$("#button4").hide();
// click the first button and hide and show the next
$("#button1").click(function() {
$("#click1").hide();
$("#button1").hide();
$("#button2").show();
$("#click2").show();
});
// click the second button and hide and show
$("#button2").click(function() {
$("#click2").hide();
$("#button2").hide();
$("#button3").show();
$("#click3").show();
});
// then the third
$("#button3").click(function() {
$("#click3").hide();
$("#button3").hide();
$("#click4").show();
});
});
And your HTML code:
<p id="click1">This is paragraph 1</p>
<button id="button1">Click me</button>
<p id="click2">This is paragraph 2</p>
<button id="button2">Click me again</button>
<p id="click3">This is paragraph 3</p>
<button id="button3">Click me one more time</button>
<p id="click4">You are done clicking</p>
Not an elegant solution, but those are the basics of it, jQuery has a toggle() function, just in case you need to give the user the ability to show the paragraph again. replace .show() and .hide() with .toggle()
For starters, set a click observer for the div and all of its children:
$("div").observe('click', myHandler);
Then perform the show/hide operation in myHandler.
A working example:
// array of paragraph ids to show/hide
const ids = ["clickHere", "clickHereAgain", "clickOnceMore",
"thankYou", "goodbye"];
const idCount = ids.length;
let index = 0;
// add click listener to div
$("main").observe('click', myHandler);
// handle the click
function myHandler () {
if (index >= idCount - 1) return;
// hide the currently visible paragraph
$(ids[index]).addClassName('hide');
// show the next paragraph
index++;
$(ids[index]).removeClassName('hide');
}
.hide {
display: none;
}
.box {
background-color: green;
color: white;
width: 300px;
height: 100px;
padding: 10px;
text-align: center;
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.min.js" type="text/javascript"></script>
<div id="main" class="box">
<p id="clickHere">Click here</p>
<p id="clickHereAgain" class="hide">Click here again</p>
<p id="clickOnceMore" class="hide">Click once more</p>
<p id="thankYou" class="hide">Thank you</p>
<p id="goodbye" class="hide">Goodbye</p>
</div>
So right now I have a section that has 3 tabs on it. Each tab is supposed to bring up a different table while simultaneously hiding the other 2 tables. When the page loads up it shows the first table (which it is supposed to do), but when I click one of the other two tabs nothing happens. I realize this has to be done with a Javascript onclick but I'm not familiar with it yet to know what I'm doing. I unfortunately have a lot of code that goes into making this work so i wont be able to post it on here but ill grab the code i think is most important and if you need any more info let me know. Please and thankyou for your help.
The tabs are "Pavement Section Editor", "Traffic", and "Condition"
HTML:
<div class='row' style="background-color: white; vertical-align:top; height: 250px;">
<div class="fifthDiv">
<br />
<article style="float: left; width: 100%; margin-left: 25px; height:250px;">
<section class="tabSection" id="tabmain">
<h2 class="large" style="font-size: 12px;">
Pavement Section Grid
</h2>
<p><div id="table_div_Main"></div></p>
</section>
#foreach (var layer in lstLayers)
{
if (layer != "Pavement Section" && layer != "Cores" && layer != "Inventory")
{
<section id="#("tab" + layer.Replace(" ", ""))" class="tabSection">
<h2 class="medium" style="font-size: 12px;">#layer</h2>
<p><div id="#("table_div_" + layer.Replace(" ", ""))"></div></p>
</section>
}
}
</article>
</div>
</div>
JAVASCRIPT:
function drawSectionData(data) {
return drawMe(data, 'Pavement Section Data', 'table_div_Main');
};
function drawTrafficData(data) {
return drawMe(data, 'Traffic Data', 'table_div_Traffic');
};
function drawConditionData(data) {
return drawMe(data, 'Condition Data', 'table_div_Condition');
};
//what i got so far on the javascript
$(".tabSection").children("h2").on('click', function() { console.log(this.closest("section")); })
The best way to implement tabs in your scenatio is to use jQuery Tabs - very easy and almost no additional coding required, and as added benfit it is free
Based on the assumption that:
You want to hide only the content that sits within the p of each
section and not hide the whole section itself because that would
mean that your click-able h2 will also become invisible.
You have removed div from within your section and are only using p
because inline elements do not allow to contain a block (in your
case, a div) element inside it. [Link], [Link] & [Link].
Your JavaScript code then may look like this:
var tabSections=$('.tabSection'); // select all .tabSection elements
tabSections.not('#tabmain').find('p').hide(); // hide all p elements found within tabSections stored above excluding #tabmain
tabSections.find('h2').on('click',function(){ // assign clicks to all h2 elements found within tabSections
tabSections.find('p').hide(); // hide all p elements found within tabSections
$(this).siblings('p').show(); // show the p element which is a sibling to the clicked h2 element
});
Snippet:
var tabSections=$('.tabSection');
tabSections.not('#tabmain').find('p').hide();
tabSections.find('h2').on('click',function(){
tabSections.find('p').hide();
$(this).siblings('p').show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class='row' style="background-color: white; vertical-align:top; height: 250px;">
<div class="fifthDiv">
<br />
<article style="float: left; width: 100%; margin-left: 25px; height:250px;">
<section class="tabSection" id="tabmain">
<h2 class="large" style="font-size: 12px;">
Main
</h2>
<p id="table_div_Main">Pavement Data</p>
</section>
<section class="tabSection" id="tabTraffic">
<h2 class="medium" style="font-size: 12px;">
Traffic
</h2>
<p id="table_div_Traffic">Traffic Data</p>
</section>
<section class="tabSection" id="tabCondition">
<h2 class="medium" style="font-size: 12px;">
Condition
</h2>
<p id="table_div_Condition">Condition Data</p>
</section>
</article>
</div>
</div>
Hope this helps.
I want to change the font size of two divs when I click on a particular button however button click is not responding, pls help.
I am using two div IDs in one selector.
also pls let me know where is the error, below is my code.
<html>
<head>
<title>
Example 2
</title>
<style>
body
{
margin:10px 2em;
}
.switcher
{
float:right;
margin:10px;
background-color:#ddd;
border: 1px solid #000;
padding : 10px;
font-size:0.9em;
}
.large
{
font-size:2em;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function{
$('#switcher-large').on('click',function(){
$('#header, #chapter-preface').addClass('large');
});
});
</script>
</head>
<body>
<div id="container">
<div id="switcher" class="switcher">
<h3>Style Switcher</h3>
<button id="switcher-default">
Default
</button>
<button id="switcher-narrow">
Narrow Column
</button>
<button id="switcher-large">
Large Print
</button>
</div>
<div id="header">
<h2>A Christmas Carol</h2>
<h2 class="subtitle">In Prose, Being a Ghost Story of Christmas</h2>
<div class="author">by Charles Dickens</div>
</div>
<div class="chapter" id="chapter-preface">
<h3 class="chapter-title">Preface</h3>
<p>I HAVE endeavoured in this Ghostly little book, to raise the Ghost of an Idea, which shall not put my readers out of humour with themselves, with each other, with the season, or with me. May it haunt their houses pleasantly, and no one wish to lay it.</p>
<p>Their faithful Friend and Servant,</p>
<p>C. D.</p>
<p>December, 1843.</p>
</div>
</body>
</html>
You have a syntax error
Try replacing
$(document).ready(function{
for
$(document).ready(function(){
Try this
$('#header h2, #chapter-preface h3, #chapter-preface p').addClass('large');
I have made a simple Javascript on hover effect so when you hover a div the text is then displayed in the div below, but in IE7 only a random few will work such as 1,2,3,4,27,28 and a few others the rest just do not work?
Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
function menu (whichMenu,whatState){
if (document.getElementById)
{document.getElementById(whichMenu).style.visibility = whatState;}
else {document[whichMenu].visibility = whatState;}
}
function details(what){
myInfo={
"s1":"Flaunchin",
"s2":"Chimney stack",
"s3":"Ridge",
"s4":"Flashing",
"s5":"Barge board",
"s6":"Dormer",
"s7":"Water tabling",
"s8":"Purlin",
"s9":"Wall Plate",
"s10":"Rafters",
"s11":"Soffit",
"s12":"Insulation",
"s13":"Cold Water Storage Tank",
"s14":"Central Heating Header Tank",
"s15":"Felt and Battens",
"s16":"Slating or Tiling",
"s17":"Hip",
"s18":"Fascia or Eaves",
"s19":"Timber Stud Wall",
"s20":"Floor Joists",
"s21":"Hot Water Cylinder",
"s22":"Overflow Pipe",
"s23":"Cavity Brick or Block Wall",
"s24":"Wall Ties",
"s25":"Quoin Stone",
"s26":"Gutter and Rain Water Pipe",
"s27":"Felt with Stone Chippings on Decking",
"s28":"Fair Faced Brickwork",
"s29":"Damp Proof Course",
"s30":"Hardcore",
"s31":"Reveal",
"s32":"Timber, Concrete or Steel Lintel",
"s33":"Air Brick",
"s34":"Concrete Slab",
"s35":"Gulley with Granting",
"s36":"Soil and Vent Pipe",
"s37":"Manhole",
"s38":"Electricity Main",
"s39":"Solid Wall",
"s40":"Wall Plates on Sleeper Wall",
"s41":"Foul Drain",
"s42a":"Underpinning",
"s42b":"Underpinning",
"s43":"Interceptor Trap",
"s44":"Water Main"
}
detailsBox.innerHTML=myInfo[what]
}
</script>
<style>
body{width:980px;height:100%;margin:auto;margin-top:20px}
#imagebg{background:url(house.png);height:640px;width:715px;margin:auto}
.s1{width:20px;height:10px;margin-left:383px;margin-top:-615px}
.s2{width:20px;height:10px;margin-left:365px;margin-top:21px}
.s3{width:20px;height:10px;margin-left:430px;margin-top:-4px}
.s4{width:20px;height:10px;margin-left:380px;margin-top:12px}
.s5{width:20px;height:10px;margin-left:561px;margin-top:-5px}
.s6{width:20px;height:10px;margin-left:445px;margin-top:27px}
.s7{width:20px;height:10px;margin-left:320px;margin-top:-27px}
.s8{width:20px;height:10px;margin-left:380px;margin-top:30px}
.s9{width:20px;height:10px;margin-left:297px;margin-top:42px}
.s10{width:20px;height:10px;margin-left:355px;margin-top:-44px}
.s11{width:20px;height:10px;margin-left:339px;margin-top:31px}
.s12{width:20px;height:10px;margin-left:410px;margin-top:-37px}
.s13{width:20px;height:10px;margin-left:410px;margin-top:17px}
.s14{width:20px;height:10px;margin-left:452px;margin-top:15px}
.s15{width:20px;height:10px;margin-left:536px;margin-top:-74px}
.s16{width:20px;height:10px;margin-left:585px;margin-top:-29px}
.s17{width:20px;height:10px;margin-left:590px;margin-top:-35px}
.s18{width:20px;height:10px;margin-left:693px;margin-top:70px}
.s19{width:20px;height:10px;margin-left:636px;margin-top:41px}
.s20{width:20px;height:10px;margin-left:655px;margin-top:70px}
.s21{width:20px;height:10px;margin-left:475px;margin-top:-36px}
.s22{width:20px;height:10px;margin-left:448px;margin-top:22px}
.s23{width:20px;height:10px;margin-left:328px;margin-top:-105px}
.s24{width:20px;height:10px;margin-left:311px;margin-top:31px}
.s25{width:20px;height:10px;margin-left:278px;margin-top:-56px}
.s26{width:20px;height:10px;margin-left:267px;margin-top:26px}
.s27{width:20px;height:10px;margin-left:234px;margin-top:-23px}
.s28{width:20px;height:10px;margin-left:214px;margin-top:38px}
.s29{width:20px;height:10px;margin-left:204px;margin-top:43px}
.s30{width:20px;height:10px;margin-left:197px;margin-top:82px}
.s31{width:20px;height:10px;margin-left:300px;margin-top:-99px}
.s32{width:20px;height:10px;margin-left:328px;margin-top:-19px}
.s33{width:20px;height:10px;margin-left:327px;margin-top:60px}
.s34{width:20px;height:10px;margin-left:395px;margin-top:32px}
.s35{width:20px;height:10px;margin-left:423px;margin-top:33px}
.s36{width:20px;height:10px;margin-left:462px;margin-top:-90px}
.s37{width:20px;height:10px;margin-left:539px;margin-top:141px}
.s38{width:20px;height:10px;margin-left:585px;margin-top:-102px}
.s39{width:20px;height:10px;margin-left:589px;margin-top:-64px}
.s40{width:20px;height:10px;margin-left:610px;margin-top:22px}
.s41{width:20px;height:10px;margin-left:634px;margin-top:50px}
.s42a{width:20px;height:10px;margin-left:685px;margin-top:-2px}
.s42b{width:20px;height:10px;margin-left:742px;margin-top:-52px}
.s43{width:20px;height:10px;margin-left:780px;margin-top:-71px}
.s44{width:20px;height:10px;margin-left:723px;margin-top:-59px}
#detailsBox{font-size:25px;margin-top:230px;margin-left:155px;font-weight:bold}
</style>
</head>
<body>
<div id="imagebg"></div>
<div onMouseOver="details('s1')" class="s1"></div>
<div onMouseOver="details('s2')" class="s2"></div>
<div onMouseOver="details('s3')" class="s3"></div>
<div onMouseOver="details('s4')" class="s4"></div>
<div onMouseOver="details('s5')" class="s5"></div>
<div onMouseOver="details('s6')" class="s6"></div>
<div onMouseOver="details('s7')" class="s7"></div>
<div onMouseOver="details('s8')" class="s8"></div>
<div onMouseOver="details('s9')" class="s9"></div>
<div onMouseOver="details('s10')" class="s10"></div>
<div onMouseOver="details('s11')" class="s11"></div>
<div onMouseOver="details('s12')" class="s12"></div>
<div onMouseOver="details('s13')" class="s13"></div>
<div onMouseOver="details('s14')" class="s14"></div>
<div onMouseOver="details('s15')" class="s15"></div>
<div onMouseOver="details('s16')" class="s16"></div>
<div onMouseOver="details('s17')" class="s17"></div>
<div onMouseOver="details('s18')" class="s18"></div>
<div onMouseOver="details('s19')" class="s19"></div>
<div onMouseOver="details('s20')" class="s20"></div>
<div onMouseOver="details('s21')" class="s21"></div>
<div onMouseOver="details('s22')" class="s22"></div>
<div onMouseOver="details('s23')" class="s23"></div>
<div onMouseOver="details('s24')" class="s24"></div>
<div onMouseOver="details('s25')" class="s25"></div>
<div onMouseOver="details('s26')" class="s26"></div>
<div onMouseOver="details('s27')" class="s27"></div>
<div onMouseOver="details('s28')" class="s28"></div>
<div onMouseOver="details('s29')" class="s29"></div>
<div onMouseOver="details('s30')" class="s30"></div>
<div onMouseOver="details('s31')" class="s31"></div>
<div onMouseOver="details('s32')" class="s32"></div>
<div onMouseOver="details('s33')" class="s33"></div>
<div onMouseOver="details('s34')" class="s34"></div>
<div onMouseOver="details('s35')" class="s35"></div>
<div onMouseOver="details('s36')" class="s36"></div>
<div onMouseOver="details('s37')" class="s37"></div>
<div onMouseOver="details('s38')" class="s38"></div>
<div onMouseOver="details('s39')" class="s39"></div>
<div onMouseOver="details('s40')" class="s40"></div>
<div onMouseOver="details('s41')" class="s41"></div>
<div onMouseOver="details('s42a')" class="s42a"></div>
<div onMouseOver="details('s42b')" class="s42b"></div>
<div onMouseOver="details('s43')" class="s43"></div>
<div onMouseOver="details('s44')" class="s44"></div>
<div id="detailsBox">Hover Over the Numbers to Find the Answer</div>
</body>
</html>
Any Help would be great :D
(You can also view it http://cameronmlewis.com/house/)
Sorry, but it took some time figuring out what is going wrong in IE7, but I think I've found your problem. You've been using margin-left and margin-top to reposition automatically aligned images. For most browsers this works fine, but IE up to and including IE7 this is buggy at best. As a result here, the body element is drawn on top of some of the hover DIVs.
If you have IE8+ you can see this by using the Developer Tool . You can do this by pressing F12 after the page is fully loaded, set the browser mode to IF7 and then use the 'Select element by click'-tool (CTRL+B) to try and select the DIVs you created. You will notice that you can only select the elements on top of the body element (those will also change the text on hover).
Best option is to use 'position: absolute;' and 'z-index' if you want to reposition DIVs like this. Also to clean up your CSS I would suggest you do the following:
<style>
.hoverDiv {
height: 10px;
position: absolute;
width: 20px;
z-index: 9999;
}
.s1 {
left: 300px;
top: 10px;
}
.s2 {
left: 350px;
top: 130px;
}
</style>
After which you can make your DIVs like this:
<div class="hoverDiv s1"> </div>
This uses CSS inheritance to clean up your code (less repetition) and makes it a lot easier to do small edits. Furthermore, I would take a look at using some of the DIVs parameters to store your text's, instead of placing them into the JavaScript - but that's up to you.
So I have a div whose content is generated at runtime it initially has no height associated with it. When it's generated according to firebug and from what I can alert with js the div still has a height of 0. However, looking at the read-only properties with firebug I can see that it has an offset height of 34. It's this value that I need. Hopefully it's obvious but in case it isn't, this number is variable, it's not always 38.
So, I thought that I could just get that by doing this via jquery...
$("#parentDiv").attr('offsetHeight');
or this with straight js...
document.getElementById("parentDiv").offsetHeight;
But all that is returned is 0. Does it have anything to do with the fact that offset height is a read-only property in this instance? How can I get this height? I mean firebug is figuring it out somehow so it seems like I should be able to.
Edit:
Here's a sample of what the div looks like right now...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<HTML style="OVERFLOW: hidden; HEIGHT: 100%" xmlns="http://www.w3.org/1999/xhtml"><BODY><FORM id="aspnetForm" name="aspnetForm" action="blah.aspx" method="post"><DIV id="container">
<DIV id="ctl00_BodyContentPlaceHolder_Navigation" style="Z-INDEX: 1; LEFT: 1597px; POSITION: absolute; TOP: 67px">
<DIV class="TransparentBg" id="TransparentDiv" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; HEIGHT: 94px; TEXT-ALIGN: center">
</DIV>
<DIV class="Foreground" id="ForegroundId" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; TEXT-ALIGN: center">
<DIV id="ctl00_BodyContentPlaceHolder_Navigation1" style="WIDTH: 52px; COLOR: black; HEIGHT: 52px; BACKGROUND-COLOR: transparent; -moz-user-focus: normal">
<IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale src='../images/image.gif'); CURSOR: pointer" height="52" hspace="0" src="..." width="52" />
</DIV>
<DIV id="ctl00_BodyContentPlaceHolder_UserControl" name="ctl00_BodyContentPlaceHolder_UserControl">
<IMG style="DISPLAY: block; VERTICAL-ALIGN: bottom; CURSOR: pointer" height="17" src="..." width="16" />
<IMG style="VERTICAL-ALIGN: top; CURSOR: pointer" height="17" src="..." width="16" />
</DIV>
</DIV>
</DIV>
</DIV></FORM></BODY></HTML>
This code is being generated by a control in a separate library. So here's the actual code creating it in my .aspx page.
<blah:blahControl ID="control" runat="server" />
Ok, it's edited slightly but thats a whole lot more HTML than I had before. The div I was referring to as "parentDiv" before is called "ctl00_BodyContentPlaceHolder_UserControl" up there. That code includes the div in question, it's sibling, parent, grandparent and children. It's almost a direct copy from firebug.
Update:
I should have mentioned this is being done in IE 7. It seemed to work fine one time in Firefox, but it's returning 0 now. Does this provide any new insights of possible work-arounds or anything?
... You all must think I'm nuts.
Update:
Some styling...
.TransparentBg
{
background-color: white;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.Foreground
{
position: absolute;
top: 0px;
}
Are you sure the element is included in the document tree, and rendered? (ie. not “display: none”, but “visibility: hidden” is OK.)
An element that is not actually taking part in the document render process has no dimensions, and will give an offsetWidth/Height of 0.
ETA after code sample added: with your exact code, I get offsetHeight on the div of ‘17’. The first image is sized correctly, the second has no size.
This is correct as rendered(*). Any images that fail to load are replaced by their alt text as an inline span. Your image has no alt text, so it is replaced by an empty string. Normally, as an inline element, this cannot be set to any particular size. The exception is the first image, because you've given it ‘display: block’, which makes it amenable to the explicit sizing provided by width/height.
In Quirks Mode, you would have got little ‘broken image’ icons sized the same as the images were supposed to be. This does not happen in Standards Mode because it is assumed that you know how to use alt text properly if you're using standards.
Either way, the dimensions measurement works fine for me if I replace the "..." URLs with real working addresses.
(*: although you can't actually see it because of the rather weird ‘overflow-hidden’ on html and ‘left: 1597px;’ combo. Well, unless you have a really wide monitor!)
Are you sure it's not a Heisenbug? If you are setting the height somewhere programmatically and then trying to read it soon later, there is a chance DOM would not have updated.
Loading this file with a valid IMG SRC gives 3 alert boxes of "37". Without valid IMG SRC it gives "17" on all three.
What version of Jquery are you using? And which version of FireFox/IE?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<HTML style="OVERFLOW: hidden; HEIGHT: 100%" xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<script type="text/javascript" src="jquery.js"></script>
</HEAD>
<BODY>
<FORM id="aspnetForm" name="aspnetForm" action="blah.aspx" method="post">
<DIV id="container">
<DIV id="ctl00_BodyContentPlaceHolder_Navigation" style="Z-INDEX: 1; LEFT: 1597px; POSITION: absolute; TOP: 67px">
<DIV class="TransparentBg" id="TransparentDiv" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; HEIGHT: 94px; TEXT-ALIGN: center">
</DIV>
<DIV class="Foreground" id="ForegroundId" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; TEXT-ALIGN: center">
<DIV id="ctl00_BodyContentPlaceHolder_Navigation1" title="Click to pan the map." style="WIDTH: 52px; COLOR: black; HEIGHT: 52px; BACKGROUND-COLOR: transparent; -moz-user-focus: normal">
<IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale src='../images/image.gif'); CURSOR: pointer" height="52" hspace="0" src="..." width="52" />
</DIV>
<DIV id="ctl00_BodyContentPlaceHolder_UserControl" name="ctl00_BodyContentPlaceHolder_UserControl">
<IMG style="DISPLAY: block; VERTICAL-ALIGN: bottom; CURSOR: pointer" height="17" src="je_fanmap_unavailable.JPG" width="16" />
<IMG style="VERTICAL-ALIGN: top; CURSOR: pointer" height="17" src="je_fanmap_unavailable.JPG" width="16" />
</DIV>
</DIV>
</DIV>
<script type="text/javascript">
$(window).load(function () {
alert($("#ctl00_BodyContentPlaceHolder_UserControl").attr('offsetHeight'));
alert(document.getElementById("ctl00_BodyContentPlaceHolder_UserControl").offsetHeight);
alert($("#ctl00_BodyContentPlaceHolder_UserControl").height());
});
</script>
</DIV>
</FORM>
</BODY>
Try calling the offset function once all the DOM and images are fully loaded using load() instead of document.ready().
$(window).load(function () {
//Put the code for the height here
});
I just found an issue where I was getting the offsetHeight of an element when the doc was ready but it was in a container that was hidden.
It resulted in a offsetHeight value of 0 but firebug said it had a height of 32.