We Keep Coding

Target page does not render after using back-button

Dear community and readers:
programming a small website I have encountered for first time a strange behavior. What I basically do is that I hide the body until page load and then fade it in. Via onClick on a link in the navigation I use redirectPage and the procedure repeats with the target link page. So this works all wonderful but when visiting the site in the browser and using the back button it seems that the pages visited before are not rendering. Latest Google Chrome versions are doing it, Firefox, Safari fail. Strangely own Safari, clicking the back button three times forces the homepage to load again. This happens most of the times but not all time.
Has anyone an idea how I could achieve in my function to force a render anytime the back button is pressed. Might be a silly question but I really never came across this issue. I tried some snippets I found and worked around them my own way. They did not work and I would rather understand the problem than choose pure cosmetics.
Thank you for your input!
// Document on load.
$(function(){
gotToNextSection();
loaderPage();
ScrollNext();
moreProjectSlider();
// Animate
contentWayPoint();
})();
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(2000);
$("body").stop().animate({
opacity: 1
});
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});

jQuery-mobile and ASP.NET combination issue

I am developing a mobile solution with a combination of jQuery.mobile and
asp.net webforms.
For postbacks of my asp.net controls to work properly I have to disable ajax at
the top of the page, like this:
<script>
$.mobile.ajaxEnabled = false;
</script>
But when ajax is disabled like this, other functions doesn't seem to work.
I can't call dialogs/popups from jQuery document ready
For example:
$(document).ready(function () {
$('#myPopup').popup('open');
});
This will just cause the popup to show in less than a second,
then it dissapears. Also when I register a clientscript
from codebehind to trigger the popup when a serverside button
is clicked, the popup just flashes, then dissapears.
But when I disable ajax at the top of the page, the popup
calls works fine.
Any ideas how to get around these issues?

Document ready can not be successfully used with jQuery Mobile. It will usually trigger before page DOM is populated.
Instead of this line:
$(document).ready(function () {
$('#myPopup').popup('open');
});
Use this line:
$(document).on('pagebeforeshow', '#page-id', function(){
$('#myPopup').popup('open');
});
Where #page-id is an id of page that contains that popup.
jQuery Mobile has a problem with document ready so its developers have created page evenets to remedy this problem, read more about it in this ARTICLE or find it HERE.
EDIT :
I think your problem is also in $.mobile.ajaxEnabled = false; handling.
That code sample MUST be triggered from mobileinit event like this:
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
One more thing, mobileinit event MUST be triggered before jQuery Mobile is initialized, like this:
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script>
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

I DID IT.....
DO NOT USE
instructions described here
simply open jquery.mobile-1.3.1.min.js file
fine ajaxEnabled:!0 and change it to : ajaxEnabled:!1
now hit CTRL+F5 and joy the project while it continues ! ;)

How to add an onclick function to an element in opener window?

I work on a webpage that opens a popup with a picture selector. The pictures added to a selection list are immediately cloned as thumbnails to opener window - that part works fine.
Problem occurs when I try to make these thumbnails clickable, like this:
opener.document.getElementById("someid").onclick = function(){ alert("bam!"); }
So far I only managed to have this working when a popup window is still opened (instead of plain alert(...) I used opener.window.alert("bam!")). However, when I close popup window, clicking the thumbnails results in errors.
Anyone out there who had similar problem and got it working? Thanks in advance.
UPDATE:
OK, I found not the prettiest solution, but so far it works. I had to declare extra function in opener window:
function addbam(id){
document.getElementById(id).onclick = function(){ alert("bam!"); }
}
And in a popup window:
opener.addbam("someid");
If this solution survives multi-browser test, it will stay with me, however I'm pretty sure it should be possible to remove "wrong" scope from such onclick declarations in much straightforward manner.
Thanks guys, your suggestions got me thinking more productive way.

If you use jquery:
$("#someid").on('click', function () {
alert("bam");
});
or without jquery:
---------EDIT----------
//you put your element in a variablle
var div = document.getElementsByTagName("div")[0];
/*you add an event listenner to your variable, when click is triggered, it runs what's inside the brackets*/
div.addEventListener("click", function (evt) {
alert("BAM!");
});
here's an example made just for you :)
http://jsfiddle.net/YDFLV/50/

Jquery Modal window - Modal property breaks code

I hope someone can help. I am missing some logic and styles while I am running the form in JQuery modal window with the 'modal' property is set to 'true'. I am trying to utilize the form from http://jqueryui.com/dialog/#modal-form.
The same code used outside modal window is running correctly. I am not sure how to fix it and decided to share it with you.
I created a page in JSFiddle - http://jsfiddle.net/vladc77/GcQRg/16 to show the code. However, the modal window cannot be ran from there. As a result, I uploaded the same test in here - http://www.vladcdesign.com/modalWindow
When I set (modal: true) then I am getting the following problems.
1.The check boxes in work hours form should enable/disable menus to set the time
2.“More” check box should show/hide a text field
3.I lost ability to set margins between elements in Hours settings form. Now all menus are touching each other even though I use margins styles. They just don’t apply.
All of these issues are present only while I run this DIV in a modal window. It works OK outside the modal window. I am wondering if someone can help and explain what is wrong with the code. Any advice is highly appreciated.

Looking at both the fiddle and the example you posted on your site, you're getting the following error:
Uncaught ReferenceError: closedHours is not defined
The problem appears to be coming from this line:
$(this).append(' <span class="closed custom-checkbox"><input type="checkbox" name="closed" value="closed" class="closed" id="closedHoursElement" onchange="closedHours()"><span class="box"><span class="tick"></span></span></span>Closed');
Also, the reason you can't get the dialog to load on your fiddle is that you're including the JS files in the wrong order. It should be jquery, jquery ui, and then jquery ui.selectmenu.
Your change function on the checkboxes also has a bug, it should be something like this:
$('input[type=checkbox]').change(function() {
if (!this.checked) {
$(this).parent().siblings('select').removeAttr("disabled");
}
else {
$(this).parent().siblings('select').attr('disabled', 'disabled');
}
});
Even when I changed all that, the checkboxes still weren't working, so I removed your custom jquery and jquery ui references. When I did that, they worked fine so something that you've done to customize those is what's causing your problem. You can view my changes here.

The first $(document).ready(function(){}); and second $(function() { }); are the same, the code will be executed in order they are in these blocks.
However the $(window).load(function(){ }); is a little bit differenet, it gets executed later. Check this post to see the difference.
You could experminet a little with defining the click event to your "Open modal window" button, and do all of the binding when that fires:
$('#create-user').bind('click',function(e){
// To avoid navigating by link
e.preventDefault();
e.stopPropagation();
// Do every binding / appending
// $('.workDayHours').each(function() { ...
});

triggering a jQuery function n seconds after the tab/window is in view

I am using jQuery to have a promotional window opening up -say- 5 seconds after a page is loaded. But the effect is lost for people who open the page in a new window or a new tab. When they get to my tab the window will already be open.
Is there a way to get this to fire when people actually start viewing my site?
I was thinking about catching a scroll or something, but people don't get started scrolling immediately and most won't scroll at all. Other than that I am out of ideas.
I am not sure if jQuery offers a solution here... javascript?
Thanks.

the following should do the trick .. (jQuery)
<script type="text/javascript">
function initiatePopup(){
$(window).unbind('blur');
$(window).unbind('focus');
// do the popup
};
$(document).ready(
function(){
$(window).focus( initiatePopup ).blur( initiatePopup );
// your other functions should go from here on
}
);
</script>
[EDIT] on OP request..
code edited to make the example all inclusive
[EDIT 2]
The code above has been edited again because we need to handle the blur event as well.. so we take the code for the popup somewhere else in order to not duplicate it inside both events..
[EDIT 3]
if you want to pass parameters to the popup if they are created later on, then change the event binding line to
$(window).focus( function() { initiatePopup(params); } ).blur( function() { initiatePopup(params); );
and of course change the initiatePopup to accept parameters ..

Would putting a div around everything work with an onmouseover event listener? I've never tried it, so I'm not sure whether that would fire or not, but it might be worth a shot.