Develop Reference

Query appended to url causes page to jump down

On my page here: http://greenjobinterview.com/win-fiat-hr-tech/ if there is any query string added to the URL, it causes the page to "jump down" halfway. For example: http://greenjobinterview.com/win-fiat-hr-tech/?question. When I disable JavaScript for the page, the problem goes away. I inherited this from another developer. How can I even begin investigate which javascript file is the culprit?
Thanks!

How can I even begin investigate which javascript file is the culprit?
Comment out JavaScript <script> tags until the behavior stops.

This answer won't be applicable to a lot of people. For my specific problem, the following script was targeting all divs with a class of "content". There were a few, causing the scroll down. Thanks to #Jeff for the tip to search for "scrollTop". Here is the culprit below in case it helps anybody. I changed ".content" to "#content" to affect the ID rather than class of content which fixed it because there was only one ID of content on each page.
$(function(){
$("form.biggreenbtn").each(function(){
var form = $(this), p = 0;
console.log($.parseJSON('<?=$gets?>'))
$.each($.parseJSON('<?=$gets?>'), function(i, v){
$("[name='" + i + "']", form).val(v);
if(p === 0){
$("body, html").animate({scrollTop: form.closest("#content").offset().top - 150 + "px"});
}
p++;
});
});

Click function on dynamic created elements that shows content of clicked element

I have created a search page that has on top and bottom page navigation. This is a simplified version just to show my problem:
$(function(){
$("select").on("click" , function(){
if ($(this).val() == 10){
var total_pages = 3;
}
else{
var total_pages = 5;
}
var pages = "";
for (var i = 1; i <= total_pages; i++) {
var pages = pages + "<span class='page'>" + i + "</span>";
}
$(".pagination").html(pages);
});
$("select").click();
$(".page").on("click" , function(){
alert($(this).text());
});
});
And you can try it yourself here:
JSFiddle
In this example you have 5 pages when you select 10 items per page and 3 pages for 20 results per page. But when you select an other value per page the alert function doesn't show up anymore. It seems that changes, after the document is loaded, are not being noticed by the document.ready function.
I searched and saw a lot of familiar questions and their solutions. I can imagine also some alternatives but not the one who can satisfy me. Because unfortunately I don't know now a simple solution without a lot of extra code with id's, classes, data-attributes etc. Who can contribute me some knowledge for a good solution?

That's because when you do this:
$(".pagination").html(pages);
You remove old DOM elements and it's "click" functions and replace it with new HTML.
Add this:
$(".page").on("click" , function(){
alert($(this).text());
});
right after first line I mentioned

Event delegation is a good practice when you deal with dynamic content. In your case, you can attach the click event to the parent.
I just tweaked one line in your original code:
$(".pagination").on("click" , ".page" , function(){
alert($(this).text());
});
Live demo: http://jsfiddle.net/zkDF4/6/

Post event on page load when everything is settled

OK, there's a weird problem with a page I have.
When the page first loads, the divs I don't want to see are hidden. But seconds later, the divs are turned back on again. When I click on a link for the main page, the divs I don't want to see, are hidden, finally.
I want to write a script, like a POST event in old PowerBuilder where when everything is said and done, the divs I don't want to see, finally get hidden.
I have 1000's of lines of code and searching is painstakingly slow.
I simply need an event that makes sure that the divs I don't want to see, stay hidden.
Here's the code:
function hideChildDivs(parent) {
parent.children('div').removeClass('shown').addClass('hidden');
}
function changePage(id, pageName, title, icon) {
switch (pageName) {
case 'treeview':
hideChildDivs($("#otherPageContent"));
showOnlyActivatedPanel('none');
$('#otherPageContent').removeClass('shown').addClass('hidden'); //<!-- This is the container wrapper... see below. -->
$("#pgCoreSettingsMaintenance").removeClass('shown').addClass('hidden'); //<!-- This element needs to remain hidden when the dashboard shows -->
$("#contentDivWrapper").removeClass("hidden").addClass("shown");
$("#dash").removeClass();
$("#tree").removeClass();
$("#thres").removeClass();
$('#mainContentPane h1 > i').removeClass().addClass(icon);
$("#pgDashboard").addClass("hidden").removeClass("shown");
$('#headerTitleTree').html(title);
$("#headerTitleRow").removeClass('hidden');
$("#headerTitleRow").addClass('shown');
$("#" + id).addClass("active");
$("#dash").removeClass("active");
$("#thres").removeClass("active");
break;
case 'dashboard': //<!-- this is the first div that is displayed on startup -->
hideChildDivs($("#otherPageContent"));
showOnlyActivatedPanel('none');
preLoader = false;
$("#contentDivWrapper").removeClass("shown").addClass("hidden");
$('#headerTitleTree').html(title);
$("#headerTitleRow").removeClass('hidden');
$("#headerTitleRow").addClass('shown');
$("#dash").removeClass();
$("#tree").removeClass();
$("#thres").removeClass();
$("#pgDashboard").addClass("shown");
$("#pgDashboard").removeClass("hidden");
$('#mainContentPane h1 > i').removeClass().addClass(icon);
$("#" + id).addClass("active");
$("#tree").removeClass("active");
$("#thres").removeClass("active");
$('#otherPageContent').removeClass('hidden').addClass('shown');
$("#pgDashboard").removeClass('hidden').addClass('shown');
$("#pgCoreSettingsMaintenance").removeClass('shown').addClass('hidden');
loadPageIntoDiv("web-resources/templates/" + pageName + ".html");
getKPIs(myUrl, myCallback);
break;
case 'threshold':
hideChildDivs($("#otherPageContent"));
showOnlyActivatedPanel('none');
$('#mainContentPane h1 > i').removeClass().addClass(icon);
$("#contentDivWrapper").removeClass("shown").addClass("hidden");
$('#headerTitleTree').html(title);
$("#headerTitleRow").removeClass('hidden');
$("#headerTitleRow").addClass('shown');
$("#" + id).addClass("active");
$("#tree").removeClass("active");
$("#dash").removeClass("active");
$("#pgDashboard").removeClass("shown").addClass("hidden");
$('#otherPageContent').removeClass('hidden').addClass('shown');
$("#pgCoreSettingsMaintenance").removeClass('hidden').addClass('shown'); //<!-- this element needs to remain hidden when the dashboard shows. -->
break;
}
}
here are the divs in order...
<div id="otherPageContent" class="hidden">
<div id="pgDashboard" class="hidden"></div>
<div id="pgThresholdConfigurationPH" class="hidden"></div>
<div id="pgCoreSettingsMaintenancePagePH" class="hidden"></div>
</div>

Use setInterval() on body onload. It may help you to get some time interval after the page loading.
Preferably you should use setTimeout(). It will call your function once, where you can hide ur divs by giving a time interval.

Did you try using the .ready() function ?
http://api.jquery.com/ready/
$( document ).ready(function() {
changePage('','dashboard','','');
});
It also seems to me that if you need to have a timer waiting for your javascript to finish running in order to set your html back to how you want it, then the order in which your code runs on start isn't right. maybe have a rethink and re-order so that after the initial load your html elements are in the correct state.

Why not give the DIV tags a class attribute and then apply a CSS style of {display:none;}?

Javascript scrolling code

Here is a link to some code that i would like to implement.
http://jsfiddle.net/g7gYy/12/
I am having a bit of trouble working out where to place the code and to actually get it too work.
Here is an html file that I have uploaded: http://www.canning.co.nz/Game/testmarquee.html
Can I please have some help with this?
thanks

First you didnt added jquery lib to your page add it.
<script src="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Next put all your code in document ready because before document get ready your code get executed but elements are not ready to do some operations
$(document).ready(function() {
var $text = $('.text-to-scroll', $marquee);
var textWidth = $text.width();
var $marquee = $('#marquee');
var marqueeWidth = $marquee.width();
$marquee.css('height', $text.height());
function animateLoop()
{
//First lets put if out of view to the left
$text.css('left', -textWidth);
//Now it's out of view, change it's display from none to block
$text.css('display', 'block');
//Now we can animate it so that if scrolls across the screen
//http://api.jquery.com/animate/
$text.animate({ 'left' : marqueeWidth }, 10000, 'linear', animateLoop);
}
});

Your javascript file link is not good.
<script language="JavaScript" type="text/javascript" src="marquee.js">
make sure the marquee.js file is in the same folder as your testmarquee.html page.
Later Edit:
Ow, scratch that, i was wrong, Mateusz was in fact right.:D

inline image insertion through javascript

I wrote one script which gets an image url through JSONP, and then I needed to write that to browser, this is a status image which is onling.png, offline.png and so on
my script looks like this.
<div id='STATUSDIV'></div>
<script language=javacsript type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js></script>
<script type="text/javascript">$(document).ready(function()
{
$.getJSON('http://MYSSERVERNAME.COM/get.php?callback=?','q=value&index'+Math.random(),
function(res)
{
document.getElementById('STATUSDIV').innerHTML = ("<img src='"+res.img+"' />");
});
});
</script>
using this code, I am able to get an image inside div statusdiv, however I can not use same code block twice on single page as both will point to same div.
quick thing I can do is that I can ask end user who will copy this code multiple time on each page to change div id so that that image will load on differnt div.
But I wanted to have same code wherever copied just writes image inline. kind of createelement and write in that element. but thats not working. document.write does not work either as it replaces everything.
Is there a way that when this code block called, Instead of writing innerhtml, code creates a dynamic div right there on the page and writes image in that. and this image writing and creating div happens where script block is called. so that If same script is called in header and footer, status image will appear on both header and footer.

The cleanest way I know of is to create a function for your code that should get included very early in the page so it's available everywhere:
function insertStatusHere() {
var thisId = "status" + insertStatusHere.myDivCntr++;
document.write('<div class="statusContainer" id="' + thisId + '"></div>');
$(document).ready(function() {
$.getJSON('http://MYSSERVERNAME.COM/get.php?callback=?','q=value&index'+Math.random(), function(res) {
document.getElementById(thisId).innerHTML = ("<img src='"+res.img+"' />");
});
});
}
insertStatusHere.myDivCntr = 0;
Then, any place in the page where someone wants a status image, they can put this inline script:
<script type="text/javascript">
insertStatusHere();
</script>
This dynamically inserts a div with a unique div ID at the place that the function call is made and it keeps track of each ID that is used in the closure.