Develop Reference

Make browser's back button work when using hide and show (jquery)

I've seen the new website of megaupload (mega) and we've got this:
Ok, if I press on left-menu contacts, it only reloads the white part on the image, if I press messages, the same, it only reloads white part. But if I go from contacts to messages and I press browser's back button, it goes from messages to contact and only reloads white part as always.
In my website, I do the same using jquery hide and show, but obviously, if I press browser's back button it doesn't hide the div and shows the other one.
My web site is only one html file and there are 4 div that get shown or hidden depending on the button you press, this is an example:
$("#btn_contact").click(function () {
$("#content_contact").show();
$("#content_home").hide();
$("#content_products").hide();
$("#body_aux").hide() ;
$(this).addClass('visited');
$('#btn_products').removeClass('visited');
$('#btn_home').removeClass('visited');
});
Can anybody tell me how to find this with jquery or whatever I have to use.
I don't know if I've explained myself well, if not, ask me to do it better.
I would appreciate any help. Thanxs a lot.

Maybe it'd be easier for you and more appropiate to make "content_contact.html", "content_home.html", and so on and use .load() function as Ozan Deniz said. You wouldn't have to change margins, positions, etc. and back button would work withouth programming. I think is not appropiate to make the whole website using just one html file, showing and hiding div's, ofcourse you can do this but maybe is not the right way. I'm newbie at this, but that's what an expert told me beacuse I was doing something similar to that.
Hope to help you.

You can use jquery load function to load white part
For example;
$('#result').load('ajax/test.html');
And in back button event you can load the white part
jquery hide and show
window.onbeforeunload = function() { $('#result').hide(); }; or
window.onbeforeunload = function() { $('#result').show(); };
jquery load function
window.onbeforeunload = function() { $('#result').load('ajax/test.html'); };

Hide/show html content with javascript

I'm looking for javascript that will allow more HTML to appear on a website when a user clicks on an icon. I'm working on my first ever mobile design, and am building a prototype with html,css and javascript. Here is what I have so far: http://www.patthorntonfiles.com/snk_mobile
What I want to happen is when users click on the search icon at the top, a search box appears. I don't want the jquery accordion effect or something similar. I just want some HTML to appear and then disappear when a user clicks on the icon again or hits search.
Any recommendations for code or libraries for me to look at what be great. I don't need you to give me the code, but my Google searches aren't turning up exactly what I'm looking for.

Here's a non-jQuery solution:
document.getElementById("identifier").style.setProperty("visibility", "hidden");
and
document.getElementById("identifier").style.setProperty("visibility", "visible");

I know you said you don't want to use the jQuery accordion effect, but using jQuery to animate the opacity?. Please see below.
$("#idClicked").click(function() {
$("#searchBox").fadeTo("fast", 1);
});

jQuery's hide() and show() will do exactly that (they don't have any accordion effect, they just appear and dissapear with no ornaments).
$('#HtmlId').hide();
$('#HtmlId').show();
Additionally you get toggle(), to hide if shown and show if hidden:
$('#HtmlId').toggle();
---- Edit ----
After reading your comment, imagine you have the html:
<li><img id='hideShowIcon' src="patthorntonfiles.com/snk_mobile/search.gif"; width="50px'"/></li>
And the div to hide/show is:
<div id="search"> <gcse:search></gcse:search> </div>
Then you bind the click event to the image with the callback function performing the toggle:
$("#hideShowIcon").click(function() {
$('#search').toggle();
});
----- Edit 2-----
I saw your site and you don't have a document ready function. Basically it should look like this:
$(document).ready(function() {
$("#hideShowIcon").click(function() {
$('#search').toggle();
});
});
If you don't add this, jQuery tries to bind the action to an element that doesn't exist yet.

TinyMCE issues with resizable content in IE8

Update: After posting on the TinyMCE forum (something I should have done before offering the bounty) the primary issue may be solved, but I'm still very much open to anything regarding the other issues of how to disable the resizable behavior (number 2 and 3 at the end of the post).
I am having trouble saving content with TinyMCE in IE8 (not other versions). In IE, certain elements in the editor have handles in each corner and draggable "borders", and when you focus in to start editing, a striped border may appear:
Problem:
If I submit the form while the thick border is still visible (state 3 in the image), the form will not save the content. I have to click into another area of the editor to make all the borders disappear, and then submit the form.
I'm Using the TinyMCE 3.4.6 jQuery package, I don't get this behavior in other browsers.
Update:
I've narrowed down the cause of the issue quite a bit and found a few things:
The problem occurs with or without the jQuery build, and does not depend on which tinymce plugins are in use.
The thicker "border" only seems to appear when there is a (min-)height/width applied to the element, either declared inline or from external CSS.
Using IETester, I was getting errors that claim 'length' is null or not an object when focus from the active element is lost; i.e. when you click anywhere outside the TinyMCE editor.
I did not see this error in a true IE8 install (something I currently can not access), however: this makes sense somewhat, considering the problem and workaround stated above. I had to hit submit twice and dismiss the warnings to get the form to post in IETester.
These borders and handles will actually extend outside of the editor/iframe:
I created a live bare-bones demo, here is the content of it:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
$(function() {
$('textarea.tinymce').tinymce({
script_url : 'tiny_mce/tiny_mce.js',
content_css : 'test.css'
});
});
</script>
<form action="" method="post">
<textarea class="tinymce" name="content"><p>Testing</p></textarea>
<button type="submit">Submit</button>
</form>
/* Content of test.css */
p {
min-height: 24px; /* this line makes the handles appear */
background-color: #f00;
color: #fff;
}
How to reproduce:
Open the demo in IE8
Click on the existing paragraph, a small 1px border should appear, and you should be unable to edit the text.
Click on the element again, now the thick border appears and text can be edited.
Type a few characters, then click the submit button. The update will not be sent with the $_POST data. If you were to click another area inside the editor, removing the thick border, the data would be sent normally.
Questions/Issues:
Important: How can I get the form to post the edited text without requiring a workaround from the user?
Update: This seems to be resolved in a recent commit from the TinyMCE lead developer. I still have been unable to test on a real IE8 install, but this worked and silenced the errors in IETester.
Less important: Is there any way to prevent or remove the handles and draggable edges completely? I'm guessing this is a concern with IE's implementation of contentEditable and not so much TinyMCE, and may not even be the cause of the problem.
Extra: How can I prevent these handles from extending outside the editor?

Question 2 is due to the IE implementation of contentEditable, This is a ticket at their connect site requesting to fix it https://connect.microsoft.com/IE/feedback/details/576043/paragraphs-with-haslayout-behave-like-a-block-inside-contenteditable (login required)
I don't know of any solution for Question 3, except to wait for a new IE. In the latest IE10 under windows8 they claim that it's fixed https://connect.microsoft.com/IE/feedback/details/576040/resizing-handles-in-contenteditable-elements-are-placed-over-any-other-element (login required), but their solution is to hide the resizing handles always. Well, there's a solution and it's to avoid using any style while you're editing that forces the internal hasLayout flag for IE

alright this is a weird IE8 bug. I've found a workaround but still the tinymce team should fix this.
I've found out that before submitting the form you could set the content of the textarea to the content of the textarea... Sounds weird but calling the .html() triggers a tinymce event that returns the correct html.
$("button").click(function() {
$("textarea").html($("textarea").html());
});

There is apparently no way you can fix the second issue.
Here is an articles that explains it quite well: You can't remove those unless you remove the property that made them appear.
http://www.satzansatz.de/cssd/onhavinglayout.html
(search for the word "remove")
You can still improve a bit by using this on the container (the element with contenteditable):
function fixIE( editableContainer ) {
editableContainer.onmousedown = function ( e ) {
e = e || event;
( e.target || e.srcElement ).focus( );
};
editableContainer.onresizestart = function ( e ) {
e = e || event;
if ( e.stopPropagation ) {
e.stopPropagation( );
}
e.cancelBubble = true;
if ( e.preventDefault ) {
e.preventDefault( );
}
e.returnValue = false;
return false;
};
}
(Your element doesn't have to be a div)
The onmousedown will allow you to click only once to get to the state where you can write.
The onresizestart will prevent resizing.

if you give it hasLayout, it should work. try zoom:1;

IE not triggering onclick

For some reason IE won't trigger an onclick event. I have a link in my webpage which should renew a captcha image, but no matter what I try, the onclick event won't trigger. I even tried this to test the onclick event:
<a href="#" id="rc" onclick='alert("test"); return false;'>change image</a>
But nothing happened. I also tried to add the onclick event using js in the window.onload event, same result. All other javascript scripts do work, so js is working. Does anyone has any idea why this doesn't work?
by the way, the event doesn't work in any version of IE, and it does work in any other browser.
Edit: If you want to see the full source, go to: http://www.rosegardenvoorburg.nl/Contact?stackoverflow
The page is in Dutch, but the sourcecode is (of course) HTML, so you must be able to understand that.
edit2: I've found a solution myself, and you're never gonna believe what's wrong:
When I'm logged in to the control panel, a div is added at the top of the page, similar to the one shown in ie7 (which tells you you're browser is too old). However, when I don't add a border to that div, the captcha refresh button doesn't work. This doesn't make any sense at all, but at least I've found a solution...

Try with the below:
<a href="javascript:void(0);" id="rc" onclick='alert("test"); return false;'>change image</a>
Also have a look at Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

You are doing it in the wrong order
FIRST add the onload, THEN change the source
var cImg;
function renewCaptcha(){
cImg = new Image();
cImg.onload=function(){document.getElementById("captcha").src = cImg.src;};
cImg.src='/Img/captcha/securimage_show.php?' + Math.random();
}

Few tips to ponder!
check if javascript:alert("test") on your ie address bar pops up the message.
Also check and make sure that javascript option is not turned off.
You may also want to reset your ie settings and see if it work.
Also try to see if same works on your fellow colleague's computer.

How to bring focus to a window in jquery?

I am trying to bring focus to window using jquery. The window is popup initiated through a button click on the parent page. I have some ajax calls going on in the child window, so data is being updated. My issue is that if the user clicks on the parent window and hides the child behind it, i would like to bring that child window back to the forefront if there is a data update.
inside $(document).ready I wire up these events:
$(window).blur(function(){
WindowHasFocus =false;
}).focus(function(){
WindowHasFocus =true;
});
Then, if data is updated, I call this function:
function FocusInput(){
if(!WindowHasFocus){
$(window).focus();
}
}
This works as expected in IE8, but in FireFox(and all other browsers) the Blur event nevers seem to fire if I click the parent window. Any suggestions/ideas on how achieve this?
update:
Total facepalm moment:
In FireFox:
* Tools
* Options…
* Content tab
* Advanced button next to “Enable JavaScript”
* check the box named "Raise or Lower Windows"

Total facepalm moment: In FireFox:
Tools
Options…
Content tab
Advanced button next to “Enable JavaScript”
check the box named "Raise or Lower Windows"
This is turned off by default and must be enabled. And also, i assumed that since it didnt work in Chrome, that Safari would be the same, but you know what they say about "assuming" (it works in Safari, but not Chrome).

If there is not a strong reason for having two separate windows then it would be better use "modal boxes", there are plenty of examples out there and jquery plugins to achieve that. An example of such a plugin:
http://www.84bytes.com/2008/06/02/jquery-modal-dialog-boxes/

You're absolutely correct. In FF, it seems as though it does fire the event, but at that same time, it seems like it doesn't register the element as being focused. Therefore the blur event can never be fired. Not sure I'm even explaining that correctly... The following code says it all.
In this example, the box is hidden by default, but is displayed via the focus event listener. In IE 8, if you click the main window, it still fires blur, but in FF it doesn't:
<html>
<head>
</head>
<body>
<div id="hiddenWin" style="width: 100px; height: 100px; background-color: Black; display: none;"></div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var something = 12;
something += 4;
$(document).ready(function()
{
$("#hiddenWin").focus(function()
{
$(this).show();
}
).blur(function()
{
$(this).hide();
}
)
$("#hiddenWin").focus();
}
);
</script>
</body>
</html>
For your need, would it be feasible to setup an overlay background? Something that is a fixed position # top:0 and left:0 which takes up the whole screen and has a z-index that is less than your popup. That way, when they click the overlay, it will steal focus and then you can hide everything...? IDK, just a suggestion. I'll keep messing around and see if I can figure it out. Good question. +1

It seems like you shouldn't care to know when your window got blurred. When your data updates, your window is either not in focus, in which case you want to focus it, or it is already in focus, and focusing it again doesn't hurt you any.

Yeah the modal thing is probably the way to go but sometimes you just need to do it the way you want to do it.
I would use plain old JavaScript. Name the window and the bring it into focus.
function showImageWindow(imageURL)
{
var imageWindow = window.open(imageURL,"My_Window","width=1000px,height=1000px,menubar=0,titlebar=0,toolbar=0,location=0,scrollbars=0,status=0");
imageWindow.focus();
}