I have a ScrollView that contains 2 pages and I have also created a back button that just goes back to the home page.
What I'm trying to do is this:
If the ScrollView is on the 2nd page when the back button is hit, I want to effectively 'reset' this ScrollView so that if the user comes back they will always see the 1st page of the ScrollView first.
I can set the position of the ScrollView fine by setting -webkit-transform: translate3d(0px, 0px, 0px), which shows the content of the first page. The problem I have is with the list items that show which page you're on. Upon clicking the back button, using jQuery I have removed the km-current-page class from the 2nd list item in the km-pages ol and added it to the 1st one. So from this:
<ol class="km-pages">
<li></li>
<li class="km-current-page"></li>
</ol>
to this:
<ol class="km-pages">
<li class="km-current-page"></li>
<li></li>
</ol>
However, when I come back to this ScrollView, something is undoing this and setting the current page back to how it was before hitting the back button i.e. the 2nd page.
Is there something in Kendo UI Mobile that would be undoing my code of switching the class around or is there just a 'reset' setting I can call?
Thanks
Why don't you try using the scrollTo() method of the ScrollView and just scroll to the first page?
http://docs.kendoui.com/api/mobile/scrollview#methods-scrollTo
Related
I am a new front end developer and I am having problem doing my project. I used modal in a modal and it works. My first modal is a long modal which needs to be scrolled to see the entire content.
<a data-toggle="modal" data-target="#modalmessage1"><button class="btn btn-gold tdc-width-100 tdc-mt-10" ><img class="img-button-icon" src="<?php echo base_url();?>img/email-white.png">SEND MESSAGE</button></a>
The problem is: When the second modal is closed. the scroll refers to the body. I can not scroll the first modal to see the whole content.
Question: How can I enable the scroll of the first modal after closing the second modal?
When dealing with bootstrap stacked modal, most common problems are
2nd modal overlay appearing behind first modal
on closing 2nd modal, scrolling disappear because modal-open removed from <body>
both problems can be solved with custom code as suggested by bootstrap
Multiple open modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
$(document).ready(function () {
$('secondmodalselector').on('show.bs.modal', function () {
$('firstmodalselector').css('z-index', 1039); //this will push the first modal overlay behind second modal overlay
});
$('secondmodalselector').on('hidden.bs.modal', function () {
$('firstmodalselector').css('z-index', 1041); //bring back the first modal overlay to it's normal state when 2nd modal closed
$('body').addClass('modal-open'); // add `modal-open` class back to body when 2nd modal close so first modal will be scrollable
});
});
I am trying to use single page mobile site. Basically I have a listview inside container and click event for list class.
<div role="main" class="ui-content">
<ul data-role="listview" data-inset="true">
<li class="listbtn">
</li>
</ul><!-- /listview -->
</div><!-- /content -->
I have a script for firing "listbtn" click event
$(".listbrn").click(function(){
});
this is working fine when page loads for first time
On another event, I am pulling data and replacing the whole "listview" with new items.
After DOM manipulation is successful, I have used
$('.ui-page-active .ui-listview').listview('refresh');
$.mobile.activePage.trigger('create');
as suggested on other threads.
Up to this point everything is smooth, page refreshes with new items and CSS applied nicely as expected.
Only problem is "listbtn" click event is not firing after that.
While looking for answers, I found this thread and tried to use live as suggested but after changing to live page won't load at all. Loading gif images spins forever.
Any suggestion or ideas?
jQuery 2.0
jQM 1.4.2
Thanks
You need to delegate event to dynamically added elements.
Another note, you don't need $.mobile.activePage.trigger('create');, .listview("refresh") is enough to re-enhance list-view. Not to mention that both $.mobile.activePage as well as .trigger('create') are deprecated and will be removed on jQM 1.5.
$(document).on("click", ".listbtn", function () {
/* code */
});
Demo
I'm using Foundation 5 & WordPress.
I am trying to launch a second Reveal Modal from an AJAX loaded Reveal Modal. It's not working for me.
I have two divs at the bottom of my page:
<div id="industryModal" class="reveal-modal" data-reveal></div>
<div id="portfolioModal" class="reveal-modal" data-reveal></div>
I launch the first modal with content from another page (so far so good):
<a id="business-services-link" href="/approach/investment-strategy/industry/business-services" data-reveal-id="industryModal" data-reveal-ajax="true">
First Reveal Modal works correctly. I then try to launch a second modal (from the first AJAX loaded content):
<a href="<?php the_permalink(); ?>" data-reveal-id="portfolioModal" data-reveal-ajax="true">
Now I am simply taken to the new page. The content is not loaded into a second modal. I've tried adding the #portfolioModal div on the original page, and on the page loaded into the first modal. In neither case is the third page loaded into the second modal.
Any idea what I'm doing wrong?
You need to call the second modal using javascript on ajax returned modal page.
Try this:
Add the second modal wrapper somewhere in your document first (you cannot reuse the currently opened modal):
<div id="modal-anotherPage" class="reveal-modal auto_width medium" data-reveal></div>
Then set event handler for links inside your current modal:
$('a.linksinsideyourmodal').click(function(e) {
$('#modal-anotherPage').foundation('reveal', 'open', {
url: $(this).attr('href')
});
return false;
});
Note that this only works with foundation version 5.2.0, the one before it somehow doesn't want to return ajax content on second modal.
Your problem might be that
<?php the_permalink(); ?>
returns an address with "http://".
Reveal wont use that address correctly. Reveal will only use ajax with relative URLs, not absolute ones, and it will only work when referencing files on the same server.
I'm experiencing a problem ONLY in Chrome where an Ajax response is not being displayed. Oddly, when I hover over the page's main menu, the response shows up and also stays when I move the mouse away again from the main menu.
Here is a more specific description:
The page contains a search box that allows the user to start typing a contact name. As the user types, an ajax request is made to return a list of suggested contacts. The user can then click on a radio button corresponding to a contact in that list to display all the contact information of that one person. Up to that point everything works fine. But now if the user goes back to the search box to change his search, the previously returned list of contacts goes away, but the new one from the new search does not show up. It is the click on the radio button that causes the following search not to display any ajax responses. The odd thing now is that the response does show up if the user hovers over the main menu at the top of the page (which uses css), and it also stays if the user moves the mouse away again from the menu and everything works fine afterwards. Here is the page structure:
<div id="fixedTopBar">
<?php
include("include/mainMenu.php");
?>
</div>
<div id="pageContent">
<div id="contactListContainer">
<form>
<input id="contactSearchBox" type="text" autocomplete="off" onkeyup="showHint(this.value, 'contactList', null , 'include/ajax/getContacts.php')">
</form>
<div id="contactList">
<form>
<?php
echoAllContacts(getContactsFromDatabase());
?>
</form>
</div>
</div>
<div id="profile"></div>
The ajax request is made with the showHint() function in the id="contactSearchBox" input, and the response is displayed within the id="contactList" div.
So in short, the click on a radio button causes the problem, and hovering over the top menu solves the problem (very strange no?).
Please let me know what other code you need to track down the problem if you have any ideas, or if anything I said did not make sense.
Thanks in advance!
I was able to solve my problem with some css:
The id="contactListContainer" div was positioned: fixed ...once I positioned it absolute, the problem was gone. Now, to actually position it fixed and not have the problem, I also had to add the position:fixed or position:absolute property to the child div id="contactList".
I've got a simple one but haven't been able to find an example of a solution that fits exactly what I'm asking. Sorry in advance if this is a repeat.
From my navigation menu, I want each link to reference a specific DIV in a separate page and then pull that DIV and replace the content in the current page.
<ul>
<li>About</li>
<li>Contact</li>
..and so on
</ul>
Elsewhere in the page:
<div id="displayContent">Content refreshes onClick. Previous content fades out, fresh content fades in.</div>
Separate page (content.php):
<div id="about">About content</div>
<div id="contact">Contact content</div>
Agree with brhea, a question is a bit unclear.
If I understood well you're looking for something like this?
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
(click car names to see it in action)
OR with jQuery like this:
http://api.jquery.com/load/