jQuery mobile Tabs and Anchors - javascript

I would like create a tabbed mobile page using jQuery Mobile. I have got the basics of creating tabs (For Example Tab1, Tab2, Tab3, Tab4) and having each tab load a new page of content. How would I go about using an anchor within a specific tab? So for example if someone wanted to bookmark a link that took them right to Tab4 Anchor1.
I am pretty new to JavaScript and jQuery.
Code below:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css">
<!-- JavaScript HTML requirements -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="d" id="home" data-id="nav">
<header data-role="header" >
<h1>TEST</h1>
<div data-role="navbar" data-id="nav">
<ul>
<li><a href="#home" data-icon="home" data-theme="d" class="ui-btn-active ui-state-persist" >Home</a></li>
<li>Speakers</li>
<li>News</li>
</ul>
</div>
</header>
<section data-role="content"> Home </section>
<footer data-role="footer" class="ui-bar"> Buy Tickets </footer>
</div>
<div data-role="page" data-theme="d" id="speakers">
<header data-role="header" data-id="nav" >
<h1>TEST</h1>
<div data-role="navbar" >
<ul>
<li>Home</li>
<li><a href="#speakers" data-icon="star" data-theme="d"
class="ui-btn-active ui-state-persist">Speakers</a></li>
<li>News</li>
</ul>
</div>
</header>
<section data-role="content">The name attribute specifies the name of an anchor.
The name attribute is used to create a bookmark inside an HTML document.
Note: The upcoming HTML5 standard suggests using the id attribute instead of the name attribute for specifying the name of an anchor. Using the id attribute actually works also for HTML4 in all modern browsers.
Bookmarks are not displayed in any special way. They are invisible to the reader. <a name="jib"></a> Speakers </section>
<footer data-role="footer" class="ui-bar"> Buy Tickets </footer>
</div>
</body>
</html>

I think I understand but feel free to comment if I'm misunderstanding your question.
I believe you're misunderstanding how internal JQuery linking works. First thing is take a look at the JQuery Mobile page anatomy, especially at the "Multi-page template structure" in your case:
http://jquerymobile.com/test/docs/pages/page-anatomy.html
Basically every "embedded in the middle of page" section of your page will need to be a stand alone div marked with the data-role="page" tag. Its ID is going to be what you'll point an anchor to.
So in order for your internal <a href="#jib"> to work you have to have a built in div with ID = "jib"
UPDATED ANSWER AFTER COMMENTS
What you're looking for is $.mobile.silentScroll . You want to get your anchor link's Y-position and then have the page scroll to it. There is a little gotcha though. You'll need to add a little pause before the scroll happens because of the JQuery Mobile animations that happen on page transition.
function loadJib()
{
$.mobile.changePage('#jib',{transition:"slide"});
var yPos = $('#mylink').get(0).offsetTop;
setTimeout(function(){
$.mobile.silentScroll(yPos);
},800);
Take a look how I did it ( .8 second delay ).:
http://jsbin.com/ahevav/3/edit

Related

JQuery Razor MVC Not Working

I'm having an issue where the JQuery isn't firing on a button click. I've been looking through the Chrome debugger but nothing is coming up. No errors and when the button is clicked nothing happens.
I am using a fresh build of MVC with the initial references for Web API and MVC. The plugin I wish to get working is the Menu Slider here
I have tried to strip out as much as possible, the sidr.js and the sidr.css are the same as taken from the above link.
Can anyone see what I'm doing wrong? I've reordered the scripts to get the jquery-1.9.1.min to load first but still no dice.
Update
I have just rebuilt the below code on another computer, same IIS, Visual Studio etc and it works (with the button) what could be making JQuery not run (I've gone through the references and they match up) as I'm out of ideas.
Layout
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/jquery-1.9.1.min.js")"></script>
<script src="#Url.Content("~/Scripts/modernizr-2.6.2.js")"></script>
<link href="#Url.Content("~/Content/jquery.sidr.dark.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery.sidr.js")"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#slide').sidr();
});
</script>
</head>
<body>
<div id="sidr">
<ul>
<li>#Html.ActionLink("Home", "Index", "Home")</li>
</ul>
</div>
<button id="slide">Reveal Menu</button>
<div>
#RenderBody()
#RenderSection("scripts", required:false)
</div>
</body>
</html>
I believe that this plugin needs to be instantiated on markup with a list inside. Something like this:
<a id="demo" href="#slide">Reveal Menu</a>
<div id="slide">
<ul>
<li>Menu Item</li>
</ul>
</div>
If you want JQuery to do something on click try this.
https://api.jquery.com/click/
$( "#target" ).click(function() {
alert( "Handler for .click() called." );
});
Here is a fiddler where Jquery pops an alert on button click.
https://jsfiddle.net/wncdr034/
Maybe you can trigger the slide from within the event function?
As per their documentation they have the below code:
<a id="demo" href="#sidr">Toogle menu</a>
<div id="sidr">
<ul>
<li>Side <a href="http://www.jqueryscript.net/menu/">Menu 1</a></li>
<li class="active">Side Menu 2</li>
<li>Side Menu 3</li>
</ul>
</div>
They have mentioned href to the anchor which is the id of sliding div but here you have button and have initialized .sidr() on that which will not have href attribute! I suspect the plugin may work on the href attribute of the anchor. So my suggestion is why don't you just replace your button with anchor and provide href value with the div id as below:
<div id="sidr">
<ul>
<li>#Html.ActionLink("Home", "Index", "Home")</li>
</ul>
</div>
<a id="slide" href="#sidr">Reveal Menu</button>

jQuery Load Divs Broken

I am trying to create an HTML order type page with 3 buttons using jQuery Mobile:
Pick Up
Drop Off
Ship It
I've created the buttons and placed them properly on the page. Now, I'd like to display a unique form based on which button is clicked by the user.
Taking a look at examples it appears my options are jQuery, AJAX or Javascript. I'm already using jQuery so I tried going that route with no luck. Having added in the load HTML and JS Alert... my page will completely ignore the loading of HTML, but still display the alert. I've verified that my divs are properly named and that each link has a proper id set. So I gave up on jQuery for a bit.
On to javascript... add my logic in the between tags and again... it ignores loading of HTML content. I've tried putting things in divs, renaming divs, moving my form code to a seperate .html and .txt, but still no luck. I found a working example here and tried forcing its code into my page. Again, it does not load anything on button click when included in my page. (I'm using Chrome Version 35.0.1916.153)
Currently, the code for my page is as follows:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Order Type</title>
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('result'+idInfo).style.display = 'block';
}
</script>
<link rel="stylesheet" href="assets/css/pp_mis_oa.css" />
<!-- Standard jQquery Mobile themes can be created and replaced, to apply universal styling -->
<!-- Go to: http://jquerymobile.com/themeroller/index.php to build one, and download it to the themes directory. -->
<link rel="stylesheet" href="themes/jqm-test/theme.min.css" />
<!-- Do not edit or remove the following jQuery framework files. -->
<link rel="stylesheet" href="lib/jquery.mobile.structure-1.3.1.min.css" />
<script src="lib/jquery-1.9.1.min.js"></script>
<script src="lib/jquery.mobile-1.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Start Main Landing Page -->
<div data-role="page" data-theme="b" class="has_footer">
<div data-role="content">
<p>
<div id="buttonDiv" data-role="navbar">
<ul>
<li>Pick Up</li>
<li>Drop Off</li>
<li>Ship It</li>
</ul>
</div><!-- /navbar -->
<div id="result" style="clear:both;"></div>
</div> <!-- End Content Div -->
<!-- start footer -->
<div data-role="footer" data-position="fixed" data-id="footer-nav" data-theme="d" class="footer-bar">
<div class="ui-grid-solo">
<div class="ui-block-a"><button type="v" data-theme="b">Continue</button></div>
</div>
</div><!-- end footer -->
</div>
<!-- End Main Landing Page -->
<div id="divLinks">
<div id="container1">Container #1<p>Whole bunch of text 1</div>
<div id="container2">Container #2<p>Whole bunch of text 2</div>
<div id="container3">Container #3<p>Whole bunch of text 3</div>
</div>
</body>
What is going on here that jQuery/Javascript refuse to load in my content to my divs? Can someone help point me in the right direction?
Thank you!
If you wanted to do this with jQuery, you could change your showDiv function to the following:
function showDiv(idInfo) {
//hide all divs
$('#divLinks div').each(function() { $(this).hide(); });
//show the one selected
$('#container'+idInfo).show();
}
To move content from your "container" divs to your "result" div:
function showDiv(idInfo) {
//populate "result" div with selected content
$('#result').html($('#container'+idInfo).html());
}
I think you're trying to show divs with ids "result"+IdInfo where your div ids are container1, container2 and container3, so you should replace:
document.getElementById('result'+idInfo).style.display = 'block';
for
document.getElementById('container'+idInfo).style.display = 'block';
Also keep in mind that loading all the forms in the html (even if they are hidden) is not a good practice, so someone could see what he doesn't have to (and also can submit it). Consider to use some dynamic language (such PHP) to load only the form needed as the user type.

Why won't javascript replace innerHTML on screen resolution check?

I'm trying to make my website check the screen resolution and replace installed font icons (using #webfont) with plain text links, so that the site is more mobile friendly. Im using Opera Mobile Emulator to check if it works. the user interface I am using clearly comes back with a res of 480x320 (in the very top left of the page), yet the .innerHTML javascript isn't firing off. Any help?
<!DOCTYPE html>
<html>
<head>
<title>Harry's Bar</title>
<meta name="keywords" content="Harry's, bar, st. petersburg, florida, kenneth city, drink specials" />
<meta name="description" content="Harry's Bar in St. Petersburg, Florida. Drink specials every night!" />
<meta name="author" content="Internet Solutions of Florida" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<script type="text/javascript">
var width=screen.width;
var height=screen.height;
document.write(width+'x'+height);
if (width<700)
{document.getElementById("homelink").innerHTML="Home";}
</script>
<div class="frame">
<div class="header">
<img class="logo" src="img/logo.png" alt="Harry's Bar" />
<div class="menu">
<ul>
<li><a id="homelink" href="index.html" title="home">&#xf015</a></li>
<li><a id="drinklink" href="drinks.html" title="drink menu">&#xf0fc</a></li>
<li><a id="piclink" href="images.html" title="picture gallery">&#xf030</a></li>
<li><a id="directionslink" href="directions.html" title="directions">&#xf0d1</a></li>
<li><a id="contactlink" href="contact.html" title="contact us">&#xf075</a></li>
</ul>
</div>
</div>
That javascript is executing before the HTML is being loaded. So there is no element with the id of "homelink" when the javascript fires.
Additionally, by using document.write, you're effectively overwriting your original HTML, so the tag will never load anyway.
Get rid of the document.write call and place the script just before your closing body tag and it should work as intended.
document.write() is not needed. If you want to diagnose you may use document.title or create a div and divid.innerHTML
Make sure your testing on a <700 area
Add a DOM ready fire.
Place this at the end of the
Things should work then :)

How can I make document.write and ajax play nice?

My programming skills are rudimentary at best, so please forgive me if I sound a little clunky discussing these things. I'm learning, but at a chimp's pace.
Here's my issue: I'm using JQuery Mobile to bring in some form content as a dialog via ajax. This content is contained in the document itself, in second div with a data-role="page" attribute.
Within that second page div, I have some javascript that defines a few vars, then writes them into the doc with document.write().
However, when I click the link (the far right link in the nav), instead of popping up a nice dialog, Firefox instead briefly loads a new page with the fist var (not dynamically but as a static page), then redirects back to the starting page, leaving a "wyciwyg(00000)..." in my browser history. Upon said redirect, "WYCIWYG" is displayed in the browser's title bar. Other browsers choke in slightly different ways (Safari doesn't redirect, Chrome displays all the vars and doesn't redirect, etc.), but the WYCIWYG-in-the-history factor is in play in all three. If I remove the document.write commands, the link behaves as expected.
I've scoured the web for hours and not found an answer... similar problems show up in 10 year old Mozilla bug reports, but not much else. The only resolution I've found is not to use document.write() in content loaded via ajax. Unfortunately, I have no clue what the alternative would be, or how I would even begin to execute it. The Javascript code originated at Google - front-end code for a transit trip planner.
Below is some stripped-down code that illustrates the issue. Any guidance would be greatly appreciated, bearing in mind the whole chimp's-pace thing. Thanks in advance.
<!DOCTYPE HTML>
<html>
<head>
<title>WYCIWYG</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile.structure-1.2.1.min.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css">
<script type='text/javascript' src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script>
var startExample = "USC";
var endExample = "201 N Los Angeles St.";
var zip = "90012";
</script>
</head>
<body>
<div data-role="page">
<div data-role="navbar">
<ul data-mini="true">
<li>Service 1</li>
<li>Service 2</li>
<li>PLAN TRIP</li>
</ul>
</div>
</div>
<div data-role="page" id="planTrip">
Some document.write js:
<script>
document.write(startExample);
document.write(endExample);
document.write(zip);
</script>
</div>
</body>
You could simply use jQuery.html() on placeholder elements:
Source: http://jsfiddle.net/fiddlegrimbo/suD6s/6/
Demo: http://fiddle.jshell.net/fiddlegrimbo/suD6s/6/show/light/
<div data-role="page" id="planTrip">
Some document.write js:
<p id="start"></p>
<p id="end"></p>
<p id="zip"></p>
<script>
$("#planTrip #start").html(startExample);
$("#planTrip #end").html(endExample);
$("#planTrip #zip").html(zip);
</script>
</div>

Unable to get Jquery Smooth scrolling to work

I have been pulling my hair out trying to get functional smooth scrolling to ids on the same page. I have tried just about every solution I have found on google. I get to a point where when it seems everything should work but then even the basic non-js id linking breaks. I am currently using the smooth-scrolling plugin downloaded from the jquery website. The code as it currently stands is such. I don't know a ton about JS or Jquery so I assume I am just missing something. I inspecting the code on functional versions of the smooth scrolling but even when
I do the in-page linking breaks entirely:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simon Moon Landings</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Noticia+Text:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.smooth-scroll.js"></script>
<script>
$(document).ready(function() {
$('ul.mainnav a').smoothScroll();
});
</script>
</head>
<body>
<div class="container">
<div class="menu">
<nav>
<ul class="mainnav">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</nav>
<img class="logo" src="images/smlogo.gif" width="450" height="288" alt="Simon Moon Landings Logo" onmouseover="on();" onmouseout="off();"></nav>
</div>
<div class="content">
<div class="section" id="one">
<h4>One</h4>
</div>
<div class="section" id="two">
<h4>Two</h4>
</div>
<div class="section" id="three">
<h4>Three</h4>
</div>
<div class="section" id="four">
<h4>Four</h4>
</div>
<div class="section">
<a id="five"><h4>Five</h4></a>
</div>
<div class="section">
<a id="six"><h4>six</h4></a>
</div>
</div>
</div>
</body>
</html>
I found the problem. It was not in the script at all, but in the CSS. I have a two column layout, the menu and anchors are in one column (.menu) and the target divs are in another column (.content) I applied poisiton:fixed to the menu and it started working.
It works fine here.
Make sure that the URL of jquery-smooth-scroll is correct.
I used this copy of jquery-smooth-scroll to test your code: https://github.com/kswedberg/jquery-smooth-scroll
It works for me. See this example: http://jsbin.com/ixefet/1/edit
All I did was change the src for the smooth scroll JavaScript to the online version (https://raw.github.com/kswedberg/jquery-smooth-scroll/master/jquery.smooth-scroll.min.js) and add some text so you can see the scrolling happen.
Sounds like you're using the wrong src for your smooth scroll script (if that's the case, your JavaScript error log should say undefined function: $.smoothScroll or something like that).
It worked for me while testing on jsfiddle,
here you go
http://jsfiddle.net/mastermindw/XvV9W/1/

Categories