JavaScript - Using Javascript To Add Page Breaks In The Correct Place - I Need A Lot Of Help

I am displaying a webpage from external domain in an iframe on my site. The webpage being shown in iframe has a header image that I would like to not appear when someone visits my site. Is it possible using Javascript or otherwise to have the iframe scrolled down by a certain pixels by default?

I've got a page (hrnewseastanglia.com) where I have to use a jquery function to stretch the body to the user's window height if it isn't already.

In the same code I also use a condition that if the body is bigger than the user's window, the content has a padding to stop it going over the grass.

The reason I need to do the resize is because I have a background image that needs to sit at the very bottom of the page (with no bar or gap below it). The reason the padding can only exist when the body is bigger than the window is because it will put a scrollbar on pages that shouldn't have them.

It works great, but the only trouble is that if somebody decides to resize their window on a page that fits in it - it breaks.

This is my script:
Code:

<script type="text/javascript">

$(document).ready( function() {
	
	stretch_portal_content();
	$(window).resize( stretch_portal_content );
});

function stretch_portal_content() {
	// if the body isn't at least as big as the user's window - force it to be
	if( $(window).height() > $('body').height() ) {
		$( '#wrapper' ).height(
			$(window).height() - ( $('body').height() - $('#wrapper').height() )
		);
	}
	
	// if the content goes beyond the window make sure it doesn't go beyond the grass at the bottom
	if( $(window).height() < $('#wrapper').height() ) {
		$( '#wrapper' ).css("padding-bottom", '130px');
	}

}

</script>

I've been scratching my head over this for hours but haven't come up with a solution. If anyone can help I'd really appreciate it!

The title says it all really.

An example of the cufon breaking is when I add a product to my cart,

example here http://joemeetsjoy.com/products

When you click buy now then click ok on the pop up box the cufon breaks.

It also happens if you go the the shopping cart and choose a shipping option.

Any ideas why this happens.

Thanks

Hi,

I have the below javascript that insert smiles for me.
But in Firefox, it is inserting at the bottom of the message

Edit: This only happens when there in no text input first before the smile.

For exmple
Quote:


-- Original Message ---
test send :-)
-- End Original Message --- ;-)
I would like it be inserted, like
Quote:
;-)

-- Original Message ---
test send :-)
-- End Original Message ---
Note: ;-) would be the smile


It works fine in Internet Explorer, but Firefox, put it in the wrong place, can anyone help.

The javascript code I use is below:

Code:

//Smile Start

var myAgent   = navigator.userAgent.toLowerCase();
var myVersion = parseInt(navigator.appVersion);

var is_ie  = ((myAgent.indexOf("msie") != -1)  &&  (myAgent.indexOf("opera") == -1));
var is_nav = ((myAgent.indexOf('mozilla')!=-1) &&  (myAgent.indexOf('spoofer')==-1)
                    && (myAgent.indexOf('compatible') == -1)  &&

(myAgent.indexOf('opera')==-1)
                    && (myAgent.indexOf('webtv') ==-1)        &&

(myAgent.indexOf('hotjava')==-1));

var is_win = ((myAgent.indexOf("win")!=-1) ||  (myAgent.indexOf("16bit")!=-1));
var is_mac = (myAgent.indexOf("mac")!=-1);

function smile( txt ) {
//    document.all.txtmessage.value = document.all.txtmessage.value +  txt;
//        return false;
    doInsert(" " + txt + " ", "",  false,document.getElementById('txtmessage'));             
}
function smile2( txt ) {
    doInsert(" " + txt + " ", "",  false,document.getElementById('txttemplate'));
}
function smile3( txt ) {
    doInsert(" " + txt + " ", "",  false,document.getElementById('txtcomments'));
}


function doInsert(ibTag, ibClsTag, isSingle, name_txt)
{
    var isClose = false;
    var obj_ta = name_txt;


    //----------------------------------------
    // It's IE!
    //----------------------------------------
if ( (myVersion >= 4) && is_ie && is_win)
//    if ( (ua_vers >= 4) && is_ie && is_win)
    {
        if (obj_ta.isTextEdit)
        {
            obj_ta.focus();
            var sel = document.selection;
            var rng = sel.createRange();
            rng.colapse;
            if((sel.type == "Text" || sel.type == "None") && rng  != null)
            {
                if(ibClsTag != "" && rng.text.length > 0)
                    ibTag += rng.text + ibClsTag;
                else if(isSingle)
                    isClose = true;

                rng.text = ibTag;
            }
        }
        else
        {
  //-- mod_bbcode begin
          // this should work with Mozillas
          if ( (myVersion >= 4) && is_win) {
              var length = obj_ta.textLength;
              var start = obj_ta.selectionStart;
              var end = obj_ta.selectionEnd;
              if (end == 1 || end == 2)
                  end = length;
              var head = obj_ta.value.substring(0,start);
              var rng = obj_ta.value.substring(start, end);
              var tail = obj_ta.value.substring(end, length);
              if( start != end ){
                  if (ibClsTag != "" && length > 0)
                      ibTag += rng + ibClsTag;
                  else if (isSingle)
                      isClose = true;
                  rng = ibTag;
                  obj_ta.value = head + rng + tail;
                  start = start + rng.length;
              }
              else{
                  if(isSingle)
                      isClose = true;
                  obj_ta.value = head + ibTag + tail;
                  start = start + ibTag.length;
              }
              obj_ta.selectionStart = start;
              obj_ta.selectionEnd = start;
          }
          else {
  //-- mod_bbcode end 
                if(isSingle)
                {
                    isClose = true;
                }
               
                obj_ta.value += ibTag;
    //-- mod_bbcode begin
         }
    //-- mod_bbcode end         
        }
    }
    //----------------------------------------
    // It's MOZZY!
    //----------------------------------------
   
else if ( obj_ta.selectionEnd )
    {
        var ss = obj_ta.selectionStart;
        var st = obj_ta.scrollTop;
        var es = obj_ta.selectionEnd;
       
        if (es <= 2)
        {
            es = obj_ta.textLength;
        }
       
        var start  = (obj_ta.value).substring(0, ss);
        var middle = (obj_ta.value).substring(ss, es);
        var end    = (obj_ta.value).substring(es, obj_ta.textLength);
       
        //-----------------------------------
        // text range?
        //-----------------------------------
       
        if (obj_ta.selectionEnd - obj_ta.selectionStart > 0)
        {
            middle = ibTag + middle + ibClsTag;
        }
        else
        {
            middle = ibTag + middle;
           
            if (isSingle)
            {
                isClose = true;
            }
        }
       
        obj_ta.value = start + middle + end;
       
        var cpos = ss + (middle.length);
       
        obj_ta.selectionStart = cpos;
        obj_ta.selectionEnd   = cpos;
        obj_ta.scrollTop      = st;

    }
    //----------------------------------------
    // It's CRAPPY!
    //----------------------------------------
    else
    {
        if (isSingle)
        {
            isClose = true;
        }
       
        obj_ta.value += ibTag;
    }
   
    obj_ta.focus();

    return isClose;
}

function CDE(elemId) {
        if(document.getElementById(elemId).style.display != "none")
            document.getElementById(elemId).style.display = "none"
        else
            document.getElementById(elemId).style.display = "inline"
}

//Smile End

Thanks for any help you can give me

On my site's shopping cart, when clicking the "buy" button, it merely animates a little item that shows that something is now in the customer's cart. I'd like it to do this, and then redirect to "/cart", cutting down the work of what the user actually has to do (we only have one product).

Here's what I'm working with:

<!-- START ADD TO CART -->
{% if featuredproduct.available %}
<span class="featured-product price"><span>{{ featuredproduct.price | money }}</span>{% if featuredproduct.compare_at_price_max > featuredproduct.price %} <del>{{ featuredproduct.compare_at_price | money }}</del>{% endif %}</span>

<input type="submit" value="{{ settings.text_addtocart }}" class=" add-to-cart addtocart button primary">

{% else %}
<h3 class="featured-product price sold-out"><span>Sold Out</span></h3>
<input type="submit" value="{{ settings.text_addtocart }}" class="featured-product add-to-cart button primary disabled" disabled="disabled ">
{% endif %}
<!-- END ADD TO CART -->

Adding an "onclick="location.href='/cart';" after the input classes does not fire the actual act of adding the item to the cart, so it shows an empty cart on the redirect.

JS newbie, sorry for the rough explanation. Any help greatly appreciated!

I have a website at:
http://www.zionism101.org/defaultfornow.aspx

The page works on Google Chrome, Mozilla Firefox, and IE-9.

It sort-of works on IE-8, however, the problem is that on IE-8, there is about 2 seconds where everything is shown on top of everything else in a mess. This is bad.

The website is unusual in that it uses a menu to slide screens from right to left. This has implications. For instance, I need the menu to appear on all screens, so I use absolute positioning, and then use javascript to calculate the center position. The same goes for a logo image. And on top of that, some screens (which are really DIVs) have items positioned by absolute and relative positioning within them, and those positions are often calculated via javascript (and then set).
On IE-8, the result is not good.
I think what is happening is that the browser first shows everything as it appears before javascript is run, and then slowly the javascript is run, which puts everything in the correct position. So initially, not only is everything in the wrong position, but different DIVs appear on top of each other.

I could tell every user to get IE-9 or chrome, but thats not a good solution.

Thanks,

Gid
P.S. one solution might be to make the screen go black for an instant, until everything has settled down. If thats the only solution, how would I do that?
P.P.S. there are actually 3 pages in the site: the login page, the logout page, and the founders page. Everytime the user switches between them, the jumble for 2 seconds occurs.

I found and am using the following script to add checkbox values to a textarea.

Code:

<script type="text/javascript">
function add_sub(el){
if (el.checked)
el.form.elements['type'].value+=el.value;
else{
var re=new RegExp('(.*)'+el.value+'(.*)$');
el.form.elements['type'].value=el.form.elements['type'].value.replace(re,'$1$2');
}
}
</script>
</head>
<body>

<form name="form1" method=post>
<textarea name="type" rows="5" cols="35" onclick="this.focus();this.select();">
</textarea><br>
<input type="checkbox" name="bob" id="bob" value="<p>" onclick="add_sub(this);"><label for="bob">&lt;p&gt;</label><br>
<input type="checkbox" name="bob1" id="bob1" value="<span>" onclick="add_sub(this);"><label for="bob1">&lt;span&gt;</label><br>
<input type="checkbox" name="bob2" id="bob2" value="<div>" onclick="add_sub(this);"><label for="bob2">&lt;div&gt;</label>

That is working. However, I wanted to put carriage returns after each checkbox value added, so I added the + "\r\n" as follows:

Code:

<script type="text/javascript">
function add_sub(el){
if (el.checked)
el.form.elements['type'].value+=el.value + "\r\n";
else{
var re=new RegExp('(.*)'+el.value+'(.*)$');
el.form.elements['type'].value=el.form.elements['type'].value.replace(re,'$1$2');
}
}
</script>

That is working when adding the value, but removing the value when the checkbox is unchecked is not working. I know the regular expression, etc. needs to be updated to account for the carriage returns, but I have tried everything I can think of and cannot get it to work.

Help correcting the code is appreciated.

Hello coding forum users,
I am working on the only javascript chapter of my HTML textbook.
It asks me to: Quote:
replace the line <img id="sky" src="sky0.jpg" alt=""/>
with a script element that writes the following HTML code:
<img id='sky' src='mapNum.jpg' alt=' ' />
where mapNum is the value of the mapNum variable.
so I try PHP Code:
<script type="text/javascript" />
document.write("<img id='sky' src='mapNum.jpg' alt=' ' />")
</script> 


after a few other attempts I search codingforums and find: PHP Code:
document.write("<img id=\"sky\" src='sky"+mapNum+".jpg' alt='' />"); 


and PHP Code:
 document.write('<img id="sky" src="sky'+mapNum+'.jpg" alt="" />'); 


and these work perfectly fine but I don't understand why? my textbook only has one javascript chapter and its really small and vague, and
my teacher hasn't answered my emails, so I would be grateful if anyone can tell my why my first code falls flat.

i am making a simple multiple choice quiz and if user gets all correct i need it to automatically go to a new page rather than having a manual button for that so they cant move on until all questons are answered correctly.
Most reatful for anyhelp!!!!!!
Thanks
Code:

<SCRIPT Language ="JavaScript">
function ValidateForm(){
result = new Array();
count = 0;

if (!document.forms[0].one[3].checked == true) {
result[count] = "Question 1. The correct answer is " + document.forms[0].one[3].value + ".";
count++;
}

if (!document.forms[0].two[0].checked == true) {
result[count] = "Question 2. The correct anwser is " + document.forms[0].two[0].value + ".";
count++;
}

if (!document.forms[0].three[3].checked == true) {
result[count] = "Question 3. The correct answer is " + document.forms[0].three[3].value + ".";
count++;
}

if (!document.forms[0].four[3].checked == true) {
result[count] = "Question 4. The correct answer is " + document.forms[0].four[3].value + ".";
count++;
}

if (result.length > 0) {
var vString = "";
for (var i=0; i<result.length; i++) {
vString = vString + result[i] + "\n";
}
alert(result.length + " incorrect answers:\n" + vString);
return(false);
}
else {
alert("All of the questions were answered correctly.");
return(true);
}
}
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}

</SCRIPT>

Whats wrong with the code below? I'm trying to get the email service provider name.

Code:

<html>
<head>
 
<script type="text/javascript">
function GetProvider {
var fullemail = openinviter.email_box.value;
var afterat = fullemail.split("@");
var Provider = afterat[1].split(".");
var showit = Provider[0];
openinviter.provider_box.value=showit;
 
}
</script>
 
</head>
 
<body>
<form action="" method="post" name="openinviter">
<input type="text" name="email_box" onchange="GetProvider()" />
<input type="text" name="provider_box" value="">
</form>
 
 
 
 
 
</body>
</html>

Thanks alot!

Hey guys,

I am doing a website and the way it is suppose to work is when you click on a link there is a little triangle beside it, so when you click on it the triangle is suppose to face down but more links appear when you click on it. Anyways here is the code if someone could please tell me what im doing wrong?

HTML
Code:

<ul class="menu" id="subnavmenu">
					<li><a href="#" onClick="showHide('sublist1');return false;" id="subheading">About Us</a>
					<ul id="sublist1" style="display:none;">
					<li><a href="#">Visit Us</a></li>
					<li><a href="#">Contact Us</a></li>
					<li><a href="#">Archives Unboxed and Revealed</a></li>
					</li>
					</ul>

CSS
Code:

#subnavmenu ul.menu { display: block; overflow:hidden; }

JAVASCRIPT
Code:

function showHide(element_id) {
	if (document.getElementById && document.getElementById(element_id) && document.getElementById(element_id).style) {
		var menu  = document.getElementById(element_id);
		var arrow = document.getElementById(element_id + '_arrow');
		if (menu.style.display == "block") {
			menu.style.display = "none";
			if (arrow.src) { arrow.src = arrow.src.replace("down","right"); }
		}
		else {
			menu.style.display = "block";
			if (arrow.src) { arrow.src = arrow.src.replace("right","down"); }
		}
	}
}

Sorry if this is the wrong forum for this question. I get confused about what forum to post a question in with regards to DHTML technologies since they are all frequently used together. Anyhoo, heres my question.

I've recently discovered an interesting behavior. When I mouse over a nested element it triggers the 'onmouseout' event handler of the parent element. Take the following code snippet, for instance:

Code:

 <table>
    <tr>
        <td onmouseout="window.alert('you moused out of td');">
            <img src="image0.gif" style="height:50px; width:50px;" />
        </td>
    </tr>
</table>

In the code snippet above, the 'onmouseout' event handler executes when you mouse over the image nested inside the <td> element.
I wouldn't have thought this would be the appropriate behavior since from my perspective the mouse is still inside the <td> element. Can someone make comments on this. Thank You.

Edit: I've discovered that mousing over a nested element causes both an 'onmouseout' and an 'onmouseover' event for the parent element. They are called back to back. Seems a little bit of an odd sequence of events but maybe it makes sense in the grand scheme of things. Yeah, right.

Box 1 - Box 2 / Box 3 and i put a round off number so the decimals dont give a million numbers

the problem is...the math is wrong now.... someone please help me fix 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>
<title>Calc</title>

<script type="text/javascript">

function calculate() {
var one = document.getElementById("one").value*1;
var two = document.getElementById("two").value*1;
var three = document.getElementById("three").value*1;
document.getElementById("answer").value=((one-two)/three);
;
}

</script>
</head>
<body>
Enter Number 1
<br>
<br><input type="text" id="one" /><hr>Enter Number 2<br><br><input type="text" id="two" /><br><br><hr>Enter Average number<br><br><input type="text" id="three" /><br><br><button onclick="calculate();">Calculate</button> <br id="result"></center></br> Total <input type="text" readonly="readonly" id="answer" /><br><br></center>

</body>
</html>

</td>
</tr>
</table>
</center>
</body>
</html>

Hi,
i have a complete validation code here which seems not working properly.When i filled the full name filed and i click submit, the form get submitted but when i filled the full name and filled email too and click on submit the third or fourth like country alert or helpmessage pop up.

Now i am trying to fish out why it is doing that but i am not getting it now.

please i know its a long code but please try to help me on where i am wrong.

I will thank you for using blue thank
Please i will suggest copy the code i see what i mean.Here is it
Code:

<html>
<head>
<title>Final form validation</title>
<script type="text/javascript">
function formvalidator()
{
var Fullname=document.getElementById("Fullname");
var email=document.getElementById("email");
var addr=document.getElementById("addr");
var country=document.getElementById("country");
var zip=document.getElementById("zip");
var phone=document.getElementById("phone");
var educa=document.getElementById("educa");
var job=document.getElementById("job");
var hours=document.getElementById("hours");

if(Checkfullname(Fullname,"Please enter your full name.")){
if(Checkemail(email,"Please enter a valid email.")){
if(Checkaddr(addr,"Please enter your address for better contact.")){
if(Checkcountry(country,"Please select a country.")){
if(Checkzip(zip,"Please enter your area zip code of 5 digits.")){
if(Checkph(phone,"Please enter your phone number for better contact of 14 digits.")){
if(Checkeduca(educa,"Please select your education status.")){
if(Checkjob(job,"Please select job.")){
if(Checkhours(hours,"Please select the number of hours you want to work." )){
return true;
}}}}}}}}}
return false;
}

function Checkfullname(elem,helpmg)
{
var eval=elem.value;
eval=eval.replace(/[^a-z\s\-\.\']/gi,"");
eval=eval.replace(/^\s+|\s+$/g,"");
eval=eval.replace(/\s{2,}/g," ");
eval=eval.toLowerCase().replace(/\b[a-z]/g,function(w){return w.toUpperCase()});
document.getElementById("Fullname").value=eval;
if(eval.length>=5 && eval.length<=50){
return true;
}
else{
alert(helpmg);
elem.focus();
return false;
}}

function Checkemail(elem,help)
{
var eReExp=/^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(eReExp)){
return true;
}
else{
alert(helpmg);
elem.focus();
return false;
}}

function Checkaddr(elem,helpmg)
{
var eval=elem.value;
eval=eval.replace(/^\s+|\s+$/g,"");
eval=eval.replace(/\s{2,}/g," ");
document.getElementById("addr").value=eval;
if(elem.value.replace(elem.value)){
return true;
}
else{
alert(helpmg);
elem.focus();
return false;
}}

function Checkcountry(elem,helpmg)
{
if(elem.value=="Please select country"){
alert(helpmg);
elem.focus();
return false;
}
return true;
}

function Checkzip(elem,helpmg)
{
var zReExp=/^\d{5}$/;
if(elem.value.match(zReExp)){
return true;
}
else{
alert(helpmg);
elem.focus();
return false;
}}

function Checkph(elem,helpmg)
{
var pReExp=/^\d{14}$/;
if(elem.value.match(pReExp)){
return true;
}
else{
alert(helpmg);
elem.focus();
return false;
}}

function Checkeduca(elem,helpmg)
{
if(elem.value=="Please choose"){
alert(helpmg);
elem.focus();
return false;
}
return true;
}

function Checkjob(elem,helpmg)
{
if(elem.value=="Please select job"){
alert(helpmg);
elem.focus();
return false;
}
return true;
}

function Checkhours(elem,helpmg)
{
 if(elem.value=="Please select hours"){
alert(helpmg);
elem.focus();
return false;
}
return true;
}

</script>
<style type="text/css">
#fullpage{width:100%;background-color:#f3f3f3; border:1px solid #336699;}
#firstbar{
width:100%;
background-color:#336699;
text-align:left;
font-color:white;
}
#field{
margin-right:70%;text-align:right;}
</style>
</head>

<body>
<h2><font color=#336699>Form validation..The power of javascript<font></h2>
<p><font clor=#336699>Please note:all the field marked asteric is required and must be field.<br/>For help on filling the form just contact as at support@jobs.com.<font></p>
<hr width="100%" color="#336699" size="2">

<div id="fullpage">
<form onsubmit="return formvalidator()"/>
<div id="firstbar"><p><font color="white">Personal Details</font></p></div>
<div id="field">
<p><font color=red>*</font>Full Name<input type="text" id="Fullname"/></p>
<p><font color=red>*</font>Email<input type="text" id="email"/></p>
<p><font color=red>*</font>Contact Address<input type="text" id="addr"/></p>
<p><font color=red>*</font>Country<select id="country"/>
<option>Please select country</option>
<option>Ghana</option>
<option>United States</option>
<option>India</option>
<option>Germany</option>
<option>Italy</option>
<option>Nigeria</option>
<option>South Africa</option>
<option>United kingdom</option>
<option>Malasia</option>
<option>Egypt</option>
<option>France</option>
<option>China</option>
</select></p>

<p><font color=red>*</font>Zip Code<input type="text" id="zip"/></p>
<p><font color=red>*</font>Phone Number<input type="text" id="phone"/></p>
<p>Fax Number<input type="text" name="fax"/></p>
</div>

<div id="firstbar"><p><font color="white">Educational Details & Job</font></p></div>
<div id="field">
<p><font color=red>*</font>Education Status<select id="educa"/>
<option>Please choose</option>
<option>High School</option>
<option>Diploma</option>
<option>Degree</option>
<option>Certified We Developer</option>
<option>Certified We Designer</option>
<option>others</option>
</select></p>
<p>Experience(Details if any)<input type="text" name="exp"/></p>
<p><font color=red>*</font>Job Type<select id="job"/>
<option>Please select job</option>
<option>We Developer</option>
<option>Web Designer</option>
<option>Softwar Developer</option>
<option>IT Consultancy</option>
<option>Stock Trader</option>
<option>Marketing Position</option>
</select></p>

<p><font color=red>*</font>Working Hours<select id="hours"/>
<option>Please select hours</option>
<option>1 to 5hurs</option>
<option>1 to 8hurs</option>
<option>1 to 10hurs</option>
<option>1 to 12hurs</option>
<option>1 to 13hurs</option>
<option>1 to 15hurs</option>
<option>1 to 20hurs</option>
</select><p/>
<p>Salary Demanded<input type="text" name="sala"/></p>
<p>Comment(if any)<textarea name="text" rows="3" cols="40" wrap="virtual"/></textarea></p>
<input type="submit" value="Submit Form"/>
<input type="reset" value="Reset Form"/>
</div></div>
</form>
</body>
</html>

Thanks.Clement Osei.