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
Related
I am working on a test project targeting android internet browser. I am hiding some object onLoad using javascript.
The problem is, that it is working in mozilla firefox but not working in android default internet browser.
Here is my full code:
<!DOCTYPE html>
<html>
<script type="text/javascript" async>
function ajaxpath_59c479660b217(url){return window.location.href == '' ? url : url.replace('&s=','&s=' + escape(window.location.href));}(function(){document.write('<div id="fcs_div_59c479660b217"></div>');fcs_59c479660b217=document.createElement('script');fcs_59c479660b217.type="text/javascript";fcs_59c479660b217.src=ajaxpath_59c479660b217((document.location.protocol=="https:"?"https:":"http:")+"//www.freecommentscript.com/GetComments2.php?p=59c479660b217&s=#!59c479660b217");setTimeout("document.getElementById('fcs_div_59c479660b217').appendChild(fcs_59c479660b217)",1);})();
function myFunction() {
document.getElementById("comment-ad").style.display = "none";
}
function myFunction2() // no ';' here
{
var elem = document.getElementById("fcs_Comment_59c479660b217");
if (elem.value=="Enter your comment here") elem.value = "Enter your post here";
else elem.value = "Enter your post here";
}
function myFunction3() // no ';' here
{
document.getElementById("comment-rss-feed").style.display = "none";
}
function showFilterItem() {
if (filterstatus == 0) {
filterstatus = 1;
$find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem();
document.getElementByClassName("ShowButton").innerHTML = "Hide Filter";
}
else {
filterstatus = 0;
$find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem();
document.getElementById("ShowButton").innerHTML = "Show filter";
}
}
if (document.readyState === "complete") {
myFunction();
myFunction2();
myFunction3();
showFilterItem();
}
else {
window.onload = function () {
myFunction();
myFunction2();
myFunction3();
showFilterItem();
};
};
</script>
</body>
</html>
I'll put the whole script in domloaded event to be sure that js can find the dom elements. like that:
<script type="text/javascript" async>
document.addEventListener('DOMContentLoaded', function(){
function ajaxpath_59c479660b217(url){return window.location.href == '' ? url : url.replace('&s=','&s=' + escape(window.location.href));}(function(){document.write('<div id="fcs_div_59c479660b217"></div>');fcs_59c479660b217=document.createElement('script');fcs_59c479660b217.type="text/javascript";fcs_59c479660b217.src=ajaxpath_59c479660b217((document.location.protocol=="https:"?"https:":"http:")+"//www.freecommentscript.com/GetComments2.php?p=59c479660b217&s=#!59c479660b217");setTimeout("document.getElementById('fcs_div_59c479660b217').appendChild(fcs_59c479660b217)",1);})();
function myFunction() {
document.getElementById("comment-ad").style.display = "none";
}
function myFunction2() // no ';' here
{
var elem = document.getElementById("fcs_Comment_59c479660b217");
if (elem.value=="Enter your comment here") elem.value = "Enter your post here";
else elem.value = "Enter your post here";
}
function myFunction3() // no ';' here
{
document.getElementById("comment-rss-feed").style.display = "none";
}
function showFilterItem() {
if (filterstatus == 0) {
filterstatus = 1;
$find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem();
document.getElementByClassName("ShowButton").innerHTML = "Hide Filter";
}
else {
filterstatus = 0;
$find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem();
document.getElementById("ShowButton").innerHTML = "Show filter";
}
}
if (document.readyState === "complete") {
myFunction();
myFunction2();
myFunction3();
showFilterItem();
}
else {
window.onload = function () {
myFunction();
myFunction2();
myFunction3();
showFilterItem();
};
};
});
</script>
I've searched but frankly, do not know enough about JS to make sense of all of the other "combine these 2 functions" posts already out there.
I am using a script to slide out a Contact Panel. I duplicated this script to then slide out the About Panel.
I want to consolidate both into one script to tidy things up. Possible?
Contact Panel:
<script type="text/javascript">
function showContactPanel() {
var elem = document.getElementById("contact-panel");
if (elem.classList) {
elem.classList.toggle("show");
} else {
var classes = elem.className;
if (classes.indexOf("show") >= 0) {
elem.className = classes.replace("show", "");
} else {
elem.className = classes + " show";
}
console.log(elem.className);
}
}
</script>
Duplicated for the About Panel:
<script type="text/javascript">
function showAboutPanel() {
var elem = document.getElementById("about-panel");
if (elem.classList) {
elem.classList.toggle("show");
} else {
var classes = elem.className;
if (classes.indexOf("show") >= 0) {
elem.className = classes.replace("show", "");
} else {
elem.className = classes + " show";
}
console.log(elem.className);
}
}
</script>
You could pass the panel ID as a parameter:
function showPanel(id) {
var elem = document.getElementById(id);
if (elem.classList) {
elem.classList.toggle("show");
} else {
var classes = elem.className;
if (classes.indexOf("show") >= 0) {
elem.className = classes.replace("show", "");
} else {
elem.className = classes + " show";
}
console.log(elem.className);
}
}
and then call it that way:
showPanel("about-panel");
or
showPanel("contact-panel");
So change your function signature to take a parameter for the element in question:
function showPanel(panelId) {
var elem = document.getElementById(panelId);
...
and call it:
showPanel("contact-panel");
You could pass the id of the panel as an argument to the function:
<script type="text/javascript">
function showPanel(panelId) {
var elem = document.getElementById(panelId);
if (elem.classList) {
elem.classList.toggle("show");
} else {
var classes = elem.className;
if (classes.indexOf("show") >= 0) {
elem.className = classes.replace("show", "");
} else {
elem.className = classes + " show";
}
console.log(elem.className);
}
}
</script>
See JavaScript Function Parameters for more information on function parameters.
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');
}
}
}
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>
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/