I have an option in my page where in I can add new div on button click.
But when ever I add new div the page scrolls back to top, instead of staying focused on new item.
How can i make page stay focused on newly added div??
You can use .focus().docs are here.hope that helps.
As if that button is created using <a href="#"> tag then whenever you click on it due to href="#" it will automatically go to top of the page.
So you need to give either "ID" of that new appended DIV or "javascript:;".
If you passed ID of the DIV then that DIV focused and if you given "javascript:;" then that page will be there only it will perform the action whatever the action function written on click of it.
OR
If that DIV is loading after some service call then you need to handle it through JS you can use event.stopPropagation() function.
If that button is simple <button> element then add an attribute "type" as <button typr="button"> default type is submit so some times its perform some action if that button is included in some <form>
I am assuming the scenario because that Js Fiddle link is not accesible.
Hope it will helps.
Related
I have 4 forms on my contact page and each of them is showing by clicking on a independant div block.
( For example : "Become Partner" form is showing when user click on the div block with ID "partner-div" )
In order to avoid that the user has to click everytime on the correct div block to see the concerned form, I would like to ensure that the form is displayed when the page loads by clicking on a div block or button on the previous page.
I know i've to do this with document.referrer but i'm not very good with Javascript.
Basically, this is the kind of script i'm looking for :
If user clicks on the button with the ID "blabla" on the previous page, then click on the button with the ID "showform" on the current page"
I hope you've understand my issue 🙏
I have an "article" page where the selected article is displayed by default and another articles are ajax-appended to the bottom after clicking on "next" button.
Every article has its own FB share button.
I can reinitialise all the buttons by FB.XFBML.parse(); command, but the existing buttons disappear for a short moment during reinitialisation.
Is there a way to reinitialise only last appended button or somehow to prevent visual disappearing of the buttons?
(Btw. this issue does not apply to twitter button, which can be reinitialised by twttr.widgets.load(); command)
FB.XFBML.parse() function takes a parameter with selected DOM element. Then it will only reinitialise share buttons that are present in the DOM element:
var buttons = newblog.find('.share-buttons')[0];
FB.XFBML.parse(buttons);
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.
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'));
});
}
I have this simple demo to test bootstrap modal and JSON.
Code
When I click button "show", it loads the JSON and parses it.
And button "Launch demo modal" shows the parsed JSON.
But when I click the button "show" again,
the previous list in the modal is not removed and it appends with the current list
increasing the size of the modal.
I want to refresh the cache everytime I click the "show" button.
Please help.
You have to use .html() instead of .append() . .append() adds other list to your modal body, .html(list) instead, changes all the content of the modal body you're manipulating.
Otherwise you could remove all .ID1 content and then refill it, but it is not such a good way to do.
Instead of .append() use $(".ID1").html(list); this will replace the html of .ID1, while append will add to the current content.
Adding the code
$('.ID1').html('');$('.ID2').html('');
below
$getJSON
Will remove the cache from previous sessions and it works.