How do I set jquery toggle OFF on page load? - javascript

Greetings I have the following javascript controlling some DOM elements on my page to toggle on/off to hide the elements and save real estate on the page ...
I have a gridview at the bottom of the page, and when I perform operations on the gridView, my page reloads and the toggle is reset.
// Toggle Dealer Information on/off
$("#mlldlr").click(function () {
$("#DealerContainer").toggle();
$("#ShowHideDI").toggle();
if ($("#morelessDi").text() === ("...show less"))
$("#morelessDi").text("...show more");
else
$("#morelessDi").text("...show less");
The problem is ... if I toggle off and I reload the page for whatever reason, the toggle is reset to on, meaning the items show. I want them to remain closed until I initiate their reopening. Is there any way to do this?

JavaScript doesn't store state between page reloads by default. If you want to persist the state, you'll need to store that information some where. localStorage might be the right solution. Here's a simple example of how localStorage can keep a css state after reloading: http://jsfiddle.net/kweqaofv/2/

Other than using the COOKIE or The hide();
Follow the simple 1 line code:
$("element").toggle(100);
#element is the element of which you want to turn off the toggle on page loads
Just insert this line at first and then,
Toggle your element, like a sliding dailog or
Navigation panel!
Hope it helps!

Put this below the tag.
<script type="text/javascript">
$(document).ready(function ()
{
$("#DealerContainer").hide();
$("#ShowHideDI").hide();
});
</script>

The fact that the page is reloaded is making the DOM to reset to its initial state, thus resetting the toggle.
The only way I think this can be done is to have a parameter that would not be changed on page reload.
I have three suggestions:
1- You can set a cookie in your browser with the value of the toggle (on/off) and when the page loads, ask for this value and set the toggle. This can be done with jquery (follow this link for more info How do I set/unset cookie with jQuery?):
To set a cookie:
$.cookie("test", 1);
To delete it:
$.removeCookie("test");
2- The other option is to save this parameter on the server side. I'm guessing that if the page is reloading is because you are making a request to the server?
If this is the case, you could send the state of the toggle to the server, do your query, and on the response get the state of the toggle back. In the callback function you would then set the proper toggle state.
3- Another way could be using a JFrame for the grid, making the grid the only item of the page to reload.
Hope this helps

I had a similar problem with one that is as simple as
Jquery
$(document).ready(function() {
$('nav a').click(function() {
$('p').toggle('slow');
});
});
with regards to toggle being switched "on" upon page load.
All I did on this on was inline text the html with style="display :none;".This switches off the 'p' tag upon load and thus the user can switch it "on" any time after that.
So that is
HTML
<nav style="padding-top: 1cm; padding-bottom:1cm;">
<ul>
<li style="padding-bottom: .2cm;">
<a class="popup" style="padding-bottom: .2cm;cursor : pointer;"><b>Send</b></a>
</li>
<p style ="display: none;">your cat a litter box.
</p>
</ul>
</nav>
Bear in mind that the 'p' takes no space upon page load.
Hope I shed some light.

Related

Verifying a radio input has been checked to display div on separate page

I am having an issue of hiding and displaying content on a separate page if a certain radio input has been checked. Currently I am trying to hide special content if the user hasn't checked one radio input. I have code that works for that page which switches the banner to allow them to go to the page after they complete this task, but when I go to the next page the content doesnt show up.
Here is my current script for the banner to hide and show based on the radio input being checked.
if ($('input[name=sexo-field]:checked').length > 0) {
$("#pdfFlipButton").show();
$("#pdfFlipButtonOff").hide();
} else {
$("#pdfFlipButton").hide();
$("#pdfFlipButtonOff").show();
}
But how would I go about showing or hiding a div on the next page based on these parameters?
This is not easy and you have 3 not good ways:
The page that must be affected, is a child page and send data from parent page to child page.
In both page create ajax functions, send direction from one and another must check the server in a few seconds:
setInterval(function(){
//if radio checked
}, 3000);
As mentioned in comments, submit radio button and refresh second page.
As #adeneo said, you can wrap the radio button in the form element and after submitting that form, catch values on the next page which the form points on. Or as #Michael Alexander Montero said, you can use sessionStorage which I would rather recommend.
Here is the documentation of how to use sessionStorage. In your case it would be for example:
sessionStorage.setItem('radiochecked', true);
And in the next page you will add following line:
if(sessionStorage.getItem('radiochecked') {
// display the panel
}

Display loading icon when transitioning between divs

I have a form, that when the "Next" button is clicked, a new div appears in place of the old one with this code:
function showDiv() {
document.getElementById('2').style.display="block";
document.getElementById('1').style.display="none";
}
I am then, once the form is submitted, sending my data to a server so that it is emailed to me. The problem is that the previous action, the transition between divs after the button click, is being performed far too quickly. People have told me that it would look a lot better with some sort of transition or a quick loading icon, and that it doesn't look authentic.
Is there any way to have my second div "slide" into the position of the new one? Or some sort of transition? Keep in mind, this is just switching two divs out for one another. No actual data is being processed yet, and no new page is being loaded. Or is there any way to create a loading icon on this action to last for 1second?
Thank you for your help.
Try this
// send data
// show loading gif
setTimeout(function () {
// hide loading gif
// show other div
}, 2000);
You get a 2 second delay this way. Hope it helps.
I assume you're open to using jQuery based on your tags. jQuery offers a number of ways to animate changes to divs. .animate() provides a way to do custom animations, or your can use one of the provided options. In your case, perhaps something like .fadeToggle() would work?
Detailed information here: https://api.jquery.com/category/effects/

changing id within javascript with onClick var?

I managed to get some js to work to my surprise, now I want to make it a little more complex which is way out of my expertise.
I have a button when clicked will reload a iframe that is on my page. I have multiple iframes all but 1 are hidden. Then I use jquery to display a different iframe and hidden the previous depending on the nav button clicked. e.g. "1-btn" (nav btn) tied to "1-win" (iframe), "2-btn" (nav btn) tied to "2-win" (iframe) etc. So when you click "2-btn", "1-win" iframe hides and "2-win" iframe is displayed. Now I want to change my code so this ties into my reload javasrcipt. Currently, my js only reloads 1 iframe via the iframe id. I want to change this id every time to a different iframe. This will allow my Reload btn to only reload the current iframe displayed and not any of the other that are hidden.
Here is my Reload js
function Reload () {
var f = document.getElementById('1-win');
f.src = f.src;
}
As you can see this reload script only works for iframe "1-win". When i click "2-btn" nav to display "2-win" iframe (and hides "1-win") the reload button still only works for "1-win". Therefore, I want it to also change. For e.g. when I click "2-btn" (nav) to display "2-win" iframe I want to change the Reload id to "2-win" also.
I was thinking of using onClick within my nav buttons which passed through the id of the iframe which that nav btn is tied to. However, I have no idea how to do this.
For full code see:
https://github.com/tmacka88/Service-Manager
Sorry if this doesn't make any sense, I cant think of an easier way to explain it.
Thanks
EDIT
This below answer may or may not still apply now that the problem has been better defined.
One approach you could try is having a hidden field on the page which contains a semi-colon separated list of the Id's of the iframes. E.g.
<input type="hidden" name="iframeids" value="1;2;3;4;5">
On the click event of your button, call some JavaScript which gets the value of the hidden field, takes the first token before the semicolon, and then reorganise the string. An example:
// Next value is 1
// Use 1 in your JS
// Put 1 to the end, next is now 2
<input type="hidden" name="iframeids" value="2;3;4;5;1">
You would contain the logic of re-arranging etc. in the JS function.
Now that the problem is better defined, we can work out a proper solution.
Here are some design considerations:
Ideally you do not want to manually add a new button for every iframe that you put on the page. Main reason being code maintenance. If you were to add a new iframe, or remove one, your code would not function correctly. Also the amount of mark-up required will be unnecessarily high
jQuery will make your life easier, although it's not required, it will cut out a lot of code. I can't stress enough the importance of knowing JavaScript basics first, but this is your responsibility to learn
For point 1, what we would like is a generic solution so that if you add more iframes, the buttons are added automatically. JavaScript is the way to do this (I'm assuming this is just HTML, not ASP.net or php or some other server side
Point 2 - jQuery will help with point 1.
Now we have this understanding, let's look at an outline of what we need to do:
In JavaScript, loop through the iframe tags on the page
For each iframe, generate a button using jquery, using the values like src and id in the iframe as attributes on the button
Add some click-event code to the button do define what it needs to do when clicked
Again using jQuery, add the newly created buttons to the DOM
This did the trick:
function Reload()
{
$("iframe").each(function()
{
if($(this).is(':visible'))
$(this).attr('src', $(this).attr('src'));
});
}

After button clicked, change to different page and show hidden content

I have some "Learn More" links on my Home page, all of which correspond to different sections of content that is on the More Info page. These different sections of content are all hidden using display: none.
What I'm wondering is if there's a way to make it so that when I click a particular "Learn More" link, the user will be sent to the More Info page, and the section of content corresponding to the Learn More link they clicked will be shown.
I can't think of a way to achieve this, but I'm hoping it will be possible, perhaps using JavaScript.
EDIT:
The code I currently have is nothing special. Four <a> links on the Home page, then on the More Info page, four divs that are all initially hidden using display: none.
The solution ended up being fairly simple, I did what is described in the top answer of this question: Getting URL hash location, and using it in jQuery
Learn more
<script>
function showContent(id) {
$("#"+id).show();
}
</script>
I think it is possible.You can take the information on a div,and then you click "Learn more",show the div.
In this way,you even needn't a hyperlink,just a click event,like the code upstairs.Of course,this div was hidden before.
One way you can achieve this would be to add a hash to that link with the id of the section you want to show, like this: Learn More. Then just check for it in window.location.hash on the /moreinfo page and show the div.
You have to do it this way: try to use named anchors.
first:
Learn More
when use clicks this link user will navigate to particular page with different sections.
second:
on this page suppose you want to show the 3rd section:
.....
<a name='section-3'></a>
<h1>Your section-3</h1>
In your case divs are hidden then use js or jQuery for this:
As you will get a hash in the location url then use .substr()' and.indexOf()` javascript methods.
try to put this script on those page where you are having your hidden divs
$(function(){
var url = window.location.href;
var obj = url.substr(url.indexOf('#'));
$(obj).show();
});

jQuery Toggle Divs Expand When JavaScript do_PostBack Link Is Clicked

I am working on a new site TheDigitalScale and I am using jQuery to create a feature list that expands a div when clicked and closes the div with another click.
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function()
{
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
});
</script>
<div class="msg_list">
<p class="msg_head">They Forgot The Buttons</p>
<div class="msg_body"><p>
Just kidding. The MXT has nifty touchscreen controls so you never have to worry about buttons getting dirty or broken.
</p></div>
</div>
It works fine and all but, I also have a product review link that uses the JavaScript do_PostBack function to expand a review panel.
Review and Rate this item
When the review link is clicked, it causes all of the jQuery divs to expand.
When I set enablepartialrendering to false and it "fixes" the problem but when the review link is clicked it takes the user to the top of the page and expands the review panel rather than just expanding the review panel and keeping the user in the right spot.
I hope I explained this well enough; I am very new to jQuery, JavaScript and AJAX.
Regards,
Shala
EDIT:
I suppose I didn't really ask a question so...
What can I change to make the review link expand the review panel and keep the user in the area without also expanding every one of the jQuery divs?
Here is a link to a product page: MBSC-55
It looks like you have nested updatepanels. Try setting the UpdateMode property of the parent panel to Conditional to prevent the child updatepanel from triggering the parent updatepanel.
Okay, I think I see what's happening. When your page loads you execute this code:
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function() {
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
});
Now, when .net does the postback it is re-creating those .msg_body and .msg_head elements. The best solution would be to get .net to not replace those (unless you need them to).
If you need those to re-draw, you can do 2 things. First, set .msg_body to be hidden in your css, that way they are hidden by default. Then to handle the click issue, replace your click code with this:
$(".msg_head").live("click", function() {
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
This will cause the click handler to still work for newly added .msg_head items.

Categories

Resources