I have a page which loads dynamic content inside a modal popup box called TINY box. The content is generated only when the respective links are clicked. I then have a variable called var innerhtml = "<div id ='"+d.name+"'> which generates divs inside the modal box.
where d.name is a variable that dynamically produces a value based on my data. This div is inside the main modal box div which is generated and destroyed whenever the user opens the link and closes the box.
Infact even the box is generated on-the-fly:
var innerhtml2 = "<div id ='box'>
But WHILE the box is open, I want the box to autoscroll to a particular div (based on the ids I've mentioned above).
I tried ScrollTop, ScrollTo and Scrollintoview - but I haven't had any luck because the modal box is created and destroyed on the fly and I've read around that those functions work only once the page is fully loaded. Is it possible to write a program that can automatically scroll a dynamically generated modal box to dynamically generated divs inside it?
So how can I do this? Do you need code snippets?
Thanks in advance!
Kaushik
Assuming I'm understanding you right, you might be able to use the following jquery code within the function that opens the created box and after the div has been added to DOM:
$('html, body').animate({
scrollTop: $("#"+d.name).offset().top
}, 1000);
This will scroll to the top of the element with the id stored in the variable d.name,
The modal box loads with a time delay and so when the DOM element is finally generated, the code to scroll is already executed and hence the program couldn't recognize the DOM element Using Jquery's triggerHandler and a longer time delay for scroll, my issue go resolved! Also, I think these sort of bugs are what are known Heisenbugs -Why would jquery return 0 for an offsetHeight when firebug says it's 34?
Related
I have create an html page containing google map and some text boxes.
I have also created another page in which I have included this page using the include function in php.
<div id="map">
<?php include 'myMap.html'; ?>
</div>
When the page is loaded the map and the other items are correctly loaded and displayed.
Now I have created a button to toggle the visibility of the <div> within which the map has been included. Initially the map is hidden using the hide() function in jQuery.
When I click in the button, the <div> should be visible again. to achieve this, I have called the show() method in jQuery.
But when the button is clicked, everything is shown on the page, but the map is not showing up.
This part of the page in a different html page.
When it is included it is displayed correctly but once hidden and button is clicked for it to show up again, the map becomes like in the picture. I tried a different approach and I have noticed that calling the function that loads the map at the time the button is called can help. Can I call that function found in another html file into the one in which it is included ?
I'm guessing this is caused due to the fact that you're initially hiding the div. Therefore it has no height and when you toggle the visibility of the div it shows a container with a 0px height maps-container.
Try placing your Google Maps code in a function like initMap() or whatever you prefer to call it. After calling $('#your-div').show(); call initMap(). Like so:
$(document).on('click', 'button#your-button', function() {
$('div#your-div').show();
initMap();
});
I think this will solve your issue. If not, you'll have to provide more code to better understand the issue.
Say I have a left-side chat bar with chat users. Each user has their image (much like Facebook's chat)and is clickable to open a chat box to start chatting away.
Here's my code:
$('.msg_wrap').hide();
$('.msg_box').hide();
$('.chat_user').click(function() {
$('.msg_wrap').show();
$('.msg_box').show();
}
I know this is wrong but what I want to do here is when the page loads for the first time, all the chatboxes to be hidden (hide ()). It is not until I click on a chat user (.chat_user) that a pop up/chat box appears (show()). How do I fix this code? Do I have to create a function?
A quick thought on a solution.
First. Set the elements ('.msg_wrap') and ('.msg_box') to hidden in your html and kill your first two lines of code. I am not sure what those elements specifically are, but, for example, if they were div tags it would look something like:
<div hidden class="msg_wrap">
Second. I am not sure if you are saying that the code currently isn't working on page load. It looks like you are missing a ) at the end and also you can update to the following so that it gets executed on page load.
$(function(){
$('.chat_user').click(function() {
$('.msg_wrap').show();
$('.msg_box').show();
});
});
This is jquery shorthand for $( document ).ready().
Also, if you want the msg_wrap and msg_box elements to toggle between being hidden and shown you can use the toggle() method instead of show().
I am rendering div element with textbox's and buttons on top of google.maps using infobox concept.Just like in the following way.
Previous I mention,Even if user any values enters on textboxs their corresponding functions are not triggering.Sorry actually it's working fine,I didn't check properly.For reference I put screenshot.
But I observed one thing,If the user click on a elements,their corresponding functions are not triggering.I put screenshot for reference.
html code:
Photo
Remove
view code:
freshtimeMapId refers entire div element,where map renders.Why I mention freshtimeMapId as a el element, all custom elements are renders in between freshtimeMapId(div) element.But events are not triggering .
How can I fix this issue.
Thanks.
I am using the jQuery Tabs library in a small application. The page has 5 tabs and the content for each page is loaded using Ajax. The problem is, once I load a tab, it remains in the browsers memory (and so do its HTML elements). So if I use lets say a DIV element with the same ID as a previously loaded tab, all JS function related to that ID try to interact with the old tab.
IN other words, lets say I have a page with 2 tabs, "Traffic Data1", "Traffic Data2". Now first, I click on the Traffic Data1 tab which makes the ajax call and loads the page just fine. This page, has 2 date input fields, id for the first field is "dateFrom" and the other field is "dateTo". Next to that is a "Go" button. Upon clicking the button, a JS function shows an alert box with the values in each of the input fields.
Now, I click on the "Traffic Data2" tab. The contents of the page are very different, but it has the identical input fields, 2 for dates (with same IDs) and Go Button. When I press the Go button on this page, I see the alert box with values form the previous tab.
So my question is, Is there a way to unload the previous tab? Or is the only alternative to use elements with unique divs (even though the pages are complete separate).
Thanks
You cannot have multiple element with the same ID. When you find an element by ID the first one found is always returned because it is expected that IDs will be unique.
Leave the name attributes for the input elements the same but change their IDs to be unique.
You can select an element by its name attribute like this: $('[name="foobar"]')
Update
In the docs for jQuery UI Tabs there is an option called cache that when set to false should remove the old tabs from the DOM after you navigate away from them:
Whether or not to cache remote tabs content, e.g. load only once or
with every click. Cached content is being lazy loaded, e.g once and
only once for the first click. Note that to prevent the actual Ajax
requests from being cached by the browser you need to provide an extra
cache: false flag to ajaxOptions.
Source: http://jqueryui.com/demos/tabs/
You are looking for jQuery Live.
Description: Attach an event handler for all elements which match the current selector, now and in the future.
If you use it jQuery will magically auto-update to match your new elements as they appear/disapear.
// code sample
$("a.offsite").live("click", function(){ alert("Goodbye!"); });
Since the tabs click event reloads your form and assuming you're using divs to contain the ajax-loaded content, add .click(function () { $(this).children('div').children.remove(); }) to your tabs() declaration.
That should remove the div content and any event handlers that are bound to it.
If you can pass a context to the jquery functions, you could make your calls relative to currently selected tab...
$("#someDuplicatedId", activeTab).doStuff();
Or if caching the content is not important, go with Jasper's answer.
I read from the documentation that we can handle the back button click using the following code:
document.addEventListener("backbutton", backKeyDown, true);
function backKeyDown() {
// Call my back key code here.
alert('go back!');
}
My concern is that I have a single HTML5 web page in which I have multiple div tags which I animate using jQuery as per the navigation option selected by the user from the menu options.
How can I, in this single page webapp, handle the back button click using PhoneGap and show the user the previously animated div. Clicking on the back button again would again take him to the previous div of the current previous div :-)
Thanks.
I solved the problem by creating a global array variable as
var myStack = new Array();
Then whenever I clicked on the div tag, I inserted the function prototype along with the arguments inside the myStack variable. For eg:
myStack.push(\"myfunction(args1, args2);\");
Then, using the code which I posted in my question, inside the BackButton handler, I wrote the following code:
var divToShow = myStack.pop();
eval(divToShow);
Hope this helps others.
I did an implementation in a similarly structured phonegap app. My situation was a bit more complex because I was loading in html as well as external data via ajax (rather than just unhiding divs). I created a global array called history which I used to keep track of current position as well as previous positions (position here being the most recent ajax function called, so the array was actually storing function names as text). The right sequence and combination of .pop and .push array methods got me a fully functioning js back button that scaled nicely and handled any kind of back and forth navigation I could think of.
I will just post my overall idea of handling this situation. Hope you can improvise and change it to suit your needs.
Have a global variable to remember the current div id that is
visible. For example, when a menu item x is clicked, set this global
variable to the div id that is currently visible (before showing the next div corresponding to menu item x).
When the back button is pressed, use the global variable's value to identify the previous div. Hide the current div and show the previous one.