|
JavaScript - Balancing Div Tags
Hi, hope someone can see an answer here. I have 4 div tags which are hidden to begin with from the css as shown below:
Code: #story1 {float:left;width:100%;display:none;background:#333;color:#fff;vertical-align:top;}
#story2 {float:left;width:100%;display:none;background:#333;color:#fff;vertical-align:top;}
#story3 {float:left;width:100%;display:none;background:#333;color:#fff;vertical-align:bottom;}
#story4 {float:left;width:100%;display:none;background:#333;color:#fff;vertical-align:bottom;}
The contents of these is pulled out of a db and so the quantity of text changes (within certain parameters) and so the size of the divs changes, hence no height: setting. I know I could get around this by setting an absolute height and using overflow to show a scrollbar but I would rather not have a scrollbar as the amount of text will only be 100-200 words. Elsewhere I have used the following script to equalise div tags Code: if (document.getElementById("member1").offsetHeight < document.getElementById("member2").offsetHeight){
document.getElementById("member1").style.height = document.getElementById("member2").offsetHeight + "px";
}
else {
document.getElementById("member2").style.height = document.getElementById("member1").offsetHeight + "px";
}
I tried this for my div tags but because they initially start with display:none it sets the height of them to zero. Is there a simple way to make all of these the same height whilst they are hidden? Similar TutorialsI'm looking for something that allows me to add tags to a photo like this website: http://fukung.net By clicking add tag it opens a input box and once added adds to a DB. How would I do something along those lines? Where to put the <ol>&&</ol> tags so everytime i run the javascript it numbers each indivdiual items which the javascript is looping. Code: <table border="2"table align="center" cellpadding="40">
<tr>
<th width="80%"> Questions & Time</th>
<th>Status</th>
</tr>
<tr>
<td><% for (int i=0; i < theList.size(); i++) {%>
<tr>
<td><%= theList.elementAt(i)+ " " + theTime.elementAt(i) %>
<% }%>
</td>
<td>Where is the pending goes:</td>
</tr>
<tr>
</table>
hi Guys , I have some instructions in property files , now I wat to retrive that fmt tag values in scriptlets So that I can modify the content in property file So i have written the code in jsp as <c:set var="mailBodyData" value='<fmt:message key="confirmemail.body.message"/>' scope="request"/> <% out.println("hero "+request.getAttribute("mailBodyData")); %> but its displays empty , Also I have tried as <% String str ="<fmt:message key="confirmemail.body.message"/>' %> but its throughs the Compilation error , Pls help , So that I can retrive the data from fmt to Scriptlets I'm using forum with bb rich text editor, the problem that sometimes when a user copy and paste content, there ere extra codes that are not supported like: Code: [highlight=#ff0000][/highlight] [blockquote][/blockquote] [CENTER ALIGN=CENTER][/CENTER ALIGN] Can you help me to write a script that automatically reformat the html content when pasted and only keeps specified tags like [img],[url],[b], defined in array ... If it is not possible to reformat content when paste, I can add a button to the editor and call that function to format the content and return plain text with a specific tags. I tried this script: Code: function removeHtmlTag(strx){
if(strx.indexOf("[")!=-1)
{
var s = strx.split("[");
for(var i=0;i<s.length;i++){
if(s[i].indexOf("]")!=-1){
s[i] = s[i].substring(s[i].indexOf("]")+1,s[i].length);
}
}
strx = s.join("");
}
return strx+'';
}
It made to strip html tags, I replaced <> with [], It removes all tags and don't put space instead of the removed tags, example: Code: hello[h1]Name[/h1] Will be like : helloName ??? I got an idea to make a stupid trick, like converting [IMG] to {IMG} and run that function and re convert {IMG} to [IMG] ... Please help, I'm not good in Regular Expressions. Thanks for your time, Regards. I was wondering how somebody might be able to do the recognizing text between the php tags and making it into colored text in its own colored area like codingforums has done.
I have been working on this code for days and I cannot get it right!!! Can anyone please give me any pointers. It should have an error message that pops up on same line as text boxes when into is not entered property! Thanks in advance! NewBanks <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> function validate(){ var errorList = new Array(); var eMail = document.getElementById("email").value; var passwrd = document.getElementById("password").value; var cPassword = document.getElementById("confirmPassword").value; var secQuest = document.getElementById("securityQuestion").value; var secAns = document.getElementById("securityAnswer").value; var regEx = /^\s*[\w\\+_]+(\.[\w\\+_]+)*\@[\w\\+_]+\.[\w\\+_]+(\.[\w\\+_]+)*\s*$/; if(!regEx.test(eMail)){ errorList[errorList.length] = ("You must enter a valid email address!<br/>"); valid = false; } if(passwrd == "" || passwrd.length <6){ errorList[errorList.length] = ("Your password must be 6 characters long! <br/>"); valid = false; } if(passwrd != cPassword){ errorList[errorList.length] = ("Passwords do not match! <br/>"); valid = false; } if (secAns == ""){ errorList[errorList.length] = ("Please enter your Security Answer! <br/>"); valid = false; } if(errorList.length > 0){ for(var i = 0; i < errorList.length; i++){ document.getElementById("errors").innerHTML += errorList[i]; } return false; } else return true; window.onload = function() { 0(); } } </script> </head> <body> <form id="login" action="confirm.html"method="get" onsubmit="return validate();"/> Email: <input type="text" name="email" id="email" onblur="validate(this);" /> <br/><span id = "Invalid Email"></span> Password: <input type="text" name="password" id="password" onblur="validate(this);" /> <br/><span id = "Incorrect Password"></span> Confirm Password: <input type="text" name="password" id="confirmPassword" onblur="validate(this);" /> <br/><span id = "Invalid password"></span> Security Question: <select id = "securityQuestion" onblur="validate(this);"> <option value= "maiden" >What is your mother's maiden name </option> <option value= "animal"> What is your favorite animal </option> </select> <br/> <input type="text" name="securityAnswer" id="securityAnswer" onblur="validate(this);" /> <br/><span id = "Security Answer does not match"></span> <p><input type = "Submit" /></p> <span id = "errors"> </span> </form> </body> </html> As is in order to trigger the text turning back to black it seems I need to put the lines like below one by one for all the id's. I'm wondering if there is a less lengthy way to get this done? // JavaScript Document function CheckTheForm() { var result = true; var msg=""; document.getElementById('maincontactemail').style.color='#000000'; document.getElementById('maincontact').style.color='#000000'; Hello, I have a simple form with simple validation. I am just playing around a bit with forms and don't really have concrete knowledge. What I have done is created a form. Asking for first name, last name, age and email. When the user clicks the submit button I want 2 functions to run, the first checking the input is correct and also making sure all fields have a value. Once everything is checked and is O.K I want to go into another function which sends all this information to an array one by one. I am having difficulty accessing each individual input tag. I could achieve what I want to do, but it will take double the lines of code because each input has a different 'name'. So, what I am trying to do is access the input tags the same as you would do an array. Here is my code: HTML: Code: <form name="regForm" id="form"> <fieldset> <legend>Real Heroes - Registration Form</legend> <p>First Name:<input type="text" size="30" maxlength="20" name="txtFirstName" /></p> <p>Last Name:<input type="text" size="30" maxlength="20" name="txtLastName" /></p> <p>Age:<input type="text" size="30" maxlength="3" name="txtAge" /></p> <p>Email Address:<input type="text" size="30" maxlength="50" name="email" /></p> <p><input type="button" value="Submit Registration" name="butChkForm" onclick="callFuncs_onclick()" /> <input type="reset" value="Reset" name="resetForm" /></p> </fieldset> </form> JavaScript: Code: //CALLING THE FORM SCRIPTS//
function callFuncs_onclick()
{
chkForm_onclick();
creatingDatabase_onclick();
}
//**************FORM VALIDATION***************//
function chkForm_onclick()
{
var theForm = document.regForm;
if (theForm.txtFirstName.value == "" || theForm.txtLastName.value == "" || theForm.txtAge.value == ""
|| theForm.email.value == "")
{
alert("Please complete all of the form.");
if (theForm.txtFirstName.value == "")
{
theForm.txtFirstName.focus();
}
if (theForm.txtLastName.value == "")
{
theForm.txtLastName.focus();
}
if (theForm.txtAge.value == "")
{
theForm.txtAge.focus();
}
if (theForm.email.value == "")
{
theForm.email.focus();
}
}
else if (isNaN(theForm.txtAge.value))
{
alert("That is not valid input for this field. Please re-enter your age.");
theForm.txtAge.focus();
}
else
{
alert("Thank you for completing the form, " + theForm.txtFirstName.value);
}
}
function creatingDatabase_onclick()
{
var form = document.regForm;
var index = form.input[0].value;
alert(index);
}
I'm not quite sure where I am going wrong. Please note that these functions really labour the point, I know I have way too many lines of code but I am still very amateur with JS. Thank you for any help/information. Kind Regards, LC. Hi, How I get the images tags from an HTML page with Javascript (SRSc)? Regards FG Hi there... I have a question for the following code (a callback func for ajax) Code: function callBackFunctionForAddAdmin(data)
{
alert(data);
}
If we get the following alert message Quote: <result><error>the given userid is already admin.please enter another one.. </error></result> How do i extract the data inside the "error" tag?? (first checking if it exists and then if so extracting it) Hopefully this is a simple problem with a simple solution but I cannot find it as of yet. Here is an example: The following is a link that goes nowhere, it has a mouseover listener function registered. The function works in firefox but not IE. I have also tried to 'attachEvent' for IE instead of 'addEvent' but this too does nothing. Is it possible to attach a mouseover to an anchor tag in ie or am I wasting my time? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById('test').addEventListener('mouseover',function(e){ alert("mouseover"); }, false);
}
</script>
</head>
<body>
<a href="#" id="test">mouseover</a>
</body>
</html>
-Jon I forgot how to do this. I did this a long time ago but have deleted the example. I want to absolute position 11 scrolling div tags of the same dimensions with the same top and left positions. In other words, on top of each other. This is easy. What I can't remember how to do is trigger them so one shows up and the others are hidden. Code: <style>
.one {
position:absolute;
top:200px;
left:0px;
background:skyblue;
width:250px;
height:250px;
}
.two {
position:absolute;
top:200px;
left:0px;
background:aqua;
width:250px;
height:250px;
}
</style>
<input type="button" onClick="" value="one">
<input type="button" onClick="" value="two">
<div class="one">one</div>
<div class="two">two</div>
Hello there, I have one drop down list having some characters name. I have created this list dynamically using javascript. I have <h3> tag in html having same characters' name using that I had created drop down list. There are <blockquote> along with <h3> tag which is speech of that character. I have to generate the javascript in such a way that, if character "A" is selected and sppech belong to that character should be visible. Is any one help me? my following code able to match <h3> tags and hiding it but not working properly. Please help me out. Code:
function selectedOption()
{
var indx = newSel.selectedIndex;
var selectedText = newSel.options[indx].text;
h3Tag = document.getElementsByTagName("h3");
var nestedH3;
//alert(h3Tag);
bQuote = document.getElementsByTagName("blockquote");
for(var i=0; i<h3Tag.length; i++)
{
tagName[i]=h3Tag[i].innerHTML;
if(selectedText != tagName[i] && selectedText != "Show All Lines")
{
//alert("Char: "+tagName[i]);
h3Tag[i].style.display = "none";
bQuote[i].style.display = "none";
}
else if(selectedText == "Show All Lines")
h3Tag[i].style.display = "block";
}
}
I'm working on a greasemonkey script that requires me to append a tag before each instance of a tag with a specific class name. It works when there's no parent tags but when it goes into levels deep it doesn't work. So how can I use insertbefore?
I have the following HTML code: Quote: <form id="registration" action="/cgi-bin/registration.cgi" method="POST" onsubmit="return control()"> <fieldset> <legend>Legend 1</legend> <label>......</label> <input ..../><br/> <label>......</label> <input ....onclick="return orgreg()"/><br/> </fieldset> <fieldset> <legend>Legend 2</legend> <label>......</label> <input ..../><br/> <label>......</label> <input ..../><br/> <label>......</label> <input ..../><br/> <label>......</label> <input ..../><br/> <label>......</label> <input ..../><br/> </fieldset> ........ ........ and the following javascript code: Quote: function orgreg() { if (document.getElementById) { alert(document.getElementById("registration").firstChild); } } The output of alert window is [Object Text]. My question is: first child is first fieldset tag or not. Because I want insert (with insertBefore) an other fieldset block after first child. I am trying to replace all newline characters with <br /> tags. The following two javascript functions that I've found, work in Firefox but do not work in Internet Explorer (I have version 7 installed on my machine). I would really appreciate any pointers on how to get this done. Thank you! Joe PS: I am using jQuery to call these functions. And this is how my JSP page looks like. Code: <html>
<head>
<title>New Line Replacement</title>
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function replaceNewLine(myString) {
var regX = /\r\n|\r|\n/g;
var replaceString = '<br />';
return myString.replace(regX, replaceString);
}
$().ready(function(){
$(".replace-text").each(function(i) {
var sBody = $(this).html();
$(this).html(replaceNewLine(sBody));
});
});
/*
function nl2br(text){
text = escape(text);
var re_nlchar;
if(text.indexOf('%0D%0A') > -1){
re_nlchar = /%0D%0A/g ;
}else if(text.indexOf('%0A') > -1){
re_nlchar = /%0A/g ;
}else if(text.indexOf('%0D') > -1){
re_nlchar = /%0D/g ;
}
return unescape( text.replace(re_nlchar,'<br />') );
}
*/
</script>
</head>
<body>
<div class="replace-text">${model.paraOne}</div>
<div class="replace-text">${model.paraTwo}</div>
</body>
</html>
Hi, I have a regular expression which removes anything between <script> and </script> tags. The problem comes when there is more than one on a page, eg. Code: <script>lose this</script> content I want to keep <script>lose this</script> Everything in that string is removed... how can I limit it to complete tags only? I did a search but could only find ones that either remove tags only, or have the same problem as mine. Cheers, Gus Hello, I'm pretty sure this is a Javascript issue, despite the subject line of this message. I'm using Javascript to create a popup window on my site. Users click on the link and get a popup with supplemental information about the item they clicked on. Works great. The html link to open the popup looks like this: Code: <a href="javascript:popup(xMoreInfo_popup)" onMouseOut="clearEl();">Click HERE for more information</a> ...where "xMoreInfo_popup" is a variable that tells the "popup" function which information (html code) to display. This then connects to a Javascript function that looks like this: Code: var popupWin
var wholeWin
function popup(term) // write corresponding content to the popup window
{
popupWin = window.open("", "puWin", "width=800,height=620,scrollBars,dependent,resizable");
popupWin.document.write(htmlOpener);
popupWin.document.write(term);
popupWin.document.write(htmlCloser);
popupWin.document.close(); // close layout stream
popupWin.focus(); // bring the popup window to the front
}
As I said, this popup function works great, in both IE and Firefox. I've been using it for years. Recently, though, there has been so much information in the popup window that I decided to break it up into two catagories. Let's call them "MAIN" and "SUPPLEMENT". I first display the MAIN information and directly below that is the SUPPLEMENTAL information. I want my users be be able to directly navigate down to the SUPPLEMENTAL information without scrolling, so I added an "href name tag" into the html code that is displayed. The html looks like this (shortened for brevity): Code: HEADER INFORMATION<br> <a href="#supplemental">GO TO SUPPLEMENTAL</a><br> MAIN INFORMATION IS DISPLAYED HERE AND IT MAY BE QUITE LARGE <a id="supplemental"></a> SUPPLEMENTAL INFORMATION HERE Now to my problem. This works as expected and just perfectly in IE. If the user clicks on the GO TO SUPPLEMENTAL link, it autoscrolls down to the supplemental information. In Firefox, however, it behaves quite oddly. Instead, when the link is clicked, the popup window displays the html from the original parent, rather than the information in the popup window! Now I can click on the original "parent window" link in the popup window, then it shows the popup information again in the same popup window, but autoscrolled to the proper place this time. I'm pretty sure this is a Javascript problem because something about the way I'm opening the popup window is causing the named tag to want to go back to the parent window, rather than the current popup window. Any advise is greatly appreciated. Robert San Antonio, Texas Is there a way so that I can move the submit button outside of the form tags? and if this is possible, can you make it with multiple text boxes, each with their corresponding submit button? heres the coding Code: <html>
<head>
<script type="text/javascript">
<!--
function gotoURL() {
var newURL = document.url2go.go.value
document.location.href=newURL
}
//-->
</script>
</head>
<body>
<form action="javaScript:gotoURL()" method="get" name="url2go">
<input type="text" name="go" value="http://" size="50">
<INPUT TYPE="image" SRC="" id="go" HEIGHT="150" WIDTH="150" BORDER="0" ALT="Submit Form">
</form>
</body>
</html>
Hi I implemented some coding tor create a random image on the page with a corresponding 'alt' tag and all was fine for a while... Then I got ambitions and modified the script to generate code that would generate two seperate sets of random image and associated 'alt' tag pairs.... and all seemed fine for a while.... ... however after having used the code on my page for a while I notice that occasionally I get a broken file link to the image which then fails to show... and shows the 'alt' text of "undefined". All the code links to images are correct and all images DO show from time to time with the tags.... only occasionally this extra blank/undefined pair is generated. Anyone have any ideas? Here's the code... Code: <SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = 'images/240 Images/belmarsh-peat-240.jpg'
theImages[1] = 'images/240 Images/98-florence-rd-maidstone240.jpg'
theImages[2] = 'images/240 Images/boxgrove-biface-240.jpg'
theImages[3] = 'images/240 Images/Fieldwalking2-240.jpg'
theImages[4] = 'images/240 Images/Hawkinge-Pot-240.jpg'
theImages[5] = 'images/240 Images/Justin_Barton-240.jpg'
theImages[6] = 'images/240 Images/StaffPages/Hadrians-Wall.jpg'
theImages[7] = 'images/240 Images/Chilley_Farm_Pevensey240.jpg'
// do not edit anything below this line
var theImages2 = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages2[0] = 'images/LeafletImages/Fronts/Building/Building4.jpg'
theImages2[1] = 'images/LeafletImages/Fronts/Fieldwork/Fieldwork4.jpg'
theImages2[2] = 'images/LeafletImages/Fronts/Finds/Finds4.jpg'
theImages2[3] = 'images/LeafletImages/Fronts/Forensic/Forensic4.jpg'
theImages2[4] = 'images/LeafletImages/Fronts/GeoArch/GeoArch4.jpg'
theImages2[5] = 'images/LeafletImages/Fronts/Heritage/Heritage4.jpg'
theImages2[6] = 'images/LeafletImages/Fronts/Landscape/Landscape4.jpg'
// do not edit anything below this line
var theAlts = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theAlts[0] = 'Peat bog excavations at Belmarsh Prison.'
theAlts[1] = 'An archaeological watching brief underway in Maidstone, Kent.'
theAlts[2] = 'A flint biface hand-axe the from Boxgrove excavations, West Sussex.'
theAlts[3] = 'Fieldwalking.'
theAlts[4] = 'Excavation of a cremation urn at Hawkinge, Kent.'
theAlts[5] = 'An MA Student from University College London a records ceramic vessel.'
theAlts[6] = 'The Hadrian’s Wall Management plan was prepared in consultation with Archaeology South-East (Copyright - Image by Simon Warner).'
theAlts[7] = 'Historic Building Recording at Chilley Farm, Pevensey.'
var theAlts2 = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theAlts2[0] = 'Building Recording Services.'
theAlts2[1] = 'Fieldwork Services.'
theAlts2[2] = 'Finds and Environmental Specialist Services.'
theAlts2[3] = 'Forensic Archaeology.'
theAlts2[4] = 'Geoarchaeological Services.'
theAlts2[5] = 'Heritage Management Services.'
theAlts2[6] = 'Landscape Research Services.'
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'" border="1" alt="'+theAlts[whichImage]+'">');
}
function showImage2(){
document.write('<img src="'+theImages2[whichImage]+'" border="0" alt="'+theAlts2[whichImage]+'">');
}
// End -->
</script>
and its called by the code... Code: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin showImage(); // End --> </script> and.. Code: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin showImage2(); // End --> </script> Many thanks in advance. |
|||||||