I am a little new to this so apologies if I am a little vaugue but I will do my best.
I am attempting to create an iphone friendly version of a site using JQtouch. I understand that normally this would be done all in one HTML file with pages seperated by DIV's. However, I am wanting to load the content from exisitng pages of a website.
The next part to the problem is that my iphone.html page does not sit in the same directory as my current website, so the normal behaviour of JQtouch doesnt seem to work.
So far I have set up a page as follows:
<div id="home">
<div class="toolbar">
<h1>Title</h1></div>
<ul class="rounded">
<li class="arrow"> HOME</li>
<li class="arrow"> ABOUT US</li>
<li class="arrow"> GNWR</li>
<li class="arrow"> GNER</li>
<li class="arrow"> NEWS</li>
<li class="arrow"> FAQS</li>
<li class="arrow"> CONTACT</li>
</ul>
</div>
<div id="content"></div>
<div id="about"></div>
<div id="journal"></div>
<div id="faqs"></div>
<div id="contact"></div>
</body>
</html>
I then have :
<script>
$(document).ready(function(){
$('#content').load('http://www.mysite.co.uk' + ' #content');
$('#about').load('http://www.mysite.co.uk/about' + ' #content');
}
</script>
This loads the content I am after and the page animations work fine. The only problem is that a couple of links exist in the content I am loading and when clicked they obviously dont work.
Is there a way I can check the href of a link when clicked and if it points to www.mysite.co.uk/about change it to point to #about and force it to navigate there?
Hope this makes sense if you need more info let me know.
Regards
Chris.
You are asking quite a few questions inside a single question... You should really break them up into several questions. It's easier for people to answer. Anyways, I'll give it a shot.
First of all, you don't have to have all contents in one html; you can load contents via AJAX. See the AJAX > "GET Example" in this demo, as well as the page content loaded via AJAX.
As far as I know, the pages you want to load do not have to be in the same directory structure. The pages you want to load via AJAX need to contain a valid jQTouch page, i.e. the whole page is enclosed in a <div>.
Is there a way I can check the href of
a link when clicked and if it points
to www.mysite.co.uk/about change it to
point to #about and force it to
navigate there?
If I understand you correctly, you essentially want to replace all the links to www.mysite.co.uk/about with #about. This has to be done with jQuery:
$('a[href="http://www.mysite.co.uk/about"]').attr('href', '#about');
You may want to do that when each page loads:
$(document).ready(function(e){
$('body>div').bind('pageAnimationEnd', function(event, info){
$('a[href="http://www.mysite.co.uk/about"]').attr('href', '#about');
})
});
Related
for some reason this navbar is not rendering correctly on the browser :
<header data-role="header">
<div id="navbar-personalize" data-role="navbar" class="my-navbar">
<div data-align="left">
<img src="../../Images/dashboard6.png" alt="Dashboard"/>
</div>
<span data-role="view-title">Cart Summary</span>
<div data-align="right">
<a href="#merchandise-otherorders-view">
<img src="../../Images/whoelse6.png" alt="Who else is going?"/>
</a>
</div>
</div>
</header>
I have other navbars just like this one all around my index file, and they all work fine, except for this one. It seems that KendoUI isn't initializing it all. By inspecting the code I can see that it's missing all of kendo's styling (like "km-navbar" and such).
It may have to do with the fact that I'm defining this header in each one of the views inside the file, instead of defining it in the app layout, but for some reason defining it inside the app layout doesn't work for me, it simply doesn't render at all.
I'm out of ideas, can somebody help me?
Thanks
I had this problem today. Make sure that kendo.mobile.min.js is included on your page. The docs don't say to put it in, but adding that made it work for me.
I am attempting to rewrite a multi-page website into a SPA using jQuery UI Tabs. In the shell page, one tab references an id within the page, while the rest of the tabs load other pages via AJAX. It looks something like this:
<div id="tabs">
<ul id="nav">
<li>HOME</li>
<li>LEARN</li>
<li>LISTEN</li>
<li>SUPPORT</li>
<!--etc.-->
</ul>
<div id="home">
<!--blah blah blah-->
</div>
</div>
Within learn.html, I have another set of UI tabs that are set up the same way:
<div id="tabs2">
<ul id="nav2">
<li>About Us</li>
<li>Sponsors & Donors</li>
<li>Staff & Board</li>
<!--etc.-->
</ul>
<div id="about">
<!--blah blah blah-->
</div>
</div>
The problem arises in clicking a tab within learn.html: the event of clicking one of the AJAX tabs within this AJAX tab bubbles up to the window, and sponsors.html or whatever loads in place of the shell page.
I have tried event.stopPropagation() but it did not work; using event.preventDefault on the tabs prevented the tab functionality in the first place. What else is there to do?
You could try adding the result of the ajax call to a specific div. In the success function of the ajax call.
Are you calling preventDefault on the click of the tab, or the anchor? You might need to setup a separate handler for the anchor click.
$("ul#nav2 li a").click(function(e) {
e.preventDefault();
});
My problem is gone now...
The page I had loading via AJAX had its own doctype and head tag and the whole shebang. After I removed that, I no longer had any problems.
I would like to have a page with both an image gallery and a slideshow. The slideshow should be started when I click the link, the normal ColorBox should be used when I click one of the images.
What I do now is group all the images with a rel. For the slideshow link I use the following code:
<a rel="slideshow" href="#">Display slideshow</a>
In the configuration for colorbox I define rel as the rel I use for the images. This works almost, the problem I have with this is that I get an extra empty page at the beginning.
How can I start a slideshow of an image gallery, using a text link?
I searched for how to do this for a long time, and finally found the answer on - where else - the F.A.Q for Colorbox. The example is worded a bit differently though so it wasn't as easy to find as you might think. Especially if you're asking question in these terms, like I was.
<div style="display:none;"> <!-- optionally hide this div -->
<a rel="gallery" href="/slideshow/one.jpg">Caption 1</a>
<a rel="gallery" href="/slideshow/two.jpg">Caption 2</a>
<a rel="gallery" href="/slideshow/three.jpg">Caption 3</a>
</div>
<a id="openGallery" href="#">Display slideshow</a>
<script type="text/javascript">
var $gallery = $("a[rel=gallery]").colorbox();
$("a#openGallery").click(function(e){
e.preventDefault();
$gallery.eq(0).click();
});
</script>
http://jacklmoore.com/colorbox/faq/#faq-click
I have this Prototype code at the top of my page
<script type="text/javascript">
if( window.location == 'http://example.com/about-us.html' ) {
$('about-us').addClassName('active');
}
</script>
and this html afer this javascript code
<ul>
<li id="about-us">
<a href="#">
<span>About Us</span>
</a>
</li>
<li id="something-else">
<a href="#">
<span>Something Else</span>
</a>
</li>
</ul>
But even the address is correct http://example.com/about-us.html the class active is not append at all. I have tried alert and alert is working, so the condition is OK, however addclassname seems to not working.
What am I doing wrong? Thanks in advance.
That is how you do it. Be sure the code runs after the element is already on the page. In your case, that means the script block you've quoted has to be after the list you've quoted, like this - live example, because you're not doing anything to delay the code. If you want the script block to be above the list, you can do this:
document.observe("dom:loaded", function() {
// Your code here
});
Live example ...but you're usually better off just putting your scripts at the bottom of the body element, just before the closing </body> tag, as the YUI folks and others recommend.
If the element does exist at the time your code is running, my guess is that you're looking at the result HTML with "view source" or similar. Runtime changes to the DOM (including adding classes to elements) are not reflected in "view source", which is just a copy of the page as it was delivered from the server. You can use the "DOM" view in the developer tools built into most browsers (or Firebug for Firefox) to see the current state of the DOM tree.
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/