We Keep Coding

function showHide(shID) with jquery-cookie

I need to put jquery-cookie for function showHide(shID) do anyone know how to do that ? I got a onclick button to show more content , using function showHide(shID) but I just need to hide for once .So is it possible to add jquery-cookie for it ?how can I do that ? [https://github.com/carhartl/jquery-cookie#readme][1]
here my code:function showHide(shID)
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
please , I need someone to guide me or let me know how to do that .Thanks in advance !

Yes it's possible using cookie for use cookie you must have to include cookie file and jquery file. I give you example.
if($.cookie("example")=='1') {
//get cookie and your hide code here.
} else {
//set cookie
$.cookie("example", "1");
}

Here is an answer ,solved by Ionica Bizau https://stackoverflow.com/users/1420197/ionic%C4%83-biz%C4%83u
function showHide(setCookie) {
var shID = $(this).data("showhide")
, $shEl = $("#" + shID)
, $showHide = $("#" + shID + '-show')
;
if ($shEl.is(":hidden")) {
if (setCookie !== false) {
jQuery.cookie("showhide-" + shID, 1);
}
$showHide.hide();
$shEl.show();
} else {
if (setCookie !== false) {
jQuery.cookie("showhide-" + shID, 0);
}
$showHide.show();
$shEl.hide();
}
}
jQuery(document).ready(function () {
$("#example-show").on("click", showHide);
if (jQuery.cookie("showhide-" + "example") == '1') {
showHide.call($("#example-show").get(0), false);
}
});
JQuery Cookie not function

javascript form validation is not working in IE8

This javascript form validation is not working in IE8 !!
the form submits while the user inters invalid inputs.
it is working properly in other browsers firefox ,opera, chrome.
can you help me please?
<form method="post" name="form1" id="form1" action="editAction.php" onsubmit="return check_user_info()">
===============================
<script type="text/javascript">
function check_user_info()
{
var proceed = true;
if (checkUserFirstName() == 1)
{
document.getElementById("userFname_msg").style.display = "block";
document.getElementById("userFname_msg1").style.display = "none";
proceed = false;
}
else if (checkUserFirstName() == 11)
{
document.getElementById("userFname_msg1").style.display = "block";
document.getElementById("userFname_msg").style.display = "none";
proceed = false;
}
else
{
document.getElementById("userFname_msg").style.display = "none";
document.getElementById("userFname_msg1").style.display = "none";
}
//-----------------------------
if (checkUserLastName() == 1)
{document.getElementById("userLname_msg").style.display = "block";
document.getElementById("userLname_msg1").style.display = "none";
proceed = false;}
else if (checkUserLastName() == 11)
{document.getElementById("userLname_msg1").style.display = "block";
document.getElementById("userLname_msg").style.display = "none";
proceed = false;}
else{document.getElementById("userLname_msg").style.display = "none";
document.getElementById("userLname_msg1").style.display = "none";
}
//-----------------------------
if (checkMobile() == 1)
{
document.getElementById("mobile_msg").style.display = "block";
proceed = false;
}
else
document.getElementById("mobile_msg").style.display = "none";
//----------------------------------
if (checkPhone() == 1)
{
document.getElementById("phone_msg").style.display = "block";
proceed = false;
}
else
document.getElementById("phone_msg").style.display = "none";
//----------------------------
if (proceed)
{
alert ("your information has been updated successfully ..");
return proceed;
}
else
{
return false;
}
} // End function ...
//----------------------------------------------------
function checkUserFirstName()
{
if (document.getElementById("firstName").value.trim().length == 0)
return 1 ;
else if (!(document.getElementById("firstName").value.match(/^[ \.\-_a-zA-Z]+$/)))
return 11 ;
} // End function ...
//--------------------------------------------------
function checkUserLastName()
{
if (document.getElementById("lastName").value.trim().length == 0)
return 1 ;
else if (!document.getElementById("lastName").value.match(/^[ \.\-_a-zA-Z]+$/))
return 11 ;
} // End function ...
//-------------------------------------------------------------
function checkMobile()
{
if (((document.getElementById("mobile").value.trim().length >0) && (document.getElementById("mobile").value.trim().length != 10))|| (isNaN(document.getElementById("mobile").value)))
return 1 ;
} // end function ...
//----------------------------------------------------------
function checkPhone()
{
if(!document.getElementById("TelephoneNumber").value.match(/^[ \/0-9]*$/))
return 1 ;
} // end function ...
</script>

I'm guessing the problem is probably because of the .trim() method on the strings in your check functions. There isn't a String trim method in older browsers, you'd have to use a polyfill to make sure it's always available, no matter the browser. A good example is:
Trim string in JavaScript?
"".trim || String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g, '');};
is what I use.

Javascript - Display div

I need to check onload if an anchor is within the URL to open a tab if required. The problem is that if a user opens a tab before the onload function gets fired, the tab gets closed and the user needs to open it again.
How to fix that?
HTML:
<body onload="checkurl()">
JS:
function checkurl(){
if (window.location.hash == '#about')
{
showhide('secabout');
}
else if (window.location.hash == '#contact')
{
showhide('seccontact');
}
}
JS function:
var divState = {};
function showhide(id) {
if (document.getElementById) {
var divid = document.getElementById(id);
divState[id] = (divState[id]) ? false : true;
for (var div in divState){
if (divState[div] && div != id){
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
}
}
Thanks.
Uli

I'm pretty sure that <script> tags inside of <head> execute right away before onload() so try that.

You can call the function with an extra parameter to make sure will show in your load function.
Then check on a global initialized variable to check if the function has already been executed by user when running from the checkurl function. This is required if the user clicks on a different tab than the one specified in the URL.
Also you need to check on divState[id] instead of divid.style.display == 'block' when updating divid.style.display at bottom.
function checkurl(){
if (window.location.hash == '#about')
{
showhide('secabout', true);
}
else if (window.location.hash == '#contact')
{
showhide('seccontact', true);
}
}
var divState = {};
var initialized = false;
function showhide(id, initialize) {
if(initialized && initialize) return;
initialized = true;
if (document.getElementById) {
var divid = document.getElementById(id);
divState[id] = (divState[id]) ? false : true;
for (var div in divState){
if (divState[div] && div != id){
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
if(initialize){
divid.style.display = 'block';
} else {
divid.style.display = (divState[id] ? 'block' : 'none');
}
}
}

Javascript - Toggle Element only works one way! Also help required for URL append

I am trying to use a toggle script to show and hide certain elements of a page... it works fine hiding the Table containing a list of links and showing the Table with the content inside, but using it to reverse this does not work at all!
<script type="text/javascript">
function getElement(iElementId)
{
if (document.all)
{
return document.all[iElementId];
}
if (document.getElementById)
{
return document.getElementById(iElementId);
}
}
function toggleElement(oElement)
{
if (oElement.style.display == "none")
{
oElement.style.display = "inline";
}
else if (oElement.style.display == "inline")
{
oElement.style.display = "none";
}
else
{
oElement.style.display = "none";
}
}
function OpenPage(name) {
// other function not relevant here //
toggleElement( getElement('MainTable'));
toggleElement( getElement('ContentTable'));
return false;
}
function Switchback(){
// document.getElementById(MainTable).style.display = "inline";
// document.getElementById('ContentTable').style.display = "none";
toggleElement( getElement('MainTable'));
toggleElement( getElement('ContentTable'));
return false;
}
</script>
Even just trying a "getElementByID" function doesn't work for the switching back to displaying the main table of links and hiding the content table... Any way to make it work? thanks.
(also, whilst we're at it, what is the best way to append a URL using Javascript/AJAX? as the page is presently forum/index.php but when a link to a forum is clicked I want the URL to append to forum/index.php?f= and then the relevant number)

<script type="text/javascript">
function getElement(iElementId)
{
if (document.all)
{
return document.all[iElementId];
}
if (document.getElementById)
{
return document.getElementById(iElementId);
}
}
function toggleElement(oElement)
{
if (oElement.style.display == "none")
{
oElement.style.display = "inline";
}
else if (oElement.style.display == "inline")
{
oElement.style.display = "none";
}
else
{
oElement.style.display = "none";
}
}
function OpenPage(name) {
// other function not relevant here //
toggleElement( getElement('MainTable'));
toggleElement( getElement('ContentTable'));
return false;
}
function Switchback(){
// document.getElementById(MainTable).style.display = "inline";
// document.getElementById('ContentTable').style.display = "none";
toggleElement( getElement('MainTable'));
toggleElement( getElement('ContentTable'));
return false;
}
</script>

ajax hidding div problem in IE

I have a javascript page which checks an email and username, this works fine in every browser but Internet Explorer. The div box where errors are shown should be hidden unless an error is given e.g. username taken or invalid email.
If the email gets an error this is shown in the div tag, but doesnt work for username (in all browsers)
below is my code:
<script type="text/javascript">
var usernameok;
var emailok;
function checksubmit()
{
if (usernameok && emailok) {
document.getElementById("button").disabled = false;
} else {
document.getElementById("button").disabled = true;
}
}
function username(username)
{
make_request();
function stateck()
{
if (httpxml.readyState == 4) {
if (httpxml.responseText.indexOf("Username Ok") >= 0) {
usernameok = true;
} else {
usernameok = false;
}
checkCanSubmit();
}
}
httpxml.onreadystatechange = stateck;
user_url = "check_username.php?username=" + username.value;
httpxml.open("GET", user_url, true);
httpxml.send(null);
}
function email(email)
{
make_request();
function stateck()
{
if (httpxml.readyState == 4) {
if (httpxml.responseText.indexOf("Email Ok") >= 0) {
emailok = true;
} else {
emailok = false;
}
checkCanSubmit();
}
}
httpxml.onreadystatechange = stateck;
email_url = "check_email.php?email=" + email.value;
httpxml.open("GET", email_url, true);
httpxml.send(null);
}
</script>

I see your function stateck() is the return function from the HTTP request. However, you are defining it within another function. Not as an anonymous function, but just as a function within another function.
I see what you're doing now...ok, try this instead:
httpxml.onreadystatechange = function()
{
if (httpxml.readyState == 4) {
if (httpxml.responseText.indexOf("Email Ok") >= 0) {
document.getElementById("email").style.backgroundColor = "green";
document.getElementById("email").style.color = "white";
document.getElementById("email_div").style.display = 'none';
emailok = true;
} else {
document.getElementById("email").style.backgroundColor = "red";
document.getElementById("email_div").innerHTML=httpxml.responseText;
emailok = false;
}
checkCanSubmit();
}
};

Do you need to set your initial state to display: none? I think IE may initialize the divs with a non-0 height whereas the divs may be technically visible in other browsers but too short to see.
Edit:
Okay I think I misunderstood your question. Your problem is not with hiding the divs but with displaying errors for the username.
Nothing obvious jumps out at me. Try stepping through the code using VS or VWDE:
http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/