Hello I'm new to Javascript, i'm trying to get to run jQuery library but Chrome notifies this error to me.
I did search a few posts about this in Stack Overflow and on Google but even so to me at least i couldn't find a satisfactory answer (i checked to have put jQuery script as first). Here is my HTML source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Design</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">
<!--<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/slick.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<a href="" class="logo">
<img src="" alt="">
</a>
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Services</li>
<li>Clients</li>
<li>Our Team</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<section class="slider">
<ul class="slider-carousel" id="#slider-carousel">
<li class="img1">
<h2>BEAUTIFIED BUSINESS <span>TEMPLATE</span></h2>
<p>We believe in creativity always</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio modi ducimus aut nihil explicabo, quia voluptatibus. Sint consequatur culpa vel sapiente, et dicta ratione facere distinctio, maiores modi eligendi. Perspiciatis.</p>
Get Started
Buy Now
</li>
<li>
<h2>Slider</h2>
</li>
<li>
<h2>Slider</h2>
</li>
</ul>
</section>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
This is my directory structure:
**Project
|
+-- index.html
|
+-- js
| |
| -- bootstrap.min.js
| -- jquery-3.4.1.min.js
| -- main.js
| -- slick.min.js
|
+-- css
| |
| -- all.css
| -- bootstrap.min.css
| -- slick.css
| -- slick-theme.css
| -- style.css
|
+-- images
| |
-- slider1.jpg
This is the single line of code i run:
$(Document).ready(function(){})
ERRORS I GET IN BRACKETS:
ESLint (2)
ERROR:
'$' is not defined. [no-undef] $(Document).ready(function(){})
ERROR: 'Document' is not defined. [no-undef] $(Document).ready(function(){})
JSLint (7)
'$' was used before it was defined. $(Document).ready(function(){})
'Document' was used before it was defined. $(Document).ready(function(){})
Expected exactly one space between 'function' and '('. $(Document).ready(function(){})
Expected exactly one space between ')' and '{'. $(Document).ready(function(){})
Missing space between ')' and '{'. $(Document).ready(function(){})
Missing 'use strict' statement. $(Document).ready(function(){})
Expected ';' and instead saw '(end)'. $(Document).ready(function(){})
(I tried to load both, the local jQuery script and the other, but none of them seemed to work though)
{Thank you for your attention}
You must have a .eslintrc.json file.
Make sure you have the following lines of code in it:
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"jquery": true
},
"plugins": [
"dollar-sign",
"jquery"
],
"rules": {
"dollar-sign/dollar-sign": [
2,
"ignoreProperties"
]
}
You can read more here: https://eslint.org/docs/user-guide/configuring#configuration-file-formats
Related
I am learning react js and trying to create a website with react js from a Html template. The template is using Jquery Isotope image filter plugin and my react code using react-router-dom for navigating page. when starting the app, in the home page the filter is working properly but when navigating to another page using the menu bar, the isotope filter does not work. It again works when i hard reload the page again. I have tried some way but that didn't work. So what is the way to use Jquery Plugin in a react js app ??
My Code is below:
Index.html page. Here i am declaring the Scripts:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet">
<link rel="stylesheet" href="css/app.css">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<title>Laravel</title>
</head>
<body class="antialiased">
<div id="root"></div>
<script src="js/app.js"></script>
<!-- Vendor JS Files -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="assets/vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/vendor/counterup/counterup.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/venobox/venobox.min.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>
Home.js component. Here i am using the isotope filter plugin:
import React from 'react';'
export default function Home() {
return (
<>
{/* <!-- ======= Portfolio Section ======= --> */}
<section id="portfolio" className="portfolio" style={{ marginTop: "50px" }}>
<div className="container" data-aos="fade-up">
<div className="section-title">
<h2>View Our Image Store</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea.</p>
</div>
<div className="row" data-aos="fade-up" data-aos-delay="100">
<div className="col-lg-12 d-flex justify-content-center">
<ul id="portfolio-flters">
<li data-filter="*" className="filter-active">All</li>
<li data-filter=".filter-app">App</li>
<li data-filter=".filter-card">Card</li>
<li data-filter=".filter-web">Web</li>
</ul>
</div>
</div>
<div className="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
<div className="col-lg-4 col-md-6 portfolio-item filter-app">
<div className="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-1.jpg" className="img-fluid" alt="portfolio-1" />
<div className="portfolio-info">
<h4>App 1</h4>
<p>App</p>
<div className="portfolio-links">
<i className="bx bx-plus"></i>
<i className="bx bx-link"></i>
</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6 portfolio-item filter-web">
<div className="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-2.jpg" className="img-fluid" alt="portfolio-2" />
<div className="portfolio-info">
<h4>Web 3</h4>
<p>Web</p>
<div className="portfolio-links">
<i className="bx bx-plus"></i>
<i className="bx bx-link"></i>
</div>
</div>
</div>
</div>
</div>
</section>
And the isotope plugin is initialized in main.js script file that is integrated in the index.html page above.
So when i start the app, this page Home component works fine but when i go to another menu and come again to this menu then the filter doesn't work. What is the way to do this correctly?
Also i created below hooks to load the scripts in this Home component but doesn't work.
Hooks code:
import React, { useEffect } from 'react'
export default function loadScript(url) {
useEffect(() => {
const script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, [url]);
}
and called it from Home component like below:
import loadScript from '../hooks/loadScript'
export default function Home() {
loadScript("assets/vendor/jquery/jquery.min.js");
loadScript("assets/vendor/bootstrap/js/bootstrap.bundle.min.js");
loadScript("assets/vendor/jquery.easing/jquery.easing.min.js");
loadScript("assets/vendor/php-email-form/validate.js");
loadScript("assets/vendor/owl.carousel/owl.carousel.min.js");
loadScript("assets/vendor/waypoints/jquery.waypoints.min.js");
loadScript("assets/vendor/counterup/counterup.min.js");
loadScript("assets/vendor/isotope-layout/isotope.pkgd.min.js");
loadScript("assets/vendor/venobox/venobox.min.js");
loadScript("assets/vendor/aos/aos.js");
loadScript("assets/js/main.js");
But is doesn't work. What is the right way to do this?
You may be having trouble loading jquery in. I would install it as an npm package:
npm i jquery
And then load jquery into your app like so:
import $ from 'jquery'
However, I'm not sure if it's failing for a different reason. You can load jquery as an npm package which might take some pain out of things, but I doubt that the jquery plugin you want to use exists as an npm package. I should mention that it is a little bit of an anti-pattern to use jquery within a React app. Not that you can't or shouldn't, but the challenge comes in trying to build a data model that is tracked within React's state management. When relying heavily on other libraries like jquery it can start to become a lot of work to stitch the two together.
That said, sometimes it still can be worth it to make use of a jquery plugin if it accomplishes something which cannot easily be done in a React plugin. You'll have to make the decision as to which is best in your case.
I have an issue when i get the data with vue js, it returns a HTML not json. I conse the route params it show an id of the post. This is my code in vue:
axios.get("api/posts/" + this.$route.params.id).then(response => {
console.log(this.$route.params.id);
console.log(response.data);
});
And this is the response data :
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="http://127.0.0.1:8000/css/app.css">
<script src="http://127.0.0.1:8000/js/app.js" defer></script>
</head>
<body>
<div id="app">
<index></index>
</div>
</body>
</html>
But in the postman, i access the url "api/posts/1" it show json data
{"id": 1,"title": "Schambergerstad Fancy Rooms",
"description": "Qui minima tempora ea modi maiores. Quaerat non aut porro vel occaecati. Deleniti quaerat quod veniam. Dolor ducimus facilis molestiae omnis fuga occaecati.",
"created_at": "2020-06-04T11:28:25.000000Z","updated_at": "2020-06-04T11:28:25.000000Z"
}
But i see in network tab, the request url is "http://127.0.0.1:8000/posts/api/posts/1". Why become to that url? I call it in axios is "api/posts/1"
How to fix it?
try adding headers Content-Type json
axios.get("/api/posts/" + this.$route.params.id, {
headers: {
'Content-Type': 'application/json'
}
}).then(response => {
console.log(this.$route.params.id);
console.log(response.data);
});
Okay sorry it's just typo axios.get("api/posts/" + this.$route.params.id) it's should add "/" before "api/posts/"
axios.get("/api/posts/" + this.$route.params.id)
In my Sidebar I included a collapse button to show/hide a form. Now I want to maintain the collapse-state when refreshing the page:
If the form was un-collapsed before refreshing the page, it must stay like this after the refresh.
I think I need to use the localStrorage in JavaScript, but I actually don't know how to use this.
This is my HTML:
<!-- Sidebar -->
<ul class="sidebar navbar-nav">
<li class="nav-item active">
<a class="nav-link" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
<i class="fa fa-filter"></i>
<span>Search Filter</span>
</a>
</li>
</ul>
<!-- Form -->
<div class="collapse" id="collapseExample">
<form>
......
</form>
I found some code only but it seems like it does not work for me..:
var shown = []
// On collapse
shown.remove($(this).attr('id'));
localStorage.setItem('shown', shown);
// On open
shown.push($(this).attr('id'));
localStorage.setItem('shown', shown);
// On page load
var shown = localStorage.getItem('shown');
for (var s in shown) {
$('#collapseExample' + s).show();
}
Thanks for your help!
Here's a Bootstrap 4 collapse example that works. The main difference from the starter template is that I moved the jQuery import to the top of the file so that I could use the document.load function. I've added comments to the code but if anything's still not clear, keep asking questions. Note that I left the vanilla javascript answer for historical comments and in case it helps you, too.
I used the starter page from here:
https://getbootstrap.com/docs/4.0/getting-started/introduction/
And the first collapse example from here:
https://getbootstrap.com/docs/4.0/components/collapse/
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
<!-- jQuery -->
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script>
$(function() {
// store a reference to the collapse div so that
// we don't have to keep looking it up in the dom
const collapseExample = $("#collapseExample");
// register a callback function to the collapse div that
// will be called every time the collapse is opened.
collapseExample.on("shown.bs.collapse", function() {
// since we know that that this function is called on
// open, we'll set the localStorage value to "show"
localStorage.setItem("collapseExample", "show");
});
// register a callback function to the collapse div that
// will be called every time the collapse is closed.
collapseExample.on("hidden.bs.collapse", function() {
// since we know that that this function is called on
// open, we'll set the localStorage value to "hide"
localStorage.setItem("collapseExample", "hide");
});
// Since this function runs on page load (meaning only once), we can
// check the value of localStorage from here and then call the
// bootstrap collapse methods ourselves:
// Check the value of the localStorage item
const showExampleCollapse = localStorage.getItem("collapseExample");
// Manipulate the collapse based on the value of the localStorage item.
// Note that the value is determined by lines 36 or 44. If you change those,
// then make sure to check that the comparison on the next line is still valid.
if (showExampleCollapse === "show") {
collapseExample.collapse("show");
} else {
collapseExample.collapse("hide");
}
});
</script>
</head>
<body>
<main>
<p>
<a
class="btn btn-primary"
data-toggle="collapse"
href="#collapseExample"
role="button"
aria-expanded="false"
aria-controls="collapseExample"
>
Link with href
</a>
<button
class="btn btn-primary"
type="button"
data-toggle="collapse"
data-target="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample"
>
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</main>
<!-- Optional JavaScript -->
<!-- Popper.js, then Bootstrap JS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>
END BOOTSTRAP ANSWER
BEGIN VANILLA JAVASCRIPT ANSWER
Here's a basic, self-contained version of what you seem to be trying to do. It's not pretty, but hopefully, it's clear.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function getCollapsed() {
const state = localStorage.getItem('collapsed');
if(state === 'collapsed'){
return true;
}
return false;
}
function getStatus(){
const resultDiv = document.getElementById('result');
const isCollapsed = getCollapsed();
if(isCollapsed){
resultDiv.innerHTML = "collapsed";
}else{
resultDiv.innerHTML = "un-collapsed";
}
}
function toggleCollapse(){
const isCollapsed = getCollapsed();
if(isCollapsed){
localStorage.setItem('collapsed', 'un-collapsed');
}else{
localStorage.setItem('collapsed', 'collapsed');
}
getStatus();
}
</script>
</head>
<body onload="getStatus()">
<div>
<button onclick="toggleCollapse()">Toggle Collapse</button>
</div>
<div id="result"></div>
</body>
</html>
The link for the plugin:
http://www.myjqueryplugins.com/jquery-plugin/jscrollbar
As they said i just downloaded the files uploaded them to my website.
Then i embeded html and added this code:
<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="http://newsxpressmedia.com/files/theme/jScrollbar.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="http://newsxpressmedia.com/files/theme/jquery.js"></script>
<script type="text/javascript" src="http://newsxpressmedia.com/files/theme/jquery-ui.js"></script>
<script type="text/javascript" src="http://newsxpressmedia.com/files/theme/jquery-mousewheel.js"></script>
<script type="text/javascript" src="http://newsxpressmedia.com/files/theme/jScrollbar.jquery.js"></script>
<!-- Main container -->
<div class="jScrollbar">
<!-- Scrolling content container -->
<div class="jScrollbar_mask">
<p>
<!-- Your long content here -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi...dfdfdsfdfddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</p>
</div>
<!-- slider container -->
<div class="jScrollbar_draggable">
<!-- slider -->
</div>
<!-- don't forget to clear the floats -->
<div class="clr"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
// simple jScrollbar plugin call
$('.jScrollbar').jScrollbar();
// more complex jScrollbar plugin call
$('.jScrollbar').jScrollbar({
scrollStep : 25,
position : 'left',
showOnHover : true
});
});
</script>
But all i see is the text:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi...dfdfdsfdfddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
I didn't see any scrollbar/s
The links to the files are ok like i'm using with other jquery plugin that work.
Intended layout:
------------------------
| (back) (title) |
------------------------
| (tab1) (tab2) (tab3) |
------------------------
| |
| |
| |
| |
| |
| |
| |
| |
| |
------------------------
The intent here is to have a dojox.mobile.Heading right at the top, a dojox.mobile.TabBar beneath it, and the rest of the screen taken up by the content, as depicted above.
When the user navigates between the various screens within the app, the Heading must change (title and back button), but the TabBar does NOT change. On some screens however, the TabBar is hidden.
Now I am trying to figure out how to do this w.r.t. to dojox.mobile.Views. I see two potential ways of achieving this:
Have both the Heading and the TabBar in a root View, which contains several sub Views which the TabBar navigates between. Rewrite the contents of the Heading, triggered by navigation events on the TabBar.
Have several Views which contain a Heading, and an empty div. Rewrite the empty div's contents with the contents of a div somewhere else in the page, not contained within any View, which contains a Heading.
Which of the above methods is the preferred/ standard way of accomplishing this in DOJO mobile?
Are there yet more ways in which this can be accomplished?
Thanks!
You can also just put the heading and the tab bar at the toplevel (i.e. as direct children of your body), both with a fixed="top" attribute. They will be stacked one below the other. Then just put your different views after that (still as children of the body).
Below is a sample that shows this solution (no Back button in the heading, but you get the idea...). Save this in an HTML file in the dojox/mobile/tests directory of your Dojo install to run it. This is for Dojo 1.7.2.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Heading + TabBar</title>
<link href="../themes/iphone/base.css" rel="stylesheet">
<link href="../themes/iphone/TabBar.css" rel="stylesheet">
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true"></script>
<script type="text/javascript">
require([
"dojo/ready",
"dojo/_base/array",
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/compat",
"dojox/mobile/ScrollableView",
"dojox/mobile/TabBar"
], function(ready, array){
ready(function(){
var f = function(view, moveTo, dir, transition, context, method){
var child = array.filter(this.getChildren(), function(w){
return w.moveTo === view.id; })[0];
if(child){
child.select();
heading.set("label", child.get("label"));
}
};
tabBar.subscribe("/dojox/mobile/afterTransitionIn", f);
tabBar.subscribe("/dojox/mobile/startView", f);
})
});
</script>
<style>
html, body{
height: 100%;
overflow: hidden;
}
</style>
</head>
<body style="visibility:hidden;">
<h1 jsId="heading" data-dojo-type="dojox.mobile.Heading" data-dojo-props='fixed:"top"'>Heading</h1>
<ul jsId="tabBar" data-dojo-type="dojox.mobile.TabBar" data-dojo-props='fixed:"top"' style="border-bottom:none;">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-16.png", icon2:"images/tab-icon-16h.png", moveTo:"featured"'>Featured</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-15.png", icon2:"images/tab-icon-15h.png", moveTo:"categ"'>Categories</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-10.png", icon2:"images/tab-icon-10h.png", moveTo:"top25"'>Top 25</li>
</ul>
<div id="featured" data-dojo-type="dojox.mobile.ScrollableView">
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"categ"'>
Categories
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"top25", transitionDir:-1'>
Top 25
</li>
</ul>
</div>
<div id="categ" data-dojo-type="dojox.mobile.ScrollableView">
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"top25"'>
Top 25
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"featured", transitionDir:-1'>
Featured
</li>
</ul>
</div>
<div id="top25" data-dojo-type="dojox.mobile.ScrollableView">
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"featured"'>
Featured
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"categ", transitionDir:-1'>
Categories
</li>
</ul>
</div>
</body>
</html>