JavaScript - Getting The Body Tag And Appending The Onunload Event Programatically

Appending to a div (id=right) over time. There is a scrollbar on the right side. At some point, the scrollbar appears but the user has to manually move the scrollbar to the bottom to see the newest appends.

Googled and found a number of "solutions" that I can't get to work. The ideal would be to always have the scrollbar move to the bottom after each append.

Code:

 #right {
    background-color: #FF0;
    width: 150px;
    height: 300px;
    float: right;
    overflow : auto;
  }

$("#right").append("<p>something important here");

Hi forum,

I am trying to attach an event to a dynamically produced button, and then use
stopPropagation and preventDefault.
Code:

function chapter12_nodeOne() {
    
    //create an element
    var element = document.createElement('input');
    //set some attributes
    element.setAttribute('type', 'button');
    element.setAttribute('value', 'submit');
    element.setAttribute('id', 'myBtn');
    //appendd the element into a DIV
    document.getElementById('myDiv').appendChild(element);
    //uses EventUtil to attach an event listener
    EventUtil.addHandler(element, 'click', function() {
        alert('event attached');
    });

    var flag = confirm('prevent default behavior of button?');
    if (flag) {
        var el = document.getElementById('myBtn');/////////////////////////(1)
        var ev = el.onclick;
    }
}

var EventUtil = {
    addHandler: function(element, type, handler) {
        //check if the element and the browser support DOM Level 2 event attachment
        //if the user is not browsing with IE
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        }
        //if user is browsing with IE
        else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        }
        //if user is using a browser that only supports DOM Level 0 event attachment 
        else {
            element["on" + type] = handler;
        }
    },

    removeHandler: function(element, type, handler) {
        //check if the element and the browser support DOM Level 2 event attachment
        //if the user is not browsing with IE
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        }
        //if user is browsing with IE
        else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        }
        //if user is using a browser that only supports DOM Level 0 event attachment 
        else {
            element["on" + type] = null;
        }
    }
};

But when debugging I see under el on the line marked with (1) that the onclick event is null. What am I doing wrong?!
PS:the event is attached, when I click on the button I get an alert message

is it possible to capture the control.event or element.event that was fired to invoke the onbeforeunload event.

for example, if a button is clicked and it causes the onbeforeunload event to fire can i determine which button was clicked.

thanks

On a web form my users choose different variables to "shock" (ie change relative to a starting base)
over different periods:
eg user "shocks" US interest rates 0.50% points above base during 201202-201304 (ie 2012 Quarter2-2013 Quarter4)
User may then add another "shock" to same variable:
US interest rates .75 % points above base during 201301-201404 (ie 2013 Quarter1-2014 Quarter4)
User may then add "shock" to different variable:
JAPAN interest rates (RSH_j) 1.00 % points above base during 201201-201404 (ie 2012 Quarter1-2014 Quarter4)

I have generated a Select area (ShockVarPlot) that concatenates the required component data from DD boxes for charting:
RSH_u,201202-201304,+0.50
RSH_u,201301-201404,+0.75
RSH_j,201301-201404,+1.00

(NB each line of the above Select box is formed after the "Add Shock" button is clicked, so this is the obvious
event to trigger the Chart Plot too)

For EACH particular variable being shocked (eg RSH_u, RSH_j) I would like to instantly plot the entire profile of each
shock. Subsequent shocks to the SAME variable may simply
append to earlier shocks or may (partially) overwrite depending if the time period chosen overlaps.
But once a NEW shock variable is chosen (eg RSH_j) , the previous plot (of RSH_u) simple gets overwritten in the common plot area.
The x-axis scale width can be hard-coded; say 201004-202104.

Charting Requirement (for common plot area) ----
"Add Shock" button=> First Plot - Plot RSH_u +0.50 above base over 201202-201304.......
"Add Shock" button=> ....then (partially) overwrite/append with +0.75 over 201301-201404
"Add Shock" button=> Second Plot - Delete above plot & Plot RSH_j +1.00 above base over 201301-201404

Chartplot needs to display the variable being charted eg "RSH_u"or "RSH_j"

Logic Requirement ----
If new shock => plot this magnitude over selected period within 201001-202104
If new shock (same variable) => plot this as above but this shock overwrites previous if any time-period overlap
If new shock (new variable) => delete first plot & plot this magnitude over selected period within 201001-202104

Question --------------
Is there a simple Javascript method to achieve this real-time plotting/appending on clicking "Add Shock" ?
I have seen things like FLOT charting but not sure how to read/chart my Listbox output in ShockVarPlot above

Any thoughts ?

EDIT: I SOLVED THIS BY USING "#" instead of "?". Thank you.

Hello.

My goal is to take a user's email from a form, store it in a cookie, and append it to the window location on the following page. I am doing this so that when a user shares the page with "add this widget" the stats will show me who shared the page.

The problem I have is that window.location.replace("?"+ user_email); seems to be sending the browser in an infinite loop. Right now it is running as an inline function in the head. I tried calling the function with body onload and had the same problem.

Code:

<script = "Javascript">
(function readCookie() {

var user_email = unescape(document.cookie);

if (document.cookie)
  {
 window.location.replace("?"+user_email);
  }

})();
</script>

Is there another way I could achieve the same result?

Thank you,
Jack

Hey all,

I'm in process of writing my own script (I don't want to use any jquery plugins) to render a table and allow for filtering/searching. So when user clicks on link, by default there will be parameters passed in query string as you can see in the setDefaults private method below. However, I'm stuck trying to figure out the best way to append values selected from filter dropdown to the query string. I know it will involve something along the lines of $("select").change(function(){var option = $(this).val()}). But I am having difficulty figuring out how to incorporate it with this. I would like to make use of the below buildFilter function somehow:
Code:

(function($){
	
	var listview = $('#listview');
	
	var lists = (function(){
		var criteria = {
			drop_filter: {
				check: function(value){
					if(value)
						return
				},
				msg: "Loading..."
			},
			search_filter: {
				check: function(value){
					if(value)
						return
				},
				msg: "Loading..."
			}
			
		}
		var handleFilter = function(){
		}
		return {  
			 create: function(component){
				var component = component.href.substring(component.href.lastIndexOf('#') + 1);  
				return component;
			},
			 setDefaults: function(component){
				var parameter = {};
				switch(component){
					case "sites":
						parameter = {
							'order': 'site_num',
							'per_page': '20',
							'url': '/sites'
						}
				}
				return parameter;
			},
			buildFilter: function(){
				if(event == "change")
					return criteria.drop_filter();
			}
		}
	})();  
	
	$('#dashboard a').click(function(){
		var currentComponent = lists.create(this);
		var custom = lists.setDefaults(currentComponent);
		initializeTable(custom);
	});
	
	
	var initializeTable = function(custom){
		var defaults = {};
		var query_string = $.extend(defaults, custom);
		
		var params = [];
		$.each(query_string, function(key,value){
			params += key + ': ' + value; 
		})
		alert(params);

	}
	
})(jQuery)

Thanks for any response.

I have a ondrag event handler and in that I am trying to retrieve e.ClientX but it always return 0 in Mozilla. Works fine in IE though.

How can retrieve the clientX and clientY in ondrag event?

I want to insert this js snippet
Code:

function addText(smiley) {
    document.getElementById('message').value += " " + smiley + " ";
    document.getElementById('message').focus();
    return false;
}

to a loaded iframe with name&id chtifrm. I can access it & change embed something in its html via using something like:

Code:

 $(parent.chtifrm.document.body).append('<div id=\"smly\" style=\"cursor:pointer;float:left;top:200px;display:none;position:absolute;\"><\/div>');

....
Code:

parent.chtifrm.document.getElementById('chatbox_option_disco').style.display == 'none'

but how do I insert js in the head of loaded iframe?

i had to put to onload commands in a body tag and now only one will work. is there any way to make both work?

hi guys, how can i get this code to load on body onload? without fading in and out?

Code:

<html>
<head>
<!-- For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
 $(document).ready(function() {
 	 $("#responsecontainer").load("response.php");
   var refreshId = setInterval(function() {
      $("#responsecontainer").load('response.php?randval='+ Math.random());
   }, 9000);
   $.ajaxSetup({ cache: false });
});
</script>
</head>
<body>
 
<div id="responsecontainer">
</div>
</body>

Thanks

Hello,

How can i get scroll bar position of body tag ?

Thanks in advance.

What I mean is that my <body> tag currently is like this:

Code:

<body class="page-course">

I would like to insert a pop-up contact form which requires the body tag to be like this:

Code:

<body onload="javascript:fg_hideform('fg_formContainer','fg_backgroundpopup');">

Not quite sure how to merge these - indeed can I merge them?

Perhaps better to make the body class (top example) execute elsewhere?

THANKS!!

I am a novice with Javascript and need help. The homepage of the website I am developing includes a simple javascript slideshow. The code for the script came from a different site that allowed code sharing. It functions wonderfully once loaded. However, in Internet Explorer, I must control-click to allow for the script to run. This wouldn't be a huge problem, but it is an inconvenience to visitors of the site. Since the website is for a public high school, the district computers have a high security setting. Therefore, anyone trying to access the site from a school computer (the main clientele) will have to control-click and allow access everytime they wish to visit the site. Not ideal.

I know my problem is that I am using <body onload="runSlideShow">. I have tried including the defer attribute, but that did not work. Is there any other way I can write the code to not cause viewers to control-click everytime the page is loaded?

Thanks tons!

EDIT----

When opened in IE 7, there is a bar that warns againsts scripts and activex. I understand that I can lower my personal security setting, but I don't have the authority to do so for district PCs. Once a user clicks to allow the script the slideshow begins automatically. So, how can I write the code so that the warning bar does not show up?

----


Here's the bit of code that is applicable.

Code:

<script language="JavaScript">
 

var slideShowSpeed = 4000;
var crossFadeDuration = 4;

var Pic = new Array();


Pic[0] = 'field.jpg'
Pic[1] = 'mural3.jpg'
Pic[2] = 'cheer1.jpg'
Pic[3] = 'Nuncrackers.jpg'
Pic[4] = 'soccer4.jpg'
Pic[5] = 'radio4.jpg'

var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}

</script>


<body onload="runSlideShow()">


<img src="field.jpg" name='SlideShow' width="814" height="300" />

The only way I know to make a script automatically run on the page is by using the "onLoad" property of the HTML body tag. However, I'm working with a template that serves the same header and footer for every page on my site, and this JavaScript is only needed on a single page. I therefore don't really want to edit the body tag with a function call that won't be needed in most cases.

To avoid doing this, is there any other way to make a piece of JavaScript run without input from the user? All I want to do is autofocus on a form field. Thanks for any advice.

Before

<body>
bunch of codes
</body>

After
<body>
<div id="trololol"></div>
bunch of codes
</body>